Szczęśliwego Nowego Roku dla wszystkich naszych czytelników! Dzisiaj przyjrzymy się trzem kluczowym trendom nawigacyjnym, które będą dominować w 2015 roku.

Można by pomyśleć, że zbadaliśmy wszystkie możliwe wariacje nawigacji w Internecie, a mimo to widzimy kontynuację eksploracji wewnątrz tej bardzo specyficznej niszy. To naprawdę niesamowite, jak wiele wariantów projektu można zastosować do skromnej listy linków.

Tutaj chcę wziąć pod uwagę 3 popularne trendy w dziedzinie nawigacji: najpierw jak zmienia się użycie navicon (lub ikony hamburgera), po drugie nowe podejście za pomocą menu pełnoekranowego i wreszcie to, co uważam za perfekcję mega rozwijanego menu. Nurkujmy i zobaczmy te podejścia w pracy.

Niech żyje / śmierć dla, navicon!

Facebook jest przyznawany za popularyzowanie użycia navikonów do ukrywania opcji nawigacji poza ekranem lub poza płótnem. Wraz z narodzinami responsywnego projektu strony internetowej społeczność projektantów WWW desperacko szukała rozwiązania nawigacyjnego. Pakowanie wszystkiego w panel nawigacyjny, który zasłania płótno, i poruszanie się po wybraniu navicon było atrakcyjnym rozwiązaniem. Wygląda na to, że społeczność utorowała sobie drogę na nieco prostsze rozwiązanie, które wydawało się ułatwiać życie projektantowi i programistce. W rezultacie navicon stał się opcją dla aplikacji mobilnych i stron internetowych.

Ostatnio jednak navicon został zaatakowany. W wielu z tych debat wydaje się, że pominięto jeden kluczowy szczegół. Branża aplikacji mobilnych łatwo odchodzi od nawigacji poza ekranem na rzecz opcji na ekranie. Wynika to z trendów skierowanych na skoncentrowane aplikacje o jednym celu. To sprawia, że ​​zmiana jest bardziej uzasadniona. Natomiast nawet niewielka strona internetowa może zawierać dziesiątki, jeśli nie setki linków w nawigacji. Weźmy na przykład stronę taką jak sony.com lub nawet stronę. Witryny te mają potrzeby nawigacyjne, które wykraczają daleko poza to, co jest możliwe dzięki prostemu paskowi kart. Z tego powodu wydaje mi się, że navicony i menu poza ekranem pozostają tutaj. Po prostu musimy zdawać sobie sprawę z ich ograniczeń, potencjalnych problemów i tak dalej. Oczywiście zawsze pamiętaj o używaniu: czy jest to aplikacja mobilna czy witryna mobilna / responsywna. Ponieważ nie są one takie same.

01

Strona internetowa agencji projektowej Long Story Short jest pięknym przykładem wykorzystania navicon w znaczący i ograniczony sposób. Ta strona korzysta z navicon, aby ukryć pełny zakres opcji nawigacji. Czyni to zarówno w wersji mobilnej, jak i komputerowej. Używanie navikonów na pulpicie jest w rzeczywistości całym sub-trendem. Co sprawia, że ​​ta strona jest najlepszym przykładem tego podejścia, to że najważniejsze elementy nawigacji pojawiają się poza menu . Strona główna jest portalem do trzech najważniejszych sekcji witryny. W ten sposób ukryte menu nie jest podstawową nawigacją, ale raczej drugą, która wypełnia puste pola.

02

Witryna Squarespace to kolejny piękny przykład, jak skutecznie korzystać z ukrytych menu. Na tej stronie trasy i opcje logowania są zawsze widoczne. Około 23 opcje menu znajdują się w menu wysuwanym. Szczerze mówiąc, korzystanie z ukrytych menu, dzięki którym najważniejsze opcje nawigacji staną się w centrum uwagi, jest genialne. Przeszedłem przez fazę, w której byłem naprawdę zaniepokojony użyciem naviconów na pulpicie; wydawało się, że brakowało techniki. Jednak po zobaczeniu, w jaki sposób witryny go używają, aby przyciągnąć użytkowników do najbardziej krytycznych elementów, nie mogę nie pomijać tego.

Wreszcie, jeśli zaczynasz odczuwać żal z powodu używania naviconów lub ukrytych menu, nie mów o tym nikomu. Zamiast tego wykonaj własne testy użyteczności, aby sprawdzić, czy działa w Twojej witrynie. Wielką zasadą jest unikanie debaty i zamiast tego testowanie.

08
09
10

Pełnoekranowa nawigacja

Drugim trendem, na który chciałbym zwrócić uwagę, jest użycie pełnoekranowych menu nawigacyjnych. Te menu są zazwyczaj aktywowane za pomocą przycisku lub łącza jakiegoś typu; dość często navicon. Różnica polega na tym, że zamiast małego panelu, który się ślizga, nawigacja przejmuje cały ekran. Na urządzeniach mobilnych to normalne, ale na komputerze jest to nowe i interesujące podejście.

03

Nawigacja na tej stronie jest naprawdę interesująca pod tym względem, że nakładka na nawigację wnosi dużo ponczu do menu. Tutaj mają spodziewane opcje menu, ale ponieważ jest to pełnoekranowy, mają również miejsce na pełny formularz kontaktowy, dane kontaktowe, linki do mediów społecznościowych, ostatni wpis na blogu i wyraźne wezwanie do działania.

Ciekawe, że użytkownik uruchamiający menu w dowolnym momencie szuka kierunku. To sprawia, że ​​jest to doskonała okazja, aby skierować ich do tego, co chcesz zrobić. W tym przypadku chcą, aby użytkownik skontaktował się lub odwiedził ich planista projektu.

04

W tym przykładzie widzimy również schemat w działaniu, ale w znacznie bardziej minimalistyczny sposób. Zamiast pakować dodatkowe opcje zdecydowali się po prostu przedstawić bardzo zwięzłą listę opcji nawigacji. Dodatkowo otrzymują punkty bonusowe za animację navicon w "x", aby zamknąć menu.

05
06
07

Doskonałość super-menu

Wreszcie, chcę wziąć pod uwagę super rozmiar lub mega rozwijanego menu. Korzystanie z bardzo dużych systemów menu nie jest niczym nowym. To co robię jest interesujące, to zawartość umieszczona w nich. W mojej ocenie rzeczy projektanci naprawdę wykorzystali tę nową przestrzeń do działania w potężny sposób.

11

Witryna internetowa Lowes doskonale pokazuje to, co mam na myśli. Tutaj widać, że system menu stał się miejscem dla treści. Ta zawartość może być używana do kierowania przepływem użytkowników przez witrynę. Co najważniejsze, może doprowadzić ich do najważniejszej treści. Powstaje pytanie, jaka jest najważniejsza treść? Być może to najbardziej opłacalne produkty w Twoim sklepie. I w ten sposób nawigacja działa jak sprzedawca, popychając najbardziej dochodowe produkty. A może jest używany do kierowania użytkowników do najpopularniejszych przedmiotów.

12

Inną witryną, która korzysta z tej opcji w nieco inny sposób, jest strona New Balance. W tym przypadku pierwsze trzy listy rozwijane mają duży charakter, ale zasadniczo są listami łączy. Jednak ostatnia opcja tworzenia niestandardowych butów powoduje rozwijanie pokazane powyżej. Ta opcja menu jest pojedynczym linkiem. Uwielbiam to, że wykorzystali okazję, aby ten pojedynczy element stał się naprawdę interesującym wstępem do treści znajdujących się za linkiem.

13
14
15
16

Wniosek

Te trzy trendy, choć możemy je omawiać oddzielnie, mają wiele wspólnych cech. Najważniejsze wśród nich jest to, jak zmieniła się nawigacja na przestrzeni lat. Menu rozwijane stanowiło zwykle uporządkowaną listę linków. W większości były one neutralne, ponieważ wszystkie rzeczy były prezentowane jednakowo. Teraz okazuje się, że systemy nawigacji są kluczowym sposobem pomagania użytkownikom w dążeniu do pożądanych celów.

Dla mnie wyzwanie jest jasne. Powinniśmy podnieść nasze myślenie o nawigacji i naprawdę wykorzystać wpływ, jaki wywiera na korzystanie z tworzonych przez nas stron internetowych. Zbyt często odkrywam, że nawigacja to trochę refleksja. W rzeczywistości powinien być jednym z najbardziej krytycznych i dopracowanych elementów w projekcie.