5 чудових сайтів, з яких можна викрасти ідеї навігації сайтом
Дизайнерам легко не помітити навігаційні меню.
Є пара стандартних макетів, до яких ми щоразу тягнемося, кажучи собі: «Це те, чого очікують користувачі». І це правда, що дотримуватись того, що працює, має сенс краще, ніж прагнути до новизни заради неї самої, і що ми робимо, ми маємо розробляти з урахуванням очікувань користувачів.
Але коли навігаційні меню в заголовках є основним способом навігації користувачів веб-сайтом, чи не варто нам переглянути ще раз і перевірити, чи можна покращити наше? Зрештою, користувачі не побачать жодного іншого нашого дизайну, якщо навіть не зможуть вийти з головної сторінки.
Я не пропоную просто вкрасти одну з них. Але я пропоную взяти з них урок і спиратися на їхні ідеї, щоб створити меню заголовків, які насправді є кращими за стандартні.
Маючи це на увазі, ось сім найкращих інноваційних меню заголовків, які ви побачите сьогодні в Інтернеті.
1: Райс
Reiss – це швейна компанія, що базується у Великобританії. Їх спадне меню з кількома параметрами знайоме, якщо ви коли-небудь купували одяг онлайн.
Але на відміну від переважної більшості підприємств електронної комерції, Reiss використовує зображення прямо в спадному меню.
Замість того, щоб читати текстовий опис, клацати лише на основі цього, і лише потім мати перед собою зображення продукту, який ви розглядаєте, відвідувач Reiss може просто побачити товари одразу.
Ми знаємо, що на користувачів сильно впливають зображення електронної комерції. Вони є головним фактором продажів. Тож чи не має сенсу представляти їх якомога раніше на шляху до клієнта?
На жаль, вони не перенесли цей інноваційний підхід на свій мобільний сайт, де меню є стандартним текстовим меню з гамбургера у верхньому лівому куті.
Можливо, це тому, що Reiss мало продає на мобільних пристроях, але ми знаємо, що покупці електронної комерції часто починаються з мобільних пристроїв, тож якщо ви думаєте запозичити цю ідею меню, спробуйте знайти спосіб реалізувати її однаково добре на маленькому екрані.
2: мрія
Навігація Ruya личить агентству, яке пишається своїм дизайном. Зображення заголовка домашньої сторінки – це карта подорожі веб-сайтом у вигляді великої графіки; замість того, щоб читати текст, користувачі можуть вибрати місце на карті для відвідування.
Це приємний штрих, оскільки він повторює гру – багато користувачів знайомі з відеоіграми, які містять такі інтерактивні карти, як ця.
Для обережних користувачів, які не хочуть спробувати нове інтерактивне анімаційне меню, у верхній частині є традиційне меню гамбургерів.
Цей макет меню має кілька чудових переваг. Це інтуїтивно зрозуміло не тому, що воно загальне, а тому, що ідея знайома та має сенс. Це вражає: подивившись, ви не забудете назву агентства. Чи є їхнє інтерактивне меню формою контент-маркетингу? Я б так сказав.
Але це також пов’язано з деякими проблемами. Це сповільнює сторінку. Ефект менший, ніж ви очікували, але якщо ваш комп’ютер або підключення до Інтернету принаймні не досить швидкі, ви не отримаєте від цього особливої користі, окрім розчарування. А впровадження цього означає, що для домашньої сторінки потрібно написати значний користувацький код – це дуже багато роботи, щоб вкласти в ідею дизайну, яка, як ви не знаєте, окупиться.
На мобільному телефоні, на жаль, стильне оригінальне меню Ruya зведено до статичного фонового зображення.
Це все ще видно, і це все ще добре виглядає. Але він не працює як меню. З огляду на зображення заголовка, воно виглядає дещо зайнятим, безладним і – ну, у багатьох відношеннях поступається іншим варіантам.
Якщо ваші клієнти зазвичай мають надшвидкісний широкосмуговий зв’язок і ви можете витратити години розробників, а також зусилля на проектування, щоб створити щось подібне, це може бути тим, що випередить вас від конкурентів. Але знову ж таки, враховуючи, що мобільні пристрої зараз фактично є першим екраном, чи не варто переконатися, що більшість ваших відвідувачів справді бачить вашу творчість?
3: Mashable
Меню Giganto популярні серед сайтів, орієнтованих на контент. Причина очевидна: на таких сайтах просто більше сторінок. (Mashable.com має 256 000 сторінок. Справді!) І користувачі, природно, хочуть найновіші речі, упорядковані за категоріями. В епоху, коли і газета, і журнал узурпували свої функції алгоритмічно керованими новинними стрічками, багатими на зображення, рекламу та відео, сайту журналу дійсно потрібно більше, ніж сухий зміст.
Цей крок більш перспективний, ніж може здатися. Коли технічні журнали, як-от Wired, уперше вийшли в Інтернет, вони дотримувалися графіка публікації журналу, змінюючи сайт щотижня, як новий випуск. Коли вони зрозуміли, що користувачі відвідують сайт лише тоді, коли мають новий вміст, вони перейшли на постійну публікацію.
Випуск тоді був графіком видання, побудованим для паперового журналу. В Інтернеті ви можете публікувати поетапно, і зараз це роблять усі. Але для журнальних сайтів меню заголовків не обов’язково імітують сторінки зі змістом справжніх журналів. Меню заголовків, які не обмежені чорнилом і папером, можуть бути динамічними, барвистими, інтригуючими та інформативними – самостійними перевагами, які все одно допоможуть вам знайти те, що ви хочете.
На жаль, як і багато інших у цьому списку, мобільне меню Mashable набагато менш цікаве. Меба-меню, що заповнює екран, на сайті для настільних комп’ютерів стає стопкою плиток на мобільному пристрої:
4: монопо
Monopo йде на крок далі, ніж більшість брендів наважилися б зробити своє меню центральним місцем. Спочатку їхня домашня сторінка має стандартне меню заголовка. Однак натисніть на елемент, і ви перейдете до меню, яке заповнить екран. Є зображення для пунктів меню з анімацією, яка привертає увагу та залучає глядача. Виберіть підкатегорію, і ілюстроване меню стане прокручуваним, дозволяючи переміщатися сторінкою вниз і бачити більше, не натискаючи. Це меню як досвід, як функція, а не неприємна думка.
На мобільному телефоні меню виглядає набагато звичніше. Є класичний гамбургер у верхньому правому куті, спереду та в центрі — вікно для випадання, а потім користувач прокручує екран униз повз зображення, які можна натиснути.
Це макет, який насправді більш знайомий із блогів, ніж основна частина веб-сайту, але все ще не такий новий та інтригуючий, як меню робочого столу. Його перевага полягає в тому, що він дуже візуальний, інтуїтивно зрозумілий у використанні, і навіть у мобільній версії ретельно відібрані зображення передають відчуття підходу агентства.
Але чого він не пропонує, так це інноваційного мобільного меню. Зображення чудові, але вони все ще просто стос плиток.
5: Паперове телебачення
Ми розглянули сайти, які розміщують свої меню там, де користувачі не можуть їх пропустити, зосередившись на створенні взаємодії з користувачем, яка дозволяє відвідувачам контролювати те, як вони переміщуються сайтом із самого початку.
Але Paper Television є одним із зростаючої кількості сайтів, які використовують протилежний підхід і вибирають глобально приховане меню. Меню Paper Television — гамбургер у верхньому кутку. Хіба це не заважає користувачам орієнтуватися?
Теоретично мати меню, яке неможливо пропустити, у стандартному, впізнаваному місці – це хороший дизайн. Але для багатьох мобільних користувачів гамбургер є стандартним і впізнаваним. Додайте той факт, що трафік Paper Television спрямовується переважно на його домашню сторінку:
І врахуйте той факт, що цільові сторінки перетворюються набагато краще, якщо видалити пункти меню – іноді навіть на 100% краще. Якщо їхня домашня сторінка, по суті, є цільовою сторінкою, чи не варто Paper Television максимально видалити видиму навігацію, зберігаючи можливість навігації сайтом для тих, хто справді цього хоче?
Крім того, їхня домашня сторінка майже ідентична на мобільних пристроях – лише дещо інші розміри.
По-справжньому мобільний досвід повинен виходити за рамки простого проектування для мобільного дисплея, а дивитися на дизайн для очікувань і звичок мобільних користувачів.
Завжди приховане меню, що є наслідком зменшення площі екрана мобільного телефону, має сенс у цьому контексті, тож ми можемо побачити їх більше в майбутньому!
Висновок
Тут представлено низку різних стилів меню, від меню, що займають весь сайт і заповнюють весь екран, до меню, які ховаються. Найважливішим у всіх цих меню є те, що вони починаються зі спроби дати користувачеві щось свіже та відмінне – вони намагаються взяти частину найціннішої нерухомості на веб-сайті та перетворити її на щось більше, ніж просто рядок п’ять-сім опцій, які можна натиснути.
Де багато з них падають, так це на мобільних пристроях, де цікаві, стильні витвори, які їхні дизайнери розміщують на своїх сайтах для настільних комп’ютерів, як правило, поступаються місцем старим, тим самим старим прокручуваним карткам. Що ми можемо з цим зробити? Дайте нам знати в коментарях нижче – і створіть своє меню чудовим!