Сегодня утром Сафари решил, что с меня хватит — начал тормозить на ровном месте. Я открыл Google Chrome и решил сделать его стандартным браузером во всей Mac OS X. Привычным путем я выбрал в меню Chrome › Preferences… и с удивлением не обнаружил реакции в виде нового окошка на свои действия. Я повторил вызов окна настроек, но опять не получил его. Оказывается, в окне браузера открылась новая закладка с настройками.

Гугл в который раз наплевал на удобство интерфейса. Всякий раз они делают с таким упорством и точностью, что у меня уже создается впечатление, что у них есть специальный отдел ужасного UX. Специально для таких безруких и безголовых ребят, как те, кто отвечает за интерфейсы в Гугле, в Купертино создали специальный набор правил и рекомендаций по созданию окошек, формочек и всего остального, что касается интерфейса. Благодаря продуманности этих рекомендаций и их относительной унификации, пользователи Mac OS X и получают такое удовольствие от работы с этой операционной системы. Даже Опера, которая достаточно вольно обращалась с интерфейсом одноименного браузера, не убрала окно настроек и не сделала его крайне неудобным ;)

Настройки

Вот так выглядит окно основных настроек в Сафари (похоже выглядит почти в любом приложении для Mac OS X):

Основные настройки браузера Chrome выглядят так:

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

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

в Хроме почти все настройки спрятаны под ничего не говорящим заголовком «Under the Hood» и представляют из себя перемешанное что попало.

Внешний вид

По сравнению с небольшой закладкой и всплывающим системным окошком в Сафари (шрифты в примерах меняются в зависимости от выбора в окошке)

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

Поиск

Гугл считает себя очень крутым поисковым сервисом и он заслужил это звание. В Хроме на поиск завязана даже неудобнейшая версия истории посещения страниц, которую я встречал. Увидев в закладке настроек поле поиска, я подумал, что это добавит хоть немного меда в ту бочку дегтя, которая уже есть. Я решил не концентрироваться на том, что если в настройках приложения необходим поиск, значит это Microsoft Word или просто беда с настройками. Ложку меда я так и не получил. При том, что в Mac OS X реализован замечательный и удобный механизм поиска по настройкам…

… Гугл пошел своим загадочным и непонятным путем:

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

***

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

Скриншот фрагмента сайта google.com с практически незаметным, но существующим отличием фона под видео

В честь дня рождения Джона Ленона (и за день до него) на google.com появился замечательный анимированный логотип, посвященный этому событию. Для того, чтобы им полюбоваться, небходимо зайти на google.com и кликнуть на логотип, на который вы никогда в жизни не нажимали и даже не знали, что он является ссылкой — на логотип Google. Но Гугл такой Гугл — ни один продукт не может быть сделан нормально до конца. Даже здесь цвета фона видео и страницы отличаются. Пора бы уже уделять больше внимания деталям, все-таки не стартап какой-то.

Всем тем, кто считает, что проблемы создает YouTube, хочу напомнить, что он принадлежит все той же компании Google. А если владелец сервиса не может справиться с искажениями видео, то что уж говорить об обычных пользователях?

Какой способ организации информации кажется людям самым простым? На первом месте, конечно, выбросить все данные в мусор и забыть о них. На втором месте, я думаю, идут таблицы. Люди любят таблицы. Им они очень нравятся. Нравятся настолько, что компьютерам Эппл предрекали провал без программы для работы с электронными таблицами (что-то типа 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

Отлично сказано: больше разговоров об инвайтах, чем о самой Google Wave. Я помогу Гуглу и поговорю о Google Wave. Сразу хочу выразить грусть по поводу того, что инвайтов у меня нет и, скорее всего, не было — узнать это каким-либо законным путем вряд ли возможно, потому что об инвайтах даже в разделе «Помощь» ничего не найти. О, Гугл, ты такой… такой… ррррр! Лишь потому, что пока действует система приглашений, не каждый может насладиться общением с этим, будем откровенными, гипотетически клевым, но практически бесполезным сервисом. Я опишу, как Гугл приложил все усилия, чтобы воплотить свою уникальную философию ужасного UX в еще одном интерфейсе. Не бойтесь, я кратко — расскажу лишь о трех самых вопиющих неудачах новинках в интерфейсе ;)

Google Wave собственной персоной

Полосы прокрутки

Эти мне не понравились больше всего. Такие блестящие штуковины, которые иногда позволяют прокручивать по всей высоте блока, а иногда лишь в его части. Поначалу я решил, что Гугл решил реализовать полосы прокрутки как на DesignCharts, но быстро понял, что ошибался. Полосы прокрутки на DesignCharts куда удобнее, чем разработанные для GoogleWave. Вообще-то, самой полосы нет, есть лишь бегунок. Нельзя кликнуть на фон и прокрутить на страницу вверх или вниз. Можно либо тягать сам бегунок, либо нажимать на нем стрелочки — в этих случаях какая-то темная штуковина на фоне будет двигаться в указанном направлении. Содержимое блока тоже прокручивается, но это не выглядит чем-то похожим на причину и следствие во время работы с полосой прокрутки. Конечно, мы привыкнем и к этому, пользуемся же мы Паверпоинтом, но почему бы не сделать удобно сразу, а не переучивать нас? UX! UX!

Если у вашей мышки есть колесо прокрутки, то вы сможете пользоваться им, что сделает работу намного удобнее. У меня Ваком и Mighty Mouse, так что мне пришлось смириться с работой с полосами прокрутки.

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

Работа с панелями

В то время как все двигаются вперед и знают, что модальные интерфейсы отжили свое, Гугл прокладывает собственную дорожку в стремлении создании чего-то неудобного. Мне кажется, что кнопки в заголовках панелей — предвестники интерфейса Google OS. И образцом для подражания, похоже, выбрана Windows XP. Добро пожаловать в будущее интерфейсов.

Итак, у нас есть три кнопки: свернуть вверх, развернуть и закрыть. Что они делают? Первая «сворачивает» окошко вверх к логотипу Google Wave — очень не очевидно (ожидаешь, что она просто свернет его в заголовок и оставит на том же месте) и, я уверен, большинство пользователей в первые разы ищут потерянные панели по всему экрану. Кнопка закрытия закрывает панель — ничего необычного. А вот кнопка развернуть устраивает ужасное «заполнить все 23″ этим контентом». Мне повезло — окно броузера не распахнуто на всю возможную ширину и высоту, так что «разворачивание» удалось локализовать.

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

Итог: если это прототип интерфейса Google OS, то создателям не помешало бы поискать ролевую модель лучше, чем копирование недочетов Windows XP.

Семантика

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

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

Итог: достаточно сравнить две одинаковые панели с кнопками, чтобы увидеть, что кнопки на них выглядят по-разному. Не так уж и целостно, не правда ли? ;)

Фанатам и фанаткам Гугла

Привет! Спасибо за то, что прочли. Я знаю, что Google Wave еще в стадии предпросмотра (создание бет и никаких релизов в течении тысячелетий — их стиль жизни) и я знаю, что все будет намного лучше. Я не очень-то люблю Гугл, но обожаю Gmail (который, вообще-то, считает, что все мои письма — спам) и ожидал Волн не меньше вас. Этот пост написан для того, чтобы помочь Гуглу сделать интерфейс получше. С Оперой почти получилось ;)

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

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

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

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

Обычно я открываю сайты в закладках: Cmd+T — URL — Enter, Cmd+T — URL — Enter, Cmd+T — URL — Enter и еще раза три. Так вот, если я первым наберу «gmail.com», то пока я молниеносно создам новую закладку, наберу первые буквы и выберу из списка вариантов «boingboing.net» броузер уже успеет загрузить страничку с почтой и переключит на нее фокус как раз в момент нажатия на Enter. Может быть это можно как-то отключить?

Это решительно невыносимо. Я открыл новую версию своего сайта и установил на нее счетчик. В ходе опроса почти всех знакомых, было выяснено, что счетчика лучше Google Analytics не найти. Пусть эта огромная компания горит в аду. Сначала они мурыжили меня больше полутора суток собирая информацию. Многим знакомо это чувство: открываешь долгожданный сайт и сразу же хочешь узнать, кто и откуда на него заходит. А также, в каком количестве. Google решил воспитать во мне самурая и эту информацию утаил. По прошествии суток я не выдержал и с помощью DM проанализировал логи сервера. На сайт зашло около 700 человек. Немало и приятно, как для открытия. На следующий вечер Google Analytics соизволил выдать статистику посещения genn.org в день открытия. Он насчитал, нет, это удивительно! Он насчитал 12 человек!