Skocz do linków, Skocz do treści

Makiety, prototypy i 6 popularnych błędów

8 maja 2008 10:09. Autor: Robert Drózd. 9 komentarzy

Trudno jest sobie wyobrazić pracę architekta informacji bez wykorzystania makiet i prototypów. Dzięki nim możemy obejrzeć gotowy produkt zanim jeszcze rozpoczną się na dobre prace grafików i projektantów.

Czym różnią się te dwa pojęcia? Czasami są używane zamiennie, ale formalnie rzecz biorąc:

Makiety (wireframes) to po prostu rysunki interfejsu i funkcjonalności produktu. Prototypy to makiety na których można sprawdzić interakcję z produktem, a więc najczęściej klikalne.

Hi-fi i lo-fi

Tradycyjny podział makiet wyróżnia dwa rodzaje ze względu na ich szczegółowość i dopracowanie.

Na makiecie ?lo-fi? oznaczone są tylko elementy podstawowe i niezbędne do interakcji. Patrzymy na taki projekt z dużego oddalenia i chcemy widzieć to co najważniejsze. Im bardziej uproszczona jest makieta, tym więcej mówiąc o niej używamy wyobraźni, tym bardziej też pasuje do początkowego projektowania. Taką makietę można po prostu narysować na kartce i najczęściej od tego się zaczyna.

Makieta „hi-fi” bardziej już przypomina ostateczny produkt, a stosuje się ją tym częściej im bliżej końca projektu. Wtedy coraz większy nacisk kładzie się na szczegóły poszczególnych elementów, a nie na ogólny obraz. Właściwie najpóźniejszą makietą hi-fi jest już projekt graficzny, który (przynajmniej teoretycznie) powinno się robić na podstawie wcześniejszych makiet. Takich makiet nie da się już zrobić ręcznie, trzeba używać oprogramowania.

Kiedy makietę uznamy za „hi-fi”? Nie ma tutaj ścisłego rozdzielenia. Często jednak może się zdarzyć następująca sytuacja: pokazujemy wydruk makiety jakiemuś dyrektorowi, prezesowi czy innej ważnej personie, która ma o jedno zero więcej. Najczęściej usłyszymy kurtuazyjne „o tak, to bardzo fajne, świeże, widzę postęp i dobrą robotę”. I często też usłyszymy zdanie, które za pierwszym razem wprowadzi nas w osłupienie: „A tę stronę to ja sobie mogę gdzieś już obejrzeć w sieci?”

Jeśli ktoś jest w stanie pomylić makietę z działającą stroną, to znaczy że makieta jest już dostatecznie „hi-fi”.

Jakie są popularne błędy w korzystaniu z makiet?

1. Rozpoczynanie od rysowania makiet. To się zdarza nagminnie. Przychodzę do klienta rozmawiać o pomyśle na jego nową stronę (którą mam zaprojektować). I co widzę? Pięknie narysowaną makietę – lub jeszcze gorzej: projekt graficzny. Woła się grafika, słuchaj, narysuj nam nową stronę, bo stara nam się nie podoba i trzeba to odświeżyć. I grafik rysuje. Trudno w takich sytuacjach powiedzieć, że przecież projektowanie to my dopiero musimy zacząć. Określić co jest nie tak w obecnym działającym serwisie, jak ludzie z niego korzystają, opisać jakąś wizję zmian i cele krótko- i długookresowe, przygotować jakieś scenariusze i dopiero wtedy to rysować.

Rysunek sam w sobie nie jest złą metodą na burzę mózgów – co byśmy chcieli mieć w nowym serwisie. Ale to trzeba jasno powiedzieć – nie jest jeszcze makieta, a wstępny szkic.

2. „Radosne rysowanie” z pominięciem założeń. Kiedy zaczynamy rysować, nagle ponosi nas fantazja i zapominamy o tym co sobie założyliśmy wcześniej. Potem się czasami okazuje, że zapomniano o paru różnych funkcjach które być powinny i ups – nie ma już miejsca.

Dość skutecznym sposobem na trzymanie się właściwej ścieżki jest robienie wstępnych szkiców makiet dla każdej z person, które wcześniej zaprojektowaliśmy. Osobna makieta dla persony głównej i osobna dla każdej z pobocznych. Rysujemy wtedy tylko dla tej jednej osoby, jeśli z czegoś ta osoba nie skorzysta, to na makiecie tego nie ma. Oczywiście to proces trochę czasochłonny, ale warto go wykonać dla najważniejszych części produktu, np. dla strony głównej.

3. Skupianie się na wyglądzie. Oto dlaczego ważne jest by wiedzieć kiedy używamy „lo-fi” a kiedy „hi-fi”. Jeśli zaczynamy projektowanie od tego, że dobieramy wielkość czcionek, kolory i tła, wtedy nie będzie szansy porozmawiać o układzie serwisu czy schemacie nawigacji. O tych elementach których w makiecie nie ma nie rozmawia się, więc za każdym razem, jak tylko przyjdzie ochota coś „upiększyć”, warto zastanowić się czy na pewno chcemy na tym etapie projektowania mówić o takich szczegółach.

4. Korzystanie z zaawansowanych narzędzi. To błąd? Tak, jeśli tworzymy prototyp „lo-fi” – narzędzia z wieloma funkcjami rysowania i formatowania (np. Photoshop, Corel) mogą tylko zaszkodzić. Sama charakterystyka takiego narzędzia sprawia, że prototyp wygląda „ładniej” niż potrzebujemy na danym etapie.

5. Założenie że dobra makieta to już prawie gotowy produkt. Niedawno na forum poświęconym Axure (popularne narzędzie do prototypowania) widziałem rozczulający wątek o tym, że ktoś stworzył prototyp serwisu intranetowego dla swojej firmy i tak mu się podoba, że w zasadzie … mógłby zostać. Tworzenie prototypu i produktu finalnego to dwa odrębne procesy i nie da się ich połączyć bez szkody dla produktu.

Jeden wyjątek jestem sobie w stanie wyobrazić – że tworzymy prototyp w narzędziu WYSIWYG służącym do tworzenia stron internetowych czy oprogramowania – i wtedy każdy prototyp przybliża nas właściwie do ostatecznej wersji. Ale zastosowanie takich narzędzi w większych projektach jest ograniczone, bardzo rzadko zdarzają się serwisy internetowe składające się tylko z interfejsu, bez części aplikacyjnej.

6. Pominięcie edukacji klientów. Klienci powinni zawsze wiedzieć jaki jest cel prototypów, które im się pokazuje. Współpraca z grafikami nauczyła wielu decydentów, że to co im się pokazuje jest już „prawie” finalnym produktem, zatem zawiera mniej więcej to co produkt finalny. Co klient w tym momencie ogląda, co tam jest i czego tam nie ma – to podstawy, które jakoś trzeba przekazać przed pierwszym pokazaniem jakichkolwiek obrazków.

W jednym z następnych postów (ileż ja ich zapowiadam…) omówię rożne metody tworzenia prototypów i wykorzystywane w tym celu oprogramowanie.

PS. nowy WordPress od strony administracyjnej jest straszny, paskudny i bezużyteczny. Dwa kroki do tyłu w porównaniu z 2.0. Nie mam bezpośredniego dostępu do kategorii. Nie mogę ustawić kolejności bloków. Dużo zbędnego miejsca zajmuje nagłówek. Nawigacja główna wymaga większej ilości kliknięć.  I to podobno ludzie z HappyCog projektowali? Ciekaw jestem, jak wyglądały ich prototypy i z jakich założeń wychodzili.

Podobne artykuły:

Być może zainteresują Cię następujące artykuły:

Zapisz się na kanał RSS bloga i dołącz do ponad 1500 czytelników RSS.

Zostań fanem WebAudit na Facebooku.

Komentarze czytelników

Śledź komentarze do tego artykułu: format RSS
  1. Łukasz Sobek

    Co do interfejsu prawda szczera, ciekawie wygląda, ale z usability katastrofa. Trzeba zainstalować wtyczki z rozwijanym paskiem narzędzi, żeby dało się przeżyć, zwłaszcza, że (tak jak mówiłeś) liczba klików jest straszna. Rozumiem, że przeciętny bloger może sobie pozwolić na takie rzeczy, ale od projektantów wielkiego systemu blogowego oczekiwałem nieco więcej – Web2.0 pomijając przecież wszystko ma mieć swój cel, a cele użytkowe powinny preważać nad estetycznymi (coś czego nadal się uczę, dziękuję za Twoje wskazówki :).

    Podsumowując: Ech, szkoda gadać – wygląda ładnie … (i tu oficjalna część wystąpienia się kończy :)

Komentarze z innych blogów

  1. Makiety, prototypy i 6 popularnych błędów

    […] Pełen tekst na stronie: WebAudit Blog: Makiety, prototypy i 6 popularnych błędów. […]

  2. WebAudit Blog » Czym rysować makiety? Przegląd narzędzi - część I.

    […] Skocz do menu « Makiety, prototypy i 6 popularnych błędów […]

  3. WebAudit Blog » A jednak “makiety”!

    […] komórkowym. Dziękuję za odwiedziny!W krótkich dywagacjach teoretycznych na początku artykułu o tworzeniu makiet, stwierdziłem że w zasadzie określenia „makiety” i „prototypy” […]

  4. Makiety nowego Wordpressa : WebAudit Blog

    […] w telefonie komórkowym. Dziękuję za odwiedziny!Pisałem już kilka razy na temat projektowania makiet. Ci, którzy chcieliby się tego nauczyć, chcieliby pewnie obejrzeć jakieś przykładowe. Jest […]

  5. Podsumowanie roku 2008 : WebAudit Blog

    […] Makiety, prototypy i 6 popularnych błędów […]

  6. Czy opłaca się tworzyć makiety serwisów WWW? | User Centered Design

    […] Human Interface Guidelines Mental Models and Usability Webaudit, Makiety, prototypy i 6 popularnych błędów […]

  7. Wstęp do prototypowania « - Dymecki.pl

    […] a hi-fi nawet położenie każdego łącza i fragmentu tekstu. Polecam artykuł Roberta Drózda Makiety, prototypy i 6 popularnych błędów, który dobrze opisuje różnice między makietami hi-fi i […]

  8. Polish IA Summit 2012 – udało się! Moje notatki i zdjęcia : WebAudit Blog

    […] Kocielnik zbadali to czy wizualne dopracowanie prototypów hi-fi oraz lo-fi (opisywałem kiedyś różnice w przypadku makiet) ma praktyczne […]

Zostaw komentarz

W komentarzu można (choć nie trzeba) używać podstawowych znaczników XHTML. Komentarze zawierające w podpisie słowa kluczowe mogą zostać potraktowane jako spam i usunięte.