UX Дизайн інтернет магазинів. Юзабіліті в 2020 році.

UX Аудит.

UX Консультація.

Потреба у впровадженні конкурентних UX рішень, як і рейтинги електронної комерції стрімко ростуть. 

Люди стають все більш і більш впевненими в покупці речей онлайн. 

У звіті BigCommerce про купівельні звички покупців в 2016-2017 рр. Представлена дійсно цікава статистика про онлайн-покупках:

• 51% американців вважають за краще робити покупки онлайн
• 96% американців, що мають доступ до Інтернету, зробили онлайн-покупки в своєму житті, 80% - тільки за останній місяць
• Електронна комерція росте на 23% в порівнянні з минулим роком, проте 46% американських малих підприємств не мають веб-сайту
• Онлайн-замовлення виросли на 8,9% в третьому кварталі 2016 року, але середня вартість замовлень (AOV) збільшилася тільки на 0,2% - це вказує на те, що зростання транзакцій випереджає загальний дохід.

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

За останні пару років ми бачимо очевидний і логічний зростання інтересу з боку великих і малих підприємств до створення своєї присутності в Інтернеті через веб-сайти і / або мобільні додатки. 

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

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

1. Зробіть бренд Інтернет Магазину видимим.

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

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

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

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

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

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

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

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

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

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

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

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

Попередні завантажувачі і індикатори pull-to-refresh. Це елементи, які показують хід поточного процесу завантаження в додатку або на веб-сайті. Елегантне застосування в них фірмового стилю може внести великий внесок у узгодженість як призначеного для користувача інтерфейсу, так і індивідуального дизайну.

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

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

Талісман стає елементом ідентичності і сполучною ланкою між користувачем і продуктом. 

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

2. Встановіть ясну і просту навігацію в якості основного завдання.

В UX-дизайні для інтернет магазину (ІМ) чим би не був дивний веб-сайт або додаток. Який би стильний і модний дизайн і захоплюючі зображення він не демонстрував.

Успіх Інтернет Магазину буде вимірюватися не кількістю «вау». 

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

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

• з якою компанією або брендом вони мають справу
• на якій сторінці вони знаходяться
• де меню
• як вони можуть повернутися на домашню сторінку або в каталог
• де пошук і фільтри
• скільки часу займе процес завантаження сторінки
• як вони можуть бачити детальну інформацію про елемент
• як вони можуть вибирати між варіантом для одного і того ж елемента (колір, розмір і т. д.)
• як вони можуть оплатити товар
• як вони можуть зберегти речі, до яких вони хотіли б повернутися пізніше
• як вони можуть зв'язатися з продавцем
• як вони можуть бачити рейтинг та відгуки попередніх покупців і т. д.

3. Перевірте сканується або екрану.

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

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

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

Заклики до дії (CTA) повинні бути миттєво видно. У перші секунди на сторінці або екрані. 

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

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

Це збільшує ризик поганий конверсії і загального користувацького досвіду.

4. Мінімізуйте зусилля користувача, коли це можливо.

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

Ось деякі методи UX проектування, які можуть зробити інтерфейс економним:

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

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

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

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

Але коли ви натискаєте кнопку «Купити», ви потрапляєте на величезну форму, яку ви повинні заповнити, щоб зареєструватися на цьому сайті. 

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

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

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

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

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

Переконайтеся, що сприйняття макета є природним і гармонійним для людського ока. Є безліч речей, які впливають на прийняття рішень. Гармонія є одним з них. 

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

5. Не заходьте занадто далеко, експериментуючи.

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

UX Дизайн - це не просто творчість, що прагне показати всю міць оригінальних рішень. Перш за все, це спосіб вирішити проблему і зробити користувачів щасливіше.

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

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

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

Чи дійсно мені потрібно купувати цю річ, може подумати користувач, якщо її так складно отримати? 

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

6. Використовуйте цільові сторінки для певних цілей.

Для бізнес-цілей і норми прибутку ця рада може принести важливі зміни. 

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

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

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

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

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

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

7. Зробіть домашню сторінку інформативною.

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

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

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

Загалом, домашня сторінка може містити наступні дані:

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

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

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

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

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

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

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

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

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

Талісмани: Зображення, як правило, персоніфіковані, що представляють бренд, товар або послугу.

Елементи візуальної ідентифікації:  різні візуальні ознаки брендингу, такі як логотипи, індивідуальні написи для назви бренду і / або слогана і т. Д.

9. Подумайте про рекламні відео різних видів.

Існує декілька поширених типів рекламних відеороликів:

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

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

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

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

У цих умовах відео може стати динамічним, інформативним і привабливим способом спілкування. 

Проте, технічна сторона повинна бути перевірена, щоб відео було правильно інтегровано і не перевантажували сторінку.

10. Дозвольте користувачеві зв'язатися з вами з будь-якої точки взаємодії з магазином.

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

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

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

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

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

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

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

11. Додайте Гейміфікація.

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

Може бути матеріальним (гроші, призи, дипломи, сертифікати, кубки, медалі та т. Д.) І нематеріальним (похвала, підтримка, визнання і т. Д.). 

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

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

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

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

Замовте експертну UX консультацию або UX аудит. Сьогодні збільшити конверсію інтернет магазину або зробити план робіт постійного зростання ефективності, ROI, KPI.

Часті питання. FAQ.

✔️ Що таке UX дизайн інтернет магазину?

Ux дизайн або Юзабіліті дизайн - це оптимізований дизайн сторінок сайту для збільшення прибутку або конверсій.

✔️ Як створюється UX дизайн?

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

✔️ Чи варто використовувати анімацію на сторінках?

Використовуйте анімацію в привітанні користувача.

✔️ Яку якість картинок варто використовувати?

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

✔️ Чи можна займатися UX-дизайном віддалено?

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

✔️ Анімація уповільнює роботу сайту?

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

✔️ Яку мову використовують UX-дизайнери?

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