Jak stworzyć dobrą makietę?

Kilka prostych rad dla osób, które zaczynają tworzyć makiety interfejsów.

Jak robić, aby zrobić i się nie narobić?

Stosuj różny poziom szczegółowości

Najlepiej zacząć od makiety lo-fidelity (o niskim stopniu szczegółowości, poszczególne elementy są pobieżnie naszkicowane), która w czasie prac będzie zmierzać w stronę makiety hi-fidelity (o wysokim stopniu szczegółowości, przypominającą gotową stronę).

Zaczynanie od ogółów ma sporo zalet. Szczegóły nie odciągają uwagi i można skupić się na stworzeniu solidnych fundamentów interfejsu. Tworzenie makiet lo-fi zajmuje mniej czasu. No i w przypadku porzucenia wypracowanego pomysłu, żal jest mniejszy.

Stopka serwisu lo-fi (u góry) i hi-fi (na dole)

Nie twórz złożonych interakcji (jeśli nie jest to potrzebne)

Makieta/prototyp to narzędzie, a nie produkt. Tworzenie elementów, z których nikt nie skorzysta jest stratą czasu. Prawda, często dokładne zobrazowanie interakcji jest niezbędne (szczególnie, gdy makieta ma posłużyć do testów z użytkownikami). Jeśli jednak wiesz, że nikt nie skorzysta z tej funkcji lub działanie elementu jest oczywiste, nie ma sensu tworzyć skomplikowanych mechanizmów.

Tworzenie działającej zakładki w tym miejscu nie ma większego sensu (chyba że makieta posłuży do testów z użytkownikami).

Korzystaj ze stałych elementów (masterów)

Jeśli pozwala na to używany przez ciebie program, twórz mastery (czyli stałe elementy, których możesz użyć jednocześnie w wielu widokach). Ich niedocenianie to częsty błąd osób zaczynających przygodę z projektowaniem, ale szybko można się tego nauczyć, gdy po drobnej korekcie projektu trzeba poprawić nie jeden, ale np. pięćdziesiąt elementów.

Prowadź rejestr zmian

Pomoże to zarówno tobie (wiesz, na czym skończyłeś pracę), jak i osobom, którym makieta/prototyp zostanie przedstawiona (wiedzą, co zmieniło się w porównaniu z ostatnią wersją, którą widzieli).

Jak sprawić, aby makieta była użyteczna?

Uważaj z kolorami

Kolory niepotrzebnie odwracają uwagę od meritum — klient czy inna osoba oceniająca makietę może nie skupić się na rozmieszczeniu elementów, ale właśnie kolorach (“nie lubię zielonego, proponuję zmienić kolor przycisków”). Użycie kolorów często jest też sygnałem dla grafika, aby trzymał się zastosowanej palety.

A wyróżniać ważniejsze elementu bez użycia kolorów? Skala szarości zdecydowanie wystarczy.

Wyróżnienie skalą szarości jest równie skuteczne, jak użycie kolorów

Nie używaj „Lorem Ipsum”

Makiety z rzeczywistymi danymi: a) powodują, że łatwiej wyobrazić sobie makietę jako prawdziwą stronę (BARDZO pomaga np. przy testach z użytkownikami) b) pozwolą uniknąć problemów wynikających z długości tekstów (wyrazy w języku polskim są z reguły dłuższe niż w łacinie).

Oczywiście, posiadanie wszystkich tekstów przed rozpoczęciem projektowania jest z reguły niemożliwe. Wystarczy jednak, aby użyta treść ogólnie oddawała to, co może się później w tym miejscu znaleźć.

Prawdziwe dane sprawiają, że makieta bardziej przypomina rzeczywisty serwis.

Zachowaj jednolity styl makiety

Kolory czy skala szarości, obrazki czy zaślepki, stylistyka szkicu czy wygląd podobny rzeczywistej strony — jakiekolwiek rozwiązania wybierzesz, staraj się ich trzymać. Dobrze zrobiona makieta musi być czytelna, a niekonsekwentna forma bardzo w tym przeszkadza. Poza tym, niechlujny dokument sugeruje, że jej twórca mógł nie przyłożyć się także do projektowania.

Niekonsekwencja odbija się na czytelności makiety

PS: Wpis inspirowany artykułem “10 simple ways to make wireframes more useful” Steve’a Cable’a, choć postawiłem akcenty na trochę inne sprawy.

18.01.2013