Помощна навигация Как влияе на дизайна на потребителския опит

За да създадем ефективна и лесна за навигация навигация, не е нужно само да мислим за това групирайте съдържанието в добре структурирани менюта да се даде възможност на потребителите лесно да намират това, което искат, но също и за това как да проектирайте инструментите, от които ще се нуждаят, за да взаимодействат със сайта

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

Проектирането им не е толкова лесно, колкото изглежда на пръв поглед изисква внимание, за да разберете какви елементи се нуждаем, къде да поставим и как да ги покажем да се уверим, че нашите посетители могат бързо да ги намерят и да разберат как работят.

Как въздейства UX на комунални услуги

Когато проектираме навигационна помощ, трябва да решим как искаме нашите потребители да си взаимодействат с нашия сайт. Трябва да им предоставим структура на взаимодействие което отговаря на нашите бизнес цели, води потребителите през пътуването на клиентите, им дава лесни за разбиране опции и им осигурява приятно потребителско изживяване.

Преди всичко, те трябва да могат бързо да изпълняват желаните от тях действия. Ако им позволим да направят това, удовлетвореността на клиентите ще нарасне, а доволните потребители ще прекарват повече време и повече пари в уебсайтовете.

Началната страница на AirBnB следва този UX принцип, а главното му меню съдържа само помощни инструменти. Това не е обичайно решение, но ако погледнем невероятния ръст на AirBnB, това е идеалният избор за тях.

Четирите най-важни елемента на менюто са насочени към 4-те основни персонала, които обикновено посещават сайта на AirBnB: хора, които искат да станат хост (“Стани домакин”), хора, които искат да разрешат проблем, възникнал по време на ползването на услугата (“Помогне”), нови и връщащи се потребители (“Регистрирай се” и “Влизам”). Началната страница на AirBnB, фокусирана върху полезността, съдържа и лента за бързо търсене, която е ключов инструмент на уебсайта за наемане на квартири.

на второ място, Потребителите не се нуждаят от излишни помощни средства, тъй като прекалено многото отблъсква вниманието и намалява фокуса. Какви инструменти са необходими в нашата помощна навигация и какво не зависи от естеството на нашия сайт. Например може да е полезно да включите изглед за печат в блог или новинарски сайт, но същата функция може да бъде ненужно разсейване на форум форум или уебсайт на социални медии..

Вашингтон Пост например показва различна помощна навигация в страниците си за публикации по различен начин от началната страница. По този начин потребителите срещат само полезни инструменти, които са подходящи, и не се тормозят с опции, които въпреки това не биха искали да използват.

Има 3 елемента за навигация, които посетителите могат да искат да използват за целия сайт. Те са интелигентно включени в фиксираната горната лента (инструмент за търсене, “Впиши се”, и “Абонирай се”), но потребителите не трябва да мислят за опции, свързани с отделни публикации като “Списък за четене” когато преглеждат началната страница или една от страниците на категорията.

трето, потребителите трябва бързо да разберат какво могат да направят на нашия сайт. Посетителите не знаят непременно какво искат, така че ние винаги трябва да им предоставяме информация за възможностите, които имат.

Ако погледнете екрана по-долу, можете да видите, че The New York Times информира потребителите за наличието на 3 различни издания: американски, международен, и Китайски, и също така им позволява бързо превключвайте между трите. Този чудесен пример за интелигентна навигационна навигация показва на потребителите по-малко очевидни възможности, които те вероятно няма да намерят сами по себе си, по ненапръскан и елегантен начин..

Намери най-доброто място

Има типични разположения за навигация в помощни програми, където потребителите интуитивно търсят тези инструменти, тъй като това е, което са свикнали с по-голямата част от уебсайтовете. Нарушаването на конвенциите за уеб дизайн се счита за лоша практика на потребителите и особено важи за навигационната програма, която в повечето случаи е повече за използваемостта, отколкото за творчеството.

Тъй като помощната навигация е второстепенна спрямо съдържателната навигация в повечето уебсайтове, тя често се поставя на по-малко видими, но все още видими области. Това обикновено означава (1) горен десен ъгъл на уебсайтовете и (2) долната част на долния колонтитул. е добра идея да следвате тези конвенции, като това са местата, където повечето потребители търсят първо помощни инструменти.

Както можете да видите по-долу, Ройтерс е позиционирал повечето от своите помощни инструменти в тези две типични области, горния десен ъгъл на сайта, и долната част на долния колонтитул под навигацията, базирана на съдържанието. Уникалното решение тук е фиксираният допълнителен колонтитул с 2 помощни елемента, които дизайнерите смятат за най-важни: “Влезте или се регистрирайте” и “Последно от My Wire”.

Интересно е да се отбележи, че допълнителната помощна зона за навигация все още се поставя в един вид колонтитул, където потребителите обикновено търсят подобни инструменти, така че дизайнерите на Reuters бяха творчески по някакъв начин но все още следват конвенциите за уеб дизайн, за да поддържат използваемостта.

Изграждане на логическа структура

Групирането на помощни инструменти в логическа структура е от решаващо значение, ако искаме да изградим сайт с висок процент на реализация. Това може да бъде предизвикателство, дори ако не искаме да предоставяме на потребителите много опции, но Amazon приема сложността на помощната навигация до следващото ниво. Amazon има невероятно сложна навигационна помощна програма с много опции, но ако използваме Amazon редовно достатъчно, не изглежда така. Това е магията на интелигентния дизайн.

Те не само поставиха навигационната помощ в горния десен ъгъл, където потребителите очакват да я намерят, но и я разделили на 3 основни групи: (1) лента за търсене, (2) информация, свързана с потребителя (под лентата за търсене) ), и (3) действия, които потребителите могат да извършват на сайта.

Той е умен, защото, благодарение на визуалните подсказки като количката за пазаруване или иконата за търсене, клиентите могат да решат в миг на око, която група искат да използват, и оттогава те могат да игнорират другите две. Има само една група (“Вашата сметка”, “Опитайте Прайм”, “кошница”, и “Списък с желания”) които имат логически структурирани подменюта, а различните групи от подменюта са разделени по дискретни, но видими разделители, за да помогнат на потребителите бързо да намерят това, което искат.

Създайте ефективен визуален дизайн

Визуалният дизайн на ефективната помощна навигация трябва да следва известния принцип KISS (Keep It Simple, Stupid). Препоръчително е да се предоставят икони с текстови етикети, да се направят контролите като контроли и визуално да се подчертаят най-важните действия. Също така може да е добра идея да се разграничи навигацията, базирана на съдържанието и съдържанието, като се използва малко по-различен дизайн.

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

И двата сайта подчертават най-важните действия на потребителите с различни визуални елементи на дизайна, Walmart използва жълто за бутоните за търсене и за вход, докато Etsy дава дискретна синя граница на бутона за вход и включва икона за сива кошница над менюто на кошницата.

Това е единственото място, където Etsy използва икона в менюто на помощната програма, докато Walmart показва икона до всеки елемент, но все още не забравя да включи необходимите текстови етикети точно до иконите.