Nieczęsto słyszy się o testowaniu projektu digitalowego na wczesnym etapie tworzenia koncepcji wizualnych. A szkoda! Ta niedoceniana praktyka znacząco usprawnia proces projektowy i tym samym zasługuje na większą uwagę – zarówno projektantów, jak i project managerów czy klientów.

Trzeba jednak zaznaczyć, że nie mówimy tutaj o testach użyteczności z udziałem użytkowników. W tym artykule skupiamy się na testach przeprowadzanych przez analityków i testerów manualnych. Koncentrują się one na weryfikacji, czy projekt jest możliwy do zakodowania (w ramach budżetu) i czy zgadza się z początkowymi wytycznymi. Sprawdzają również, czy utrzymuje logikę, prawidłową hierarchię treści i spójność pomiędzy widokami, rozdzielczościami oraz czy nie zostały pominięte elementy istotne dla fazy developmentu.

Wszyscy kochamy dobry design, jednak przy projektowaniu dla webu liczy się już nie tylko estetyka, ale przede wszystkim funkcjonalność oraz przełożenie projektu na wymagania kodu i biznesu. W dalszej części opisujemy, jak podejść do testowania designu, po co to komu i oczywiście – jak skutecznie i bezboleśnie wprowadzić testowanie do swojej praktyki projektowej.

Na czym polega praca testera podczas projektowania strony?

Tester, w kontekście projektów software’owych, zwykle kojarzy się z ostatnim ogniwem procesu, czyli sprawdzaniem jakości już zakodowanego rozwiązania. Dlaczego jednak nie sprawdzać jakości już na poziomie projektu? Im wcześniej wykryje się potencjalne luki, braki czy nieścisłości, tym efektywniej i szybciej będzie można je rozwiązać.

Perspektywa testera jest ważna, bo jego spojrzenie na design odbiega od patrzenia w kierunku estetyki, a skupia się na funkcjonalności rozwiązania. Oto trzy podstawowe etapy projektu, podczas których praca testera manualnego przynosi korzyści:

Faza UX – planowanie struktury użytkowania, wireframes’y

Na tym etapie tester manualny sprawdza logikę zaprojektowanych mechanizmów i czy wszystkie wymagania klienta zostały odzwierciedlone w makietach. Weryfikuje, czy następujące po sobie kroki użytkowania produktu zostały zawarte w projekcie, czy nie pominięto żadnej ścieżki decyzyjnej. W skrócie: szuka dziury w całym i wszelkich luk, których obecność mogłaby spowolnić kolejne działania zespołu projektowego.

Faza UI – dobór kolorów i interakcji, przygotowanie komponentów

Wbrew pozorom, to właśnie tutaj tester może się naprawdę wykazać. Szczegółowa analiza UI, wraz z pytaniami i uwagami do projektu pomaga w późniejszym tworzeniu wytycznych dla programistów. Tester w fazie UI sprawdza między innymi:

• Spójność – czy stałe elementy, takie jak buttony, paddingi, headingi itp. mają jasną hierarchię, spójny styl i nigdzie nie zapodział się niechciany wyjątek.
• Stany interaktywne – czy wszystkie warianty elementów interaktywnych zostały przewidziane w designie (errory, braki wyboru, kasowanie wyboru, duża liczba nowych elementów w zbiorze, pola typu „input” dla długich słów, mechanizm doładowywania bądź paginacji)
• RWD – czy zaprojektowane widoki desktopowe są skalowalne na mniejsze urządzenia (tablet, telefon) i większe (telewizor, monitory gamingowe). Czy każdy element z szerokości desktopowej został przeniesiony w designie na szerokości mobile?
• Copy – testerskie oko łatwo wyłapie literówki i niespójności np. w CTA buttonów. Przy okazji sprawdzi, czy zaprojektowane mikrocopy jest zrozumiałe dla użytkownika.
• Design vs. kod – czy powtarzające się w layoucie elementy są względem siebie identyczne i można reużywac kodu w trakcie developmentu? Jeśli nie, to czy da się je uspójnić?
• Dostępność cyfrowa – czy zaprojektowane rozwiązania spełniają najnowszy standard WCAG na poziomie A czy AA?

Faza testowania wdrożonego projektu

Na tym etapie tester stara się… zepsuć Ci design! Kiedy projekt przeszedł w ręce programisty i jest już gotowy do testów przedwdrożeniowych, tester zyskuje większą swobodę w swojej pracy. To czas, aby klikać, scrollować, hoverować, modyfikować edytowalny content i starać się pokryć testami najdziwniejsze przykłady użytkowania produktu. Tutaj już nie ma miejsca na utarte schematy i poruszanie się po „happy path” – to czas, aby wejść w buty użytkowników o niestandardowych potrzebach.

Kilka przykładów, co interesuje testera na tym etapie:

• Edge case’y użytkowania – np. co się stanie jeśli edytor wprowadzi bardzo długi tytuł artykułu lub użytkownik wybierze więcej tagów, niż pokazano w designie?
• Sposoby używania – w jaki sposób user odczyta informacje pokazywane po najechaniu myszką, jeśli używa wyłącznie klawiatury lub urządzenia z dotykowym ekranem?
• Responsywność – czy wszystkie informacje, takie jak np. długie liczby, złożone tabele czy nagłówki o dużym rozmiarze fontu zmieszczą się na najmniejszych dostępnych telefonach? Czy przyciski są łatwo klikalne na urządzeniach mobilnych?
• Performance – czy przygotowane materiały wizualne (lottie, wideo, zdjęcia, modele 3D) nie obciążają zbyt mocno strony? Jaki jest czas jej ładowania?

Po co komu ten tester? 

W pracy projektowej staramy się połączyć presję czasu, chęć zrobienia atrakcyjnego wizualnie projektu i funkcjonalność. Dlatego wizja wprowadzenia w ten proces dodatkowej, krytycznie nastawionej osoby może budzić obawy. Zwłaszcza że czasem zbyt osobiście traktujemy wypracowane przez siebie rozwiązania. Zasada jest jednak taka, że im szybciej potencjalny użytkownik zetknie się z projektem, tym szybciej i mniej boleśnie będziemy mogli skorygować niejasności. Odpowiednio wcześnie wyłapane błędy i niespójności zaoszczędzą nam wiele czasu w przyszłości i pozwolą na zaprojektowanie rozwiązań, które będą bardziej intuicyjne dla użytkowników. 

Nieścisłości, które pojawią się na etapie tworzenia makiet czy projektowania UI, z pewnością wróciłyby do designera, kiedy projekt przejąłby project manager, klient czy deweloper. Lepiej więc znaleźć i naprawić je od razu, niż później  kilkakrotnie wracać do zamkniętego już (z punktu widzenia designera) tematu. Oszczędza to nie tylko nerwy, ale też czas, zmniejszając końcowy koszt projektu.

Liczy się tutaj też aspekt pracy zespołowej  – naniesienie uwag testera na wczesnym etapie angażuje w zmiany wyłącznie designera. Natomiast wyłapanie ich na późniejszym etapie, już po zakodowaniu, obciąża dodatkową pracą cały zespół projektowy i spowalnia rozwój produktu.

Warto też dodać, że już po kilku tego typu rozmowach z testerem znacząco rośnie umiejętność przewidywania podobnych problemów w przyszłości. Dzięki temu nasza pewność siebie jako projektantów rośnie, co daje dodatkową motywację do rozwoju. Rozbicie projektu na mniejsze fazy i sprawdzanie poprawności po każdej z nich nadaje pracy rytm, a projektantowi poczucie bezpieczeństwa.

Koniec końców w pracy digital designera chodzi nie tylko o to, żeby projekt był estetyczny i kreatywny. Nadrzędna jest jego użyteczność. To ona jest kluczowa w ocenie jakości projektu, a jak wiemy – lepsza jakość projektu ma wpływ na jego cenę.

Trzy porady, by współpraca z testerem zaowocowała sukcesem

Być może współpraca designer–tester to jeszcze mało znane podejście. Jednak z naszego doświadczenia wynika, że kto raz dopuścił dobrego testera do swoich projektów, ten nie chce już z tego rezygnować!

Aby wspólna praca przebiegała harmonijnie, pamiętaj o tych trzech wskazówkach:

#1. Zasady są po to, żeby… ułatwiać pracę – i właśnie od nich warto zacząć. Ustalcie, na których etapach procesu projektowania tester będzie zaangażowany. Możecie podejść do tego iteracyjnie lub zaplanować jeden generalny przegląd pod koniec projektu. Znaną praktyką jest też spontaniczne wdzwanianie się na konsultacje, kiedy trafisz na jakąś blokadę. 

Ważne jest też, aby uzgodnić zakres testów (np. skupiamy się na ścieżce użytkownika, pomijamy content), sposób komunikacji (komentarze, komunikatory, stand-upy),  wspólne narzędzia (w tym narzędzia do zarządzania projektami) oraz ramy czasowe dla wyznaczonych etapów współpracy.

#2. Każdy pracuje w trochę innym trybie, podejścia do procesu twórczego są różne. Aby uniknąć nieporozumień na tak fundamentalnym poziomie, poświęć chwilę na zapoznanie testera z Twoimi procesami. Wyjaśnij, jak porządkujesz swoje pliki robocze, czego, gdzie może się spodziewać, które elementy w designie to wciąż „work in progress”. Warto też naprowadzić testera na obszary, w których wiesz, że potrzebujesz mocniejszego wsparcia. Na przykład „jestem dyslektykiem, więc zależy mi dokładniejszym sprawdzeniu po mnie treści” lub „w połowie pracy zmieniałem lekko hierarchię nagłówków, więc zwróć uwagę, czy na którymś widoku nie została starsza wersja”.

#3. Nie przywiązuj się do konkretnego rozwiązania, odstaw na bok osobiste odczucia i skup się na rozwiązywaniu  problemów. Web design to nie jest sztuka dla sztuki, a sztuka dla ludzi.

Testerzy od dawna mają istotny wkład w polepszenie jakości produktu – w końcu trudno sobie obecnie wyobrazić oprogramowanie, które przed pójściem „w świat” nie zostanie sprawdzone przez zespół QA. Jeśli ich współpraca z deweloperami jest tak owocna i obie strony czerpią z niej korzyści, z pewnością testerskie opinie na temat Twojego projektu będą także zarówno konstruktywne, jak i wartościowe. 

Freelancer a praca z testerem

Trudno ukrywać, że przedstawione tu podejście odnosi się przede wszystkim do pracy w agencji, studio czy software house’ie. O wiele trudniej znaleźć testera pracując jako freelancer, bo ogranicza nas nie tylko dostępność takich specjalistów, ale i budżet.

Niestety trudno zastąpić doświadczone oczy testera, który w swojej karierze pracował nad dziesiątkami projektów. Jednak chłodna perspektywa osoby trzeciej, niezaangażowanej w projekt, jest zawsze dobrym rozwiązaniem. O taki „rzut oka” można poprosić innego designera, ale także rodzinę, znajomych, partnerów…  Pozwoli to poznać zdanie osób zbliżonych do użytkownika końcowego.

Poza takimi konsultacjami możesz samodzielnie zrobić przegląd kilku podstawowych zagadnień, na jakie zwraca uwagę tester:

• Urządzenia mobile – jak prezentuje się interface na wąskich urządzeniach o niewielkiej powierzchni ekranu?
• Telewizory, duże monitory – jak projekt skaluje się na ekranach szerszych niż 1920px?
• Ekrany dotykowe – czy bez kursora myszki user ma jasny dostęp do wszystkich niezbędnych informacji?
• Kontrast – tu mogą przydać się wtyczki do automatycznego sprawdzania kontrastu.
• Wielkość używanych mediów i ich liczba – czy dostarczone materiały nie będą nadmiernie obciążać strony oraz czy ich jakość pozwala na swobodne skalowanie?
• Treści – tutaj także można wykorzystać wtyczki i narzędzia AI, które  generują rzeczywiste, zróżnicowane dane. Dodając je do swojego projektu, zobaczysz czy Twoje layouty są gotowe do wykorzystania w praktyce.

Trzeba jednak brać pod uwagę, że aby taka ocena miała sens, musisz spojrzeć na swój projekt z dystansem i uzbroić się w cierpliwość. Testowanie to spokojna, chłodna analiza, która zajmuje czas i wymaga wyjścia poza szablonowe myślenie, którym często operujemy na co dzień.

Wzbogać swój proces projektowania

Projektowanie nowych rozwiązań, narzędzi i stron internetowych to nie tylko szukanie sposobu, jak zrobić to inaczej. W dużej mierze polega na znalezieniu złotego środka pomiędzy innowacyjnością a ograniczeniami obecnych technologii i schematami ludzkiego zachowania. 

Współpraca designerów z testerami to nowy poziom projektowania. Umożliwia tworzenie bardziej intuicyjnych i efektywnych interface’ów. Dzięki konstruktywnym opiniom i umiejętności rozwiązywania problemów projektowanie staje się bardziej celowe i skoncentrowane na potrzebach użytkowników. To klucz do tworzenia nowatorskich, funkcjonalnych i bezbłędnych rozwiązań digitalowych, które skradną serca odbiorców.