Как улучшить UX интернет-магазина: интервью с Цитрус

10.06.2019
Нужно ли мне, как владельцу интернет-магазина, разбираться в юзабилити? Как увеличить конверсию карточки товара? Как работают с UX большие бренды? Эти вопросы мы задали Виталию Витюку, Head of UX & UI & Technology Department интернет-магазина Цитрус. Получился большой лонгрид о значении юзабилити для e-commerce-проекта. Поехали :) Цитрус интервью Hubber
  Віталій, доброго дня! В мене, як у власника інтернет-магазину, звичайно є бажання, щоб мій сайт був висококонверсійним. Як мені підійти до цього питання? Як зрозуміти - що на моєму сайті потрібно переробити? Вітання! Якщо ми говоримо про сайт, на якому вже встановлені Google Analytics, налаштований розширений ecommerce, Google Tag Manager і Google Optimize, то розібратись із низьким рівнем конверсії можливо досить швидко. Також це дозволить провести необхідний комплекс заходів по оптимізації. Такий набір дій прийнято називати CRO (conversion rate optimization). В деяких компаніях наймають окремих спеціалістів з CRO, а деякі користуються послугами підрядників. Обидва підходи ефективні, тому виокремити якийсь із них я не можу. Єдине, що хочу зазначити, що даний вид аналізу є новим, відтак, спостерігається брак спеціалістів цього напрямку. Попит на послуги CRO великий, проте, пропозиція досить обмежена. Отже, в першу чергу необхідно провести аналіз трафіку на сайт і його рівень конверсії. Розкласти трафік на окремі канали і провести аналіз рівня конверсії поканально. Далі, варто провести аналіз конверсії по типам сторінок. Проаналізувати поведінкові фактори, розкласти і прописати основні “шляхи покупця” по вашому сайту. Це все дасть розуміння того, який у сайта поточний перфоменс і дозволить виявити проблемні місця.   трафик Цитруса   Існує безліч порад, які покликані підвищити рівень конверсії на сайт, але я виокремлюю 3 з них: Швидкість завантаження сторінок сайту. Існує матеріал від Google, в якому йдеться про те, що швидкість завантаження сторінок напряму впливає на конверсію. Наприклад, за даними Mobify, зниження завантаження сторінки на 100 мс здатне підвищити конверсію на 1,11%. В іншому дослідженні виявили, що більше 40% потенційних покупців покидають сайт, якщо швидкість завантаження більша 3 с. 52% онлайн покупців зазначають, що висока швидкість завантаження сторінок підвищує лояльність до сайту в цілому. Особливо це стосується мобільних користувачів.  Унікальний, правдивий і вичерпний контент. Не секрет, що контент - король конверсії. Багато сайтів нехтують цим аспектом, проте це саме те, що дає значний приріст у всіх показниках. Якщо говорити про картку товару, то там має міститися повна інформація про продукт, детальний і приємний для читання опис, детальний перелік характеристик (специфікацій), достатня к-ть фотографій продукту, відеоогляд, рейтинг і відгуки про товар.     Контент має бути правдивим і максимально достовірним. Клієнти готові пробачати дрібні неточності в характеристиках чи описах товарів, проте, якщо це трапляється надто часто, то клієнти підуть від вас назавжди. Багата на контент сторінка приваблює клієнтів, спонукає приходити до вас повторно, підвищує загальний позитивний досвід від сайту і, звісно, підвищує конверсію. Згадайте, який сайт ви відвідуєте першим, щоб дізнатися характеристики чи опис якоїсь техніки. Згадавши, ви зрозумієте, що саме на цьому сайті контенту більше, ніж у конкурентів. Зручний, зрозумілий і привабливий інтерфейс. Замикає трійку важливих аспектів саме інтерфейс. Хоча для eсommerce-проекту зручність сайту, чи то “юзабіліті”, завжди залишатиметься найважливішою, проте без перших 2-х аспектів зручність позбавлена сенсу. В поняття зручності використання, я вкладаю десятки дрібних та великих аспектів. Наприклад:    
  1. Кількість кліків до цілі - чим їх менше, тим краще.
  2. Доступність і читабильність текстів - ви маєте розуміти, що ваш сайт можуть відвідувати люди із обмеженим зором, люди із проблемами сприйняття графіки, чи люди, які сильно поспішають.
  3. Зрозуміла і чітка навігація - на сайті важливо розробити просту, чітку і водночас зрозумілу навігацію. Максимум 3 рівні, більше “вказівників” - де саме людина знаходиться, менше елементів, які відволікають.
  4. Не більше 1-2 цільових дій на сторінці - якщо це картка продукту, то важливо, щоб там була одна головна кнопка “Купити”, а решта отримали другорядний статус.
  5. Мінімалістичний і “повітряний” дизайн - не захаращуйте сторінку безліччю елементів. Дайте користувачу простір, щоб оговтатись, освоїтись і робити приємний шоппінг. Згадайте свої відчуття, коли ви заходите у просторий магазин, де полиці містять мінімум товарів і всі вони на великій відстані один від одного. Ви відчуваєте свободу і легкість.

Які основні принципи юзабіліті? Є якісь загальні рекомендації для інтернет-магазинів? Так існує кілька базових принципів, яких варто дотримуватись інтернет-магазинам. Сайти не зобов’язані дотримуватись їх усіх, проте, ті, хто ними керує, мають освоїти ці правила, перш ніж їх порушувати. Отже, ось перелік цих принципів:  
  • Доступність і осяжність - я говорив про це раніше. Ваш інтерфейс має бути доступним для всіх відвідувачів. Читабельний текст, великі кнопки, констрасна кольорова гама - все це має бути реалізовано на базовому рівні, тобто не піддаватися перегляду. Доступність має бути забезпечена.
 
  • Контрольованість - користувачі мають самостійно контролювати інтерфейс і орієнтуватися у тому, що відбувається. Якщо інтерфейс чи сервіс робить за користувача якісь дії, ці дії мають бути підтверджені користувачем (акцептовані), або користувач має бути попередженими про те, що зараз щось відбудеться в автоматичному режимі.
 
  • Консистентність (Самодостатність) - ваш інтерфейс має бути цільним і відображати єдинство стилю, відображати єдину архітектуру. Іншими словами, на вашому сайті не має бути “намішано” усього із усіх можливих джерел.
 
  • Сталість і традиційність. Цей принцип актуальний зараз, в період розвитку Web 3.0. Молоді проектувальники інтерфейсів дуже часто підмінюють базові елементи, наділяють їх іншим діям і функціям. Класичний веб-інвентар перестає діяти як раніше. Ми можемо зустріти ресурси, де “Кнопка” виконує роль “гіперпосилання”, в той час як, “гіперпосилання” наділене повноваженнями “кнопки”. Все це порушує усталені звички користувачів і підриває довіру до інтерфейсу, спричиняє когнітивні помилки і зрештою знижує рівень позитивного досвіду.
  Вітюк Цитрус  
  • Трастовість і чесність. Ваш сайт має викликати довіру. Все що бачить користувач, не може піддаватися сумнівам. Якщо ви хоча б 1 раз введете користувача в оману, він до вас більше не повернеться і таких користувачів ставатиме більше і більше. Давайте те, що очікує користувач: якщо він хоче відвідати розділ з кавоварками, покажіть йому кавоварки, а не кавомашини і в кінці списку кавоварки. Якщо користувач користується пошуком, тоді пропонуйте йому найрелевантніші результати, а не перші-ліпші результати по словоформі пошукового запиту.
 
  • Зворотній зв’язок. Ваш інтерфейс має спілкуватись із користувачем. Бути дружелюбним і люб’язним. У всіх сповіщеннях чи нотифікаціях та навіть текстах звертайтесь до користувача його мовою, додайте до неї “людяності”, максимально оживіть інтерфейс мовою. Замість виразу “ви не можете здійснити цю операцію” напишіть “Здається у вас немає прав на видалення цих замовлень. Але це легко виправити, якщо звернетесь до служби підтримки”.  Крім того, забезпечте зворотнім зв’язком всі дії користувача. Буквально на кожен клік чи тап дайте знати, що все ок, і операція виконується. Якщо щось сталося не так - чесно сповістіть про це.
 
  • Автоматизація і мінімізація повторів. Старайтеся мінімізувати рутинну роботу користувача. Шукайте шляхи, як один і той самий флоу пройти з меншою кількістю кроків. Якщо є крок, який можна легко пропустити без значних втрат - дайте таку можливість користувачу. Якщо інтерфейс передбачає заповнення користувацьких даних, то зробіть можливість “підтягнути” ці дані з профілю або із даних, які були введені попереднього разу. Якщо користувач частіше шукає телевізори якогось конкретного дюймажу, то в каталозі в першу чергу показуйте товари з цією діагоналлю.
 
  • Дотримання звичок та інтуїтивність. Користувачі дуже часто повторюють вираз “Мені зручно, я так звик”. Але тут потрібно бути обережним - люди звикають і пристосовуються до поганого інтерфейсу, і з рештою доводять свою майстерність володіння ним до ідеалу. Це не наш підхід. Головний принцип - забезпечувати присутність елементів зручного інтерфейсу, до яких користувач вже звик. Наприклад, користувачі вже звикли до того, що телефон і вибір мови знаходяться у “шапці” сайту, здебільшого у верхньому лівому куті. Користувачі звикли, що процес оформлення покупки здебільшого займає 2-4 кроки, і вони є короткими. Користувачі звикли, що якщо вони видалять товар із кошика, то їх запитають “Чи впевені ви?”. Відтак можна передумати видаляти і таки купити бажаний товар.
Це лише частина принципів зручного інтерфейсу. Але якщо ви хочете дізнатись більше, то рекомендую ознайомитись із книгою “Психлікарня в руках пацієнтів”. Для тих, хто хоче вгледіти коріння - рекомендую книги “Веб-дизайн” Кірсанова і “Не заставляйте мене думати” Стіва Круга.
Яких помилок мені потрібно уникати? Чого робити на сайті інтернет-магазину категорично не треба? Перше, що не варто робити, це вводити в оману. Це стосується контенту, цін, поведінки інтерфейсу. Наприклад, у одного із українських інтернет-магазинів електроніки абсолютно всі товари мають рейтинг 4 або 5. Уявіть, навіть відверті трієчники на тому сайті мають 5! А виявляється, що в інтерфейсі написання відгуку про товар “зашита” хитрість - непомітно для користувача, по замовчуванню, у формі написання відгуку, у полі “рейтинг” вже встановлено значення “5 зірочок”. Не дивно, що всі вігукки про товар на цьому сайті містять оцінку “5”. Другою найпоширенішою помилкою є ідея, що сайт потрібно максимально навантажити маркетинговими елементами - стікерами, лічильниками зворотнього відліку, акціями, відгуками, вспливаючими вікнами, кнопками і т.д. Це абсолютна помилка! Все має бути доцільно і в міру. Групуйте інформаційні блоки, максимально розвантажуйте інтерфейс, дайте користувачу більше простору для роздумів. Ще у цей блок хочу додати найпоширеніший стереотип, про те, що “вільний простір на сторінці потрібно максимально заповнити”! Здебільшого це не є правильно. Вільний простір формує структуру і ієрархію блоків, дозволяє зфокусуватись на важливих елементах і розвантажити погляд користувача. Ще одним поширеним стереотипом є прагнення все розмістити на “перший екран”. “Все” означає буквально все! ) Через це виходять перевантажені сторінки, які важко сприймати, а здійснювати конверсію ще важче.   Цитрус категория товара   Ще категорично не треба реалізовувати сірі методи внутрішньої SEO-оптимізації сторінок. Я маю на увазі додавання специфічного SEO-тексту, маскувати його на сторінках, писати специфічні, зрозумілі лише для пошукового робота тексти опису товару, накручувати відгуки і рейтинг, додавати специфічні зворотні лінки і запускати деякі специфічні скрипти у фоновому режимі без відома користувача. Всі ці дії несуть негативний і деструктивний характер. Найкраще SEO-оптимізація - це орієнтованість на користувача. Дайте йому те, що він хоче і навіть більше!
Віталій, можете розказати на прикладі Цитрусу - як проходить робота по UX і UI у вас (кожного дня)? Щоб я міг на вашому прикладі побудувати роботу у своєму бізнесі. Думаю, що наша робота нічим не відрізняється від подібної роботи в інших організаціях. Хоча, дещо таки відрізняє нас від інших. Ми багато тестуємо, висуваємо гіпотези, перевіряємо їх, спростовуємо чи підтверджуємо. Багато моніторимо і аналізуємо. Шукаємо проблемні місця і зони росту. Обговорюємо, проектуємо, малюємо user-maps i user-flows, зрештою, розробляємо дизайн і віддаємо його у впровадження. Запускаємо, перевіряємо, знову тестуємо, виявляємо помилки, виправляємо і знову запускаємо. Ще одним дуже важливим аспектом роботи в напрямку UX є чітке розмежовування поточних рутинних завдань і роботи над новими. По мірі розвитку компанії, рутинні або ж поточні роботи все більше поглинають всі відділи, відповідно, над новим працювати вже не вистачає енергії та часу. Але ж розвиток можливий лише тоді, коли компанія розробляє і впроваджує інновації. І напрямок UX - не виключення.
Картка товару - це серце інтернет-магазину? Які ви дасте рекомендації по картці? Так, картка товару є чи не найважливішим елементом в структурі сайту. Проте далеко не єдиним. Так, на ній формується конверсія. Вона являється певною відправною точкою, індикатором того, як влаштований UX в інтернет-магазині. Моя перша порада щодо картки - не надто фокусуйтесь на ній. Надмірна увага до картки товару може спричинити надміру елементів, які потенційно можуть знижувати конверсію і спричиняти зворотній ефект. Ідея усього UX - максимально легкий та зручний спосіб досягти потрібного результату. Багато власників сайтів вважають, що впроваджуючи якісь фічі на сторінці, вони мов магніт будуть приваблюбвати користувачів, а ті охоче клікатимуть на “Купити”. Насправді це не так. Погляньте на Amazon - мільярдна компанія, яка досі у дизайні залишається “з 2000-них”. Вони не збираються змінювати UI, який приніс їм успіх, проте вони не сильно експерементуються із UX. На їх думку, той рівень зручності користування являється максимально оптимальним. Але це не означає, що всім потрібно бути старомодними як Amazon. І я думаю, що десь через 2-3 роки й Amazon почне змінюватись.   Цитрус карточка товара   Ключове у Amazon те, що позитивний користувацький досвід потрібно зберігати і масштабувати. Кардинальні зміни у дизайні і способах взаємодії користувачів з інтерфейсом можуть відлякати і викликати нерозуміння, як “діяти далі”. Тому важливо вивчити вподобання і звички покупців ваших і конкурентів, і корегувати свою роботу з огляду на це. Наступна порада, як я говорив раніше, дайте користувачу максимум корисної, релевантної і чесної інформації. Не переповнюйте картку товара маркетинговими елементами. Але від них відмовлятися не варто. На картці завжди має бути акцент на одному фокусному промо, завжди видимий і акцентований спосіб придбання. Не зайвим буде представити альтернативні і рекомендовані товари схожі на поточний.
Мені, як власнику інтернет-магазину, потрібно розбиратися в юзабіліті? Чи краще віддати цю роботу спеціалістам? Що думаєте? Я не можу радити власникам інтернет-магазину, у чому їм варто розбиратись, адже я ніколи ним не був і було б несправедливо це робити. Знаю, лише, що наймання спеціалістів із юзабіліті - поширена практика. Спеціалісти з юзабіліті орієнтовані на щоденну роботу по пошуку кращого, зручнішого, ефективнішого способу представлення інтерфейсу користувачу. Власнику інтернет-магазину безперечно потрібно розумітися на юзабіліті й перевіряти час від часу свій ресурс “на зручність”. Наприклад, час від часу користуватись сайтом, шукати товар, замовляти його, оформляти повернення і т.д. Отриманий досвід обов’язково потрібно передавати колегам на аналіз із подальшою розробкою рішень.
Можете дати, будь-ласка, кілька мотивуючих кейсів з Цитрусу, як вдалося збільшити конверсію :)  Цікавим був кейс про вибір відділення “Нової пошти” на сторінці оформлення замовлення. Раніше на цьому кроці користувачу пропонувався випадний список з переліком всіх відділень у місті. Проте, якщо користувач новий у місті, або тільки переїхав у новий район, то швидко зорієнтуватися, який саме номер відділення знаходиться поряд з домом, дуже важко. Необхідно було заходити на сайт “Нової пошти” і там все з’ясовувати. На цьому етапі у нас втрачалось багато користувачів, які більше не повертались із різних причин. Тому ми запропонували користувачу обрати потрібне відділення прямо на карті. Достатньо просто відкрити вікно вибору відділення, посунути карту на місце, де ви орієнтовано мешкаєте, і обрати найближче відділення.   Цитрус Новая почта Після впровадження такого рішення, к-ть успішно формлених замовлень із доставкою до відділення значно зросла.