Разбираем интерфейсные детали на примере одного мобильного клиента такси

в 14:18, , рубрики: uber, usability, Дизайн в IT, интерфейсы, метки:

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

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

Экран заставки

Разбираем интерфейсные детали на примере одного мобильного клиента такси

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

Создатели логотипа U B E R знали, что делали. Есть и разрядка, и ручной трекинг букв.

Слоган же, набран кривовато: ни разрядки, ни правильных апострофов, ни здравого смысла. От того, что вы напишите «Microsoft. Your potential. Our passion» вместо «Microsoft®. Your potential. Our passion™» или не поставите значок копирайта в статье, законы не перестанут действовать, ваши права продолжат соблюдаться (при условии, что вы действительно обладаете этими правами). Поэтому старайтесь не пересекать юристов с пользователями без лишней необходимости.

Для новичков, не читавших прошлые посты, продолжаю рекомендовать Butterick’s practical typography.

Главный экран

Разбираем интерфейсные детали на примере одного мобильного клиента такси

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

Адресное поле

Когда из известных карт были только карты гугла, иконка-пин означала «You are here» (вы здесь) или кнопку открытия карты. С выходом мобильных телефонов с G P S иконка определения текущей локации превратилась в стрелку компаса. Гуглоиконка же не обозначает здесь ни переход к текущему местоположению, ни открытие карты (карта и так внизу), а обозначет открытие текстового поискового поля, где можно ввести адрес с клавиатуры.

Субъективно, не стоит смешивать в одном интерфейсе обе иконки (компас и «гуглопин») и, возможно, стоит заменить «гуглоиконку» на значок лупы, что стандартно и обозначает поиск.
Разбираем интерфейсные детали на примере одного мобильного клиента такси
Нельзя не отметить зауженный механически шрифт для адреса. Сделано для того, чтобы вместить весь адрес, но с учетом набора прописными и отсутствия разрядки, превращено в трудночитаемую надпись типа МИНЗДРАВПРЕДУПРЕЖДАЕТ. Здесь на пользу пойдет строчный набор (и влезет больше, и читаться будет на порядок лучше, как, например, это сделано на предыдущем скриншоте Садовнической набережной).

Ну и индекс в адресе, конечно, не нужен. А вот что нужно, так это запоминание предыдущих адресов:
Разбираем интерфейсные детали на примере одного мобильного клиента такси
При повторном открытии приложения через сутки вместо красивой лупы (к слову, отцентрованной по физическому, а не оптическому центру и, оттого, немного съехавшей влево на экране), лучше бы отображался список старых адресов.

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

Неизвестная кнопка и самый позорный раздел приложения

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

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

Это окно с информацией о тарифе, сверстанное самым позорным образом — все видно на скриншоте. Дополнительно стоит отметить момент с показом цифр, о котором я говорил еще в прошлых статьях: ну не показывайте вы 340,00 и 16,00, если это 340 и 16 рублей, соответственно. Обрезайте нолики: они не нужны и только мешают восприятию.

Если бы мы были не в Москве, то здесь же можно было выбрать другие типы машин (подороже или подешевле), но в Москве машин нет, и интерфейс обрезан снизу.

Плюс, здесь просто напрашивается кнопка запроса такси. Но ее нет, поэтому нужно возвращаться назад и думать, как заказать такси.

Как заказать такси

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

  1. Ткни пальцем, чтобы выбрать откуда ехать.
  2. «Откинься на спинку кресла и расслабься, пока водитель отвезет тебя в нужное место.
  3. Поставь рейтинг поездке.

Ничто не напоминает?

  1. Открой приложение.
  2. Тебя везут.
  3. P R O F I T !

А меж тем, то, что у нас спрятано в многоточии (и чего нет в «кратком руководстве») — самое важное (водитель же не телепат: сам не поймет, к кому и когда ему ехать). Пока, как видите, у нас не особо получилось заказать такси.

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

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

Чтобы на один шаг приблизиться к непосредственному заказу такси, нужно нажать на стрелочку „→“ сверху от булавки (в картах, обычно, это открывает информацию об организациях по выбранному адресу).
Разбираем интерфейсные детали на примере одного мобильного клиента такси

Это к вопросу изобретания велосипедов и неиспользования приемственности интерфейсов (здесь должна быть мем «Нельзя просто так взять и…» из «Властелина колец»). Гуглоиконкой и кнопкой запроса такси с иконкой такси (а на самом деле не запроса) дело не ограничилось. Кнопка отмены, может скакать из одного конца экрана в другой (плюс, справа — это даже не в соответствии со стандартами iOS).
Разбираем интерфейсные детали на примере одного мобильного клиента такси

Окно заказа такси (наконец-то)

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

Из-за этого же нельзя построить маршрут типа дом → вокзал → дом (если вам нужно встретить близкого).

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

Не забывайте про мелочи

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

Предложения по продукту

Если кто-то из отвественных за продукт в «Убере» дочитает до этого места, пусть держит бонус в виде предложений:

Автор: Piskov

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js