Pierwotnie termin "wireframe" odnosił się do wizualnej reprezentacji obiektów trójwymiarowych, takich jak te używane w projektowaniu i rozwoju produktów. Obecnie jest również używany do opisywania modelowania 3D w animacji komputerowej oraz w projektowaniu i tworzeniu dwuwymiarowych stron internetowych i aplikacji mobilnych.
Czytaj dalej, aby dowiedzieć się więcej o wartości makiet stron internetowych, roli UX i UI na wczesnym etapie projektowania stron i aplikacji oraz o tym, jak oprogramowanie do tworzenia makiet ułatwia i przyspiesza ten proces, zwiększając jego efektywność.
Czym są makiety?
W projektowaniu stron internetowych makieta (wireframe) lub diagram makiety to wizualna reprezentacja struktury i funkcjonalności pojedynczej strony internetowej lub ekranu aplikacji mobilnej w odcieniach szarości. Makiety są używane na wczesnym etapie procesu programowania do ustalenia podstawowej struktury strony przed dodaniem projektu wizualnego i treści. Można je tworzyć na papierze, w aplikacjach lub dodawać bezpośrednio do kodu HTML/CSS. Ponieważ makiety celowo zawierają niewiele szczegółów wizualnych, najlepiej sprawdzają się jako element planowania, który precyzuje układ, hierarchię i zachowanie elementów, zanim ktokolwiek zainwestuje w dopracowaną grafikę lub kod.
Użyj makiety UX, aby odpowiedzieć na następujące pytania:
-
Co będzie wyświetlane w interfejsie użytkownika?
-
Gdzie na stronie zostaną umieszczone poszczególne elementy?
-
W jaki sposób użytkownicy będą wchodzić w interakcję z elementami strony?
-
Jak będzie działać strona internetowa lub aplikacja?
Makiety (wireframes) a mockupy i prototypy
Zespoły często używają tych terminów zamiennie, jednak służą one do różnych celów na różnych poziomach wierności (fidelity). Diagramy makiet różnią się od mockupów i prototypów, ponieważ mają stanowić reprezentację o niskiej wierności (low-fidelity), skupioną na układzie i funkcjonalności. Pomyśl o makiecie jak o planie, który pokazuje proponowane funkcje i oczekiwany sposób działania produktu. Prostota ułatwia weryfikację i udoskonalanie planu w trakcie pracy.
Większość przykładów diagramów makiet zawiera proste linie i bloki z minimalną ilością kolorów oraz tylko najbardziej podstawowymi szczegółami. These simple shapes represent UX elements such as menus, buttons, content, and navigation functions. Na przykład zwykły prostokąt z napisem "Logo / Strona główna" określa miejsce umieszczenia logo firmy oraz wskazuje, że będzie ono linkować do strony głównej witryny.
Z kolei mockup przypomina bardziej niefunkcjonalny model. Daje pełniejsze wyobrażenie o tym, jak będzie wyglądał ostateczny produkt – zawiera grafikę, kolory, branding i czcionki, ale nie ma włączonych żadnych funkcji interfejsu użytkownika.
Prototyp jest bliższy w pełni funkcjonalnej wersji końcowego produktu. Służy do demonstrowania funkcji i możliwości, a także do testowania UX i kontroli jakości.
Wartość makiet w tworzeniu stron internetowych i aplikacji
W praktyce zespoły czerpią korzyści z makiet na kilka powtarzających się sposobów.
Skupienie zespołów i realizacja celów
Makiety zapewniają wszystkim uczestnikom procesu tworzenia strony internetowej wspólne zrozumienie projektu. Oznaczają one nie tylko dokładniejsze dopracowanie projektów i prostsze tworzenie treści, ale także głębsze zrozumienie budowanego produktu przez zespół programistów. Zapobiegają również konieczności wprowadzania doraźnych poprawek, korekt lub całkowitej przebudowy na dalszych etapach procesu – co jest znane jako rozrastanie się zakresu projektu (”scope creep”).
Gdy wszyscy interesariusze zatwierdzą treść i funkcjonalność określoną w makiecie, zespół może śmiało przejść do kolejnych kroków. W miarę postępu projektu makieta służy jako punkt odniesienia, ułatwiając poszczególnym zespołom realizację zadań.
Zapewnianie pozytywnych doświadczeń z marką
Makiety zmniejszają również ryzyko dla marki i jej reputacji, pomagając zespołom wyłapać niejasne lub frustrujące rozwiązania, zanim trafią one do użytkowników. Dobrze zaprojektowany interfejs UX i UI strony lub aplikacji jest praktycznie niezauważalny – produkt po prostu działa, a wszyscy są zadowoleni. Słaby projekt wywołuje jednak negatywne skutki, które trwale szkodzą marce i reputacji. Tworzenie makiet aplikacji i stron internetowych to kluczowy krok do osiągnięcia wyjątkowego projektu UX.
Upewnienie się, że strona lub aplikacja powstaje zgodnie z celami
Wyraźny wgląd w funkcje przy minimalnym wpływie elementów kreatywnych pozwala interesariuszom skupić się na innych aspektach projektu. Tworzenie makiet określa oczekiwania co do sposobu wdrożenia funkcji poprzez pokazanie, jak będą one działać, gdzie zostaną zlokalizowane i jakie korzyści przyniosą. Dana funkcja zostanie usunięta, jeśli nie wpisuje się w cele witryny.
Skupienie na użyteczności
Tworzenie makiet pozwala na obiektywne spojrzenie na nazwy linków, ścieżki konwersji, łatwość obsługi, nawigację i rozmieszczenie funkcji. Makiety pomagają zidentyfikować wady w architekturze witryny lub funkcjach oraz pozwalają zwizualizować przepływ z perspektywy użytkownika. Skupienie się na użyteczności na wczesnym etapie jest szczególnie ważne, ponieważ usunięcie problemów w fazie projektowania okazuje się znacznie tańsze i łatwiejsze niż po rozpoczęciu pisania kodu.
Zrozumienie możliwości rozwoju treści
Jeśli wiesz, że Twoja witryna rozbuduje się w najbliższej przyszłości, musi ona pomieścić nowe elementy przy minimalnym wpływie na architekturę, użyteczność i projekt. Tworzenie makiet ujawnia te istotne możliwości rozwoju treści i pokazuje, jak je odpowiednio dopasować.
Uwzględnianie opinii i zachęcanie do współpracy na wczesnym etapie
Rozpoczynając nowy projekt lub przebudowę produktu, warto zebrać wczesne opinie i uwagi, aby nie marnować czasu i pieniędzy na rozwój w złym kierunku. Makieta stanowi doskonały sposób na szybkie przekazanie pomysłów i uzyskanie wczesnych komentarzy, które pomogą zaprojektować lepszy produkt.
Pracując z klientami i innymi interesariuszami produktu, współpracujesz i wypracowujesz konsensus co do tego, jak interfejs powinien wyglądać, jak powinien funkcjonować i jakie elementy ma zawierać.
Udostępnianie diagramów makiet klientowi, projektantom, zespołowi programistów i wszystkim innym osobom zaangażowanym w rozwój produktu zachęca do otwartego dialogu i współpracy, gwarantując wspólne zrozumienie celów na wczesnym etapie projektu.
Usprawnienie programowania w metodyce Agile
Makiety świetnie sprawdzają się w środowiskach Agile. Współpracujesz z kierownikami produktu i programistami, aby określić, które sekcje projektu należy rozwijać w każdej iteracji. Tworząc produkt w iteracyjnych częściach, łatwiej uzyskasz opinie oraz udoskonalisz proces projektowania i programowania. Zawsze lepiej zebrać uwagi na wczesnym etapie, zanim poświęci się zbyt wiele czasu na kodowanie.
Oszczędność czasu i pieniędzy
Dobrze zaprojektowana makieta pozwala zaoszczędzić czas i pieniądze, ponieważ zespół programistów lepiej rozumie ogólny produkt, który ma zbudować, i unika konieczności naprawiania problemów w przyszłości. Zespół nie musi tworzyć prowizorycznych rozwiązań na późnym etapie, aby funkcje działały prawidłowo.
Inne zespoły korzystające z diagramów makiet
Ponieważ makiety wspierają spójność działań na różnych stanowiskach, są szczególnie przydatne jako wspólny punkt odniesienia dla szerszego zespołu produktowego – nie tylko dla projektantów.
Klienci i interesariusze
Makiety zapewniają klientom (lub interesariuszom wewnątrz firmy, na przykład zespołowi marketingu) czytelne, ogólne zrozumienie tego, co powstaje. Osoby opiniujące mogą szybko ocenić, czy projekt spełnia ich oczekiwania, ustalić, czy czegoś brakuje, sprawdzić dostępne działania i zobaczyć, jak połączono elementy interfejsu.
Pokazanie makiet klientom pozwala ujawnić potencjalne problemy lub brakujące elementy, które wcześniej pominięto lub których nie wzięto pod uwagę. Naprawianie błędów podczas budowania makiet okazuje się znacznie łatwiejsze i tańsze niż próby rozwiązywania problemów po napisaniu kodu.
Kierownicy projektów
Kierownicy projektów używają makiet, aby zapewnić wspólne zrozumienie wśród wszystkich interesariuszy. Udostępnienie makiety wszystkim zaangażowanym ułatwia zobaczenie kierunku projektu, zidentyfikowanie potencjalnych problemów, zasugerowanie ulepszeń i uzgodnienie ostatecznego kształtu produktu.
Kierownicy projektów mogą używać makiet jako listy kontrolnej do śledzenia postępów i upewniania się, że wszystko powstaje zgodnie z ustaleniami.
Programiści
Programiści używają makiet do zrozumienia wymagań technicznych i określenia miejsc, w których należy wdrożyć określoną funkcjonalność. Kilka makiet użytych do stworzenia scenorysu (storyboardu) pomaga programistom ustalić, jak interakcje użytkownika powinny ze sobą współgrać. Tworzenie scenorysów za pomocą makiet daje programistom wyobrażenie o przepływie danych i pomaga zidentyfikować potencjalne wąskie gardła.
Projektowanie UX, UI i makiet
Projektowanie doświadczeń użytkownika (UX) to metoda zwiększania lojalności i satysfakcji klientów poprzez poprawę użyteczności i satysfakcji płynącej z interakcji między klientem a witryną, aplikacją i produktem. Projektowanie interfejsu użytkownika (UI) jest bliższe projektowaniu graficznemu, choć zakres obowiązków okazuje się nieco bardziej złożony. Z reguły projektowanie doświadczeń użytkownika poprzedza projektowanie interfejsu. UX i UI powinny się ze sobą przeplatać w procesie projektowania makiet. Obszary koncentracji obejmują:
Architektura informacji i makiety
Będąca częścią ogólnego procesu tworzenia stron internetowych i makiet architektura informacji polega na umieszczaniu informacji i nadawaniu im priorytetów w sposób, który zapewnia pełne zrozumienie przyszłym użytkownikom witryny lub aplikacji mobilnej. Według publikacji Information Architecture for the World Wide Web istnieją cztery podstawowe elementy:
-
Schematy i struktury organizacyjne: kategoryzowanie i strukturyzowanie informacji
-
Systemy etykietowania: reprezentowanie informacji
-
Systemy nawigacji: przemieszczanie się po informacjach
-
Systemy wyszukiwania: szukanie i odnajdywanie informacji
Dobra architektura informacji rozpoczyna się od wszechstronnej analizy biznesowej w celu opracowania strategii dotyczącej treści, co pozwala uzyskać ogólny obraz struktury, zawartości i projektu w oparciu o cele firmy. Aby potwierdzić poprawność analizy i strategii, ważnym pierwszym krokiem są makiety i prototypy papierowe. Testowanie prototypów i makiet to najlepszy sposób na uzyskanie opinii od użytkowników na wczesnym etapie procesu projektowania, co pomaga zapobiegać kosztownym zmianom po uruchomieniu witryny. Testowanie prototypów i makiet pomaga również ocenić różne projekty pod kątem wydajności i preferencji użytkowników w celu stworzenia optymalnego produktu.
Na etapie tworzenia makiety projektowanie informacji polega również na przewidywaniu, co różne typy użytkowników muszą zobaczyć w pierwszej kolejności i jakie działania podejmą. Na przykład, jeśli Twoja witryna oferuje usługę przesyłania wiadomości, większość użytkowników odwiedzających stronę dzieli się na dwie kategorie: użytkowników powracających i nowych gości. Powracający użytkownicy chcą się zalogować, a nowi goście mogą chcieć założyć konto lub po prostu dowiedzieć się więcej o usłudze. Na stronie głównej musisz uwzględnić każdy typ gościa i dostarczyć mu wystarczająco dużo informacji, aby mógł osiągnąć swoje cele. Te informacje są przekazywane za pomocą przycisków: zaloguj się, zarejestruj się lub więcej informacji. Projektowanie informacji polega na decydowaniu o tym, co uwzględnić i gdzie to umieścić.
Projektowanie nawigacji i makiety
System nawigacji obejmuje szereg elementów na ekranie, które umożliwiają użytkownikowi przechodzenie ze strony na stronę. Projekt nawigacji powinien jasno określać relacje między linkami, aby użytkownicy w naturalny sposób rozumieli dostępne opcje. Zazwyczaj witryny internetowe oferują wiele systemów nawigacji, takich jak nawigacja globalna, lokalna, uzupełniająca, kontekstowa i pomocnicza.
Jak sama nazwa wskazuje, projektowanie nawigacji określa sposoby, w jakie użytkownicy poruszają się po aplikacji lub witrynie internetowej. Z każdego ekranu użytkownik przechodzi do wielu innych ekranów. Nie dowie się jednak o tym, jeśli go nie poinformujesz: rozwijane menu, klikalne linki i paski przewijania to przykłady elementów wizualnych ułatwiających użytkownikom nawigację po produkcie.
Projektowanie interfejsu użytkownika i makiety
Projektowanie interfejsu użytkownika (UI) polega na wyborze i rozmieszczeniu elementów interfejsu, które pomagają użytkownikom wchodzić w interakcję z funkcjami systemu w sposób zapewniający maksymalną wydajność i łatwość obsługi. Typowe elementy interfejsu to przyciski, pola wprowadzania tekstu, pola wyboru (checkboxy), menu i przyciski opcji (radio buttony).
Projektowanie interfejsu łączy wszystko w całość: informacje, nawigację i każdy inny element makiety. Zarówno projektowanie nawigacji, jak i projektowanie informacji posiadają komponenty ekranowe, takie jak przyciski i menu. Projektowanie interfejsu odnosi się do sposobu włączenia elementów do interfejsu użytkownika jako całości, w tym pól tekstowych, obrazów nagłówków i pasków bocznych.
Typy makiet
Wyróżnia się cztery różne typy makiet:
-
Podstawowe makiety. Znane również jako rendery o niskiej wierności (low-fidelity), stanowią bardzo proste schematy stron, zazwyczaj w czarno-białej kolorystyce.
-
Makiety z adnotacjami. Wzbogacają podstawową makietę o szeroki zakres szczegółów. Adnotacje to krótkie notatki, zazwyczaj umieszczane z boku lub na dole makiety, które opisują każdy element, zazwyczaj z podziałem na obszary treści i funkcjonalności, oraz krótko wyjaśniają cel każdego z nich.
-
Makiety przepływu użytkownika (User flow). Gdy adnotacje nie wystarczają do pokazania, jak użytkownik witryny lub aplikacji logicznie przemieszcza się po treściach z jednej strony na drugą, wymagane są dodatkowe informacje. Te makiety przepływu użytkownika stanowią statyczne widoki w pełni interaktywnej makiety, ale mogą również zawierać pokaz slajdów lub serię makiet przedstawiających główny przepływ użytkownika bądź zestaw takich przepływów.
-
Interaktywne makiety o wysokiej wierności (high-fidelity). Pozwalają doświadczyć interakcji (np. stuknięć, kliknięć i przesunięć) w obrębie poszczególnych makiet lub między nimi. Dodanie interakcji przed przejściem do pełnych mockupów lub prototypowania na żywo oszczędza godziny pracy projektantów i programistów. Ten wariant makiet stworzysz wyłącznie w oprogramowaniu do prezentacji i projektowania graficznego lub w aplikacjach do tworzenia makiet i prototypów.
Jak zaprojektować i stworzyć prostą makietę
Skoro znamy już podstawowe komponenty makiet, zobaczmy, jak połączyć je w całość, aby zaprojektować i stworzyć prostą makietę.
I pamiętaj: jeśli chodzi o tworzenie makiet, im wcześniej zaczniesz, tym lepiej.
-
Pomyśl o ostatecznym celu witryny internetowej i projektuj z myślą o nim. Zastanów się, jak użytkownik będzie wchodził w interakcję z interfejsem.
-
Zacznij od prostej reprezentacji strony internetowej o niskiej wierności, podzielonej na trzy części: nagłówek (pierwsza rzecz widoczna u góry strony), treść strony oraz stopkę, która zazwyczaj zawiera mniej ważne informacje.
-
Następnie pomyśl o nawigacji. Dodaj przyciski i linki umożliwiające użytkownikom odwiedzanie głównych sekcji witryny, w tym obszarów zawartości, wyszukiwarki i logowania użytkownika.
-
Dodaj adnotacje do makiety, aby była czytelna.
Po osiągnięciu tego etapu udostępniasz makietę interesariuszom przed przejściem do kolejnego kroku. Wstępną makietę narysujesz ręcznie na papierze lub tablicy, jednak na końcowym etapie użyjesz oprogramowania do jej dalszego rozwoju.
Jeśli projektujesz coś więcej niż pojedynczą stronę docelową (landing page), warto również zaplanować zestaw potrzebnych ekranów przed rozpoczęciem rysowania poszczególnych układów. Niezależnie od tego, czy tworzysz makietę aplikacji, czy witryny internetowej, jednego możesz być pewien: musisz stworzyć więcej niż jedną makietę. W wireframingu kluczowy jest przepływ użytkownika. Jak użytkownik porusza się po aplikacji? Czy chcesz, aby trafił w określone miejsce?
Różne projekty wymagają różnych przepływów pracy, jednak ogólna zasada mówi, że pierwszą makietę należy sporządzić w fazie inicjowania lub planowania cyklu życia projektu. Przed rozpoczęciem pracy nad diagramami wyznaczasz możliwe trasy, jakie może podjąć użytkownik, wypisując każdy nowy ekran, na który może natrafić. Dla każdego dodatkowego ekranu potrzebujesz kolejnej makiety. Makiety ewoluują również pod względem poziomu wierności w miarę przechodzenia projektu od wczesnej eksploracji do konkretnego planowania.
Ta praca przygotowawcza może wydawać się przesadą, ale warto ją wykonać. Przejście bezpośrednio do procesu tworzenia makiet bez jasnego wyobrażenia o przepływie użytkownika prowadzi do niejasnych i chaotycznych diagramów.
Take a look at these wireframe examples, including some combined with user or task flows.
