Продолжаем серию постов о том, как хорошие вещи можно сделать еще лучше. Под «хорошими» подразумеваем те, где первой и единственной мыслью не будет: «Неправильно всё, нужно всё переделать».
Тем, кому интересно учиться на чужих ошибках (или понять, что даже сотни миллионов долларов и лучшие специалисты не избавят вас от ошибок), а также коллегам Павла Фаге — добро пожаловать под кат.
Экран заставки (сплеш-скрин) — очень важная вещь: с этого начинается знакомство с продуктом, и он же маскирует недостатки ваших программистов. Так как вы бы не видели заставок, если бы приложение загружалось мгновенно. Иногда это ограничение платформы, а иногда просто лень программистов разделить загрузку библиотек, подгружая их по необходимости, а не всей гурьбой в момент старта приложения.
Создатели логотипа U B E R знали, что делали. Слоган же набран кривовато: ни разрядки, ни правильных апострофов, ни здравого смысла. От того, что вы напишете «Microsoft. Your potential. Our passion» вместо «Microsoft®. Your potential. Our passion(TM)» или не поставите значок копирайта в статье, законы не перестанут действовать, ваши права продолжат соблюдаться (при условии, что вы действительно обладаете этими правами). Поэтому старайтесь не пересекать юристов с пользователями без лишней необходимости.
Для новичков, не читавших прошлые посты, продолжаю рекомендовать Butterick’s practical typography.
Кнопка профиля живет своей интерфейсной жизнью во всем приложении. В том смысле, что она не вровень по вертикали ни с одним из элементов, на каком бы экране мы ни были, — всегда правее на несколько миллиметров.
Когда из известных карт были только карты гугла, иконка-пин означала «You are here» (вы здесь) или кнопку открытия карты. С выходом мобильных телефонов с G P S иконка определения текущей локации превратилась в стрелку компаса. Гуглоиконка же не обозначает здесь ни переход к текущему местоположению, ни открытие карты (карта и так внизу), а обозначает открытие текстового поискового поля, где можно ввести адрес с клавиатуры.
Субъективно, не стоит смешивать в одном интерфейсе обе иконки (компас и «гуглопин») и, возможно, стоит заменить «гуглоиконку» на значок лупы, что стандартно и обозначает поиск.
Нельзя не отметить зауженный механически шрифт для адреса. Сделано для того, чтобы вместить весь адрес, но с учетом набора прописными и отсутствия разрядки, превращено в трудночитаемую надпись типа МИНЗДРАВПРЕДУПРЕЖДАЕТ. Здесь на пользу пойдет строчный набор (и влезет больше, и читаться будет на порядок лучше, как, например, это сделано на предыдущем скриншоте Садовнической набережной).
Ну и индекс в адресе, конечно, не нужен. А вот что нужно, так это запоминание предыдущих адресов:
При повторном открытии приложения через сутки вместо красивой лупы (к слову, отцентрованной по физическому, а не оптическому центру и, оттого, немного съехавшей влево на экране) лучше бы отображался список старых адресов.
Понятно, что предоставляя «Мерседес эс-класса», можно считать, что целевая аудитория не будет тратить время на ввод адреса, а скажет его уже водителю, но проблема в том, что а) адрес можно не помнить; б) зачем тратить время в машине (за которое платит уже клиент), пока водитель вобьет этот адрес в навигатор. Не говоря уже о том, что водитель может плохо расслышать адрес и увезти вас в другом направлении.
Представим на секунду, что приложение правильно определило ваше местоположение, вы не хотите вбивать адрес назначения (у вас идеальная дикция, а водитель не пользуется навигатором и наизусть знает все улицы), вы готовы просто вызвать такси и поехать.
Открыли за пару секунд приложение. Вопрос: куда нужно нажать, чтобы вызвать машину?
Кнопка с машинкой? Нажав ее, вы откроете следующий экран.
Это окно с информацией о тарифе, сверстанное самым позорным образом — все видно на скриншоте. Дополнительно стоит отметить момент с показом цифр, о котором я говорил еще в прошлых статьях: ну не показывайте вы 340,00 и 16,00, если это 340 и 16 рублей соответственно. Обрезайте нолики: они не нужны и только мешают восприятию.
Если бы мы были не в Москве, то здесь же можно выбрать другие типы машин (подороже или подешевле), но в Москве машин нет, и интерфейс обрезан снизу.
Плюс, здесь просто напрашивается кнопка запроса такси. Но ее нет, поэтому нужно возвращаться назад и думать, как заказать такси.
Здесь стоит вспомнить об обучении при первом открытии приложения (всегда старайтесь обучить пользователя, это правильно).
Раздел состоит из трех шагов:
Ничто не напоминает?
А меж тем, то, что у нас спрятано в многоточии (и чего нет в «кратком руководстве») — самое важное (водитель же не телепат: сам не поймет, к кому и когда ему ехать). Пока, как видите, у нас не особо получилось заказать такси.
Фактически, все «обучение» запрятано в первом шаге, остальные два объясняют процесс (который и так известен самому глупому пользователю: заказать, ехать, выйти). А вот обучения приложению, по факту, нет.
Плюс, и первый пункт вводит в заблуждение: если просто «жмакнуть» по карте, точка отправления не проставится. Чтобы ее проставить, нужно перетащить булавку в нужное место карты (дрег-энд-дропом), ввести адрес в текстовом поле поиска или нажать на кнопку поиска текущего местоположения в правом верхнем углу (что, впрочем, и так происходит при открытии приложения — даже «тапать» никуда не нужно).
Чтобы на один шаг приблизиться к непосредственному заказу такси, нужно нажать на стрелочку „→“ сверху от булавки (в картах, обычно, это открывает информацию об организациях по выбранному адресу).
Это к вопросу изобретения велосипедов и важности преемственности интерфейсов (здесь должен быть мем «Нельзя просто так взять и…» из «Властелина колец»). Гуглоиконкой и кнопкой запроса такси с иконкой такси (а на самом деле не запроса) дело не ограничилось. Кнопка отмены может скакать из одного конца экрана в другой (плюс, справа — это даже не в соответствии со стандартами iOS).
Экспериментальным путем мы поняли, что для заказа такси нужно нажать на стрелочку. Открывается следующий экран:
Если в первый раз нажать на «плюсик» можно ввести адрес назначения. Если еще раз нажать на плюсик и ввести другой адрес, то он не добавится, как промежуточный (например, если вам нужно заехать сначала в цветочный, а потом на вокзал), а заменит существующий, что нелогично и заставит вас вводить заново предыдущий адрес. Зачем тогда показывать его как «плюсик»? Почему не скрывать и не давать редактировать адрес назначения (та же стандартная иконка карандаша).
Из-за этого же нельзя построить маршрут типа дом → вокзал → дом (если вам нужно встретить близкого).
Плюс, в нижней части экрана не показывается предполагаемое время ожидания (хотя оно прекрасно показывается на предыдущем экране). Чем-то напоминает недавний случай с рассылкой «Майкрософта», когда в теме письма было что-то похожее на «Ребята, нужна тема письма».
Пункт меню и не по центру, и не по нижнему краю иконки — ни рыба, ни мясо.
Если кто-то из ответственных за продукт в «Убере» дочитает до этого места, пусть держит бонус в виде предложений:
U P D . от 19.01 20:09: Команда «Убера» связалась и любезно предложила разместить промокод на первые 2 поездки (скидка 700 р. на каждую) для новых пользователей, код H A B R A H A B R . Что, впрочем, не сильно отличается от кучи других, которые легко нагуглить (действуют только один раз и только для новых пользователей).
Тем, кому интересно учиться на чужих ошибках (или понять, что даже сотни миллионов долларов и лучшие специалисты не избавят вас от ошибок), а также коллегам Павла Фаге — добро пожаловать под кат.
Экран заставки
Экран заставки (сплеш-скрин) — очень важная вещь: с этого начинается знакомство с продуктом, и он же маскирует недостатки ваших программистов. Так как вы бы не видели заставок, если бы приложение загружалось мгновенно. Иногда это ограничение платформы, а иногда просто лень программистов разделить загрузку библиотек, подгружая их по необходимости, а не всей гурьбой в момент старта приложения.
Создатели логотипа U B E R знали, что делали. Слоган же набран кривовато: ни разрядки, ни правильных апострофов, ни здравого смысла. От того, что вы напишете «Microsoft. Your potential. Our passion» вместо «Microsoft®. Your potential. Our passion(TM)» или не поставите значок копирайта в статье, законы не перестанут действовать, ваши права продолжат соблюдаться (при условии, что вы действительно обладаете этими правами). Поэтому старайтесь не пересекать юристов с пользователями без лишней необходимости.
Для новичков, не читавших прошлые посты, продолжаю рекомендовать Butterick’s practical typography.
Главный экран
Кнопка профиля живет своей интерфейсной жизнью во всем приложении. В том смысле, что она не вровень по вертикали ни с одним из элементов, на каком бы экране мы ни были, — всегда правее на несколько миллиметров.
Адресное поле
Когда из известных карт были только карты гугла, иконка-пин означала «You are here» (вы здесь) или кнопку открытия карты. С выходом мобильных телефонов с G P S иконка определения текущей локации превратилась в стрелку компаса. Гуглоиконка же не обозначает здесь ни переход к текущему местоположению, ни открытие карты (карта и так внизу), а обозначает открытие текстового поискового поля, где можно ввести адрес с клавиатуры.
Субъективно, не стоит смешивать в одном интерфейсе обе иконки (компас и «гуглопин») и, возможно, стоит заменить «гуглоиконку» на значок лупы, что стандартно и обозначает поиск.
Нельзя не отметить зауженный механически шрифт для адреса. Сделано для того, чтобы вместить весь адрес, но с учетом набора прописными и отсутствия разрядки, превращено в трудночитаемую надпись типа МИНЗДРАВПРЕДУПРЕЖДАЕТ. Здесь на пользу пойдет строчный набор (и влезет больше, и читаться будет на порядок лучше, как, например, это сделано на предыдущем скриншоте Садовнической набережной).
Ну и индекс в адресе, конечно, не нужен. А вот что нужно, так это запоминание предыдущих адресов:
При повторном открытии приложения через сутки вместо красивой лупы (к слову, отцентрованной по физическому, а не оптическому центру и, оттого, немного съехавшей влево на экране) лучше бы отображался список старых адресов.
Понятно, что предоставляя «Мерседес эс-класса», можно считать, что целевая аудитория не будет тратить время на ввод адреса, а скажет его уже водителю, но проблема в том, что а) адрес можно не помнить; б) зачем тратить время в машине (за которое платит уже клиент), пока водитель вобьет этот адрес в навигатор. Не говоря уже о том, что водитель может плохо расслышать адрес и увезти вас в другом направлении.
Неизвестная кнопка и самый позорный раздел приложения
Представим на секунду, что приложение правильно определило ваше местоположение, вы не хотите вбивать адрес назначения (у вас идеальная дикция, а водитель не пользуется навигатором и наизусть знает все улицы), вы готовы просто вызвать такси и поехать.
Открыли за пару секунд приложение. Вопрос: куда нужно нажать, чтобы вызвать машину?
Кнопка с машинкой? Нажав ее, вы откроете следующий экран.
Это окно с информацией о тарифе, сверстанное самым позорным образом — все видно на скриншоте. Дополнительно стоит отметить момент с показом цифр, о котором я говорил еще в прошлых статьях: ну не показывайте вы 340,00 и 16,00, если это 340 и 16 рублей соответственно. Обрезайте нолики: они не нужны и только мешают восприятию.
Если бы мы были не в Москве, то здесь же можно выбрать другие типы машин (подороже или подешевле), но в Москве машин нет, и интерфейс обрезан снизу.
Плюс, здесь просто напрашивается кнопка запроса такси. Но ее нет, поэтому нужно возвращаться назад и думать, как заказать такси.
Как заказать такси
Здесь стоит вспомнить об обучении при первом открытии приложения (всегда старайтесь обучить пользователя, это правильно).
Раздел состоит из трех шагов:
- Ткни пальцем, чтобы выбрать, откуда ехать.
- «Откинься на спинку кресла и расслабься, пока водитель отвезет тебя в нужное место.
- Поставь рейтинг поездке.
Ничто не напоминает?
- Открой приложение.
- …
- Тебя везут.
- P R O F I T !
А меж тем, то, что у нас спрятано в многоточии (и чего нет в «кратком руководстве») — самое важное (водитель же не телепат: сам не поймет, к кому и когда ему ехать). Пока, как видите, у нас не особо получилось заказать такси.
Фактически, все «обучение» запрятано в первом шаге, остальные два объясняют процесс (который и так известен самому глупому пользователю: заказать, ехать, выйти). А вот обучения приложению, по факту, нет.
Плюс, и первый пункт вводит в заблуждение: если просто «жмакнуть» по карте, точка отправления не проставится. Чтобы ее проставить, нужно перетащить булавку в нужное место карты (дрег-энд-дропом), ввести адрес в текстовом поле поиска или нажать на кнопку поиска текущего местоположения в правом верхнем углу (что, впрочем, и так происходит при открытии приложения — даже «тапать» никуда не нужно).
Чтобы на один шаг приблизиться к непосредственному заказу такси, нужно нажать на стрелочку „→“ сверху от булавки (в картах, обычно, это открывает информацию об организациях по выбранному адресу).
Это к вопросу изобретения велосипедов и важности преемственности интерфейсов (здесь должен быть мем «Нельзя просто так взять и…» из «Властелина колец»). Гуглоиконкой и кнопкой запроса такси с иконкой такси (а на самом деле не запроса) дело не ограничилось. Кнопка отмены может скакать из одного конца экрана в другой (плюс, справа — это даже не в соответствии со стандартами iOS).
Окно заказа такси (наконец-то)
Экспериментальным путем мы поняли, что для заказа такси нужно нажать на стрелочку. Открывается следующий экран:
Если в первый раз нажать на «плюсик» можно ввести адрес назначения. Если еще раз нажать на плюсик и ввести другой адрес, то он не добавится, как промежуточный (например, если вам нужно заехать сначала в цветочный, а потом на вокзал), а заменит существующий, что нелогично и заставит вас вводить заново предыдущий адрес. Зачем тогда показывать его как «плюсик»? Почему не скрывать и не давать редактировать адрес назначения (та же стандартная иконка карандаша).
Из-за этого же нельзя построить маршрут типа дом → вокзал → дом (если вам нужно встретить близкого).
Плюс, в нижней части экрана не показывается предполагаемое время ожидания (хотя оно прекрасно показывается на предыдущем экране). Чем-то напоминает недавний случай с рассылкой «Майкрософта», когда в теме письма было что-то похожее на «Ребята, нужна тема письма».
Не забывайте про мелочи
Пункт меню и не по центру, и не по нижнему краю иконки — ни рыба, ни мясо.
Предложения по продукту
Если кто-то из ответственных за продукт в «Убере» дочитает до этого места, пусть держит бонус в виде предложений:
- показывайте активированные «промо» и их условия в приложении;
- давайте возможность выбрать «промо», если их несколько активированных, для оплаты текущей поездки;
- купите алкометр «Лапки» и тестируйте водителей перед началом смены. Панибрацкие рассказы с бравадой про то, как водитель выходит на смену после ночи отмечания дня рождения и ухода от полицейских — не комильфо;
- вообще, побеседуйте с водителями, чтобы поменьше болтали лишнего: в первую же поездку узнал, сколько в среднем заказов в сутки на машину и кого обычно в это время забирают «под шафе» с одной станции метро из постоянных клиентов (был бы бандитом, подкараулил бы и ограбил);
- обучите водителей примочкам «Мерседеса» + сбрасывайте настройки кресел, массажа и т. д. после каждой поездки: сесть в машину с вибрирующей выпирающей донельзя поясницей и водителем, не знающим, как это отключить, — не круто;
- добавьте в машины usb-модем «Йоты», умеющий поднимать бесплатную Wi-Fi-сеть — мелочь, а приятно;
- не стоит включать радио без спроса пассажира. Ехать под DFM, если любишь, например, «Радио джаз» неприятно (не все могут прямо попросить водителя сменить или выключить радио). Еще лучше запоминать любимую радиостанцию пассажира и включать ее перед приходом клиента;
- не стесняйтесь позвонить клиенту, если даете 3-й круг вокруг дома, не зная, как подъехать (время подачи важнее, да и зимой в −10° стоять на улице, думая, что водитель уже на месте — неприятно). Но только один раз, после этого водитель должен иметь возможность оставить комментарий «на будущее» для себя и коллег с инструкциями, как проехать;
- брать одновременно и за километраж, и за минуты — немножко свинство (в других городах «Убера» или в некоторых других такси Москвы за минуты берут только при скорости движения ниже определенного порога, или вообще никогда не берут за километраж).
U P D . от 19.01 20:09: Команда «Убера» связалась и любезно предложила разместить промокод на первые 2 поездки (скидка 700 р. на каждую) для новых пользователей, код H A B R A H A B R . Что, впрочем, не сильно отличается от кучи других, которые легко нагуглить (действуют только один раз и только для новых пользователей).
