Сила мінімалізму: як ми змінювали дизайн Yelp

Колективний дизайн - це смерть від тисячі порізів. Помирає він повільно, в міру отримання все більшої кількості думок від різних людей, поки не починає виглядати як мішанина з розрізнених шматочків. Так не повинно бути - тим більше, в таких великих компаніях, як Yelp.

Ми вирішили змінити дизайн їхнього сайту, щоб показати, як правильно проведений тест зручності використання допомагає в цьому. Ми ґрунтувалися на нашому дизайнерському досвіді роботи в різних компаніях, і ми вважаємо, що тест зручності використання - найкращий захист дизайнерських рішень.

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

Оскільки ми вже додали можливість тестування зручності використання в UXPin, ми подумали, що цей досвід дасть нам більше розуміння в тому, як інші люди зможуть використовувати наш інструмент.

Давайте ближче розглянемо процес, який привів нас до зміни дизайну Yelp на щось, що нагадує AirBnB.

Виберіть правильних користувачів

Як написано у «Керівництві з тестування зручності використання», один з найважливіших кроків - визначити, для кого ви робите дизайн. Дізнавшись аудиторію, можна вибрати правильних користувачів для тестування дизайну.

Як видно з графіка, у Yelp немає проблеми з користувачами.

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

Ми не звертали уваги на вік, стать, дохід або досвід у вебе. Ми вибрали п'ятьох користувачів - за статистикою такий набір визначає 85% проблем сайту).

Створити правильні завдання

Ось приклади завдань, які ми ставили перед користувачами. Після їх виконання ми запитували користувачів, чи вдалося їм впоратися із завданням і просили їх оцінити рівень складності. Ці завдання показують, як Yelp справляється з основною своєю функцією - система бізнес-пошуку.

Завдання: Група 1 (користувачі Yelp)

1. Вам потрібно зарезервувати кімнату в ресторані на 15 осіб. Ви шукаєте італійський ресторан з хорошою атмосферою. Ваш бюджет - $20 на людину. Знайдіть ресторан ближче до вас.

2. Ви плануєте відсвяткувати ДР вашого найкращого друга. Знайдіть 10 барів недалеко від вашого будинку, в які ви хотіли б заглянути з метою організації вечірки. Збережіть їх у закладках, щоб потім їх легко можна було знайти.

3. Ви їдете по Boise, Idaho, і ваша машина починає видавати дивні звуки. Ваш супутник рекомендує вам автосервіс за адресою 27th St. За допомогою Yelp з'ясуйте, чи відкрито він о 8 вечора у вівторок.

4. Поверніться до 10 барах для вечірки. Виберіть бар, базуючись на смаках вашого друга.

Завдання: Група 2 (не користувачі Yelp)

1. Використовуйте Yelp, щоб знайти поруч з вами ресторан, в якому ви ще не були. Зробіть це не більше ніж за 5 хвилин

2. Вам потрібно зарезервувати кімнату в ресторані на 15 осіб. Ви шукаєте італійський ресторан з хорошою атмосферою. Ваш бюджет - $20 на людину. Знайдіть ресторан ближче до вас.

3. Ви шукаєте щось цікаве і незвичайне, чим можна зайнятися по сусідству у вихідний. Знайдіть концерт або інший захід через Yelp

4. Ви їдете по Boise, Idaho, і ваша машина починає видавати дивні звуки. Ваш супутник рекомендує вам автосервіс за адресою 27th St. За допомогою Yelp з'ясуйте, чи відкрито він о 8 вечора у вівторок.

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

Завдяки віддаленому тестуванню нам вдалося отримати результати всього за годину. Ось що ми придумали. Посилання з наших варіантів ведуть на робочі прототипи сторінок.

1. Домашня сторінка повинна бути сфокусована на полі для пошуку

Всі п'ятеро піддослідних використовували рядок пошуку - навіть для завдань, для яких підходили категорії меню. Четверо відразу пішли в пошук, один спробував скористатися меню, але заплутався в ньому і пішов у пошук.

Зараз пошук знаходиться вгорі сторінки, там же поруч є список міст, який навіть не відповідає поточному місцезнаходження (бачити, підступи SEO). Ми вирішили, що раз головне в Yelp - пошук, чому б не розмістити його по центру?

Поле для пошуку явно виділено, є контраст за кольором, і при цьому навколо є вільний простір. Оскільки ще одним важливим аспектом сервісу є написання оглядів, ми додали посилання для написання огляду. Список міст вирушив у футер.

2. Вирівняти категорії яскравіше і проструктурованіше

Ми вирішили, що категорії не користуються успіхом, тому що вони зібрані в безладі і знаходяться в неочевидному місці.

Замість шаблону «список» ми вибрали шаблон «карт». Він відмінно підходить для виведення різної інформації, яка не перетворюється на океан тексту.

Наш дизайн більш наочний, і в ньому є всього 8 категорій. Для розкриття інших треба ткнути в «Other Businesses». І ми перенесли категорії трохи вище.

3. Спростити пошук подій

Важлива частина сервісу - залучення користувачів через Події, тому дивно, що їх засунули в кут. До них там складно дістатися - не дивно, що користувачі їх не використовували.

Зараз вони або запрятані праворуч у верхній навігації, або ховаються на бічній панелі в середині.

Ми переробили дизайн і помістили Події в середину. Ліворуч можна вставити спеціальну фотку або відео. Доступ полегшав, що необхідно для досягнення бізнес-мети.

4. Не бійтеся футера

Коли ми дивилися відеозаписи роботи користувачів і слухали їхні коментарі, ми звернули увагу, що всі вони поскаржилися на візуальне сміття та велику кількість інформації на сайті. Якщо подивитися на сторінку Yelp, видно цей безлад, що говорить про колективну розробку дизайну.

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

Ми прибрали бічну панель і перенесли другорядні речі в футер. Там же містяться те, що потрібно для SEO.

5. Фільтри та сортування вимагають зорової ієрархії

Наші тести показали, що ієрархія і номенклатура «Спеціальних фільтрів» і «Сортування» вимагають переробки.

Найважливіші фільтри - «Open Now», «Accepts Credit Cards» і «Serves Dinner». Також користувачі заплуталися в цінах. 7 фільтрів (типу «Has a DJ») були відкинуті за непотрібністю.

Поточні фільтри та сортування не мають ієрархії. Все розкидано.

Наш дизайн ізолює важливі фільтри і групує секції по квадратах. У кожній з них тільки 4 варіанти.

Для 90% користувачів був важливий фільтр «Open Now», тому ми виділили його. І, оскільки це не додало багато тексту, ми прояснили питання з цінами шляхом зазначення діапазонів.

6. Люди люблять картинки. Більше картинок.

Сторінка результатів теж вимагає переробки. Троє з п'яти піддослідних згадали, що фотки їжі вплинули б на їхні рішення. Їм хотілося б побачити їх прямо в результатах пошуку.

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

Ми збільшили фотки і зробили кнопку «Save for Later» для закладок. Новий дизайн слід правилу F і виділяє адресу з телефоном.

Імітація - це більше, ніж лестощі

По закінченню робіт ми помітили, що наш новий дизайн нагадує AirBnB. При погляді на їх сторінку це стає ясно. Ми не збиралися відтворювати AirBnB, але їх дизайн дуже ефективний і зорово приємний.

Їхній плоский інтерфейс дозволяє без проблем знайти житло (що є їхнім основним завданням). Коли ви розумієте, що основним завданням Yelp є пошук бізнесів, стає ясно, що відмінності між сайтами мінімальні. Тому не дивно, що дизайн вийшов настільки схожим.

Ми розуміємо, що спільнота відіграє в Yelp важливу роль, але іноді краще сконцентруватися на основних речах.

Дизайном займатися важко, тому що рішення часом неочевидно прості. У нашому випадку тест зручності використання показав, що іноді він просто обмежується основними речами. Якщо добре виконати їх, все інше приходить автоматично.