UX/UI design: prawdziwy proces od badań do przekazania

UX vs UI: różnica, która kosztuje pieniądze

UX to sposób, w jaki działa strona. UI to sposób, w jaki wygląda. Dobry projekt zaczyna się od problemu użytkownika, a nie od palety kolorów.Jeśli ktoś nie wie, gdzie kliknąć, najładniejszy interfejs cię nie uratuje — zamykają kartę i przechodzą do konkurenta, którego przycisk był widoczny.

Formalnie, doświadczenie użytkownika to cała podróż: jak osoba dotarła, czego szukała, co znalazła, ile kroków to zajęło, gdzie się potknęła, jak się czuła na końcu. UI to wizualna warstwa tej podróży: typografia, kolor, siatka, stany przycisków, ikony, odstępy. Warstwy są połączone, ale rozwiązują różne problemy.

Dlaczego różnica jest komercyjna, a nie akademicka

Wyobraź sobie dwa sklepy internetowe. Pierwszy wygląda zwyczajnie, ale filtry reagują natychmiast, ceny są widoczne z przodu, a proces zakupu zajmuje trzy pola. Drugi ma piękną animację, ogromne zdjęcia i koszyk, który wymaga rejestracji, zanim pokaże koszty wysyłki. Pierwszy sprzedaje więcej. Nie dlatego, że wygląd się nie liczy, ale dlatego, że przychody pochodzą z zakończonej akcji, a nie z wrażenia.

Oto działająca formuła: UX decyduje, czy ktoś osiąga cel, UI decyduje, czy ci ufa w drodze do niego. Potrzebujesz obu. Ale gdy musisz wybrać, co naprawić najpierw, napraw logikę.

Czego projektowanie nie robi

• Nie ratuje złego produktu. Jeśli twoja cena jest powyżej rynku bez wyjaśnienia, układ tego nie ukryje.
• Nie zastępuje ruchu. Silne Projektowanie UX/UI zwiększa konwersję z odwiedzającego na zapytanie, ale ktoś wciąż musi przyciągnąć odwiedzających.
• Nie czyta myśli. Bez danych o klientach, projektant zgaduje — a zgadywanie kosztuje więcej niż badania.

Dlatego w naszym usługach studia projektowanie nigdy nie pojawia się jako samodzielny element o nazwie "narysuj makietę". Współistnieje z analizą, treścią i rozwojem — w przeciwnym razie otrzymujesz drogą grafikę, której nikt nie może faktycznie zbudować.

Krok 1. Badania, cele i przegląd konkurencji

Projektowanie zaczyna się od pytania "co musi się wydarzyć na tej stronie", a nie "jaki kolor lubisz". Dopóki to nie zostanie odpowiedziane, każda poprawka jest dyskutowana na podstawie gustu — a gust to argument, który nikt nie wygrywa.

Co ustalamy na początku

• Cel biznesowy. Zapytania? Zamówienia? Rezerwacje? Aplikacje o pracę? Jeden cel jest główny; reszta jest drugorzędna.
• Docelowa akcja. Konkretna przycisk, który osoba powinna nacisnąć. Jeśli jest pięć i wszystkie są "głównym", żaden nie zostanie naciśnięty.
• Publiczność. Kim są, ile wiedzą na dany temat, jakiego urządzenia używają, co już o tobie wiedzą.
• Obiekcje.Dlaczego się wahają: zbyt drogie, zbyt wolne, niejasne, "czy w ogóle zrobią mój rodzaj pracy".
• Ograniczenia.Terminy, budżet, istniejący CRM, tożsamość marki, wymagania prawne.

Dane nie muszą być drogie. Nagrania rozmów sprzedażowych, wątki czatowe, zapytania wyszukiwania na stronie, mapy cieplne, pytania, które klienci zadają najczęściej — to już wystarczy, aby przestać zgadywać. Jeśli analityka działa, spójrz, gdzie ludzie rezygnują i na którym etapie.

Przegląd konkurencji — nie do kopiowania

Patrzysz na konkurencję, aby poznać zasady rynku i znaleźć luki. Zasady to to, czego użytkownik oczekuje domyślnie: cena, terminy, co jest wliczone, opinie. Luki to to, czego nikt nie oferuje: kalkulator, uczciwe czasy realizacji, prawdziwe zdjęcia zamiast stockowych, proste wyjaśnienie procesu. Kopiowanie czyjegoś układu jest bezsensowne — nie wiesz, czy to działa dla nich, a dziedziczysz ich błędy razem z ich decyzjami.

Przegląd heurystyczny

Jeśli strona już istnieje, przeanalizuj ją pod kątem podstawowych użyteczność strony internetowej zasad, zanim ktokolwiek narysuje cokolwiek: czy jest jasne, gdzie jesteś; czy status systemu jest widoczny; czy akcję można cofnąć; czy błędy są zrozumiałe; czy interfejs mówi językiem klienta; czy musisz trzymać rzeczy w głowie między ekranami. Dwa dni tego przynoszą listę problemów, z których połowę można naprawić bez żadnego redesignu.

Krok 2. Scenariusze użytkowników zamiast stron

Ludzie nie przychodzą "na stronę internetową" — przychodzą, aby coś załatwić. Więc projektujesz scenariusze, a nie strony: co osoba robi, krok po kroku, od przybycia do rezultatu.

Scenariusz mieści się w jednym prostym zdaniu. "Rodzic szuka klubu pozalekcyjnego w pobliżu domu, chce zobaczyć harmonogram i cenę oraz zarezerwować próbne zajęcia z telefonu w pięć minut." To wszystko. Już z tego zdania możesz zobaczyć wymagania: filtr lokalizacji, czytelny harmonogram, cenę bez "skontaktuj się z nami, aby uzyskać szczegóły", krótki formularz i klikany numer telefonu.

Ile scenariuszy potrzebujesz

Dla strony usługowej zazwyczaj trzy do pięciu. Więcej i rozpraszają się; mniej i czegoś brakuje. Typowy zestaw: "nigdy nie słyszałem o tej firmie, tylko badam", "porównuję z konkurencją, szukam powodu, aby wybrać jedną", "już zdecydowałem, chcę szybko się skontaktować", "istniejący klient, potrzebuję kontaktu lub dokumentu".

Różne stany, różne ekrany

Młodsi projektanci rysują tylko idealny stan: pełny katalog, krótkie nazwy, każde zdjęcie na miejscu. Rzeczywistość jest bogatsza. Każdy kluczowy ekran potrzebuje stanów:

• Pusty — filtr nic nie znalazł, koszyk jest pusty, nie ma jeszcze zamówień. Co widzi osoba i dokąd idzie dalej?
• Ładowanie — co jest na ekranie, gdy dane podróżują.
• Błąd — serwer jest niedostępny, płatność nie powiodła się, pole jest błędne.
• Przepełnienie — nazwa produktu na trzy linijki, 40 przedmiotów, recenzja o długości 2000 znaków.
• Sukces — formularz został wysłany. Co teraz? "Dziękuję" to nie odpowiedź; ludzie chcą wiedzieć, kiedy ktoś zadzwoni.

Stany są najnudniejszą i najcenniejszą częścią pracy. To dokładnie to, co oddziela makietę, którą możesz zbudować, od makiety, która sprawia, że twój programista kontaktuje się z tobą co pół godziny.

Krok 3. Architektura informacji

Architektura informacji to miejsce, w którym rzeczy żyją i jak się nazywają. Rozwiązuje połowę twoich problemów nawigacyjnych, zanim pojawi się pierwszy piksel.

Praca wydaje się prosta, a w praktyce jest nużąca: zbierz wszystkie treści, pogrupuj je według znaczenia, nazwij grupy słowami klienta, ustal priorytet. Kluczową częścią jest słowa klienta. "Rozwiązania" mają sens dla ciebie; osoba szuka "naprawy lodówki". Twój wewnętrzny schemat organizacyjny nigdy nie powinien przenikać do menu.

Zasady, które oszczędzają czas

• Menu nie jest miejscem na śmieci. Pięć do siedmiu elementów na najwyższym poziomie. Jeśli się nie mieści, grupowanie jest błędne.
• Głębokość maksymalnie trzech kliknięć do każdej ważnej strony. Po tym tracisz ludzi.
• Jedno znaczenie, jedna strona.Dwie podobne strony konkurują ze sobą w nawigacji i w wyszukiwaniach.
• Etykieta to zapytanie.Element menu powinien odpowiadać temu, jak osoba rzeczywiście myśli i mówi o tym.

Priorytet w obrębie strony

W obrębie strony ta sama logika ma zastosowanie: najpierw odpowiedź, potem szczegóły, potem dowód, potem działanie. Odwiedzający decyduje w ciągu kilku sekund, czy jest w odpowiednim miejscu, i decyduje to na podstawie pierwszego ekranu. Jeśli na górze strony jest napisane "Witamy na naszej stronie", wykorzystałeś swoją najcenniejszą przestrzeń na miejsce rezerwowe.

Kolejność bloków to również projekt — i to ta część, która przynosi najwięcej pieniędzy. Rozłożyliśmy logikę sekwencji bloków w naszym artykule na struktura strony docelowej: te same mechanizmy, skompresowane na jednej stronie.

Testowanie architektury bez makiety

Podaj listę nazw sekcji pięciu osobom spoza projektu, poproś je, aby posortowały je w grupy i powiedziały, czego się spodziewają w danym miejscu. Różnice zdań pokażą ci problematyczne miejsca w ciągu godziny. To tanie i lepsze niż kłócenie się w sali konferencyjnej.

Krok 4. Wireframe'y: szkielet bez makijażu

Makieta to czarno-biała schematyczna wersja ekranu: co następuje po czym, co ma większe znaczenie, gdzie jest akcja.Żadnych wymyślnych czcionek, żadnych cieni, żadnej fotografii. Celowo.

Celem szarości jest pozbycie się wszystkiego, co odciąga uwagę od struktury. Pokaż kolorową makietę, a klient nieuchronnie powie "zrób przycisk jaśniejszym", a rozmowa o tym, że przycisk jest w złym miejscu, nigdy się nie odbędzie. Szaro-skalowa makietaprzywraca dyskusję do sedna: czy jasne jest, czym jest ta firma, co oferuje, dlaczego warto jej zaufać i co zrobić dalej.

Co należy umieścić w makiecie

• Prawdziwe nagłówki i etykiety, a nie Lorem ipsum. Tekst zastępczy kłamie zarówno o długości, jak i o znaczeniu.
• Rzeczywista liczba elementów: jeśli katalog ma 12 przedmiotów, nie rysuj trzech.
• Każdy kluczowy stan z poprzedniego kroku.
• Mobilne i desktopowe wersje kluczowych ekranów od razu, a nie "zaadaptujemy to później".

Ile ekranów narysować

Nie wszystkie. Rysujesz typy stron: strona główna, strona usługi, katalog, strona przedmiotu, formularz, artykuł, kontakt, strony pomocnicze (404, dziękujemy). Wszystko inne składa się z tych samych bloków. Jeśli każda nowa strona potrzebuje nowego mockupu, nie masz systemu — masz stos obrazków.

To najtańsze miejsce do dyskusji

Przesunięcie bloku w wireframe zajmuje minuty. Przesunięcie go w zbudowanej, podłączonej do CMS stronie zajmuje dni i pieniądze. Więc to jest dokładnie miejsce, w którym powinieneś stawiać opór, zadawać niewygodne pytania i domagać się uzasadnienia. Od tego momentu cena zmiany rośnie z każdym krokiem.

Krok 5. Koncepcja UI: jak wygląda zaufanie

Gdy struktura jest uzgodniona, przychodzi warstwa wizualna. Jej zadaniem nie jest dekoracja — chodzi o to, aby struktura była oczywista i zdobywała zaufanie.

Zaufanie do interfejsu buduje się z nudnych rzeczy: schludna siatka, spójne odstępy, czytelny tekst, prawdziwe zdjęcia zamiast stockowych, uczciwe liczby, brak wizualnego hałasu. Nikt nie myśli "kocham tę modułową siatkę" — po prostu czują, że wszystko tutaj jest w porządku, więc praca prawdopodobnie też będzie w porządku. Odwrotność jest prawdziwa: źle wyrównane logotypy klientów i trzy różne odcienie niebieskiego odczytuje się jako "wrzucone razem".

Z czego składa się koncepcja UI

• Typografia. Dobór czcionek, rozmiary, wysokość linii, długość linii. To 80% tego, jak strona się czuje, ponieważ strona to głównie tekst.
• Kolor. Neutralna baza, jeden akcent zarezerwowany na docelowe działanie, funkcjonalne kolory dla błędów i sukcesów. Wydawaj akcent tylko na to, co ważne, inaczej przestaje działać.
• Siatka i rytm. Jeden krok odstępu (wielokrotność 4 lub 8, powiedzmy) zamiast oceniać każdy odstęp na oko.
• Obrazy. Twoje własne zdjęcia pracy i ludzi są lepsze od idealnych zdjęć stockowych, ponieważ nikt nie wierzy w zdjęcia stockowe.
• Ton. Interfejs mówi: formalnie, przyjaźnie, technicznie. To decyzja, a nie przypadek.

Koncepcja to jeden ekran, a nie cała strona

Zazwyczaj prezentujesz stronę główną lub kluczową stronę usługową w dwóch lub trzech kierunkach. Celem jest uzgodnienie języka, a nie zatwierdzenie ostatecznej wersji. Jak ten język wygląda w rzeczywistych projektach, łatwiej zobaczyć w portfolio: różne sektory potrzebują innego wizualnego tonu, mimo że proces za nimi jest identyczny.

I kluczowa kwestia: koncepcja jest oceniana na podstawie "czy służy celowi", a nie "czy mi się podoba". Więcej na ten temat w sekcji opinii.

Krok 6. System projektowania i komponenty

System projektowy to zestaw gotowych elementów plus zasady ich budowania.Przyciski, pola, karty, nagłówki, odstępy, stany — zdefiniowane raz i używane wszędzie.

Bez systemu każdy nowy ekran jest rysowany od podstaw. Sześć miesięcy później strona ma siedem odcieni szarości, cztery rozmiary przycisków i trzy rodzaje kart produktów, a nikt nie pamięta dlaczego. Z systemem nowa strona składa się w godziny zamiast dni i wygląda jak część całości.

Co jest w systemie

• Tokeny.Kolory, rozmiary czcionek, promienie, cienie, krok odstępu — jako nazwane zmienne, a nie wartości wymyślone na miejscu.
• Komponenty.Przycisk z każdym stanem (domyślny, najechany, skupiony, naciśnięty, ładowanie, wyłączony), pole z błędem i wskazówką, karta, modal, tabela, paginacja.
• Zasady kompozycji.Który nagłówek kiedy, ile przestrzeni między blokami, jak elementy zachowują się przy przepełnieniu.
• Wzorce.Formularze, filtry, strona płatności — standardowe zestawy zbudowane z komponentów.

Dlaczego klient powinien się tym przejmować, a nie tylko projektant

System to oszczędności na przyszłość. Nowa usługa, strona docelowa kampanii, dodatkowa sekcja — wszystko to składa się z tego, co istnieje i nie wymaga nowego projektu graficznego. Powstrzymuje to również stronę przed rozdzieleniem się w czasie, gdy różne osoby wprowadzają zmiany.

Skala zależy od projektu: mała strona broszura potrzebuje jednej strony zasad, duży katalog lub produkt potrzebuje odpowiedniej biblioteki. Na projekcie Astrina system komponentów jest dokładnie tym, co sprawia, że każdy typ strony wygląda spójnie, bez rysowania każdego ekranu osobno.

Krok 7. Prototyp, przekazanie dla dewelopera i QA projektu

Prototyp to klikalny makiet, w którym można przejść przez cały scenariusz, zanim powstanie jakikolwiek kod. Odpowiada na pytanie, na które statyczne zdjęcie nie może odpowiedzieć: "co się stanie, gdy naciśniesz to?"

Prototypy wychwytują kosztowne błędy: zbędny krok w formularzu, ślepy zaułek po przesłaniu, myląca droga powrotna, filtr, który się resetuje. Pięć osób przechodzących scenariusz na głos nauczy cię więcej niż miesiąc wewnętrznych debat. Nie potrzebujesz laboratorium — potrzebujesz kogoś z publiczności, zadania i obserwatora, który milczy.

Co właściwie zawiera przekazanie

• Makiety w dwóch lub trzech kluczowych szerokościach: mobilnej, tabletowej/średniej, desktopowej.
• Każdy komponent i stan ekranu.
• Tokeny i zasady: kolory, typ, krok odstępu, zachowanie przy przepełnieniu.
• Zachowanie: co jest klikalne, co się otwiera, co animuje i przez ile milisekund.
• Ostateczny tekst, a nie tekst zastępczy. Zasoby: ikony, obrazy, logotypy w odpowiednich formatach.
• Przypadki brzegowe: bardzo długi tytuł, brak zdjęcia, zero wyników.

Dobre przekazanie to nie "oto link do pliku". To spotkanie, w którym projektant i deweloper przechodzą przez makiety i głośno mówią o nieoczywistych częściach. Pół godziny rozmowy oszczędza tydzień wiadomości.

QA projektu: kontrola po budowie

Gdy strona jest złożona, projektant przechodzi przez nią ponownie — tym razem w przeglądarce. Odstępy, zawijanie tekstu, stany, zachowanie na rzeczywistych danych, fokus, prędkość animacji, zachowanie formularza. To krótki etap, ale jeśli go pominiesz, zawsze będzie luka między makietą a działającą stroną. Zasada jest prosta: dopóki QA projektu nie zostanie zaliczone, projekt nie jest zakończony.

Mobile-first i dostępność w prostym języku

Zaczynasz projektować na ekranie telefonu — nie dlatego, że to modne, ale dlatego, że ograniczenia są tam surowsze.Jeśli treść pasuje i działa przy szerokości 360 pikseli, rozwinie się na komputerze bezproblemowo. W drugą stronę prawie nigdy to nie działa.

Mobile-first to dyscyplina priorytetów. Na małym ekranie nie możesz pokazać wszystkiego naraz, więc jesteś zmuszony szczerze odpowiedzieć, co jest ważniejsze. Ta odpowiedź poprawia również wersję na komputer.

Co sprawdzić na urządzeniach mobilnych

• Cele dotykowe nie mniejsze niż opuszek palca. Malutkie linki upchane razem powodują przypadkowe kliknięcia i irytację.
• Nic nie wychodzi poza krawędź; nie ma przewijania poziomego.
• Numer telefonu dzwoni, adres otwiera mapę, pola formularza wywołują odpowiednią klawiaturę.
• Ważna akcja jest osiągalna bez niekończącego się przewijania.
• Ciężkie obrazy nie zabijają ładowania na połączeniu mobilnym.

Dostępność: cztery rzeczy, które dają 80% wyniku

• Kontrast.Jasnoszary tekst na białym tle wygląda elegancko w makiecie, ale jest nieczytelny na zewnątrz w świetle słonecznym. Kontrast pomaga osobom z niskim wzrokiem — i pomaga tobie, na tanim ekranie, w ruchu.
• Skupienie.Podczas nawigacji za pomocą klawiatury możesz zobaczyć, na którym elemencie jesteś. Usunięcie pierścienia skupienia "bo jest brzydki" to powszechny i poważny błąd.
• Klawiatura.Cały formularz można wypełnić i wysłać bez dotykania myszy. Modal można zamknąć; menu można opuścić.
• Tekst alternatywny.Krótki opis tego, co oznacza obraz. Pomaga to użytkownikom niewidomym i wyszukiwarkom.

Dostępność nie jest oddzielną drogą fazą. To zestaw nawyków: nigdy nie polegaj tylko na kolorze, aby przekazać znaczenie, oznaczaj pola zamiast polegać na miejscach na tekst, pisz komunikaty o błędach, na które człowiek może zareagować. Wbudowane w czasie projektowania kosztuje grosze. Dodane po uruchomieniu kosztuje prawdziwe pieniądze.

Tekst jest częścią projektu

Interfejs składa się bardziej z słów niż z grafik.Nagłówek, etykieta pola, tekst przycisku, komunikat o błędzie — to wszystko są decyzje projektowe, które są wyrażone w literach.

Co daje nam zasadę: projektowanie bez gotowej treści to wróżenie. Projektant wymyśla nagłówek składający się z trzech słów; klient ma dwanaście. Wymyśla trzy korzyści; te prawdziwe to dwie, i są inne. Makieta rozpada się na etapie treści, a wszyscy są zaskoczeni.

Słowa, które naprawiają interfejsy

• Przyciski opisują wynik."Uzyskaj wycenę" lepsze niż "Wyślij". Osoba powinna wiedzieć, co się stanie po kliknięciu.
• Nagłówki odpowiadają, nie kuszą."Strony internetowe dla klinik medycznych" działa; "Tworzymy przyszłość" nie działa.
• Błędy mówią, co robić."Nieprawidłowy format" jest złe. "Wprowadź numer telefonu jako +44…" jest dobre.
• Etykiety lepsze niż zgadywanie.Jeśli pole potrzebuje czegoś konkretnego, powiedz to przed błędem, a nie po.
• Mniej słów, to samo znaczenie.Każde dodatkowe zdanie obniża szanse, że to konieczne zostanie przeczytane.

Jedna praktyka oszczędza tygodnie: napisz tekst dla kluczowych ekranów przed narysowaniem czegokolwiek — nawet w przybliżeniu, w arkuszu kalkulacyjnym. Wtedy projektant pracuje z rzeczywistymi długościami i rzeczywistymi znaczeniami zamiast dostosowywać rzeczywistość do układu.

Jak dawać użyteczne informacje zwrotne i ile rund poprawek jest normalne

Najczęstszą przyczyną przeciągających się projektów nie jest "zły projektant" — to opinie wyrażone jako gust."Nie przyciąga mnie", "zrób to bardziej nowocześnie", "mojej żonie się nie podoba" — na to nie można odpowiedzieć pracą, tylko kolejną próbą zgadywania.

Wzór na użyteczny komentarz

Mów o problemie, a nie o rozwiązaniu. Kształt jest: co widzę → co mnie niepokoi → co to ryzykuje. Na przykład: "Pierwszy ekran nie mówi, że działamy na terenie całego kraju. Klienci pytają o to już podczas pierwszego telefonu — obawiam się, że niektórzy z nich w ogóle nie dotrą do formularza." To coś, z czym może pracować projektant. "Zrób przycisk czerwony" to gotowe rozwiązanie, a prawdopodobnie nie chodzi o przycisk.

Zasady przyspieszające zatwierdzenie

• Zbieraj poprawki w jedną listę od wszystkich zaangażowanych, zamiast wrzucać je do czatu przez cały dzień.
• Wyznacz jednego decydenta. Jeśli pięć osób zatwierdzi, makieta staje się średnią — a średnie nie sprzedają.
• Spójrz na to na swoim telefonie, a nie tylko na dużym monitorze. Tak na to patrzą twoi klienci.
• Nie otwieraj ponownie ustalonych decyzji. Uzgodniona struktura otwiera się na nowe fakty, a nie na nowy nastrój.

Ile rund jest normalne

Powszechna praktyka: dwie rundy poprawek na etap (struktura, koncepcja, makiety) plus jedna finalna poprawka. To nie jest skąpstwo studia — chroni projekt. Nieskończone rundy prawie zawsze oznaczają, że cel nie jest uzgodniony, a nie piksele. Jeśli w trzeciej rundzie kłócisz się o to samo, problem tkwi w kroku badawczym, i tam powinieneś wrócić.

Drogie, powszechne błędy

• Projektowanie bez treści. Makieta zbudowana na fikcyjnym tekście załamuje się, gdy przychodzi prawdziwy tekst. Zawsze.
• Kopiowanie konkurencji. Kopiujesz obrazek, nie wiedząc, czy działa dla nich.
• Dekoracja ponad klarowność. Animacja, paralaksa i suwaki zamiast odpowiedzi na "co sprzedajesz".
• Wiele celów na jednym ekranie.Pięć równoważnych przycisków równa się zerowej liczbie kliknięć.
• Projektowanie dla jury.Makieta nagród i makieta sprzedażowa to różne gatunki.
• Nikt nie posiada akceptacji.Projekt bez właściciela decyzji ciągnie się przez miesiące.

Lista kontrolna: ocena projektu przed przekazaniem do rozwoju

Zanim makiety trafią do budowy, przeprowadź tę listę. Każdy element to zmiana, która kosztuje minuty teraz i dni później.

Znaczenie

• W ciągu 5 sekund pierwszy ekran mówi ci: jaka to firma, co oferuje, komu i co zrobić dalej.
• Każdy ekran ma jedną główną akcję, która wizualnie jest tą główną.
• Kluczowe zastrzeżenia są odpowiedziane: cena lub przedział cenowy, harmonogramy, gwarancje, kim jesteś.
• Każde twierdzenie jest poparte: studia przypadków, recenzje z nazwiskami, liczby, które możesz rzeczywiście udowodnić.

Struktura

• Bloki podążają za schematem "odpowiedź → szczegół → dowód → akcja".
• Nawigacja: 5–7 elementów, etykiety w słowach klienta, wszystko ważne w ciągu 3 kliknięć.
• Nie ma dwóch stron o tym samym.

Kompletność

• Istnieje mobilna wersja każdego typu strony, nie tylko desktopowa.
• Stany są narysowane: puste, ładowanie, błąd, sukces, długi tekst, wiele elementów.
• Tekst jest ostateczny, obrazy są prawdziwe, nigdzie nie ma Lorem ipsum.
• Strony pomocnicze istnieją: 404, dziękujemy, błąd płatności, jeśli potrzebujesz jednej.

System i dostępność

• Przyciski, pola i karty pochodzą z jednego zestawu zamiast być rysowane na nowo dla każdego ekranu.
• Odstępy są jednolite; jest dokładnie tyle kolorów, ile potrzeba.
• Kontrast tekstu jest wystarczający, fokus jest widoczny, formularz można wypełnić za pomocą klawiatury.
• Obrazy mają opisy alternatywne, pola mają etykiety, błędy mają tekst ludzki.

Gotowość do budowy

• Programista przejrzał makiety przed zatwierdzeniem i potwierdził, że można je zbudować w terminie.
• Zachowanie jest udokumentowane: kliknięcia, otwarcia, animacje, zachowanie formularza.
• Jest jasne, co można edytować w panelu administracyjnym, a co jest zakodowane na stałe.
• Ktoś jest wyznaczony do akceptacji QA projektu po budowie.

Jeśli każdy element to tak, przekaż to z pewnością. Jeśli więcej niż trzy to nie, nie jesteś gotowy — a budowa nie załata tych dziur, tylko je zabetonuje. Chcesz zewnętrznego spojrzenia na swoją obecną stronę lub na makiety, które ktoś dla Ciebie narysował?Skontaktuj się z nami — porównamy to z tą samą listą i szczerze powiemy, co naprawić najpierw.

FAQ