Часть I

Чем так плох текущий сайт
и зачем создавать новый концепт?

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

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

При разработке таких проектов я испольую следующую методологию:
https://medium.com/looks-good-feels-good/user-experience-for-product-designers-e9fa621ce3bc:

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

Все они выглядят ужасно… Однако конкуренты раскрыты, составлен список минусов и плюсов каждого решения, теперь можно отправляться проводить юзабилити-экспертизу Дром.ру, поехали:

Главная страница

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

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

Их я пометил зеленым цветом. 1. Кнопка «Подать объявление» относится к рекламному блоку слева, а размещена справа около регистрации. 2. Почему-то «Логин» спрятался в сайдбаре, его можно перенести в хедер. 3. Тут же замаскировался «Поиск» (я нашел его с четвертой попытки). 4. Блок с «Форумом» по сути занимает небольшую высоту, и если мы перенесем логин с поиском в хедер, то весь сайдбар отдается только под него, а это неоправданная растрата пространства.

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

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

Страница «Автомобили»

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

Предлагаю обратить внимание на блок с параметрами выбора авто. При поиске автомобиля эта панель является основным элементом на странице и в ней сейчас очень много раскрывающихся списков с неизвестным количеством пунктов. Чтобы упростить восприятие формы предлагаю улучшить эту панель. Например, пункты «Топливо», «КПП» и «Привод» всегда имеют по 3–4 пункта в каждом списке, не больше. Поэтому пользуясь ситуацией превращаем их в удобные табы:

Видно, что в раскрывающихся списках, во-первых, не видно пункты внутри, во-вторых, приходится делать 2 клика на каждое действие. Если же превратить их в радиобаттоны или чекбоксы, мы сразу убиваем двух зайцев. Теперь, чтобы выбрать три опции, нам нужно 3 клика против 6. В два раза быстрее. Мы только что оптимизировали самые важные поля для поиска авто.

Зеленым маркером я отметил связанные элементы, розовым цветом помечены глобальные пункты меню. Это не фильтры, хотя они и замаскированы под них. Переход по этим ссылкам: «Спецтехника и грузовики», «Мототехника» — ведут на другие страницы с абсолютно другим интерфейсом и никак не влияют на список автомобилей, рядом с которым их разместили. Их нужно отправить либо в основное меню, либо куда-то в хедер страницы. Так как это выходит за рамки концепта, я оставил эту проблему дизайнерам Дром.ру, может быть они когда-нибудь прочитают эту статью :)

По сути, данная страница должна привести нас к списку объявлений, но нам показывают лишь пять из них. Незаметная ссылочка «Посмотреть еще объявления о продаже» даже не пытается сойти за call-to-action, а наоборот, ее как будто специально замаскировали и спрятали в углу. Я хочу, оказавшись на этой странице, начать ей пользоваться, вместо этого я опять делаю лишние клики, которых могло не быть.

Отдельная претензия к списку объявлений. Возьмем известный многим сайт www.craigslist.org. Страшный и непонятный дизайн? Давайте посмотрим на выборку автомобилей: http://moscow.craigslist.org/search/cta. Хотите списком? Пожалуйста! Может, показать плиткой? Нет проблем. Когда я открываю 100+ автомобилей, я сначала выберу десяток по внешнему виду, а потом уже буду смотреть по остальным характеристикам. Почему я не могу сделать вид плиткой? Это косяк.

И опять непонятный сайдбар справа. Мне кажется, что «Обзоры авторынков» воткнули сюда просто, чтобы забить пустое пространство. Но есть отличное решение — выкинуть сайдбар и отдать 100% ширины под самый важный блок — список автомобилей, ведь эта страница именно для него и сделана.

Часть ll

Пользовательские истории и эскизы

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

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

На странице «Автомобили» всех все более менее устраивало, но благодаря опросу появилась идея добавлять понравившиеся варианты в избранное (прямо из списка) и еще несколько небольших изменений.

Wireframes

Обычно для создания эскизов и прототипов для больших интерфейсов лучше подходит Axure, где можно создавать динамические прототипы и тестировать проект, не тратя сотни драгоценных часов команды разработчиков. Но в данном случае у нас всего две страницы. Для быстрых прототипов взгляд пал на Balsamiq. Итог работы — эскизы двух основных страниц:

Картина нарисовалась, теперь каркас можно утверждать и переходить либо к динамике, либо к дизайну, в зависимости от сложности проекта. На данных эскизах я показал следующее:

Шапка теперь укомплектована по всем правилам, туда переехал поиск, регистрация, меню осталось на месте. Мне очень не нравится, какой аншлаг творится на www.lookatme.ru — все элементы разбросаны по странице непонятно как. Какие-то новости подаются крупными изображениями, маленькие новости вообще не читаются. Что, куда и зачем, сложно сказать, я как раз хотел отойти от этого. Зато мне очень понравилось, как сделали сайт www.motor.ru — все новости по типу отделены логическими блоками, все понятно. Именно данную сетку я и применил в своем редизайне.

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

Часть lll

Чистовой дизайн и анимация
ключевых UI-решений

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

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

Фокусировка на ключевых
UI элементах

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

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

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

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

Не стоит вываливать всю информацию списком на голову несчастного пользователя, поэтому я разделил все по категориям. Как видно, все они помечены разными цветовыми маркерами, как на www.usatoday.com — обратите внимание, что каждый раздел заворачивается в свой цвет. Думаю, что для такого большого проекта как Дром.ру такая маркировка поможет сделать навигацию более понятной.

А это моя любимая фича! Поля с ползунками а-ля новый www.alfabank.ru (наведите курсор на «Получить деньги» и подвигайте ползунок сверху). Не любите ползунки? Нет проблем, вводим цифровое значение прямо в поле. Большинство раскрывающихся списков я по возможности превратил в радиобаттоны или чекбоксы, в зависимости от ситуации. Об этом я тоже писал выше. На мой взгляд, пользоваться такой формой будет одно удовольствие!

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

Заключение

как видно по диаграмме, впереди осталось еще два этапа работы:
4. финализация и подготовка дизайна для работы и тестирование ошибок в реализации; 5. Фидбэк от реальных пользователей проекта. Затем снова, сбор информации от пользователей, тестирование, наброски идей и предложений, дизайн, реализация и тестирование, фидбэк и так по кругу… Но так как эта работа была выполнена для тренировки, эти пункты были опущены до первого удобного случая. Этот проект не имеет отношения к команде Дром.ру, все идеи из данной работы вы можете заимствовать и применять в своей практике.

Если вам понравилась статья, ставьте лайк,
пишите комментарии.

Никита Прокудин
www.yoneg.ru