UX: Etykiety typy i cechy
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.
Czas przejść do konkretów. Czyli przejdźmy sobie przez takie podstawowe
zagadnienia związane z architekturą informacji, żeby wiedzieć tak
naprawdę, czym będziemy się dokładnie zajmować, jakimi obszarami tej
architektury informacji będziemy się zajmować. I będą to etykiety, organizacja
informacji, wyszukiwanie i nawigacja. Także
zaczynamy od etykiet. Etykiety, język, nazewnictwo to
zagadnienia takiego najniższego poziomu, kiedy mówimy o architekturze informacji. To
najdrobniejsze elementy architektury, którymi będziemy się zajmować. I chodzi o nic
innego jak o pojedyncze słowa i krótkie frazy, z którymi mamy do
czynienia na naszych stronach internetowych. Naszą rolą jest upewnić
się, czy użytkownik wie, co klika, czy rozumie poszczególne elementy,
które znajdzie na stronie internetowej i czy wie, czego
może spodziewać się dalej. Etykiety to takie fragmenty treści,
to opisywanie fragmentów treści, które znajdują się na naszej stronie internetowej. Jeżeli
weźmiemy sobie jakiś formularz do wypełnienia danych, na przykład wspomnianej
rezerwacji hotelu, to przy każdym polu formularza mamy informację,
co w tym formularzu powinno się znaleźć. Czy to jest adres e-mail, czy to jest
imię, czy to jest nazwisko. To są właśnie etykiety pól formularza. O
etykietach mówimy również w kontekście nawigacji głównej naszej
strony internetowej. Czyli wszystkie zakładki, które będą znajdować się gdzieś tam u góry,
również będziemy nazywać etykietami. Wszelkiej maści nagłówki, które
pojawiają się przy dłuższych akapitach treści, te informacje, które znajdą się w
stopkach - to wszystko jest architekturą informacji i na to
wszystko musimy zwracać szczególną uwagę. Najważniejszą
rolą etykiet jest pokierowanie użytkownika po interfejsie. One są takim drogowskazem dla
użytkownika gdzie i w co, jak powinien klikać. Mówiąc
o etykietach, będziemy mówić o takich trzech rodzajach etykiet. I w
literaturze możecie spotkać się z określeniami: etykiety pierwszej generacji, etykiety
drugiej generacji i etykiety trzeciej generacji. Co to tak naprawdę oznacza? Na
stronach internetowych najczęściej mamy do czynienia z etykietami pierwszej generacji. To
te etykiety, które znajdują się najbliżej obiektu, który jest opisywany. Czyli
mamy pole formularza i zaraz nad polem formularza znajdziemy właśnie
podpis, że jest to adres e-mail; i to będzie właśnie przykład, idealny
przykład etykiety pierwszej generacji. Etykiety drugiej generacji natomiast bardzo
często będziemy spotykać w na przykład infografikach, które znajdują się na
stronach, ale również, które mogą być wydrukowane gdzieś na ulotce czy w gazecie. Etykiety
drugiej generacji z reguły są trochę odsunięte od obiektu opisywanego, ale
wciąż łączy je jakaś wizualna więź. Jest to jakaś linia,
strzałka, cokolwiek, co wskazuje dokładnie w element, o którym będziemy mówić. Natomiast
etykiety trzeciej generacji najczęściej spotkamy na przykład na mapach; kiedy
idziemy szlakiem turystycznym gdzieś w górach i spotykamy taką wielką tablicę
z informacjami gdzie i jak iść, z reguły gdzieś na dole
znajduje się legenda, klucz kolorystyczny, alfanumeryczny, jakieś patterny i
wzory, które określają, czym jest dany obiekt na dużej mapie. To
właśnie są etykiety trzeciej generacji, czyli odsunięte od głównego obiektu. Gdzieś
trzeba ich szukać i cały czas porównywać legendę razem
z tymi obiektami, którą ta legenda opisuje. I jak możecie
się domyślać, takie rozwiązanie nie jest zbyt wygodne, zwłaszcza jeżeli mówimy o stronach
internetowych i aplikacjach mobilnych, dlatego jeżeli projektujemy naszą architekturę informacji,
jeżeli zajmujemy się etykietami, to upewnijmy się, że raczej staramy
się stosować te etykiety pierwszej generacji, drugiej generacji, a te trzecie zostawmy
na jakieś bardzo wyjątkowe sytuacje. Mówiąc o etykietach, chcielibyśmy
wiedzieć, jakie właściwie te etykiety powinny być, żeby były dobrymi
etykietami, dobrze zaprojektowanymi etykietami. Przejdźmy sobie przez kilka
takich cech, o których warto powiedzieć i zastanówmy się na przykładach, co
tak naprawdę sprawia, że te etykiety są lepsze od innych. Pierwszą cechą,
która mówi o tym, że etykieta jest dobrze zrobiona, to to, że
jest zrozumiała dla użytkownika. No i jakby jest
to dosyć jasne określenie. To znaczy - coś musi być zrozumiałe. Ale jeżeli myślimy jako
projektanci, że będziemy mieć do czynienia z bardzo różnymi osobami, to
rzecz zaczyna się robić trochę bardziej skomplikowana. No bo co innego będzie
zrozumiałego dla specjalisty, dla osoby, która zawodowo zajmuje
się jakimś tematem na co dzień, a zupełnie co innego zrozumiałego będzie dla amatora
i osoby, która tak naprawdę nie do końca wie jeszcze, czego szuka. Zerknijcie
na przykład tego sklepu online. To jest sklep ogrodniczy,
tutaj mamy rozwiniętą kategorię "rośliny ogrodowe". Jeżeli
zerkniecie sobie na te wszystkie teksty, które znajdują się w tym menu,
to zobaczycie, że zostały wyróżnione pewne nagłówki. Są
jakieś byliny i trawy, są drzewa i krzewy liściaste. Mamy też rododendrony,
azalie, wrzosowate, choinki, rośliny jagodowe i owocujące. A
jak zerkniecie jeszcze na te teksty, które znajdują się poniżej, to zobaczycie, że są tam
jakieś nazwy, ale oprócz tych nazw takich zwyczajowych, które
być może nawet kojarzycie nawet jeżeli nie interesujecie się na co dzień ogrodnictwem,
to możecie kojarzyć na przykład buki i bukszpany.
Natomiast w nawiasach znalazły się również nazwy łacińskie. No
i teraz jakbyśmy się mieli zastanowić, do kogo skierowana została ta architektura
informacji, dla kogo została zaprojektowana ta nawigacja
i jak nazwane zostały te etykiety, to możemy spodziewać się, że
są to raczej osoby, które już z ogrodnictwem miały do czynienia. Jeżeli będą szukać
informacji, to prawdopodobnie te nazwy łacińskie również im w czymś
pomogą. Jeżeli weszłaby na tą stronę osoba, która zupełnie
nie zna się na ogrodnictwie i chce po prostu kupić jakieś ładne krzaczki do ogrodu, no
to dla amatora, dla nowicjusza, osoby, która nie interesuje się na co
dzień ogrodnictwem, takie rozwiązanie może być zbyt skomplikowane. Dlatego zerknijcie
na przykład drugi. To też jest jakiś sklep ogrodniczy, ale
jeżeli zerkniecie na nagłówki, na te etykiety, które znalazły się w nawigacji, to
zobaczycie, że tutaj rozwiązane to zostało w zupełnie inny sposób. To
znaczy mamy nasiona, ale mamy nasiona warzyw, nasiona owoców, nasiona
kwiatów, nasiona ziół. Jakkolwiek nie interesujemy się ogrodnictwem, jesteśmy
w stanie prawdopodobnie zidentyfikować czym różnią się warzywa od
owoców i kwiatów, i ziół. Obok mamy jakąś
ziemię ogrodową i to też jest podzielone w taki dosyć jasny sposób. Toznaczy jest ziemia do kaktusów,
jest ziemia do kwiatów, jest do warzyw, jest do jakichś iglaków. Ale
zobaczcie, że są tutaj również etykiety, które mówią wprost, że są nasiona dla
dzieci, są nasiona ekologiczne, jest uprawa cebuli i są
również miniogródki w pojemnikach czy kiełki. Czyli takie
rozwiązania, które prawdopodobnie mogą zainteresować osoby, które nie są
superogrodnikami, nie mają swoich ogrodów, ale na przykład będą chciały rozwiązywać
pewne ogrodnicze problemy na swoich balkonach,
przy parapetach czy trzymać po prostu te wszystkie rośliny w kuchni. I w
takim przypadku, kiedy taka osoba, która na ogrodnictwie się nie zna, trafi
na taką stronę, jest tym większa szansa, że znajdzie to, czego szuka, nawet jeżeli
tak do końca jeszcze nie wie czego szuka. Więc myśląc o etykietach, które są zrozumiałe
myślmy o tych użytkownikach, którzy za zrozumiałe mają
je uważać. Kolejna cecha, o której musimy powiedzieć, to jednoznaczność. To
znaczy nasze etykiety muszą być jednoznaczne i musimy wyeliminować
jak największą ilość interpretacji, które
może użytkownik znaleźć w takiej etykiecie. To bardzo częsty problem wszelkiej
maści przycisków i komunikatów błędów. Myślę, że każdy z nas w którymś
momencie surfowania po sieci trafił na przykład komunikatu,
który nie do końca tłumaczył, co mamy zrobić albo przyciski były nazwane w taki sposób,
że nie do końca wiedzieliśmy, czy mamy kliknąć jedną, czy drugą opcję,
żeby osiągnąć efekt, o który nam chodziło. I tutaj również jeżeli zerkniemy na
slajd, to zobaczymy, że mamy przykłady gdzie te etykiety faktycznie
są jednoznaczne. To znaczy jeżeli mam dwa przyciski; jeden to jest "załóż
konto", a drugi to jest "zaloguj", to ja wiem, że jest różnica między tymi
dwoma przyciskami. Że jeżeli kliknę w jeden to stanie się to, jeżeli kliknę
w ten drugi, to stanie się zupełnie inna rzecz. Przykład również z popularnego playera
Spotify. Tutaj przycisk jest dużo dłuższy, ale dosyć jasno tłumaczy
mi, co tak naprawdę się stanie. "Korzystaj ze Spotify za darmo". Jeżeli kliknę w
ten przycisk, to prawdopodobnie będę mogła korzystać z tego produktu za darmo. Ale
po prawej stronie możecie zobaczyć też trochę inny przykład okienka,
które tak naprawdę niewiele nam mówi, bo mamy propozycję,
że możemy anulować wybór i jako opcje
do kliknięcia mamy opcje: "anuluj" bądź "anuluj wybór". No i teraz możemy się zastanowić
czy "anuluj", czy "anuluj wybór" będzie właściwą opcją. I oczywiście jeżeli dłużej
się zastanowimy, to ta opcja, którą powinniśmy wybrać, będzie dla nas jasna. Ale
musimy pamiętać o tym, że użytkownicy nie za bardzo chcą spędzać czas, zastanawiając
się, co tak naprawdę powinni zrobić na stronie. Zwłaszcza kiedy się śpieszą, zwłaszcza
kiedy się bardzo denerwują. Musimy mieć na uwadze to, że tak naprawdę
im zależy na tym, żeby ten czas oszczędzać i oni nie chcą zastanawiać
się, wybierać, analizować i czytać po piętnaście razy treści, które im
serwujemy. Pamiętajmy również o tym, żeby
nie przesadzić z kreatywnością. Wiem, że to zaboli wielu projektantów, graficznych
projektantów UI. No bo chcemy robić jak najciekawsze, jak najbarwniejsze i najbardziej
oryginalne rzeczy jakie tylko można zrobić, ale w przypadku treści
to jest trochę ciężki temat, bo z jednej strony możemy
mocno popłynąć i nazwać bardzo poetycko nasze zakładki w nawigacji,
ale nic nam po tych pięknie brzmiących zakładkach jeżeli użytkownik, wchodząc
na taką stronę, tak naprawdę nie wie, w co ma kliknąć. Bo on nie do końca rozumie,
o co projektantowi chodziło, o co chodzi na tej stronie. I może się okazać,
że zamiast eksplorować noszą pięknie zaprojektowaną stronę, po prostu
wyjdzie z niej, poszuka tych informacji, których szukał, gdzieś indziej. Etykiety
powinny być też w miarę krótkie. Okej, nie ma co przesadzać. Jeżeli
mamy wybrać między krótką etykietą a zrozumiałą etykietą, to oczywiście
zawsze będziemy wybierać tą zrozumiałą, więc nie możemy popadać w skrajności.
Ale też ustrzegajcie się tego, żeby nie wypisywać bardzo długich
fraz, bardzo długich komunikatów, kiedy one faktycznie nie są potrzebne. Czasami
możemy stosować pewne skróty myślowe pod warunkiem, że mamy pewność, że nie zostaną w nieodpowiedni
sposób odebrane. Idealnym przykładem są wszelkiej maści formularze na stronach. Bardzo
często te etykiety, które znajdują się przy formularzach, mają dosyć bogate
dopiski. Na przykładzie, który widzicie na slajdzie, mamy stary
interfejs Amazona i tutaj zobaczycie, że chociażby
zwykła etykieta, która mówi
o tym, że trzeba wpisać imię czy nazwisko, wydłużyła się do "my name is...", "my
e-mail address is", "type it again". Więc można by było to skrócić
do pojedynczych słów i, tak jak zobaczycie na tym przykładzie obok, faktycznie
dało się to zrobić i Amazon poszedł w tę stronę. Po pierwsze szybciej
czytamy, nie musimy się dłużej zastanawiać, co tak naprawdę tam mamy do wpisania. Po
drugie zdecydowanie widać różnicę w jakości tego interfejsu. On
jest czystszy, on jest bardziej przejrzysty, on jest bardziej czytelny. A to oznacza, że
użytkownik szybciej i łatwiej odczyta informacje, które się tam znalazły. Kolejna
rzecz, na którą powinniśmy zwrócić uwagę, mówiąc o etykietach, to spójność. Spójność
jest w ogóle bardzo ważnym elementem projektu stron internetowych i aplikacji. Spójny
powinien być interfejs pod kątem graficznym. Spójne powinny być funkcje i sposób,
w jaki działa ten interfejs. Ale również spójne powinno być słownictwo,
które w tym i w tym interfejsie się znajduje. Jeżeli wszędzie używamy frazy "załóż
konto", "załóż konto", "załóż konto", to jeżeli nagle będziemy mówić o
rejestracji albo tym, żeby się zarejestrować, to może to wprowadzić niepotrzebny
bałagan i może wprowadzić taką niepewność, czy to na
pewno jest ta sama opcja. Jeżeli mamy koszyk w sklepie internetowym, to
zawsze nazywajmy go koszykiem. Jeżeli mamy funkcje, które działają w podobny sposób, nazywajmy
je tak samo. Jeżeli zawsze stosujemy jakiś tryb rozkazujący
albo bardzo formalny język, to jeżeli nagle przełamiemy tę spójność,
nagle zaczniemy stosować zupełnie inny język, mniej formalny,
bardziej na luzie, to jest ryzyko, że użytkownik po prostu trochę
się w tym pogubi i nie do końca będzie rozumi,ał co tak naprawdę się dzieje na tym ekranie. Kolejnym
ważnym i ostatnim w sumie takim zagadnieniem, jeżeli chodzi o etykiety, jest
stosowanie ikon, obrazów. No bo aż prosi się czasami, żeby wrzucić
do tego naszego interfejsu, gdzieś do przycisku, jakąś ikonkę. A czasami rezygnujemy
z tekstów na rzecz ikonek, bo zajmują mniej miejsca, bo są bardziej estetyczne
niż na przykład pisany tekst. I oczywiście nie ma w tym nic złego, możemy
stosować ikony, możemy łączyć się z etykietami, czasami możemy pozwolić sobie na
to, żeby tą etykietę zastąpić ikoną, ale musimy pamiętać o jednym:
obrazy są interpretowane w bardzo różny sposób i to, w jaki sposób rozumiemy
pewne ikony, w jaki sposób rozumiemy pewne obrazy, będzie zależało na przykład
od naszych doświadczeń, od tego, w jaki sposób się
wykształciliśmy, jak się uczyliśmy, kto nas
wychowywał, w jakiej części świata dorastaliśmy, co lubimy i nawet jaki
mamy nastrój. Więc z ikonami trzeba uważać i
raczej sugeruję zawsze, żeby te ikony łączyć z tekstem,
bo wtedy unikamy tej sytuacji, kiedy pojawia się
niepewność, czy ta ikona oznacza to, czy tamto. I po prostu mamy podpis
pod tą ikoną, który jasno mówi, że tak zróbcie, to kliknijcie,
w to tutaj możesz się zapisać, tutaj możesz założyć konto, tutaj możesz skorzystać z
wyszukiwarki. Upraszczamy w ten sposób komunikację i mamy pewność,
że obraz zostanie zawsze odczytany w ten sposób, w jaki sobie tego życzymy.