Різні типи навігації веб-сайтами - знайте, що працює
Ніклас Хаунер/серпень 2017 р
Щодня ми відвідуємо безліч веб-сайтів, які шукають інформацію. Іноді пошук вдалий, іноді ні. Одна з причин, чому це може бути? Неправильна навігація. Користувач просто не може зорієнтуватися на веб-сайті. Щоб покласти край цій примарі, ми представляємо кілька найпопулярніших варіантів меню та даємо рекомендації щодо їх використання.
Меню гамбургера
Те, що спочатку звучить як меню в McDonalds, насправді є широко поширеним і часто використовуваним видом управління меню на веб-сайтах. Це народилося з необхідності, коли сторінки раптом мали відображати весь свій вміст на наших маленьких iPhone 4s або Google G1. Назва меню з гамбургерами походить від трьох паралельних ліній, які, як передбачається, нагадують спрощений бутерброд із м'ясною начинкою.
Щоб зберегти користувача одним клацанням миші, згідно з нашою рекомендацією, ви також повинні мати можливість навігації по сторінці в будь-який час за допомогою внутрішніх посилань у вмісті або окремого меню. Також використовується на нашому власному веб-сайті.
Інтерактивна навігація
Інтерактивна навігація - це дуже відкрите поле, яке також трохи важко пояснити. В принципі, можна сказати, що типового зв’язку від А до В не існує. Швидше за все, навігація веб-сайтом є частиною досвіду. Інтерактивні елементи грайливо переносять користувача на наступний розділ або підсторінку. Найкраще дивитись безпосередньо на приклад - тоді це буде зрозуміліше.
Статична бічна панель
Цей тип навігації в основному використовується як доповнення до повного меню. До бажаної сторінки можна потрапити через головне меню, на якому користувачеві під час прокрутки відображається статичний рядок як навігаційний посібник. Ця форма меню підходить, наприклад B. особливо добре для довгих односторінкових користувачів *, оскільки фіксоване розташування панелі дозволяє користувачеві швидше орієнтуватися на самій сторінці.
Заголовок * навігація
Навігація по верхньому колонтитулу * (аналогічно цій є також навігація по нижньому колонтитулу) - це практично маленька чорна сукня серед меню - класична і разом з тим елегантна. Найвідоміший представник цього варіанта меню, який був роками: веб-сайт Apple. Перевага: користувач має всі пункти меню, які одразу видно з одного погляду. В Apple також дуже ясно, як поводиться таке меню у своїй мобільній версії: воно легко переходить у меню бургера. Тут також є різні модифікації, при яких, наприклад, меню фіксується у верхній частині екрана під час прокрутки або - і це остання тенденція - при менших розмірах дисплея збираються невідповідні пункти меню за випадаючим меню *, що ми і робимо переходить до наступного варіанту меню.
Випадаючі меню * (або мега-меню)
З точки зору зручності використання, так зване випадаюче меню * або ще більш вкладений старший брат, мега-меню, не позбавлені суперечок. Тут подальші посилання ховаються за пунктом меню, який розгортається завдяки певній взаємодії користувача - будь то наведення миші * або клацання. Для вкладеності немає обмежень, але вам слід обійтися без більш ніж двох рівнів. Перш ніж відображати дерево сторінок * нефільтрованим у такому меню, слід подумати, чи можлива інша розбивка вмісту, щоб перейти на більш зручний варіант меню.
Суть
Який тип меню підходить для вашого власного веб-сайту, залежить від багатьох факторів - будь то вміст, досвід, зручність користування *, кінцевий пристрій тощо, - але врешті-решт ніколи не існує загальноосвітнього рішення. Навпаки, все частіше використовуються змішані форми, наприклад, у Tesla, яка представляє свої нові автомобілі на видному місці в навігаційному колонтитулі * та приховує всі інші елементи за меню гамбургерів. Ми сподіваємось, наш невеликий екскурс у світ меню показав можливості, і що управління меню веб-сайту - це сама по собі маленька наука, яку ми із радістю підтримаємо.
Юзабіліті = Юзабіліті або простота використання
Бічне дерево = всі сторінки веб-сайту розповсюджені
Одно пейджер/одно пейджер = вся інформація розміщена на одній сторінці
Заголовок = верхня частина веб-сайту, напр. Б. містить логотип
Випадаюче меню = меню, яке можна розгорнути за допомогою взаємодії з користувачем
Наведення миші = переміщення вказівника миші над елементом веб-сайту