Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

Это Атвинта. В рубрике «Атвинтерфейсы» лучшие умы нашего агентства изучают сайты, которыми пользовался каждый россиянин. В качестве первого подопытного выбрали сервис купли/продажи автомобилей ДРОМ.РУ. Врум-врум, поехали смотреть, какие решения сайт предлагает пользователям.

Про сайт

Дром.ру — один из крупнейших автомобильных порталов России. Здесь можно купить и продать машину, потрещать о тачках на форуме, найти отзывы о любой модели и почитать статьи о починке карбюратора.

В общем, на сайте есть все, что нужно автомобилисту. Кто ни разу не был за рулем, наверняка тоже знает о портале — скажите, кто не заходил на Дром, чтобы помечтать о заряженном Порше или Мерседесе?

В месяц у сайта 70 миллионов уникальных посетителей. Давайте разбираться, насколько всем этим людям удобно пользоваться сайтом и как его можно было бы улучшить.

Виктория Жильцова
Аналитик в диджитал-агентстве Атвинта

Нет поисковой строки

На сайте отсутствует поисковая строка. Подбирать машины пользователь может исключительно через Каталог. Поисковая строка станет альтернативным методом выбора автомобиля для тех, кому удобнее написать запрос вручную, а не выбирать фильтры или определенную марку или автомобиль по каталогу.

Поисковую строку лучше расположить в хэдере (шапке) сайта — это стандартное расположение элемента, к которому привыкли пользователи.

Здесь мог бы быть поиск
Здесь мог бы быть поиск

Предлагаем: добавить поисковую строку как дополнительный инструмент для выбора.

Форма авторизации

В форме регистрации отсутствуют чек-боксы с согласием на обработку персональных данных. С одной стороны, это удобно — пользователю не нужно выполнять лишнее действие и ставить отметку с согласием. С другой, вряд ли человек вообще обращает внимание на подпись — слишком мелкий и серый шрифт не цепляет внимание. Из-за этого пользователь пропускает уведомление об обработке персональных данных.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

В поле для номера отсутствуют ограничения, которые помогают пользователю сразу увидеть ошибки при вводе цифр. Строка позволяет ввести какое угодно количество цифр и в любом формате. Там можно даже написать буквы.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

При этом об ошибке интерфейс сообщает только после нажатия на кнопку.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

Удобнее всего, когда поле сразу считывает действия пользователя и сообщает об ошибке. Иначе пользователь вводит неверный формат и разражается, что форма сразу не подсказала ему, как надо правильно.

Дополнительно стоит добавить ограничение на количество символов в строке, а также серым шрифтом отразить формат ввода, которое поле ожидает от пользователя.

Как помочь пользователю быстрее разобраться с регистрацией
Как помочь пользователю быстрее разобраться с регистрацией

В форме регистрации используются сложные формулировки: «отправлено», «должно прийти». Для сообщения применяются аббревиатуры на английском и на русском — мелочь, но лучше, чтобы была стандартизация. Текст можно сократить до «Код отправлен».

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

В форме также упоминается, что код нужно ждать максимум 10 минут. И если он не придёт, пользователю нужно нажать на ссылку под кнопкой, в которой раскрывается поясняющий текст.

Сервис обвиняет пользователя, что код ему не пришел из-за телефона или оператора. А если всё порядке, то предлагает повторить вход ещё позже и подождать час. Нет предложения «отправить код повторно», если пользователь всё-таки просидел 10 минут перед экраном в длительном ожидании.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

Для пользователя это слишком долго. Мы не готовы тратить драгоценное время на ожидание кода для сайта, которому можно легко найти замену. К тому же, по факту регистрации код приходит мгновенно, в течение нескольких секунд.

Предлагаем: доработать интерфейс формы регистрации и авторизации (поработать над UX-копирайтингом, скоростью отправки СМС, визуальными подсказками).

Теги

На странице поиска автомобилей по марке присутствуют теги, которые никак не соотносятся с текущим поиском, а означают историю поиска, чтобы пользователь мог вернуться к предыдущим результатам, не используя заново фильтрацию.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

Но с первого взгляда этот блок незаметен, отсутствует контрастность или подсказка о том, что это история поиска — непонятно, как пользоваться тегами. В мобильном приложении блок как раз имеет такую подсказку.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

Предлагаем: добавить пояснение об истории поиска в браузерную версию портала.

Можно добавить пояснение и в браузерную версию портала, как мы сделали это на картинке
Можно добавить пояснение и в браузерную версию портала, как мы сделали это на картинке

Читайте нашу статью о разработке сайта для стриптиз-баров:

Поиск определенной модели

И снова не хватает поисковой строки для сценария поиска конкретной модели. Для выбора конкретного авто пользователю нужно воспользоваться фильтрацией в разделе Автомобили. Либо это можно сделать на Главной странице в блоке Поиск объявлений

Путь пользователя увеличивается. Нужно сделать минимум 4 клика, чтобы получить желаемый результат. Тогда как с поисковой строкой пользователю обошлось бы всё в 1 клик.

Можно добавить поисковую строку, как мы сделали это на картинке
Можно добавить поисковую строку, как мы сделали это на картинке

Предлагаем: и снова поисковая строка :)

Поиск по цене

Подборка автомобилей по стоимости есть только в блоке с новыми машинами, в то время как многие водители при поиске отталкиваются именно от бюджета.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

Подобрать автомобиль по стоимости можно также через фильтрацию, заполнив поля вилки.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

А в мобильном приложении Дрома на Главной готовые подборки по стоимости есть — это отличное решение, так как бюджет часто является основным критерием для выбора машины.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

Предлагаем: повторить решение с подборками по цене из мобилки в браузерной версии.

Фильтрация

На странице поиска автомобилей первую и вторую часть экран занимает фильтрация.

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

Чтобы просмотреть подобранные машины, нужно скроллить вниз. Сам блок с фильтрацией при скролле не закрепляется. Чтобы добавить новый параметр или удалить предыдущий/текущий нужно скроллить наверх. В углу для этого есть кнопка Вверх, но она тусклая и незаметная.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

Карточкам автомобилей присвоены иконки, которые неочевидны с первого раза, и даже после наведения на элемент подсказка не раскрывает смысла. Пользователю непонятно, зачем прикреплено и что с этим делать? Стоит обращать особое внимание на такое объявление или нет?

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

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

Читайте наш мануал о разработке интерфейсов для медицинского и промышленного оборудования:

Иконки для типов кузова

В фильтрах есть параметр Тип кузова, в котором представлены картинки к каждому типа кузова. Это хорошее решение для пользователей, которым проще подобрать автомобиль визуально.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

Ничего не предлагаем, это супер.

Карточка товара

В общем каталоге пользователю видна только одна фотография автомобиля. Чтобы увидеть всю галерею, нужно переходить на страницу товара. Это не всегда удобно, так как на главное фото пользователи не всегда ставят удачные кадры с общим видом машины. Плюс по одному фото все равно нельзя оценить состояние авто.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

Предлагаем: добавить слайдер в карточке уже на этапе каталога, чтобы пользователь мог посмотреть несколько фото.

Пример реализации на Авто.ру. В каждой карточке товара есть слайдер фотографий

Карина Скородинская
Ведущий дизайнер Атвинты

Первый экран

Первый экран не выглядит структурированным. Например, нет главного заголовка, выделяющегося размером. Да, есть «Продажа авто в России», но далее тем же кеглем написан следующий и все остальные заголовки на странице. Создается впечатление, что мы оказались сразу в середине страницы, а не в ее начале.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

Плюс на сайте есть не только продажа/покупка автомобилей — здесь обширный функционал, о котором нет информации на первых экранах Главной.

Предлагаем: презентовать весь функционал портала на первых экранах Главной.

Вверху страницы есть карусель с объявлениями, но непонятно, почему пользователю стоит обратить на них внимание. В слайдере есть приятная анимация движения при наведении на боковые его части, но не указан критерий отбора авто, что не позволяет довериться подборке.

Посмотрев на мелкий шрифт, мы узнаем, что это спецразмещения, но чем они отличаются от обычных — не ясно.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

Оставшуюся половину первого экрана занимает блок с поиском по марке. Есть возможность Показать все, но нет поиска по символам, что вынудит искать нужную марку в большом списке глазами — это тратит дополнительное время пользователя.

Предлагаем: добавить поиск по символам.

Есть крутая функция проверки авто, но она подразумевает уже наличие данных об авто. Так как автомобиль я еще не нашла, на Главной странице она для меня не актуальна, но будет более полезна на карточке автомобиля.

Предлагаем: перенести проверку на карточку авто.

Случайным методом я поняла, что каждый заголовок на странице — это ссылка на определенный раздел. Без дополнительных индикаторов взаимодействие с этими элементами не очевидно.

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

Читайте, как мы делали интерфейс для американской экспресс-доставки:

Отзывы на автомобили

Удачное решение с реальными отзывами на авто, так как опыту другого человека люди доверяют больше, чем рекламным предложениям. Из человеческого опыта можно узнать детали, которые определят покупку той или иной машины.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

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

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

Предлагаем: добавить оценку от пользователей и количество голосов на карточку авто.

Опрос

Можно заметить, что опрос выделяется среди прочего контента. Скорее всего, это сделано намерено, чтобы обратить внимание пользователей на динамичный блок. Но в поведении блока есть неполадки.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

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

Хлебные крошки на странице опроса
Хлебные крошки на странице опроса

Когда возвращаешься на Главную, опрос не меняет свой вид. Так пользователь подумает, что его голос не засчитан. Если проголосовать дважды, то сайт снова перекидывает на результаты опроса с маленькой красной надписью «Вы уже проголосовали». Произошел обман на уровне взаимодействия с элементом, который все запомнил, но при этом не показал мне этого, позволив совершить ненужное действие.

Предлагаем: после голосования показать пользователю краткие итоги, ниже предложить перейти к более подробным цифрам и обсуждению. Запомнить его голос и закрыть возможность голосования в следующих итерациях.

Автоновости

В блоке Автоновости есть визуальное разнообразие, что хорошо разбавляет общую картинку, но при этом не хватает стандартизации. У одного тизера заголовок расположен внутри плашки на темном градиенте белым шрифтом. У другого — белый шрифт на черном фоне. У третьего заголовок черного цвета висит под плашкой.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

Также здесь есть индикатор комментариев, но нет возможности нажать на иконку и перейти сразу к комментариям, чтобы без задержек увидеть живое общение между пользователями. Например, так сделано на vc.ru.

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

Далее на сайте следуют несколько однотипных блоков с карточками по разным категориям сайта. Цена, ключевой фактор покупки, набран даже меньшим кеглем, чем описание.

Атвинтерфейсы, ч.1: аналитик и дизайнер оценивают, удобно ли искать авто на ДРОМ.РУ

Предлагаем: увеличить кегль цены на карточках товаров.

Отметим, что этот обзор мы написали как пользователи сайта, но с очень высокой насмотренностью и собственным опытом создания интерфейсов. Это успешный портал с огромной аудиторией, и улучшения, которые мы предложили, могли бы сделать опыт пользователей еще более качественным.

Понравился разбор от наших специалистов? Проведем UX-аудит интерфейса и для вашего сайта или сервиса, для этого напишите нам в телеграм.

Классная статья! Где мне найти Атвинту кроме VC?

наш сайт

наш тг-канал с 5к подписчиков

• наша почта: info@atwinta.ru

5555
35 комментариев

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

6
Ответить

все верно, поэтому и написали, что оценивали скорее в роли пользователя, так как у нас на руках нет таких данных)

Ответить

Занимаюсь рекламой в интернете, поэтому шарю и за оптимизацию сайтов, все по факту сказали)

5
Ответить

стараемся, спасибо )

1
Ответить

Статья хорошая.

4
Ответить

спасибо )

Ответить

спасибо.

Ответить