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

Механизм установки маркеров

Несомненным плюсом является возможность сообщить о неприятности на дороге: пост ГАИ, ДТП, ремонтные работы или просто прокомментировать затор из-за проезда кортежа. Соответствующий маркер появляется на карте после того, как все заполнено. Вот только непонятно, почему его место выбирается исходя из положения автомобиля в момент окончания, а не начала создания маркера.

Вот, что произошло сегодня утром. На мосту Патона стукнулись на реверсе четыре машины. Проезжая мимо них, я попросил свою девушку отметить на картах Яндекса в айфоне, что тут ДТП на реверсе. Она нажала соответствующую кнопку, отметила «Левый ряд», поскольку варианта «Реверс» нет и уже собиралась сохранить маркер. Я вовремя ее остановил, потому что мы уже подъезжали к станции метро «Дружбы народов», и приложение решило, что ДТП произошло примерно рядом с домом мебели. Пришлось остановиться и вручную перенести маркер на несколько километров назад, в центр моста Патона.

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

Внешний вид маркеров

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

Очень редкий случай, когда понятно в каком направлении препятствие

Яндекс все равно «знает» направление движения ставящего маркер, так почему бы не запоминать его и не отображать его прямо на маркерах? Например так:

Слева текущая версия Яндекс.Карт, а справа улучшенная, благодаря даже небольшим стрелочкам, версия

Дополнительные плюсы в том, что водителям не придется заниматься пиксел-хантингом, размещая маркеры и в том, что даже на развязках будет понятно, где стоят посты ГАИ ;)

С таким улучшением Яндекс.Пробки станут действительно понятнее

***

Тоже о дорожном движении: пост о светофорах «Sorry, Mario, the Princess is right after the crossroads».

Сегодня утром Сафари решил, что с меня хватит — начал тормозить на ровном месте. Я открыл 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.

Прошу простить за качество фотографии, она была сделана каким-то Андроидным HTC первым айфоном

Как известно, я разбил стекло у своего iPhone 4 16Gb, который был куплен в Великобритании и никогда не отличался залоченностью под одного оператора. После того, как я поменял стекло на новое, я разбил заднее стекло у этого же айфона. Так что теперь задняя часть айфона выглядит так, будто ее украсили однотонным витражом, который выглядит очень забавно и при этом не оставляет порезов — очень крутое стекло. Поскольку к его созданию приложил руку я, можно смело заявить, что это «дизайнерский» айфон. В отличие от других дизайнеров, я не буду взвинчивать на него цену, напротив, я хочу продать его дешевле, чем стоит просто аналгоичный четвертый айфон у нас. Даже если кто-то решит нарушить красоту и поменять заднее стекло телефона, все равно его цена будет ниже, чем даже у б/у iPhone 4. Так что не стесняйтесь связаться со мной и стать обладателем уникального дизайнерского айфона.

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

Еще одна история о том, как важна каждая мелочь

Уже похолодало и я вынужден носить перчатки. На это есть две причины: я люблю перчатки и не люблю когда мерзнут руки. Сегодня утром я спешил на важную встречу и слушал музыку из телефона пользуясь стандартной гарнитурой четвертого айфона. Внезапно, на бегу, я понял, что мне просто необходимо узнать который час и не опаздываю ли я. Поскольку я не ношу часов (зачем, если они есть в телефоне?) я уже было собрался достать телефон из кармана, остановиться и посмотреть на его экране который час. Это решение диссонировало с концепцией «бежать для того, чтобы не опоздать». Практически не отдавая себя отчета в том, что я делаю, я зажал микрофон на гарнитуре (это включает голосовой набор) и прокричал после соответствующего звукового сигнала: «Который час?!». Уже к концу этой фразы я подумал, что телефон ответит мне противным сигналом, который значит «Ничего не понял, пока!», но я ошибался. Удивил меня приятный женский голос, который сказал: «Время — десять часов двадцать четыре минуты». Смешно, но от этого ответа у меня поднялось настроение ;)

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

***

Я не шучу! Мой дизайнерский iPhone 4 продается недорого. Пожалуйста, пишите электронные письма или оставляйте комментарии, если он вам понравился. Спасибо ;)

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

Поскольку мы планируем опубликовать печатный каталог «валькирий» в ближайшем будущем, но не сегодня, мы решили сделать что-то особенное, чтобы отметить эту сотню. Тут-то и появилось то, чего раньше нам встречать не приходилось, — электронная книга, набитая художественным материалом, как любой печатный каталог искусства или дизайна. В качестве формата электронной книги был выбран ePub. Его можно читать как на мобильных устройствах, так и на компьютерах. Получилось две версии художественного альбома (примерно по 15 мегабайтов каждая): Walkyrie × 100, которая должна работать с любой программой для чтениия электроных книг, и специальная версия для iBooks Walkyrie × 100 Interactive. Ссылки на обе из них также есть на walkyrie.org.

Зачем интерактивность

Идея создания интерактивного ePub, который можно было бы просматривать стандартными программами на ай-устройствах, посетила меня давно, но я не уделил ей должного внимания. Однажды ameagari поинтересовался в своем твитере, не встречал ли кто такого чуда. Я не встречал и, мало того, не нашел во всем интернете настоящей интерактивности. В который раз пришлось все делать самому ;)

Это было непросто

У моего друга есть привезенная из Нью-Йорка футболка, на которой написано «fuck rude people, fuck subways, fuck rain, fuck high prices…» и т. д. После создания интерактивной электронной книги я могу сделать такую же футболку, но вместе со словом fuck там будут еще webkit, z-index, font-family, jquery, iBooks. Ниже я расскажу почему.

Необычное для книг взаимодействие пользователя с каталогом «валькирий» осуществляется двумя путями. Во-первых, можно нажать на кружок (в формате SVG, чтобы красиво смотреться на любой странице) в начале книги и попасть на произвольную страницу с картинкой. Наша версия fortune cookie ;)

Кроме этого, если читатель не сможет разобрать текст на картинке, к его услугам ссылка Transcript, прикосновение к которой покажет текст крупнее.

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

Интерактивность не поддерживается большинством программ для чтения электронных книг, как мобильных, так и компьютерных, кроме iBooks, но и там все не очень хорошо. У создателя книги нет почти никакого контроля над начертанием и размером шрифтов, над выравниванием текста. Невозможно задать наложение элементов с использованием z-index’а и позиционирования без каких-то прыжков через голову. Невозможно задать расположение элементов на странице (мне пришлось пользоваться таблицами как в 2002-м). Невозможно удостовериться, что объекты будут на одной странице и не расползутся непонятно куда. Например, мы заметили, что если листать страницы вперед, потом назад, а потом опять вперед, то может появиться пустая страница. Тут не мешало бы вспомнить футболку, о которой я рассказывал чуть выше:

Уловки и советы

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

Любой файл ePub представляет собой засунутую в архив мешанину из всяких служебных файлов, а также, что важно для нас, содержания книги, представленного .xhtml’ами с CSS и JavaScript’ом, а также всем тем, что необходимо для книги (например, картинками). Я создавал ePub’ы при помощи Sigil. Эта программа была выбрана неслучайно. Во-первых, у нее правильное концептуально и магически название. Во-вторых, она, в отличие от многих других, работает и существует под Mac OS X. Ну и еще она opensource, если кому-то это важно. Сокращенная версия структуры книги в неудобном как для просмотра, так и для редактирования (привет, opensource) древовидном состоянии представлена ниже.

Для того, чтобы работать с объектами на странице, я пользовался jQuery. На прикосновения он реагирует так:

1. $('#transcript').bind('touchstart', function(e){
2. …
3. });

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

1. var tra=$('.help').height()+30;
2. $('.help').css('-webkit-transform','translateY(-'+tra+'px)');

Как встраивать SVG, думаю, все знают, так что там ничего особенного, только куча этих Midxmidymaxymidy ;)

Читать нельзя потрогать

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

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

Так или иначе

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

Как и положено арт-объекту, каталог «валькирий» выделяется на любой книжной полке. Даже виртуальной!

***

Это уже второй проект, связанный с электронными книгами за последние полторы недели. Занял он у меня не намного больше времени, чем предыдущий. Мне кажется, грядет что-то интересное ;)

За последнюю вечность я так и не написал ни одного поста. Теперь же я вернулся и надеюсь, что мои черновики не заплесневели — буду писать и постить! Писать и постись! Как лучше всего заставить свой мозг очнуться и начать работать? Сделать что-то интересное и ресурсоемкое. Этим мы с Юрой и занялись. Мы взялись сделать проект за 24 часа. На него у нас ушло около 33-х часов. На двадцать шестом часу мы стали подозревать, что не укладываемся в сутки, а на 30-м уже были уверены, что немного опаздываем. Так или иначе, проект мы завершили, и один из нас отправился ужинать, а другой — писать пост, уснул лицом в клавиатуре и только сейчас нажимает кнопку «Опубликовать» ;)

Идея проекта

Идея проста и этим привлекательна — дать пользователям айфона читать книги без установки дополнительных приложений. Мне она понравилась тем, что я люблю простые и изящные решения. Юра же был заинтересован в ней невероятно, потому что на свой залоченный айфон он не мог установить ни одно приложение. Исходя из поставленной задачи (никаких установок из AppStore или Сидии), мы поняли, что придется делать настоящее html-приложение. Я не помню, как их называет Эппл ;)

Проектирование

Первые наработки, созданные более полугода назад, напоминали приложение iBooks, которого тогда еще не существовало. После присоединения к проекту я предложил идею «отдельная книга — отдельная иконка». Таким образом, каждая книга становилась отдельным приложением. Вся библиотека была на сервере, а у пользователя только то, чем он пользуется. Кроме этого трендового подхода к организации информации был и еще один плюс — чтение книги заключалось только в чтении и ничего лишнего. Сделать что-то еще с книгой было невозможно. К минусам данной идеи стоит отнести неудобство хранения больше двух-трех книг теми, у кого на экране айфона много иконок. Мы решили, что можем с этим смириться, а выход iOS 4 доказал, что мы приняли правильное решение: теперь книги можно дюжинами складывать в папки.

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

На данный момент поддерживаются .html и .fb2, но мы добавим и другие в скором времени.

Интерфейс

Наконец-то картинки ;) Можно было сравнить макеты с готовым продуктом, но в данный момент сайт не работает. Мы работаем над тем, чтобы восстановить его как можно скорее.

Все началось с иконки приложения и различных размеров для нее. Я надеялся, что html-приложения тоже могут иметь различные иконки в зависимости от разрешающей способности экрана, на котором они показываются. Оказалось, что не могут ;(

Затем пошли страницы, экраны и длинные списки. Как только пользователь попадает на сайт приложения, он может найти книгу и посмотреть каталог книг или создать книгу из файла в интернете. Результаты поиска и каталог книг выглядят одинаково, разве что в каталоге можно отфильтровать книги по жанру.

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

Иконка книги добавляется на Home Screen, и так завершается первый этап.

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

Вот так просто и вот так здорово ;)

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

Интересные детали

• Весь интефейс на 100% создан в векторном редакторе
• Все иконки и логотипы в приложении в векторном формате SVG
• Все графические элементы кроме иконок, логотипов и плашки в форме стрелки, сделаны на чистом CSS. Да, именно так! Эти градиенты, тени и фоны не картинки, а строки в файле со стилями!
• Иконка сайта, которая добавляется на Home Screen для веб-приложений в iOS 4.0 выглядит размытой и некрасивой. Единственный способ победить эту проблему — обновиться до iOS 4.1
• Все использованные шрифты установлены по-умолчанию в айфонах, айподах тачах и айпадах
• Благодаря всему тому, что перечислено выше, приложение выглядит одинаково на iPhone, iPhone 3G, iPhone 3GS, iPhone 4 and iPod Touch всех версий. Результаты работы на айпаде ожидаются в ближайшее время ;)

iPhone 4 и обычный iPhone. Практически идентично ;)

Того, что происходило за кулисами создания приложения очень много, я не буду перечислять все. Один из примеров: поиск варианта отображения и организации загрузки книги.

Ого, сколько текста. Я столько не прочту

Отправляйся со своего айустройства на сайт проекта (скоро вновь заработает) для того, чтобы скачать книги прямо на рабочий стол и прочесть их позже. Никакого дополнительного программного обеспечения не требуется. Поддерживаются форматы .html и .fb2. Мы любим вас!

Скриншот сайта Пепелсбея isgeolocationpartofhtml5.com с отключенной геолокацией

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

Заходит парень в бар и не успевает открыть рот, как бармен ставит ему Космополитан и подмигивает. Парень недоумевает:
— Дружище, извини, но я хотел пинту Гинесса.
Бармен показывает экран своего HTC Legend¹ с включенным твиттером, где видно сообщение сайта Foursquare: «Люблю пить космополитан в дурацких забигаловках (@pub 4sq.com…)». Парень бьет себя по лбу:
— Черт, опять моя телефоны перепутала!

Найди Вальдо

В 10 лет я читал об этом в фантастических утопиях и антиутопиях. Большой брат следил за нами, а нам это не нравилось. Теперь все это рядом и под рукой. В новой версии Сафари, например, включена геолокация. Т.е. сайты теперь могут с точностью до скольки-то метров определять место нахождения пользователя. И это уже включено в ожидания от стандарта HTML 5, а значит будет или уже есть в Файрфоксе, Хроме и Опере. Появляется, конечно, окошко с вопросом, разрешать ли сайту определить координаты пользователя, но кто из нас не нажимал не глядя на окошко alert’a на Enter, чтобы побыстрее перейти к нужной информации?

Механизм Geolocation API я не разбирал, да и не хочу, но уже жду первых воплей о том, что сайты научились без спросу определять на карте мира, где находится пользователь, а RIAA этим пользуется и половина посетителей торрент-треккеров, прослушавших новый альбом Daft Punk (когда уже?) сидит по тюрьмам или платит невменяемые штрафы. Между прочим, Сафари так и не определил, где я нахожусь, ни с включенной геолокацией, ни с выключенной ;)

С другой стороны, если все сайты начнут пользоваться геолокацией, то я смогу запретить в настройках определять меня на карте мира и попрощаться с дурацкими локализациями Гугла, Реддита (отключается легко на самом сайте), YouTube и прочих сайтов, которые тыкают мне в лицо украинизированные или русифицированые версии. И это, конечно, не единственная польза от социальных сетей в связке с определением положения на карте (тот же Foursquare — пример грамотного и удобного использования — помог Анклу разобраться в незнакомом городе), но мне почему-то не спокойно. Мне кажется, что рождается дракон.

—

¹ Недавно меня попросили упоминать не только айфон, но и другие телефоны, в частности этот. Это не монетизация, но было бы неплохо ;)

Экран и кнопки сотового телефона должны быть с одной стороны, а динамик — с другой. Неужели это так сложно сделать хоть кому-то из производителей сотовых телефонов? Ведь как только наступает лето, сразу начинает прилипать к уху и щеке или пластик, или стекло экрана, которые потом надо вытирать от пота. Если это просто неприятно с обычными телефонами, то телефонами с тач-скрином (айфон и его братья от других производителей, не стойте в стороне, подходите) становится просто невозможно пользоваться, пока не протрешь экран. Разместив же динамик с другой стороны, можно не только решить эту проблему, но и оставить больше места для экрана!

Дополнение

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

Сегодня я купил сидр и встретил в траве медведя. Настоящий сидр и игрушечного медведя. А пару недель назад я нарисовал логотип, на котором изображен «анимешный лисенок» и название компании. Как по мне, получился скорее рисунок на футболку для фаната Файрфокса и Эппл, но логотипо-потребитель доволен. Ну и я доволен. Пойду пробовать сидр.

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

Вчера Стив Джобс рассказал о том, почему на айпаде и айфоне нет и не будет флеша и сгенерированных в среде разработки Adobe Flash программ. Кто-то воспринимает это как ужасное нападение на свободу личности и превращение Стива Джобса в Большого брата. Я считаю, что ничего страшного в этом нет. Я, чей сайт принципиально сделан с использованием Adobe Flash по объективным причинам («вес» самого сайта и правильная отработка всех событий), и кто написал немало постов об этой технологии. Вернемся к объяснению Стива Джобса. Оно четкое, понятное и, если относиться к нему непредвзято, объясняет позицию компании очень хорошо. Особенно хочу подчеркнуть ту часть, где Стив Джобс прямым текстом говорит: айфон и айпад просто не потянут Adobe Flash в текущем виде — батарейки будут садиться как сумасшедшие, процессор будет греться как сковородка, а происходящее на экране все равно будет тормозить. Объяснение, чем отличается для устройства показ видео в H.264 от показа видео во флеше, вообще достойно занесения в справочники. Просто и доходчиво: первое декодируется на специальном чипе, а второе при помощи софта, требуя кучу ресурсов.

Когда я узнал, что мой сайт не будет показываться на моем новеньком айфоне, я даже расстроился. Потом успокоился, поняв, что пользователь все равно не сможет пользоваться красивым разъезжающим меню, основанном на положении мышки на экране, потому что в touch-интерфейсах функции «курсор над объектом» просто не существует. Об этом Стив Джобс тоже упомянул (правда ссылку на мой сайт не дал ;).

Ответ Эдоби

Я ожидал, что Эдоби не вступит в дискуссию, которую ему ненавязчиво навязал Стив Джобс. Они очень много сделали в CS5 для развития интерактивной составляющей и нью-медиа, но сделали это на основе флеша. Мне понятно их недовольство и может даже смущение от того, что они могли стать первой компанией, которая предложит средства для создания интерактивных медиа для, не будем скрывать, скоро самого перспективного рынка планшетных компьютеров во главе с айпадом. Тем не менее, я уверен, что шагом Эдоби должна была стать встреча с Эппл и разговор с тем же Джобсом. Он любит общаться. Поговорить именно о нью-медиа, куда и целился Эдоби (стоит только посмотреть на развитие Индизайна в CS5 и это становится очевидным). Может быть модифицировали бы чуть-чуть формат PDF, и Эдоби снова был бы на коне, а Apple, Wired и Adobe сняли бы очередной ролик о том, как круто журнал Wired сразу попадает из верстки на айпад. Но нет, генеральный директор Эдоби Шантану Нарайен (Shantanu Narayen) решил по каждому пункту ответить «Эппл не правы, а мы тут все д’Артаньяны».

Думаю, что не надо объяснять, чем отличается директор Эппл от любого другого директора. Директор Стив Джобс умеет убеждать, объяснять и продавать. В других компаниях для этого есть евангелисты и специалисты по связям с общественностью. Я очень надеюсь, что именно они возьмутся за дело. Время за евангелистами Эдоби и экспертами, которых эта компания нанимает. Я общался с некоторыми из них, видел их работу и остался очень приятно впечатлен. Учитывая то, что Эдоби — солидная компания, которой не надо с пеной у рта кричать что-то типа «пусть кривой, но самый быстрый браузер, это всего лишь бета», они могут очень красиво построить коммуникацию и сотрудничать с Эппл для пользы всех, включая научно-технический прогресс.

На презентации Adobe CS5 все пользовались компьютерами и ноутбуками Apple. На всех мероприятиях Эдоби, на которых мне довелось побывать, используются именно они. Маркус Бледовски (Markus Bledowski), который представлял пакет программ для post production, начал презентацию на каком-то десктопном не-эппл компьютере под управлением Windows 7. Сделал он это, потому что его компьютер — двухлетний беленький макбук. Маркус не выдержал сражения с интерфейсом, как мне показалось, и в дальнейшем демонстрировал все программы и работу с ними со своего макбука, все время повторяя: «Смотрите! Даже на моем белом малыше не тормозит, как круто Эдоби все оптимизировали!».

Впрочем, на Envision Event устроенном Майкрософтом в Праге, почти у всех приглашенных экспертов тоже были ноутбуки Эппл ;)