Między briefem a grafiką, czyli jak zrozumieć makiety

Pierwszy kontakt klienta z agencją interaktywną odbywa się zwykle poprzez brief, który definiuje cele projektu i jego kontekst. Jest to zaledwie zalążek dalszej pracy koncepcyjnej na linii klient - agencja. Zanim jednak rozpocznie się rozmowa o kolorach i wyglądzie, należy pochylić się nad makietami funkcjonalnymi. Pytanie, jak rozmawiać o projekcie, kiedy nie widać końcowego efektu?

Czym są makiety funkcjonalne?

Tworzenie projektów serwisów internetowych rozpoczyna się zwykle od szkiców, których zadaniem jest szybkie generowanie pomysłów. Makieta funkcjonalna to taki właśnie szkic - wizualizacja rozmieszczenia elementów na danej stronie internetowej. Szkielet ekranu nie pokazuje jeszcze wyglądu strony, skupia się na funkcjonalnościach i zawartości. Stanowi punkt wyjścia do rozmowy o koncepcji serwisu – sposobie realizacji celów przedstawionych w briefie. Jest także punktem, w którym spotyka się podejście biznesowe klienta, potrzeby użytkowników, ograniczenia technologiczne oraz kreatywność designu.

Makiety lo-fi i hi-fi

Makiety mogą mieć postać papierowych szkiców o niskim poziomie szczegółowości, kiedy pokazują jedynie rozmieszczenie funkcjonalności na stronie. Mogą być także bardziej rozbudowane i tworzone za pomocą oprogramowania. Makiety hi-fi (wysokiej szczegółowości), zawierają już konkretne nazwy etykiet, fragmenty tekstów, prezentują dokładnie wszystkie elementy interfejsu i obrazują jego działanie. Nie operują jednak ani kolorami, ani zdjęciami – zwykle są w odcieniach szarości. Są jak plan domu opracowany przez architekta – pokazują rozmieszczenie ścian, okien czy elektryki, ale nie design wnętrza.

Zadaniem makiet jest kierowanie uwagi osób uczestniczących w projekcie na to, jak ma działać serwis, a nie jak ma wyglądać. Szkicowy charakter makiet zachęca do merytorycznej dyskusji o rozwiązaniach, w przeciwieństwie do projektów graficznych, które sprowadzają najczęściej dyskusję do rozmów o preferencjach i odczuciach, a także szczegółach interfejsu. Może to negatywnie odbić się na całym projekcie.

Jak czytać makiety?

Makieta funkcjonalna jest pewnego rodzaju kodem, który trzeba umieć odpowiednio czytać. Nie jest to wcale kod trudny do nauczenia. Jednym z typowych elementów stosowanych w makietach jest tak zwany „placeholder”. Przekreślony prostokąt zastępuje obrazy, rysunki, grafiki lub video. Pokazuje obszar, który w gotowym projekcie zostanie zastąpiony odpowiednią treścią, a którego umieszczenie na makiecie zaburzyłoby odbiór interfejsu. Podobnym standardem w makietach jest brak kolorów, poza elementami aktywnymi. Zwykle odnośniki wyróżnia się kolorem niebieskim, wcale nie oznacza to jednak, że projekt graficzny także musi stosować ten kolor. Bywa, że na makietach umieszczany jest tekst łaciński, zaczynający się od słów „Lorem ipsum…”. Dotyczy to takich obszarów, których treść nie ma większego znaczenia na etapie projektowania, i które dopiero w końcowym projekcie zostaną zastąpione właściwą treścią.

Oceniając makiety należy zwrócić uwagę na: strukturę serwisu, treść stron, hierarchię informacji, działanie funkcjonalności, płynność interakcji z interfejsem. W tym celu warto zadać sobie następujące pytania:

1. Czy na makiecie znajdują się wszystkie potrzebne informacje i treści?
2. Czy jakieś elementy na makiecie są niepotrzebne, zbędne?
3. Czy najważniejsza treść (lub funkcjonalność) jest pierwszą rzeczą, którą zauważasz na makiecie?
4. Czy zachowano właściwą gradację treści (poprzez ich kolejność, wielkość lub intensywność)?
5. Czy wszystkie użyte etykiety i terminy są zrozumiałe?
6. Czy wiadomo, w jaki sposób poruszać się po interfejsie? Jak dotrzeć do innych części serwisu?
7. Czy działanie wszystkich elementów interfejsu jest zrozumiałe?
8. Czy makieta zawiera przykłady nietypowych treści (np. bardzo długą nazwę pliku lub nieregularną liczbę zdjęć w galerii)?

Makiety w procesie projektowania serwisów internetowych

Podstawową korzyścią makiet jest możliwość szybkiej weryfikacji założeń i koncepcji. Pozwala to upewnić się, że wszystkie strony projektu definiują go w taki sam sposób i zapobiega nieporozumieniom na dalszym etapie realizacji. Częściowo dzieje się tak dzięki zastąpieniu niejasnych terminów (takich jak karuzela, slider, lightbox) odpowiednią wizualizacją. Rozmawianie o makietach stanowi łatwiejszą formę komunikacji, niż operowanie słownictwem branżowym czy posługiwanie się kilkudziesięciu stronicowymi specyfikacjami.

Dzięki dokładnym dyskusjom na wczesnym etapie projektowania, na dalszych etapach jest mniej kwestii wymagających poprawek i zmian. Niewątpliwą korzyścią makiet jest więc oszczędność zasobów - szybkie poprawki makiet są tańsze niż wprowadzanie zmian do projektów graficznych czy istniejącego już serwisu. Jednocześnie szkicowy charakter makiet promuje iteracyjne podejście do projektu. Pozwala to sprawdzić kilka wariantów interfejsu, zanim zdecydujemy się na ten ostateczny.

Kolejnym, ważnym aspektem jest skupienie uwagi wszystkich zaangażowanych osób na użyteczności, intuicyjności i realizacji celów, zamiast na indywidualnych preferencjach odbiorców projektu.

Makiety powinny być tworzone przez projektantów interakcji lub architektów informacji. Ich wiedza skupia się na psychologicznych aspektach interakcji człowieka z komputerem, a nie samym wyglądzie projektu. Dzięki ścisłej współpracy takiego eksperta z grafikiem możemy uzyskać projekt, który jest nie tylko estetyczny, ale również przyjazny i intuicyjny dla użytkowników końcowych.