Чому новий сайт OLX це фіаско?

31.07.2020

Влад Сідньов

---

 

Дизайн в мінімалістичному стилі без колірних акцентів на популярних елементах інтерфейсу – не найкраще рішення для сайту з великою різноманітністю функцій.

Безумовно, це питання неоднозначне: комусь подобається такий мінімалістичний стиль, комусь ні. Але, якщо ми говоримо про дизайн, який повинен вирішувати завдання користувача, – тут є десятки невирішених проблем. Їх ми і розберемо.

1. Недоліки в рядку Пошуку

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

Також немає підказки, що рядок Пошуку працює через клавішу «Enter». Рядок Пошуку – це найважливіший елемент на сайті, з яким взаємодіють майже всі користувачі. Внутрішнє дослідження Webpromo показує, що до сих пір багато людей не знають про запуск Пошуку через клавішу «Enter». Тому для цих користувачів доцільно було б розмістити підказку.

Що слід зробити

Рядок Пошуку став би зручніше, якби плейсхолдер зникав. На початку рядка повинен блимати помітний курсор, а в кінці – іконка клавіші «Enter». Весь сайт навколо активованої рядки Пошуку бажано затемнити, щоб сфокусувати на ній увагу користувача.

 

2. Перемикання мови суперечить паттерну

Відвідувачі вже звикли до цього елементу в стилі скорочених перших букв – RU, UA або РУС, УКР. Ці літери давно не читаються, а скануються досвідченими користувачами, як самостійний цілісний елемент. У користувачів вже сформувався патерн щодо елемента в такому стилі.

Чого намагалися домогтися розробники, пішовши від уже звичного і зрозумілого елемента в сторону такого новаторського рішення? Ну вже точно, що це було зроблено не в інтересах користувачів. Чому? Тому що елемент не явний і доводиться додумувати, що «мова» – це російська мова інтерфейсу, а «мова» – це українська мова інтерфейсу.

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

Крім цього, де ми звикли бачити на більшості сайтів елемент перемикання мови? Правильно – справа вгорі. А тут, де ми бачимо? На самому видному місці – вгорі по центру. За моїми дослідженнями на сайтах наших клієнтів, перемикачем мови користується від 0,5 до 2% відвідувачів. Чи потрібно для невеликої групи відвідувачів, які і так знають, де цей елемент інтерфейсу шукати (справа вгорі), виносити його на саме видне місце для всіх відвідувачів, переміщаючи його зі звичного місця до центру екрану?

Рішення невдале і безглузде, яке погіршується призначений для користувача досвід.

Що слід зробити

Використовувати традиційний стиль перемикання мови – UA / RU або УКР / РУС, яке вже стало звичним паттерном. Розмістити цей елемент в звичному для всіх місці – справа вгорі.

Не застосовувати divider у вигляді вертикальної риси між ними – це графічне сміття.

 

3. Великі відступи між елементами

Користувачі OLX – це в основному постійна аудиторія, яка заходить на сайт не один раз. Тобто відвідувачі, які добре запам’ятовують елементи інтерфейсу і їх розташування. Чи потрібно для постійних відвідувачів робити такі великі текстові заголовки «Головні рубрики» і «VIP-оголошення»?

Що слід зробити

Зменшити відступи між елементами і розмір заголовків. Таким чином позбавитися від зайвого «повітря» на сторінці. Для постійних користувачів щільність інформації буде більш зручна.

Додати до заголовків іконки. Графічні елементи дадуть можливість зменшити шрифт заголовків без зниження швидкості візуальної ідентифікації елемента.

 

4. VIP-реклами не потрапили в перші 700 пікселів

В середньому у більшості користувачів ноутбуків розширення 1368х768 рх, а це найпопулярніше розширення екранів серед Desktop пристроїв (більше 30% користувачів). З 768 пікселів близько 100 пікселів йде на системну частину. І на корисну частину екрану залишається близько 670 рх.

Таким чином, всі найважливіші елементи першого екрану повинні уміщатися в перші 670-700 рх (приблизно). Якщо якісь елементи будуть знаходиться нижче – вони не будуть на першому екрані у найбільшого сегмента користувачів Desktop пристроїв.

На скріншоті ми бачимо, що VIP-оголошення не потрапляють в перший екран ноутбука. Якщо оптимізувати перший екран по висоті, без проблем вмістяться в перший екран і VIP-оголошення.

Я не знайомий з маркетинговою стратегією OLX і, можливо, їм ця категорія оголошень не важлива. Тоді це не так критично.

Що слід зробити

Оптимізувати висоту і розміри елементів на першому екрані так, щоб заголовок VIP-оголошення помістився в перші 670 рх.

 

5. «Мій профіль» постійно відволікає, випадаючи при випадковому наведенні мишкою

При наведенні курсором мишки на «Мій профіль» з’являється меню, що випадає. Це відбувається постійно, навіть при випадковому наведенні на елемент. Віджет відволікає і заважає користуватися сайтом.

Що слід зробити

Налаштувати невелику затримку перед появою меню, що випадає. Визначити оптимальний час допоможе аналіз поведінкових факторів сайту.

 

6. У фіксованому меню в ПК версії відсутній Пошук

Пошук – стратегічний елемент для будь-якого сервісу оголошень. Необхідно забезпечити максимальний доступ до рядка введення. І тут OLX допускає грубу помилку. Якщо ви перебуваєте в якійсь категорії в самому низу сторінки і хочете скористатися пошуком, вам потрібно підніматися на самий верх.

Що слід зробити

Додати Пошук в фіксоване меню. Для цього в меню є достатньо місця.

 

7. Іконки Головних рубрик не мають hover-ефекту

При наведенні на іконки вони не змінюють свій стиль. Зміни є тільки у назви рубрик. Але з досліджень Webpromo близько половини аудиторії можуть натискати на іконки, замість назви категорії. Відсутність hover-ефекту на елементах, які мають посилання – недолік і порушення стандартних очікувань користувачів.

Що слід зробити

Додати hover-ефект не тільки на назви Головних рубрик, а й на іконки.

 

8. Тизер оголошення не має hover-ефекту

Аналогічна проблема стосується і тізера оголошень. При наведенні курсором на оголошення не відбувається ніякої зміни тізера.

Що слід зробити

Додати hover-ефект, який спрацьовував би при наведенні на весь тизер.

 

9. Посилання на сторінки в підвалі не мають hover-ефекту

Будь-які посилання повинні змінюватися при наведенні. Але на сайті OLX посилання в підвалі сторінки не змінюються ніяким чином.

Що слід зробити

Додати hover-ефект на посилання в підвалі.

 

10. Зауваження щодо випадаючого меню «Мій профіль»

Чому «Объявление» в російській версії сайту в однині, а все інше – в множині? Логічніше написати «Объявления», оскільки таке формулювання краще вписується в загальний стиль назв, і навіть краще сприймається самими користувачами, не викликаючи ніякого дуалізму смислів.

Яку цінність несуть заголовки «Мій профіль» і «Вибрані»? Вони займають багато місця і збільшують по висоті меню, що випадає.

Що слід зробити

Зменшити заголовок «Мій профіль» або видалити його зовсім, розділивши блок «Мій профіль» і «Вибране» горизонтальним дівайдером. Аналогічне ми можемо бачити на кнопці «Вийти». Також я б рекомендував додати в елемент рамки іконки до блоку «Вибране», кнопці «Вийти».

Нуль обраних пошуків і оголошень повинні візуально різнитися від «не нуля». Наприклад, нуль повинен бути виділений іншим кольором. До кожної рядку можна додати іконку (наприклад, як у OLX доставки), яка згодом полегшить досвідченим користувачам вибір потрібного рядка меню.

11. Назва кнопки «Додати в обране» не відображає її функціонал

На скріншоті при натисканні на «Додати в обране» зберігаються настройки даного Пошуку. Це не всім зрозуміло, так як зазвичай «Додати в обране» відноситься тільки до окремих товарів.

Що слід зробити

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

 

12. Неправильно підібраний інтерфейс меню для сортування оголошень

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

 

13. Вирівнювання ціни суперечить паттерну

У всіх табличних редакторах (наприклад, Microsoft Excel, Google Spreadsheets) вирівнювання цифр йде по правому краю. Так набагато зручніше візуально відрізняти одне число від іншого. Це сформований патерн, який звичний при скануванні чисел. Вирівнювання по лівому краю ліквідує цей візуальний патерн і збільшує когнітивне навантаження користувача.

Що слід зробити

Вирівняти ціни по правому краю.

 

14. ТОП-оголошення та звичайні оголошення мають вкрай мало відмінностей і погано ідентифікуються при скролінгу

 

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

Що слід зробити

Додати більше помітні відмінності для ТОП-оголошень.

 

Додаткові ідеї по тизер в Категорії і на сторінці результатів Пошуку

 

15. Відсутня можливість збільшити фотографії без переходу на сторінку оголошення

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

 

16. Немає інформації про наявність додаткових фотографій у оголошення

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

Що слід зробити

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

 

17. Неможливо побачити ім’я продавця

Деякі продавці багато років використовують OLX і у них може бути невелика впізнаваність в певних категоріях. Також якщо ти не перший день шукаєш товар і вже запам’ятав деякі оголошення і їх продавців, які тобі не підходять, дані про продавця могли б дати більше інформації.

 

18. Немає інформації новий товар або б / у

На тізері оголошення немає інформації про те, новий це товар або б / у. Для більшості покупців OLX це критично важлива інформація.

 

Додаткові ідеї по сторінці Оголошення

 

19. Кнопка «Купити з доставкою» погано виділяється в дизайні

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

 

20. На першому екрані моніторів більшості відвідувачів не видно Назви товару і Ціни

Крім кнопки цільового дії, який контент є стратегічно важливим? Правильно – назва товару і його ціна. А на скріншоті першого екрану ми не бачимо цю інформацію без скролінгу. Це кричуща помилка при проектуванні сторінки оголошення. Ціна товару і його назва обов’язково повинні міститися в перші 680 рх сторінки оголошення.

 

21. Порушено логіка розміщення кнопок «Показати телефон» і «Написати автору»

Кнопки «Показати телефон» і «Написати автору» відокремлені від кнопки «Купити з доставкою» трьома іконками за умовами доставки. Досвідчені користувачі навіть не читають інформацію з цих ікон, так як вона не несе для них ніякої цінності. Все і так знають, що доставка робиться через «Нова пошта», товар оплачується після огляду і не відбувається передачі персональних даних (насправді вся інформація про продавця вказана на наклейці «Нова пошта» при отриманні – ПІБ, телефон відправника).

У цьому блоці три цільових елемента: кнопки «Купити з доставкою», «Показати телефон» і «Написати автору». Залежно від того, наскільки користувач впевнений в покупці, він буде взаємодіяти з однією-двома кнопками. Тому дуже важливо, щоб елементи знаходилися одна біля одної Тоді увагу користувача не буде розфокусувати.

 

22. Що означає «Користувач»? Можливо, «Продавець»?

Чому продавець вказано, як «Користувач»? І сама рядок займає багато місця, витісняючи кнопки цільового дії нижче. Наскільки взагалі потрібен заголовок в даному блоці? Тим більше, що далі в двох місцях використовується звернення «автор» і «автору». Це вводить в оману. Якщо використовується на кнопці «автору», тоді і заголовок блоку повинен бути «Автор».

Але все одно дивно, чому не використовується слово «Продавець»? Цей термін був би зрозумілий всім відвідувачам сайту.

Що слід зробити

Змінити «Автор» на «Продавець». Прибрати заголовок «Користувач» в блоці з описом інформації про «Автора».

 

23. Дуже дивне відображення геолокації – ще «пимпочки» по центру кружечка не вистачає

Відображення геолокації виглядає дуже дивно. Чому дизайнер вирішив зробити саме такий стиль? Особисто у мене і у опитаних мною людей цей синій кружок НЕ викликав асоціацію з геолокації. Чому не використовувати ті патерни, які вже сформовані навігаторами і онлайн-картами? Використання впізнаваних кольорів могло б посилити айдентику даного елементу. А в такому стилі виникає яка завгодно асоціація, аж до зображення контрацептиву, але ніяк не геолокація.

Що слід зробити

Змінити стиль геолокації продавця.

 

24. Пропали тизери інших фотографій

Ще один значний фейл – неможливо переглянути тизери інших фотографій. Причому в попередній версії сайту ця можливість була. Але тепер її прибрали. На яке внутрішнє дослідження або на яку логіку спиралися розробники? Нерідко самому доводилося користуватися сайтом OLX і завжди було візуально зручно зрозуміти, які ще є фото, а потім натиснути на ту, яка цікавить саме мене.

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

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

 

25. Кнопки перемикання фотографій знаходяться в незручному місці і не працює звичне всім перемикання справа / зліва від фото

Самі кнопки перемикання фотографій знаходяться в незручному місці і занадто дрібні. Традиційне для всіх галерей перемикання фотографій при натисканні на край фотографії не працює. Це все формує негативний досвід користувачів.

 

26. У спливаючому вікні змінюється дизайн блоку «Користувач», пропала кнопка «Купити з доставкою», змінився стиль і порядок кнопок, і навіть іконка користувача інша

Якщо розробники спроектували блок «Користувач» з відповідними кнопками на сторінці оголошення, навіщо при збільшенні фотографії, змінювати даний блок? Причому змінюється і його стиль, і стиль всіх елементів, і навіть порядок розташування елементів. Крім того, пропадає найголовніша кнопка «Купити з доставкою».

Що слід зробити

Не змінювати стилістику одного і того ж блоку на сторінці оголошення та в спливаючій галереї.

 

27. З копірайтінгом тут явні проблеми

Що значить «уникайте пересилання грошей наперед»? Хто так розмовляє? Вкрай дивне формулювання. Чому в такому величезному блоці всього однин цінний рядок?

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

 

28. Коли впираєшся в обмеження за кількістю прикріплених файлів, немає повідомлення про те, що ви досягли максимальної кількості файлів

Якщо до повідомлення можна прикріпити до п’яти файлів, слід повідомляти про це користувачеві. В іншому випадку, це змушує його здогадуватися про обмеження.

Важливо! Перший закон Стіва Круга по юзабіліті говорить – «Не змушуйте користувача думати!». Чим менше часу відвідувач сайту витратить на пошук потрібних кнопок і повідомлень, тим більше його залишиться на виконання цільових дій.

Кнопка «Видалити» візуально ідентична кнопці «Виберіть файл» і знаходиться дуже далеко від назви файлу – можна випадково видалити не той файл.

 

29. Помилки на сторінці оформлення доставки

Немає швидкого вибору популярних міст, що дивно. Напевно, як і в більшості e-commerce проектів столиця і великі обласні центри найчастіше згадуються в пункті міста.

При обраному відділенні не вказується його адреса. А раптом користувач помилився? Якщо ви, наприклад, не знаєте номер свого відділення, обрали те, що підходить по вулиці і промахнулися при виборі, не зрозумієте свою помилку і це призведе до того, що ви не отримаєте замовлення.

 

Висновки

Кількість помилок в юзабіліті на новому сайті OLX критично велика. І в даній статті ми вам показали помилки тільки на Desktop версії сайту. Помилок на мобільній версії сайту не менше, але ми не стали вас ними перевантажувати.

Частина помилок, описаних в статті, можуть ніяк не вплинути на конверсію. Частина з них можливо і не актуальні, так як я не бачив досліджень аудиторії порталу OLX, не бачив брифа і статистики поведінки користувачів на порталі. У виявленні помилок я спираюся на свій досвід фахівця з юзабіліті і на досвід користування порталом, тому десь можу помилятися.

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

• Usability