Это Атвинта. В рубрике «Атвинтерфейсы» лучшие умы нашего агентства изучают сайты, которыми пользовался каждый россиянин. В качестве первого подопытного выбрали сервис купли/продажи автомобилей ДРОМ.РУ. Врум-врум, поехали смотреть, какие решения сайт предлагает пользователям.
Про сайт
Дром.ру — один из крупнейших автомобильных порталов России. Здесь можно купить и продать машину, потрещать о тачках на форуме, найти отзывы о любой модели и почитать статьи о починке карбюратора.В общем, на сайте есть все, что нужно автомобилисту. Кто ни разу не был за рулем, наверняка тоже знает о портале — скажите, кто не заходил на Дром, чтобы помечтать о заряженном Порше или Мерседесе?
В месяц у сайта 70 миллионов уникальных посетителей. Давайте разбираться, насколько всем этим людям удобно пользоваться сайтом и как его можно было бы улучшить.
Интерфейс изучает аналитик Атвинты — Виктория Жильцова
Нет поисковой строки
На сайте отсутствует поисковая строка. Подбирать машины пользователь может исключительно через Каталог. Поисковая строка станет альтернативным методом выбора автомобиля для тех, кому удобнее написать запрос вручную, а не выбирать фильтры или определенную марку или автомобиль по каталогу.Поисковую строку лучше расположить в хэдере (шапке) сайта — это стандартное расположение элемента, к которому привыкли пользователи.
Предлагаем: добавить поисковую строку как дополнительный инструмент для выбора.
Форма авторизации
В форме регистрации отсутствуют чек-боксы с согласием на обработку персональных данных. С одной стороны, это удобно — пользователю не нужно выполнять лишнее действие и ставить отметку с согласием. С другой, вряд ли человек вообще обращает внимание на подпись — слишком мелкий и серый шрифт не цепляет внимание. Из-за этого пользователь пропускает уведомление об обработке персональных данных.
В поле для номера отсутствуют ограничения, которые помогают пользователю сразу увидеть ошибки при вводе цифр. Строка позволяет ввести какое угодно количество цифр и в любом формате. Там можно даже написать буквы.
При этом об ошибке интерфейс сообщает только после нажатия на кнопку.
Удобнее всего, когда поле сразу считывает действия пользователя и сообщает об ошибке. Иначе пользователь вводит неверный формат и разражается, что форма сразу не подсказала ему, как надо правильно.
Дополнительно стоит добавить ограничение на количество символов в строке, а также серым шрифтом отразить формат ввода, которое поле ожидает от пользователя.
В форме регистрации используются сложные формулировки: «отправлено», «должно прийти». Для сообщения применяются аббревиатуры на английском и на русском — мелочь, но лучше, чтобы была стандартизация. Текст можно сократить до «Код отправлен».
В форме также упоминается, что код нужно ждать максимум 10 минут. И если он не придёт, пользователю нужно нажать на ссылку под кнопкой, в которой раскрывается поясняющий текст.
Сервис обвиняет пользователя, что код ему не пришел из-за телефона или оператора. А если всё порядке, то предлагает повторить вход ещё позже и подождать час. Нет предложения «отправить код повторно», если пользователь всё-таки просидел 10 минут перед экраном в длительном ожидании.
Для пользователя это слишком долго. Мы не готовы тратить драгоценное время на ожидание кода для сайта, которому можно легко найти замену. К тому же, по факту регистрации код приходит мгновенно, в течение нескольких секунд.
Предлагаем: доработать интерфейс формы регистрации и авторизации (поработать над UX-копирайтингом, скоростью отправки СМС, визуальными подсказками).
Теги
На странице поиска автомобилей по марке присутствуют теги, которые никак не соотносятся с текущим поиском, а означают историю поиска, чтобы пользователь мог вернуться к предыдущим результатам, не используя заново фильтрацию.
Но с первого взгляда этот блок незаметен, отсутствует контрастность или подсказка о том, что это история поиска — непонятно, как пользоваться тегами. В мобильном приложении блок как раз имеет такую подсказку.
Предлагаем: добавить пояснение об истории поиска в браузерную версию портала.
Поиск определенной модели
И снова не хватает поисковой строки для сценария поиска конкретной модели. Для выбора конкретного авто пользователю нужно воспользоваться фильтрацией в разделе Автомобили. Либо это можно сделать на Главной странице в блоке Поиск объявленийПуть пользователя увеличивается. Нужно сделать минимум 4 клика, чтобы получить желаемый результат. Тогда как с поисковой строкой пользователю обошлось бы всё в 1 клик.
Предлагаем: и снова поисковая строка :)
Поиск по цене
Подборка автомобилей по стоимости есть только в блоке с новыми машинами, в то время как многие водители при поиске отталкиваются именно от бюджета.
Подобрать автомобиль по стоимости можно также через фильтрацию, заполнив поля вилки.
А в мобильном приложении Дрома на Главной готовые подборки по стоимости есть — это отличное решение, так как бюджет часто является основным критерием для выбора машины.
Предлагаем: повторить решение с подборками по цене из мобилки в браузерной версии.
Фильтрация
На странице поиска автомобилей первую и вторую часть экран занимает фильтрация.Если воспользоваться фильтрацией, то после клика на кнопку Показать страница обновляется и пользователь всё также видит перед собой рекламный блок и фильтрацию.
Чтобы просмотреть подобранные машины, нужно скроллить вниз. Сам блок с фильтрацией при скролле не закрепляется. Чтобы добавить новый параметр или удалить предыдущий/текущий нужно скроллить наверх. В углу для этого есть кнопка Вверх, но она тусклая и незаметная.
Карточкам автомобилей присвоены иконки, которые неочевидны с первого раза, и даже после наведения на элемент подсказка не раскрывает смысла. Пользователю непонятно, зачем прикреплено и что с этим делать? Стоит обращать особое внимание на такое объявление или нет?
Предлагаем: выделить кнопку вверх, при скролле свернуть и закрепить фильтрацию, добавить корректные подсказки о закрепах.
Иконки для типов кузова
В фильтрах есть параметр Тип кузова, в котором представлены картинки к каждому типа кузова. Это хорошее решение для пользователей, которым проще подобрать автомобиль визуально.
Ничего не предлагаем, это супер.
Карточка товара
В общем каталоге пользователю видна только одна фотография автомобиля. Чтобы увидеть всю галерею, нужно переходить на страницу товара. Это не всегда удобно, так как на главное фото пользователи не всегда ставят удачные кадры с общим видом машины. Плюс по одному фото все равно нельзя оценить состояние авто.
Предлагаем: добавить слайдер в карточке уже на этапе каталога, чтобы пользователь мог посмотреть несколько фото.
Далее визуал оценивает дизайнер Атвинты — Карина Скородинская.
Первый экран
Первый экран не выглядит структурированным. Например, нет главного заголовка, выделяющегося размером. Да, есть «Продажа авто в России», но далее тем же кеглем написан следующий и все остальные заголовки на странице. Создается впечатление, что мы оказались сразу в середине страницы, а не в ее начале.
Плюс на сайте есть не только продажа/покупка автомобилей — здесь обширный функционал, о котором нет информации на первых экранах Главной.
Предлагаем: презентовать весь функционал портала на первых экранах Главной.
Вверху страницы есть карусель с объявлениями, но непонятно, почему пользователю стоит обратить на них внимание. В слайдере есть приятная анимация движения при наведении на боковые его части, но не указан критерий отбора авто, что не позволяет довериться подборке.
Посмотрев на мелкий шрифт, мы узнаем, что это спецразмещения, но чем они отличаются от обычных — не ясно.
Оставшуюся половину первого экрана занимает блок с поиском по марке. Есть возможность Показать все, но нет поиска по символам, что вынудит искать нужную марку в большом списке глазами — это тратит дополнительное время пользователя.
Предлагаем: добавить поиск по символам.
Есть крутая функция проверки авто, но она подразумевает уже наличие данных об авто. Так как автомобиль я еще не нашла, на Главной странице она для меня не актуальна, но будет более полезна на карточке автомобиля.
Предлагаем: перенести проверку на карточку авто.
Случайным методом я поняла, что каждый заголовок на странице — это ссылка на определенный раздел. Без дополнительных индикаторов взаимодействие с этими элементами не очевидно.
Предлагаем: подчеркнуть заголовок или добавить рядом стрелку, которые покажут, что на текст можно нажать и провалиться в следующий раздел.
Отзывы на автомобили
Удачное решение с реальными отзывами на авто, так как опыту другого человека люди доверяют больше, чем рекламным предложениям. Из человеческого опыта можно узнать детали, которые определят покупку той или иной машины.
Чтобы усилить доверие пользователя, на карточку машины в блоке можно добавить оценку от пользователей и количество голосов.
Вся эта информация есть внутри отзыва, но если вынести эту информацию сразу в блоке, то кликать на эти страницы будут чаще, так как станет понятно, что на странице не только обсуждение, но и другая полезная информация.
Предлагаем: добавить оценку от пользователей и количество голосов на карточку авто.
Опрос
Можно заметить, что опрос выделяется среди прочего контента. Скорее всего, это сделано намерено, чтобы обратить внимание пользователей на динамичный блок. Но в поведении блока есть неполадки.
После голосования открывается страница результатов опроса, что автоматически уводит пользователя с Главной, где он изучает способы выполнения основной задачи по покупке авто. Но хорошо, что есть хлебные крошки, по которым можно быстро вернуться назад.
Когда возвращаешься на Главную, опрос не меняет свой вид. Так пользователь подумает, что его голос не засчитан. Если проголосовать дважды, то сайт снова перекидывает на результаты опроса с маленькой красной надписью «Вы уже проголосовали». Произошел обман на уровне взаимодействия с элементом, который все запомнил, но при этом не показал мне этого, позволив совершить ненужное действие.
Предлагаем: после голосования показать пользователю краткие итоги, ниже предложить перейти к более подробным цифрам и обсуждению. Запомнить его голос и закрыть возможность голосования в следующих итерациях.
Автоновости
В блоке Автоновости есть визуальное разнообразие, что хорошо разбавляет общую картинку, но при этом не хватает стандартизации. У одного тизера заголовок расположен внутри плашки на темном градиенте белым шрифтом. У другого — белый шрифт на черном фоне. У третьего заголовок черного цвета висит под плашкой.
Также здесь есть индикатор комментариев, но нет возможности нажать на иконку и перейти сразу к комментариям, чтобы без задержек увидеть живое общение между пользователями. Например, так сделано на vc.ru.
Предлагаем: в ленте материалов и новостей по клику на комментарии сразу открывать обсуждение, сделать единообразным оформление тизеров.
Далее на сайте следуют несколько однотипных блоков с карточками по разным категориям сайта. Цена, ключевой фактор покупки, набран даже меньшим кеглем, чем описание.
Предлагаем: увеличить кегль цены на карточках товаров.
Отметим, что этот обзор эксперты Атвинты написали как пользователи сайта, но с очень высокой насмотренностью и собственным опытом создания интерфейсов. Это успешный портал с огромной аудиторией, и улучшения, которые мы предложили, могли бы сделать опыт пользователей еще более качественным.
Поделитесь в комментариях, заходили ли вы когда-нибудь на Дром.ру, какие рекомендации вам понравились и как можно еще докрутить интерфейс портала?
