«АвтоТочки» — социальный сервис, сочетающий в себе базу данных автоуслуг России, отзывы пользователей и площадку для общения на автомобильную тематику.
Cуть сайта на одной странице
От остальных автомобильных сайтов АвтоТочки отличаются широкими возможностями поиска точек (так создатели называют компании, занимающиеся продажей и обслуживанием автомобилей), а также архивом отзывов клиентов о точках. Например, можно найти все официальные сервисы Renault, работающие круглосуточно и занимающиеся ремонтом автоматических коробок передач, после чего оценить о каком из них посетители отзываются лучше всего.
Чтобы при поиске точек карта занимала большую чаcть экрана, её размеры изменяются динамически вместе с изменениями размера окна.
Основная часть контента социального сервиса создается посетителями ресурса. В АвтоТочках этот принцип актуален, как никогда, ведь никто не расскажет подробнее о своем автосервисе, чем его владелец или постоянный клиент. Поэтому добавить точку должен суметь даже владелец шиномонтажа, не державший в руках ничего сложнее калькулятора.
Проектированию интерфейса добавления точки было уделено особое внимание. Благодаря понятной последовательности действий, однозначным текстам и минимальному необходимому набору полей удалось достичь баланса между полнотой вводимой информации, количеством пользовательских ошибок и скоростью заполнения. В результате, среднее время, требующееся на добавление точки, не превышает двух минут.
Чтобы не плодить множество одинаковых точек, в форму добавления точки встроен механизм проверки на дубликаты.
Достаточно указать адрес и тип точки, и система сама предупредит, если похожие точки были добавлены ранее
Преимущество АвтоТочек над остальными автомобильными сайтами заключается еще и в том, что пользователь наряду с информацией о точке видит сразу и отзывы клиентов, и карту проезда.
Страница с информацией о точке и отзывами посетителей
Процесс
Создатели сервиса обратились к нам ещё на стадии идеи проекта — «сервиса, с помощью которого можно будет найти автосервис, в котором тебя не обманут». Начинаем с описания персонажей, то есть гипотетических пользователей сервиса, которым он мог быть полезен.
Всего придумали больше 20 персонажей, вот только самые неординарные из них:
- На Nissan’е Сергея загорелась лампа замены колодок и начался характерный скрип, что совершенно некстати, ведь сразу же после работы он собирался ехать за город. Ему необходимо найти как можно ближе к офису сервис с магазином фирменных запчастей, в котором смогут поменять колодки в обеденный перерыв.
- С Анатолия Петровича на родной заправке взяли деньги за 20 литров бензина, а в бак залили не больше 5. К сожалению, заметил он это, когда через несколько километром снова загорелась лампочка низкого уровня топлива. Он хотел написать об этой истории и предупредить остальных жителей района.
На основе созданных персонажей составляем список сущностей и сервисов с разбиением на версии, после чего проектируем высокоуровневую модель интерфейса.
Как только утверждена высокоуровневая модель, рисуем прототип интерфейса.
Далеко не все страницы прототипа
Параллельно с разработкой интерфейса думаем над внешним видом маркеров для обозначения точек на карте. Маркер должен отражать тип точки, рейтинг и номер из текстового списка с результатами поиска.
Подбираем цвета для оценок, пробуем форму маркера.
Проверяем на карте.
Результат неудовлетворительный — пиктограммы плохо заметны. Не хватает контрастности. Пробуем уменьшить размер цветного круга.
Маркеры стали лучше заметны, но теперь хуже различим цвет оценки точки (особенно это очевидно на маркере с цифрой 1).
Пробуем разные варианты:
С белым цветом маркеры лучше заметны, но пиктограмма, наложенная на цветной круг, плохо читается.
Надо разнести цветное выделение и пиктограмму типа точки. Можно попробовать отказаться от пиктограммы.
Видно замечательно, но придется постоянно смотреть на легенду, чтобы понять — это сервисы или АЗС?
А если отказаться от номеров, а информацию о точке показывать при наведении курсора?
Вот так значительно лучше. Теперь осталось окончательно отрисовать пиктограммы и увеличить толщину синей рамки для контраста.
Получившиеся маркеры на сайте.
