Проектиране на печеливша навигационна меню Идеи и вдъхновения
Навигационното меню на уебсайт е като пътен знак на улица или директория на ниво в търговски център. Не можете да стигнете до местоназначението си, без първо да знаете къде се намирате. Както и в реалния живот, навигацията в уеб дизайна е много важна и играе важна роля в използваемостта на уебсайта, както и в потребителския опит.
Днес можете да видите много различни видове навигационни менюта с интересни, креативни и необичайни дизайни. Но какво ще кажете за ефективна навигация в уебсайт, как би изглеждал; как трябва да изглежда?
Днес бих искал да споделя моите наблюдения и познания за важността на навигацията в уеб дизайна. Ще ви разкрия няколко прости съвета, които можете да използвате, за да подобрите навигацията и използваемостта на уебсайта си. Ще има и някои примери за ефективни навигационни менюта, които да ви дадат някаква представа как да планирате следващия си дизайн.
Информационна архитектура
Планирането на навигацията трябва да започне с информационната архитектура. От жизненоважно значение е да седнете и мозъчна атака за информационната архитектура на уебсайт. Трябва да разберете какви функции предлага уебсайтът, какво е най-важното и какво може да се постави на по-ниски нива в йерархията на информацията..
Информационната архитектура включва функции, нужди на потребителите, карта на сайта, тестване и тел. рамки. Можете да прочетете повече за информационната архитектура в статия на Камерън Чапман в информационната архитектура 101: Техники и най-добри практики.
Използване на технологии, разрешени от потребителя
Избягвайте да използвате Flash, JavaScript, jQuery или каквото и да е друго, което може да попречи на достъпа до навигацията на уебсайта ви при изграждането на навигационната ви лента, или поне да се уверите, че те могат да се влошат грациозно.
За повече справки изящна деградация на javascript, Вижте този пост на 10 полезни резервни методи за CSS и Javascript.
Използвайте прости, удобни за потребителя термини
По-добре е да се използва прости, очевидни и термини, които лесно се разбират отколкото да се придържате само към условията на индустрията за навигационното ви меню. Всяка връзка, която отнема потребителите повече от секунда или две, за да разбере, вероятно е неподходяща за използване.
Ако потребителят трябва да кликне върху връзка, за да разбере какво води до връзката, това ще допринесе за лошия потребителски опит за посетителите ви.
Примери
Условията в навигационното меню на сайта на Лариса Нес са лесни за разбиране и са достатъчно общи. Потребителите няма да го намират за объркващо, защото вече имат опит с подобни менюта.
Ето още един добър пример за чисто и ясно меню за навигация в уеб сайта с общи термини, използвани в csupport.
Креативна агенция Eighty8Four използва термина "шоурум", който може да бъде объркващ за посетителите. Този термин може да означава портфолио или работа, но не е ясно и посетителите нямат друг избор, освен да кликнат, за да го проверят.
Стандартизирайте навигационния дизайн
Използвайте същия навигационен модел във всички страници. Това е много важно, защото без последователен дизайн, потребителят може действително да мисли, че е в друг уебсайт. Уверете се, че използвате един и същ навигационен модел, така че потребителите да могат лесно да използват уебсайта Ви, без да бъдат загубени.
Bluegg, показани по-долу, използва прост и чист навигационен дизайн, който остава същият във всички подстраници. Единствената разлика е цветният индикатор, който показва страницата, на която посетителят е в момента.
Посочете къде се намирате
От решаващо значение е потребителят да знае къде се намира той по всяко време. Можете да направите това чрез промяна на фона на връзката, цвят на името на страницата или включете текста в получер шрифт в навигационното меню, за да се различава от другите.
Остин Истчидърс използва различен цвят и фон, за да посочи страницата, на която е включен потребителят. Този индикатор може да работи и като фина промяна на дизайна, например чрез използване на a различен фон за навигация което създава усещането, че други елементи от менюто са в дълбочина.
Медицинска хирургия използва по-тъмен цвят като индикатор за отворена подстраница. Прост, но ефективен.
Използвайте уеб конвенции
Всичко това е свързано с лесната за използване и интуитивна навигация в уебсайта. Уеб конвенциите правят много по-лесно за дизайнерите да заобикалят техните проекти. Повечето потребители щракват върху логото на сайта, за да се върнат към началната страница, така че проектирайте логото си, за да го направите.
Ако не, караш ги да прекарват време, за да научат нещо ново или в някои случаи ги неудобства, като не предоставят това, което те очакват да бъдат общоприети навигационни норми.
Можете да научите повече за уеб конвенциите тук:
- 10 Конвенции за уеб дизайн
- Не преоткривайте колелото на уеб дизайна
- Дизайн с уеб конвенции
Дизайн на инжектиране поставя логото в горния ляв ъгъл, което отговаря на един от най-използваните уеб конвенции днес.
Създаване на Адамс използва една от най-често срещаните уеб конвенции - логото се поставя в горния ляв ъгъл на уебсайта и се препраща към началната страница.
Тествайте: Включете трета страна
Винаги проверявайте навигационния си дизайн с всяко лице, което е използвало интернет преди това. Може би искате да въведете хора, които не са свързани с процеса на проектиране, за да го тестват. Спазвайте техните предпочитания, когато се движите чрез вашия сайт и анализирайте времето, което им е отнело, за да намерят страниците, за които са търсили.
За по-добра точност, привличане на повече хора, събиране на данни, анализ и обобщаване за по-добро прилягане. Направете след изследване, ако е необходимо. Можете да получите някои неочаквани идеи и входящи данни, които иначе биха били незабелязани без този тест.
Осигурете контекст
За да бъдете съвместими със съдържанието и навигацията, потребителите на уебсайтове ще могат да намерят неща, от които се нуждаят бързо. Можете да поставите малки икони, свързани със съдържанието, към което се свързвате, или кратки описания, за да дадете общ преглед на това, за какво се отнася страницата.
Моят собствен велосипед използва прости икони, за да даде на потребителите повече информация за това, което те могат да намерят в определена подстраница.
Сара Парментър използва кратки и приятни надписи при основната навигация, за да предостави информация за подстраниците, към които се свързва основната навигация.
SEO цели
Google обича последователната навигация. Добре е да имате последователна навигация не само за потребителите, за да разберат и да получат представа как да навигирате в уебсайта си, но и за търсачките, за да индексират уебсайта ви..
Роботите за търсачки ще пълзят през уебсайта ви, за да индексират уебсайта ви и да поставят връзките в страницата с резултати от търсенето. Ако искате да сте видими, обърнете внимание на добрия дизайн на навигацията и повече трафик.
Безплатни скриптове за навигация (CSS и jQuery)
Ето кратък списък с най-новите менюта за навигация, които може да намерите за вашите проекти. Тези скриптове ще направят потребителския опит на вашия продукт още по-добър, като добавят някои хубави функции и го правят удоволствие да се използва.
Скрипт за вертикални скролери на версията на XML с помощта на HTML и jQuery: vScroller
Filtrify
Скролер на страницата
Портфолио по времева линия
HorizontalNav
CSS3 Минималистично меню за навигация
Ефект на кръговата навигация с CSS3
Ефекти на навигационната мрежа с jQuery
Ascensor
Създайте елегантно CSS3 навигационно меню
Витрина с красива хоризонтална навигация
И не на последно място някои вдъхновяващи хоризонтални менюта за навигация. Проверете тези невероятни уебсайтове и техните решения за навигационното меню, за да намерите нови идеи за вашите проекти.
Ch3mical
Блум Търси Маркетинг Инк.
Алекс Перес
Либор Зезулка
Hauska!
Златни острови
Нийл Карпентър
Марк Томас
3D полистирен
Liechtenecker
Светът на приключенията
Снимка на Arbutus
OMDRL
4 бирена бира
Ловни вина
Надяваме се, че тази статия е полезна и информативна. Ако имате някакви мисли или ако не сте съгласни, моля споделете вашето мнение в раздела за коментари.
