Навігація утиліти Як вона впливає на дизайн користувацького досвіду

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

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

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

Як впливає навігаційна служба UX

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

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

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

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

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

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

Є 3 пункти навігації утиліти, які відвідувачі можуть захотіти використовувати для всієї мережі. Вони шикарно включені в фіксовану верхню панель (інструмент пошуку, “Увійти”, і “Підписатися”), але користувачі не повинні думати про варіанти, пов'язані з окремими повідомленнями, наприклад “Список читання” під час перегляду домашньої сторінки або однієї зі сторінок категорій.

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

Якщо ви подивитеся на скріншот нижче, ви побачите, що The New York Times інформує користувачів про наявність 3 різних видань: Американський, Міжнародний, і Китайська, а також дозволяє їм швидко перемикайтеся між трьома. Цей чудовий приклад інтелектуальної навігаційної утиліти показує користувачам менш очевидні варіанти, які вони, ймовірно, не знайдуть самостійно, ненав'язливо і елегантно.

Знайти найкраще місце

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

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

Як ви можете бачити нижче, Reuters позиціонує більшість своїх утиліт у цих двох типових областях, у верхньому правому куті сайту, і нижній частині нижнього колонтитула під навігацією на основі вмісту. Єдиним рішенням тут є фіксований додатковий футер з 2 елементами утиліти, які дизайнери вважали найважливішими: “Увійдіть або зареєструйтеся” і “Останні з My Wire”.

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

Створення логічної структури

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

Вони не тільки розміщували навігацію утиліти у верхньому правому куті, де користувачі очікують її знайти, але вони також розділили її на 3 основні групи: (1) панель пошуку, (2) інформація, пов'язана з користувачем (під панеллю пошуку) ), і (3) дії, які користувачі можуть виконувати на сайті.

Це розумно, тому що, завдяки візуальним сигналам, таким як кошик для покупок або значок пошуку, клієнти можуть вирішити в мить ока, яку групу вони хочуть використовувати, і з того часу вони можуть ігнорувати два інших. Є лише одна група (“Ваш рахунок”, “Спробуйте Prime”, “Кошик”, і “Список побажань”), які мають логічно структуровані підменю, а різні групи підменю розділені на дискретні, але видимі роздільники, щоб допомогти користувачам швидко знайти те, що вони хочуть.

Створення ефективного візуального дизайну

Візуальний дизайн ефективної комунікаційної навігації повинен слідувати знаменитому принципу KISS (Keep It Simple, Stupid). Рекомендується надавати іконки текстовими мітками, контролювати елементи керування, а візуально підкреслювати найважливіші дії. Також може бути гарною ідеєю розрізняти комунікаційну і контентну навігацію, використовуючи дещо інший дизайн.

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

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

Це єдине місце, де Etsy використовує піктограму в меню утиліти, а Walmart відображає піктограму поруч з кожним елементом, але не забуває включити необхідні текстові мітки поруч із піктограмами.