Я взял фотографию

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

В этом и скрывается весь великий смысл "Я взял фотографию" в Instagram'е.

О дизайне графиков

Недавно обратил внимание на один график в программном обеспечении Google Analytics.

Здесь мы видим сравнение двух показателей: синей линией показано количество посещений (Visits), а голубой — количество уникальных пользователей (Unique Visitors). Еще раз посмотрите на график и дайте ответ на вопрос, чего больше: посещений или уникальных пользователей? Может показаться, что правильный ответ — "уникальных пользователей", но этот ответ неверный. Во-первых, он нелогичен, потому что пользователей всегда меньше, чем посещений. Во-вторых, если мы наведем мышкой на линии графика, то нам покажут подсказку:

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

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

Сайт ХНУРЭ 20х2 года

По заявкам читателей

Читатель Максим попросил написать заметки об удобстве пользовательского интерфейса в Эклипсе.

Дорогой Максим!

Я еще не успел воспользоваться всеми преимуществами интегрированной среды разработки «Затмение» версии 3.7.1, артикул M20110909-1335, потому что вот уже как два часа подряд не могу поставить в нее Google AppEngine Toolkit. Тем не менее, уже при установке расширений я начал замечать интересные особенности пользовательского интерфейса.

На рисунке ниже показано окно прогресса установки расширения в IDE Eclipse 3.7. Мы видим линейку прогресса, видим описание текущей операции. Нам доступны следующие команды: выполнить установку в фоне, отменить установку, показать подробную информацию.

Классика жанра: любой процесс установки сразу прыгает до 50% в момент запуска, висит в этом состоянии бесконечно долго, а затем мгновенно прыгает до 100%. Таким образом, линейка прогресса в этом случае полностью теряет весь тот смысл, который в ней был заложен.

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

Здесь мы видим тот же самый индикатор прогресса и описание выполняемой команды. Еще можно отметить фразу «Installing Software», которая в столь маленьком окне упоминается аж четыре раза. Кнопка «Подробнее» также не выполняет ту функцию, которая следует из ее названия. Никакой новой информации для пользователя здесь нет. Сложно себе представить программиста, настолько отрешенного от объекта своего труда, способного запрограммировать такую ахинею. Но как показано выше, в команде разработчиков Эклипса такой есть как минимум один.

На мой взгляд, причина подобной дегенерации заключается в следующем: в нашем мире все еще слишком мало качественного программного обеспечения. С глубокого детства мы пользуемся плохим программным обеспечением. И много ошибочных шаблонов уже зашиты у нас глубоко в сознании. В примере таким ошибочным шаблоном является наличие кнопки «Подробнее». Но если нечего больше показать, может эта кнопка и не нужна? Даже если показать больше нечего, программист все равно делает эту кнопку, не отдавая себе отчет, потому что он привык к этой кнопке с детства. Или задумайтесь, например, что значат символы << и >> на этой кнопке? Мы этого никогда не узнаем, потому что тот человек, который первый начал их применять, уже давно не с нами.

Можно привести еще несколько примеров. В любой даже самой простой программе должны быть настройки (Options, Settings). А должны ли они быть? В любой программе должно быть меню с обязательными разделами File, Edit, Window, Help. А нужно ли это меню? В каждой программе должен быть тулбар. А должен ли он быть? И так далее.

To clarify add detail. Edward Tufte

Даты в таблицах

Год назад обсуждали дизайн таблицы почтового клиента Микрософт Аутлук. Сегодня поговорим о таблицах в Тандерберде.

При эксплуатации почтового клиента Мозила Тандерберд, у меня часто возникает такой сценарий. Я открываю папку «Исходящие», и визуально просматриваю список отправленных писем, начиная с последних и дальше вниз (в прошлое). Например, помню что письмо отправил несколько дней назад, но в какой именно день — не помню. Нужно посмотреть какие вообще были дни, чтобы вспомнить.

На рисунке слева показано, как оно есть сейчас. Быстрый поиск дат дается с трудом. Постоянно повторяющийся фрагмент «10.2011» сбивает с толку. Из-за него кажется, что все даты одинаковые. Чтобы найти следующий день необходимо последовательно считать каждую строчку. Например, попробуйте подсчитать сколько разных дней показано в таблице слева.

Такое представление явно избыточно. На рисунке справа предлагается улучшенный вариант. Здесь дата указывается только один раз для одного дня. Теперь поиск по дням происходит намного быстрее. Чтобы перейти к следующему дню достаточно лишь перенести взгляд к следующей дате. Попробуйте посчитать количество разных дней еще раз. Чувствуете разницу?

А то, что часы и минуты не выставлены по весам разрядов — это вообще детский сад, который объясняется ленью программистов. Обычно структура типа DateTime сериализуется в формат dd.MM.yyyy HH:mm в виде одной строки, и никто уже не хочет заморачиваться, что в часах может быть как две цифры, так и одна. Тем не менее, это не является оправданием.

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

Дизайнеры Гугла сходят с ума

Дизайнеры Гугла потихоньку сходят с ума. Сегодня заметил, что в поисковой выдаче они поменяли цвет посещенной ссылки. Привет дальтоникам!

А ещё они перестали подчеркивать ссылки. Попробуйте угадать, что на этой странице кликабельно, а что нет.

Ну и напоследок можно полюбоваться модными узкими скролл-барами.

Схема Алексеевской линии метро

В прошлый раз редакция нашего блга писала о дизайне схемы Холодногорского-заводской линии метро. Сегодня из достоверных источников получена фотография схемы Алексеевской линии.

Из пиктограмм понравились «Мороженное-рожок», «Урна», «Лунная дорожка» и «Какая-то хреновина».

Новый дизайн схемы линии метро

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

Пролетарская — молоток и штангенциркуль.

Тракторный завод — трактор.

Им. О. С. Масельского — завод (прежнее название «Индустриальная»).

Им. Советской армии — щит.

Маршала Жукова — орден.

Московский проспект — Спасская башня Московского Кремля.

Завод им. Малышева — танк.

Спортивная — футбольный мяч. Переход на Метростроителей — вагон метро.

Проспект Гагарина — Спутник-1.

Советская — здание горсовета. Переход на исторический музей — музей.

Центральный рынок — весы.

Южный вокзал — паровоз.

Холодная гора — гора.

На мой взгляд, стало чуть-чуть лучше, чем старая схема на синем фоне с уродскими кружками. Но до нормальной схемы ещё далековато.

P. S. Тут обсуждается «а как правильно транслитерировать»? Кабмин Украины утвердил транслитерацию 27 января 2010 года. Согласно этому постановлению, станции должны называться так: Proletarska, Traktornyi zavod, Im. O. S. Maselskoho, Radyanskoi Armii, Marshala Zhukova и так далее.

Новости из психбольницы

Продолжаю изучать пользовательские интерфейсы Микрософта — ведущей корпорации по разработке офисных продуктов. В прошлый раз мы обратили ваше внимание на выравнивание числовых данных в Аутлуке. Сегодня речь пойдёт о сохранении файлов в Пауэрпоинте.

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

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

Значит, дизайнер всё-таки задумался о каких-то экстремальных случаях. Но, как видим, не для всех.

После прочтения книги Алана Купера «Психбольница в руках пациентов» всё чаще и чаще начинаю обращать на такое внимание.

Летнее время

Самое важное отличие Windows 7 от Windows XP заключается в том, что пользовательский интерфейс операционной системы начал поворачиваться к лесу задом, а к пользователю — передом. Один из интересных примеров показан на рисунке ниже. Виндоус, кроме того, что автоматом переводит часы, ещё и через речевой канал напоминает, что летнее время закончится ночью в 4:00 и часовая стрелка вернется на один час назад.

Ну и стандартный вопрос: а как там на Маке? А как оно там на Линуксе?

Выравнивание числовых данных в таблицах

Давно пользуюсь Микрософт Аутлуком, но только сейчас обратил внимание на такую деталь. Графы «Получено» и «Размер» не выравнены по порядкам. С датами и временем ещё полбеды, но с размером полный бардак.

Неужели дизайнеры в Микрософте не знают о том, что числовые данные нужно выравнивать так, чтобы порядки соответствовали?

А как дело обстоит в вашем любимом почтовом клиенте? Весь изволновался: а как оно там на Линуксе?

О дизайне онлайн-журналов

Когда-то говорили, что кино убьёт театр. А потом говорили, что телевизор убьёт кино. А потом говорили, что интернет убьёт телевизор, кино, театр, книги, журналы, радио. Но вот пока как-то живут все вместе. Интернет не стал заменой упомянутым явлениям. Он стал средой, через которую всё это можно доставлять потребителям.

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

Унабомбер пишет, что в интернете можно заниматься тремя вещами: потреблять информацию, обрабатывать информацию, производить новую информацию. Всё время, проведённое в интернете, является суммой трёх упомянутых активностей. И каждый очередной блог, добавленный в РСС-ридер, или каждая новая ссылка, полученная через твитер или асечку, нагружает первую активность: потребление контента. Тем самым вытесняя из жизни действия, связанные с обработкой информации и производством новой.

Ну ладно, ведь пост называется «О дизайне олнайн-журналов», давайте ближе к дизайну. Сегодня в очередной специализированной рассылке получил пачку статей об электронике. Заинтересовала лишь одна: «Do we need an international EDA roadmap?». В суть статьи вдаваться не будем, перейдём сразу к оформлению.

Из-за того, что полоса узкая, приходится ужимать изображения. Из-за того, что изображения маленькие, фразы читаются с большим трудом. Кнопки «Увеличить» нет. Картинки не кликабельны. Также печально видеть, как графики сжаты в формате JPEG. Попробуйте, например, прочитать, что написано в красном овале.

Или вот более тяжелый случай (из-за таблицы выглядывают уши Микрософт Ворда):

Можно просмотреть всю папку с изображениями. http://www.eetimes.com/ContentEETimes/ Из более 500 картинок, только 12 в формате PNG.

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

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

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

Форма и содержание — разные вещи, но они между собой напрямую связаны.

О дизайне в документации разработчика

Долго не мог понять в чем проблема, но только что разобрался и тороплюсь доложить вам. Заметил, что читая документацию в MSDN’е на душе становится как-то хорошо и спокойно, а когда читаю в doxygen’е, то как-то подташнивает.

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

Так вот, если меня интересует какой-либо класс из библиотеки .NET, то в MSDN’е описание выглядит так:

Здесь четко видно: секция «конструкторы» — один метод, секция «методы» — пять. Плотность подачи информации равна шести единицам. Давайте посмотрим на документацию в дефолтовом стиле doxygen’а:

Секции всё также видны, но так легко считать отдельные методы уже не получается. Визуально толстые синие ссылки доминируют над декларациями методов, и отвлекают внимание. Более того, на одном экране мы видим описание только трёх методов. Значит условная плотность равна трём.

Обратите внимание, как doxygen заботливо тип «unsigned» сделал ссылкой. Если вы забудете, что такое unsigned, то вы всегда сможете пройти по ссылке и узнать.

Важная часть документации — это не только описание, но и примеры исходного кода. В MSDN’е мы видим исходники в таком оформлении:

Раз, два, три, четыре — и всё. Четыре цвета. Исходный код в doxygen’е выглядит так:

Здесь же мы видим такие классы подсветки: 1) директивы; 2) ссылки; 3) ключевые слова раз; 4) ключевые слова два; 5) комментарии; 6) встроенные типы; 7) идентификаторы, пунктуация. Итого семь разных цветов. Понятно, что подкраска — это дело вкуса, но если пользователь и так знает, что на любой идентификатор можно кликнуть и перейти в место определения, то зачем лишний раз выделять ссылки синим цветом?

Ну и на последок уменьшенная в пять раз collaboration diagram из doxygen’а. Реально кто-то будет ей пользоваться будучи в реальном размере (3600 на 1500 пикселей, смотреть оригинал)?

В комментариях приветствуются ссылки на мануалы и личный опыт ведения документации, настройки doxygen’а и прочее.