Jak zaprojektować ekran, który prowadzi użytkownika za rękę
Użytkownik otwiera ekran i się zatrzymuje. Nie dlatego, że jest mało rozgarnięty. Dlatego, że ekran nie mówi mu, co jest najważniejsze. Wszystko rzuca się w oczy: pięć przycisków tej samej wielkości, trzy linki w nagłówku, baner na górze, powiadomienie z boku.
I wtedy w zespole pojawiają się dwie wygodne propozycje:
„Dodajmy tooltip, który to wyjaśni.”
„User się nauczy, jak trochę poużywa produktu.”
Obie omijają problem. Bo dobry ekran nie potrzebuje instrukcji — on prowadzi wzrokiem, zanim użytkownik zacznie cokolwiek czytać. Jeśli musisz to tłumaczyć dymkiem, to znaczy, że układ już przegrał.
Dlatego dobre pytanie nie brzmi „czego tu brakuje?”, tylko:
„Czy ten ekran mówi mi, co zrobić najpierw — zanim przeczytam jedno słowo?”
Prowadzenie za rękę to hierarchia, nie dekoracja. „Prowadzić użytkownika” nie znaczy dodawać strzałki albo napis „kliknij tutaj”. Znaczy zaprojektować ekran tak, żeby oko samo, bez wysiłku, wiedziało, w jakiej kolejności na niego patrzeć. To gra w priorytety wizualne, a nie w estetykę.
Poniżej znajdziesz sześć mechanizmów, które pomogą Ci zaprojektować intuicyjny ekran.
1) Jedna główna akcja na ekran
Jeśli trzy przyciski wyglądają tak samo ważnie, użytkownik traci pół sekundy na zgadywanie, który wybrać. Pomnóż to przez każdy ekran w produkcie, a masz produkt, który męczy.
Co zrobić:
Na każdym ekranie wybierz jedną akcję, która ma być najbardziej oczywista i tylko ona dostaje pełny kontrast (np. wypełniony przycisk w kolorze marki). Reszta to akcje drugorzędne: subtelniejsze, mniejsze, cichsze.
2) Hierarchia wizualna to hierarchia ważności
Rozmiar, kontrast, odstępy to nie ozdobniki, to informacja. Jeśli wszystko jest pogrubione, nic nie jest ważne. Jeśli cała treść ma ten sam rozmiar, użytkownik musi przeczytać całość, żeby zrozumieć, co się liczy.
Co zrobić:
Zdecyduj, co na ekranie jest najważniejsze, co drugorzędne, a co można pominąć przy pierwszym spojrzeniu. Potem oddaj to wielkością i kontrastem, nie słowami.
3) Jedna ścieżka dla oka zamiast rozproszonych elementów
Oko czyta w miarę przewidywalny sposób. Zwykle od góry do dołu, zgodnie z tym, co najbardziej rzuca się w oczy. Jeśli ważne elementy są porozrzucane po całym ekranie, użytkownik musi budować własną mapę zamiast iść gotową ścieżką.
Co zrobić:
Ułóż elementy w kolejności, w jakiej mają być odebrane: nagłówek, kontekst, akcja. Jedna logiczna linia, nie zestaw wysp.
4) Ukryj to, co drugorzędne
Chęć pokazania wszystkiego na raz („może komuś się przyda”) to najczęstszy sposób na zepsucie prowadzenia. Każda dodatkowa opcja na pierwszym planie to o jeden wybór więcej, zanim użytkownik dojdzie do sedna.
Co zrobić:
Zaawansowane opcje, ustawienia, edge case'y chowaj za „Pokaż więcej” albo w osobnym miejscu. Pierwszy plan należy do tego, czego potrzebuje 90% ludzi w tym momencie.
5) Podpowiadaj w miejscu, nie z boku
Panel pomocy, który trzeba otworzyć osobno, prawie nikt nie otwiera. Dobra podpowiedź jest tam, gdzie pojawia się pytanie, a nie obok, nie „gdzieś w dokumentacji”.
Co zrobić:
Używaj placeholderów z przykładem („np. Jan Kowalski”), krótkiego opisu pod polem zamiast osobnego FAQ, pustych stanów, które od razu podpowiadają pierwszy krok.
6) Powtarzalność, żeby nie uczyć na nowo
Jeśli przycisk „Dalej” raz jest po prawej, raz po lewej, a czasem u góry, użytkownik za każdym razem musi go szukać od nowa. To niewidoczny podatek płacony na każdym ekranie.
Co zrobić:
Trzymaj te same wzorce w tych samych miejscach w całym produkcie. Konsystencja to prowadzenie za rękę rozłożone na cały produkt, nie tylko jeden ekran.
Mały test: zmruż oczy
Otwórz swój ekran i zmruż oczy na tyle, żeby rozmazał się cały tekst. Zostanie tylko rozmieszczenie kształtów, kolorów i kontrastu.
Zadaj sobie pytanie: co nadal widać najwyraźniej?
Jeśli to, co powinno być najważniejsze, ginie w rozmyciu razem z resztą to hierarchia nie działa. Jeśli wyraźnie widać jeden element, który przyciąga wzrok jako pierwszy to jesteś na dobrej drodze. To test, który robisz w 10 sekund, a mówi więcej niż niejedna dyskusja o designie.
Ekran, który trzeba tłumaczyć dymkiem, to ekran, który już przegrał. Prowadzenie za rękę nie polega na dodawaniu wskazówek. Polega na takim ułożeniu tego, co już tam jest, żeby wskazówki były zbędne.
Jeśli masz zapamiętać jedno zdanie z tego wpisu, to:
Dobry ekran mówi, co zrobić, zanim użytkownik zdąży o to zapytać.