4.wzorce projekt w nawigacji

We wpisie Projektowanie nawigacji w zależności od typu strony przedstawiliśmy wzorce projektowe dla serwisów informacyjnych, systemów e-commerce i stron produktowych. Tym razem chcielibyśmy przyjrzeć się bliżej serwisom korporacyjnym i firmowym oraz stronom wizerunkowym.
Poruszymy kwestie użyteczności, wzorców projektowych, doświadczeń użytkownika w kontakcie ze stroną (ang. user experience), a także opowiemy o wykorzystaniu metafor w projektowaniu nawigacji.

Serwisy korporacyjne i firmowe

Jednym z najczęściej stosowanych rozwiązań nawigacyjnych w przypadku serwisów korporacyjnych i firmowych jest menu rozwijane pionowo (ang. vertical dropdown menu). Pozwala ono zaoszczędzić miejsce na stronie (domyślnie pokazujemy tylko pierwszy poziom hierarchii), a jednocześnie umożliwia prezentację dużej ilości odnośników. Słabą stroną tego rozwiązania jest brak możliwości pokazania użytkownikowi, który link jest aktualnie wybrany. Dlatego ten typ menu jest często łączony z menu bocznym. Zaprezentowany poniżej przykład pochodzi ze strony www.bp.com.

Menu na stronie korporacji BP www.bp.com
Menu na stronie korporacji BP www.bp.com

W przypadku kiedy chcemy, żeby użytkownicy mieli dostęp do funkcji lub sekcji strony niezależnie od ustalonej hierarchii warto zastosować tzw. grubą stopkę (ang. fat footer). Jest to wzorzec wykorzystywany z sukcesem nie tylko na stronach firm, ale także w serwisach informacyjnych, sklepach internetowych czy serwisach społecznościowych. Jego duża zaleta polega na przejrzystości i kompaktowości. W jednym miejscu można zebrać grupę kluczowych linków, a także ważne opcje jak np. zapisanie się do newslettera, link do rss, przycisk do zostania fanem na facebooku (a propos czy jesteś już naszym Zostań naszym fanem facebookowym fanem?), a nawet wyszukiwarkę. Nikt nie powiedział, że jej miejsce jest zarezerwowane na prawy górny róg. Równie dobrze może być ona powtórzona w dolnej części strony.

Fat footer w serwisie www.thealbany.org.uk
Fat footer w serwisie www.thealbany.org.uk

Klasyczny układ linków nie musi oznaczać szablonowego wykonania. Dla przykładu struktura strony wonder-wall.com jest bardzo prosta i przejrzysta. Osiem zakładek z czego pierwszą stanowi lista zrealizowanych przez firmę projektów. Realizacje zaprezentowane są w postaci zbioru miniaturek z nazwami. Brzmi nudno i tradycyjnie? To tylko pozory. Kiedy najedziemy na siatkę z miniaturkami, myszka niczym magnez przyciąga prace, które są względem niej najbliżej, powodując, że cała struktura przybiera trójwymiarowy kształt. Przeglądanie portfolio staje się swojego rodzaju zabawą.

Zabawa na stronie www.wonder-wall.com
Zabawa na stronie www.wonder-wall.com

Ciekawym przykładem strony firmowej jest www.sensisoft.com. Nawigacja w tym wypadku nie jest oparta o żaden z wymienionych powyżej wzorców projektowych. Nie spełnia ona klasycznego kanonu użyteczności, ale z drugiej strony jest łatwa do wyuczenia i dostarcza dużo radości podczas kontaktu. Sensisoft.com jest przykładem witryny, która jest serwisem firmowym, ale pełni głównie rolę wizerunkową. Jej najważniejszym zadaniem jest wywarcie odpowiedniego wrażenia na użytkowniku (Sensisoft to firma o długiej tradycji, pracująca w międzynarodowym środowisku), niż szybkość dotarcia do informacji.

Niestandardowa nawigacja na stronie www.sensisoft.com
Niestandardowa nawigacja na stronie www.sensisoft.com

Strony wizerunkowe

Strony wizerunkowe rządzą się innymi prawami, niż strony firmowe. Przedstawiony poniżej schemat przedstawia składowe budujące pojęcie doświadczenia użytkownika (ang. user experience). Lista składników nie zmienia w zależności od typu strony, ale ich ważność tak. Na przykładzie strony firmy Sensi Soft widać, że dla stron wizerunkowych punkt ciężkości zostaje przeniesiony z aspektu użyteczności na  inne obszary. W procesie całościowego doświadczania użytkownika (ang. user experience) zaczyna dominować jakość i pomysłowość interakcji użytkownika ze stroną oraz sfera wizualna. Tutaj nie tylko liczy się co, ale przede wszystkim jak.

Składowe user experience
Składowe user experience (źródło smashingmagazine.com)

Ciekawym przypadkiem ewolucji charakteru serwisu, a tym samym stosowanych rozwiązań nawigacyjnych jest witryna poświęcona Międzynarodowemu Festiwalu Muzyki Współczesnej „Warszawska Jesień”. Z uwagi na to, że jest to impreza cykliczna, co roku powstaje nowa strona poświęcona kolejnej edycji.  Wszystkie istniejące od 2002-2006 roku wersje cechują się tzw. szeroką nawigacją, statycznym układem treści, który jest typowy dla stron informacyjnych. W 2007 po raz pierwszy użyto mocniejszych kolorów, nieszablonowego układu menu i treści, a całość została wykonana w technologii flash. Wersja z 2008 z przyjemną dla oka grafiką i muzyką jest jeszcze bardziej wizerunkowa, niż jej zeszłoroczna poprzedniczka. Także sposób nawigowania po stronie zmienił się radykalnie. Dynamiczne przejścia pomiędzy podstronami i zmienne położenie menu w zależności od strony stanowi czynnik rozpraszający uwagę, opóźnia szybkość dotarcia do informacji. Jednak dzięki tym rozwiązaniom strona zyskuje na wizualnej atrakcyjności i buduje wizerunek festiwalu jako wydarzenia nowoczesnego, dynamicznego i inspirującego.

Zestawienie wybranych wersji serwisów poświęconych festiwalowi Warszawska  Jesień
Zestawienie wybranych wersji serwisów poświęconych festiwalowi Warszawska Jesień

wersja z 2002 http://www.warszawska-jesien.art.pl/02

wersja z 2007 http://www.warszawska-jesien.art.pl/07

wersja z 2008 http://www.warszawska-jesien.art.pl/08

wersja z 2009 http://www.warszawska-jesien.art.pl/09

wersja z 2010 http://www.warszawska-jesien.art.pl/10

Przy projektowaniu menu dla serwisów wizerunkowych graficy mają większą swobodę twórczą, niż w przypadku tradycyjnych stron firmowych. Nawigacja kreacji wizerunkowych musi wspierać ogólne wrażenie, jakie chcemy wywrzeć na użytkowniku. W serwisie www.lexusdarkride.com udało się osiągnąć odczucie luksusu, a jednocześnie pełnej kontroli.  Sama nawigacja pełni jednak rolę drugorzędną w stosunku do zawartości strony, z tego powodu istnieje opcja ukrycia menu.

Nawigacja w serwisie www.lexusdarkride.com
Nawigacja w serwisie www.lexusdarkride.com

Metafory w projektowaniu nawigacji

Wykorzystanie metafor przy projektowaniu interfejsu nie jest zagadnieniem nowym. Znajduje ono zastosowanie również w obszarze nawigacji. Warto podać kilka inspirujących przykładów.

Na stronie profipartners.pl elementem wspomagającym poruszanie się po stronie są palce wskazujące. Zastępują one „łapkę myszki”, którą to zazwyczaj wykorzystujemy do wykonywania akcji na stronie. Genialność tego rozwiązania wynika z faktu, że nawiązuje ono do naszych doświadczeń ze świata realnego. Bardzo często czytamy tekst wodząc palcem wzdłuż linii tekstu, aktywujemy ręką przyciski czy obsługujemy przedmioty. Podobne czynności możemy  wykonać na stronie Profi Partners. Łącznie z obsługą przedmiotów. Wystarczy poeksperymentować z telefonem.

Metafora wskazującego palca w serwisie www.profipartners.pl
Metafora wskazującego palca w serwisie www.profipartners.pl

Nawet w przypadku prostej struktury strony i klasycznej nawigacji warto pokusić się o rozwiązania oparte na metaforach. W przypadku witryny www.loodo.com.br zastosowano prosty zabieg polegający na stylizacji linków w menu jako pól planszy. Rozwiązanie jest nie tylko estetyczne i nawiązuje do tematyki strony, ale niesie za sobą całe bogactwo intuicji, np. nie możemy przenieść się na pole, na którym już stoimy, tak jak nie ma sensu wybierać obecnie przeglądanej podstrony.

„Planszowe” menu na stronie www.loodo.com.br
„Planszowe” menu na stronie www.loodo.com.br

Kilka dodatkowych uwag na temat menu

Architekci informacji respektują wytyczne co do ilości opcji w menu (zgodnie z klasyczną zasadą Millera 7 +/- 2). Wynika to bezpośrednio z ograniczeń pojemności pamięci krótkotrwałej człowieka, która w danym momencie może przechowywać tylko taką porcję informacji. Co jednak zrobić, jeśli mamy większą ilość działów, a nie chcemy budować zagnieżdżonej struktury. Z pomocą może przyjść zasada grupowania, która mówi o tym, że elementy położone blisko siebie lub/i podobne, mogą być postrzegane jako całość.  Tym samym możemy zaprezentować ich większą ilość. Dobrym przykładem wykorzystania tego mechanizmu jest strona www.studioracket.org. W menu zaprezentowano aż trzynaście opcji, jednak dzięki zgrupowaniu ich w logiczne grupy, początkowo spostrzegamy jedynie cztery. Dopiero koncentracja na wybranej grupie pozwala użytkownikowi rozbić je na mniejsze elementy składowe. Dzięki temu korzystanie z menu nie będzie sprawiać problemu.

Zasada grupowania na stronie www.studioracet.org
Zasada grupowania na stronie www.studioracet.org

Podejść do kwestii nawigacji jest tyle ile różnorodnych typów serwisów. Jeśli bardziej zależy nam na funkcji informacyjnej, warto sięgnąć do sprawdzonych wzorców projektowych. Jeśli na pierwszy plan wysuwa się kwestia kształtowania wizerunku i wywarcia wrażenia, lepszym rozwiązaniem będzie poszukiwanie innowacyjnych rozwiązań. W jednym i drugim przypadku warto korzystać z metafor, dzięki którym nasza witryna stanie się bliższa użytkownikowi.

Źródła:

Kalbach J., Designing Web Navigation, O’Reilly 2007.

http://ui-patterns.com/patterns/NavigationTabs

http://www.slideshare.net/dansaffer/the-role-of-metaphor-in-interaction-design

http://www.smashingmagazine.com/2010/01/29/better-user-experience-using-storytelling-part-one

Skomentuj
komentarzy

Dodaj komentarz