Usługa · Strony i aplikacje webowe

Projektowanie UI/UX

Dobry interfejs zaczyna się od pytania, co użytkownik ma załatwić, a dopiero potem od wyboru kolorów. Pacjentka przychodni chce zapisać się na wizytę w dwie minuty, magazynier chce jednym kciukiem potwierdzić przyjęcie towaru, a księgowa kontrahenta chce pobrać fakturę bez szukania. Piękny ekran, na którym nie da się znaleźć przycisku „Zamów”, jest gorszy od nudnego, bo maskuje problem ładnym obrazkiem i trudniej go zakwestionować.

Makiety
przed grafiką
Mobile first
w każdym projekcie
Design system
zamiast luźnych ekranów
5 osób
wystarczy do testu

Co obejmuje usługa

Projektujemy dwie warstwy: zachowanie i wygląd. Pierwsza powstaje wcześniej i to jej błędy kosztują najwięcej, bo wychodzą dopiero przy programowaniu.

Omów zakres z inżynierem

Rozpoznanie

Analizujemy dane z Google Analytics 4, nagrania sesji i zgłoszenia do obsługi klienta, rozmawiamy też z kilkoma użytkownikami. Szukamy miejsc, w których ludzie rezygnują.

Architektura informacji

Układamy menu i nazwy sekcji językiem użytkowników, a nie według schematu organizacyjnego firmy. Pomaga w tym sortowanie kart przeprowadzane online.

Makiety

Szare prostokąty bez kolorów i fontów. Łatwo o nich dyskutować, a przeróbka kosztuje minuty, nie dni.

Projekt w Figmie

Kluczowe ekrany we wszystkich stanach: pusty, ładowanie, błąd, brak wyników, bardzo długa nazwa produktu. Programista nie musi zgadywać.

Design system

Przyciski, pola, siatka, odstępy i typografia jako komponenty z wariantami. Nową podstronę złożysz z gotowych elementów bez angażowania projektanta.

Dostępność

Kontrasty, widoczny fokus, wygodne pola dotyku na telefonie i zrozumiałe komunikaty błędów zgodne z WCAG 2.1 AA są częścią projektu, a nie poprawką na końcu.

Testy z użytkownikami

Pięć osób z grupy docelowej wykonuje zadania na klikalnym prototypie. Przez wideorozmowę obserwujemy w ciszy, w którym miejscu się zatrzymują.

Jak wygląda współpraca

Dużą część czasu zajmują makiety i ta inwestycja wraca podczas programowania, bo znikają poprawki „na żywym organizmie”.

01

Warsztat i dane

Cele biznesowe, scenariusze użytkowników, statystyki, jeśli są dostępne, i warsztat online z Twoim zespołem.

02

Makiety i przepływy

Zatwierdzamy strukturę i kolejność kroków, zanim pojawi się choćby jeden kolor.

03

Projekt wizualny

Ekrany i biblioteka komponentów w Figmie, ze wszystkimi stanami i wersją mobilną.

04

Przekazanie

Pliki gotowe dla programistów, z opisem zachowania elementów, animacji i walidacji pól. Zostajemy do dyspozycji w trakcie wdrożenia.

Najdroższy błąd w projekcie to formularz, którego nikt nie przetestował. Pole kodu pocztowego, które odrzuca zapis 00-950, data wymagana w nietypowym formacie, komunikat „Wystąpił błąd” bez żadnego wyjaśnienia. Każdy z tych drobiazgów odcina część zamówień, a w statystykach widać tylko porzucony koszyk. Dlatego walidację i treść komunikatów rozpisujemy równie starannie jak stronę główną.

Pytania i odpowiedzi

Przy prostej wizytówce często tak. Własny projekt zwraca się tam, gdzie interfejs nie jest standardowy: konfigurator produktu, system rezerwacji, aplikacja dla pracowników w terenie, zamówienia hurtowe. Za unikalność podstrony „O nas” rzadko warto dopłacać.

Do Ciebie. Pliki Figmy przekazujemy na konto Twojej firmy, a przeniesienie praw autorskich ustalamy w umowie. Bez plików źródłowych kolejny wykonawca zaczyna od zera, a Ty płacisz za projekt drugi raz.

Rzadko. Zwykle lepiej poprawiać po kolei te ścieżki, na których dane pokazują straty: rejestrację, koszyk, formularz zapytania. Zmiana wszystkiego naraz utrudnia ocenę, co zadziałało, a stałych użytkowników zmusza do nauki od nowa.

Nie muszą być. Rekrutujemy pięć osób z grupy docelowej, każda sesja trwa około 45 minut i odbywa się przez wideorozmowę. Uczestnicy dostają niewielkie wynagrodzenie, a po sesjach dostajesz raport z nagraniami najważniejszych momentów.

Tak. Te same zasady działają w aplikacjach na telefon, panelach administracyjnych i narzędziach wewnętrznych. W aplikacjach mobilnych trzymamy się wytycznych iOS i Androida, żeby użytkownik nie musiał uczyć się nietypowych gestów.

Zaprojektujmy interfejs, który działa

Opisz produkt i to, co użytkownik ma w nim załatwić. Zaczniemy od makiet i danych, a nie od moodboardu.

Godziny pracy
pon.-pt. 8:00-18:00, odpowiedź w ciągu dnia roboczego
Spotkania
Online w Teams lub Google Meet

Używamy wyłącznie niezbędnych plików cookie: dzięki nim strona działa poprawnie i pamięta wybrane przez Ciebie miasto. Nie śledzimy Cię w celach reklamowych. Szczegóły znajdziesz w polityce prywatności.