-
Дизайн записи на автомойку с мобильной версии сайта Express-Шина
Express-Шина — мои давние клиенты. Мы реализовали вместе много интересных задач. Новой задачей стала оптимизация мобильной версии. Точнее раздела «Автомойка».
Многие посетители сайта «Express-Шина» записываются на автомойку через мобильную версию. Однако, она довольно неудобная — структура сложная, элементы управления мелкие. В итоге, имеем высокое количество отказов и жалобы клиентов. Что же, давайте разбираться.
Разбираем текущий пользовательский маршрут
Точка входа
Изначально автомойка была ссылкой в разделе «Услуги». Особое требование — услуги сервиса должны быть в начале страницы, чтобы посетители видели не только шины и диски. В итоге, услуги стали занимать в высоту 4 строки и сильно сдвинули каталог товаров (самое то главное) вниз.Это плохо. Надо исправлять.
Выбор услуг автомойки
Этот третий шаг записи на мойку стал первым камнем преткновения. Почему-то на экран выведено поистине колоссальное количество информации. Помимо множества комплексов есть большой список всевозможных опций. С одной стороны это удобно, с другой же пользоваться этим с мобильного телефона просто невозможно. С этим тоже надо что-то делатьВыбор удобного офиса и времени
В десктоп-версии этот шаг сделан ещё более-менее понятно. А с мобильной версией беда — неочевидный контрол выбора нужного офиса и слишком широкие столбцы с временными интервалами.
Необходимо сделать этот шаг более интуитивным и простым.Решаем проблемы интерфейса
Шаг 1. Оптимизация точки входа
Для начала сократим размер списка услуг. Вытянем три основных направления (Шиномонтаж, Автомойка и Автосервис) в строку. Это сэкономит приличное количество места.
Но есть одна проблема: услуги предоставляются не во всех городах.
Шаг 2. Выбор типа автомобиля
Этот шаг простой, ничего особенного здесь мудрить не нужно. Достаточно правильно выстроить навигацию: шаг назад и очевидное следующее действие.
Шаг 3. Выбор услуг мойки
А вот и наш главный камень преткновения. Как вы, наверно, заметили, основная проблема текущего интерфейса — это непомерное количество услуг.
Первое, что я предложил, это объединить наиболее популярные услуги (а такая статистика имеется) в комплексы.Комплексы выводим блоками по типу слайдера. То есть комплексы можно листать свайпом влево-вправо.
«Состав услуги» разворачивает список входящих услуг.
А кнопка «Добавить» меняется на галочку.
Полоса с итоговой суммой всегда находится внизу экрана.
Сумма итога пересчитывается на лету. Очень удобно.
Шаг 4. Выбор офиса и времени мойки
Второй узкий момент из прошлого интерфейса — это выбор офиса и времени. Выбор офиса был не очевидным, а выбор времени не помещался в экран смартфона.Я переработал интерфейс записи и приблизил его к гайдлайнам Android и iOS. Барьер убран, запись стала интуитивно понятной.
Новый UX и UI дизайн успешно внедрён на «живом» сайте. Дизайн работает и активно тестируется посетителями. Результаты вцелом уже значительно лучше.
Заказать подобный проект
Портфолио веб дизайнера
Дизайн записи на автомойку с сайта
Новые работы
- All
- Образование и развитие
- Отели, рестораны, туризм
- Портфолио иллюстрации и иконки
- Портфолио интернет-магазины
- Портфолио интерфейсы приложения
- Портфолио логотипы фирменный стиль
- Портфолио порталы
- Портфолио промо лендинги
- Правительство
- Промышленность
- Рекламная полиграфия
- Сайты IT-компаний
- Сайты строительных компаний
- Связь, телеком, провайдеры
- Услуги и сервис