Strzałki i prostokąty – dlaczego makieta strony internetowej to więcej, niż czarno-biały szkic? Przyjazny przewodnik dla początkujących przedsiębiorców

Avatar

Jarosław Morawski

Białe tło, czarne litery i prostokąty w różnych odcieniach szarości – to nie brzmi jak opis atrakcyjnej strony internetowej, prawda? A jednak tak początkowo wygląda większość projektów, które powstają w naszym branding studio. Nim strona internetowa strona zostanie przekazana grafikowi, który okrasi ją atrakcyjnymi elementami wizualnymi, musi zostać zaplanowana i zaprojektowana na wzór projektu architektonicznego. Ten etap nazywamy makietowaniem.

Niektórzy przedsiębiorcy uważają, że makietowanie to tylko szkic strony internetowej i nie warto w nie inwestować. Nic bardziej mylnego – śmiem twierdzić, że większość faktycznego projektowania odbywa się właśnie na tym etapie prac. Wtedy – jeszcze z dala od kolorów, typografii, ikon i ilustracji – określane są założenia, cele biznesowe i środki, jakimi można je osiągnąć.

Makiety odgrywają bardzo ważną rolę podczas projektowania strony lub sklepu internetowego. Nie są jednak same – inne przydatne narzędzia to architektura informacji, ścieżki użytkownika i prace analityczne. Ich miejsce w procesie jest stałe i zawsze poprzedza projektowanie graficzne – to jedyny sposób na zaplanowanie prac, zapewnienie spójności różnym aspektom projektu oraz uniknięcie poważnych problemów (opiszę je w dalszej części wpisu).

Gdzie w procesie są makiety?

  1. Prace analityczne (analiza konkurencji, potrzeb, założeń i celów biznesowych)
  2. Architektura informacji
  3. Ścieżki użytkownika
  4. Konsultacje, poprawki, akceptacja założeń
  5. Makietowanie (iterowanie)
  6. Projektowanie graficzne
  7. Wdrożenie (programowanie)

Grunt to przygotowanie

W najlepszym interesie każdego przedsiębiorcy leży dostarczenie kompletu informacji. Im są pełniejsze, tym łatwiej projektantowi UX zrozumieć specyfikę biznesu. Unikatowe cechy, cele biznesowe, cele konwersyjne, narzędzia sprzedażowe – im więcej się dowie, tym bardziej skuteczna będzie strona lub sklep.

Jest wiele sposobów na zaprojektowanie doświadczenia użytkownika w sieci. Sklep lub strona mogą być proste i jednoznaczne. Albo wręcz przeciwnie – tajemnicze i bardzo angażujące. Podczas projektowania trzeba mieć na uwadze założenia biznesowe i wizerunkowe oraz wystrzegać się licznych pułapek. Łatwo zrobić makietę, która po prostu będzie, odhaczy punkt na liście i popchnie prace do przodu. Niestety, zaniedbanie makietowania prowadzi do powstania dodatkowych problemów, które – niczym kula śnieżna – mogą się kumulować i mieć poważne konsekwencje na późniejszych etapach prac.

Jeśli makieta nie będzie przemyślana lub dostatecznie szczegółowa, przygotowany na jej podstawie projekt graficzny zostanie wdrożony ze wszystkimi brakami i niedociągnięciami, które staną się oczywiste zbyt późno. Zmiany na wdrożonej stronie lub sklepie niosą ze sobą duże trudności i koszta. Rozsądnie jest więc zaufać profesjonalistom i poświęcić dodatkowy czas na dopracowanie makiety, przedyskutowanie wszystkich wątpliwości i wspólne ustalenie kierunku.

Po prostu architektura informacji

Tak jak przed projektowaniem graficznym jest makietowanie, tak je poprzedza przygotowanie architektury informacji i ścieżek użytkownika. To bardzo ważny etap, na którym projektant UX podejmuje decyzje dotyczące struktury (mapy) strony oraz połączeń między jej elementami.

Architektura informacji to także wsparcie dla programistów przygotowujących się do wdrożenia. Przy okazji bardziej skomplikowanych projektów, takich jak rozbudowane serwisy lub aplikacje, solidna struktura z nakreśloną funkcjonalnością ułatwi zaplanowanie i estymację prac. Ułatwi, ale niczego nie zagwarantuje – na rzeczywisty czas prac nad projektem mają wpływ poprawki klienta oraz rozbudowywanie i testowanie dodatkowych rozwiązań. Solidna i elastyczna architektura informacji pozwala jednocześnie zwiększać funkcjonalność i mieć stałą kontrolę nad zakresem i jakością ostatecznych efektów projektu.

Nie bez powodu w nazwie tego etapu kryje się nawiązanie do architektury. Podobnie jak ona, projektowanie UX opiera się na użytkownikach, ich potrzebach, celach i wymaganiach. Bierze pod uwagę realne problemy i rozwiązuje je w ramach ograniczeń. Gdy architekt rozważa wybór tańszych materiałów, aby zmieścić się w budżecie swojego klienta, projektant UX gromadzi wtyczki i rozwiązania, które mogą zmniejszyć koszty projektu i przyspieszyć jego wdrożenie. Pracując nad stroną internetową, projektant określa liczbę i cel wszystkich podstron w serwisie oraz podkreśla powiązania. Kieruje się intuicyjnością i logiką, przy jednoczesnym uwzględnieniu celów biznesowych klienta.

Owe cele mogą być bardzo różne:

  • zwiększenie liczby odsłon
  • ekspozycja brandingu
  • wzmocnienie komunikacji
  • optymalizacja rozwiązań sprzedażowych
  • podniesienie poziom wsparcia klienta
  • dotarcie do nowych i obecnych klientów
  • skrócenie czasu niezbędnego do wykonania jakiejś czynności
  • zwiększenie użyteczności i dostępności
  • redesign usługi lub aplikacji

Osiągnięciu tych celów służy wiele narzędzi, z których najważniejsze to ścieżki użytkownika. Mają charakter mocno analityczny i koncentrują się na zachowaniu użytkownika na stronie. Pozwalają odkryć podstrony, które są rzadziej odwiedzane lub przerywają ścieżkę ważną dla celów biznesowych (np. zakup produktu lub zapisanie się na newsletter). Ścieżki użytkownika są planowane wraz z architekturą informacji – dzięki odpowiedniej kolejności podstron, połączeń między nimi i ich układowi, użytkownik może być skierowany na stronę produktu i zachęcony do zakupu.

Ścieżki użytkownika pełnią jeszcze jedną ważną rolę: gwarantują intuicyjność i spójność strony jako całości. Przyjęło się, że powinny być jak najkrótsze i najprostsze, a dostanie się do kluczowych miejsc w serwisie nie może wymagać więcej, niż kilku kliknięć. Planując drogę użytkownika, projektant UX nieustannie pamięta o jego komforcie i przyjemności ogólnego doświadczenia na stronie.

Przy okazji prac nad stroną i brandingiem agencji marketingu SmartYou, strukturę strony zwizualizowaliśmy jako drzewo składające się z bloków. Te najważniejsze wyróżniały się kolorem i pokazywały nadrzędną, najbardziej odpowiadającą naszym celom ścieżkę. Wizualizacja pozwoliła klientowi spojrzeć z góry na całość doświadczenia użytkownika na stronie i wskazać punkty, które wymagały dodatkowego zaakcentowania lub przeprojektowania. Dały mu także pełen obraz projektu, który z początkowych 1-3 stron zamienił się w złożony serwis o mocno konwersyjnym charakterze.

Symulacja doświadczenia

Zaprojektowana i zatwierdzona architektura informacji to solidny fundament dla pracy nad makietami. Na tym etapie projektant zna strukturę strony i jej najważniejsze funkcje. Wbrew pozorom, jego następnym krokiem nie jest po prostu stworzenie biało-czarnego szkicu dla strony, a nadanie kształtu treściom, jakie się na niej pojawią. Makieta jest formą dla treści.

Warto zaufać profesjonaliście. Jego wiedza, doświadczenie i umiejętności pozwolą osiągnąć najlepsze efekty. Przedsiębiorcy, którzy na własną rękę „szkicują” wygląd swojej nowej strony, rzadko biorą pod uwagę wymogi funkcjonalne, użytkowe i technologiczne (nie wszystkie rozwiązania mogą być wdrożone w ramach budżetu). Ponadto, pierwsza wersja makiety rzadko przypomina ostatnią, a praca nad prototypem to kwestia wielu iteracji i ciągłych zmian. Jeśli po jego akceptacji pojawią się dodatkowe informacje lub ostateczny efekt będzie wymagał dopracowania innych rozwiązań, rolę makiety przejmie projekt graficzny. Ważna jest więc stała współpraca grafika i projektanta UX, który sprawuje pieczę nad całością prac nad projektem.

Rozsądnie jest makietować w oparciu o gotowe treści. Tak jak architektura informacji wyznacza ramy strukturalno-logiczne, teksty to elementy bezpośredniej komunikacji, która nierozerwalnie wiąże się z nadrzędnym celem makiet, czyli funkcjonalnością. Składa się na nią układ strony i sposób prezentacji treści. Blog oferuje inne doświadczenie od sklepu, a landing page wymaga zupełnie innego zaangażowania, niż rozbudowana aplikacja działająca w przeglądarce. Dzięki tekstom lub ich zarysowi, projektant może je odpowiednio ułożyć na stronie i przyporządkować do wcześniej przygotowanych ścieżek użytkownika.

 

Jeśli chcesz obejrzeć przykłady naszych kompleksowych działań, gdzie makiety odegrały kluczową rolę podczas projektowania strony internetowej, zobacz projekt brandingu agencji SmartYoubranding portalu Productz czy branding software house Codee.

 

W sieci łatwo znaleźć przykłady makiet. Zazwyczaj są to czarne teksty i prostokąty w różnych odcieniach szarości poukładane na białym tle. Jest kilka dobrych powodów, dla których wyglądają w ten sposób.

  • makiety skupiają się na konkretach. W większości z nich trudno szukać ikon (jeśli już, pojawiają się jedynie jako przykłady), a w trakcie pracy projektant nie przywiązuje uwagi do odległości i siatki strony. Celem makiet jest zasymulować doświadczenie i wypracować rozwiązanie, które będzie funkcjonalne i użyteczne.
  • makiety są często rozwijane i muszą być elastyczne. Bardziej złożone elementy graficzne spowalniałyby proces iteracji, który niekiedy przewiduje kilkanaście lub kilkadziesiąt wersji różnych widoków. Prosta konstrukcja pozwala na modułową budowę makiet i dokonywanie szybkich zmian.
  • prosty wygląd to doskonały sposób na określenie hierarchii informacji. Dzięki zróżnicowaniu natężenia szarości w różnych elementach makiet, możliwe jest ustalenie hierarchii i rytmu dla wszystkich elementów na danej stronie. Im element ciemniejszy, tym większa jego waga.
  • makiety służą do testów. Wiele z bardziej rozbudowanych makiet w trybie mid- i hi-fi może być wykorzystanych w testach z użytkownikami. Zazwyczaj zamienia się je w prototypy pozwalające na połączenie przycisków i wirtualnych linków na stronie z odpowiednimi ścieżkami. Celem testów jest sprawdzenie założeń funkcjonalnych oraz intuicyjności strony lub aplikacji. W naszym studio prototypy przygotowujemy w aplikacji Adobe Xd, która eksportuje je jako filmy lub klikalne prototypy w przeglądarce.

Czarno na białym

Makiety symulują doświadczenie użytkownika na stronie i pozwalają spojrzeć na projekt jego oczami. Dzięki tej perspektywie można dostrzec niedociągnięcia i braki, których pojawienie się na etapie projektowania graficznego lub – o zgrozo – wdrożenia wystawiłoby budżet i relację z klientem na ciężką próbę. A zatem makiety oferują wgląd w ogólny zarys strony oraz umożliwiają rozwiązanie problemów na bardzo wczesnym etapie.

Czarno na białym pokazują, jak w przyszłości będzie wyglądać nowa strona lub aplikacja klienta. Prezentują nawigację i ułożenie modułów na podstronie w niemalże finalnej formie. Są pierwszym punktem styku między klientem a zamówionym projektem – już początkowe wersje makiet pozwalają poznać feeling strony i wyobrazić sobie finalny efekt. Prototypy stają się tematem do dyskusji prowadzącej do ciekawych wniosków i korekt wcześniejszych założeń.

O ile przesunięcie jakiegoś elementu w górę lub dół nie stanowi większego problemu, tak nierzadko wprowadzane zmiany mają charakter strategiczny. Przeklikując makietę, możemy nabrać dystansu do projektu i ocenić go świeżym okiem. Makiety uwydatniają braki w komunikacji oraz słabe punkty strony. Najczęściej poprawki dotyczą:

  • liczby opcji i linków w nawigacji
  • wyróżnienia przycisków call-to-action
  • stopnia skomplikowania linii produktów lub usług
  • długości i wielkości tekstów
  • nadania priorytetu ważnym elementom
  • wyeksponowania ważnych elementów przed złamaniem ekranu (fold)

Zaś podczas testów z użytkownikami możemy się dowiedzieć, że:

  • nie są pewni, co robi dany przycisk
  • ten przycisk „Kup teraz” jest niewidoczny i prawie go przegapili
  • formularz kontaktowy ma zbyt wiele pól
  • na liście produktów jest za dużo elementów i czują się przytłoczeni
  • ta ikona jest za mała i ledwo ją widzą
  • w tamtym module mówi się za dużo o firmie, a za mało o produkcie
  • etc.

Któreś z uwag brzmią znajomo? Jeśli tak, a w statystykach strony są spadające słupki, rozważ audyt UX i wprowadzenie usprawnień. Nasze studio oferuje usługę audytu, w ramach której analizujemy wszystkie aspekty doświadczenia na stronie: strukturę, architekturę informacji, użyteczność, wygląd i komunikację (copywriting, branding). Wyniki analizy prezentujemy w formie raportu z wnioskami i propozycjami poprawek.

Rozwiązanie ważnych problemów na etapie makietowania to oszczędność czasu, pieniędzy i energii. Gdybyśmy po akceptacji architektury informacji przeszli od razu do projektowania graficznego, a następnie wdrożenia, wprowadzenie zmian odcisnęłoby przykre piętno na budżecie i płynności projektu.

Podsumowując (w kilku słowach)

Tak długi tekst warto zakończyć krótkim i treściwym podsumowaniem. Teraz już wiesz, że:

  • Makieta to więcej niż szkic strony. Znajduje się gdzieś pośrodku między strategią i planowaniem a projektowaniem graficznym i wdrożeniem.
  • Gotowa makieta pozwala zasymulować finalny produkt i rozwiązać problemy, nim rzeczywiście powstaną.
  • To także doskonała podstawa do testów z użytkownikami oraz szansa na obiektywną ocenę postępów prac.
  • Architektura informacji to plan zakładający strukturę i logikę podstron w serwisie. Poprzedza makietowanie i pozwala stworzyć podstawy funkcjonalne dla wszystkich późniejszych prac.
  • Ścieżki użytkownika tworzone są wraz z architekturą informacji i mogą być wykorzystane do osiągania celów biznesowych – odpowiednia kolejność stron i ich układ mogą zachęcić do zakupu, zapisania się do newslettera lub podjęcia jakiegoś działania.

Tworzenie strony internetowej nie różni się od budowy domu. Oba przedsięwzięcia wymagają zaangażowania grupy specjalistów i znacznych nakładów finansowych. Tak jak budynek potrzebuje drobiazgowych planów architektonicznych, powstanie strony internetowej poprzedzają struktura informacji, makieta i prototyp. Pozwalają zaoszczędzić czas i pieniądze, a także uniknąć wielu niespodziewanych problemów w przyszłości.

W naszym studio makiety niezmiennie okazują się przydatnym narzędziem w trakcie prac nad projektem – nieważne, czy chodzi o stronę i branding software house‚u czy porównywarkę setek tysięcy produktów.

Możemy Ci pomóc? 
Odezwij się

Twoją markę stać na więcej.
Napisz w czym możemy Ci pomóc.

Piotr Synowiec

Piotr Synowiec
współwłaściciel

meee@holysheep.co