Trzeci kurs, który zrobiłam na drodze do zmiany mojego dotychczasowego zawodu, był dla mnie nie tylko lekcją „jueksu”, ale również lekcją życia. Dawno nie zmagałam się tak mocno z moim wewnętrznym demonem lubującym się w komforcie. To on zwykle mi podpowiadał, że jeśli coś jest trudne i wiąże się z wysiłkiem, to lepiej odpuścić i wziąć się za to, co przychodzi mi łatwo. Choć nie zawsze sprowadzało mnie to na manowce, bo udawało się mieć „dryg” do niektórych spraw, to zdecydowałam się tym razem tego zwiększonego wysiłku nie unikać i przekonać się, gdzie mnie to zaprowadzi. Co się okazało? Po pierwsze: nie taki diabeł straszny. A konkretnie wysiłek. Najciężej zacząć, a potem już z górki. Pewnie wiesz, co mam na myśli. Po drugie: dyskomfort jest elementem rozwoju. Gdy patrzę na niego w ten sposób, zamiast traktować go jako sygnalizator, że coś nie jest dla mnie, to jakoś przychodzi więcej radości z tego, że „jest trudno”. Cóż. Po prostu niektóre rzeczy są trudniejsze od innych. Nawet, gdy ma się do nich dryg. Ale jak już się załapie, to jest wtedy naprawdę miło.

Co było dla mnie największym wyzwaniem? Okazało się, że moim „przeciwnikiem” były szkielety projektu (wireframe’y). Nie wiedziałam do końca, jak się za nie zabrać. Ogólne zasady były dla mnie jasne. Nie byłam jednak pewna, co dokładnie na poszczególnych „ekranach” pokazać. Jak będzie najlepiej? Jak to robią w branży? Chciałam, żeby było na tip top. Później przypomniałam sobie, że „Ej, to jest etap w tworzeniu produktu. Dość wczesny. Nie tworzysz tutaj rzeczy, które mają być „skończone” i idealne. „Rysujesz” różne wersje projektu. Ale to ostatecznie „juser” ci powie, co dobrze spełnia zadanie, a co nie do końca”. Gdy zrozumiałam, że mogę sobie pozwolić na błędy, nabrałam większej odwagi do działania. Dla mnie to było przełomowe. Nobel dla Katarzyny Adamkiewicz-Karmińskiej!

Ok. Możemy teraz przejść do meritum. Witaj w moich kolejnych notatkach! Niewątpliwe obszernych. Standardowo zaczynam od rozpiski tego, co znajdziesz w moim tekście.

? Spis treści:

• Tydzień 1: Storyboardy i szkielety projektu
  • Wykorzystywanie researchu do tworzenia pomysłów
  • Zarys ścieżki przepływu użytkownika
  • Zdefiniowanie celu produktu
  • Tworzenie storyboardów
  • Tworzenie szkieletów projektu
• Tydzień 2: Tworzenie papierowych i cyfrowych szkieletów projektu (wireframes)
  • Zrozumienie architektury informacji
  • Tworzenie papierowych szkieletów projektu
  • Tworzenie cyfrowych szkieletów projektu
  • Wykorzystywanie zasad Gestalt w tworzeniu szkieletów projektu
• Tydzień 3: Tworzenie prototypów low-fidelity
  • Tworzenie prototypów low-fidelity na papierze
  • Tworzenie cyfrowych prototypów low-fidelity
  • Zrozumienie projektowania etycznego i włączającego

Tydzień 1: Storyboardy i szkielety projektu

Zanim przeszłam do tych całych „łajerfrejmów”, o których pisałam tobie powyżej, Google zaproponował powtórkę wiedzy zdobytej w drugim kursie (więcej przydatnych informacji znajdziesz w moich notatkach). Powrót do tych informacji jest niezbędny. Wszystko, co stworzyłam do tej pory, będzie wykorzystywane podczas kolejnych etapów projektowania produktu.

Wykorzystywanie researchu do tworzenia pomysłów

"All designers have assumptions about users and what they think is important or challenging for those users. Often, these assumptions are based on the designer’s own needs and experiences.  But, to come up with ideas for designs that meet users’ specific needs, your designs must be based on insights from actual user research, not assumptions". 

Za korzystaniem z założeń zamiast z faktów stoi ten sam demon, o którym pisałam we wstępie. To ten, co nie lubi wysiłku. ? Choć z pewnością o wiele łatwiej jest korzystać z tego, co się komuś wydaje – bo to ma już w swojej głowie – to zdecydowanie efektywniejsze jest używanie rzeczywistych informacji na temat odbiorców danego produktu. Rolą projektanta UX jest rozumienie bolączek użytkowników i tworzenie projektów, które rozwiązują te problemy.

Jaką rolę pełnią rzeczy, które do tej pory stworzyłam w ramach kursu? Mapy empatii pomagają zrozumieć myśli i uczucia użytkowników w danej sytuacji. Persony przypominają, dla kogo się projektuje – jakie są cele oraz potrzeby tych osób. Historia użytkownika (user story) przedstawia go oraz wskazuje przeszkodę i określa jego ostateczny cel. Pogłębiasz w ten sposób zrozumienie grupy docelowej. Gdy posiadasz wiele potrzeb, które powinieneś wziąć pod uwagę, historie użytkowników określają, które z nich są najważniejsze do rozwiązania. Na koniec mapy podróży użytkownika, które opierają się na utworzonych już personach i historiach użytkowników. Dzięki nim jesteś w stanie wpaść na pomysły, które naprawdę wspierają potrzeby użytkowników i redukują ich problemy. To wszystko razem pomaga stworzyć jasny opis problemu lub potrzeb użytkowników, na który powinien odpowiadać dany projekt.

Poniżej pełna lista rzeczy, w jakie warto się zaopatrzyć, gdy zacznie się tworzyć konkretne rozwiązania projektowe:

• Mapy empatii (Empathy maps): odkrywają cztery główne motywacje użytkownika, czyli co ktoś mówi, myśli, robi i czuje. Informacje zebrane w mapach empatii pomagają wymyślić rozwiązania, które odpowiadają na rzeczywiste problemy użytkownika.
• Persony (Personas): dzięki nim użytkownik umieszczony jest w centrum uwagi projektanta. Tworząc szczegółowe persony, możesz jasno wyobrazić sobie potencjalnych użytkowników, dla których będziesz projektować.
• Historie użytkowników (User stories): determinują, które potrzeby użytkowników są najbardziej krytyczne i tym samym priorytetowe do zaadresowania.
• Mapy podróży użytkownika (User journey maps): Pomagają zrozumieć, z czym zmaga się użytkownik i tym samych wpaść na rozwiązanie, które naprawdę będzie wspierające.
• Zdefiniowany problem (Problem statement): stanowi jasny opis potrzeby użytkownika, którą należy zaspokoić.

W ramach uzupełnienia swojej wiedzy na temat tego, jak istotne jest włączenie researchu do procesu tworzenia pomysłów, Google proponuje artykuł od Nielsen Norman Group: Ideation for everyday design challenges.

Zdefiniowanie celu produktu

Gdy jesteś już zaopatrzony we wszystkie niezbędne informacje na temat użytkownika, wchodzisz jeszcze głębiej w określenie tego, dokąd zmierzasz. Żeby koncentrować się tylko na tym, co jest naprawdę ważne, definiujesz cel produktu. Oto definicja od Google:

Zdefiniowany cel produktu: Jedno do dwóch zdań, które opisują produkt i jego korzyści dla użytkownika.

Powyższe reprezentuje idealne rozwiązanie dla danego wyzwania projektowego. Zdefiniowany cel produktu mówi:

• Co produkt pozwala użytkownikowi zrobić?
• Na kogo wpływa akcja?
• Dlaczego akcja wpływa pozytywnie na użytkownika?
• Jak jest mierzona efektywność produktu?

Podobnie, jak w przypadku definiowania problemu, tutaj również Google proponuje formułę:

Nasz [produkt (co)] pozwoli użytkownikom [wykonanie określonej czynności (co)], co wpłynie na [opisz, na kogo wpłynie akcja (kto)] poprzez [opisz pozytywny wpływ (dlaczego)]. Będziemy mierzyć efektywność poprzez [opisz, jak będziesz mierzyć wpływ].

Jak zdefiniować cel produktu?

• Krok 1: Wróć do wcześniej zdefiniowanego problemu:
  • Odpowiedzi na „kto”, „co” oraz „dlaczego” znajdziesz w dotychczas zgromadzonych materiałach. „Kto” można wyciągnąć z opisu persony. „Co” z historii użytkownika. „Dlaczego” dostępne jest w mapie empatii oraz mapie podróży użytkownika.
• Krok 2: Przejdź od zdefiniowanego problemu do zdefiniowanego celu:
  • Może to być pojedynczy, konkretny cel lub większy pomysł, który wybrałeś jako główny punkt swojego projektu.
  • Zdefiniowany cel musi odnosić się do zdefiniowanego problemu.

Poniżej znajdziesz konkretne pięć kroków, jakie proponuje Google podczas definiowania celu:

1. Zacznij od produktu. To może być aplikacja, jakiś fizyczny obiekt lub cokolwiek innego. 
2. Opisz konkretną akcję, jaką może dokonać użytkownik dzięki produktowi.
3. Napisz, na kogo wpłynie dokonanie tej akcji. To może być po prostu użytkownik.
4. Opisz, jaki to będzie miało pozytywny wpływ na użytkownika.
5. Wyjaśnij, w jaki sposób będziesz mierzyć efektywność.

Zarys ścieżki przepływu użytkownika

W jaki sposób możesz przewidywać potrzeby użytkownika podczas interakcji z twoim produktem? Do zobrazowania tego posłuży tobie ścieżka przepływu użytkownika.

Ścieżka przepływu użytkownika (user flow): to ścieżka, którą podąża typowy użytkownik w aplikacji lub stronie internetowej, aby mógł wykonać zadanie od początku do końca.

Google zaleca, żeby przed zaprojektowaniem ekranów aplikacji, zrozumieć jak użytkownik może efektywnie się po niej poruszać. Żeby to zrobić, należy określić:

• Jakich akcji dokona w aplikacji?
• Jakie decyzje będzie musiał podjąć?
• Jakie ekrany zobaczy po dokonaniu akcji lub podjęciu decyzji?

Projektanci UX często przedstawiają ścieżki przepływu użytkowników za pomocą konkretnych kształtów: kół, prostokątów, rombów oraz linii ze strzałkami. Każdy z nich reprezentuje interakcję użytkownika z produktem. Przypisanie każdej interakcji do innego kształtu sprawia, że ścieżka przepływu użytkownika jest przejrzysta dla każdego członka zespołu zaangażowanego w tworzenie produktu.

Oto opis poszczególnych akcji i przypisanych im kształtom:

? Akcja (Action): Działania podejmowane przez użytkowników podczas poruszania się po projekcie produktu są reprezentowane jako koła. Pokazują one kroki, które należy wykonać, aby ukończyć zadanie od początku do końca.

? Ekran (Screen): Ekrany produktu cyfrowego, które będą widzieć użytkownicy podczas podczas wykonywania działań, są reprezentowane przez prostokąty.

? Decyzja (Decision): Romby reprezentują punkty na ścieżce przepływu użytkownika, w których użytkownik musi zadać pytanie i podjąć decyzję. Decyzja przesunie go do przodu albo cofnie do wcześniejszego etapu na ścieżce przepływu.

〰️ Kierunek (Direction): Linie ze strzałkami łączą wszystkie kształty i pokazują przepływ informacji. Linie ciągłe wskazują kierunek do przodu, a linie kropkowane wskazują kierunek wstecz lub powrót do poprzedniej strony.

Google wymienia trzy kroki, jakie należy wykonać, żeby stworzyć ścieżkę przepływu użytkownika:

Krok 1: Wybierz zadanie użytkownika, które będzie wykonywał w ramach ścieżki przepływu. Może to być na przykład umówienie wizyty do lekarza.
Krok 2: Wypisz na liście poszczególne kroki, jakie musi wykonać użytkownik, żeby wykonać w całości to zadanie.
Krok 3: Zobrazuj powyższe za pomocą opisywanych wcześniej kształtów i stwórz w ten sposób ścieżkę przepływu użytkownika.

Powyżej znajdziesz mój projekt ścieżki przepływu użytkownika, który przygotowałam dla celu: Zaplanowanie z góry swojej wizyty w galerii. Jeśli masz do tego uwagi, będę za nie bardzo wdzięczna. To moja pierwsza ścieżka i chętnie się dowiem, jak mogłabym ją uprościć. ?

Tworzenie storyboardów

Kiedy będziesz prezentować swoje pomysły przed interesariuszami, możesz mierzyć się z wyzwaniem opowiedzenia o wszystkim wyłącznie za pomocą słów. Żeby stało się to łatwiejsze, a jednocześnie bardziej efektywne, warto sięgnąć po obrazy. W kolejnej lekcji Google wyjaśnia, czym są storyboardy:

Storyboard (scenorys): seria obrazów, które wizualnie opisują i odkrywają doświadczenie użytkownika z produktem.

Storyboard koncentruje się tylko na najważniejszych częściach doświadczenia użytkownika z produktem. Opowiada historię, która jest opowiadana za pomocą obrazu. Cztery kluczowe elementy storyboardu to postać, scena, fabuła i narracja.

? Postać (Character): Reprezentuje użytkownika i głównego bohatera historii.
? Scena (Scene): Pomaga wyobrazić sobie, w jakim środowisku znajduje się użytkownik.
? Fabuła (The plot): Opisuje korzyści lub rozwiązania, jakie dostarcza projekt.
?️ Narracja (The narrative): Opisuje potrzeby lub problemy użytkownika oraz sposób, w jaki projekt na to odpowiada.

Historię można opowiedzieć na dwa sposoby. W jednym koncentrujemy się bardziej na użytkowniku, w drugim to produkt gra pierwsze skrzypce. Oto jak Google omawia te dwa rodzaje storyboardów:

1. Big picture storyboard ➡️ koncentruje się na doświadczeniu użytkownika
   • Opisuje, jak użytkownicy będą korzystać z produktu w ciągu dnia.
   • Opowiada, w jaki sposób produkt będzie pomocny.
   • Koncentracja na jak (how) i dlaczego (why).
   • Uwzględnia i pokazuje emocje użytkownika.
2. Close-up storyboard ➡️ koncentruje się na produkcie
   • Skupia się na odpowiedzi na pytanie co (what).
   • Chodzi w nim mniej o emocje, jakich doświadcza użytkownik.
   • Koncentruje się na zaprezentowaniu praktycznych cech produktu.

Jak wybrać właściwy rodzaj tworzenia storyboardu? Zależy to od etapu procesu projektowego. Jeśli jest się na jego początku, wtedy pokazuje się ogólną ideę, którą chce się „zarazić” pozostałe osoby z zespołu. Google poleca, żeby w tym wypadku zdecydować się na big picture storyboard, dzięki któremu ty i twój zespół będziecie koncentrować się na użytkowniku i jego potrzebach. Po close-up storyboard możesz sięgnąć, gdy masz już ustalone wstępne kierunki projektowe. Dzięki temu możesz pracować nad ulepszeniem praktycznej strony swojego produktu.

Tworzenie big picture storyboard krok po kroku:

1. Zacznij od zdefiniowanego problemu (problem statement).
2. Następnie określ cel produktu (goal statement).
3. Zrób szablon – zarys pól storyboardu.
4. Stwórz scenariusz storyboardu. Zacznij od problemu i rozważ, co go rozwiąże.
5. Poświęć pojedyncze pole storyboardu tylko na jeden pomysł. Zwracaj uwagę na to, jak czuje się użytkownik i jak „popchnąć” historię do przodu.
6. Prezentuj bolączki użytkownika jakie pojawiają się w trakcie całego procesu.
7. W końcowym polu uwzględnij zrealizowany cel użytkownika lub jego wnioski.

Tworzenie close-up storyboard krok po kroku:

1. Kroki 1 do 4 są takie same, jak w przypadku big picture storyboard.
2. Pozostałe kroki różnią się tym, że głównym bohaterem nie jest użytkownik, tylko produkt.
3. Narysuj jeden pomysł w każdym „okienku” i pamiętaj o tym, że koncentrujesz się na produkcie. Zastanów się, jaką jego funkcję chcesz pokazać. Prezentujesz w storyboardzie ścieżkę przepływu użytkownika, który korzysta z produktu.
4. Każde akcja musi prowadzić do kolejnej, ale nie musisz być bardzo drobiazgowy i pokazywać wszystko, co wydarza się w danym procesie.

Poniżej storyboardy, które wykonałam w ramach ćwiczeń zaproponowanych w kursie od Google. Jeśli masz dla mnie wskazówki, co mogłabym poprawić, skomentuj wpis lub napisz na adres: kasia@digitaldigger.pl. Dzięki! ?

Tworzenie szkieletów projektu

Docieramy to mojego największego wyzwania w ramach trzeciego kursu od Google. Do wireframe’ów! ? Ale zanim o tym, Google wyjaśnia jeszcze, czym jest dokładność (fidelity) i jak to wpływa na projektowanie.

Fidelity (dokładność, wierność): W UX słowo „fidelity” oznacza, jak bardzo projekt odpowiada wyglądowi produktu końcowego.

Mamy dwa typy projektów:

1. Low fidelity:
   • Mniejszy poziom szczegółowości.
   • Mniej „dopieszczone”.
   • W skrócie nazywane „lo-fi”.
2. High fidelity:
   • Bardzo blisko odpowiada wyglądowi produktu końcowego.
   • Zdecydowanie bardziej „dopieszczone”.
   • W skrócie nazywane „hi-fi”.

Szkielet projektu (wireframe) to jeden z przykładów projektów low fidelity. Poniżej definicja z Angielsko-polskiego Słownika IA, UX, UI & SEO:

Szkielet projektu (wireframe): przedstawia podstawową strukturę strony – elementy interfejsu i ich układ, bez szczegółów związanych z grafiką i projektowaniem wizualnym.

Szkielet projektu składa się głównie z linii, kształtów i odrobiny tekstu. Po co go tworzyć? Google wskazuje na trzy uzasadnienia:

1. Określa podstawową strukturę strony.
2. Prezentuje funkcjonalność produktu.
3. Oszczędza czas i zasoby.

Można je tworzyć ręcznie lub za pośrednictwem cyfrowych narzędzi.

Good wireframes are organized and communicate information crearly.

Żeby ułatwić tworzenie szkieletów projektu, Google proponuje branżowe standardy, czyli popularne sposoby na przedstawienie funkcji na stronie:

➖ Dłuższy tekst reprezentowany jest przez horyzontalne linie. Krótkie nagłówki czy etykiety mogą być napisane, co uzupełni projekt o kontekst.
☒ Zdjęcia, obrazki i ilustracje przedstawiane są za pomocą prostokąta z dużym „iksem” w środku. Proste kształty, typu ikony, mogą być zobrazowane w swoim oryginalnym kształcie.
◻︎❍ Przyciski CTA pokazywane są przy użyciu prostokątów lub kół.

Dzięki szkieletom projektu interesariusze mogą łatwiej skoncentrować się na strukturze elementów i podjąć na tej podstawie decyzje. Projektantowi mogą pomóc we wczesnym wykryciu potencjalnych problemów.

Tydzień 2: Tworzenie papierowych i cyfrowych szkieletów projektu (wireframes)

Powyższe to było zaledwie wprowadzenie. Niedługo zacznie się konkretne działanie. Przed ćwiczeniami Google zaopatrzył mnie dodatkowo w najważniejsze wskazówki na temat architektury informacji.

Zrozumienie architektury informacji

Informacje, które będą zawarte w twoim projekcie, muszą być jasno zorganizowane i posortowane, aby użytkownicy mogli z powodzeniem korzystać z twojej aplikacji lub witryny. Ten proces organizowania informacji nazywa się architekturą informacji. Google podpowiada, żeby myśleć o architekturze informacji jak o mapie swojego produktu.

Architektura informacji (Information architecture, IA) organizuje treści na stronie w taki sposób, że użytkownik wie, gdzie się znajduje w danym momencie i gdzie są informacje, których szuka.

Tak, jak wszystko w UX, nie powinieneś sugerować się swoimi domysłami, ale oprzeć architekturę informacji na wielu różnych źródłach, typu badania z użytkownikami lub research dostępnych rozwiązań na rynku. Google podkreśla, że znajomość użytkowników, ich celów i zachowań jest kluczem do skutecznej IA.

Dlaczego architektura informacji jest tak istotna? Google wyjaśnia to na przykładzie jej zadań ⤵️

• Definiuje i organizuje ogólną strukturę strony lub aplikacji.
• Zapewnia ogólny widok produktu.
• Pomaga interesariuszom przejrzeć i ocenić projekt.
• Pomaga inżynierom zrozumieć, w jaki sposób zorganizować dane.
• Elastyczna architektura informacji pozwala na rozwój pomysłów i ich iterację wraz z projektem.

Architektura informacji składa się z trzech elementów:

1. Organizacja (Organization): Organizacja to sposób, w jaki różne informacje są połączone w produkcie.
2. Hierarchia (Hierarchy): Hierarchia jest często nazywana „strukturą drzewa” i polega na umieszczeniu większej kategorii na górze, a pozostałych, powiązanych z ogólną kategorią, poniżej.
3. Sekwencja (Sequence): Sekwencja umożliwia użytkownikom poruszanie się po aplikacji za pomocą określonych poleceń lub kroków.

Google wymienia dwie podstawowe zasady, których należy się trzymać podczas tworzenia IA (źródło):

• Musi być łatwa do zrozumienia i nawigacji.
• Musi być łatwo skalowana (czyli musi być łatwo dodać nowe funkcje po premierze aplikacji).

Projektant UX musi być zaznajomiony z ósemką podstawowych zasad tworzenia architektury informacji. Stworzone zostały przez Dana Browna (EightShapes), a ich rolą jest pomoc projektantom UX w zrozumieniu i podejmowaniu decyzji dotyczących ich produktów. Oto lista ośmiu zasad:

1. Zasada Przedmiotu (Object principle): Powinieneś postrzegać swoje treści jako „żywe” i jako coś, co zmienia się i rozwija w czasie.
2. Zasada Wyboru (Choice principle): Ludziom wydaje się, że potrzebują dużego wyboru, ale w rzeczywistości potrzebują ograniczenia w tym obszarze i dobrej organizacji tego, co mają do dyspozycji.
3. Zasada Ujawniania (Disclosure principle): Informacje nie powinny być niespodziewane lub niepotrzebne.
4. Zasada Wzorca (Exemplar principle): Ludzie dzielą rzeczy na kategorie i grupują różne elementy.
5. Zasada Drzwi Wejściowych (Front door principle): Użytkownicy zwykle trafiają na stronę główną z innej witryny.
6. Zasada Wielokrotnej Klasyfikacji (Multiple classification principle): Ludzie mają różne sposoby wyszukiwania informacji.
7. Zasada Ukierunkowanej Nawigacji (Focused navigation principle): Za sposobem projektowania menu nawigacji musi kryć się strategia i logika.
8. Zasada Wzrostu (Growth principle): Ilość treści w projekcie będzie rosła z czasem.

Wiedzę na ten temat możesz dodatkowo poszerzyć w tym artykule ? article on the eight principles of IA.

The name should indicate its purpose rather than its location.
[link]

Zasady architektury informacji do tworzenia świetnej mapy witryny

Ostatnim krokiem w procesie architektury informacji jest mapowanie witryny (site mapping). Witryna internetowa lub aplikacja powinna być zmapowana w sposób hierarchiczny. To hierarchiczne połączenie między treściami jest często określane w świecie UX jako połączenie „rodzic/dziecko”.

Poniżej Google wyjaśnia, jak jest zorganizowana mapa witryny dla aplikacji internetowej:

1. Strona główna, ekran główny lub punkt startowy (Homepage, homescreen, starting point):
   Strona główna jest zwykle punktem, od którego zaczyna użytkownik. „Rodzicem” może być na przykład strona powitalna, a „dzieckiem” logowanie nowego lub powracającego użytkownika.
2. Inne odpowiednie ekrany (Other relevant screens): Pozostałe strony będą zawierać inne związki rodzic/dziecko w aplikacji. Przykładem tego może być sytuacja, gdy użytkownik odwiedza ekran rodzica Ustawienia, a poniżej znajduje połączenia z „dziećmi”, typu Profil, Bezpieczeństwo, Pomoc czy Prywatność.

W przypadku aplikacji mobilnej, struktura wygląda podobnie. Tam również potrzebujesz punkt wejścia do aplikacji z wysokiego poziomu. W środku znajdzie się jednak o wiele mniej kategorii, niż w witrynie internetowej. Oto kilka typowych kategorii wysokiego poziomu, które mogą być zawarte w aplikacji:

1. Strona główna, Funkcje produktu, Ustawienia użytkownika, Cennik, Kontakt, Pomoc.
2. Wszystko poniżej to tak zwane połączenia z „dziećmi”. Dla przykładu Imię, E-mail, Opcje płatności będą się znajdować poniżej kategorii Ustawienia użytkownika.

Ponieważ ekrany w aplikacji są mniejsze, powinieneś wziąć pod uwagę poniższe kwestie:

• Przemyśleć sposoby na wyeksponowanie najistotniejszych treści.
• Rozważyć, jaki rozmiar i odległości od siebie powinny mieć rzeczy, w które da się kliknąć.
• Zastanowić się, jaka wielkość tekstu będzie wystarczająco duża i czytelna.

Na koniec Google przypomina, żeby dobrze znać cel aplikacji oraz swoich użytkowników, co pomoże stworzyć odpowiednią strukturę skoncentrowaną na tym, co naprawdę ma znaczenie.

W ramach bonusu kilka linków do artykułów polecanych przez Google:

• The six key patterns that are frequently used to think through information architecture in mobile apps.
• Accessibility: Guidelines for Information Architecture, UX Design, and Visual Design
• World IA Day 2019 — accessibility tips for Information Architects.
• Psychological principles.
• Information architecture: Basics for designers.
• The beginners guide to information architecture in UX.
• An excellent beginner’s guide to information architecture.
• 5 examples of effective information architecture.

Tworzenie papierowych szkieletów projektu

To właśnie one, papierowe wireframe’y, były czymś, za co trudniej było mi się zabrać. Nie chodziło o kwestię ręcznego rysowania. To raczej „klątwa braku wiedzy”. Miałam opór przed spontanicznym działaniem, bez bycia zaopatrzoną w odpowiedni komplet informacji. Myślę, że w jakimś stopniu były one istotne, dlatego zdecydowałam się na ponowny „risercz” i dzięki temu dałam radę ruszyć z miejsca.

Dlaczego Google zachęca, żeby tworzyć papierowe szkielety projektu?

• Są szybkie i tanie.
• Nie muszą być perfekcyjne, więc można rozrysować wiele pomysłów.
• Pomagają się skupić na najlepszych elementach narysowanego projektu.

W ramach ćwiczenia zaproponowanego przez Google miałam wziąć na tapet stronę główną aplikacji. Na kartcę papieru rysowałam sześć ekranów. Pięć z nich należało „wypełnić” różnymi pomysłami na wygląd strony głównej. Narysowanie jednego ekranu nie mogło zajmować dłużej, niż dwie minuty. Po zakończeniu szkicowania wybierałam z każdego ekranu elementy, które moim zdaniem są w danym projekcie najlepsze. Na koniec „sklejałam” to w całość – elementy umieszczałam na szóstym ekranie, który obrazował finalną wersję szkieletu projektu.

Tak wyglądają przykładowe wireframe’y wykonane przez prowadzącą kurs:

Tworzenie cyfrowych szkieletów projektu

Z cyfrowymi wireframe’ami już nie było takiego problemu. Absolutnie zakochałam się w intuicyjności i przydatności Figmy – bo to w niej miałam przygotować projekt.

Google poleca trzy kroki, zanim przejdzie się do tworzenia cyfrowych szkieletów projektu. Jeśli na poniższe pytania odpowiesz „tak”, możesz zacząć działać z wireframe’ami w Figmie:

1. Czy moje papierowe szkielety projektu są kompletne?
2. Czy uzyskałem do nich feedback?
3. Czy jestem gotowy, żeby rozważać podstawowe wizualne elementy?

Podczas przekształcania swoich papierowych projektów w formę cyfrową, pamiętaj o tym, aby:

• Używać konkretnego tekstu dla najważniejszych elementów, zamiast oznaczenia tego w formie linii. Dla większych bloków tekstu używaj wypełnienia typu „Lorem ipsum”.
• Wstrzymaj się z dodawaniem ekspresywnych treści typu kolorystyka lub zdjęcia. Szkielet projektu koncentruje się na funkcjonalności. Na etapie prototypowania będziesz mógł zająć się tymi rzeczami.

Cyfrowe szkielety projektu, w odróżnieniu od papierowych, pomagają lepiej skupić się na detalach oraz łatwiej je udostępnić innym osobom. Jestem zdecydowaną fanką tego sposobu pracy. ?

Tworzenie projektów w Figmie

Czym się wyróżnia Figma spośród innych narzędzi?

• Pozwala na wygodną współpracę członków zespołu – zwłaszcza, gdy nie pracują z tego samego miejsca.
• To narzędzie wielofunkcyjne. Pozwala zaprojektować zarówno szkielety projektu, jak również prototypy.

Podstawy na temat korzystania z Figmy znajdziesz w poniższym filmie, a także w tej playliście:

Jeśli chodzi o to, jak bardzo złożony powinien być szkielet produktu, Google podkreśla, że nie istnieje magiczna liczba zaprojektowanych ekranów, która odpowie na tę wątpliwość. Dobrą praktyką jest przedstawienie kluczowych ekranów, których ktoś potrzebuje, żeby mógł skorzystać z produktu.

Kluczowe pytania, na jakie powinieneś dać pozytywną odpowiedź po zaprojektowaniu swoich cyfrowych wireframe’ów:

• Czy cyfrowe szkielety projektu bazują na papierowych?
• Czy dodałeś więcej szczegółów i wziąłeś pod uwagę odpowiednią architekturę informacji?
• Czy stworzyłeś kluczowe ekrany dla swojego produktu?
• Czy twoje wireframe’y informują użytkownika, co może zrobić na ekranie?

Na koniec tego rozdziału Google dzieli się pięcioma wskazówkami, które trzeba wziąć pod uwagę podczas projektowania cyfrowych szkieletów projektu:

• Uwzględnij kluczowe ekrany produktu.
• Opieraj się o swoje papierowe szkielety projektu.
• Dodaj więcej szczegółów niż w papierowych wireframe’ach.
• Uwzględnij hierarchię informacji na każdym ekranie.
• Daj znać użytkownikom, co mogą zrobić na każdym ekranie.

Podczas tworzenia własnych szkieletów projektu korzystałam z gotowych modułów przygotowanych przez społeczność Figmy. Są naprawdę pomocne. Figma poleca między innymi Mobile wireframe UI kit.

Wykorzystywanie zasad Gestalt w tworzeniu szkieletów projektu

W tej części kursu Google podkreśla, że pomimo tego, że reakcja użytkownika na produkt może być subiektywna, to projekt sam w sobie taki nie jest. Użytkownik będzie percepował rzeczy tak, jak je zaprojektujesz. Znajomość psychologii ludzkiej percepcji pozwoli tobie nad tym zapanować. Pomogą w tym tobie zasady Gestalt. Swoją nazwę wzięły od słowa Gestalt, które jest niemieckim słowem oznaczającym kształt lub formę.

Zasady Gestalt opisują, w jaki sposób ludzie grupują podobne elementy, rozpoznają wzorce i upraszczają złożone obrazy, gdy patrzą na przedmioty.

O co chodzi? Zasadniczo ludzie w naturalny sposób zauważają całość, zanim zauważą części.

Google wskazuje na trzy najpopularniejsze zasady Gestalt:

• Podobieństwo (similarity): Elementy, które wyglądają podobnie, są postrzegane jako rzeczy posiadające tę samą funkcję.
  • Kiedy tworzysz szkielet projektu, staraj się, aby elementy, które mają tę samą funkcję, wyglądały tak samo.

• Bliskość (proximity): Elementy, które są umieszczone bliżej siebie wydają się być ze sobą bardziej związane, niż rzeczy, które są dalej.
  • Gdy tworzysz szkielet projektu, umieść bliżej siebie elementy, które mają ze sobą związek.

• Obszar wspólny (common region): Elementy, które są umieszczone w tym samym obszarze postrzegane są jako jedna grupa.
  • Możesz wykorzystywać linie/krawędzie w swoim projekcie, żeby w ten sposób zgrupować jakieś elementy.

Dodatkowe zasady z udostępnionych przez Google artykułów („7 Gestalt principles of visual perception”, „Gestalt principles you can use as design solutions”):

• Ciągłość (continuity): Elementy ułożone w linii postrzegane są jako związane ze sobą.
• Domknięcie (closure): Gdy patrzymy na złożony układ elementów wizualnych, widzimy w nich jeden, rozpoznawalny wzór.
• Punkt centralny (focal point): Wszystko, co wyróżnia się wizualnie, przyciągnie w pierwszej kolejności i utrzyma uwagę odbiorcy.
• Figura-tło (figure-ground): Ludzie instynktownie postrzegają przedmioty jako znajdujące się na pierwszym planie lub w tle.

Dopiero na koniec tego rozdziału miałam za zadanie stworzyć wireframe’y na potrzeby własnego portfolio. Poniżej znajdziesz efekty mojej pracy. To szkielet projektu, który pokazuje przepływ użytkownika dla akcji „Stwórz plan swojej wizyty”. ?

Tydzień 3: Tworzenie prototypów low-fidelity

Ostatnim etapem w kursie było stworzenie prototypu, czyli wczesnego modelu produktu, który prezentuje jego funkcjonalność. Prototyp pokazuje to interesariuszom oraz użytkownikom, co można zrobić dzięki produktowi. Może być zaprojektowany z różnym poziomem dokładności. O tym, czym jest fidelity (dokładność), możesz przeczytać ponownie w akapicie Tworzenie szkieletów projektu.

Prototypy można tworzyć zarówno w wersji papierowej, jak cyfrowej. W papierowym prototypie lo-fi człowiek wykonuje interakcje zamiast komputera i może zmieniać projekt w czasie rzeczywistym. W cyfrowych prototypach dotychczasowe szkielety produktu (wireframe) zostają ze sobą połączone i na przykład konkretny przycisk kieruje do kolejnego ekranu.

Tworzenie prototypów low-fidelity na papierze

Dlaczego warto robić prototypy lo-fi na papierze? Google wskazuje na pięć kluczowych zalet:

• Są tanie.
• Pozwalają na szybkie tworzenie iteracji.
• Łatwiej „wyrzucić je do kosza”, bo robi się je szybciej.
• Zachęcają do dzielenia się szczerą opinią.
• Pozwalają na współpracę grupową.

Mają jednak również kilka minusów:

• Są trudniejsze w interpretowaniu – wymagają większej wyobraźni od osoby, która ich używa.
• Mogą być testowane tylko na żywo.
• Są trudne do stworzenia przez zespół, który pracuje zdalnie.

Papierowe prototypy warto tworzyć podczas burzy mózgów. Można je również wykorzystywać do testowania wczesnych pomysłów z użytkownikami.

Można je robić podobnie, jak papierowe szkielety projektu – rysując na kartce papieru. Do dyspozycji są również inne metody. Google podzielił się pięcioma z nich:

1. Wstępnie wydrukowane wireframe’y:
   • Niektórych rzeczy nie musisz rysować – na przykład kwadratów czy kształtów urządzenia.
   • Możesz skorzystać z gotowych szablonów, które poleca Google:
     • Mobile phone outline for wireframes and prototypes
     • Rectangle outline for wireframes and prototypes (standardowy rozmiar ekranu urządzenia mobilnego)
     • Rectangle outline for wireframes and prototypes (długi ekran do scrollowania)
2. Index cards:
   • Nie musisz też rysować wszystkich ekranów na jednej kartce. Możesz przygotować każdy ekran na osobnym arkuszu.
   • Ten rodzaj pracy będzie szczególny zwłaszcza podczas burzy mózgów, ponieważ łatwo jest przemieszczać, dodawać lub usuwać karty ze ścieżki przepływu użytkownika.
3. Karteczki samoprzylepne:
   • Google poleca, żeby korzystać z karteczek w różnych kolorach i rozmiarach. Każda z nich powinna reprezentować inny element twojego projektu.
   • Możesz za ich pośrednictwem oznaczać również istotne elementy prototypu.
4. Szablony:
   • Gotowe szablony przyspieszą twoją pracę i będą też pomocne w przypadku oporów przed rysowaniem.
   • Takie szablony często zawierają wbudowane linie, symbole i ikony, które są powszechnie stosowane w projektach UX. Dzięki nim twoje rysunki będą wyglądały schludniej i bardziej realistycznie.
5. Urządzenie demonstracyjne:
   • Urządzenie demonstracyjne to kartka papieru lub inny materiał, w którym wycięty jest kształt telefonu komórkowego. W takiej ramce możesz umieścić swoje szkice, aby symulować w ten sposób bardziej realistyczne wrażenia użytkownika z produktu.
   • Dzięki urządzeniu demo możesz też sprawdzić, jak twój projekt sprawdzi się w rzeczywistej wielkości ekranu.

Dodatkowo Google poleca narzędzie Marvel’s Prototyping on paper (POP), dzięki któremu możesz zdigitalizować swoje rysunki. Dzięki POP tworzysz połączenia na swoich papierowych prototypach, łącząc w ten sposób poszczególne ekrany i tworząc interakcje.

Poniżej filmik, który pokaże tobie, jak może wyglądać testowanie papierowego prototypu. ?

Tworzenie cyfrowych prototypów low-fidelity

Cyfrowe prototypy ułatwiają udostępnianie, edytowanie i współpracę nad projektami, a także pomagają się zbliżyć do wizualizacji końcowego produktu.

Przed stworzeniem prototypu w Figmie trzeba wyobrazić sobie, jak użytkownik będzie wchodził w interakcję z produktem. Google poleca trzy pytania, nad którymi warto się pochylić:

• Jakie są typowe ścieżki przepływu użytkownika przez produkt?
• Z jakimi przyciskami użytkownicy będą wchodzić w interakcję? W jakiej kolejności wykonają te czynności?
• Czego użytkownicy będą oczekiwać po kliknięciu przycisku lub przesłaniu formularza?

Dzięki uzyskaniu odpowiedzi na powyższe można stworzyć projekt, który będzie uwzględniał różne rodzaje interakcji użytkowników.

O tym, jak prototypować w Figmie, możesz posłuchać w poniższym webinarze. ?

Gdy będziesz oceniał swój prototyp, sprawdź czy zrealizowałeś poniższe założenia:

• Uwzględniłeś wszystkie wireframe’y, które są niezbędne do przejścia przez całą ścieżkę przepływu użytkownika.
• Użytkownik ma możliwość poruszania się do przodu, a także do powrotu.
• Wskazówki dotyczące nawigacji są wyraźnie wskazane w prototypie.
• Użytkownik otrzymuje informację o pomyślnym zakończeniu swojej ścieżki.
• Użytkownik może wrócić do punktu początkowego po zakończeniu swojego zadania.

Na sam koniec tego tekstu będziesz mógł przeklikać się przez mój prototyp. Zachęcam, żeby tam dotrzeć. ?

Zrozumienie projektowania etycznego i włączającego

Nie wystarczy być dobrym „jueksem”. Lub trzeba być dobrym, ale w pełnym tego słowa znaczeniu. Jak to wygląda w praktyce? Trzeba działać etycznie i pamiętać w swoim projektach o osobach, które zwykle są wykluczane. Możesz temu przeciwdziałać, jeśli będziesz świadomie pracował nad swoimi błędami poznawczymi.

Jednym z najczęstszych błędów tego typu są ukryte uprzedzenia (implicit bias). To zbiór postaw i stereotypów, które kojarzymy z ludźmi bez naszej świadomej wiedzy. Niezależnie od tego, czy są pozytywne, czy negatywne, te uprzedzenia mogą nieświadomie zostać uznane za fakt, podczas gdy w rzeczywistości tak nie jest.

Więcej na ten temat przeczytasz w linkach udostępnionych przez Google:

• Gender Shades od Joy’a Buolamwini. 
• Fair is not the default: Why inclusive tech takes more than good intentions od Josha Lovejoy’a.
• Discrimination by design: The many ways design decisions treat people unequally od Leny V. Groeger.

Unikanie zwodniczych wzorców

Założę się, że słyszałeś o takim pojęciu, jak dark patterns. Google nie chcę, aby słowo „dark” kojarzyło się z czymś negatywnym, dlatego proponuje alternatywę dla tego pojęcia, czyli deceptive patterns.

Zwodnicze wzorce (deceptive patterns) to metody UX, które nakłaniają użytkowników do zrobienia lub kupienia czegoś, czego inaczej by nie zrobili lub nie kupili. Mogą one obejmować szereg elementów wizualnych, interaktywnych, dźwiękowych lub ruchomych dodawanych do witryn handlu elektronicznego, reklam i innych treści marketingowych.

Termin pojawił się po raz pierwszy w 2010 roku. Wtedy to projektant UX, Harry Bringull, zaprezentował 11 takich wzorców. O części z nich przeczytasz poniżej.

Google podkreśla, że zwodnicze wzorce są etycznie złe i nie są dobrą praktyką biznesową. Gdy użytkownicy zauważą, że są celowo oszukiwani, mogą stracić szacunek i zaufanie do firmy. Mogą nawet publicznie złożyć skargę i przejść do konkurencji.

Google omówił w kursie 6 zwodniczych wzorców, ale podkreśla, że jest ich zdecydowanie więcej:

• Wymuszona kontynuacja (Forced continuity): Obciążanie użytkownika opłatą za członkostwo bez ostrzeżenia lub przypomnienia.
• Zakradnięcie się do koszyka (Sneak into basket): Dodanie dodatkowych produktów do koszyka użytkownika
• Ukryte koszty (Hidden cost): Dodatkowe opłaty dodane do koszyka.
• Zawstydzanie (Confirmshaming): Zawstydzanie użytkownika, gdy chce zrezygnować z oferty.
• Pilność (Urgency): Sygnalizowanie, że musisz kupić produkt, zanim skończy się czas.
• Limitowanie (Scarcity): Informowanie, że dostępność produktu jest ograniczona („X osób ma go w koszyku”).

Zwodnicze wzorce są skuteczne, dlatego wielu projektantów UX ulega pokusie i z nich korzysta. Sukces z pewnością nie będzie jednak długofalowy. Zdaniem Google naprawdę dobry UX będzie korzystny zarówno dla użytkownika, jak dla firmy. Dlatego nie idź drogą na skróty.

Zrozumieć ekonomię uwagi

Wszystkich nas dotyczą te same, czasowe ograniczenia. Nasza doba posiada tylko 24 godziny. Walka o uwagę jest jedną z największych bitew w cyfrowej sieci. To starcie nazywa się ekonomią uwagi.

Termin pochodzi od psychologa i laureata Nagrody Nobla, Herberta A. Simona, który uważał, że istnieją granice tego, o czym ludzie mogą myśleć i robić w jednym czasie. Z tego względu, jak podkreśla Google, technologia powinna pomagać użytkownikom, a nie ich rozpraszać. Bo im bardziej osoba jest rozkojarzona, tym mniejsze prawdopodobieństwo, że dobrze wykona zadanie. Simon uważa, że „Bogactwo informacji powoduje ubóstwo uwagi”.

Jak możesz temu przeciwdziałać i tworzyć produkty, które nie będą szkodzić użytkownikom?

• Unikaj zwodniczych wzorców. Bądź szczery ze swoimi odbiorcami. Miej w pamięci cel projektowania i sprawdzaj, czy twoje własne wartości są zgodne z projektem.
• Myśl o celach i metrykach. Zrozum cele biznesowe swojej firmy i kluczowe wskaźniki wydajności. Zwróć uwagę, w jaki sposób mogą one być sprzeczne z celami użytkowników lub być z nimi zgodne.
• Dziel się dobrymi projektowymi praktykami z osobami, z którymi współpracujesz. Masz możliwość wpływania na proces decyzyjny i upewnienia się, że dokonywane są właściwe wybory projektowe.

Google zaznacza, że twoje projekty mogą wpływać zarówno negatywnie, jak pozytywnie na użytkowników. Im bardziej będziesz szanować czas, uwagę i doświadczenia swoich odbiorców, tym łatwiej będzie tobie skupić się na ludziach, ich potrzebach i sposobach, w jakie mogą cieszyć się technologią.

Więcej o ekonomii uwagi przeczytasz w artykule od Nielsen Norman Group oraz od Berkeley Economic Review.

Etyczne projektowanie (Ethical design)

Na sam koniec kursu, przed stworzeniem prototypu do portfolio, Google wyjaśnia jeszcze, czym jest etyczne projektowanie.

Etyczne projektowanie (Ethical design) polega na zrozumieniu, w jaki sposób twoja praca projektowa wpływa na świat.

Jednocześnie Google odnosi się do obszarów, które powinno wziąć się pod uwagę przy okazji etycznego designu:

1. Dominująca kultura (dominant culture):
   • Kultura dominująca wpływa na wartości lub normy, które są ważne dla innych kultur. Jeśli wpływ dominującej kultury jest zbyt silny, wiele kulturowych punktów widzenia może nie zostać uwzględnionych w procesie projektowania. Oznacza to, że niektórzy użytkownicy mogą zostać pominięci.
   • Rada Google ➡️ Dostrzeż założenia dotyczące użytkowników, które wnosisz do procesu badawczego, a następnie zastanów się, jak je podważyć.
2. Zmarginalizowana populacja (Marginalized population):
   • Populacja zmarginalizowana to taka, w której ludzie doświadczają dyskryminacji lub wykluczenia z głównego nurtu społeczeństwa z powodu specyficznych cech lub doświadczeń życiowych, które są niesłusznie uważane za gorsze.
   • Rada Google ➡️ Ważne jest, aby projektować produkty, które są inkluzywne i łatwo dostępne dla wszystkich użytkowników.
3. Niedoreprezentowana populacja (Underrepresented population):
   • Populacje niedoreprezentowane to grupy ludzi, których wartości i doświadczenia nie są wystarczająco często reprezentowane w społeczeństwie ukształtowanym przez dominującą kulturę. Niedostatecznie reprezentowane populacje obejmują między innymi osoby określonej płci lub orientacji seksualnej, osoby kolorowe i mniejszości etniczne.
   • Rada Google ➡️ Spróbuj znaleźć sposoby na częstsze uwzględnianie zmarginalizowanych i niedostatecznie reprezentowanych użytkowników we własnym myśleniu projektowym.
4. Skrajne przypadki (Edge cases):
   • Skrajne przypadki to sytuacje, których doświadcza użytkownik z produktem, na które projektanci nie byli przygotowani. Sytuacja lub przeszkoda, która się pojawi, jest poza kontrolą użytkownika i nie może zostać naprawiona.
   • Rada Google ➡️ Bądź elastyczny i gotowy do dostosowywania projektów w trakcie całego procesu, aby uwzględnić tego rodzaju nieoczekiwane problemy wśród grup użytkowników, których początkowo nie brałeś pod uwagę.
5. Projektowanie włączające (Inclusive design):
   • Projektowanie włączające oznacza dokonywanie wyborów projektowych, które uwzględniają osobiste identyfikatory, takie jak umiejętności, rasa, status ekonomiczny, język, wiek i płeć.
   • Rada Google ➡️ Celem projektanta UX jest budowanie doświadczeń dostępnych dla użytkowników o jak najszerszym zakresie umiejętności.
6. Odpowiedzialność (Accountability):
   • Poszukaj opinii użytkowników, współpracowników i interesariuszy, którzy różnią się od ciebie. Gdy dowiesz się więcej o ich perspektywach, podejściu i tym, jak wpływają na nich poszczególne sytuacje, możesz włączyć te spostrzeżenia do swoich projektów.

Google podaje trzy zasady etycznego projektowania:

• Twórz inkluzywne persony.
• Poszerz swoją definicję interesariusza.
• Zwiększ współpracę.

Zaznacza jednocześnie, że jako projektant UX masz obowiązek podchodzić do swojej pracy etycznie i mieć na uwadze najlepszy interes użytkownika. Produkty, które zaprojektujesz, będą częścią życia użytkowników, ale nie powinny:

• Kontrolować użytkownika.
• Promować uzależniające zachowania.
• Promować niezdrowy związek pomiędzy użytkownikiem a technologią.
• Wykorzystywać użytkownika.

Swoją wiedzę na powyższy temat możesz uzupełnić dzięki tym linkom:

• Ethics in user experience design od Usability Geek
• The good, the bad, and the ugly in user experience design od User Experience Magazine 
• 10 principles for ethical UX design od UX Collective
• Benjamin Evans: The power of inclusive design od InVision

---

Przeszedłeś razem ze mną na szybko przez trzeci kurs, łuhuuuuuu! ? Jeśli też chcesz dostać dyplom i porobić własne prototypy, przejdź na tę stronę.

Przez mój prototyp możesz się przeklikać tutaj. Koniecznie napisz, jeśli masz dla mnie jakieś wskazówki!