Принципи UX дизайну в елементах навігації

36

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

До цих принципів належать:

Інформаційна архітектура (ІА), яка повинна співпадати з уявною моделлю (тобто очікувана користувачами структура контенту і функціоналу).

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

Розумне кількість варіантів навігації.

Можете сміливо брати ці поради собі на озброєння і користуватися ними у UX розробці!

Що таке «навігація» в цифрових продуктах?

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

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

Принцип 1

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

Визначення структури

Перш ніж проектувати навігацію, вкрай важливо визначити ІА. Щоб розбити сторінки за різними категоріями, можна зробити сортування. Можна сортувати групу користувачів – зв’язатися з потрібними користувачами і попросити їх змінити назву групи або використовувати спеціальний дизайн. Є безліч інструментів, з допомогою яких можна створити структуру сайту або програми.

Елементи CTA дійсно виправдовують очікування користувачів?

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

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

Принципи UX дизайну в елементах навігації

«I’m feeling lucky» — приклад неявного призову до дії

Меню розташовано в знайомому місці?

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

Принцип 2

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

Все знаходиться на своїх місцях? Ваша структура зрозуміла і послідовна?

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

До навігації сайту можуть ставитися різні компоненти: логотип і бренд, зміни в навігації, зміни візуального дизайну, контекстуальні індикатори, помічники/покрокові інструкції, хлібні крихти, ДО и, заголовки і навіть назва сторінки!

Принципи UX дизайну в елементах навігації

На сайті The Economist місце розташування визначається з допомогою

Логотипу та бренду

Взаємодії з панеллю навігації

Заголовок сторінки

Заголовок статті

Контекстуальні індикатори

Принцип 3

Розумне кількість варіантів навігації (тобто не більше 5-7 пунктів за раз)

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

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

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

Принципи UX дизайну в елементах навігації

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

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

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

Висновок

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

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

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

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