Сразу оговоримся — сам концепт нового фирменного стиля этого проекта нам по душе. Но как этот фирменный стиль был использован в дизайне мобильного приложения, а также юзабилити приложения вызвало у нас много вопросов.
Начнем с аватарки
Вот её изображение в сравнении с иконками других сервисов каршеринга.
Сразу бросается в глаза, что Делимобиль — это клон Яндекс.Драйв. Если все другие приложения самобытны, имеют свою собственную идею и исполнение, то Делимобиль просто копирует идею Яндекса. На смысловом уровне это выглядит так, как будто Делимобиль признает лидерство Яндекс.Драйв и сознательно ставит себя на второе место.
Сама иконка тоже повторяет идею Яндекс.драйва — простая композиция из контрастных цветов. Это позволяет быстро находить приложения в окружении других иконок. Но если у Яндекс.драйв эти цвета находятся в некой гармонии — у них почти одинаковые площади заливки, разделяющие линии плавно изгибаются, повторяя естественные формы (а это, как известно, не напрягает глаза), то у Делимобиля — совершенно другая картина. На первый взгляд — случайным образом выбранный кусок какого-то изображения, содержащего элементы фирменного стиля, никакой гармонии размеров, острые углы.
Вывод: прое*%ное первое касание и плохая копия ЯД.
Идем дальше. Экран бронирования машины
Рассуждаем логически — что нужно знать клиенту для выбора машины и, следовательно, что он должен сразу увидеть?
1. Марка и внешний вид. Марка указано крупно — это хорошо. Боковой вид — не очень хорошо. Сейчас много авто B-класса внешне очень похожи, особенно сбоку. Чёткого узнавания нет.
2. Номер авто. Должен быть виден сразу и хорошо, так как нужен для поиска автомобиля на месте. Нашли автомобиль, бросили взгляд на табличку с госномером, сравнили с номером в приложении, сели и поехали, не тратя лишние оплаченные минуты. Здесь номер мелкий и не в центре, его нужно еще как следует поискать взглядом. Незачёт.
3. Цена. С одной стороны тут она крупная и по центру. Это плюс. С другой стороны - и цифры, и буквенные сокращения написана одним кеглем и еще слитно. Читается такая надпись как некий цифровой код, с которым непонятно что нужно делать.
4. Уровень топлива — важный параметр. Влияет на выбор автомобиля — выберут тот, у которого более полный бак. Идея с отображением уровня топлива в виде разноцветной плашки классная — наглядно и просто для понимания. Но зачем было прятать её на задний фон? Из-за этого потребовалось дублировать информацию цифрами.
Вообще, на экране много элементов. Мы насчитали 8 шт.
Как известно, внимание взрослого человека одновременно способно охватить от 4-6 предметов. 8 — это перегруз. Можно ли в данном случае чем-то пожертвовать? — можно: 1) непонятным значком вопроса (который почему-то без точки), т. к. есть отдельный раздел для обращений; 2) процентами на указателе топлива; 3) плашкой статуса «Свободен» (т.к. по логике приложения забронированные машины не отражаются при выборе). Остается 5 элементов — и мы в норме.
При подсчете мы не учитывали количество отдельных плашек, которые тоже можно считать отдельными элементами. Это еще + 3 элемента (плашка с уровнем топлива, плашка, на которой написана цена, плашка - кнопка «Забронировать»).
Вывод: много лишних элементов, которые превращают экран в кучу плохо воспринимаемых значков.
Далее — экраны с картами
Мы считаем, что самое важное в дизайне (и не только) — максимум пользы. Верхняя плашка — самая яркая и крупная, она отвлекает внимание и занимает часть карты. При этом сама плашка — это просто реклама с логотипом. Убираем плашку — освобождается больше карты. То есть в фокусе внимания будет именно полезная информация — местонахождение автомобиля.
Кстати об авто. Использовано уникальное решение — процент заправки на экране в виде цветовой плашки. Тут респект.
Про плашку с логотипом уже говорили выше.
Что хорошо — как выглядит карта со свободными автомобилями. Решение классное — автомобили отображаются на мелком масштабе маленькими точками. Очень наглядно и не сваливается в кашу. При этом видна плотность покрытия автомобилями, легко понять, где больше автомобилей.
Неоднозначное решение с отображением автомобилей на большем масштабе. Для уставшего глаза после дня за компьютером точки могут сливаться в единое месиво (чего удалось избежать на более мелком масштабе) . Обводка точек контрастным белым кругом, увы, помогает не сильно.
Экран для связи с техподдержкой
Правильный дизайн интерфейса должен помогать человеку, делать его повседневные действия проще, избавлять от напряжения, расслаблять.
Что здесь. Не видна граница кнопки «Отменить» , возникает опасение/ ожидание сложности с попаданием в кнопку — не нужная отрицательная эмоция. Непонятно, зачем сделали кнопки разные, как будто чужеродные элементы. В чем смысл? Активна ли кнопка «Отменить» ? Если не активна, как активировать? — Опять много вопросов, напряжения.
Известно, что противоположные по содержанию эмоции не могут сосуществовать (на этом даже основан психологический прием замещения эмоций). Если интерфейс заставляет быть всегда во внимании, думать и искать логику действий, то невозможно при этом дать пользователю почувствовать удобство и простоту. В ситуации наличия огромного выбора альтернатив, выбор пользователя будет очевиден — он выберет, что проще.
Экран меню приложения
Много воздуха — это хорошо, это современно. Но не тогда, когда это влияет на удобство пользования. Слишком мелкие надписи плохо читаются, нужно напрягать глаза и внимательно рассматривать буквы.
Отдельное мучение для нашего визуального перфекционизма — треугольник не совпадающий с плашкой. Само по себе решение грамотное: угол — поддержка фирменного стиля, но из-за слияния с боковой плашкой смотрится как баг. Соприкосновение прозрачного и непрозрачного создает дискомфорт.
Сравните как все просто в Яндекс.Драйв
Безусловно, все вышесказанное — наше субъективное мнение. Будем рады услышать ваше мнение в комментариях. Подписывайтесь, делитесь с друзьями, присылайте на на почту hello@logov.studio свои мысли, критику!
