Projektowanie
UX UI

Projektowanie UX UI zaczyna się od klienta, nie od palety

Projekt strony zaczynam od rozmowy o tym, kto na nią wejdzie. Ktoś z reklamy, kto porównuje trzech wykonawców, potrzebuje ceny i realizacji na pierwszym ekranie. Ktoś z polecenia chce szybko znaleźć telefon. Każda z tych osób idzie inną ścieżką, a zadaniem UX designera jest ułożyć stronę tak, żeby obie doszły do kontaktu bez błądzenia.

Dopiero gdy ta ścieżka jest ustalona, zajmuję się wyglądem. Kolory, czcionki i zdjęcia mają wspierać decyzję, a nie konkurować z treścią. Ta kolejność brzmi oczywiście, ale w praktyce większość stron powstaje odwrotnie: najpierw „ładny szablon”, potem wciskanie w niego oferty.

Makieta strony internetowej: szary szkic, który oszczędza tygodnie

Makieta to układ strony bez kolorów i zdjęć: prostokąty, nagłówki i prawdziwe teksty. Wygląda skromnie, ale właśnie na niej podejmujemy najważniejsze decyzje. Czy cena ma być na górze? Czy formularz ma trzy pola, czy siedem? Czy realizacje stoją przed opinią o firmie, czy po niej?

Robię makiety na prawdziwych treściach, a nie na wypełniaczu. Jeśli masz pięć usług, w makiecie jest pięć kart z prawdziwymi nazwami. Dzięki temu widać, czy nagłówki się mieszczą i czy telefon użytkownika nie będzie wymagał przewinięcia trzech ekranów, zanim dotrze do oferty.

Prototyp strony w Figmie, który możesz pokazać klientom

Projektowanie w Figmie ma jedną wielką zaletę: ekrany można połączyć w prototyp, który klika się jak prawdziwa strona. Wysyłam Ci link, a Ty przechodzisz od strony głównej do usługi i do formularza na własnym telefonie. Takie oglądanie mówi więcej niż dziesięć zrzutów ekranu w mailu.

Prototyp warto pokazać dwóm lub trzem klientom, zanim zbuduję stronę. Nie musi to być formalne badanie: wystarczy rozmowa przy kawie i obserwacja, gdzie palec się zatrzymuje. Pytasz, czy znaleźli cenę i czy wiedzą, co zrobić dalej. Jeśli ktoś się gubi, poprawiam układ w Figmie w kwadrans. Tę samą poprawkę na gotowej stronie robi się godzinami, a czasem oznacza przebudowę całej sekcji.

Projekt graficzny strony: UI, który nie przeszkadza

Na poziomie UI dbam o kilka prostych rzeczy, które w sumie decydują o tym, czy strona wygląda poważnie. Jeden kolor dla najważniejszego przycisku i tylko dla niego. Czcionka czytelna na telefonie bez powiększania. Odstępy, które oddzielają sekcje, zamiast ozdobnych linii. Zdjęcia prawdziwych ludzi i prac zamiast obrazków z banku, które widać na stronach konkurencji.

Masz logo i kolory firmowe? Projekt je respektuje. Nie masz? Proponuję prostą paletę i czcionki, które posłużą także na wizytówkach i w reklamie. A gdy firma potrzebuje czegoś więcej niż logo z kreatora, odsyłam do strony o identyfikacji wizualnej, którą robię z partnerem od brandingu.

Web design na telefon: osobny projekt, nie pomniejszona kopia

Przy usługach lokalnych zwykle większość wejść na stronę pochodzi z telefonu. Dlatego wersję mobilną projektuję jako osobny zestaw ekranów. Nagłówki są krótsze, przyciski większe, a numer telefonu i WhatsApp widać na pierwszym ekranie, bez przewijania i bez rozwijania menu.

Uwaga na telefonie działa też inaczej niż przy biurku. Klient czyta w ruchu, więc długie akapity zamieniam na listy, a tabele cen na proste karty. Wszystko to sprawdzam potem na gotowej stronie, a jeśli któraś sekcja nie działa tak dobrze jak w projekcie, poprawiam ją przy optymalizacji konwersji.

Projekt i wdrożenie w jednych rękach

Projektuję strony, które potem sam piszę w kodzie, a większe serwisy stawiam na własnym CMS. To zmienia sposób projektowania: nie rysuję efektów, których nie da się zbudować w budżecie, i nie obiecuję rzeczy, które rozsypią się przy pierwszej edycji tekstu przez Ciebie. Razem z wyglądem projektuję też panel edycji, żeby Twój zespół wiedział, gdzie zmienić cenę czy zdjęcie.

Gdy stronę ma zbudować ktoś inny, dostaje ode mnie komplet w Figmie: makiety, projekt na komputer i telefon, opis stanów przycisków i zasady odstępów. Zostaję w kontakcie na czas wdrożenia i sprawdzam, czy gotowa strona zgadza się z projektem. Jak wygląda cały proces od briefu do publikacji, opisuję na stronie strona na własnym CMS.