UX: Modele nawigacji na stronach
w Praktyce
7 godz. 35 min · User Experience · UI, UX i Webdesign
Natalia BieniasHead of Design w Mobee DickCzego się nauczysz
- Narzędzia, które pomogą zbierać wymagania do projektu
- Organizacja i prowadzenie skutecznego spotkania
- Metody warsztatowe, które łatwo wprowadzić do codziennej pracy
- Tworzenie modeli architektury informacji, np. do strony www
- Różnice i zastosowania różnych modeli nawigacji na stronach
- Wybór najlepszego rodzaju prototypu do typu projektu
- I wiele, wiele więcej!
Cały kurs został podzielony na trzy główne części: zbieranie wymagań, architekturę informacji oraz prototypowanie. Czasami jako projektanci będziemy zajmować się w pracy każda z nich, a czasami będziemy odpowiedzialni za wszystkie. Niezależnie od tego, czym ostatecznie będziemy się zajmować, warto znać i rozumieć pozostałe etapy, aby sprawniej współpracować z innymi członkami zespołu projektowego.
Zbieranie wymagań, czyli praca z klientem
To, czego nie uczą z reguły podręczniki to praca z klientem i rozwijanie tak zwanych kompetencji miękkich. W części poświęconej zbieraniu wymagań poznasz metody i narzędzia, które pomogą Ci we współpracy z innymi ludźmi. Dowiesz się min. jak i po co stworzyć brief, jak zorganizować i poprowadzić spotkanie lub warsztat kreatywny, a także jak uporządkować sobie zdobyta wiedze, by wykorzystać ja dalej.
Architektura informacji, czyli porządkujemy treści
W pracy projektowej albo tworzymy struktury architektury informacji lub na takich strukturach, przygotowanych przez architektów informacji pracujemy. Niezależnie od tego, w która stronę pójdziemy, będziemy mieć do czynienia na co dzień z projektowaniem treści. W kursie dowiesz się w jaki sposób porządkujemy treści na stronach, jakie są popularne modele nawigacji i w jaki sposób weryfikować, czy stworzone przez nas modele są zrozumiale dla użytkowników.
Jak wybrać rodzaj prototypu?
Etap prototypowania jest jednym z najbardziej charakterystycznych, do tego stopnia, ze często myli się go z samym projektowaniem UX. Dowiesz się jak wygląda proces powstawania prototypu i jak dobrać najlepszy jego rodzaj do typu projektu, który realizujesz. Nie zawsze bowiem będą potrzebne prototypy o wysokim stopniu szczegółowości i dużej interaktywności!
Dlaczego wybrać właśnie ten kurs?
- Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcje ze zdobytej wiedzy!
- Wiedza, która otrzymujesz w tym kursie, to nie tylko sucha teoria, ale równiez wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał.
- Uczysz sie na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.
Dla kogo jest ten kurs?
Z tego kursu skorzystają przede wszystkim osoby, które zaczynają prace zawodowa w obszarze projektowania UX lub chcą się przebranżowić z innych specjalizacji. Jeżeli jesteś osoba zupełnie zielona w temacie projektowania User Experience, sięgnij w pierwszej kolejności po kurs Wprowadzenie do UX. Dzięki temu poznasz podstawowe pojęcia. Z tego kursu skorzystają przede wszystkim: projektanci, którzy chcą poznać inne podejście do wytwarzania produktów cyfrowych; osoby zainteresowane praca w obszarach UX, architektury informacji czy projektowania interfejsów; osoby, które planują przebranżowić się na stanowisko UX albo UI designera; graficy, którzy chcą rozwinąć swoje kompetencje w procesie projektowym.
Teraz chciałabym pomówić trochę o modelach nawigacji, ponieważ one
są ściśle związane z tymi sposobami organizacji treści, o których
mówiliśmy w poprzednich lekcjach. I one będą miały bardzo duży
wpływ na to, jak wygląda strona internetowa w ogóle, jak to się będzie przekładało
wszystko na UI, jak projektanci graficzni później będą rozkładać te treści
na swoich projektach. Takim najpopularniejszym modelem nawigacji
jest model hierarchiczny. Jeżeli wejdziemy sobie na jakąkolwiek
stronę internetową, to jest duża szansa, że właśnie trafimy na ten
model hierarchiczny. Mamy wtedy jakąś stronę główną, na której są jakieś
podstrony i w tych podstronach znajdują się kolejne treści. Przed chwilą przy
okazji nawigacji rozmawialiśmy również o tych
przykładach sklepów internetowych, między innymi x-koma, i tam nic
innego jest jak właśnie model hierarchiczny, który kieruje
nas do głównej strony przez jakąś nawigację główną. Te zakładki rozwijają
się jeszcze na kolejne i kolejne. Iw każdej kolejnej możemy jeszcze więcej zagnieżdżeń
znaleźć. Mówiąc o modelach hierarchicznych, możemy mówić o dwóch typach
tych modeli. To może być model głęboki albo
szeroki. W przypadku modelu głębokiego mamy właśnie
tę sytuację, w której jest kilka podstron i każda z tych podstron
ma jeszcze kilka podstron. I jeszcze kilka podstron - i wchodzimy. I gdybyśmy
rozrysowali sobie to w formie takiego drzewka naszej struktury, to
to byłyby po prostu takie bardzo długie ciągi kolejnych
zakładek, które znajdują się w kolejnych zakładkach i one są po prostu bardzo zakopane. Jeżeli
mówimy o modelu szerokim, mówimy wtedy o dużej ilości zakładek (na
przykład właśnie w tej nawigacji globalne)j i kilku podstronach, które
mogą ewentualnie znaleźć się pod spodem. Taki model hierarchiczny jest
dobrym punktem wyjścia i bardzo często właśnie od niego będziemy startować, projektując
nawigację na stronie internetowej. Kolejny
model, o którym chciałabym powiedzieć, to model płaski. On jest teraz całkiem
popularny, ponieważ bardzo popularne stało się projektowanie stron
tak zwanych one page, które możemy scrollować
i tak naprawdę, przechodząc między zakładkami, które znajdują się na
przykład w jakiejś nawigacji u góry strony, tak naprawdę scrollujemy tylko treść,
która znajduje się na jednej stronie. I wtedy mówimy właśnie o takim modelu jako
modelu płaskim, ponieważ tak naprawdę nie wchodzimy w żadne głębokie struktury. To
nie jest tak, że dana zakładka jest jakimś zgłębieniem kolejnej. Nie
budujemy w żaden sposób tej hierarchii. Tam wszystkie te zakładki, które
znajdują się na stronie, są tak samo ważne i znajdują się na tym samym poziomie. Kolejny
model to model sekwencyjny. O modelu sekwencyjnym wspominałam już przy okazji organizowania
treści w sposób zadaniowy. W momencie kiedy mamy do zaprojektowania
jakieś procesy, na przykład proces zamówienia produktu, rejestrację
w jakimś serwisie, bookowanie biletu lotniczego albo jesteśmy w sklepie
internetowym i chcemy po prostu przejść przez zamówienie, musimy przejść przez kolejne kroki,
musimy wypełnić formularze, musimy wybrać sposoby płatności, musimy dokonać
tej płatności. I w tym momencie musimy
zrobić to w bardzo określonej kolejności, w bardzo określony sposób. I tak
naprawdę to projektanci narzucają nam pewne ograniczenia: jak i co
kiedy możemy zrobić. Więc wybierając taką opcję modelu sekwencyjnego w
naszej nawigacji, musimy upewnić się, że na pewno nie uprzykrzymy tym
życia naszym użytkownikom. To znaczy właśnie w tych przypadkach kiedy projektujemy
jakiś proces, kiedy to wykonywanie zadań w bardzo określony
sposób jest konieczne, możemy go spokojnie zastosować. W innych przypadkach musimy
być bardzo ostrożni. Warto wspomnieć również o modelu bazodanowym. Ten
model, choć nazwa może na to nie wskazywać, jest bardzo popularny i z
pewnością nieraz się już z nim spotkaliście właśnie w sklepach internetowych. Jeżeli
pomyślimy, w jaki sposób wydzielone są informacje, w jaki
sposób podzielone są te treści, jak one wyglądają na różnych zakładkach, to
możemy określić pewne szablony tych treści, które
tam znajdziemy. Na przykład wspomniany wcześniej widok karty produktu. On
z reguły wygląda w taki sam sposób, ale informacje, które znajdują się w tej karcie,
są inne. Są inne zdjęcia, jest inna nazwa produktu, jest inna cena, są różne cechy
tych produktów. Natomiast układ tych treści i sposób, w jaki te treści
się zachowują na stronie, jest identyczny. I w momencie kiedy mamy
przykłady takich klastrów informacji, które gdzieś tam są
złożone w jeden model, które zawsze wyglądają w ten sam sposób, ale
wymieniają się tylko tymi informacjami, które znajdują się w środku, możemy
mówić o modelu bazodanowym. Kolejny model to model hipertekstowy. Jest
to bardzo ciekawy model z punktu widzenia architektury informacji, ponieważ jest
też bardzo trudnym modelem do utrzymania i stworzenia. Idealnym
przykładem modelu hipertekstowego jest Wikipedia. Jeżeli
zastanowimy się, w jaki sposób eksplorujemy stronę na Wikipedii, no
to możemy przypomnieć sobie, że generalnie strona składa
się w dużej mierze z przejść do kolejnych podstron, z linków, które znajdują
się w treści, które kierują nas do kolejnych struktur, do
kolejnych podstron, do kolejnych kategorii. I możemy tak wchodzić głębiej
i głębiej, ale ta struktura, w której się znajdujemy, to, w którym miejscu
w tej strukturze jesteśmy, jest tak naprawdę bardzo nieokreślone i prawdopodobnie
nie jesteśmy w stanie tego za bardzo określić jako użytkownicy. Twórcom może byłoby
trochę lepiej i łatwiej, natomiast ten
model jest bardzo rozproszony, bardzo wydawać by
się mogło - przypadkowy. I dobrym modelem hipertekstowym
jest taki model, który faktycznie w bardzo mądry i w prosty sposób potrafi
łączyć konkretne treści z konkretnymi zagadnieniami. W przypadku
takiego modelu hipertekstowego musimy upewnić się, że dobrze łączymy
te treści, że nie ma przypadków, w których użytkownik trafia właściwie
nie tam, gdzie chciał trafić, więc utrzymanie tego modelu jest
dosyć trudne i żmudne. I tak jak w przypadku Wikipedii na przykład opiera
się w gruncie rzeczy na pracy społeczności. Warto wspomnieć również o modelu
single-page, czyli taki model, w którym tak naprawdę tego modelu
nie ma. To znaczy jest jakaś jedna strona, w której znajduje się bardzo mało treści. Zazwyczaj jest to jakieś
jedno zadanie, jeden formularz do wypełnienia, na przykład wpisanie swojego
adresu e-mail i pobranie jakiegoś produktu czy zapisanie się na listę
mailingową. Takie strony również się robi. Z reguły mówimy o landing pagach
w tym przypadku. Więc ta struktura treści zazwyczaj jest
bardzo uproszczona, praktycznie jej nie ma. I tak
jak w przypadku organizacji treści, tak samo w przypadku nawigacji bardzo rzadko
jest tak, że mamy tylko jeden model na stronie. Z reguły
te modele mieszamy i w taki sposób możemy mieć model,
który jest hierarchią, który łączy jakieś cechy bazodanowe,
który jest na przykład hierarchią jakąś
głęboką - i który będzie miał jeszcze jakieś cechy poszczególnych
modeli. Więc tak naprawdę, dobierając odpowiedni model, musimy
zwrócić uwagę przede wszystkim na to, kto jest naszym użytkownikiem, po co wchodzi,
jak wchodzi, w jaki sposób wyszukuje treści na naszej stronie i jakie
ograniczenia mamy względem organizacji treści, które na tej stronie będą się znajdować. Czyli
zbieramy tak naprawdę te wszystkie informacje, które zdobyliśmy w poprzednich lekcjach,
informacje związane z etykietami, ze strukturą organizacji treści,
z wyszukiwaniem i właśnie z modelami nawigacji, i teraz próbujemy łączyć
to wszystko w całość, żeby stworzyć z tego jedną, spójną, zrozumiałą
dla użytkownika strukturę. Można by się było zastanowić, czym
jest tak naprawdę dobra nawigacja i co sprawia, że ta nawigacja
będzie faktycznie dla użytkownika w porządku,
a nie taka, że projektant sobie wymyślił, że jest okej i w sumie prawdopodobnie
użytkownik się w niej połapie. Nawigacja musi być zrozumiała. To znaczy musi
zawierać odpowiednie etykiety i to nazewnictwo, to
słownictwo, które się w tej nawigacji znajduje, jest kluczowe. Musi być optymalna. To
znaczy nie może utrudniać życia naszemu użytkownikowi, nie
może sprawiać, że ten użytkownik musi bardzo dużo
klikać, żeby dotrzeć do jakiejś informacji, musi przeładowywać co chwilę stronę. Raczej
staramy się, żeby to wszystko było w miarę wyciągnięte na wierzchu. Przynajmniej
tyle ile się da, ale też nie na tyle, żeby nie obciążać użytkownika poznawczo. Jest
informatywna. To znaczy daje nam informację zwrotną o tym, co czym
jest. To jest jak najbardziej powiązane z kwestią tego,
czy zrozumiała, czy jest łatwa do odczytania, czy jest
łatwa do zinterpretowania. Jest dopasowana do użytkownika. To
znaczy, projektując konkretny serwis, konkretny produkt, konkretną
aplikację my wiemy, kim są persony naszych użytkowników, rozumiemy
tych użytkowników, wiemy, po co przychodzą na naszą stronę - żeby odpowiednio
dopasować ją właśnie do nich. Jest zapamiętywalna. To znaczy
jeżeli użytkownik wróci po jakimś czasie na naszą stronę internetową, to
będzie wiedział, jak się po niej poruszać, ponieważ ta nawigacja będzie na tyle intuicyjna,
na tyle informatywna, na tyle zrozumiała, że on nie będzie musiał się po
raz kolejny uczyć, gdzie co jest, w jakim miejscu, bo to dla niego będzie po prostu
intuicyjne. I na koniec: musi być czytelna. Po prostu. Tutaj
jest duża rola przede wszystkim projektantów, z którymi będziemy pracować. Jeżeli
sami będziemy projektować naszą stronę internetową po pracy architektury
informacji, to musimy upewnić się, że nie przykryliśmy tych wszystkich atutów,
nad którymi pracowaliśmy w tej chwili, jakąś ciężką grafiką, jakimiś
niezrozumiałymi wzorcami projektowymi, tylko raczej robimy wszystko
w taki sposób, żeby wyciągnąć najważniejsze elementy na wierzch,
żeby wyciągnąć te teksty na wierzch, i żeby użytkownik wiedział, co ma dalej
z tym wszystkim zrobić. Okej, to by było na tyle, jeżeli chodzi o
obszary związane z architekturą informacji, a teraz przejdziemy do trochę bardziej
praktycznych zagadnień i zastanowimy się, w jaki sposób pracować nad dobrą architekturą
informacji, żeby to wszystko miało ręce i nogi.