29 заметок с тегом

айфон

Позднее Ctrl + ↑

re:Store: 4/4

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

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

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

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

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

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

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

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

2012   re:Store   айфон   апп-разбор   магазин

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

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

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

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

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

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

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

TCS Bank: 5/5

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

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



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

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



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



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



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

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

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

Окно в четвёртое измерение

Пространственное воображение — крутая штука, его полезно развивать и детям, и взрослым. Когда с двух- и трёхмерными объектами всё понятно, приходит пора штурмовать четвёртое измерение.

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



Выйти за рамки привычной трёхмерной реальности поможет приложение 4th Dimension, в котором четырёхмерный куб можно в буквальном смысле «пощупать». Авторы приложения начинают с нуль-мерного пространства и постепенно, с шутками-прибаутками, подводят зрителя к идее четырёх измерений.



Четырёхмерный куб дают повращать в 4D и объясняют, как это работает.



Но самое крутое — это стереокартинки, которые, если их рассматривать по инструкции, добавляют трёхмерным объектам глубину и по-настоящему «взрывают мозг» :-)



Недостаток приложения в его повествовательной структуре: каждый раз, чтобы покрутить куб, приходится прощёлкивать все предыдущие экраны. Круто было бы иметь быстрый доступ к кубику, а заодно и к пентатопу (это четырёхмерный аналог тетраэдра), 3-сфере и другим объектам.

Как мы делали «Веб-наблюдатель». Чеклист

«Веб-наблюдатель» помогал официальным наблюдателям и простым избирателям следить за процедурой голосования на выборах Президента РФ. Приложение разработано командой независимых экспертов под руководством Ильи Сегаловича (Яндекс) и Алексея Поимцева (Progress Engine) в феврале этого года. Я отвечала за дизайн интерфейсов, нарисовала сайт, придумала логотип и способ отображения собранной информации.

Обстоятельства проекта были довольно необычными: мы начали работать над приложением и сайтом в конце января, при этом дедлайн — 4 марта — был окончательным и бесповоротным. Я жила в Таиланде и работала удалённо, остальные ребята находились в Москве. Но всё получилось: 6197 наблюдателей из Москвы, Питера, Башкортостана, Краснодарского края, Саратовской, Свердловской, Ростовской и других областей зарегистрировали с помощью приложения 11709 нарушений.

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

Ко мне список потенциальных нарушений попала в таком виде:
3.2 (Опечатывание стационарных и переносных урн/ящиков)
Видели ли вы лично пустые урны и то, как они при вас опечатывались?
Да: ОК
Нет:
Возможное_Нарушение_2(«НАБЛЮДАТЕЛЬ НЕ ВИДЕЛ ПУСТЫХ УРН ИЛИ НЕ ВИДЕЛ КАК ОНИ ОПЕЧАТЫВАЛИСЬ»)
{
= вы пришли поздно, или вы не пожелали это засвидетельствовать, и претензий вы не имеете
= вам не дали осмотреть пустые урны или не дали быть при их опечатывании и вы будете (или нет) подавать жалобу
= вы увидели в урнах бюллетени, и вы будете (или не будете) подавать жалобу
}
Пунктов было около сорока. Для простого приложения тексты оказались слишком сложными, поэтому в первую очередь я разобралась с формулировками. Вот что получилось:
Урны
предъявлены пустые ящики (да—…—нет)
урны опечатали при вас (да—…—нет)
(Фото пустых ящиков)
(Видео опечатывания)
Вариант ответа (…) подразумевает, что пользователь не располагает информацией по этому вопросу — это состояние во всех пунктах чеклиста было выставлено по умолчанию. Таким образом, мы не только сократили текст, но и избавились от второго уровня ветвления «возможно нарушение».

После недолгих экпериментов дизайнер Антон Бондарев нарисовал трёхпозиционный тумблер:



Первая версия чеклиста выглядела так:



В следующих статьях я расскажу про поиски фирменного стиля, оформление результатов и битву за главный экран.
Ранее Ctrl + ↓