Co to jest wireframe – definicja w prostych słowach
Wireframe (dosłownie: „druciana rama”, w grafice 3D – model szkieletowy) to plan ekranu. Zamiast zdjęć ma szare prostokąty, zamiast logo – opisany kształt, zamiast kolorów – odcienie szarości. Widać na nim za to wszystko, co decyduje o tym, czy strona działa: menu, kolejność sekcji, nagłówki, przyciski, formularze i to, gdzie klient trafi po kliknięciu.
Wireframe odpowiada na pytanie „co jest na stronie i gdzie”, a nie „jak to wygląda”. Dlatego łatwo go zmienić i łatwo o nim rozmawiać: nikt nie dyskutuje o odcieniu zieleni, gdy na stole leży szkic bez kolorów.
Szkic może być bardzo prosty (prostokąty narysowane na kartce albo w Miro) albo dokładniejszy, z prawdziwymi nagłówkami i treściami, przygotowany w Figmie lub Balsamiqu. Im bliżej akceptacji, tym więcej w nim prawdziwych tekstów – bo to treść, a nie szare paski, pokazuje, czy strona odpowiada na pytania klientów.
Wireframe, makieta graficzna i prototyp – czym się różnią
Te trzy pojęcia często się mieszają, a każde oznacza inny etap projektu i inne pytania do Ciebie jako klienta. W polskich agencjach „makietą” nazywa się czasem także projekt graficzny, dlatego warto dopytać, co dokładnie dostaniesz do akceptacji.
| Etap | Co widać | Na jakie pytanie odpowiada | Co oceniasz jako klient |
|---|---|---|---|
| Wireframe (makieta funkcjonalna) | układ, kolejność sekcji, nagłówki, przyciski, pola formularzy – w szarościach | Co jest na stronie i gdzie? | czy klient znajdzie ofertę, cenę i kontakt; czy niczego nie brakuje |
| Makieta graficzna (mockup) | docelowy wygląd: kolory, typografia, zdjęcia, ikony | Jak to wygląda? | zgodność z marką, czytelność, wrażenie |
| Prototyp klikalny | połączone ekrany, które reagują na kliknięcia | Jak to działa krok po kroku? | przejście ścieżki, np. od wejścia na stronę do wysłania zapytania |
| Gotowa strona | działający kod, prawdziwe treści i dane | Czy wszystko działa naprawdę? | testy przed startem: formularze, wersja mobilna, szybkość |
Co powinien zawierać wireframe strony internetowej
Dobry wireframe nie musi być ładny, ale musi być kompletny. Przy stronie firmowej zwykle obejmuje stronę główną, stronę oferty lub usługi i kontakt – a przy sklepie również kartę produktu i koszyk. Na każdym z tych ekranów powinny być widoczne:
Kolejność sekcji
Co klient zobaczy najpierw, a co niżej. Pierwszy ekran powinien od razu mówić, czym się zajmujesz i dla kogo.
Menu i nawigacja
Lista pozycji w menu i to, dokąd prowadzą. Na tym etapie najłatwiej usunąć podstrony, których nikt nie będzie szukał.
Prawdziwe nagłówki
Zamiast „lorem ipsum” – robocze nagłówki i najważniejsze zdania. Bez nich nie da się ocenić, czy strona odpowiada na pytania klientów.
Przyciski i wezwania do działania
Gdzie jest „Zapytaj o wycenę”, „Zadzwoń” czy „Dodaj do koszyka” i co się dzieje po kliknięciu.
Formularze i ich pola
Jakie dane zbierasz i które pola są obowiązkowe. Każde zbędne pole to powód, by ktoś zrezygnował z wysłania zapytania.
Wersja na telefon
Jak sekcje układają się na wąskim ekranie i co trafia do rozwijanego menu. Na telefonie kolejność ma jeszcze większe znaczenie.
Po co robić wireframe – co zyskujesz jako klient
Wireframe to jeden z najtańszych momentów na zmianę zdania. Kara Pernice z Nielsen Norman Group ujmuje to wprost: wyrzucenie gotowego kodu jest bardzo kosztowne, a wyrzucenie prototypu – nie, zwłaszcza jeśli to tylko kartka papieru. Na szkicu przesuwa się sekcje i dopisuje brakujące elementy, zanim ktokolwiek zacznie projektować grafikę i programować.
Projekt bez wireframe’u
- o układzie decyduje się przy okazji projektu graficznego,
- uwagi dotyczą kolorów, a nie tego, czy klient znajdzie ofertę,
- brakujące podstrony i pola formularzy wychodzą przy programowaniu,
- zmiany w kodzie wydłużają projekt.
Projekt z wireframe’em
- układ i treści są ustalone, zanim powstanie grafika,
- rozmowa dotyczy celów: zapytań, sprzedaży, kontaktu,
- zakres jest jasny dla grafika i programisty,
- zmiany robi się w szkicu, a nie w kodzie.
Wireframe da się też szybko sprawdzić z użytkownikami. Według modelu Jakoba Nielsena już pierwsze badanie z pięcioma uczestnikami z grupy docelowej wykrywa ok. 85% problemów z użytecznością – dlatego lepiej zrobić kilka małych testów niż jeden duży. Wystarczy poprosić kilka osób podobnych do Twoich klientów, by na szkicu lub prototypie znalazły np. cenę albo formularz kontaktowy. Więcej o tym, jak projektuje się wygodne ścieżki, piszemy w tekście UX – co to jest.
Jak powstaje wireframe – krok po kroku
Cele i odbiorcy
Ustalenie, kto wchodzi na stronę, z jakim pytaniem i co ma zrobić: wysłać zapytanie, zadzwonić, kupić, zalogować się.
Struktura
Lista podstron i menu, czyli mapa strony. Na tym etapie widać, czy oferta nie jest rozbita na zbyt wiele miejsc.
Szkic kluczowych ekranów
Wireframe strony głównej, oferty, kontaktu – a w sklepie lub aplikacji także ekranów, przez które przechodzi klient lub użytkownik.
Omówienie i poprawki
Przegląd szkiców razem z Tobą. Uwagi dotyczą treści i kolejności, nie kolorów – na kolory przyjdzie czas.
Akceptacja
Zatwierdzony wireframe staje się podstawą projektu graficznego i doprecyzowania zakresu prac programistycznych.
W Iguana Studio każdy projekt zaczynamy od makiet (wireframe’ów) kluczowych ścieżek, a dopiero po ich akceptacji powstaje projekt graficzny. Tak samo pracujemy przy tworzeniu stron internetowych i przy portalach – etapy portalu opisujemy w tekście najważniejsze etapy projektowania portalu internetowego.
Wireframe strony, sklepu i aplikacji webowej – co się zmienia
Zasada jest ta sama, ale zakres szkiców rośnie razem z projektem. Przy prostej stronie wystarczy kilka ekranów, przy aplikacji liczy się przede wszystkim przejście między nimi.
- Strona firmowa – strona główna, oferta, kontakt, a przy landing page jedna strona z kolejnymi sekcjami i jednym celem; najważniejsze jest to, czy klient w kilka sekund rozumie, co oferujesz, i wie, jak zapytać o wycenę.
- Sklep internetowy – lista produktów z filtrami, karta produktu, koszyk i kroki zamówienia; tu szkic pokazuje, ile kliknięć dzieli klienta od zakupu.
- Aplikacja webowa lub portal – ekrany dla każdej roli (klient, handlowiec, administrator) i przejścia między nimi; przydaje się też szkic panelu administracyjnego, bo z niego Twój zespół będzie korzystał codziennie.
Przy aplikacjach wireframe pomaga też ustalić zakres pierwszej wersji. To, co nie mieści się w szkicu najważniejszej ścieżki, często może poczekać na kolejny etap – więcej o tym w tekście MVP – co to jest.
Jak ocenić wireframe, który dostajesz od agencji
Nie musisz znać się na projektowaniu, żeby dać dobre uwagi. Wystarczy, że spojrzysz na szkic oczami swojego klienta i zadasz kilka pytań:
- Czy z pierwszego ekranu wynika, czym się zajmujesz i dla kogo?
- Czy klient szybko znajdzie to, czego najczęściej szuka: ofertę, cenę lub zasady wyceny, kontakt?
- Czy każdy ekran kończy się jasnym następnym krokiem, np. przyciskiem zapytania?
- Czy formularz pyta tylko o to, czego naprawdę potrzebujesz, żeby odpowiedzieć?
- Czy jest szkic wersji na telefon?
- Czy uwzględniono nietypowe sytuacje: pusty koszyk, błąd w formularzu, brak wyników wyszukiwania?
Ważne
Nie oceniaj kolorów na wireframie
Szarości i proste prostokąty są celowe. Uwagi w rodzaju „za mało kolorowe” nic nie zmieniają na tym etapie – lepiej zapytać, czy klient znajdzie na stronie to, po co przyszedł. Wygląd ocenisz na makiecie graficznej.
Najczęstsze błędy przy wireframe’ach
Większość problemów wynika nie z samego szkicu, ale z tego, jak się go używa. Najczęściej spotykane błędy to:
- „Lorem ipsum” zamiast treści – układ wygląda dobrze, dopóki nie trafią do niego prawdziwe teksty.
- Pominięcie wersji mobilnej – sekcje, które obok siebie mieszczą się na monitorze, na telefonie ustawiają się jedna pod drugą i zmieniają kolejność czytania.
- Za dużo szczegółów za wcześnie – dopracowany graficznie szkic zachęca do rozmów o wyglądzie, a nie o układzie.
- Brak decyzji – wireframe bez akceptacji nie chroni przed zmianami na etapie programowania.
