UX i UI strony — od struktury do interfejsu

UX opisuje, czy użytkownik potrafi wykonać swoje zadanie, a UI — jak wygląda i zachowuje się interfejs. Atrakcyjny projekt powinien pomagać znaleźć usługę, porównać informacje i przejść do kontaktu.

Zacznij od zadania użytkownika

Zapisz drogę nowej osoby: wejście z Google, rozpoznanie oferty, sprawdzenie realizacji i wysłanie pytania. Na każdym kroku wskaż potrzebną informację i następne działanie. Tak powstaje struktura menu i treści, zanim dobierzesz kolor czy animację.

Nazwy pozycji w menu powinny jasno zapowiadać zawartość. Zbyt ogólne hasła utrudniają ocenę, gdzie znajduje się oferta lub kontakt. Wersja mobilna wymaga osobnego sprawdzenia, zwłaszcza jeśli zawiera rozwijane podmenu.

Hierarchia wizualna i czytelność

Ustal spójną typografię, odstępy, kontrast i sposób wyróżniania przycisków. Najważniejsze działanie powinno być łatwe do zauważenia bez konkurowania z wieloma podobnymi przyciskami. Tekst na zdjęciu musi pozostać czytelny również na węższym ekranie.

Projektuj stany ładowania, brak wyników, błędy i powodzenie operacji. Formularz powinien wskazać pole do poprawy i zachować już wpisaną treść. Nie wymagaj od użytkownika zgadywania, czy kliknięcie zostało przyjęte.

Animacje z konkretną funkcją

Ruch może pokazać zmianę stanu lub otwarcie sekcji. Nie powinien blokować dostępu do treści, przejmować przewijania ani utrudniać użycia klawiatury. Uwzględnij preferencję ograniczenia ruchu i możliwość zatrzymania automatycznej karuzeli.

Animacja nie dowodzi skuteczności. Oceniaj ją razem z szybkością, czytelnością oraz tym, czy użytkownik łatwiej kończy zadanie.

Test zamiast domysłów

Poproś osobę spoza projektu o znalezienie konkretnej usługi i wysłanie testowego zapytania. Obserwuj momenty zawahania, a następnie popraw nazewnictwo, kolejność i komunikaty. Sprawdź też obsługę samą klawiaturą i powiększenie tekstu.

W DeepHelp opisanym w portfolio zadaniem jest m.in. przejście do rezerwacji. Ten przykład pomaga oddzielić cel interfejsu od dekoracji; nie stanowi dowodu wzrostu konwersji bez osobnego pomiaru.

Przykład z portfolio

DeepHelp — strona usługowa z rezerwacją usług online. Opis realizacji pokazuje wykonany zakres; nie przypisujemy mu wyników sprzedaży bez osobnego pomiaru.