It’s ofiszial. Zaprojektowałam swój pierwszy prototyp hi-fi! Mówiąc po innemu, stworzyłam coś, co zachowuje się niemalże tak, jak docelowa aplikacja. Choć na telefon jej sobie nie ściągniesz. Jeszcze ?

W moich piątych notatkach z kursu Google UX Design Certificate znajdziesz komplet informacji, które pomogą tobie przekształcić twój „szary” prototyp lo-fi w kolorowe cudeńko. Będzie o makietach. Będzie o kolorystyce, typografii, układzie strony. Będzie o design systemie. I nawet coś o feedbacku się znajdzie. Słodkiego, miłego projektowania!

Trzeba wiedzieć kiedy ze sceny zejść. I przestać w koło Macieju poprawiać swój projekt. Musiałam się tego nauczyć. Być może z tego powodu zrobienie piątego kursu (wraz z całą praktyką) zajęło mi prawie dwa miesiące ?

Projektowanie to dla mnie też trochę nauka gorzkich rozstań. Nie ważne, ile czasu poświęciłeś na projekt. Nie ważne, ile potu i krwi przelałeś. Jeśli projekt nie działa, a użytkownicy chcą czegoś innego, to trzeba się z nim pożegnać. Zerwać szybko plaster, popsikać słowami „tak już jest” i lecieć dalej.

Samodzielna nauka projektowania to dla mnie z kolei walka przeciwności, a także walka z przeciwnościami. Z jednej strony jest to radosne uczenie się we własnym tempie, bez niepokojących oddechów za twoimi plecami lub palców, które robią „niu, niu, niu”. Z drugiej odbijasz się niemalże nieustannie od głosów w swojej głowie: „może tak”, „a może tak”, „nie, lepiej tak”, „dobra, no to tak”, „nie, jednak tak”. Walidacja is kruszial. Póki jej nie mam, na czuja mówię sobie, że coś jest wystarczająco dobre. Moją „good enough” aplikację znajdziesz na końcu tego tekstu ?

? Spis treści:

• Tydzień 1: Tworzenie makiet
  • Początki pracy nad makietą
  • Typografia w makietach
  • Kolory w makietach
  • Ikonografia w makietach
  • Układ strony – siatka i ograniczniki
  • Układ strony – pusta przestrzeń
• Tydzień 2: Dodawanie wizualnych zasad projektowych do makiet
  • Dodawanie wizualnych zasad projektowych, część 1
  • Dodawanie wizualnych zasad projektowych, część 2
  • Udoskonalanie makiet
• Tydzień 3: Odkrywanie design systemów
  • Zrozumienie design systemów
  • Tworzenie design kitu w Figmie
  • Przykłady design systemów
• Tydzień 4: Uczestniczenie w sesji krytyki projektowej
  • Dawanie i otrzymywanie informacji zwrotnej na temat projektu
  • Odkrywanie sesji krytyki projektowej
  • Implementowanie informacji zwrotnej
• Tydzień 5: Tworzenie prototypów hi-fi
  • Odkrywanie gestów i animacji
• Tydzień 6: Testy i iteracja w projektowaniu
  • Zaplanowanie testów użyteczności
  • Przeprowadzenie testów użyteczności
  • Analizowanie i syntetyzowanie wyników testów użyteczności
  • Iteracja projektów hi-fi
  • Udokumentowanie i dzielenie się projektem

Tydzień 1: Tworzenie makiet

Jeżeli myślisz, że w kursie od Google nauczysz się dużo o „juaju”, to mogę powiedzieć tobie już teraz. Nie nauczysz się. Tę myśl rozwija Michał Malewicz:

Niemniej dostaniesz łatwo strawną porcję informacji na start. Które będą wymagały rozwinięcia. Prawie w każdym akapicie poniżej znajdziesz dodatkowe linki, które poleca Google.

Początki pracy nad makietą

Zanim stworzysz prototyp hi-fi, czyli interaktywny projekt, będziesz potrzebować makiet ⤵️

Makieta (mockup) to statyczny projekt hi-fi, który jest wykorzystywany do pokazania, jak będzie wyglądał finalny produkt.

W makiecie pokazujesz, jakie kolory, fonty, obrazy i słowa wykorzystasz w swoim produkcie. Tworzysz ją na podstawie swoich wireframów, ale nie musisz trzymać się 1:1 tego, co zawarłeś w swoim projekcie lo-fi. Makieta jest nie tylko ładną prezentacją twojego projektu, ale również sposobem na to, żeby pokazać reszcie twojego zespołu, jak coś powinno zostać zaprojektowane.

Tyle w ramach wstępu. Poniżej kilka rzeczy do doczytania:

• Twoją pracę przyspieszy korzystanie ze skrótów klawiszowych. Ich listę znajdziesz na stronie Shortcuts.design, konkretnie tutaj: Figma shortcuts.
• Jeżeli chcesz swoje makiety jeszcze bardziej upodobnić do docelowego produktu, możesz skorzystać z biblioteki makiet urządzeń.

Typografia w makietach

Z czego „skleisz” swoją makietę? Google wskazuje jej trzy podstawowe elementy:

• Typografia: użycie tekstu oraz fontów
• Kolor: przekazywanie informacji za pomocą koloru
• Ikonografia: obrazy lub symbole, które są związane z danym przedmiotem lub ideą.

Do powyższego możesz dorzucić jeszcze rozmiary, kształty i kierunki, ale w kursie od Google nie były one szerzej omawiane.

Wracając do tytułowej typografii. Google podaje trzy kroki, jakie należy wykonać, żeby znaleźć najbardziej odpowiednią typografię:

1. Wybór klasyfikacji fontów:
   • Klasyfikacja fontów to ogólny system, który opisuje style fontów.
   • Dwie najbardziej popularne klasyfikacje to szeryfowe (posiadające dodatkowe linie na krawędziach, zwane szeryfami) i bezszeryfowe (bez tych dodatkowych linii).
2. Wybór kroju pisma:
   • Krój pisma to ogólny styl liter.
   • Kroje pisma różnią się grubością kreski, kształtem, rodzajem szeryfa i długością linii.
   • Każdy krój pisma ma swoją własną nazwę.
3. Wybór fontu:
   • Font to rozmiar, grubość i podkreślenie liter.
   • Przykładowo krój pisma to Times New Roman, a font to Times New Roman Bold.

Dlaczego typografia jest tak istotna w UX? Google wyjaśnia, że:

• Pomaga podjąć użytkownikowi decyzję, na czym się skupić i gdzie znaleźć odpowiednie informacje. Dzieje się to dzięki hierarchii w typografii. To metoda porządkowania krojów pisma i fontów w układzie projektu, dzięki czemu powstają czytelne podziały. Główne metody wykorzystywane w hierarchii w typografii, to zmiana wielkości lub grubości fontu.
• Sprawia, że tekst jest łatwiejszy w czytaniu.
• Jest zgodna z wytycznymi marki, co wpływa pozytywnie na wizerunek marki, przekazuje jej charakter oraz misję.

Jeżeli po lekturze powyższego nadal nie masz pewności, na jaką typografię się zdecydować (podejrzewam, że jest to wysoce prawdopodobne), możesz przeczytać o 7 rzeczach, o których należy pamiętać, gdy dokonuje się wyboru typografii. Przyda się tobie również tekst od Nielsen Norman Group na temat tego, jak typografia wpływa na czytelność i zrozumienie tekstu przez użytkowników. Na dokładkę checklista od Google, która może pomóc dobrać odpowiedni krój pisma.

Prawdziwy czy zastępczy tekst?

Teraz kwestia tego, co piszesz. Czy pisać coś na serio? Czy może skorzystać z „wypełniacza”? Jednym z najpopularniejszych typów tekstu zastępczego jest lorem ipsum. Używany jest już od przeszło 500 lat ? Dlaczego warto po niego sięgnąć jako projektant UX?

• Korzystanie z tekstu zastępczego umożliwia wczesne udostępnianie projektów, jeszcze przed ich ukończeniem. To szczególnie ważne, gdy musisz uzyskać informację zwrotną lub uzgodnić kierunek produktu lub projektu, zanim poświęcisz zbyt dużo czasu na dopracowywanie szczegółów.
• Tekst zastępczy, taki jak lorem ipsum, doskonale nadaje się do wykorzystania w fazie tworzenia pomysłów i podczas tworzenia pierwszych modeli szkieletowych, gdy chcesz skupić się przede wszystkim na układzie projektów.
• Jeśli skorzystasz z tekstu zastępczego, dajesz sobie więcej czasu (lub UX writerowi) na stworzenie docelowego copy.

Kiedy jednak tekst zastępczy jest niekorzystny (również dla projektantów):

• Tekst zastępczy może dezorientować interesariuszy, a nawet odwracać ich uwagę od projektu.
• Jeśli twój projekt jest dostosowany tak, aby pasował do tekstu zastępczego, zmiana tego tekstu w późniejszych wersjach projektu może wpłynąć na ogólny układ.

Zasada od Google do zapamiętania: Zastępczy tekst jest najczęściej używany w prototypach lo-fi. Na przykład w wireframe’ach. Generatory takiego tekstu znajdziesz na stronach lipsum.com oraz loremipsum.io.

A teraz jak ma się sprawa z docelowym tekstem? Zdaniem Google, niektórzy projektanci uważają, że prawdziwy tekst powinien być używany od początku procesu projektowania, aby pomóc w lepszym zrozumieniu projektu. Jakie są dodatkowe zalety tego rodzaju tekstu?

• Używanie docelowego tekstu od samego początku procesu projektowania może prowadzić do mniejszej liczby poprawek w późniejszych projektach. Przykładowo, nie będziesz musiał zmieniać rozmiaru elementów, które były wypełnione tekstem.

• Gdy myślisz o docelowym tekście na wcześniejszym etapie projektu, jesteś w stanie wcześniej uzyskać informację zwrotną na ten temat. Projekt i tekst współpracują ze sobą, tworząc jedno doświadczenie użytkownika. Jeśli będziesz tworzyć je w tym samym czasie, istnieje większa szansa, że będą wtedy bardziej spójne.

Żeby nie było zbyt słodko, Google dorzuca do powyższego kilka wad:

• Korzystanie z docelowego tekstu na wczesnym etapie procesu projektowania nie uchroni ciebie przed edycją copy w późniejszym czasie.

• Słowa przyciągają uwagę ludzi. Docelowy tekst w prototypie może odwracać uwagę interesariuszy od komentowania twoich wyborów projektowych. Jeśli wyślesz e-mailem do swojego zespołu prototyp lo-fi z docelowym tekstem, prawdopodobnie otrzymasz notatki dotyczące wybranych słów, zamiast projektu wizualnego i funkcjonalności prototypu. A to drugie jest ważniejsze na tym etapie opracowywania produktu.

Kolory w makietach

Kolor to taka Elsa z Krainy Lodu. Ma tę moc. Może wpływać na zachowania, odczucia i myśli. Dlaczego jest tak istotny w projektowaniu?

• Pozwala na dodawanie akcentów.
• Jest elementem komunikującym branding.
• Wpływa na dostępność projektu.
• Pomaga użytkownikowi efektywnie poruszać się po projekcie.

Jak się nim posługiwać w projektowaniu, żeby nie przesadzić? Google podaję zasadę 60-30-10:

• Jeden neutralny kolor zajmuje 60% w palecie kolorów danego projektu.
• Drugi kolor uzupełniający zajmuje 30% palety kolorystycznej.
• 10% zarezerwowane jest dla koloru, który będzie akcentem kolorystycznym.

Jak wspominałam wcześniej, Google jakoś szczególnie nie rozwodzi się na temat UI. Podaje natomiast dużo linków, które mówią o tym, co nie jest poruszane w jego kursie:

• Poradnik, jak korzystać z gradientów w Figmie: Paints in Figma
• Dodawanie konturów może być przydatnym, dodatkowym akcentem. Design.code wyjaśnia, jak się nim posługiwać: Fill, Stroke, and Advanced Stroke
• Ogólne informacje od Figmy na temat kolorów, tekstu, siatek i układów strony: Creating styles for colors, text, effects, and layout grids.
• Rola poszczególnych kolorów w artykule od Toptal: the role of color in UX.
• Poradnik dla początkujących na temat teorii koloru od CareerFoundry: The Color Guide: An Introduction To Color Theory And Color Palettes. 
• Wskazówki od Google, jakich kolorów używać, żeby stworzyć nowocześnie wyglądający projekt: Applying color to UI
• The Coolors to przydatny generator kolorów uzupełniających.

Kwestie dostępności i koloru

Kiedy projektujesz produkt, powinieneś pomyśleć o tym, jak kolor jest interpretowany przez wszystkich użytkowników produktu. Niektórzy będą mieli trudności z dostrzeganiem niektórych kolorów lub ich kombinacji, więc nie odczytają twojego projektu tak, jak się spodziewasz. O czym należy pamiętać, żeby projektować z myślą o różnorodnych potrzebach użytkowników?

Web Content Accesibility Guide (WCAG) w praktyce:

• Daltonizm: Daltonizm powoduje trudności w rozróżnianiu niektórych kolorów. Istnieją trzy powszechne kategorie ślepoty barw: czerwono-zielona, niebiesko-żółta i całkowita ślepota barw. Color Blindness Simulator pomoże tobie wczuć się w osobę, która widzi w ten sposób.
  ➡️ Zalecenia:
  • Korzystaj z ikon.
  • Używaj wzorów i tekstur, żeby stworzyć kontrast.
  • Unikaj kombinacji kolorów, które mogą być trudne do rozróżnienia: zielony i czerwony, zielony i brązowy, niebieski i fioletowy, zielony i niebieski, jasnozielony i żółty, niebieski i szary, zielony i szary, zielony i czarny.
• Niska wrażliwość na kontrast: Ludzie, którzy mają niską wrażliwość na kontrast, postrzegają obiekty jako przyćmione lub niewyraźne, co utrudnia ich identyfikację.
  ➡️ Zalecenia:
  • Jako standard WCAG zaleca, aby współczynnik kontrastu jasności obrazów i tekstu odpowiadał współczynnikowi co najmniej 4,5 : 1.
  • Jeśli chcesz sprawdzić, czy twoje kolory odpowiadają temu standardowi, odwiedź stronę Contrast Checker tool.
• Wrażliwość na światło: Wrażliwość na światło to niezdolność do tolerowania światła. Użytkownicy, którzy są wrażliwi na światło, mogą widzieć Twoje projekty na przyciemnionym ekranie.
  ➡️ Zalecenia:
  • Najlepiej jest pozwolić użytkownikom na dokonywanie tych wyborów ustawień, więc spróbuj zaprojektować własne tryby jasnego i ciemnego w swoich projektach.

Uzupełnienie wiedzy:

• Twórcy WCAG pokazują, jak zweryfikować swój projekt pod kątem dostępności: Easy Checks: A First Review of Website Accessibility.
• Color palette generator od Color Safe, dzięki któremu stworzysz paletę zgodną z WCAG.
• Stark – Figma to z kolei wtyczka, która będzie weryfikować twój projekt bezpośrednio w Figmie.

Ikonografia w makietach

Kolejnym elementem opisywanym przez Google jest ikonografia ⤵️

Ikonografia: System grafik lub symboli, które są związane z przedmiotem lub ideą.

Na początek skupia się na ikonach. Te małe, niepozorne obrazki oszczędzą tobie przestrzeń techniczną, przyciągną uwagę użytkownika i są łatwym i czytelnym sposobem na przejście do innej strony lub lokalizacji. Warto dodawać pod nimi podpis – dzięki temu zwiększasz dostępność swojego projektu.

Darmowe ikony i inne graficzne elementy możesz pobrać ze strony od Google: Material.io. Możesz również stworzyć własny system kolorystyczny na stronie Material Theme Builder.

Istnieją dwie uniwersalne ikony, które są używane w aplikacjach mobilnych i projektach stron internetowych: strona główna i wyszukiwarka. Ikona strony głównej jest reprezentowana przez kształt domu, a wyszukiwanie jest prezentowane za pomocą szkła powiększającego.

Pamiętaj o trzech najlepszych praktykach od Google, jeśli chodzi o używanie ikon w projektach:

• Uczyń ikony uniwersalnymi. Zastanów się, czy ikona jest specyficzna kulturowo lub geograficznie, zanim dodasz ją do swoich projektów. Czy ikona będzie miała sens dla odbiorców na całym świecie, czy tylko dla użytkowników w regionie, w którym mieszkasz? Gdzie będą znajdować się użytkownicy projektowanego przez Ciebie produktu? Twoim celem powinno być uwzględnienie ikon, które wszyscy rozpoznają i rozumieją, niezależnie od ich pochodzenia. Na przykład większość użytkowników jest zaznajomiona z ideą, że ikona domu oznacza „stronę główną”, co może pomóc wszystkim w poruszaniu się po twojej aplikacji.
• Rozważ dodanie etykiety tekstowej. Zwykle etykiety tekstowe są umieszczane małą czcionką bezpośrednio pod ikoną. Dołączenie etykiety tekstowej gwarantuje, że użytkownicy korzystający z czytnika ekranu lub nowi użytkownicy technologii będą w stanie zidentyfikować ikonę. Ponadto etykieta tekstowa może jasno opisać (jednym słowem!), co oznacza dana ikona.
• Dbaj o przejrzystość marki. Wszystko, w tym ikony, powinno odzwierciedlać obrazy, które stworzyłeś dla swojej marki. Oznacza to, że wszystko w twojej aplikacji musi mieć ten sam schemat kolorów, tę samą czcionkę i ten sam styl.

Google poleca następujące strony w ramach uzupełnienia informacji na temat ikonografii:

• Tekst od Icon Finder na temat tego, jak używać ikon w Figmie: How to use icons in Figma.
• Film Roberta Bradforda, z którego dowiesz się, jak samodzielnie stworzyć ikony w Figmie: Creating icons in Figma.
• O użyteczności ikon przeczytasz w artykule od Intechnic: Icon usability.
• Wizualne podstawy designu od Usability.gov: visual design basics.
• O dodawaniu przycisków dowiesz się sporo z artykułu od Material Design: Comprehensive guide to buttons oraz od UX Planet: 7 Basic Rules For Button Design.
• Na temat pól tekstowych przeczytasz w tych samych źródłach – Material Design: Guide to text fields oraz UX Planet: The Anatomy of Input Field.

Układ strony – siatka i ograniczniki

Na tym etapie dysponujesz już najważniejszymi elementami wizualnymi dla swojego projektu. Jak teraz to wszystko poukładać? Kłania się przed tobą układ strony.

Układ strony: Sposób zaaranżowania elementów na stronie.

Celem układu strony jest ułożenie elementów w logiczny sposób, dzięki czemu te najważniejsze będą się wyróżniać.

W tej części kursu omawiana jest rola siatki oraz ograniczników:

1. Siatka:
   • Podstawowa siatka: Podział strony na małe kwadraty.
   • Siatka układu strony: Seria kolumn (kolorowe bloki) i alejek pomiędzy kolumnami (puste przestrzenie).
   • Dlaczego warto korzystać z siatek?
     • Układ na stronie jest przejrzysty i spójny.
     • Przyspiesza to proces projektowy.
     • Łatwiej współpracować przy projekcie.
2. Ograniczniki:
   • To wizualne „bariery”, dzięki któremu tworzy się schludny i przejrzysty projekt.
   • Wykorzystuje się cztery rodzaje ograniczników: podziałki, obramowania, wypełnienia oraz cienie.
   • Podziałki: Linie, które oddzielają sekcje.
   • Obramowania: Grupa linii, które wyróżniają daną sekcję ze strony.
   • Wypełnienia: Kolor wypełniający dany obiekt, dzięki czemu wizualnie się on wyróżnia od reszty.
   • Cienie: Dzięki nim nadajesz wymiar elementom. Możesz to łączyć z obramowaniami i cieniami.

Rozszerzenie tematu pod poniższymi linkami ⤵️

• Wideo-tutorial od Figmy: Alignment and distribution
• Artykuł na blogu Figmy: Everything you need to know about layout grids. 
• Poradnik na temat tego, jak lepiej projektować z wykorzystaniem siatki od Smash Magazine: Build better designs with layout grids.

Układ strony – pusta przestrzeń

Elementy i ich układ jest ważny. Ale równie istotne jest to, czego nie ma. Czyli pusta przestrzeń.

Pusta przestrzeń: Przestrzeń pomiędzy elementami w projekcie.

Dlaczego pusta przestrzeń jest tak ważna? Google podaje następujące wyjaśnienie:

• Dzięki niej można położyć nacisk na centralny element w projekcie.
• Pozwala na zgrupowanie ze sobą elementów.
• Poprawia czytelność.
• Sprawia, że użytkownik nie będzie przytłoczony przez zbyt dużą ilość elementów na stronie.

Niewystarczająca ilość pustej przestrzeni może wpłynąć na wzrost błędów popełnianych przez użytkowników. Może też sprawić, że użytkownik nie będzie klikał tam, gdzie powinien.

Przykłady wykorzystania pustej przestrzeni:

• Odstęp między wierszami to pionowy odstęp między dwoma fragmentami tekstu. Ułatwia czytanie.
• Wypełnienie to pusta przestrzeń otaczająca treść lub przestrzeń między obramowaniem a elementami projektu. Daje elementom swoją własną przestrzeń i je uwidacznia.
• Marginesy to przestrzeń poza granicami projektu.

W poniższym filmie od Caler Edwardsa dowiesz się jeszcze więcej na temat pustej przestrzeni:

Popularne wzorce projektowe dla aplikacji

Możesz wymyślać koło na nowo, ale w wielu przypadkach (o czym z resztą pisał Steve Krug) warto korzystać z gotowych wzorców projektowych, które są znane i lubiane nie tylko przez projektantów, ale przede wszystkim przez użytkowników.

• Strona główna:
  • Stanowi punkt startowy dla użytkownika. Dobrze ułatwić mu przejście do tego, co będzie dla niego potencjalnie najważniejsze.
  • Warto uwzględnić na nim dolne menu nawigacyjne i ikonkę pozwalającą na wyszukiwanie – to popularne elementy, do których są przyzwyczajeni użytkownicy.
  • Skup się tylko na najistotniejszych rzeczach, żeby nie przytłoczyć użytkownika.
• Ekrany z onboardingiem:
  • Są pomocne dla użytkownika i mogą mu ułatwić korzystanie z aplikacji.
  • Należy je dopasować do konkretnej aplikacji i jej celu.
• Strona profilowa:
  • Ekran profilu zawiera dużo ważnych informacji, więc powinien być czytelny i łatwy w nawigacji.
  • Najlepsza praktyka to uczynienie go maksymalnie prostym w użyciu.
• Checkout:
  • Ten etap bywa stresujący dla użytkowników, dlatego warto zadbać o to, aby czuli się bezpiecznie.
  • Warto dawać podpowiedzi, co wpisać w danym polu formularza lub wizualne wskazówki, że coś zostało wykonane dobrze/niepoprawnie.

W artykule od UX Collective znajdziesz 13 podstawowych wzorców UI pod urządzenia mobilne.

Na koniec Google podrzuca kilka case study, dzięki którym zapoznasz się z różnymi mobilnymi układami stron: 

• Basil (przepisy)
• Owl oraz Fortnightly (newsy)
• Crane oraz Rally (analityka) 
• Shrine (eCommerce)
• Reply (social media)

Aby uzyskać ogólne informacje na temat dostosowywania komponentów aplikacji mobilnej do różnych kontekstów, odwiedź stronę ➡️ About Material Studies.

Tydzień 2: Dodawanie wizualnych zasad projektowych do makiet

Jaki jest twój cel jako projektant UX? Tworzysz rzeczy, które spełniają potrzeby użytkowników. Rzeczy jasne, w których dane osoby łatwo znajdują to, czego szukają. Google poleca w tej materii wyróżnienia, które pomogą tobie naprowadzić użytkowników na właściwe tory.

Dodawanie wizualnych zasad projektowych, część 1

W tej części kursu omawiana jest rola akcentów w projektach oraz hierarchia.

⬇️ AKCENTY ⬇️

Akcent (Emphasis): Coś, co przyciąga uwagę.

Żeby coś przykuwało uwagę, można na przykład zwiekszyć jego masę wizualną:

Masa wizualna (visual weight) jest miarą siły, z jaką element przyciąga wzrok.

Do zwiększenia masy wizualnej wykorzystuje się wielkość obiektu, jego kolor oraz kontrast. Żeby podjąć decyzję o tym, co wyróżnić w swoim projekcie, warto odpowiedzieć na poniższe pytania proponowane przez Google:

• W jakim miejscu chcę skupić uwagę użytkownika?
• Jakie są cele użytkownika?

Korzystanie z akcentów jest korzystne dla produktu i biznesu (użytkownicy nie błądzą po aplikacji – docierają tam, gdzie planujesz), a także dla ludzi, którzy z produktu korzystają (realizują swoje potrzeby).

Lektura uzupełniająca na temat akcentów:

• Kilka słów od Interaction Design Foundation na temat ustawiania punktu centralnego w Twoim projekcie: Emphasis: Setting up the focal point of your design.
• Artykuł od Toptal, w którym wymienionych jest wiele ważnych zasad projektowych, o których warto pamiętać: Breaking Down the Principles of Design.

Kolejnym narzędziem proponowanym przez Google jest hierarchia.

⬇️ HIERARCHIA ⬇️

Hierarchia porządkuje elementy na stronie i wyróżnia je według ich ważności.

Celem hierarchii jest prowadzenie użytkownika i pomaganie mu trafić we właściwe miejsca. Hierarchia pomaga użytkownikowi rozpoznać, jaki elementy są bardziej i mniej ważne. Innymi słowy, można mu wskazać, od jakiego kroku powinien rozpocząć swoją podróż użytkownika po aplikacji.

Google podkreśla dwa główne cele, dla których korzysta się z hierarchii – chodzi o to, aby sprawić, żeby było jasne dla użytkownika:

• Gdzie na początek skupić swoją uwagę?
• Jaką akcję należy dokonać?

Bardziej istotne informacje = Bardziej wizualnie widoczne

Hierarchia różni się od akcentowania, ponieważ polega na kierowaniu uwagi użytkownika przez grupy elementów, zamiast skupiania się na znaczeniu jednego konkretnego elementu.

Aby jak najlepiej uwzględnić hierarchię w swoim projekcie, skup się na głównym celu, który chcesz, aby użytkownicy osiągnęli podczas interakcji z twoim produktem.

Jasna hierarchia jest również niezbędna dla użytkowników korzystających z technologii wspomagających, takich jak czytniki ekranu. Gdy wypełnisz swój projekt treścią, obrazami i elementami, każdy ekran twojej aplikacji stanie się bardziej złożony. Hierarchia pomaga czytnikowi ekranowemu pobierać informacje w twoim projekcie w kolejności, w jakiej zamierzałeś je przeczytać.

Więcej informacji na temat hierarchii:

• Artykuł od Mockplus: Golden Tips and Examples to Create Visual Hierarchy in Website Design.
• Interaction Design Foundation, które wyjaśnia, czym jest hierarchia wizualna: What is visual hierarchy? 
• W tekście od UX Collective znajdziesz wiele istotnych informacji na temat projektowania pod kątem dostępności: A is for Accessibility — 12 top tips for designing an inclusive user experience.

Dodawanie wizualnych zasad projektowych, część 2

Następne elementy omawiane przez Google, to skala i proporcja.

⬇️ SKALA ⬇️

Skala jest pojęciem używanym do wyjaśnienia relacji wielkości między danym elementem a innymi elementami w projekcie.

Dlaczego skala jest istotna? Google wyjaśnia, że:

• Dzięki skali powstają akcenty.
• Podkreśla podobieństwo i kontrast pomiędzy elementami.

Skala i proporcja są powiązanymi ze sobą pojęciami, ale nie są tym samym.

⬇️ PROPORCJA ⬇️

Proporcja dotyczy równowagi lub harmonii między skalowanymi elementami.

Projektanci UX często używają skali, aby najważniejsze elementy w projekcie były większe niż elementy mniej ważne, co pomaga podkreślić i kontrastować. Proporcja pomaga projektantom UX upewnić się, że relacja wielkości między elementami ma sens i że elementy na ekranie są względem siebie zrównoważone.

Czym jest złota proporcja i jak ją z powodzeniem wykorzystać w swoim projekcie? Tego dowiesz się z artykułu od UX Collective ➡️ Golden ratio: Bring Balance in UI Design

Jedność i różnorodność w projektach UX

Być może drzemią w tobie dwa wilki. Jeden lubuje się w bezpiecznej i przewidywalnej spójności. Drugi ma ochotę szaleć i walczy o różnorodność. Jak pożenić ze sobą te kwestie?

Spójność (unity) mierzy, jak dobrze elementy twojego projektu współpracują ze sobą, aby przekazać jakąś ideę.

Uzyskujesz ją dzięki podobnej kolorystyce, wielkości obiektów czy odległości pomiędzy nimi. Po drugiej stronie mamy różnorodność:

Różnorodność (variety) polega na zmienianiu elementów w projekcie, aby przełamać monotonię.

Masz do dyspozycji wiele narzędzi, żeby wprowadzić różnorodność w projekcie – od wielkości obiektów, przez ich teksturę, po kolorystykę.

Po stworzeniu swojej makiety powinieneś zadać sobie pytania:

• Czy użyłem kolorów w spójny i celowy sposób?
• Czy użyte przeze mnie kroje pisma dobrze ze sobą współgrają?
• Czy jest wystarczająco dużo różnorodności, aby mój projekt był interesujący?

Twoim ostatecznym celem jest uzyskanie balansu pomiędzy spójnością i różnorodnością.

Chcesz wiedzieć jeszcze więcej o spójności? Swoją wiedzę możesz uzupełnić w 60 sekund ⤵️

A potem sprawdź, jak o różnorodności pisze UX Collective: Variety: the salt of design.

Udoskonalanie makiet

Dodatkowym narzędziem, po które warto sięgnąć podczas poprawiania swoich makiet, są zasady Gestalt. Jeśli czytałeś moje poprzednie teksty, wiesz zapewne, czym są. W skrócie, opisują, w jaki sposób ludzie grupują podobne elementy, rozpoznają wzorce i upraszczają złożone obrazy, gdy patrzą na przedmioty.

W jednym projekcie możesz wykorzystywać wiele zasad Gestalt, żeby go udoskonalić i usprawnić.

W kursie od Google opisane zostały trzy zasady z nich:

1. Zasada podobieństwa:
   • Elementy, które wyglądają podobnie, odbierane są jako posiadające te same funkcje.
2. Zasada bliskości:
   • Elementy, które są bliżej siebie, zdają być ze sobą bardziej powiązane, niż elementy, które są od siebie oddalone.
3. Zasada wspólnego obszaru:
   • Elementy, które ulokowane są w tej samej przestrzeni są odbierane jako jedna grupa.

Pozostałe zasady Gestalt

Ludzki mózg próbuje uporządkować informacje, podświadomie układając części w spójną całość. Zastosowanie zasad Gestalt w twoich makietach pomoże stworzyć przyjazne dla użytkownika projekty, które są zakorzenione w psychologii i ludzkich zachowaniach.

1. Zasada domknięcia:
   • Kiedy człowiek patrzy na niekompletny obraz, podświadomie go uzupełnia, aby zobaczyć cały, ukończony obiekt.
   • Więcej o tej zasadzie przeczytasz w artykule od UX Collective: Improve Your Designs With The Principles Of Closure And Figure-Ground.
2. Zasada ciągłości:
   • Elementy ułożone w linii lub na krzywej wydają się być bardziej powiązane niż elementy, które na ich nie leżą.
3. Zasada symetrii:
   • Elementy są bardziej przyjemne wizualnie, gdy części obiektu są wyważone lub są swoimi lustrzanymi odbiciami.
4. Zasada asymetrii:
   • Brak równowagi i równości, może podkreślać znaczenie elementu i wzbudzać zainteresowanie wizualne.

Zastanów się nad postępami prac nad projektem

W pewnym momencie przychodzi czas na to, aby zatrzymać się z poprawkami. Żeby ocenić wykonaną przez siebie pracę, Google proponuję następującą checklistę:

• Widok szczegółowy:
  • Skupienie się najpierw na małych rzeczach pozwala wychwycić miejsca, w których mogłeś popełnić błędy z elementami.
• Widok na poziomie strony:
  • Po drugie, użyj widoku na poziomie strony, aby sprawdzić, czy wszystkie elementy na każdej stronie są zrównoważone i ujednolicone. Sprawdź stronę z lotu ptaka, aby zobaczyć, czy coś nie jest na swoim miejscu.
• Widok na poziomie funkcji:
  • Musisz upewnić się, że Twoje projekty działają. W szczególności sprawdź, czy uwzględniłeś wszystkie elementy nawigacyjne w swoich projektach, aby były gotowe do prototypowania.
• Widok na poziomie aplikacji:
  • Na koniec cofnij się o krok i przejrzyj swój projekt jako całość. Nazywa się to widokiem na poziomie aplikacji, ponieważ przeglądasz całą aplikację. Myślenie o swoich projektach z szerszej perspektywy pomaga upewnić się, że Twój produkt ogólnie wygląda i działa tak, jak chcesz.

Wybór różnych elementów wizualnych pozwala tworzyć bardziej interesujące, atrakcyjne i użyteczne projekty. Jeżeli chcesz się upewnić, że wiesz, co robić, przeczytaj poniższe teksty ?

• Zasady projektowe zebrane przez Interaction Design Foundation: Design Principles
• 16 zasad projektowych zebranych przez Springboard: 16 Important UX Design Principles for Newcomers.
• Cztery fundamentalne zasady UI od Adobe: The 4 Golden Rules of UI Design.
• Lista podstaw UI od Usability.gov: User Interface Design Basics.

Tydzień 3: Odkrywanie design systemów

Świecie projektowy, jak dobrze, że stworzyłeś design systemy! Korzystanie z tego narzędzia jest absolutnie boskie! Oszczędza czas, ułatwia pracę całemu zespołowi i zapewnia spójność w projekcie. Wymaga oczywiście poświęcenia na niego więcej czasu na początku, ale później korzystasz już głównie z „gotowców”. Toż to projektowy must have! ?

Zrozumienie design systemów

Po tym krótkim ataku euforii mogę przejść do wyjaśnienia, czym właściwie jest ten cały (boski) design system ⤵️

Design system: seria elementów i wytycznych wielokrotnego użytku, które pozwalają zespołom projektować i rozwijać produkt zgodnie z wcześniej określonymi standardami.

Design system składa się z następujących elementów wizualnych:

• Kolor
• Ikonografia
• Układ strony
• Tekst
• Animacje
• Typografia
• Ilustracje

Jak dokładnie jest podzielony? Google wyjaśnia to na poniższym przykładzie:

Design system:

1. Style wizualne – dzięki nim można zachować spójny wizerunek marki i poprawić doświadczenie użytkownika.
   • Typografia
   • Palety kolorystyczne
   • Ikonografia
   • Siatki
2. Wytyczne – dzięki nim projektanci zachowują spójność w projektach.
   • Zasady projektowe
   • Wytyczne redakcyjne
   • Wytyczne implementacyjne
3. Wzorce UI – oprócz poniższego zawierają też w sobie informacje, jakie elementy są najważniejsze i najczęściej używane.
   • Elementy (typografia, ikony)
   • Komponenty (składają się z elementów, na przykład przycisk CTA)
   • Moduły (złożone są z komponentów)
   • Szablony (grupy modułów, które składają się na daną stronę)
4. Wspierający kod – aby pomóc programistom w prawidłowym tworzeniu projektów, systemy projektowe często zawierają kod do tworzenia każdego z dostarczonych elementów lub komponentów.

✅ Zalety design systemu:

• Zapewnia spójność dla projektantów i użytkowników.
• Pomaga wzmacniać wizerunek marki.
• Jest skalowalny, czyli jest w stanie utrzymać poziom wydajności przy wzroście obciążenia.
• Oszczędza czas i pieniądze dzięki wzrostowi efektywności.
• Pomaga projektantom i developerom we wzajemnej współpracy.

Odkrywanie popularnych design systemów

Jako projektant UX będziesz cały czas korzystać z design systemów, aby poprawiać szybkość i spójność swojej pracy. Zwłaszcza, gdy jesteś nowy w tej dziedzinie, design systemy mogą pomóc ci lepiej zrozumieć najlepsze praktyki w projektowaniu i mogą radykalnie poprawić jakość twoich własnych prac projektowych.

Poniżej kilka inspirujących przykładów design systemów:

• Design system od Google: Material Design. A tu narzędzia pomagające dobrać kolorystykę.
• Design system od Shopify: The Polaris
• Apple Human Interface Guidelines
• Microsoft Fluent Design System
• AirBnb’s Design System
• U.S. Web Design System

Tworzenie design kitu w Figmie

Kolejna rzecz, która ułatwi tobie pracę projektową, to design kit ⤵️

Arkusz naklejek (sticker sheet, design kit): kolekcja elementów i komponentów, które są elementem design systemu.

Dzięki niemu łatwiejsza jest współpraca nad projektem i zachowanie spójności. Dodatkowo, jeśli wprowadzi się zmianę w design kicie, zostanie ona wprowadzona również w projekcie – wszędzie tam, gdzie znajduje się dany element. Fe-no-me-na-lne!

Tworzenie arkusza naklejek krok po kroku

Arkusz naklejek powinien zawierać w sobie najczęściej wykorzystywane komponenty i elementy, takie jak:

• Komponenty: przyciski, menu, karty
• Typografia: fonty i rodziny fontów
• Kolor: cała paleta oraz kolorystyka poszczególnych komponentów
• Ikonografia: ikony reprezentujące poszczególne akcje lub potwierdzające dokonanie jakiejś akcji

Tworzenie arkusza naklejek w Figmie:

1. Otwórz swój projekt w Figmie.
2. Utwórz nową stronę w swoim projekcie.
3. Nazwij ją „Arkusz naklejek”, „Sticker sheet” lub „Design kit”.
4. Utwórz nową ramkę – wybierz „Desktop”, żeby mieć pewność, że starczy tobie miejsca na wszystkie elementy.
5. Zacznij tworzyć poszczególne elementy i komponenty:
   • Typografia
   • Kolorystyka
   • Przyciski
   • Karty
   • Nawigacja
6. Opcjonalnie możesz skorzystać z gotowych komponentów: Material 2 Design Kit

Dodatkowa wiedza:

• Artykuł od Figmy: Kiedy należy zacząć tworzyć komponenty dla design systemu?
• Artykuł na Medium: Jak tworzyć przyciski w Figmie?
• Kolejny artykuł na Medium: Jak tworzyć komponenty w Figmie?

Przykłady design systemów

Trochę już o tym było, ale można jeszcze więcej. Sama w praktyce przekonałam się, jak bardzo ułatwia pracę korzystanie z gotowych design systemów. Co masz do dyspozycji?

• Material Design, czyli design system od Google.
• Gotowe komponenty do ściągnięcia bezpośrednio do Figmy: Baseline UI kit
• W sekcji społeczność na Figmie możesz wyszukać jeszcze więcej przydatnych, darmowych i gotowych do użycia materiałów: Community section
• Shopify Polaris
• Microsoft Fluent
• Salesforce Lightning 
• Atlassian Design System 
• Uber Base Web
• Na tej stronie znajdziesz subiektywną listę 10 najlepszych design systemów: 10 Best Design Systems and How to Learn (and Steal) From Them

Powyższe przykłady mogą zainspirować ciebie do stworzenia swojego własnego design systemu. To będzie dla ciebie piękna przygoda ?

⭐️ Kilka lekcji od Figmy

Perspektywa stworzenia czegoś tak dużego, jak design system, może być przytłaczająca. Ale jest do zrobienia (tak mówi Google i Figma i chcę im wierzyć). Poniżej pięć filmów instruktażowych od Figmy, która przeprowadzi ciebie przez ten proces:

• Wideo 1 – Podstawy (55 minutes): dowiesz się, jak zacząć od zera. Na start typografia i kolorystyka.
• Wideo 2 – Komponenty (55 minutes): poznasz, jak stworzyć gotowe komponenty do wykorzystywania w rożnych miejscach twojego projektu.
• Wideo 3 – Komponenty, część 2 (55 minutes): w tym filmie poznasz bardziej złożone fundamenty, jak karty, dialogi, nawigacje oraz formularze.
• Wideo 4 – Testowanie (57 minutes): dowiesz się, jak sprawdzić, czy twoje komponenty działają w świecie rzeczywistym
• Wideo 5 – Dokumentacja (61 minutes): poznasz najlepsze praktyki związane z dokumentowaniem swojego design systemu w Figmie i innych narzędziach.

Tydzień 4: Uczestniczenie w sesji krytyki projektowej

We wstępie wspomniałam tobie, jak na mnie działa brak krytyki z zewnątrz. Teoretycznie moja praca jest oceniania przez innych kursantów, ale feedback, który otrzymuję („Great job!”) jest niewystarczający, żeby udoskonalić swoją pracę. Dlatego wypatruję z niecierpliwością mojej pierwszej współpracy zespołowej ?

Dawanie i otrzymywanie informacji zwrotnej na temat projektu

Informacja zwrotna (feedback) to uzyskanie od innych informacji na temat tego, co działa i co nie działa w twoim projekcie. Skuteczny feedback pomoże tobie dostrzec rzeczy w projekcie, które nie były dla ciebie zauważalne i poprawić swoją pracę. Tę kwestię w 100% potwierdzają moje doświadczenia podczas uzyskiwania informacji zwrotnej w czasie testów z użytkownikami.

✅ Zalety uzyskiwania informacji zwrotnej, na które zwraca uwagę Google, to:

• Poprawa swojego projektu i udoskonalanie swoich umiejętności projektowych.
• Wzmacnia pewność siebie oraz umiejętności.
• Rozszerza perspektywę widzenia, jako projektant.

Otrzymywanie feedbacku potrafi być trudne. Ale równie dużym wyzwaniem, jest przekazywanie informacji zwrotnej. Jak to robić dobrze? Poniżej kilka wskazówek od Google:

• Powinna być dostosowana do danej sytuacji – np. do kogo mówimy (czym dana osoba się zajmuje i jakie ma doświadczenie).
• Powinniśmy mieć uzasadnienie dla swojej informacji zwrotnej – czyli dać znać, dlaczego uważamy, że coś nie działa.
• Opisz problemy z projektem, ale nie sugeruj rozwiązań.

Odkrywanie sesji krytyki projektowej

Podczas sesji krytyki projektowej dany zespół zbiera się razem, żeby wspólnie omówić pomysły i możliwe kierunki projektowania. Sesja planowana jest z wyprzedzeniem, ma swoją agendę i ustalone cele.

Sesja krytyki projektowej: zaplanowany czas, w którym projektanci UX prezentują swoje projekty pozostałym osobom z zespołu i otrzymują od nich informację zwrotną.

KIlka najważniejszych informacji od Google na temat sesji krytyki projektowej:

1. Uczestnicy sesji:
   • Facylitator: przeprowadza sesję i kieruje całym procesem. Facylitator nie jest niezbędny na każdej sesji krytyki projektowej.
   • Prezenter: projektant, który prezentuje innym swoją pracę.
   • Recenzent: osoba, która przekazuje informacje zwrotną.
   • Notujący: osoba, która przygotowuje notatki z całej sesji krytyki projektowej. Nie jest obligatoryjna.
2. Struktura spotkania (mogą być różne, poniżej znajdziesz przykład od Google):
   • Facylitator przekazuje ogólne informacje na temat sesji krytyki projektowej oraz definiuje cele spotkania.
   • Prezenter dzieli się rezultatami swojej pracy.
   • Następnie recenzenci dzielą się swoją opinią. Prezenter może zadawać pytania uzupełniające, żeby w pełni zrozumieć informację zwrotną.
   • Na koniec facylitator podsumowuję sesję krytyki. Zadaje też dodatkowe pytania, jeśli w czasie spotkania nie pojawiły się odpowiedzi na część celów sesji.
3. Najlepsze praktyki:
   • Przygotuj dobrą prezentację. Żeby to zrobić, odpowiedz sobie na 5 pytań: Dla kogo projektujesz? Jakie problemy starasz się rozwiązać? Jak twoje projekty rozwiązują lub nie rozwiązują tych problemów? Na jakim etapie procesu projektowego jesteś? Dla jakich aspektów swojego projektu chcesz uzyskać feedback?
   • Przyjmij feedback i zdecyduj, czy chcesz o coś dodatkowo dopytać.
   • Skup się na aktywnym słuchaniu.
   • Bądź gotowy do tego, żeby podjąć działania po zakończeniu sesji krytyki porjektowej.

Regularna informacja zwrotna to niezbędny element pracy, który pomaga stawać się lepszym projektantem.

W artykule opublikowanym na Medium znajdziesz poradnik, jak efektywnie przeprowadzić sesję krytyki projektowej: Practical guide to running effective design critiques.

Implementowanie informacji zwrotnej

Po sesji krytyki zaopatrzony będziesz w solidną porcję informacji zwrotnej. Przed tobą dwa bardzo ważne pytania:

• Jak dokonać syntezy całego feedbacku, który otrzymałem podczas sesji krytyki?
• Który feedback chcę wykorzystać, żeby poprawić projekt lub doświadczenie użytkownika?

Syntetyzowanie informacji zwrotnej robi się w podobny sposób, jak syntetyzowanie wyników badań, które opisywałam w poprzednim tekście.

Jeśli informacji zwrotnej jest mało, możesz po prostu do każdej zanotowanie uwagi dodać informacje, czy i jakie działania należy podjąć.

Który feedback powinieneś wziąć pod uwagę? Szczególnie ważna będzie informacja zwrotna, która dotyczy:

• Niespójności w projekcie.
• Uwagi związane z dostępnością.
• Feedback na temat funkcjonalności.

Na stronie WebAIM możesz się upewnić, czy wszystkie kolory w Twoim projekcie mają odpowiedni kontrast.

Tydzień 5: Tworzenie prototypów hi-fi

Po ponad miesiącu nauki (ty to zrobiłeś teraz w kilkanaście minut, gratulacje ?) przyszedł czas na połączenie ze sobą makiet i stworzenie prototypu hi-fi.

Prototyp: wczesny model produktu, który demonstruje jego funkcjonalność

Prototyp hi-fi (high fidelity) jest bardziej szczegółową, interaktywną wersją projektu, który jest zbliżony wyglądem do finalnego produktu. Składa się z następujących elementów:

• Elementy wizualne (np. kolorystyka, obrazki, typografia)
• Nawigacja, która pomaga poruszać się pomiędzy ekranami
• Interakcje (np. gesty, animacje)

Podczas tworzenia prototypu hi-fi, należy sobie odpowiedzieć na poniższe pytania:

• Jak użytkownik będzie się przemieszczał od jednego ekranu do kolejnego?
• Jak łatwe jest znalezienie nawigacyjnych ikon, typu strzałka do tyłu lub „iks” służący do zamknięcia okna?
• Na jakim etapie kończy się podróż użytkownika?

Google wyróżnia 6 kroków tworzenia prototypów hi-fi:

1. Przemyśl układ makiet.
2. Połącz ekrany.
3. Dodaj szczegóły związane z interakcjami.
4. Dostosuj animacje.
5. Uzupełnij wszystkie ekrany.
6. Podziel się swoją pracą.

Odkrywanie gestów i animacji

Nie tylko to, co widzi użytkownik, ale również to, jak to coś się zachowuje i co się w ogóle dzieje na ekranie, wpływa na doświadczenie użytkownika. Aby zadbać o doświadczenie kompleksowo, Google poleca sięgnięcie po gesty i animacje.

⬇️ GESTY ⬇️

Gesty: jakakolwiek metoda interakcji, jaką ma użytkownik z informacją zaprezentowaną na urządzeniu, za pomocą swojego dotyku.

Najbardziej popularne gesty, to tapnięcie, scrollowanie, swipe’owanie oraz przybliżanie i oddalanie.

Na stronie Material Design przeczytasz jeszcze więcej na temat gestów: Guide with animations of gestures. 

⬇️ ANIMACJE ⬇️

Animacje: sposób animowania statycznych elementów, żeby przyciągnąć uwagę użytkownika i opowiedzieć historię.

Tu właściwie Google jakoś się specjalnie nie rozwodził. Podał za to dwa artykuły, z którymi warto się zapoznać:

• The Role of Animation and Motion in UX od Nielsen Norman Group
• Motion Manifesto na Medium.

Dodawanie gestów i animacji

Na początek Google wyjaśnia trzy rodzaje interakcji:

1. Trigger/Hotspot: określa, jaki rodzaj interakcji musi się wydarzyć, żeby ruszyć dalej. Może być to na przykład tapnięcie.
2. Akcja: określa, co się stanie, gdy użytkownik podejmie działanie. Czy ma zostać przeniesiony do kolejnego ekranu, czy się cofnąć i temu podobne.
3. Destynacja: miejsce, gdzie znajdzie się użytkownik po dokonaniu akcji.

Kolejnym krokiem jest dodanie animacji. Określa to, w jaki sposób jeden ekran przemieszcza się do następnego. W Figmie masz do wyboru osiem rodzajów animacji: instant, dissolve, smart animate, move in, move out, push, slide in, slide out.

Inne sposoby na wzbogacenie prototypu hi-fi

W swoim prototypie możesz też uwzględnić inne rzeczy:

• Dźwięk: zwiększa użyteczność, przekazując użytkownikom informacje zwrotne na temat podjętych przez nich działań.
  • Poprawia wrażenia użytkownika, ponieważ ludzie reagują emocjonalnie na dźwięki.
  • Dźwięk humanizuje interakcje.
  • Pamiętaj, że powinieneś ułatwić użytkownikom wyłączenie dźwięku, jeśli zdecydują się go nie używać.
• Wideo: zwiększa immersję użytkownika i wzbudza zainteresowanie użytkowników podczas interakcji z twoim prototypem.
  • To jeden ze sposobów na natychmiastowe przyciągnięcie uwagi użytkownika i skupienie go na określonym obszarze aplikacji.
  • Użytkownicy są również bardziej skłonni do korzystania z aplikacji lub dłuższego przebywania na stronie internetowej, gdy dodano wideo.
  • Używając wideo we własnych projektach, upewnij się, że użytkownicy mogą regulować głośność, odtwarzać wideo i zatrzymywać je.
  • Ponadto użytkownicy powinni mieć możliwość automatycznego wyciszenia filmu lub zatrzymania automatycznego odtwarzania filmów, jeśli nie są zainteresowani treścią.

Na koniec standardowe uzupełnienie wiedzy ⤵️

• Wskazówki od Toptal na temat dodawania dźwięku do projektu: Sound Advice: A Quick Guide to Designing UX Sounds.
• Nielsen Norman Group, które wyjaśnia kilka heurystyk dla UI: 10 Usability Heuristics For User Interface Design.
• Lista najlepszych praktyk związanych z dodawaniem wideo od UX Collective: Best Practices for Video.

Tydzień 6: Testy i iteracja w projektowaniu

Kolejna duża rzecz, która przy moich możliwościach czasowych zajęła mi blisko tydzień. Mowa o przeprowadzeniu testów użyteczności z rzeczywistymi użytkownikami. Jeśli czytałeś mój poprzedni wpis, wiesz już sporo o przeprowadzaniu badań UX. Jeżeli tego nie zrobiłeś, to przed tobą szybka powtórka najważniejszych informacji.

Zaplanowanie i przeprowadzenie testów użyteczności

Żeby zaplanować swoje badania UX, niezbędny będzie konkretny plan. Składa się z siedmiu elementów:

• Tło badania
• Cele badania
• Pytania badawcze
• KPI
• Metodologia
• Uczestnicy
• Skrypt

Przy okazji robienia tego kursu zastanawiałam się, czy powinnam zaprosić do drugich testów użyteczności tych samych użytkowników, których zaprosiłam do moich pierwszych badań. Odpowiedź jest prosta: nie. Moim głównym źródłem informacji był artykuł od UX Collective, Should you reuse participants in your next usability study?

Kluczowe wnioski wyciągnięte z tego artykułu:

• Dotychczasowa znajomość nas i naszego projektu wpłynie na wyniki badań i sprawi, że rezultaty będą mniej wymierne.
• Działania wcześniejszych uczestników będą wyuczone, nie naturalne – dlatego ciężej będzie sprawdzić, co rzeczywiście sprawia im trudność.
• Dotychczasowy uczestnik badania przestaje być zwykłym użytkownikiem, a staje się krytykiem projektowania. Znając już produkt, przestaje się zachowywać jak zwykły użytkownik.
• Jeżeli do badań zapraszasz ciągle te same osoby, istnieje duże ryzyko, że projekt tworzysz dla nich, nie dla większej grupy osób.
• Osoby, które będą brać ponownie udział w testach, mogą okazać się „najgłośniejsze” i być interpretowane przez interesariuszy, jako reprezentatywna grupa.
• Podejście iteracyjne zakłada, że każdy nowy projekt będzie testowany przez nową grupę osób.

Analizowanie i syntetyzowanie wyników testów użyteczności

Gdy zbierzesz, uwierz mi, naprawdę sporo danych na temat swojego projektu, musisz następnie wyłuskać z nich to, co najważniejsze. Chodzi o zamianę obserwacji w praktyczne insighty. W ramach przypomnienia, insight to obserwacja, która pomaga zrozumieć użytkowników i ich potrzeby z nowej perspektywy. Insight pomaga zrozumieć, co oznaczają dane i co należy z nimi zrobić.

Jak krok po kroku stworzyć insight?

• Zbierz dane w jednym miejscu.
• Zorganizuj dane.
• Odnajdź wzorce w danych.
• Stwórz listę insightów na podstawie tych wzorców.

Cechy mocnych insightów:

• Są oparte o prawdziwe dane.
• Odpowiadają na pytania badawcze.
• Łatwe w zrozumieniu.
• Wzmacniające empatię wobec użytkowników.
• Inspirujące do konkretnej akcji.
• Pozwalające poprawić produkt.

Jedną z metod, która może tobie pomóc odnaleźć wspólne wzorce, jest diagram podobieństwa.

Gdy już stworzysz insighty, pamiętaj żeby nadać im również priorytety. Wspominałam o tym w moim poprzednim artykule. Poniżej trzy rodzaje priorytetów:

• P0 = Rzeczy, które muszą być naprawione, żeby produkt mógł działać.
  • Wszystko, co stoi na drodze do ukończenia przez użytkownika zadania.
  • Wszelkie zwodnicze wzorce.
  • Rzeczy, które są niedostępne dla wybranej grupy użytkowników.
• P1 = Rzeczy, które uwzględnisz w kolejnym prototypie i przetestujesz.
• P2 = Do zaadresowania w dalszej przyszłości.

Iteracja projektów hi-fi

Kiedy możesz powiedzieć, że twój projekt jest skończony? Zawsze przychodzi moment, w którym będziesz musiał zatrzymać się ze swoimi poprawkami i przesłać projekt do programistów. Jak podjąć tę trudną decyzję? Czynniki mogą być zewnętrzne, na przykład skończy się czas lub pieniądze. Możesz jednak też sam powiedzieć „Basta, już więcej nie poprawiam”. Kiedy możesz sobie na to pozwolić?

Google poleca poniższe pytania, które pomogą tobie zdecydować, czy to już koniec projektowania:

• Czy projekt odzwierciedla zamierzone doświadczenie użytkownika?
• Czy wszystkie zastępcze materiały (teksty, ikony, zdjęcia) zostały zamienione na te docelowe?
• Czy użytkownicy mogą korzystać z aplikacji bez zewnętrznego prowadzenia?
• Czy projekty są zgodne z istniejącym design systemem?
• Czy projekty są zgodne ze wspólnymi wzorcami interakcji dla odpowiednich platform?
• Czy użytkownicy mają jasną ścieżkę, gdy coś pójdzie nie tak?
• Czy projekt jest inkluzywny?

Gdy uzbierasz odpowiednią liczbę „tak”, możesz wysłać swój projekt na tak zwaną produkcję. ? Przerażające? Dla mnie tak. Google uspokaja, że każdy projekt, nawet po wypuszczeniu na rynek, wymaga kolejnych aktualizacji – to normalne zjawisko.

Więcej wskazówek na temat tego, kiedy twój projekt jest gotowy, znajdziesz w artykule od Medium oraz od UX Planet.

A teraz uwaga, poproszę werble!

?

?

?

Oto mój pierwszy prototyp hi-fi! Oto aplikacja Creatour! ?

Udokumentowanie i dzielenie się projektem

Myślisz, że zaprojektowałeś produkt i na tym kończy się twoja praca. Co to, to nie! Jak współpracować z członkami zespołu, żeby skutecznie przekazać to, co się zaprojektowało i ułatwić rzeczywiste stworzenie produktu?

Kilka lekcji od Figmy:

• Stwórz niestandardowe miniatury (funkcja: Thumbnail): możesz w nich zawrzeć różne informacje. Zewnętrzne linki, specyfikacje, aktualny status projektu, ilustracje i obrazy oraz temu podobne. Dzięki temu inne osoby z projektu mogą w łatwy sposób wyświetlić te informacje.
• Zaproś do współpracy nad projektem (funkcja: Invite): dzięki temu otrzymasz komentarze do swojego projektu dużo wcześniej i osoby będą z nim na bieżąco.
• Panel sprawdzania dla widoku osoby wyświetlającej projekt (funkcja: Inspect): gdy oznaczysz obiekty w swojej ramce, w panelu sprawdzania wyświetlą się informacje na jego temat. Można w ten sposób wyświetlić specyfikacje, a także kod, który pomoże zaprogramować to, co stworzyłeś.
• Eksportowanie elementów projektu (funkcja: Export): żeby wyeksportować jakiś element, na przykład ikonę, oznaczamy go, a następnie klikamy w opcję „Export”. Za jednym razem można wyeksportować elementy o różnych rozdzielczościach, dzięki opcji plusika. Można również zmienić format eksportu pliku. Do wyboru masz formaty: PNG, JPG, SVG, PDF.

Dodawanie case study do portfolio

Ostatnią rzeczą jest ubranie swojej pracy w opowieść i pokazanie tego światu. Chodzi oczywiście o case study, czyli prezentację projektu, która zwykle uwzględnia:

• Cele projektu.
• Rolę projektanta w projekcie.
• Opis procesu projektowego.
• Efekt końcowy projektu.

Stworzenie case study jest istotne, ponieważ uwiarygadnia twoją wiedzę projektową, a także pokazuję twoją chęć do współpracy w zespole oraz umiejętność przeanalizowania pomysłu od początku do końca, pomimo przeciwności.

Każdy projekt, jaki stworzysz, powinien mieć własne case study. 

Kilka ważnych wskazówek od Google na temat tego, jak powinno wyglądać Twoje case sudy:

• Zwięzłe i angażujące.
• Pomaga rekruterom szybko i efektywnie dowiedzieć się tego, czego chcą (czyli sprawdzić, czy potrafisz to, czego oczekują).
• Musi był ładne wizualnie i łatwe do przeskanowania.
• Nie umieszczaj wszystkich informacji, tylko te najbardziej kluczowe.
• Trzymaj się narracji opartej o pięciostopniowy proces projektowy.

Dodatkowo Google podaje 10 informacji, jakie powinny pojawić się w twoim case study:

1. Twoja rola w projekcie.
2. Cel projektu.
3. Grupa docelowa.
4. Kluczowe wyzwania.
5. Rezultaty badań.
6. Wstępne koncepcje lub strategia projektowa.
7. Twoje szkice i wireframe’y.
8. Rezultaty testów z użytkownikami.
9. Twój ostateczny projekt.
10. Wnioski.

Bonusowa lektura na temat tworzenia case study ⤵️

• Trip Tribe: A tale of UX auditing and designing through gifs. 
• InVision krok po kroku wyjaśnia, jak napisać case study: How to write a UX case study. W środku znajdziesz też kilka antyprzykładów.
• Przykłady i szablony od AdobeXD: Case Study Template and Example.
• Przykład case study od Shabi, jednej z prowadzących kurs Google: Scapes

A jeśli interesuje ciebie, jak może wyglądać czyjeś PIERWSZE W ŻYCIU case study, to podrzucam tobie przykład ode mnie ⤵️

______________________________

Łuhuuuuuu! To była długa droga, ale dostałam swój kolejny dyplom ⤵️ Jeśli chcesz mieć podobny, zajrzyj na tę stronę: Conduct UX Research