Wireframing, czy makietowanie – z pewnością słyszeliście o tym nie raz. Zapewne w kontekście zagadnień UI albo UX Design, a na pewno jeśli mowa o web designie. O co w tym właściwie chodzi, czy makietowanie jest stratą czasu i w jaki sposób wykonywać takie makiety? Dziś właśnie o tym.
Film na ten temat znajdziecie również na kanale:
Czym są makiety i po co się ich używa?
Makiety to takie szkice stron lub aplikacji, które pozwalają na zaplanowanie i sprawdzenie struktury strony i funkcji, które ma spełniać. Czyli jak się domyślacie, są częścią procesu projektowego w pracach nad produktem (najczęściej cyfrowym, ale niekoniecznie).
Są różne typy makiet – lo-fi (low fidelity), medium-fi i hi-fi (high fidelity), które różnią się szczegółowością i dokładnością przedstawianych rozwiązań (choć najczęściej dzieli się je po prostu tylko na low lub high).
Do czego używa się makiet?
– budowy i sprawdzenia ścieżek użytkownika, czyli tak zwanego flow;
– by sprawdzić różne warianty prezentacji informacji na stronach, co ułatwia podjęcie decyzji, które elementy interfejsu powinny zawierać;
– wypróbowania nowych pomysłów, które w realizacji byłyby kosztowne (gdyby okazały się nietrafione), więc można wyprodukować bardzo dużo konceptów i bezboleśnie je potem odrzucić;
– można na makietach testować założenia aplikacji czy strony;
– w komunikacji w zespole i z klientem – nie poświęcamy na niezbyt wiele czasu, więc zamiast poświęcać czas na kodowanie czy grafikowanie, można pokazać takie koncepty na makietach
Skąd mam wiedzieć co ma być na makiecie?
W gruncie rzeczy makietowanie nie jest początkowym etapem tworzenia produktu. Powinno być poprzedzone rozpoznaniem — zebraniem informacji o użytkownikach (na przykład w formie person, o personach tu: www.zebza.net/ms-persona), skompletowaniu treści jakie powinny znaleźć się na stronie, zrozumieniem w jakim celu użytkownicy będą wchodzić na stronę i po jakich ścieżkach mogą się poruszać (scenariusze użycia mogą świetnie sprawdzić się w tym celu) i stworzeniu architektury informacji.
Architektura Informacji to dyscyplina projektowania, która odpowiada za tworzenie informacji dostępnymi i zrozumiałymi, czyli dba o to, aby użytkownik znalazł to, czego szuka. Łatwo zrozumiał gdzie się znajduje i jakie kroki powinien podjąć aby uzyskać efekt, który chce osiągnąć. Musimy zatem wiedzieć przed rozpoczęciem makietowania co użytkownik może robić na stronie? Dopiero wtedy, kiedy określimy sobie te wszystkie rzeczy możemy układać je na ekranach.
No to jak zacząć?
Jeżeli mamy zebrane informacje o użytkownikach i ich celach w produkcie, a także stworzyliśmy architekturę informacji (lub coś choćby na kształt), możemy zabrać się za projektowanie.
Na rozgrzewkę fajnie sprawdza się ćwiczenie Crazy Eights (szalone ósemki), które polega na zaprojektowaniu 8 widoków / układów / rozwiązań w 8 minut. Wystarczy podzielić sobie kartkę na 8 części, ustawić budzik na 8 minut i działamy! Takie ćwiczenie świetnie nadaje się również do pracy w zespole (nie tylko projektowym).
Jeżeli projektujecie flow, chcecie przepracować przede wszystkim proces, warto sięgnąć po większe kartki i grubsze markery. To uchroni Was przed zbytnim skupianiem się na detalach na tym etapie. Kiedy projektuję już konkretne kontrolki, czyli skupiam się na poszczególnych widokach wybieram cienkopisy, długopisy lub ołówki.
Makietując na papierze, w przypadku projektowania procesu, staram się przede wszystkim możliwie go optymalizować – czy można pominąć pewne kroki, czy można je jakoś połączyć? Czy są jakieś alternatywne ścieżki? A co, jeśli pojawi się jakiś nieoczekiwany błąd? Czy użytkownik będzie chciał przechodzić przez, dajmy na to, 10 stron formularza zapisu, i tak dalej…
Na etapie projektowania widoków skupiam się za to na hierarchii informacji, kolejności ułożenia poszczególnych elementów i ich proporcjach względem siebie. Tu zazwyczaj już decyduję o wykorzystaniu konkretnych elementów UI i zastanawiam się czy ich wykorzystanie nie będzie kłóciło się z całym procesem lub jest w ogóle możliwe do użycia w tym kontekście.
Takich szkiców często powstają dziesiątki… i dziesiątki lądują w koszu. Czasami poświęcam czas na rozrysowanie tylko drobnego elementu ekranu, czasami powstają pełne układy. Etap makietowania jest właśnie po to, żeby przetestować sobie pomysły i możliwe szybko odrzucić te, które się mogą nie sprawdzić. Dlatego przywiązujcie się za bardzo do swoich makiet, one będą ciągle się zmieniać.
Kiedy jestem pewna, że to co na papierze jest ostatecznie dobrze przemyślane siadam do programu (jeśli jest potrzeba przeniesienia makiety do np. Axure).
Czy tylko UX Designer może makietować?
Oczywiście, że nie. Makietować może każdy członek zespołu (nie tylko projektowego), który ma do czynienia z produktem, nad którym pracujecie. Makietować mogą developerzy, product managerzy i… klienci. To świetna forma warsztatów i generowania pomysłów. Zresztą, nie ma co czarować, często zdarza się, że programiści nie mogą współpracować z projektantami tworząc choćby stronę. Takie przemakietowanie pomysłu może oszczędzić trochę czasu na późniejszym etapie.
Zazwyczaj jednak makietowaniem zajmują się projektanci (a jak ich zwać, wszystko jedno – UX, web, graficy itd).
Moje narzędzia
To przede wszystkim kartka i ołówek lub notes i długopis. Po prostu zaczynam zawsze szkicowanie makiet na papierze, że względu na oszczędność czasu i możliwość szybkiego sprawdzenia założeń. Dopóki nie mam sprecyzowanych przynajmniej podstaw, nie siadam do makietowania na komputerze. W gruncie rzeczy, makietuję w Axure (popularny program do tego typu prac), tylko jeżeli faktycznie jest taka potrzeba – pracuję w zespole, klient wymaga klikalnych prototypów lub makiety będą testowane. Na swoje potrzeby w zupełności wystarczają papierowe prototypy.
W filmie opowiadałam również o wykorzystaniu szablonów do makietowania. To, jak wspomniałam, tylko gadżet, ale bywa, że umila pracę. Więc jeśli łasi jesteście na gadżety to łapcie te adresy, gdzie znajdziecie trochę takich gotowych makiet do wydrukowania:
- Obszerna lista od Smashing Magazine: www.smashingmagazine.com/2010/03/free-printable-sketching-wireframing-and-note-taking-pdf-templates
- Szablony z kropkowanym gridem: www.sneakpeekit.com
- Stworzyłam też kilka notesów do wireframingu, dostępnych w moim sklepie designnoobs.com
Programy do makietowania
W ostatnich latach pojawiło się więcej narzędzi, które mogą służyć do tworzenia makiet i interaktywnych prototypów. Przez długi czas, najpopularniejszym z nich był Axure RP. Swoją chwilę sławy miał też polski produkt UX Pin. Nie można również zapomnieć o nowości ze stajni Adobe. Adobe XD co prawda ruszył całkiem niedawno, ale już ma rzeszę swoich zwolenników. Wśród często pojawiających się narzędzi do prototypowania znajdziemy również balsamiq.
Wszystkie te programy mają swoje darmowe wersje trial, więc możecie je pobrać i pobawić się chwilę żeby zobaczyć jak działają.
- Axure: www.axure.com
- UXPin: www.uxpin.com
- Adobe XD: www.adobe.com/pl/products/experience-design.html
- balsamiq: www.balsamiq.com
Graficy, którzy usiądą do programów do prototypowania mają w sumie z górki. Konstrukcja takiego softu jest bardzo podobna do programów graficznych, więc nauka kolejnych przychodzi z dużą łatwością. Co więcej, jeśli nie potrzebujecie dodawać interakcji, możecie spokojnie makietować w programach graficznych. Nie raz zdarzało mi się robić szybkie makiety w Photoshopie albo w Illustratorze.
Materiały do nauki?
W gruncie rzeczy samo makietowanie opiera się na planowaniu i projektowaniu. Nie więc zbyt dużo materiałów strickte do nauki makietowania. Niemniej jednak warto zerknąć na darmowe e-booki od UXPin i poczytać trochę o architekturze informacji.
Guide to wireframing: www.uxpin.com/studio/ebooks/guide-to-wireframing
Wireframing process: www.uxpin.com/studio/ebooks/complete-wireframe-ux-design-process
Wireframing RWD: www.uxpin.com/studio/ebooks/content-wireframes-responsive-design
Interactive wireframing: www.uxpin.com/studio/ebooks/guide-to-interactive-wireframing
