Her Way To IT – moduł UX – zadanie domowe

Her Way To IT – moduł UX

Dominika Zaremba, nasza ekspertka przygotowała dla Was 2 zadania. Oto one:

Zadanie 1

Audyt UX

W tym zadaniu możesz :

• nauczyć się systematycznie analizować użyteczność wybranej strony internetowej,
• nazywać rodzaje problemów z użytecznością,
• przygotować informację zwrotną, którą możesz podzielić się z właścicielem strony!

Czego potrzebujesz?

1. Przeglądarki Google Chrome.
2. Wtyczki https://www.heurio.co/. Zainstaluj ją i dodaj do Chrome.
3. Zapoznać się z zaleceniami dobrej użyteczności, na przykład: po angielsku albo po polsku. Nie musisz być ekspertką – przeczytaj kilka artykułów, żeby wyrobić sobie podstawową intuicję!

Jak zacząć?

1. Kiedy zainstalujesz wtyczkę Heurio, wejdź na wybraną przez siebie stronę.
2. Włącz Heurio – to ta ikona w toolbarze

1. Wybierz tryb komentowania (“Comment view”).

Co robić?

1. Rzuć okiem na całą stronę. Czy jasny jest jej cel? Czy jesteś w stanie łatwo się w niej odnaleźć?
2. Teraz systematycznie, sekcja po sekcji przejrzyj całą stronę, aby znaleźć jej mocne i słabe strony.
3. odawać do strony 3 rodzaje informacji zwrotnej:

3. notatki (note) – czy coś przyciąga Twoją uwagę?
4. sugestie (suggestion) – czy coś można zrobić lepiej?
5. zalecenia (guideline) – czy jakiś element strony narusza zalecenia dobrego projektowania? Polecam zdecydować się na jeden z guideline’ów, np. Nielsen’s 10 Usability Heuristics)

Spójrz na przykład poniżej. Dodałam sugestię dotyczącą wyglądu jednej z sekcji strony internetowej pewnej szkoły podstawowej.

Dodałam też komentarz dotyczący niezrealizowanego zalecenia dobrego projektowania wg Nielsena – zapewnienie skutecznej obsługi błędów. Jeśli jako użytkownik błędnie weszłam na starą stronę szkoły, nie mogłam tego od razu rozpoznać (musiałam “zescrollować”, żeby zobaczyć komunikat) ani łatwo “naprawić błędu” – nie mogłam przejść na nową stronę kliknięcie w link.

4. Kiedy skończysz dodawać komentarze, ponownie kliknij w ikonkę heurio, i zobacz wszystkie komentarze, które dodałaś do danej strony internetowej.  W prawym górnym rogu znajdziesz opcję “Export project”. Heurio automatycznie utworzy stronę z podsumowaniem twoich uwag. Teraz możesz wysłać link do Twoich uwag do właściciela strony, żeby udzielić mu cennego feedbacku!

Zadanie 2

Projektowanie UX

W tym zadaniu możesz :

• zaprojektować proste i przyjemne doświadczenie dla użytkownika sklepu internetowego
• nauczyć się rozkładać na części skomplikowane procesy
• spróbować narysować zgrubny prototyp

Czego potrzebujesz?

1. Kartki papieru, małych karteczek samoprzylepnych, najlepiej w trzech kolorach, kawałka ściany, długopisu. Możesz też użyć apki, na przykład https://miro.com/app/

Co robić?

1. Wyobraź sobie, że Twoim zadaniem jest zbudować proces sprzedaży jakiegoś produktu dla dowolnego klienta.
   a) UWAGA! Inne kroki będziesz musiała zaplanować, jeśli będziesz projektować proces sprzedaży biletów lotniczych, a inny dla księgarni internetowej.
   b) Dla uproszczenia zajmiemy się przypadkiem, w którym klient kupuje tylko jedną rzecz.
2. Weź samoprzylepną karteczkę i napisz na niej “Klient wszedł na stronę produktu”. To będzie pierwszy krok.
3. Teraz zastanów się, co musi się stać, żeby klient z sukcesem przeszedł do kolejnego kroku. Zapisz, co się stanie, kiedy klient wykona kolejną czynność.
   1. Uwaga! Zwróć uwagę, w jakiej formie gramatycznej piszesz. Warto pisać o zdarzeniach w systemie czasie przeszłym i bardzo konkretnie, na przykład “Produkt został dodany do koszyka”, albo “Przycisk kup teraz został kliknięty”.
4. Wykorzystaj kolejne karteczki, aby zapisywać kolejne kroki klienta. Jeszcze nie musisz zastanawiać się nad chronologią zdarzeń. Dodaj jak najwięcej karteczek. Zapisuj wszystko, co przychodzi Ci do głowy, jak najbardziej szczegółowo. Przykład:

7. Poorganizuj karteczki, przyklejając je na ścianie w kolejności chronologicznej. Czasami różne wersje kolejności są prawidłowe – zastanów się, jaka będzie najwygodniejsza dla użytkownika.
8. Jeśli masz karteczki w trzech kolorach, teraz użyj karteczek w drugim kolorze (np. czerwonym), żeby zaznaczyć wszystkie miejsca, w których coś może…. pójść nie tak. Co jeśli użytkownik wprowadzi niepoprawny numer telefonu? Co jeśli w magazynie nie ma danego produktu? Co jeśli płatność zostanie odrzucona? Wyszukaj wszystko, co może pokrzyżować zakupy użytkownika.

7. Teraz użyj karteczek w trzecim kolorze (np. żółty), żeby zaznaczyć wszystkie miejsca, w których możesz uprościć życie użytkownikowi albo pomóc mu wyjść z tarapatów. Może pole z mailem może uzupełnić się automatycznie? Może przycisk “do kasy” powinien być bardzo duży i dobrze widoczny? Może powinna być możliwość ponownego wprowadzenia kodu promocyjnego?

7. Dzieki temu ćwiczeniu świetnie rozumiesz, przez co będzie przechodził Twoich klient! Jesteś przygotowana na to, żeby narysować wstępny, zgrubny prototyp.

Jak zacząć tworzyć prototyp?

1. Zdecyduj się na format – aplikacja mobilna czy strona internetowa?
2. Możesz pracować na kartce papieru albo w prostej aplikacji, na przykład w Marvel app. Możesz też wydrukować gotowe wzorce, na przykład z tej strony.
3. Patrz na kolejne karteczki i przy pomocy prostych figur geometrycznych i napisów szkicuj kluczowe elementy interfejsu. Zobacz na przykładzie z aplikacji Marvel App, jak prosty powinien być Twój prototyp:

4. Kiedy skończysz odwzorowywać proces zapisany na karteczkach, sprawdź, czy dobrze się ze sobą łączą – wyobraź sobie klikanie w kolejne przyciski i wypełnianie pól. Jeżeli pracujesz a Marvel app, obejrzyj tutorial z łączenia ekranów w klikalny prototyp.
5. Jeżeli masz ochotę, możesz zadbać też o lepszy wygląd i funkcjonalność Twojego prototypu. Pokombinuj z ustawieniem i kolorystyką elementów. Sprawdź, jak zrobili to inni – zobacz, jak podobne strony wyglądają w innych aplikacjach, na przykład tu.

Jak użyć tego zadania w swoim portfolio?

1. Udokumentuj cały proces, nie tylko efekt – zrób zdjęcie ściany z karteczkami, żeby pokazać, że przemyślałaś ścieżkę użytkownika.
2. Wyślij potencjalnemu pracodawcy link do prototypu z Marvel app albo nagraj ekran, kiedy przechodzisz przez swój prototyp.
3. Wyeksponuj błędy i problemy – wykorzystaj je żeby pokazać, jak sobie z nimi poradziłaś.

Zadanie przygotowała Dominka Zaremba, ekspertka UX design w projekcie Her Way To IT