UX/UI Designer
Projektuj intuicyjne produkty, od pierwszego szkicu do testu z użytkownikiem.
Kompendium zawodu — pojęcia i zwroty
Pojęcia w pracy
- Prototyp
- Model interakcji używany do sprawdzenia rozwiązania przed pełnym wdrożeniem.
- Przepływ użytkownika
- Kolejność ekranów i decyzji od wejścia do osiągnięcia celu.
- Test użyteczności
- Obserwacja osoby wykonującej zadanie w projekcie lub działającym produkcie.
Zwroty w typowych sytuacjach
- „Pokaż mi, jak robisz to dzisiaj.”
- Prosisz o konkretne zachowanie zamiast o deklarację.
- „Sprawdźmy, co użytkownik zrobi po nieudanym zapisie.”
- Uzgadniasz ważną ścieżkę wyjątku w prototypie.
Podstawy · Lekcja 1 z 9
Rozpoznanie problemu
W rozmowie poproś o opis ostatniej konkretnej sytuacji. Dopytaj o cel, kontekst, użyte narzędzia i przeszkody. Zapisz obserwacje, a interpretacje zapisz osobno.
- Co zrobić najpierwZbierz obserwacje
- Co zrobić dalejRozpoznanie problemu
- Jak zakończyćSprawdź odpowiedź i wyjaśnij swój wybór
Zbierz obserwacje
Poproś użytkownika, żeby opowiedział, jak ostatnio wykonał to zadanie. Zapisz, gdzie utknął i co pomogło mu ruszyć dalej.
Ćwiczenie praktyczne
Zaproponuj trzy pytania o ostatni zwrot zakupów online. Ułóż je od najprostszego do najbardziej szczegółowego.
Sprawdź się — opcjonalne pytanie
Które pytanie zmniejsza ryzyko sugerowania odpowiedzi?
- Czy formularz był za długi?
- Jak wyglądał Twój ostatni zwrot od początku do końca?
- Czy nowa wersja byłaby wygodniejsza?
Pokaż odpowiedź i wyjaśnienie
Jak wyglądał Twój ostatni zwrot od początku do końca?. Pytanie otwarte zachęca do opisu zachowania i pozostawia użytkownikowi wybór istotnych szczegółów.
Podstawy · Lekcja 2 z 9
Cel użytkownika w kontekście
Zapisz kto wykonuje czynność, w jakiej sytuacji i jaki wynik jest dla niego ważny. Oddziel potrzeby od zaproponowanych funkcji. Traktuj pojedynczą obserwację jako wskazówkę do dalszego sprawdzenia.
- Co zrobić najpierwSytuacja
- Co zrobić dalejCel
- Jak zakończyćDowód lub pytanie badawcze
Przykład z pracy
Prośba o aplikację mobilną może wynikać z tego, że pracownicy sprawdzają grafik poza biurem. Rozwiązaniem do zbadania jest dostęp do aktualnego grafiku z telefonu.
Ćwiczenie praktyczne
Przepisz trzy prośby o funkcje jako potrzeby z kontekstem i oczekiwanym wynikiem.
Symulacja rozmowy
Jak wiesz, że zmiana interfejsu pomogła?
Porównaj z przykładową odpowiedzią
Ustalam kryterium wykonania zadania przed testem. Porównuję przebieg zadania i notuję powtarzające się problemy. Przy małej liczbie obserwacji opisuję wyniki jako obserwacje jakościowe.
Sprawdź się — opcjonalne pytanie
Który zapis opisuje potrzebę?
- Zbuduj ikonę z kalendarzem
- Chcę szybko sprawdzić, kiedy zaczynam zmianę, będąc poza biurem
- Dodaj czwartą zakładkę
Pokaż odpowiedź i wyjaśnienie
Chcę szybko sprawdzić, kiedy zaczynam zmianę, będąc poza biurem. Potrzeba opisuje cel i kontekst, pozostawiając miejsce na wybór rozwiązania.
Podstawy · Lekcja 3 z 9
Hierarchia informacji i dostępność
Kolejność treści powinna odpowiadać czynności. Nagłówki i etykiety mają pomagać przewidywać wynik. Rozróżniaj stan kolorem i tekstem, by użytkownik miał więcej niż jeden sygnał.
- Co zrobić najpierwKolejność
- Co zrobić dalejEtykieta
- Jak zakończyćStan dostępny bez koloru
Przykład z pracy
Lista rezerwacji wyróżnia odwołaną wizytę czerwienią i etykietą „Odwołana”. Główna akcja „Zmień termin” pojawia się przy konkretnej wizycie.
Ćwiczenie praktyczne
Narysuj kartę wizyty w trzech stanach. Sprawdź, czy każdy stan jest zrozumiały po usunięciu koloru.
Sprawdź się — opcjonalne pytanie
Co pozwala odróżnić stan bez widzenia koloru?
- Ciemniejsza czerwień
- Większa przezroczystość
- Tekstowa etykieta stanu
Pokaż odpowiedź i wyjaśnienie
Tekstowa etykieta stanu. Tekst zachowuje znaczenie niezależnie od rozróżniania barw.
Praca krok po kroku · Lekcja 4 z 9
Przepływ i prototyp
Zapisz punkt wejścia, cel i możliwe ścieżki alternatywne. Prototyp powinien odpowiadać na pytanie badawcze. Proste ekrany i realistyczna treść często wystarczą do sprawdzenia kolejności kroków.
- Co zrobić najpierwZaprojektuj przepływ
- Co zrobić dalejPrzepływ i prototyp
- Jak zakończyćSprawdź odpowiedź i wyjaśnij swój wybór
Zaprojektuj przepływ
Rozrysuj punkt wejścia, główną decyzję, wyjątek i wyjście z procesu. Przenieś je do prostego prototypu.
Ćwiczenie praktyczne
Narysuj przepływ rezerwacji terminu wraz ze ścieżką, w której wszystkie terminy są zajęte.
Sprawdź się — opcjonalne pytanie
Co warto uwzględnić oprócz ścieżki sukcesu?
- Stan braku wolnych terminów
- Kolejną wersję logo
- Pełną specyfikację animacji
Pokaż odpowiedź i wyjaśnienie
Stan braku wolnych terminów. Stan bez terminów pozwala przetestować ważną decyzję i zaprojektować następny krok.
Praca krok po kroku · Lekcja 5 z 9
Komponent i warianty stanu
Opisz zachowanie komponentu w stanach zwykłym, aktywnym, skupionym klawiaturą i niedostępnym. Dokumentuj zakres użycia i nazwy odpowiadające funkcji.
- Co zrobić najpierwKomponent
- Co zrobić dalejWariant stanu
- Jak zakończyćZasada użycia
Przykład z pracy
Przycisk w prototypie ma wariant zwykły, ładowanie i błąd akcji. Pole z błędem pokazuje dodatkową treść, która mieści się także na wąskim ekranie.
Ćwiczenie praktyczne
Zaprojektuj komponent pola rezerwacji w czterech stanach i podaj przykład użycia każdego.
Sprawdź się — opcjonalne pytanie
Czego wymaga prototyp do oceny błędu formularza?
- Widocznego stanu błędu z tekstem i drogą poprawy
- Kolejnej wersji logo
- Zastąpienia wszystkich tekstów szablonem
Pokaż odpowiedź i wyjaśnienie
Widocznego stanu błędu z tekstem i drogą poprawy. Stan błędu pokazuje, jak osoba rozpozna problem i będzie mogła dokończyć zadanie.
Praca krok po kroku · Lekcja 6 z 9
Scenariusz testu użyteczności
Zadanie powinno opisywać naturalny cel. Zdefiniuj kryteria powodzenia, pomocy i przerwania. Podczas obserwacji zapisuj fakty zamiast interpretować intencję uczestnika.
- Co zrobić najpierwCel zadania
- Co zrobić dalejObserwacja
- Jak zakończyćInterpretacja i hipoteza
Przykład z pracy
Zamiast polecenia „kliknij przycisk Zmień”, badacz prosi o przełożenie wizyty na przyszły tydzień. Notuje zawahanie przy nazwie zakładki i sposób znalezienia rozwiązania.
Ćwiczenie praktyczne
Napisz dwa zadania dla prototypu rezerwacji i formularz obserwacji do wypełnienia po każdym zadaniu.
Sprawdź się — opcjonalne pytanie
Co jest obserwacją?
- Nazwa zakładki na pewno jest zła
- Uczestniczka otworzyła trzy zakładki przed znalezieniem wizyty
- Uczestniczka nie lubi aplikacji
Pokaż odpowiedź i wyjaśnienie
Uczestniczka otworzyła trzy zakładki przed znalezieniem wizyty. Obserwacja opisuje przebieg, a wyjaśnienie wymaga dalszego sprawdzenia.
Trudniejsze sytuacje · Lekcja 7 z 9
Test zadaniowy
Daj uczestnikowi cel opisany jego słowami. Obserwuj miejsca zawahania i przebieg zadania. Zapisz wynik oraz sytuację, w której problem wystąpił, aby zespół mógł odtworzyć obserwację.
- Co zrobić najpierwSprawdź hipotezę
- Co zrobić dalejTest zadaniowy
- Jak zakończyćSprawdź odpowiedź i wyjaśnij swój wybór
Sprawdź hipotezę
Zadaj realistyczne zadanie. Zapisz, czy uczestnik je ukończył, gdzie się zawahał i co zrobił samodzielnie.
Ćwiczenie praktyczne
Zapisz zadanie dla uczestnika dotyczące zmiany terminu rezerwacji oraz dwa kryteria powodzenia.
Sprawdź się — opcjonalne pytanie
Która instrukcja pasuje do testu zadaniowego?
- Kliknij zielony przycisk po lewej
- Przewiń do sekcji i otwórz modal
- Przenieś rezerwację na przyszły tydzień
Pokaż odpowiedź i wyjaśnienie
Przenieś rezerwację na przyszły tydzień. Instrukcja wyznacza cel i pozwala samodzielnie znaleźć drogę w produkcie.
Trudniejsze sytuacje · Lekcja 8 z 9
Synteza badań i priorytet zmian
Połącz obserwacje opisujące ten sam problem. Uwzględnij wpływ na wykonanie zadania i kontekst wystąpienia. Powiąż proponowaną poprawkę z konkretnym dowodem.
- Co zrobić najpierwWzorzec obserwacji
- Co zrobić dalejWpływ na zadanie
- Jak zakończyćPonowna weryfikacja
Przykład z pracy
Trzy osoby ominęły opcję zmiany terminu, bo znajdowała się w ogólnym menu. Problem blokował zadanie. Zespół przenosi opcję do karty wizyty i ponownie sprawdza tę czynność.
Ćwiczenie praktyczne
Ułóż listę trzech problemów i przypisz priorytety. Dla każdego zanotuj dowód i sposób sprawdzenia po zmianie.
Sprawdź się — opcjonalne pytanie
Który problem ma zwykle wyższy priorytet?
- Nielubiany kolor w dekoracji bez wpływu na zadanie
- Najdłuższy opis w raporcie
- Powtarzający się błąd blokujący ważne zadanie
Pokaż odpowiedź i wyjaśnienie
Powtarzający się błąd blokujący ważne zadanie. Priorytet wynika z wpływu na wykonanie zadania i z dowodów, nie z długości opisu.
Trudniejsze sytuacje · Lekcja 9 z 9
Przekazanie projektu i kryteria odbioru
Przekaż przykłady, stany, reguły dostępności i zachowanie przy braku danych. Na odbiorze porównaj działające rozwiązanie z kryteriami i zapisz wyjątki.
- Co zrobić najpierwStany i wyjątki
- Co zrobić dalejKryteria
- Jak zakończyćOdbiór
Przykład z pracy
Projekt zmiany terminu opisuje brak dostępności, komunikat po zapisaniu, fokus po zamknięciu okna oraz wariant z bardzo długą nazwą placówki.
Ćwiczenie praktyczne
Spisz specyfikację jednego ekranu i trzy kryteria odbioru, które może sprawdzić tester.
Sprawdź się — opcjonalne pytanie
Które kryterium jest sprawdzalne?
- Po zamknięciu okna fokus wraca na element, który je otworzył
- Ekran wygląda profesjonalnie
- Zespół używa nowego stylu
Pokaż odpowiedź i wyjaśnienie
Po zamknięciu okna fokus wraca na element, który je otworzył. Kryterium definiuje czynność i obserwowalny wynik.