18.08.2011 / Design / Usability

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

  • Facebook Polub
  • LinkedIn Opublikuj
  • Twitter Udostępnij
Iga Mościchowska
UX Director, partner / WitFlow
 

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ą.

42582_makieta_thumb.png

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.

  • Facebook Polub
  • LinkedIn Opublikuj
  • Twitter Udostępnij
Komentarze (8)
 1 / 1 
Marek
1. Marek 19.08.2011 / 09:45
Super artykuł- jasno i na temat. Dzięki za dzielenie się wiedzą!
Iga Mościchowska
2. Iga Mościchowska 19.08.2011 / 10:31
@Marek - cieszę się, że artykuł się przyda :)
mythos
3. mythos 19.08.2011 / 15:27
Ja w sumie dopiero wgryzam się w te materię, ale wpis bardzo ciekawy. Rzeczowo i na temat, przyda sie na pewno. Dzięki i pozdrawiam
Monika Siewert
4. Monika Siewert 20.08.2011 / 01:52
Świetny materiał i bardzo dobry screen. Rewelacyjny pomysł, żeby taką makietę zaprezentować, bo idealnie obrazuje na czym to wszystko polega. Dobra robota! :)
Joanna Netka
5. Joanna Netka 21.08.2011 / 13:01
Bardzo dobry artykuł.
Emil Grochulski
6. Emil Grochulski 24.08.2011 / 23:46
Jest dokładnie tak jak piszesz :)
Im bardziej szkicowy charakter makiety tym łatwiej skupić się na meritum.

Unika się tekstów typu:
"a dlaczego ten przycisk taki zielony"
"a dlaczego tutaj tekst taki mało marketingowy"
"a ten element powinien być 2 piksele w prawo"
itp ;)


Bardzo fajnie napisany artykuł.
Olgierd Mrozik
7. Olgierd Mrozik 29.08.2011 / 12:08
Bardzo dobry tekst.


Dodałbym do niego jeszcze, iż warto aby makieta zawierała rzeczywiste treści i dane. Częstą praktyką jest wstawianie tekstów "Lorem ipsum..." a to może powodować istotne rozbieżności pomiędzy strukturą makiety, a ostatecznym wyglądem serwisu.


Zapobiega to niemiłym niespodziankom w fazie realizacji.


Szerzej na ten temat w ciekawym artykule Wireframing for web Apps: contrast.ie/blog/wireframing-for-web-apps
Helena
8. Helena 03.04.2017 / 08:30
Makiety stanowią bardzo dobry pomysł na prezentację modelu. Tak samo jest w przypadku makiet architektonicznych. Informacje zawarte w tym artykule są bardzo przydatne oraz ciekawe, dziękuję!
 1 / 1 
Trwa zapisywanie komentarza
Dodaj komentarz
Zaloguj się
Jeśli nie masz jeszcze konta w Interaktywnie.com - możesz się zarejestrować albo
wymagane
 
obrazek nieczytelny
 
 
wyślij
Wpisy tego samego autora
wizytówki firm
szukasz klientów dla firmy?
NuOrder
 
Arrow
newsletter
Arrow
Loader
Up Down
ostatnie komentarze
 
Dołącz do społeczności interaktywnie.com
 
 
 
 
© 2019 interaktywnie.com. All rights reserved.