Projektowanie makiet UX – strata czasu czy konieczność?

Mikołaj Lehman 4 grudnia 2014

Czym są makiety?

Wireframes, mock-ups, blue prints, page schematics – wszystkie te synonimy określają makiety. Makieta nie jest niczym innym jak szkicem lub schematem produktu z dokładnie rozrysowanymi kolejnymi ekranami przejść.

Projektowanie makiet leży po stronie UI/UX designerów. Ich zadaniem jest przedstawienie podstawowej funkcjonalności, struktury oraz odpowiedniego uporządkowania informacji pojawiających się w systemie lub aplikacji.

Projektują rozmieszczenie najważniejszych elementów – takich jak buttony CTA (call to action), zdjęcia czy akapity z tekstem. Makiety powinny uwzględniać każdą akcję, jaką użytkownik może przeprowadzić na danej podstronie.

projektowanie makiet mobile

Image by Fernando Guillen

Z reguły mock-up’y są jednym z pierwszych kroków przy tworzeniu nowego projektu. Często powstają równolegle ze specyfikacją produktu i są jej integralną częścią. Dzięki temu, że są one łatwo edytowalne, a szybkość zmian jest bardzo duża, co jest niezwykle ważne w początkowych stadiach projektu, gdzie wizja klienta jest weryfikowana przez możliwości technologiczne oraz szeroko pojęte UX (User Experience).

Makiety są dużą pomocą dla klienta, który dzięki nim łatwiej może wyobrazić sobie, jak jego produkt będzie wyglądał w fazie końcowej. Makiety to również pomoc dla poszczególnych członków zespołu: projekt managerów, programistów czy designerów.

Często klienci zadają sobie pytanie: „Po co nam makiety skoro i tak cały proces powtórzymy przy designie?” Odpowiedź jest bardzo prosta. Po pierwsze przygotowanie makiet zajmuje mniej czasu niż przygotowanie całego wyglądu produktu. Drugą ważną zaletą jest to, że przy makietach, design nie odwraca uwagi od istotnych spraw związanych z UX. Trzecim plusem jest usprawnienie pracy designera, który po otrzymaniu gotowych makiet, nie musi się zastanawiać jakie elementy znajdą się na końcowym designie. Dzięki temu może w pełni skupić się na pracy kreatywnej.

Modele projektowania UX

Makiety możemy podzielić ze względu na ich dokładność High-fidelity mockups oraz Low-fidelity mockups. W zależności od tego, którą opcje wybierzemy, będziemy mogli wykorzystać inne narzędzia do projektowania.

Low fidelity mockups

Sposób przygotowania makiet, który ma zawierać tylko podstawowe funkcje. Możemy go podzielić na dwa poziomy. Pierwszy z nich to najprostszy schemat blokowy. Przedstawiamy każdy element w postaci odpowiednio opisanych bloków. Jest to jeden z najszybszych sposobów projektowania makiet, jednak nie wyglądają one zbyt imponująco i czytelnie.

projektowanie makiet low fidelity

Image by http://jimatkinsonwebdesign.co.uk/

Kolejnym etapem może być odpowiednie wycieniowanie prostokątów – tzw. “gray-box wireframing”. Ogólna zasada jest taka, że im dany element jest ciemniejszy, tym jego priorytet jest większy, a sam blok powinien być bardziej widoczny. W związku z tym designer stara się nadać blokom odpowiednie kształty i kolory.

projektowanie makiet grey

Image by www.designonslaught.com

High-fidelity mockups

Model wireframe’ów, który jest bardzo zbliżony do końcowego designu. Ten rodzaj makiet możemy osiągnąć poprzez zastosowanie różnych czynników. Pierwszym jest typografia. Po wstępnym ustaleniu czcionek nasz projekt zyskuje na wyglądzie.

Kolejnym ulepszeniem może być dodanie palety podstawowych kolorów, które od razu narzucą grafikowi, jakich barw powinien się trzymać. Następnie można zastosować zaawansowaną interakcję. To oznacza nie tylko podlinkowanie konkretnych ekranów, ale również zastosowanie bardziej skomplikowanych animacji.

Ostatnią rzeczą, która może wzbogacić nasze makiety, są zdjęcia i filmy. Oczywiście high-fidelity mockup nie zawsze cechuje się wszystkimi wymienionymi powyżej elementami. Niekiedy jest to tylko typografia, ale może się zdarzyć też tak, że makiety zawierają niemal wszystkie możliwe elementy.

Jak widać, rozbieżność pomiędzy dwoma opisanymi modelami makiet jest ogromna. Oczywiście decyzja o wyborze odpowiedniego typu zależy od wielu czynników: złożoności projektu, jego wielkości, czy ilości czasu, jaką można poświęcić na wykonanie makiet.

Narzędzia UX

W zależności od tego, jaki model projektowania wybierzemy, powinniśmy dopasować odpowiednie dla nas narzędzie. Obecnie producenci oferują bardzo duży wybór produktów ułatwiających projektowanie makiet.

Szkicowanie

Jest najprostszym i najtańszym sposobem wykonywania makiet. Ma jednak sporo minusów, m.in. nie jest skalowalne, ciężko usuwać w nim błędy i niestety nie wygląda profesjonalnie. Szkicowanie bardzo dobrze sprawdza się na spotkaniach z klientami, kiedy potrzebujemy dokładnie omówić konkretny problem.

Używanie gotowych szablonów/notatników

Jeśli mimo wszystko lepiej czujemy się w projektowaniu manualnym makiet, dobrym rozwiązaniem mogą być gotowe szablony do odrysowywania, które zawierają najczęściej występujące elementy UI.

projektowanie makiet szablon

Image by thingkit.com

Ciekawe też wydaje się zaproponowane przez polski StartUp UXPin rozwiązanie, które oferuje gotowe notatniki z szablonami oraz stickerami.

projektowanie makiet sticker

Image by UXPin

Balsamiq

Pierwszym czysto software’owym rozwiązaniem, na którym się skupimy, jest Balsamiq. Ma on mocno wyrobiony styl, który kojarzymy ze szkicowaniem. Co ciekawe mamy możliwość w każdej chwili przełączyć się na tryb widoku wireframe i wszystkie nasze naszkicowane elementy zyskują na dokładności i wyglądzie.

Balsamiq jest dość intuicyjnym programem. Można go łatwo zintegrować z Google Drive i JIRA. W cenie $12 miesięcznie możemy korzystać z webowej aplikacji, która ogranicza nas do posiadania tylko 3 aktywnych projektów. Jest też opcja kupienia desktopowej wersji za jednorazową opłatą w wysokości $79.

projektowanie makiet balsamiq

Liczba elementów jest wystarczająca jednak ograniczona do minimum, co dla początkujących użytkowników nie jest problemem. Jednak zagłębiając się w temat, możemy zacząć odczuwać pewne braki. Balsamiq jest zdecydowanie rozwiązaniem low-fidelity i nie zagwarantuje nam projektowania pięknie wyglądających makiet.

UXPin

Jak już wcześniej wspomnieliśmy, narzędzie należy do polskiego StartUp’u, który osiągnął potężny sukces. W cenie $15 dostajemy podstawowy pakiet, który w zupełności wystarcza na potrzeby bardziej zaawansowanego projektowania. UXPin oferuje inne plany, m.in. z możliwościami udostępniania ekranu czy rozmów głosowych, testów użyteczności oraz importami do Photoshopa i HTML.

UXPin sam w sobie jest bardzo dobrze przemyślany pod względem użyteczności i designu. Ich zespół często wypuszcza kolejne update’y, więc baza narzędzi stale się powiększa. Zaawansowane możliwości animacji oraz możliwości edytowania praktycznie każdego elementu sprawiają, że nasze makiety mogą nie tylko wyglądać profesjonalnie, ale również okazują się funkcjonalne. Warte uwagi są również bardzo dobre i darmowe ebooki tworzone przez UXPin’a na tematy powiązane z UX oraz UI.

projektowanie makiet uxpin

UXPin jest to narzędzie, w którym możemy stworzyć zarówno low-fidelity mock-up, jak i bardzo dobrze dopracowany high-fidelity mock-up. Ponadto udostępnianie makiet odbywa się poprzez zwykłe podesłanie linka drugiej osobie. Klient lub współpracownik może z łatwością dodawać komentarze na funkcjonującej makiecie.

Jedynym minusem UXPina jest to, że posiada jedynie wersję webową – brak jest desktopowego odpowiednika, a więc do korzystania z tej aplikacji będzie nam potrzebny stały dostęp do szybkiego Internetu.

Axure

Kolejne po UXPinie bardzo zaawansowane narzędzie do projektowania UX. Dostępna jest jedynie wersja desktopowa w cenie $269 za podstawowy pakiet.

Axure sam w sobie posiada jedynie kilka podstawowych elementów. Za to jest dostępna szeroka gama bibliotek do ściągnięcia. Niestety część z nich jest płatna. Ściąganie gotowych bibliotek jest czynnością, która dodatkowo zajmuje nasz czas, ale dzięki temu narzędzie będzie zawsze można dostosować do obecnych trendów. To wszystko sprawia, że Axure jest przemyślanym, aczkolwiek sporym kombajnem z dużymi możliwościami.

projektowanie makiet axure

Jeśli chodzi o udostępnianie swoich projektów klientom, mamy możliwość wyeksportowania pliku do HTML, a następnie przesłania go klientowi za pomocą poczty e-mail lub przez platformę Axure Share. Program jest intuicyjny i nie ma większego problemu w znalezieniu interesującej nas funkcji. Aplikacja pozwala na projektowanie bardziej skomplikowanych widgetów takich jak slideshow czy implementację filmów wideo oraz map Google.

Axure przywiązuje sporą wagę do edukowania użytkowników, a na ich stronie możemy znaleźć spory zasób tutoriali pokazujących jak w pełni wykorzystać narzędzie. Podobnie jak UXPin aplikacja Axure może jak najbardziej służyć do robienia prostych, szkicowych makiet, jak i bardziej zaawansowanych projektów.

Podsumowanie

Wybór konkretnego narzędzia powinien być dostosowany do naszych indywidualnych potrzeb. Ważną kwestią są również koszty oprogramowania. Widać sporą różnicę cenową pomiędzy Balsamiq i UXPin a trzecią pozycją Axure. Na szczęście wszystkie wyżej wymienione aplikacje mają darmową wersję demo. W związku z tym zachęcam do wypróbowania każdej z nich przed podjęciem finalnej decyzji.

  • Alicja

    Dzięki za ten artykuł, wiele rozjaśnił w głowie takiemu żółtodziobowi jak ja:)