о визуализации данных и жизни

Позднее Ctrl + ↑

When: 5/4

Пишет создатель приложения Сергей Минкин:

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

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

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

6 дней из 9 будет находиться выше, чем 50 из 200. То есть сортируется все «умно», и не стоит бояться, что сверху будут болтаться задачи с максимальным количеством пройденных дней.

Одобряю, что вы не сортируете дела «тупо» по количеству дней до предполагаемого дедлайна, а определяете актуальность по соотношению прошедших и оставшихся дней. Но меня смущает цветовое кодирование. Сейчас еженедельные занятия йогой, добавленные в пустой список, краснеют, но если в списке есть более актуальные дела, они проваливаются в конец и становятся белыми. Гораздо логичнее привязать цвет к актуальности: окрашивать просроченные дела ярко и угрожающе, приближающиеся — градациями розового, а отдалённые (менее 10% срока от последнего выполнения) делать белыми, независимо от других дел в списке. Это превратит равномерный, но бессмысленный градиент, в информативный индикатор: чем он светлее, тем спокойнее спит пользователь.

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

Я советую перенести будильник и паузу на экран редактирования, сделав их кнопками на дополнительной панели клавиатуры. Это избавит сценарий редактирования от «раздвоения личности» и позволит использовать стандартное для выбранной интефейсной схемы удаление. Кстати, анимации при добавлении объекта в начало и в середину списка лучше тоже использовать clear-овские, но это уже не так критично.

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

When — прекрасный пример простого по смыслу и продуманного в деталях приложения. Исправляйте недоработки и покоряйте мир. Удачи!

Кстати, Сергей Минкин участвовал в первом брэйнвошинге «Интерфейсы для айфона» весной этого года. Все участники после курса получают бесплатные советы по почте и попадают в рубрику «Апп-разбор» вне очереди.

Ещё раз о курсе

Курс «Интерфейсы для айфона» пройдёт на этой неделе — 9, 10 и 12 августа. Спешите записаться, пока есть места.

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

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

Читателям блога — скидка! При записи укажите в комментарии: «Из апп-блога».

re:Store: 4/4

Спрашивает сотрудник re:Store, пожелавший остаться неизвестным:

Я работаю в re:Store, и у нас есть правда клёвое приложение. Будет интересно узнать и о его недостатках, потому что таковых еще я не слышал.

Приложение re:Store повторяет функциональность интерент-магазина: каталог товаров, новости, адреса в офлайне и оформление заказа. С его помощью фанаты продукции «Эпл» выбирают и заказывают новый макбук с помощью одного лишь айфона — в дороге, в кафе, в очереди супермаркета.

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

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

Основной мобильный сценарий в отношении офлайновых магазинов — найти ближайший и проверить, есть ли в нём то, что я ищу. Человечность и эмоциональность экрана с сотрудниками, возможно, оправдывает лишний шаг до карты, но пункт «Магазины рядом» я рекомендую поставить на первое место в списке — он гораздо важнее «Всех магазинов». Ассортимент с ценами на экране конкретного re:Store придётся очень кстати.

Неактивная кнопка «В корзину» на экране товара — серьёзный промах. Вы считаете, что пользователь ошибся, если хочет купить товар, не уточнив модель, и перекладываете на него ответсвенность за не слишком очевидное интерфейсное решение. Гораздо правильнее после нажатия кнопки перейти к списку моделей с ценами, а когда пользователь уточнит свой выбор, вернуть его на экран товара и показать красивую анимацию «улетания в корзину». Идея с подстановкой адреса из записной книжки и сохранением его в приложении — отличная, ещё круче будет подставлять последний сохранённый адрес по умолчанию. А вот на последнем шаге заказа вы делаете грубейшую ошибку: просите авторизоваться или зарегистрироваться. Но зачем? У вас уже достаточно данных, чтобы доставить клиенту товар, больше того, у вас есть его номер телефона, на который при необходимости высылается код подтверждения. Но вы просите ещё раз ввести адрес электронной почты, придумать пароль, повторить пароль и ещё раз указать имя. Помните, чем больше шагов и полей требует заказ, тем меньше пользователей его оформят.

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

Как мы делали «Веб-наблюдатель». Лого и отчёты

Какую иконку выбрать для приложения? Объекты из реального мира (кабинки для голосования, урны и бюллетени) слишком громоздки и не отражают суть «Наблюдателя», логотипа и фирменного стиля у проекта не было.

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

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

Узнаваемая «восьмёрка» на клечатой сетке стала символом проекта и иконкой приложения. Чтобы объяснить разработчикам, как правильно построить объект по количеству нарушений, я нарисовала в фотошопе схему с формулами.

Мы добавили в приложение экран «Отчёт» с индивидуальными результатами и перекрасили тумблер в чеклисте.

С голубым переключателем приложение выглядит «более лучше» :-)

TCS Bank: 5/5

Как и в случае с Мегафоном, банк «Тинькофф Кредитные Системы» не заказывал мне разбор приложения. Но я регулярно им пользуюсь и хочу привести как пример простого и качественного сервиса.

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



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

Заголовки блоков на экране «Карты и счета» повторяют их содержание. Избавившись от повторений, можно освободить пространство, сделать более аккуратную вёрстку и улучшить читаемость.



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



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



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

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

Итого: даже с учётом дизайнерских недочётов приложение отличное. Побольше бы таких.
Ранее Ctrl + ↓