Wireframing – 10 „tak” i „nie” tworzenia makiet

Wireframing to nic innego, tylko tworzenie makiety interfejsu użytkownika. W idealnym świecie to właśnie makietowanie powinno być pierwszym i najważniejszym krokiem w tworzeniu aplikacji lub strony www. Chociaż może się wydawać, że wireframing to łatwizna, jakość „szkieletu” będzie miała zasadniczy wpływ na efekt końcowym – czyli działanie i korzystanie z appki. Warto poświęcić mu trochę czasu i wprowadzić do swoich technik projektowania.

Co to jest wireframing i dlaczego jest taki ważny?

Wireframe, szkielet twojej aplikacji, nie do końca jest tym, czym prototyp (mock-up). Wireframe nie używa elementów interfejsu, nie zajmuje się kolorami ani zestawami ikon, zastępując je wszystkie kwadratami i prostokątami, oznaczającymi ułożenie poszczególnych przycisków.
To pominięcie kolorowych „rozpraszaczy” ma jeden istotny cel. Na etapie wireframe koncentrujesz się na przepływie i architekturze informacji oraz na procesie, w jaki zaangażowany jest użytkownik.

Wireframing jest przydatny szczególnie na wczesnych etapach rozwoju projektu. Jego główną rolą jest określenie, jak aplikacja lub strona www będzie działać. Ma to szczególne znaczenie, kiedy pracujecie w grupie. Dzięki wireframingowi wszyscy zaangażowani w projekt dzielą określoną koncepcję i wiedzą, nad jakim efektem pracują.

Wireframing – dobre praktyki

1. Zrób reserach

Jeśli twój wireframe ma być dobry, sprawdź, czego użytkownicy szukają i czego potrzebują. Weź pod uwagę dwa cele: to, czego chcą użytkownicy i to, jakie cele ma firma, która zamawia aplikację. Staranny research pozwoli ci ustalić, jaki ma być przebieg korzystania z aplikacji i jak ułożyć informację, aby użytkownik nie „utknął” na którymś etapie użytkowania.

2. Twórz proste szkielety

Dlaczego warto robić makiety? Ich największą zaletą jest szybkość i łatwość projektowania. Tworzenie makiety nie powinno cię spowalniać, tylko dawać możliwość zilustrowania różnych opcji, zanim wybierzesz najlepsze rozwiązanie.
Staraj się projektować wireframe tak prosty, jak to możliwe. W ten sposób unikniesz marnowania czasu na drobiazgi, a skoncentrujesz się na tym, aby jasno przedstawić najważniejsze idee.

3. Pokazuj różne rozwiązania

Pierwszy pomysł nie zawsze jest najlepszy. Wireframe jest tani i prosty, więc wykorzystaj go do stworzenia tak wielu wersji aplikacji, jak to możliwe. Im więcej ich będzie, tym większe szanse, że wypracujesz naprawdę dobre rozwiązanie.

4. Wireframe musi być łatwy do zrozumienia

Makieta to pomoc w komunikacji, dzięki której inni będą mogli zrozumieć twoje pomysły. Chcesz udostępnić swoje szkice innym współpracownikom? Upewnij się, że są zrozumiałe i nie podeślesz nikomu trudnej do rozszyfrowania zagadki. Łatwiej jest przeczytać krótką adnotację, niż zgadywać, co autor miał na myśli na podstawie statycznego obrazka.

5. Współpracuj

Praca zespołowa może nie być twoim żywiołem, ale burza mózgów z przedstawicielami innych dziedzin projektowania, z których każdy ma inne doświadczenia i wiedzę może ułatwić wam dalsze działania. Jeśli w twoim pomyśle coś nie gra, opracujecie lepsze rozwiązanie na etapie wczesnego projektu. Feedback od współpracowników pomoże poprawić jakość twojego designu.

Wireframing – czego unikać

1. Nie opuszczaj niektórych części aplikacji

Zapisanie do newslettera? Podsumowanie koszyka w sklepie internetowym? Kusi, żeby powiedzieć, że takie strony wyglądają zawsze jednakowo i z góry wiadomo, jak je zaprojektować, więc nie ma sensu robić makiet przypisanych im ekranów. Myślisz, że lepiej je ominąć i skoncentrować się na zaprojektowaniu mniej oczywistych partii aplikacji? Unikaj takiego podejścia.
Zrób makietę każdego kroku, każdej części aplikacji. Dzięki temu nie pominiesz istotnych części interakcji użytkownika, które mogą mieć wpływ na całe UI.

2. Nie zaczynaj od narzędzi elektronicznych

Zamknij ulubiony program do rysowania, zapomnij na chwilę o narzędziach do tworzenia prototypów. Te ostatnie pozwolą ci stworzyć w kilka minut w pełni działający prototyp, ale na początek najlepsze będą ołówek i notatnik. Zanim przeniesiesz swoje pomysły do programu graficznego, naszkicuj je.

3. Unikaj kolorów

Zauważyłeś, że makiety są zwykle rysowane w jednym kolorze? To nie przypadek: kolory będą odwracały uwagę od przepływu informacji, automatycznie tworząc hierarchię ważności, której na tym etapie chcesz uniknąć. Teraz ważniejsza jest funkcjonalność i logika całego procesu korzystania z aplikacji.

4. Nie myśl o estetyce

Nieważne, jak wygląda twój wireframe. To jeszcze nie jest mock-up, który ma reprezentować ukończoną, gotową aplikację. Makieta to narzędzie, które ilustruje hierarchię informacji, a nie stronę wizualną lub design interfejsu i domyślnie ma być zorientowana na szukanie rozwiązań. Estetyka i UI pojawią się na dalszych etapach projektu.

5. Nie przywiązuj się

Pierwszy pomysł jest oczywiście najlepszy, więc jesteś gotów bronić każdej ramki do upadłego? Nie warto. Nawet jeśli sam pomysł nie jest zły lub poświeciłeś mu masę czasu i uwagi, przygotuj się na to, że z oryginalnej koncepcji pozostanie zaledwie ułamek.
Zamiast kurczowo trzymać się jednej wersji, stwórz kilka, kilkanaście, kilkadziesiąt makiet i nie traktuj ich zbyt osobiście. Zmienią się – i tym lepiej!

Wireframing – 10 „tak” i „nie” tworzenia makiet: podsumowanie

Tworzenie makiet to kluczowa umiejętność dla projektantów UX i jak wszystko inne może być poprawiana wraz z czasem i praktyką. Najważniejszym elementem tworzenia dobrych wireframes to koncentracja na architekturze informacji i procesie korzystania z aplikacji, a nie wygląd i design interfejsu.
Potraktuj tworzenie makiety jako inwestycję na przyszłość. Kiedy na wczesnym etapie rozwiążesz najpoważniejsze problemy projektu, zyskasz więcej czasu na późniejsze dopracowanie całości.