Какой способ организации информации кажется людям самым простым? На первом месте, конечно, выбросить все данные в мусор и забыть о них. На втором месте, я думаю, идут таблицы. Люди любят таблицы. Им они очень нравятся. Нравятся настолько, что компьютерам Эппл предрекали провал без программы для работы с электронными таблицами (что-то типа Numbers или Excel). И, если мне не изменяет память, именно для выполнения этой задачи был взят на работу очкастый мальчик Билл с его компанией Майкрософт, который жаждал добраться до Mac OS и вдохновиться ее идеями…

Так, я отвлекся, вернемся к таблицам. Я знаком с многими офисными работниками, которые даже обычные тексты набирают в Экселе — так им легче организовать нужные им куски информации в пространстве и работать с ними. Таким образом, любовь к таблицам среди народных масс необычайно высока. К сожалению, любовь не значит умение делать их удобными для восприятия. Я влюбился в ничтожно малое количество таблиц из всех встреченных мной. Да и то, к паре из них и я приложил руку, а скорее голос, потому что объяснял, что исправить. Остальные же таблицы вызывают у меня ощущение тюрьмы для информации — она может быть интересной, увлекательной, удивительной, но при этом заключенной в маленькую камеру, из которой не выбраться. А все остальные данные тоже сидят по своим камерам и на них одинаковые оранжевые комбинезоны.

К чему такое длинное вступление?

Когда мы начали работать над новым дизайном сайта Инвест-газеты, ответственный за весь проект сразу предупредил меня, что нужно ощущение журнала (все время работы я потешался над тем, что журнал назвали газетой ;). Значит, без элементов визуализации информации, в какой-то мере инфографики, было не обойтись. Если со всякими гистограммами, ненавистными круговыми диаграммами, картами и прочим было все понятно, то таблицы, даже грамотно составленные и красивые, были все теми же клетками для несчастной информации. В поисках решения мы перебрали несколько вариантов и остановились на одном, который выглядел удивительно простым и в то же время самым подходящим. Так я познакомился со спарклайнами.

Что такое спарклайны?

Словарное или очень точное определение можно прочесть в википедии, но до него я сам добрался только что (в русской версии вики спарклайны назвали искрографиками, что опять напоминает нам о странных переводах). Спарклайны — маленькие графики прямо в таблице или в тексте, раскрывающие дополнительную информацию о данных, представленных в определенной ячейке, но при этом не так точны как детальные графики. Например, если мы указываем стоимость мяса единорога, то график рядом с цифрой может показывать динамику изменения этой стоимости за последний год. Конечно, это не даст нам точных данных, но мы сможем проследить общую картину изменений. Как известно, мясо единорога подросло в цене за последний квартал, что и будет отражено на графике рядом с цифрой:

Как делать удобные спарклайны?

Для того, чтобы спарклайны помогали воспринимать информацию в таблицах, а не затрудняли ее чтение, сначала надо определиться, нужны ли они и в каких колонках. После этого надо принять важное решение: какую же из сторон информации в колонке следует иллюстрировать, а также, что за тип графика будет наиболее полезен? Если вернуться к описанному выше мясу единорога, то можно показывать динамику изменения цены, при этом указав среднюю величину, или популяцию однорогих животных (график в виде кривой и выделение другим цветом фона или полоской среднего значения). Далее будет несколько примеров, в которых весь этот текст становится удобным и понятным.

Но перед тем как перейти к картинкам-примерам (я — мастер нагнетания обстановки, правда?), хочу остановиться на некоторых графических характеристиках спарклайнов. Многие из них, если не все базовые, перечислены и проиллюстрированы Эдвардом Тафти (он и придумал название спарклайнам) еще в 2004-м году в статье Sparklines: theory and practice. Многие решения и выводы у нас с ним совпали, хотя я прочитал его статью в конце работы над спарклайнами.

Как же все-таки это выглядит?

Ниже несколько примеров, которые я делал для Инвест-газеты. Поскольку мне надо было показать разные типы спарклайнов, а рисовать сто-пятьсот-миллиардов таблиц не хотелось, я постарался уместить как можно больше данных и спарклайнов в каждую таблицу. В итоге их получилось три. Они хороши в качестве наглядного пособия, но делай я их для публикации в журнале или на сайте, я бы ограничился в каждой из таблиц иллюстрированием только одной колонки.

В этой таблице проиллюстрированы спарклайнами колонки с последней зафиксированной температурой (Last known temperature) и приятностью запаха воздуха (How likely air smells). Во втором случае используется похожее на progress bar решение, что позволяет быстро и удобно воспринимать информацию.

В колонке с температурой показана динамика ее изменения на протяжении времени года и отмечен диапазон значений температуры, в котором человек чувствует себя комфортно. Благодаря спарклайнам нам удалось не только показать как скакал столбик термометра, но и дать общую картину того, насколько приятно и комфортно было в это время года. Превосходно! Единицы измерения температуры указаны рядом со значением — это была рекомендация по общему оформлению таблиц на портале. При небольших объемах информации так легче воспринимать данные.

Особое внимание хочу обратить на колонку продолжительности (Term). Вместо того, чтобы создавать две колонки для первого и последнего месяца времени года, достаточно указать их рядом в одной колонке. Меньше колонок — человечнее таблица ;)

В этой таблице спарклайны пригодились для обозначения того, какое количество домашних работ было не сделано из-за той или иной игры и для демонстрации побед и проигрышей в каждой игре.

Благодаря спарклайну в колонке невыполненных домашних работ (Homeworks spoiled) можно увидеть как часто с 1 по 10 класс та или иная игра завоевывала время и мешала сделать заданное домой.

В колонке результатов (Overall result) видно как хорошо или плохо в случае с Pong проходилась та или иная игра. Чем больше палочек вверху, тем круче!

В первой колонке производитель игры указан сразу после ее названия. Таким образом, сэкономлена еще одна колонка. Таблица не стала менее приятной для восприятия и даже напротив — более удобной.

Делая эту таблицу, я веселился больше всего, прикидывая, оценивая, спрашивая друзей и пытаясь вспомнить то, что обычно не помнишь.

Начнем с последней колонки — уровня громкости после 21 средней дозы (Music volume after 21 average doses). Данные указаны в децибеллах, что не мешает нам показать динамику изменения по ходу приема алкологя внутрь. Фактически это тот же график, что и в первом примере — динамика изменения значения — но оформлен он в стиле колонок эквалайзера, чтобы информацию было интереснее читать.

В колонке количества выпитых друзьями за 2005–2009 годы бутылок указано значение на начало периода (2005-й год) и на конец (2009-й), а также динамика изменений, скажем, по месяцам или даже по дням. Цвет цифры указывает на то, выросла ли цифра по сравнению с предыдущим отчетным периодом (начало 2005-го года). Для удобства чтения начало и конец графиков отмечены красными точками, а также добавлен легкий градиент, улучшающий их прочтение. Сравните с графиком в первом примере, где градиент был невозможен из-за указания диапазона комфортных температур.

***

Кроме украшения и превращения таблиц из тюрем в информационные курорты спарклайны помогают во многих случаях заменить различные детальные графические визуализации данных или даже представить информацию более полно и интересно, чем какая-то ничтожная круговая диаграмма (гори в аду!!!). Например, Google Analytics и Flickr активно используют спарклайны для более наглядного представления статистики посещений в сжатом виде или даже обозначения ссылки на статистику, как в случае с фликром.

Пример использования спарклайнов на фликре (вверху) и в Google Analytics

Раньше, для того, чтобы соврать, надо было придумать правдоподобную историю. В XXI веке все стало гораздо проще — достаточно сделать PowerPoint-презентацию. Действительно, рано или поздно любой дизайнер сталкивается с необходимостью наблюдать в доке прыгающую иконку похожую на букву «qoph» ивритского алфавита. Когда такое счастье выпало мне, я, невовремя вспомнив, что мелочей не бывает, решил героически создать красивую, хорошо, насколько это возможно, показывающуюся на любом компьютере под управлением любой ОС презентацию, создание которой не заставит меня ненавидеть весь мир. Я справился со всеми пунктами, кроме последнего — мир я ненавидел лютой ненавистью. Но есть и светлая сторона: я собрал несколько полезных сведений, которые очень помогли бы мне, знай я их приступая к разработке презентации. Как минимум, они могли бы сохранить жизни половине человечества.

Советы по созданию PowerPoint-презентаций

1. Все объекты, насколько это возможно, стоит рисовать в иллюстраторе или в другом векторном редакторе, который экспортирует в PDF и позволяет работать с RGB. Да, представьте себе, PowerPoint отлично понимает PDF и даже хорошо его отображает, не то, что WMF и прочие странные форматы.
2. Сотношение сторон слайда должно быть 4:3, чтобы показываться на любом странном ноутбуке. Стандартный размер мелковат (720×540), поэтому все растровые объекты я постарался свести к минимуму и сделать под разрешение минимум в два раза больше, а потом уменьшить в самом PPT.
3. Как можно больше объектов следует сохранять в PDF с встраиванием шрифтов. Те объекты, которые для этого подходят, следует располагать на фоне, учитывая, что у каждого слайда может быть только один фон и Powerpoint или растянет картинку фона, или расположит ее копии одну за другой (tile), так что лучше сразу создавать картинку размером со слайд.
4. Powerpoint умеет подтягивать нестандартные шрифты, что безмерно меня удивило. Для этого достаточно установить шрифты на компьютер, на котором будет показываться презентация ;) В некоторых необъяснимых случаях было достаточно поместить шрифты в одну директорию с презентацией.

   Так что отныне можно создавать действительно интересные слайды с несистемными шрифтами. К сожалению, могут быть проблемы с кириллицей и всегда надо проверять как открывается презентация с системными шрифтами. Обычно красиво и так, и так, только надо равнять текст не пробелами, а средствами для работы с текстом. Да, я много раз сталкивался с тем, что текст равняют пробелами ;)

5. Эффекты типа прозрачности, отражений, пошлых тенюшек и прочего лучше не накладывать прямо в паверпойнте: это не только, как ни странно, не уменьшит размер файла, но еще и будет забивать память компьютера. Если паверпойнту не хватит ресурсов на то, чтобы просчитать эффект отражения картинки, то он в лучшем случае не покажет не только отражение, но и всю картинку, а в худшем перезагрузит компьютер, а файл презентации сделает нечитаемым.
6. Следует по-возможности избегать темплейтов, потому что тексты в стандартных или самосозданных темплейтах могут вести себя так, как им заблагорассудится. Не знаю, чем это вызвано. Я стараюсь даже списки с маркерами создавать вручную — это уменьшает вероятность того, что вся информация на слайде «полезет». Как известно, если информация на слайде может показаться в нечитаемом виде в самый ответственный момент она именно так и отобразится.
7. Во всех случаях, когда text box можно увеличить, если в него не влезает весь текст, надо не забыть снять галочку Shrink text to fit в панели Alignment and Spacing. По-умолчанию она стоит, что заставляет текст съеживаться, если он не влез в очерченные для него рамки. В зависимости от версии паверпойнта эта функция глючит по-разному, но почти всегда вытворяет что-то невообразимое.
8. Самое главное: сохранять файл после каждого изменения и лучше локально. Сохранять следует под новым именем (Save as…). Некоторые версии паверпойнта, например, 2008 под Mac OS X, при автосохранении затирают файл, потом спорят сами с собой за права на доступ к файлу и ничего в него не записывают. Возможно эта проблема проявляется только у продуктов не приобретенных официально. В любом случае, каждый создающий презентацию рискует закончить работу с файлом, размер которого равен нулю байтов.

***

Я пробовал создавать презентацию в программе Keynote, которая намного удобнее, понятнее и быстрее, но экспорт в PPT не дает такого результата, как качественно собранная презентация в паверпойнте.

Последнее слово о Powerpoint-презентациях я предоставляю Дилберту:

Что испытывает обыватель, когда слышит названия Google, Apple, Microsoft, Flickr или Twitter? Он не начинает думать о технических характеристиках сервисов или о чем-то подобном. В первую очередь, у него возникает какое-то ощущение, касающееся этих компаний и сервисов, и лишь затем он начинает думать о том, как они работают или что из себя представляют. В одном из эпизодов Дилберта художник просит визуализировать ассоциацию с боязнью гусениц. Художник предствляет эту фобию как серый восьмиугольник, у всех же остальных другие ассоциации, причем, у каждого своя. То же самое происходит и с названными выше торговыми марками. Кто-то — мак-наци (я обожаю этот термин), кому-то другому компьютеры Эппл ненавистны, и они любят, наверное, Майкрософт или Линукс. Но у них есть вполне определенные чувства относительно компаний и их продукции. Люди наделяют их душой, и душа эта составлена из лоскутков словно Франкенштейн. Это демон, который не знает как ему жить и что делать со своим могуществом, чтобы не потерять его.

Впрочем, некоторые демоны знают, как, например, Эппл или Майкрософт. Эти компании начали с зарабатывания денег и с успехом продолжают свое начинание. Но что мы можем сказать о Гугле? Один из крутых дизайнеров и гуру, работавших в этой компании, не так давно уволился. По той причине, что не мог там больше оставаться. Дискуссии о том, стоит ли уменьшать рамку на 1 пиксель могут взбесить любого. Мало того, я готов поспорить, что большинство разработчиков не заметят разницы между рамками в 5 пикселей и 7 пикселей толщиной, особенно, если их не показывать рядом. Для них это просто не важно и, будем откровенны, им плевать. Что говорит увольнение дизайнера о почтовом сервисе гугла? Ничего. Но некоторые представители целевой аудитории, которые симпатизируют дизайнеру, а таких немало, могут усомниться, стоит ли им пользоваться услугами Гугла (ах, если бы у нас был выбор). Другим плевать на дизайнера и на Гугл, им надо коммуницировать позитивный имидж компании. Таким образом можно будет уменьшить количество лоскутков из которых состоит тело Франкенштейна, сократив его размножение личности. Повторюсь, что у Гугла сейчас нет конкурентов, поэтому им нечего беспокоиться. Но в скором времени такие конкуренты появятся, и я, на месте Гугла, начал бы подготовку уже сейчас.

Как-то мы работали с клиентом, который считал, что абсолютно незачем создавать бренд, пока рынок растет. Клиентов и так достаточно, деньги они приносят, зачем еще думать о каких-то брендах? Мы поинтересовались, что он будет делать, когда рынок перестанет расти? Клиент ответил, что тогда он и подумает, стоит ли заниматься брендом. Отлично, мы, хотя бы, согласны, что бренд необходим. Но важно также учесть, что бренд лучше создавать до того, как рынок перестанет расти. Это поможет авторитетно выделяться среди конкурентов и тех, кто только начал думать о создании собственных бренов. Также немаловажно то, что при растущем рынке выстроить свой бренд и проще, и дешевевле, и эффективнее, чем впихиваться потом в рынок, разделенный между другими игроками. Рынок нашего клиента перестал расти в конце 2008 года, как и большинство финансовых рынков. Те, кто построили бренды сейчас, по-прежнему на коне.

Итак, чем целостнее сущность и имидж бренда в умах целевой аудитории, тем выше к нему лояльность. Чем быстрее будет построен бренд, тем больше долгосрочной, а может и краткосрочной прибыли получит компания.

Краткое содержание фильма Pirates of Silicon Valley

Вчера я наконец-то посмотрел фильм про пиратов из силиконовой долины. Я читал книги о жизни обоих главных героев: как Стива Джобса, так и Билла Гейтса. Мне показалось, что в фильме не показано, какой на самом деле Стив Джобс ассоциальный маньяк, стремящийся к совершенству и заражающий энтузиазмом окружающих. Так же как не показано, насколько Билл Гейтс быстро мыслит и каким неприятным ботаном является. Оба хороши, оба как люди не могут вызывать приязни. Зато каждый — профессионал в очень похожих, но разных областях.

Что же касается самого содержания фильма, то допущены некоторые неточности, ведь Стив Джобс легально приехал в исследовательские лаборатории Xerox смотреть на интерфейс и даже, я не уверен, заплатил за это деньги. Вся команда Apple увидела прототип идеи и создала на его основе отличный программный продукт (революционный на то время). Майкрософт же воспользовался результатом их труда и украл не только идеологию работы ОС, но и продуманность ее взаимодействия с пользователем. Поэтому, используя метафору из фильма, мне кажется, что Apple — не великие художники. Они вдохновились и создали отличную картину, а вот Майкрософт — великие художники. Они взяли произведение искусства, испортили и… получили шедевр. Пусть не такой красивый, удобный и замечательный, но захвативший рынок.

Достаточно сравнить скриншоты калькулятора Mac OS 1.1 и Windows 1.01, чтобы пожалеть о том, что Билл Гейтс решил переплюнуть Apple и вместе с Nec помешал Стиву Джобсу запустить идеи перфекционизма в этот мир

В то время как Стив Джобс требовал лигатуры, кернинг и красивый интерфейс с иконками, Билл Гейтс требовал выпустить ОС раньше Apple, что не могло не отразиться на интерфейсе. Майкрософт успел и доказал, что миру не нужно совершенство, а нужны пусть не самые удобные и замечательные, но быстрые решения.

Фильм — напоминание перфекционистам, что добиваясь совершенства, не стоит думать, что остальные так же помешаны на грамотном выполнении любой задачи.

Этот пост — полная версия с картинками и видео статьи написанной для журнала MMR.

Все без исключения знают и уверены, что надо занять нишу пообъемнее, заполонить ее собой и властвовать там до тех пор, пока не случится кризис или Монстро не нападет на Нью Йорк. Уверенный взгляд и твердая походка современных крупных компаний, несколько подорванные бумом стартапов, который ни к чему не привел, сделали свое дело — ниши заняты, акции то растут, то падают, а жизнь продолжается. К счастью для потребителя и к несчастью для тех менеджеров, которые создают красивые гистрограммы роста числа потребителей и лояльности к бренду, мир оказался не так прост. Сейчас, когда изобретено уже многое из того, что лежало на поверхности, незачем каждый день опасаться инноваций, которые будут угрожать работающему бизнесу. Тем не менее, новые и даже революционные продукты появляются, захватывают новые пласты ЦА и начинают откусывать все более крупные куски от круговых диаграмм. Крупным компаниям, не говоря уже о мелких, не стоит сбавлять темпы исследований и поиска новых решений, иначе за них это сделают другие. В этом случае придется уже не стоять на холме под развевающимися знаменами и гордо смотреть вдаль, а идти в контр-наступление, отражая атаки более ловких конкурентов.

Майкрософт снимает остроумную рекламу и меняет логотип .NET, не говоря уже о более легком дизайне в стиле их новой концепции living without walls. Нокия выпускает, похоже, неплохой телефон с интерфейсом, в котором есть хоть какая-то логика. Плюс та же Нокия создает сервис с прослушиванием мелодий для тех, кто пользуется ее телефонами. Почему компании, которые не очень-то двигались в направлении успешного маркетинга и более человечных интерфейсов, не говоря уже о дополнительных сервисах, вдруг пошли на такие шаги?

Proud to be PC

Мне не верилось, но было очевидно, что в какой-то момент это все же произойдет. В ответ на сначала остроумную, а сейчас уже хамскую рекламу Apple, где молодой человек casual-вида ;) представляет Apple, а какой-то клерк-ботан в коричневом костюме — PC, Майкрософт создала великолепную «ответку». Они создали культ PC не под управлением Mac OS X. Во всяком случае, выглядит все так, будто это они и хотят показать. Каждый пользователь «виндового» компьютера с воплем «I’M A PC» стал членом огромного сообщества. Там есть и моя вторая любимая актриса Сандра Баллок, и какие-то другие люди с улицы (любой человек с улицы и со всего мира!), и, разумеется, Билл Гейтс.

В рекламных роликах снимут не всех кто подал заявки о том, что он или она — РС, но, наверняка, постараются уделить внимание максимальному количеству желающих. Клерк-ботан, который олицетворяет в рекламе антипод компьютерам Apple, рассказал о том, что он обычный человек, которой живет той же жизнью, что и все остальные люди. Просто он одевается так, как привык, и вряд ли этим отличается от всех остальных.

Независимо от одежды, он свободен и замечателен. He lives without walls в прямом и переносном смысле

На недавнем блогкемпе, DPE Майкрософта (я не знаю, как расшифровывается эта аббревиатура) Александр Орехов, представительный человек в костюме, со сцены объяснил, что это его стиль одежды, что он — PC, что в его возрасте в шортах и футболке ходить уже просто смешно, он любит носить джинсы, но на официальные мероприятия все же одевает костюмы — обязывает принадлежность к customer facing подразделению. На следующий блогкемп он пообещал прийти в casual одежде. Майкрософт подает явный сигнал: being Windows PC is ok! После того, как я написал Александру о том, что Майкрософт молодцы с ответной рекламной компанией, о которой я узнал от него еще до того, как она стала популярной по всему интернету, а не только в западной его части, он ответил мне ссылкой на windows.com и сообщил, что дразнить Майкрософт не стоит ;)

Apple высмеивает старания Майкрософта на рекламном поприще

Не останавливаясь на достигнутом, Майкрософт взялся за логотипы своей продукции для тех, кому эта компания выделяла меньше всего заботы в сфере дизайна, — для программистов. Обновился логотип .NET и изменился дизайн множества страниц.

Логотип .NET встретился с очень качественным редизайном

Телефон с медиатором

Во что я точно не верил, так это в то, что Нокии удастся выпустить телефон, который мне понравится. После всех возмущений, что айфон будет неудобным и корявым, финны все-таки присмотрелись к телефону Apple и поняли что делает его таким популярным. Без истории и без всего остального — multi touch interface и тонны музыки, которые можно купить (к сожалению, не в нашей стране). В этот момент случился эпохальный перелом в жизни компании: являясь одним из крупнейших производителей сотовых телефонов, компания Нокия могла продолжать высыпать на рынок миллиарды моделей в разных корпусах и с таким же интерфейсом как обычно, но в Нокии отреагировали на рынок.

Увидев, что даже без бесполезной тысячи-миллион-до-неба мегапиксельной камеры и возможности набрать текст с баянообразной клавиатуры айфон рвет рынок в клочья, финны сделали, как ни странно, правильные выводы. Надо создать удобный телефон с модным интерфейсом и, это удивительно, влезть не в свою сферу окончательно, открыв музыкальный магазин. Я надеялся, что это сделает SonyEricsson, но у них огромные проблемы с деньгами, так что, не смотря на все удачные предпосылки, пальма первенства у Нокии.

Что общего у Нокии и Майкрософта

Общее то, что без интервенции со стороны Apple не было бы ни великолепной ответной рекламной кампании, ни нового и, я надеюсь, наконец-то удобного сотового телефона с надписью Nokia на корпусе. Нет, возможно Майкрософт бы поменял дизайн и снял ролики не только с Зайнфилдом (я не понимаю смысла ни одного из них, кроме того, что очевиден огромный бюджет и гонорар для комедианта), а Нокия сделала бы новый телефон и, в это верится уже слабее, открыла бы магазин музыки, но все это выглядело бы иначе. Если бы не было айфона, то Нокия скорее открыла бы магазин приложений и игр, а не музыки, для того, чтобы бороться с Андроидом. Появление магазина приложений у Андроида без AppStore`a было бы вполне вероятно.

Работа над ошибками

Нокия только выпустила телефон, я не держал его в руках, поэтому об ошибках говорить рано. Самой большой из них будет не поддерживать продажу мелодий по всему миру, чем грешит Apple. Впрочем, может я отстал от жизни и не знаю, что музыкальная сеть Нокии охватывает весь мир?

Life without walls, но в рамках ;)

Майкрософт, несмотря на то, что они молодцы, должны осознать, что без толчка со стороны Apple они вряд ли бы так отлично завелись и понеслись вперед. Надо не останавливаться на достигнутом. Очень важно перестать отстаивать всю сферу производителей не-apple-компьютеров. Пора защищать свои продукты, в данном случае ОС Windows и все, что с ней связано. В прошлом году MacBook Pro был признан лучшим компьютером для работы с Windows Vista.

© Gearlog.com

Буквально пару недель назад на новенький MacBook Pro была поставлена Windows 7, которая существует еще в бета-версии. Майкрософту необходимо также показывать в своей рекламе молодых людей с компьютерами и ноутбуками Apple (это тоже РС), которые пользуются Windows! Тогда эта ответная рекламная кампания поможет выйти за рамки назначенные для Майкрософта ребятами из Купертино.

Второй раз в жизни, после того, как я держал в руках руль автомобиля Ford Mustang, у меня в руках вещь, которую я не хочу отдавать владельцу. Даже не смотря на то, что владелица — моя очаровательная девушка. Чуть ли не первый в Украине и вообще такой очаровательный новый MacBook не блестит стеклянным экраном и делает прикосновение к стеклянному touch-pad’у удивительно приятным и шелковистым. Как это принято: распаковали, сфотографировали, показали!

Процесс копания в коробке с ноутбуком увлекателен и интересен!

Little Monica смотрит снизу на нового соседа, а Monica спряталась за ними и даже не выглядывает

***

Вчера я чуть не разбил новенький макбук — мне пришлось устанавливать на него ОС Windows Vista. Моей девушке, которая будет обладать этим счастьем, к сожалению необходима эта операционная система для специфических экологических программ. Я ставил самую навороченную и лицензионную версию, т. е. ни о каком воровстве ПО речь не шла. И что же? Мне пришлось страдать два часа, прежде чем все стало по своим местам. Подумываю снести и поставить пиратскую XP SP2 (там хотя бы что-то привычно, даже если не очень удобно), но как представлю мучения по установке еще одной Windows… Сегодня поставлю Parallels или VMWare Fusion и посмотрю, как Vista функционирует с ними. Надеюсь, что не придется вновь удалять NTFS раздел, запускать Bootcamp (впрочем, эта часть как раз не вызывает нареканий) и проходить через все остальные круги ада ;)

Все началось с того, что wa11 нашел какой-то некрасивый ноутбук и спросил, нет ли чего получше, но только не Apple. Я никого не убеждал и не буду убеждать покупать компьютеры и ноутбуки под управлением Mac OS X, но действительно считаю, что эта операционная система лучше, чем любая версия Windows. Мне вообще всегда нравились графические надстройки на *nix. Итак, в комментариях появился Антон Тен размахивающий пламенным мечом просвещения. Выяснилось, что единственным смущающим в Mac OS X аспектом оказалось отсутствие кнопки, которой я в Windows никогда не пользовался. Речь идет о Maximize. Не знаю как в русской версии, наверное что-то типа Развернуть на весь экран. Да, действительно такой кнопки в Mac OS X нет, зато есть кнопка Zoom. И хоть кажется, будто функции у них одинаковые, это не так. Различия в действии кнопок очень хорошо подчеркивают идеологию и работу операционных систем Windows и Mac OS X.

Windows

В Windows предполагается, что если пользователя не устраивает стандартный размер окна, то он может просто развернуть его на весь экран, чтобы влезло побольше контента. Это, на первый взгляд, кажется логичной идеей и было бы таковой, будь у нас только одно окно. Что фактически получается при разворачивании окна на весь экран? Модальность! Мы не можем выйти за рамки этого окна, не видим, что происходит в других окнах и уж точно не сможем без труда перетащить из этого окна картинку на рабочий стол или в другое приложение. Уже для всех очевидно, даже написано у Раскина, с которым я недавно спорил, что модальным окнам и приложениям надо дать отпор. В многозадачной системе надо дать пользователю все возможности для работы с множеством задач, а не ограничивать его деятельность лишь потому, что не удалось придумать более удачного решения в интерфейсе.

+исключена деактивация окна случайным кликом за его пределами
+ менее загружен экран
+ на кнопке меняется пиктограмма, так что понятно, что произойдет с окном при клике на кнопку
– модальность интерфейса (выстрел по многозадачности)
– невозможность изменения размера окна распахнутого на весь экран в отличие от окна просто растянутого на максимальный размер
– усложняется использование технологии Drag & Drop

Mac OS X

В Mac OS X нашли другое решение для изменения размера и даже сути окна приложения. Распахивать на весь экран — не дело. «Не задавайте максимально возможный размер окна приложения по-умолчанию. Некоторые экраны намного больше, чем требуется для окна приложения», — говорит нам Apple Human Interface Guidelines. Вместо этого предлагается технология зуминга (от англ. zoom). На январской конференции Envision Event в Праге при обсуждении будущего интерфейсов и организации информации всякий раз приходили к выводу, что зуминг — перспективная ветка эволюции интерфейсов. Речь шла немного о другом зуме, но принцип тот же. Я уже упоминал о нем рассказывая, почему у Bump Top нет перспектив.

Итак, что же делает кнопка Zoom со стандартным окном Mac OS X? В самом простом случае, она просто меняет размеры окна таким образом, чтобы его содержимое было представлено наиболее оптимально. На моей Little Monica с разрешением 1024 x 768 пикселей большинство сайтов окажутся открытыми на весь экран, если я нажму на такую кнопку в Сафари. На Apple Cinema Display домашней Monica и рабочей Tough Monica это окно вряд ли займет половину экрана.

Разные состояния окна iTunes благодаря работе кнопки Zoom

В более сложных случаях, когда кнопка Zoom действительно занимается тем, что «углубляется» в возможности программы или напротив «отдаляется» от них, меняется общий вид окна. Хорошим примером может служить iTunes, у которого есть два состояния окна. В зависимости от того, что я делаю с программой, я выбираю то или иное состояние. Признаюсь честно, у меня обычно окно закрыто и музыка играет на фоне, а я ее не контролирую.

Такой принцип работы с окнами в Mac OS X вызван изначальной направленностью на максимальное использование Drag & Drop и многозадачности. Модальные окна не пройдут! ;) В некоторых программах, например в Adium’е, окно раскрывается на весь экран при нажатии на кнопку Zoom.

+ правильная и оптимальная работа с контентом
+ удобное использование Drag & Drop
+ немодальный многозадачный интерфейс
± на экране больше полезной информации, но он и более загружен
– возможна деактивация при случайном клике за пределами окна
– на кнопке Zoom всегда знак плюса, так что нельзя по ее состоянию понять, что будет с окном при клике

Вывод

Учитывая общие тенденции и то, что я остановил свой выбор на Mac OS X, будущее все-таки за многозадачностью, немодальностью и зуминговыми интерфейсами. Кроме того, я никогда не распахивал окна на весь экран, особенно окна броузера. Может быть это вызвано тем, что ширина моих мониторов и дисплеев не была меньше 1600 пикселей уже последние лет 8? Тем не менее, все окна броузера у меня обычно шириной со стандартный сайт, что и видно на скриншоте выше. Я считаю, что Maximize проиграл, а к мнимой загруженности экрана окнами быстро привыкаешь и даже находишь комфортной.

Если же руководствоваться тем, что пользователь должен сам решить для себя, как ему удобнее работать, то ничего не мешало бы Apple добавить еще один пункт в настройки, позволяющий пользователю выбирать каким образом он хочет взаимодействовать с окнами и их размерами.

Типичный пейзаж южной части Гренландии

Спросите у любого человека, знакомого с английским языком, но не имеющего представления о реальном географическом положении дел на Земле, с чем у него ассоциируется Гренландия. Готов поспорить, что рассказ пойдет о зеленых равнинах, ярком солнце и ветерке, колышущем целые поляны красивых цветов в лесах и на склонах гор. Если сообщить, что эта страна омывается океаном, то многие из опрошенных захотели бы взять легкую одежду и отправиться туда позагорать, а может и оседлать волну, занимаясь серфингом. Следует не забыть рассказать им о том, что Гренландией страну прозвали, скорее всего, в шутку. Единственная зеленая часть Гренландии — это, пожалуй, северное сияние.

Северное сияние в Гренландии. Фото nickrussil

Все дело в том, что мы можем судить о незнакомых объектах, только исходя из проекции накопленного нами опыта на их очевидные для наблюдателя характеристики. Будь названа описанная выше северная страна Вайсландией или даже Исландией (такая, кажется, уже есть), то опрашиваемый нами человек вспомнил бы и красивые белые айсберги, и холодный ветер, а может даже и северное сияние, но он точно не захотел бы заниматься там серфингом или лежать на пляже в одних плавках.

По тем же принципам формируется представление о любом интерфейсе, с которым приходится взаимодействовать пользователю на разных этапах жизни.

В USB-порт, равно как и в любой другой, пользователь будет пытаться вставить соответствующий штеккер, на кнопку нажать, тумблер переключить, а круговую ручку регулирования, например, громкости, крутить. Кстати, эта ручка в моей машине нажимается, что включает или выключает всю аудио-систему. Таким образом, она выполняет еще и роль кнопки, но это, как мне кажется, замечательное решение мы пока опустим.

Между прочим, обойдя всю свою квартиру, я так и не смог найти ни одного объекта, который бы управлялся тумблером. Максимум — выключатель света. Я надеюсь, что те тумблеры, которые я помню из детства, переключающиеся с характерным железным щелчком, остались хотя бы в вертолетах или самолетах.

Такое поведение пользователя в отношении элементов интерфейса делает их состоятельными. Не в том смысле, что они богатеют, а в том, что они справляются со своими функциями, и пользователь взаимодействует с ними на ура, понимая как обращаться с тем или иным элементом. Быть состоятельным для любого элемента интерфейса значит быть самим собой, а не каким-то хиппи с расплывчатой функциональностью и любовью ко всему окружающему ;)

Благодаря состоятельности кнопок и портов, мы смогли обозначить в руководстве пользователя взаимодействие с ними зелеными стрелочками, не уточняя следует ли вставлять штеккер в разъем или нажимать кнопку на передней панели системного блока. Таким образом, не обременяя пользователя избыточной информацией, которая ему и так известна, мы паразитируем на его привычках и опыте общения с аппаратурой

GUI и реальность

При создании графических элементов GUI приложений следует особенно настороженно относиться к их состоятельности. Со всеми объектами на экране пользователь общается при помощи мыши, клавиатуры или сенсорных технологий. В любом случае, если не обращать внимания на клавиатуру, он может лишь нажимать и отпускать кнопку манипулятора (палец или стилус на экран), двигать курсором (пальцем или стилусом) и отпускать кнопку (поднимать палец или стилус от экрана). Все элементы интерфейса находятся на двухмерном экране, и совсем не очевидно, что каждый из них представляет.

В ежедневной работе пользователь сталкивается с надписями, меню, кнопками, пиктограммами (иконками) и другими элементами интерфейса.

Кнопки и иконки

Попадая в удивительный мир Windows или Mac OS X (мир всяких Убунт настолько удивителен, что подразумевается по-умолчанию), пользователь, если ему дорога его информация, первым делом осознает, что файлы обозначаются иконками. Будем считать, что пользователь знает, что такое файлы и директории, которые он привык называть папками. Итак, для обозначения файлов есть иконки, для взаимодействия с ними есть всякие магические движения курсором с нажатой и ненажатой кнопкой мыши, а вот для вызова действия или его подтверждения есть кнопки. Кнопки отличаются от иконок прежде всего тем, что зачастую выглядят объемными.

Несмотря на то, что в разных операционных системах и даже программах кнопки выглядят по-разному, пользователь без труда идентифицирует любую из них как элемент, который можно нажать

При нажатии на кнопку она визуально нажимается, а иконка — выделяется.

Нажатая кнопка и выделенная иконка

Мало того, кнопка может находиться только внутри окна, она никак не может болтаться посреди документа или на рабочем столе. Речь идет о добропорядочной кнопке, разумеется. При этом она всегда остается кнопкой, независимо от своего положения. Максимум на что она способна — стать неактивной. Иконка же меняет свою функциональность в зависимости от того, где она находится. Способ взаимодейтвия с пиктограммами так же зависит от того, что они олицетворяют.

Иконки приложений Adobe CS3 в файловом менеджере Finder

Если пиктограмма обозначает файл или приложение на рабочем столе или в файловом менеджере, значит для ее активации следует два раза щелкнуть мышью. Если же пиктограмма расположилась в доке, то достаточно один раз нажать мышкой для запуска или активации программы.

Те же иконки в доке (Dock) Mac OS X. Dock — аналог панели задач Windows

При использовании пиктограммы в информационных целях щелкать по ней бесполезно — она просто дает нам лучше понять, что за программа копируется.

Иконки приложений Adobe CS3 используются для большей наглядности процесса копирования

Если же пиктограммы затесались в панель инструментов, значит их тоже можно нажать один раз. Не будем вдаваться в подробности почему пиктограммы имеют право находиться в панелях инструментов в Mac OS X на тех же правах, что и кнопки. Это тема отдельного поста.

Потеснив кнопки, пиктограммы расположились в панели инструментов

Как видно из всех возможных состояний пиктограммы, на нее, в зависимости от обстоятельств, следует щелкать мышкой один или два раза для выполнения разных действий. На кнопку же всегда следует нажимать один раз. Получается, что пиктограмма может быть состоятельной лишь в союзе с ее местом обитания, в то время как кнопки всегда состоятельны.

С появлением Windows 98 родились так называемые flat buttons. Они позволяли прятать границы кнопки до тех пор, пока пользователь не наведет на нее курсор. Отображалась лишь пиктограмма или подпись, или они вместе. При нажатии кнопка нажималась как обычно, но стоило убрать курсор, как она вновь становилась пиктограммой, подписью или их союзом. Если я не ошибаюсь, то эти кнопки сумели дожить до Windows Vista, но теперь обозначают практически все-на-свете-что-тут-можно-нажать-дружище.

Эволюционировав визуально, flat buttons все равно остаются пиктограммой пока на них не наведешь курсор

На заре общения с компьютером и Windows 2000 моя мама не могла приноровиться к тому сколько раз кликать по кнопке в панели задач, сколько раз на строку в меню быстрого запуска и сколько раз на иконку. Я уверен, что смутили ее именно flat buttons в броузере, которые сводили на нет все мои рассказы о кнопках и иконках ;)

У каждой задачи образ особый

Благодаря навыкам и тому, как показаны элементы интерфейса, мы понимаем что с ними делать. В поля ввода надо вводить текст, из выпадающего или обычного списка выбирать одну из опций, а интерактивного подсказчика в Word’е — отключать. Наращивая навыки работы с ОС или приложением, пользователь начинает замечать и считать значимыми больше деталей, чем вначале. Это относится и к закруглениям углов поисковых полей, и к подчеркиванию ссылок на сайтах, а сейчас уже и в PDF’ах, и в электронных книгах, и вообще везде, где встречается гипер-текст.

Несколько способов спросить одно и то же. Несмотря на разный внешний вид, каждый элемент состоятелен. Список опций и выпадающий список избыточны для этой настройки, но все равно понятны пользователю

Даже если внезапно появилась идея модифицировать привычный вид какого-либо элемента управления, надо сразу оценить, насколько новый образ будет состоятельным. Не вызовет ли он у пользователя замешательства, и не понадобится ли тому переучиваться или тратить время на обдумывание дальнейших действий. Несмотря ни на что, элемент интерфейса должен оставаться самим собой и всем видом подкреплять свою функциональность, в противном случае он просто станет невидимым — пропадет из информационного поля пользователя. Как минимум это помешает посетителю заказать товар, а как максимум — посадить космический корабль на Марс или предотвратить взрыв атомной бомбы.

Возвращаясь к заголовку поста: для элемента любого интерфейса важно быть самим собой и ни в коем случае не походить на кого-то из соседней деревни, а то будет скандал ;)

Всякий раз, когда я хочу написать о чем-то, взволновавшем меня сверх всякой меры, во мне опять начинает шелестеть кроной дерево сомнений. Так и в этот раз, когда по всему интернету звучали охотничьи рожки и слышалось: «Ату! Загоним эту лису и побьем все рекорды!», а вокруг многие молодые люди в футболках с надписями вроде «sudo make me coffee» ходили с горящим взором, я совсем не участвовал в истерии. Я не испытал азарта от нажатия на ссылку Скачать, и у меня не дрожали коленки, когда я перетаскивал иконку третьего Файрфокса на иконку директории Applications.

Может показаться, что мне вообще плевать на все броузеры кроме Сафари. Спешу заверить, что это не так. Радикальная перемена в интерфейсе одного из самых популярных броузеров заинтересовала меня довольно давно. Теперь же я смог, сжав на счастье кулачки, скачать этот броузер, по прежнему лелея надежду, что переделка достигла своей цели. Насколько я понимаю, цель заключалась в том, чтобы перестать выглядеть белой вороной в любой операционной системе, а гармонично влиться в ряды уже работающих программ. Проверить версию для Windows я не смог, потому что буквально пару дней назад я удалил раздел с XP для того, чтобы было куда сложить сериал My Name is Earl (включая второй сезон). Итак, радостно подпрыгнув пару раз, Firefox 3 ожил у меня на экране…

Что случилось?

Если среднестатистический пользователь отойдет на два шага от дисплея, а потом еще на три метра назад (желательно, чтобы за ним было пустое пространство, а то натыкание на стулья, грудастых секретарш, фикусы и динозавров может помешать чистоте эксперимента), то он точно и определенно скажет, глянув на окно броузера: «Стало лучше».

Так выглядит окно третьего Файрфокса издалека. Очень даже приятно

По мере того, как мы будем приближать его к изображению, его мнение будет меняться, плавно перемещаясь по шкале от «лучше» до «уж точно не хуже». Некоторые искушенные пользователи могут даже дойти до «мой племянник/друг в общежитии сделал бы лучше», но я с ними не согласен. Стал уж точно не хуже. Я пишу этот пост в Файрфоксе, между мной и ним примерно 40 см, и мы улыбаемся друг другу, хотя раньше я не замечал себя за тем, чтобы улыбаться программам. Тот случай, когда я глупо улыбался ICQ, потому что познакомился и начал общаться с моей очаровательной девушкой, не в счет. Просто улыбки не очень-то передаются по протоколу TCP/IP, поэтому я одарял ими интернет-мессенджер.

Почему же не лучше?

Новая версия броузера Файрфокс больше всего напоминает мне первые появления одного моего друга, имперского программиста, на одном закрытом блоге. Он приходил на сайт и матерился изо всех сил, мотивируя это тем, что тут так принято. Все увещевания и убеждения не работали — он искренне верил, что тут так принято и хотел, должно быть, занять место элиты. Впрочем, это удалось бы ему, даже если бы он отбивался. Глядя на окно Файрфокса у меня возникает ощущение, что создатели интерфейса сделали программу потому, что тут так принято.

С элементами интерфейса произошли странные метаморфозы: кнопки стали очень овальными, все поля ввода приобрели вид поисковых полей (обычно поле ввода прямоугольное, если только это не поле поискового запроса). Кроме того, у полей ввода адреса и поискового запроса в панели инструментов слева появились странные кнопки, придуманные создателями Файрфокса, но прежде не встречавшиеся мне в приложениях для Mac OS X

Плохо поддерживаются favicons с прозрачностью: отображаются они нормально, но либо на кнопке слева от поля ввода адреса, либо на закладке они будут неконтрастными из-за разной насыщенности фона. Бедняга Майкрософт — исключение: плохо выглядит и там, и там

Кнопка Back совсем не похожа на кнопку Forward, а скорее напоминает кнопку Play в iTunes. Приходит в голову игра слов playback. Из-за этой кнопки, из-под которой еще и торчит какая-то непонятная плашечка, панель инструментов занимает много места, особенно по сравнению с Сафари. Если для iTunes кнопки на панели инструментов — то, ради чего создавалась программа (проигрывать музыку), то вряд ли Firefox был создан для того, чтобы постоянно возвращаться к просмотренным сайтам. Использование такой огромной кнопки распирающей панель инструментов явно необоснованно. О стрелочке на плашечке, справа от Forward вызывающей выпадающее меню History и говорить нечего. Этот элемент пришел явно из другой операционной системы

Единственное, что как мне казалось должны перенимать все разработчики броузеров у Сафари — отображение процесса загрузки страницы прямо в строке ввода адреса. Это же очень удобно и крайне наглядно. Разработчики Файрфокс иного мнения на этот счет

Но работает-то лучше?

Когда у меня на компьютере стояла прошлая версия Файрфокса, то сначала она долго запускалась, потом думала о чем-то своем, после чего начинала грузить страничку, на которой про этот броузер рассказывается. Другие странички она тоже грузила, но поля ввода на них и странное потрескивание винчестера меня смущали. В связи со всем вышеизложенным, когда в одно утро иконка Файрфокса подпрыгнула три раза, замерла в верхней точке амплитуды прыжка и сообщила, что приложение само закрылось, я не испытал огромного расстройства. Из броузеров, которыми я не пользуюсь, у меня еще оставались Opera и Camino.

Если сравнивать с моим опытом общения со второй версией огненно-лисого броузера, то этот работает в миллион раз лучше. Я не знаю на сколько миллисекунд быстрее он рендерит странички или общается с DNS-серверами, но заметил, что в первый запуск он оккупировал всю свободную память. Ему даже удалось потеснить Photoshop и InDesign (до этого я не верил, что такое возможно)! Впрочем, уже со следующего запуска он скромно пожирал привычный для современных программ объем памяти, который в двадцать раз превышает объем всей оперативной памяти на моем стареньком 486 DX 4/100. Когда я приобрел для него еще одну планку на 4 Мбайта, моему счастью не было предела. В те времена Мбайты были честнее — в них содержалось 1024 Кбайта, не то что сейчас — 1000. Мбайты уже не те ;)

All your base are belong to us!

Любой, кто зайдет из под Mac OS X на сайт Firefox 3, сможет посмотреть сравнение этого броузера и Сафари. Счет 5:1 не в пользу последнего. Посмотрим, что же такого уникального в Файрфоксе, что Сафари может тягаться с ним лишь в том, что совместим с современными веб-страницами и веб-технологиями (это мне всегда казалось самым главным для броузера и любой программы, которая вдруг решила, что она может отображать веб-контент).

• Compatible with modern Web pages and technologies (это у двух броузеров общее)
• Active security features like anti-phishing and anti-malware
• Battle-tested security process and the industry’s fastest response times
• Thousands of ways to personalize your online experience
• 100% free and open source software

Если учесть, что тот же Сафари, с которым идет сравнение, абсолютно бесплатен, быстро работает и позволяет настраивать панель инструментов, то я не вижу, почему Файрфокс настолько круче. Может быть это прозвучит крамольно, но я не хочу персонализировать броузер, я хочу смотреть при его помощи страницы ;)

Так что же?

Отлично постарались! Нарисовали иконки, попытались хоть что-то продумать. К сожалению, не учли реалий операционных систем, ограничившись лишь кнопочками и иконочками, которые тоже не всегда подходят к окружающей их среде. Тем не менее, броузер стал намного лучше, избавился от уродливых полей ввода, обзавелся довольно интересным списком подсказок при вводе адреса и движется вперед. Поздравляю всех, кто ждал этого обновления и желаю больших успехов разработчикам и дизайнерам интерфейса ;)