Po co nam te wireframe’y?!

Pamiętam, jak zaczynałam swoją przygodę w Internetach, że najważniejsze było takie zaprojektowanie grafiki, żeby programista mógł ją w miarę prosty sposób wdrożyć. Słyszałam wówczas ‘to się nie da, zaprojektuj to inaczej’ . Dzisiaj zarówno wiedza, jak i możliwości są coraz większe, już sama dobra grafika, czy bezbłędne (?!) kodowanie nie wystarcza, żeby powstał dobry serwis.  Widuję mnóstwo stron, które mają wspaniałe layouty, nic się nie sypie, ale odnalezienie się w nich, dojście do interesujących mnie rzeczy nie jest takie proste. Czy można ten problem rozwiązać zanim się pojawi? Zazwyczaj tak.

Historia pewnego systemu

Jakiś czas temu dla jednego z naszych klientów projektowaliśmy użyteczność serwisu. Zdania w obozie klienta były podzielone – czy w ogóle trzeba te wireframe’y projektować, nie szkoda pieniędzy? Przecież można to od razu z grafiką… Szybko jednakże okazało się, że nawet widząc prosty rysunek z rozkładem elementów, można dojść do tego, że przecież będą dwa rodzaje konta, więc  należałoby od razu dać wybór, czy zakładać konto A, czy B. Często też wystarczy spojrzeć na szkic, aby się zorientować, że rozwiązanie, które w teorii wydawało się klientowi dobre, może wprowadzić chaos w serwisie. Wprowadzając jednak kilka drobnych zmian można pokazać rozwiązanie, które da się  w prosty i przejrzysty sposób pokazać zarówno na monitorze, jak i na telefonie komórkowym. I zminimalizować ryzyko, że użytkownik odwiedzający serwis zgubi się, ucieknie.

Co to jest wireframe?

Wireframes czy page scheamtics to nic innego jak makiety strony, szkice tworzące ścieżkę po jakiej będzie poruszał się użytkownik po stronie. Zadaniem specjalisty przy tworzeniu tych schematów jest pokazanie struktury strony oraz rozmieszczenie najważniejszych jej elementów – logo, teksty, zdjęcia, rysunki, ikony i najważniejsze – miejsca, w których oczekujemy akcji użytkownika (butony CTA).  Wireframes mogą osiągać różny stopień dokładności – od prostych szkiców z pustymi boksami, poprzez gray-box wireframing (zaznaczamy tu nasileniem szarości znaczenie poszczególnych elementów) aż po makiety z wykorzystaniem kolorów czy czcionek, które będą użyte w docelowym projekcie graficznym.

Czy to mi jest potrzebne?

Prawdopodobnie nie przy każdym projekcie projektowanie wireframes jest niezbędne (choć przydatne), jednakże przygotowanie nawet najprostszego szkicu może znacząco podnieść jakość końcowego produktu i pozwoli zastanowić się nad poszczególnymi elementami i funkcjami serwisu zarówno projektantom, jak i ich klientom.

Prawda jest bowiem taka, że jeśli ktoś odwiedzi naszą stronę i nie będzie mógł w prosty sposób znaleźć tego, czego szuka, nie wróci już do nas. Przygotowując wireframes zanim uruchomimy serwis możemy wyłapać błędy, które po uruchomieniu byłyby bardzo kosztowne do naprawienia. Możemy też przekonać się, że czasem sprawdzone rozwiązania będą najlepsze, że użytkownicy spodziewają się znaleźć pewne elementy w określonych miejscach. Możemy stworzyć stronę (aplikację, system itd.), z której będzie można łatwo korzystać.

Wypracowując wireframes dla wyżej wspomnianego serwisu udało nam się skrócić o 10% czas projektowania grafiki  (względem estymowanego czasu) oraz znacząco obniżyć liczbę poprawek na etapie testowania.