Хотел поделиться примером вдумчивого и дизайна интерфейса. Это ютуб-канал Нейтана, дизайнера приложения для анимирования интерфейсов Флинто.

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

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

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

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

В общем, рекомендую и Флинто, и канал

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

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

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

Вот тут на странице справки пара предложений про это, а тут мужик на видео 15 минут объясняет с картинками.

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

Вот как выглядит нужное место интерфейса сейчас.

По ссылке «добавить аккаунт» — форма логина в какой-то (какой?) «другой» аккаунт:

Хорошо, просто и понятно было бы вот так. Хочешь еще один канал? Почему бы нет, пожалуйста, добавляй:

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

Короче, гугл — это пипец.

Сейчас полез в глубины справки, и всё оказалось ещё интереснее. Оказывается, на сайте есть вот прямо такая страница, с адресом youtube.com/channel_switcher :

С нее без проблем открывается вот такая, которая при создании канала создаст гуглгруппу самостоятельно:

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

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

Несколько мыслей по итогам презентации

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

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

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

Вот например, был такой клёвый концепт клавиатуры для айпада:

Вот его создатель пишет:

With iOS 8's keyboard extensions, my iPad keyboard prototype can finally exist!

— Daniel Hooper (@danielchooper) June 2, 2014

Так что это уже началось, и скоро мы увидим много клёвых штук.

Отдельно можно отметить сформировавшуюся концепцию агрегаторов данных. Хелсбук, Хоумкит — системы, когда вы можете получать данные из разных устройств, но все они агрегируются в одном месте. Это позволяет пользователю думать более масштабными категориями («хочу посмотреть про здоровье» вместо «надо проверить все приложения про здоровье от производителей всех моих гаджетов») а Эплам — контролировать весь юзер экспириенс.

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

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

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

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

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

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

Но один абзац заставил меня всерьез задуматься. Привожу его ниже полностью:
«Есть такой известный анекдот:

— Приборы!
— 15
— Чего 15?
— А чего приборы?

Такое общение называется high context. Мы подразумеваем наличие большого количества контекста у собеседника. Апофеозом для меня было когда-то имейл от админа с одним словом „Да“. Что да?
Оказывается, я у него спросил что-то в коридоре и он обещал посмотреть.
Американцы и часть европейцев принадлежат low context. Они наоборот, все подробно и аккуратно расписывают, как для идиота. Они этого ожидают и от нас.»

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

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

Очень хорошо это чувствуется, например, в сфере обслуживания. После Европы кажется, что в России просто невероятно хамский сервис. Но похоже что это не всегда объясняется именно хамством. Помните это фирменное выражение, с которым вам объясняют «очевидную» вещь, что сперва надо отстоять очередь и взять талон в регистратуре? И если там вам будут рады объяснить чего-то, что вы не знаете, то здесь незнание могут счесть ненормальным, «вот же на доске объявлений всё написано».

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

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

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

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

Итак, о чём этот рекламный плакат?
Похоже, он рекламирует группу компаний «Publicity» и параллельно сообщает, что ей исполняется 20 лет.

Чем занимается эта группа компаний? Судя по весам, либо юриспруденцией, либо торговлей. Если погуглить, выясняется, что в действительности — строительством спортивных объектов по госзаказам.

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

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

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

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

А вот то же самое, но спустя сто лет, в 1930, уже на поезде:

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

Интересно, есть где-нибудь подобные издания про Россию?

Вот я тут внезапно сообразил. Как-то раз я уже писал про погодные приложения и виджеты, и, в частности про то, что для того, чтобы узнать погоду есть отличный интерфейс — окно.

Так вот, в новом погодном приложении в ios 7 как раз именно он и реализован:

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

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

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

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

Скачиваем материлалы. Там градостроительная схема с отмеченными на ней автомобилями, таблица с данными подсчета, и немного технической информации, вот:

Иллюстрация

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

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

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

Текст

В скачанном файле тоже было сформулировано задание, вот оно:

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

Однако, задача не вполне верна. Во первых, сравнивать машины с пешеходами не совсем корректно. Во вторых, в данном примере абсолютное количество пешеходов сравнивается со средним количеством автомобилей.

Сформулируем основную идею: n% пешеходов занимают x% площади тротуара, а m% автомобилистов занимают y% тротуара.

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

Теперь нужно не забыть, что в автомобиле могут сидеть и пассажиры, которые тоже формально используют тротуар. Возьмем средний показатель по Москве: 1.5 человека на машину. Получаем: 297 человек, водителей и пассажиров, воспользовались тротуаром, как парковкой. Теперь можно подсчитать общее количество человек и их соотношение: 1909 пешеходов и 297 пользователей автомобиля, 86,5% и 13,5% соответственно.

Следующий этап: нужно подсчитать площадь. Машины приезжают и уезжают, ни о каком абсолютном значении говорить не приходится, будем считать среднюю площадь занятую автомобилями, и среднюю площадь оставшуюся пешеходам. В таблице есть результаты замеров количества машин на тротуаре на каждый час, это тринадцать срезов состояния тротуара, из них считаем среднее количество машин — 68 и, взяв среднюю площадь машины 2.5х5м, среднюю площадь занимаемую машинами — 68 х 12,5 = 850м²
То есть, автомобилисты занимают 850 м² из 1320, что составляет 64,4% тротуара, а пешеходы 470 м² (35,6%) тротуара.

Теперь мы имеем все данные, чтобы подставить цифры в нашу основную идею: Пешеходы, которые составляют 85,6% от пользующихся тротуаром, занимают лишь 35,6% его площади, а остальные 64,4% тротуара занято автомобилистами, которые составляют лишь 13,5% от всех, кто воспользовался тротуаром.

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

Данные

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

Таким образом, я переверстал таблицу, в частности изменил путающие часы на ясные временные промежутки, и оставил в таблице лишь три измерения: «Новых машин в час» «Машин на конец часа» и «Пешеходов в час»

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

Что в итоге?

В итоге получилась листовка подходящая для всех.

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

Такие дела.

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

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

Для всяких заметочек наладил себе комплект evernote + awesome note. Эвернот всё синхронизирует, имеет вебформу и вообще достаточно удобен, но приложение для айпада у него мягко сказать странное. Осом нот, в полном соответствии с названием осом — суперкрасиво, удобно, можно рисовать, создавать таски, прикладывать фотографии, разрисовывать фотографии, и все это в отличном интерфейсе. Единственное, чего не хватает  — автоматической синхронизации, но в целом связка работает хорошо.

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

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

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

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