Jak wygląda model nawigacji witryny lub aplikacji? Czyli jak ekrany, strony oraz przestrzenie są ze sobą połączone?

Prezentacja na temat: "Jak wygląda model nawigacji witryny lub aplikacji? Czyli jak ekrany, strony oraz przestrzenie są ze sobą połączone?"— Zapis prezentacji:

1

2 Jak wygląda model nawigacji witryny lub aplikacji? Czyli jak ekrany, strony oraz przestrzenie są ze sobą połączone?

3  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.

4

5  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.

6  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.

7

8  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.

9

10

11  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

12

13

14

15

16

17

18

19

20

21

22  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.

23  Wskazane punkty startowe  Spis Treści  Piramida  Panel Modalny  Głębokie Linkowanie  Wyjście Ewakuacyjne

24  Grube Menu  Mapka Strony W Stopce  Narzędzia Logowania

25  Mapa Sekwencji  Okruszki  Pasek Przewijania Z Adnotacją

26  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.

27  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ę.

28

29

30  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!

31  Na stronach lub aplikacjach, które będą odwiedzane sporadycznie lub większość użytkowników będzie osobami nowymi.

32 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.

33  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ą.

34

35

36

37  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.

38  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.

39 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.

40  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.

41  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.

42  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ę.

43

44

45

46  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.

47  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.

48  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.

49  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.

50

51

52

53  Pokazuj jedną stronę bez jakichkolwiek innych możliwości nawigacyjnych, dopóki użytkownik nie wykona zadanej mu czynności.

54  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.

55  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.

56  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.

57

58

59

60  Na każdym ekranie, gdzie opcje nawigacyjne są ograniczone, umieść zrozumiale oznaczony przycisk lub link, który prowadzi użytkownika do znajomego punktu.

61  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.

62  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.

63  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.

64

65  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.

66  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.

67  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ę.

68  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.

69

70

71  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.

72  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.

73  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.

74  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.

75

76

77  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.

78  Narzędzia Logowania przydają się na każdym serwisie, na którym użytkownicy często się logują.

79  Wzorzec jest już w pełni konwencjonalny.  Użytkownicy oczekują, że znajdą panel logowania w prawym górnym rogu.

80  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.

81

82

83  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.

84  Jeżeli tworzysz, kreator, proces lub coś innego przez co użytkownik przechodzi po kolei.  Ścieżka którą przechodzi użytkownik jest linearna.

85  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.

86  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.

87

88

89  Na każdej podstronie wielopoziomowej hierarchii nawigacyjnej umieść listę wszystkich stron nadrzędnych, łącznie ze stroną główną.

90  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

91  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.

92  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.

93

94

95

96  Spraw, by pasek przewijania dodatkowo pełnił funkcję mapy treści bądź wskaźnika położenia użytkownika.

97  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.

98  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.

99  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ę.

100

101

102

103  „Wygładź” zaskakujące lub znaczące przejście animacją, która sprawi, by wyglądało naturalniej.

104  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.

105  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.

106  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.

107

108  „Projektowanie interfejsów – sprawdzone wzorce” - wydawnictwo Helion.  www.spreadshirt.pl www.spreadshirt.pl  www.wp.pl www.wp.pl  www.asus.com www.asus.com  www.target.com www.target.com  www.behance.net www.behance.net  www.allegro.pl www.allegro.pl  www.facebook.pl www.facebook.pl  http://www.heychickadee.com/ http://www.heychickadee.com/

109