Ви втрачаєте клієнтів щодня! 5 помилок в UX/UI дизайні, які вбивають ваш сайт

Автор статті

Дарія, дизайнер VAU agency

Можна багато говорити про композицію, естетику, ієрархію заголовків, кольори та кількість розміщенного тексту, але слід пам’ятати, що UI (User Interface) не працює без UX (User Experience). Найбільша та дуже комплексна порада: Не ускладнюйте користування сайтом у користувачів й відповідно їхнє прийняття рішень!

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

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

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

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

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

Те, яким буде ваш дизайн хедера та футера - вирішуєте вже ви самі. Наприклад, аби зберегти мінімалістичний дизайн сайту, хедер прихований у вигляді burger menu справа, як на цьому прикладі:

Помилка 1. Ігнорування хедеру та футеру у дизайні

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

А ось приклад футеру для ресторану, де ми коротко надаємо усю необхідну інформацію: адресу, окремо години роботи як для меню, так і для ресторану, а також пропонуємо цільову дію (бронювання столику або перегляд меню для замовлення додому):

Хедер та футер - це окрема маленька історія, вважайте коротка вижимка усього контенту вашого сайту, а тому раджу не лише не ігнорувати ці елементи, а навпаки: витратити більше часу на їх дизайн та аналіз зручності для користувачів. Рекомендую сайт https://www.footer.design/ , де ви можете ознайомитись із мистецтвом створення футерів та надихнутись варіантами.

Часто це стосується проблеми зайвих кліків та некорректного UX-копірайту.

Якщо на вашому сайті кілька сторінок: додавайте хлібні крихти! Так набагато зручніше орієнтуватись по сторінкам. А замість нескінченного скролу по галереї чи каталогу, краще додавайте пагінацію (цифри в кінці галереї для переходу між сторінками галереї/каталогу). Бувають ситуації, коли сторінка може ненароком перезавантажитись, а тому, щоб не змушувати аудиторію наново скроллити до самого низу, можна полегшити доступ до необхідної 5-ї чи 120-ї сторінки.

Розглянемо два приклади пагінацій:

Помилка 2. Ви змушуєте користувачів докладати зусиль у користуванні вашим сайтом

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

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

Що стосовно некорректного UX-копірайту: уникайте двозначностей. Іноді краще прописати словами конкретні речі, аніж скорочувати та змушувати користувачів здогадуватись про свої помилки, витрачаючи свій час.

До прикладу пропонуємо розглянути два вікна реєстрації:

У варіанті зліва для користувача може бути незрозумілим, що саме він ввів некорректно: логін чи пароль, а варіантів перебирати і той, і інший варіант може зайняти купу часу. На другому варіанті ми точно вказуємо на його помилку у введенні паролю, а тому йому залишається лише згадувати пароль, або ж поміняти його, як ми це йому пропонуємо. До того ж, не забувайте у таких випадках додавати іконку, яка б показувала пароль для користувача, аби виявити проблему входу йому було легше ;) З цього випливає ще одна проблема.

Іконки - це графічне відображення елементів або пунктів на сайті, які спрощують сприйняття інформації. Їх можна використовувати замість словесного пояснення або поряд з нею. Дуже важливо, аби іконки були зрозумілими для користувача: можна використовувати уніфіковані зображення (гайдлайн Material Design або IOS вам у допомогу), або ж знайти унікальні.

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

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

Проблема 3. Відсутність іконок або некоректне їх відображення.

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

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

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

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

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

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

Пам’ятайте, що ваш веб-сайт - це напряма комунікація між вами та користувачем. Користування сайтом повинно завжди супроводжуватись зворотньою взаємодією. Наведення на кнопку (hover) - кнопка повинна видозмінюватись. Кнопка не працює - перефарбуємо її у відповідний стан (disabled). Клік по формі повинен демонструватись і його видозміненням. Всі ці стани, про які йдеться мова, прописуються у детальному UI-kit або хоча б демонструються прямо на макеті.

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

Не забувайте додавати прелоадер (особливо якщо ваш сайт не може похизуватись високою оптимізацією), thank you page (особливо, якщо ваш сайт містить зворотню форму), сторінку 404 (особливо, якщо сторінки на вашому сайті часто змінюються).

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

До того ж, реакцію на взаємодію можна зробити цікавою та індивідуальною для вашого сайту, а це плюсик до загального враження. Ось, наприклад, наші варіанти оформлення thank you page:

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

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

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