Редизайн Yelp: Как использовать результаты тестирования в проектировании интерфейсов

Дизайнер Джерри Као в своем блоге на Medium рассказал о том, как можно улучшить интерфейс сервиса объявлений Yelp.

В рубрике «Интерфейсы» — перевод заметки.

#самизнаетекакиекнопки

Разработка дизайна большой командой равносильна смерти от тысячи мелких порезов.

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

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

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

Рассмотрим процесс тестирования интерфейса и попробуем понять, как нам удалось сделать Yelp похожим на Airbnb.

Выбор правильных пользователей

Согласно книге «
Руководство по тестированию юзабилити», одним из важнейших шагов является определение того, для кого вы делаете дизайн. Поняв свою аудиторию, вы сможете выбирать подходящих пользователей для тестирования обновленного дизайна.

Как вы видите выше, у компании Yelp не было проблем с пользователями.

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

Мы не акцентировались на возрасте пользователей, их доходах, половой принадлежности или опыте использования интернета, — поскольку посетители Yelp относятся к разным слоям населения. Мы изучили статистику по индустрии и начали свое собственное исследование, выбрав всего пять человек (которые должны обнаружить 85% проблем сайта).

Постановка задачи

После каждого выполненного задания мы проводили опрос участников об уровне его сложности (согласно
Метрике пользовательской оценки интерфейсов). Результаты показали, что чаще всего на Yelp пользователи используют поиск.

Задачи для группы 1 — зарегистрированные пользователи

Вам необходимо зарезервировать столик в ресторане на 15 человек. Вам нужен классический итальянский ресторан. Ваш бюджет около $20 на человека. Найдите такой ресторан в вашем районе, подходящий по всем требованиям.
У вашего друга скоро день рождения и вы планируете устроить ему вечеринку. Найдите в окрестностях десять баров, которые подойдут для проведения вечеринки. Сохраните их — так вам будет легче найти их снова.
Вы едете по городу Бойсе, штат Айдахо. Именно в тот момент, когда вы решаете остаться на ночь, двигатель вашего автомобиля начинает издавать странные звуки. Ваш попутчик советует переночевать по адресу 27th St Automotive. Используя Yelp узнайте открыта ли гостиница во вторник в восемь часов вечера.
Отправляйтесь в десять баров, которые вы выбрали и сохранили для вечеринки в честь дня рождения друга. Выберите один, полагаясь на ваш вкус.

Задачи для группы 2 — незарегистрированные пользователи

Найдите неподалеку от вас ресторан, в котором вы раньше не были. Потратьте на это не более 5 минут.
Вам необходимо зарезервировать столик в ресторане на 15 человек. Вам нужен классический итальянский ресторан. Ваш бюджет около $20 на человека. Найдите неподалеку от вас ресторан, подходящий по всем требованиям.
Вы хотите провести выходные с вашими соседями. Найдите концерты, игры или другие события, используя Yelp.
Вы едете по городу Бойсе, штат Айдахо. Именно в тот момент, когда вы решаете остаться на ночь, двигатель вашего автомобиля начинает издавать странные звуки. Ваш попутчик советует переночевать по адресу 27th St Automotive. Используя Yelp узнайте открыта ли гостиница во вторник в восемь часов вечера.

Анализ результатов и начало разработки

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

1. Поиск — основной элемент страницы

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

На самом деле, изначально, чтобы найти ресторан поиском воспользовались только четверо из пяти тестируемых. Только один пользователь использовал «Категории», однако он быстро понял, что они захламлены и вернулся к строке поиска.

Было:

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

Стало:

Вы можете видеть, что мы добавили точности в строку поиска, но при этом сделали ее более свободной и контрастной для акцентирования (очень эффективный ход, описанный в статье «
Web UI Best Practices»).

Имея в виду, что написание отзывов является одной из основных особенностей Yelp, мы также добавили кнопку «Написать отзыв» в верхнем левом углу. Список городов было решено переместить вниз (здесь не показан), так как за время тестирования им никто не воспользовался.

2. «Категории» должны быть более наглядными

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

Было:

Категории находились в левой части экрана и занимали в два раза больше места, чем на показанном примере.

В результате, некоторые пользователи считали, что раздел слишком захламлен. Учитывая сколько всего напихано на основную страницу Yelp становится понятно, почему дизайнеры использовали паттерн List UI.

Стало:

В книге «
Web UI Patterns 2014» говорится, что лучшим решением для отображения широкого спектра информации, не используя огромное количества текста, является паттерн Cards.

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

3. Сделать проще поиск событий

Большая доля бизнес-модели Yelp заключается в привлечении клиентов через раздел «События». Признаться честно, нас немного удивило, что этот раздел находился где-то далеко на боковой панели.

Неудивительно, что никто не пользовался разделом «События», учитывая как трудно до него добраться. Когда мы попросили найти интересные события поблизости, один из тестируемых воспользовался поиском, а остальные разделом «Лучшее на Yelp».

Было:

Раздел «События» либо скрыт наверху в панели навигации (здесь не показано), либо сдвинут вправо и находится в середине страницы.

Стало:

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

4. Используйте подвал страницы

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

Было:

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

Стало:

Мы убрали боковую панель и переместили второстепенные элементы, вроде «Популярные события» или «Списки» (которые, как показало тестирование, никто не использует), в подвал страницы, включающий в себя также инструменты для SEO (списки различных районов и прочее).

5. Фильтры и сортировка требуют видимой иерархии

Наши тесты показали, что иерархия и классификация в «Фильтрах» и принципах сортировки требуют небольшой переработки.

Самыми важными фильтрами являются «Открыто сейчас», «Принимают кредитные карты» и «Ужин». Пользователи также отметили, что некоторые фильтры были реализованы неудобно или вообще были лишними.

Было:

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

Основное правило — не более одного клика.

Стало:

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

Около 90% пользователей назвали фильтр «Открыто сейчас» — главным, поэтому мы отделили его от остального списка. Также мы пояснили разбиение по ценам — все равно это не заняло много места.

6. Пользователи любят картинки

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

Было:

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

В проводимом нами тестировании только 33% пользователей выполнили задание с сохранением ресторанов на будущее, 67% не смогли этого сделать, либо сдались.

Стало:

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

Подражание больше, чем просто лесть

Когда мы закончили новый дизайн, наш CEO Марцин Тредер (Marcin Treder) сделал интересное замечание о том, что наш новый сайт напоминает ему Airbnb. Когда вы посмотрите на внешний вид сайта Airbnb ниже, вы заметите странное сходство.

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

Блочный интерфейс Airbnb позволяет без проблем найти место для остановки (основное предназначение). Если полагать, что основная функция Yelp — поиск заведений, то неудивительно, что при похожем предназначении сервисов похожи и их интерфейсы.

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

Мы сделали наполнение страницы минимальным, чтобы пользователи Yelp могли найти себе место поесть, без принудительного чтения разделов «Свежее» или «Сегодня в Обсуждениях».

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