Transcript Nawigacja, drogowskazy i poruszanie si*.

Jak wygląda model nawigacji witryny lub
aplikacji? Czyli jak ekrany, strony oraz
przestrzenie są ze sobą połączone?
 System nawigacji globalnej –
znajduje się na każdej stronie głównej,
najczęściej przyjmuję postać pasków
bocznych, zakładek oraz menu za
których pomocą użytkownik jest w stanie
poruszać się po stronie lub aplikacji.
Grube Menu
 Mapka strony w stopce

Wyżej wymienione nowe podejścia
pozwalają na przekształcenie
wielopoziomowego menu
nawigacyjnego w pełni połączony
model. Koszt tego podejścia? Utrata
miejsca w stopce oraz nagłówku.
 System nawigacji funkcyjnej –
można znaleźć na stronie głównej
jednak zawiera on linki i narzędzia
odnoszące się do elementów nie
będącymi właściwymi częściami witryny
czy programu. Czyli do pomocy,
formularza rejestracji, logowania,
edytorów ustawień, drukowania, itp.

Opiera się na umieszczaniu linków w
pobliżu lub w obrębie samej treści strony
lub aplikacji, wiążąc tym samym treść z
narzędziami jaki i wskazówkami, które
mogą się przydać użytkownikowi w
danej chwili.










Oś i szprychy
Pełne połączenie
Wiele poziomów
Krok po kroku
Piramida
Przeciąganie i przybliżanie
Panel modalny
Wyraźne punkty wejścia
Zakładki
Wyjście ewakuacyjne

Do tej pory opowiedzieliśmy trochę o
rodzajach menu, nakreśliliśmy ich
podział z krótką charakterystyką i
przykładami oraz wypunktowaliśmy
modele nawigacji wraz z ich
schematami. Jednak że istnieją również
pewne wzorce ich wykorzystania.
Wskazane punkty startowe
 Spis Treści
 Piramida
 Panel Modalny
 Głębokie Linkowanie
 Wyjście Ewakuacyjne

Grube Menu
 Mapka Strony W Stopce
 Narzędzia Logowania

Mapa Sekwencji
 Okruszki
 Pasek Przewijania Z Adnotacją


Mapa Sekwencji, Okruszki i Pasek
Przewijania Z Adnotacją mogą też służyć
jako interaktywne mapy treści. Paski
Przewijania Z Adnotacją są
przeznaczone raczej dla modeli
nawigacyjnych typu „przeciąganie i
przybliżanie”, a nie dla wytworów
składających się z wielu połączonych
między sobą stron.

Mimo, że jest to jedynie sztuczka, która
pomaga użytkownikowi zachować
poczcie orientacji i świadomości miejsca
w którym się znajduje podczas
przemieszczania się.
Przedstaw kilka punktów informujących o
sposobie rozpoczęcia pracy z witryną
bądź programem.
 W zrozumiały sposób skłaniaj do
wykonania jakiejś czynności.
 Upewnij się, że Twoje komunikaty są
wyraźne!


Na stronach lub aplikacjach, które będą
odwiedzane sporadycznie lub większość
użytkowników będzie osobami nowymi.
Niektóre witryny lub też programy, potrafią
przytłoczyć (zwłaszcza nowych
użytkowników) swoim ogromem, panelami
oraz terminologią, przez co mogą
zniechęcić do siebie potencjalnego
użytkownika.
Dla tego daj użytkownikowi jasną wskazówkę
jak może rozpocząć pracę z programem,
co pozwoli mu na zapoznanie się z
najważniejszymi funkcjami oraz kategoriami
programu lub witryny.
Tworząc punkty wejściowe zrób to tak
abyś mógł dzięki nim zapoznać
użytkownika z programem lub witryną.
 Punkty wejściowe dostosuj tak aby
odpowiadały większości powodów dla
których użytkownik wybrał Twój program
lub witrynę.
 Wyeksponuj punkty startowe zgodnie z
ich względną ważnością.

Umieść na stronię listę linków do
bogatych w treść podstron witryny lub
aplikacji.
 Przedstaw dużo informacji na temat
każdego linku i ułatw tym użytkownikowi
podjęcie decyzji!
 Nie zamieszczaj na stronie innych
istotnych treści.

Kiedy projektujesz, ekran powitalny lub
inny obszar, który docelowo ma pełnić
rolę spisu treści pokazującego gdzie
użytkownik może udać się dalej.
 Potrzebujesz miejsca na promowanie
treści np. film, artykuł lub reklama.
 Jeżeli musisz zatrzymać użytkownika na
witrynie umieść spis treści w materiałach
pomocniczych.

Używając spisu treści wskazane jest abyś
miał pewność że:
 Użytkownik będzie wiedział po co znalazł
się na stronie witryny (czyli czego szuka).
 Użytkownik będzie wiedział czego strona
lub witryna dotyczy.
 Użytkownik nie będzie zainteresowany
promowanymi treściami, aktualizacjami,
wiadomościami.
Użytkownik może skupić się na
dostępnych opcjach nawigacyjnych.
 Ekran kieruje użytkowników do stron,
które najbardziej odpowiadają ich
potrzebom.
 Ekran służy do zilustrowania i wyjaśnienia
odnośników.

Lista oznaczeń powinna być krótka.
 Elementy powinny być duże na tyle żeby
dało się je nacisnąć na ekranie
dotykowym.
 Hierarchia nie powinna być
rozbudowana.

Dobrze oznacz linki i dodaj dużo
informacji kontekstowych aby użytkownik
zdecydował dokąd się uda.
 Spraw aby Twoje opisy linków były
konkretne i uczciwe.
 Rozważ organizację przestrzenną linków
(czy mają być przydzielone do kategorii,
umieszczone w jakiejś hierarchii itp.)
 Czy możesz umieścić coś jeszcze? Np.
Newsbox, Grafikę.

Połącz sekwencję stron odnośnikami
„Wstecz” oraz „Dalej”
 Utwórz stronę nadrzędną pełniącą rolę
„strony rodzica”.
 Pozwól użytkownikowi na wybranie
sposobu ich przeglądania.

Na stronach na których znajduje się
sekwencja stron lub obrazów które
użytkownik przegląda jak po kolei jak
pokaz slajdów lub w kreatorach.
 Na stronach z menadżerami obrazów.

Wzorzec ten zmniejsza liczbę kliknięć
potrzebną do przeglądania treści,
obrazów.
 Usprawnia nawigacje i ilustruje
sekwencję w jakiej elementy się
znajdują.
 Przyciski są użyteczne i intuicyjne.
 Połączenie niepowiązanych stron w ten
sposób ułatwia ich przeglądanie bez
powracania do strony głównej.






Podaj listę wszystkich elementów lub stron we
właściwej im kolejności na nadrzędnej stronie.
Ujmij ją w takiej formie, aby przystawała do
rodzaju elementów, które prezentujesz.
Umieść odnośniki Wstecz i Dalej na stronie
każdego elementu.
utwórz link prowadzący użytkownika z
powrotem do strony nadrzędnej.
Jeżeli kolejność sekwencji jest istotna,
powinieneś połączyć ostatnią stronę ze stroną
nadrzędną, by użytkownik wiedział, że
zobaczył już wszystko, co trzeba.

Pokazuj jedną stronę bez jakichkolwiek
innych możliwości nawigacyjnych,
dopóki użytkownik nie wykona zadanej
mu czynności.
W aplikacjach lub witrynach na których
użytkownik musi zapoznać się z ważną
informacją przed rozpoczęciem pracy.
Np. Akceptacja licencji itp.
 W aplikacji związanych z zapisywaniem
dokumentów. Np. przy podawaniu
nazwy dokumentu.
 Kiedy witryna lub aplikacja wymaga
zarejestrowania się lub zalogowania.

Panel Modalny odcina użytkownika od
wszystkich opcji nawigacyjnych.
 Skupia uwagę użytkownika na
wymaganej do wykonania przez niego
czynności.
 Zmusza użytkownika do podjęcia decyzji
co do czynności, które będzie
wykonywał dalej.

W miejscu ekranu na którym skupiona
jest uwaga użytkownika umieść panel
modalny.
 Umieść max. 3 drogi wyjścia z panelu
modalnego.
 Pojawienie się panelu powinno
zablokować możliwość nawigacji.
 Dbaj o to aby panel był schludny i
estetyczny oraz pasował do strony lub
aplikacji.


Na każdym ekranie, gdzie opcje
nawigacyjne są ograniczone, umieść
zrozumiale oznaczony przycisk lub link,
który prowadzi użytkownika do
znajomego punktu.
Witryna posiada elementy, które
ograniczają jego możliwości
nawigacyjne np. panel modalny.
 Strony składają się na seryjny proces np.
kreator.
 Strony do których użytkownik sięgnąa
odrywając się od kontekstu.

Ograniczenie nawigacji a brak wyjścia
mogą zniechęcić użytkownika dla tego
daj mu możliwość powrotu do znanego
miejsca.
 Wzorzec umożliwia użytkownikowi
swobodne zapoznanie się ze stroną lub
aplikacją.
 Sprawia wrażenie że użytkownik ma
możliwość „cofnięcia zmian” dzięki
czemu nie czuje się uwięziony.

Wzorca można użyć np. w modelu Oś i
szprychy dla aplikacji mobilnych dzięki
czemu użytkownik wróci do znanej str.
 Umieść wyraźne oznaczenie na stronie
głównej.
 Wszystkie witryny z pełnym modelem
połączeń pozwalają na użycie
wyraźnego linku który pozwoli
użytkownikowi wrócić do znanego stanu
lub strony głównej.

Umieść mapę strony w stopce każdej
podstrony.
 Potraktuj ją jako część systemu nawigacji
globalnej, uzupełniającą elementy
zawarte w nagłówku.
 Skróć ją, jeżeli nie mieści się w stopce
strony.

Jeżeli nie chcesz aby pasek nawigacji
globalnej lub panele boczne zajmowały
zbyt dużo miejsca.
 Podstrony witryny są obszerne a nie
musisz przejmować się czasem
wczytywania strony.
 Menu globalne nie pokazuje całej
hierarchii strony.
 Ze względu na trudność w implementacji
nie chcesz stosować Grubego menu.

Mapka Strony W Stopce ułatwia
zapoznawanie się ze strukturą
rozbudowanej witryny.
 Mapka daje użytkownikowi dodatkowe
możliwości nawigacyjne.
 Wielopoziomową stronę, której podstrony
nie są integralne z innymi sekcjami
chcesz przekształcić w pełni
zintegrowaną witrynę.

Postaraj się aby stopka nie przekraczała
połowy wysokości przeglądarki.
 Zaprojektuj dla całej witryny stopkę, w której
umieścisz spis najważniejszych sekcji oraz ich
najważniejszych podstron.
 Umieść w niej również linki służące do
nawigacji funkcyjnej, narzędzia w rodzaju
wyboru języka, oraz Linki Społecznościowe i
inne typowe dla stopki dane, takie jak
informacje o prawach autorskich i
zasadach prywatności.

Przedstaw listę opcji nawigacyjnych w
postaci rozwijanych menu.
 W rozwijanych menu zawrzyj wszystkie
podstrony poszczególnych sekcji strony.
 Rozłóż je w poziomie.
 Uporządkuj je starannie, odpowiednio
dobierając kategorie lub kolejność
sortowania.

Witryna składa się z wielu stron
umieszczonych w wielu kategoriach.
 Chcesz pokazać użytkownikowi wszystkie
lub większość stron .
 Chcesz zapewnić użytkownikowi
swobodę korzystania z menu które
rozwija się kliknięciem myszy lub samym
jej najechaniem.

Grube Menu ułatwiają zapoznawanie się
ze złożonymi witrynami.
 Dają użytkownikom więcej możliwości
nawigacyjnych.
 Użytkownik nie jest zasypywany linkami
kiedy tego nie chce.
 Osoba odwiedzająca stronę może
zapoznać się z ogólną zawartością
witryny, oglądając nagłówki w menu
ogólnym.







W każdym menu umieść odpowiednio
uporządkowaną listę linków.
Rozmieść je w zatytułowanych kategoriach
lub sekcjach.
Jeżeli nie ma sekcji lub kategorii to posortuj
je tak aby pasowały do treści strony.
Zdecyduj o rozmieszczeniu przestrzennym
linków przy użyciu nagłówków, pustej
przestrzeni i innych elementów.
Wykorzystaj przestrzeń poziomą.
Oszacuj wysokość menu.
Umieść narzędzia nawigacji funkcyjnej
zalogowanego użytkownika w prawym
górnym rogu strony.
 Uwzględnij narzędzia w rodzaju koszyków
z zakupami, ustawień profilu i konta,
pomoc oraz kontrolkę wylogowania.


Narzędzia Logowania przydają się na
każdym serwisie, na którym użytkownicy
często się logują.
Wzorzec jest już w pełni konwencjonalny.
 Użytkownicy oczekują, że znajdą panel
logowania w prawym górnym rogu.

Zarezerwuj miejsce w prawym górnym
rogu każdej strony na Narzędzia
Logowania.
 Dopilnuj, aby każde narzędzie działało
tak samo na każdej stronie witryny lub
aplikacji.
 Niech ten obszar nie będzie za duży lub
zbyt wyrazisty aby nie dominował strony.


Na każdej stronie sekwencji umieść
mapę wszystkich jej stron we właściwej
kolejności wraz ze wskaźnikiem
określającym, na jakim etapie
użytkownik się znajduje.
Jeżeli tworzysz, kreator, proces lub coś
innego przez co użytkownik przechodzi
po kolei.
 Ścieżka którą przechodzi użytkownik jest
linearna.

Mapa Sekwencji pokazuje
użytkownikowi, na jakim etapie
sekwencji się znajduj.
 Mapa Sekwencji pokazuje użytkownikowi
ile zostało mu do końca.
 Mapa Sekwencji jest też narzędziem
nawigacyjnym i umożliwia użytkownikowi
powrót do wcześniejszego kroku dzięki
pojedyńczemu kliknięciu.






Przy krawędzi strony umieść niewielką mapę
stron wchodzących w skład sekwencji.
Rozmieść ją w linii lub kolumnie tak aby nie
odwracała uwagi od właściwej treści
strony.
Wyróżnij znacznik bieżącego kroku.
Wyróżnij przebyte przez użytkownika kroki.
Umieść narzędzia nawigacyjne tj. „Dalej”,
”wcześniej” lub same strzałki w lewo oraz
prawo.

Na każdej podstronie wielopoziomowej
hierarchii nawigacyjnej umieść listę
wszystkich stron nadrzędnych, łącznie ze
stroną główną.




Aplikacja lub strona są oparte na
hierarchicznej strukturze o dwóch lub więcej
poziomach.
Użytkownicy poruszają się z użyciem kontrolek
nawigacyjnych, przeglądając, filtrując,
wyszukując treści na stronie i docierając do
nich za pomocą głębokich linków zdobytych w
innych miejscach.
Nawigacja nie umożliwia pokazania
użytkownikowi hierarchii folderów.
Witryna lub aplikacja mogą mieć narzędzia do
przeglądania i filtrowania dużych baz danych
Okruszki ukazują wszystkie poziomy
hierarchii między bieżącą stroną a stroną
główną.
 Podobnie jak Mapa Sekwencji, Okruszki
pomagają użytkownikowi określić, gdzie
się znajduje.
 Okruszki raczej wskazują położenie
użytkownika względem reszty aplikacji
lub witryny.






W górnej części strony umieść linijkę tekstu lub rząd
ikonek wskazujące położenie bieżącej strony w
hierarchii.
Zacznij od najwyższego poziomu, a po jego prawej
umieszczaj kolejne, aż do bieżącej strony.
Pomiędzy poziomami zamieść element graficzny lub
tekstowy, żeby ukazać między nimi relację na linii
rodzic–dziecko.
Każda strona powinna być oznaczona własnym
tytułem.
Same oznaczenia powinny być linkami do stron.

Spraw, by pasek przewijania dodatkowo
pełnił funkcję mapy treści bądź
wskaźnika położenia użytkownika.
Projektujesz aplikację ukierunkowaną na
pracę na dokumentach lub z interfejsem
opartym na modelu nawigacji
„przeciąganie i przybliżanie”, np. mapę
lub dużą wizualizację.
 Użytkownicy mogą mieć problemy z
orientowaniem się, gdzie są i co jeszcze
zobaczą w miarę dalszego przewijania.

Pomimo że użytkownik, kiedy przewija
treść, pozostaje cały czas w obrębie
jednego obszaru nawigacyjnego,
drogowskazy są przydatne.
 Podczas szybkiego przewijania strony
czytanie tekstu jest dość trudne więc
jakiś wskaźnik położenia jest przydatny.
 Ponieważ podczas przewijania tekstu to
na pasku skoncentrowana jest uwaga
użytkownika.

Umieść wskaźnik położenia na pasku
przewijania lub w jego pobliżu.
 Użyj statycznych lub dynamicznych
wskaźników położenia.
 Dopilnuj aby funkcja wskaźników była
jasna w odbiorze.
 Kiedy treść jest kodem, możesz zawrzeć
we wskaźniku funkcję lub metodę.
 Kiedy treść jest arkuszem kalkulacyjnym
możesz podać rząd i kolumnę.


„Wygładź” zaskakujące lub znaczące
przejście animacją, która sprawi, by
wyglądało naturalniej.
Użytkownik porusza się po dużym obszarze
wirtualnym w rodzaju obrazu, arkusza,
wykresu lub dokumentu tekstowego.
 W interfejsie mogą też znajdować się
sekcje, które użytkownik lub sam system
mogą wielokrotnie otwierać i zamykać.
 Animowane przejścia można wykorzystać
również w momentach, kiedy użytkownicy
przeskakują między stronami.

Wszelkie zmiany widoku treści zakłócają
orientację użytkownika w wirtualnej
przestrzeni.
 Natychmiastowe przybliżenie lub oddalenie
obrazu, podobnie jak obrócenie go albo
wyłączenie elementów ekranu może
zaburzyć zmysł przestrzeni użytkownika.
 o wiele lepiej, kiedy przejście z jednego
stanu do drugiego odbywa się z
zachowaniem ciągłości wizualnej.

Dla każdego rodzaju zmiany interfejsu
zaprojektuj krótką animację „łączącą”
stan poprzedzający z następującym.
 Dołóż wszelkich starań, by w każdej
chwili wyglądało na to, że na ekranie
zachodzi jakieś rzeczywiste zjawisko.
 Animacje muszą być szybkie i dokładne.
 Jeżeli użytkownik wykonuje kilka przejść
w krótkim czasie połącz je w jedną
animacje.










„Projektowanie interfejsów – sprawdzone
wzorce” - wydawnictwo Helion.
www.spreadshirt.pl
www.wp.pl
www.asus.com
www.target.com
www.behance.net
www.allegro.pl
www.facebook.pl
http://www.heychickadee.com/