Projektowanie UX / UI
Dobre projektowanie interfejsu polega głównie na usuwaniu momentów wahania. Rozrysowujemy ścieżkę, którą naprawdę idzie użytkownik, i projektujemy ekrany, które go po niej prowadzą.
Projekt zaczyna się od zadania, nie od ekranu
Zanim cokolwiek zostanie narysowane, warto zapytać, co osoba przed ekranem próbuje zrobić. Porównać dwa produkty przed zakupem. Sprawdzić, czy dowozisz pod jej adres. Zrezygnować z czegoś bez dzwonienia. Zweryfikować liczbę, którą pamięta mgliście.
To te zadania wyznaczają strukturę. Podstrona obsługująca kogoś, kto dopiero decyduje, czy Ci zaufać, potrzebuje innych treści w innej kolejności niż podstrona dla kogoś, kto już zdecydował i chce to załatwić. Projektowanie bez wiedzy, którą z tych osób obsługujesz, kończy się ekranem, który połowicznie działa dla obu.
Dlatego prosimy o dostęp do wszystkiego, co już wiadomo. Analityka pokazuje, gdzie ludzie wychodzą. Zgłoszenia do obsługi pokazują, co zdezorientowało ich na tyle, żeby napisać. Jedno i drugie jest uczciwsze niż wewnętrzna opinia o tym, czego chcą użytkownicy.
Gdzie interfejsy naprawdę gubią ludzi
Porażki rzadko są spektakularne. To drobne wahania, które się sumują:
Decyzja wymuszona za wcześnie. Kazanie komuś wybrać wariant albo pakiet, zanim dostał informacje potrzebne do wyboru, kończy się porzuceniem albo złym wyborem, na który potem narzeka.
Etykiety pisane od środka. Nawigacja używająca Twoich wewnętrznych nazw jest niewidoczna dla kogoś, kto u Ciebie nie pracuje.
Formularze pytające o więcej, niż trzeba. Każde dodatkowe pole to mniej wypełnionych formularzy. Część jest tego warta, większość stoi tam, bo nikt tego nie podważył od czasu powstania formularza.
Brak widocznej drogi powrotnej. Krok, który zamyka użytkownika bez wyjścia, zamienia chwilę wątpliwości w zamkniętą kartę przeglądarki.
Brakujące stany. Interfejs zaprojektowany na sytuację, w której wszystko działa. Potem wyszukiwarka nic nie znajduje, płatność się nie udaje, lista pierwszego dnia jest pusta, a ekran nie ma nic sensownego do powiedzenia.
Żadna z tych rzeczy nie wymaga przebudowy. Wymaga tego, żeby ktoś je zauważył.
Najpierw struktura, potem warstwa wizualna
Pracujemy najpierw na makietach, celowo bez koloru i zdjęć, bo dzięki temu rozmowa trzyma się hierarchii, kolejności i nawigacji, dopóki są tanie do zmiany.
Przesunięcie sekcji w szarej makiecie jest o wiele łatwiejsze niż w gotowym ekranie, do którego wszyscy zdążyli się przywiązać. To rozdziela też dwa rodzaje uwag, które inaczej spływają pomieszane: czy struktura jest dobra i czy stylistyka się podoba. Obie są ważne, ale rozstrzyganie ich naraz zwykle oznacza, że żadna nie zostaje rozstrzygnięta porządnie.
Kiedy struktura się broni, warstwa wizualna ma czemu służyć. Typografia, odstępy, kolor i ruch dostają wtedy konkretne zadanie: pokazać hierarchię, dać znać, co jest klikalne, potwierdzić, że coś się wydarzyło.
Spójność to system, nie samodyscyplina
W projekcie o dowolnej wielkości spójności nie da się utrzymać samą starannością. Dwudziesty ekran odjeżdża od pierwszego, bo ktoś potrzebował trochę innego przycisku i go zrobił.
Dlatego budujemy bibliotekę komponentów, a nie zestaw podstron. Przyciski, pola formularzy, karty, skala odstępów, skala typografii, stany. Nowe ekrany składa się z części, które mają już uzgodnione zachowanie, więc szybciej się je projektuje i szybciej wdraża. Kiedy piszemy też kod, ta biblioteka żyje w Storybooku obok implementacji, dzięki czemu projekt i kod nie rozjeżdżają się z czasem.
Test kończy spór szybciej niż dyskusja
Najtańszy sposób na zakończenie sporu o interfejs to popatrzeć, jak pięć osób próbuje z niego skorzystać.
Prototypujemy i testujemy przed wdrożeniem, dając uczestnikom realne zadanie zamiast oprowadzania po ekranach. Szukamy wahania: pauzy przed kliknięciem, przewinięcia z powrotem w górę, pewnego siebie skrętu w złą stronę. Te momenty pokazują rozjazd między tym, co zakłada projekt, a tym, czego spodziewa się człowiek.
Po uruchomieniu obowiązuje ta sama zasada, tylko z innymi narzędziami. Analityka i nagrania sesji pokazują miejsca rezygnacji, a każde z nich jest hipotezą wartą sprawdzenia. Warto przy tym pamiętać, że dane mówią, gdzie ludzie odpadają, ale nie mówią dlaczego. Powód nadal trzeba znaleźć, patrząc na konkretny ekran. Interfejsy nie stają się dobre za pierwszym podejściem. Stają się dobre, bo ktoś regularnie patrzy, gdzie zawodzą, i ma odwagę je zmienić.
Co dostajesz
Ścieżki użytkownika i spis ekranów
Drogi, którymi ludzie poruszają się po produkcie, czego potrzebują na każdym kroku i gdzie dziś rezygnują. To zamienia listę podstron w konkretny brief projektowy.
Makiety i architektura informacji
Struktura, nawigacja i hierarchia treści ustalone, zanim ktokolwiek dobierze kolory, bo to właśnie te decyzje najdrożej się później zmienia.
Projekt interfejsu
Ekrany zaprojektowane w Figmie dla realnych szerokości, razem ze stanami pustymi, ładowania i błędu, które w ładnej makiecie zwykle się pomija.
Biblioteka komponentów
Powtarzalny zestaw przycisków, formularzy, kart i zasad układu, dzięki któremu dwudziesty ekran wygląda jak pierwszy i nie powstaje od zera.
Dostępność od początku
Czytelny kontrast, obsługa klawiaturą, stany focus i sensowna struktura nagłówków jako część projektu, a nie osobny audyt zgodności na końcu.
Audyt UX tego, co już masz
Uporządkowana lista konkretnych punktów tarcia w istniejącej stronie lub aplikacji, z zaznaczonym kosztem i spodziewanym efektem każdej poprawki.
Jak pracujemy
- 01
Rozumiemy zadanie, nie tylko podstronę
Zaczynamy od tego, co ktoś próbuje załatwić i z jaką wiedzą przychodzi. Rozmowy, istniejąca analityka i zgłoszenia do wsparcia są tu równie przydatnym materiałem.
- 02
Rysujemy ścieżkę i szukamy miejsc rezygnacji
Rozkładamy całą drogę do celu i zaznaczamy kroki, w których ludzie się zatrzymują: niewyjaśnione pole formularza, decyzję wymuszoną za wcześnie, ślepy zaułek bez powrotu.
- 03
Makietujemy strukturę
Proste makiety, żeby ustalić hierarchię i nawigację, dopóki zmiany są tanie. O makietę spiera się znacznie łatwiej niż o gotowy ekran.
- 04
Projektujemy interfejs i jego stany
Warstwa wizualna nakładana na uzgodnioną strukturę, razem z niewygodnymi stanami, na szerokościach ekranu, które faktycznie widać w Twojej analityce.
- 05
Testujemy, przekazujemy, poprawiamy
Dajemy projekt ludziom z konkretnym zadaniem, poprawiamy to, co ich zatrzymuje, i przekazujemy pliki oraz komponenty, z których programista zbuduje interfejs bez zgadywania.
Narzędzia i technologie
Tam, gdzie istnieje dobre narzędzie open source, wybieramy je zamiast zamkniętego. Bez uzależnienia od jednego dostawcy i z kosztami, które da się przewidzieć.
- Penpot
- Storybook
- React
- Next.js
- Tailwind CSS
- shadcn/ui
- Radix UI
- PostHog
- Lighthouse
- Figma
- FigJam
- axe DevTools
Najczęściej zadawane pytania
Powiązane realizacje
Pozostałe usługi w tej kategorii
Strony internetowe i aplikacje webowe
Dobra strona jasno mówi, czym się zajmujesz, i ułatwia zrobienie następnego kroku. Budujemy strony, które szybko się ładują, dobrze się czyta i da się je rozwijać razem z firmą.
Branding i identyfikacja wizualna
Branding to nie tylko logo. To zestaw decyzji, dzięki którym Twoja firma jest rozpoznawalna w feedzie, na fakturze i na ekranie telefonu, zanim ktokolwiek przeczyta nazwę.
Optymalizacja istniejącej strony
Nie zawsze trzeba zaczynać od zera. Sprawdzamy stronę, którą już masz, znajdujemy to, co naprawdę ją hamuje, i mówimy, które poprawki są warte pieniędzy.
Przeczytaj opinie firm, które nam zaufały
Dostarczone znacznie wcześniej niż termin.
Indywidualne podejście ZanReal jest imponujące.
Wiedza i intuicja biznesowa czynią ich wartościowym partnerem.
Szybkie rozwiązania, które obniżyły koszty o 99%.
+20% dostarczalności dla naszych kampanii e-mail.
Najnowsze
Poradniki techniczne, bezpieczeństwo i nasze doświadczenia z budowania rozwiązań AI.
Użytkownicy gubią się gdzieś między wejściem a celem?
Napisz do nasOpisz, na którym ekranie lub kroku ludzie najczęściej rezygnują, a zaproponujemy, czy zacząć od audytu UX, czy od przeprojektowania tej ścieżki.
Nie nadążasz za zmianami w świecie AI?
Pozwól, że weźmiemy to na siebie. Co tydzień destylujemy najważniejsze wydarzenia ze świata AI w skupiony, 5-minutowy przegląd — żebyś był na bieżąco bez szumu.
Dowiedz się więcej