Makieta strony internetowej: po co powstaje i jak ją oceniać przed projektem graficznym

Czym jest makieta strony internetowej i po co powstaje

Makieta to schemat podstrony narysowany z prostych kształtów: prostokątów w miejscu zdjęć, linii lub roboczego tekstu w miejscu akapitów, podpisanych pól w miejscu przycisków i formularzy. Powstaje między ustaleniem struktury serwisu a projektem graficznym i ma jedno zadanie - pozwolić Państwu oraz wykonawcy uzgodnić zawartość i układ każdej podstrony, zanim ktokolwiek zacznie dobierać kolory i pisać kod.

Dobrze to widać na przykładzie. Wyobraźmy sobie gabinet stomatologiczny z Bydgoszczy, który zamawia nową stronę. Właścicielka dostaje od razu gotowy projekt graficzny i ocenia go tak, jak ocenia się obraz: podoba się zieleń, nie podoba się zdjęcie w nagłówku. Dopiero po uruchomieniu strony okazuje się, że numer telefonu jest widoczny wyłącznie w stopce, cennik znalazł się na trzecim poziomie menu, a formularz zapisu na wizytę ma dwanaście pól. Żadnej z tych rzeczy nie było widać w ładnym projekcie, bo uwagę przyciągała oprawa. Na szarej makiecie nie ma na czym zatrzymać wzroku poza układem, dlatego takie braki wychodzą od razu.

Brytyjski rządowy podręcznik projektowania usług cyfrowych opisuje ten etap podobnie: szkice i prototypy robi się po to, by poznawać, pokazywać i sprawdzać pomysły, zanim cokolwiek zostanie zbudowane. Wśród korzyści wymienia lepszą użyteczność, pewność, że zespół buduje właściwą rzecz, wspólne rozumienie celu oraz to, że pomysły sprawdza się szybciej i z mniejszym ryzykiem niż w kodzie produkcyjnym. Podręcznik zwraca też uwagę, że można szybko przygotować kilka wersji i odrzucić te, które się nie sprawdzają.

Makieta nie powstaje w próżni. Poprzedza ją lista podstron i powiązań między nimi, o czym piszemy we wpisie o tym, jak ułożyć strukturę podstron przed rozpoczęciem projektu. Miejsce makiet w całym harmonogramie pokazują z kolei etapy tworzenia strony internetowej. Jeżeli wykonawca proponuje przejście od rozmowy wstępnej prosto do grafiki, warto zapytać, w którym momencie będą Państwo mogli ocenić sam układ treści.

Makieta o niskiej i wysokiej szczegółowości oraz klikalny prototyp - czym się różnią

Różnią się tym, ile pokazują i ile kosztuje ich zmiana. Szkic o niskiej szczegółowości pokazuje tylko rozmieszczenie bloków, makieta o wysokiej szczegółowości zawiera już prawdziwe nagłówki, teksty i nazwy przycisków, a klikalny prototyp łączy makiety w całość, po której można się poruszać jak po stronie. Każda z tych form odpowiada na inne pytanie, dlatego w większych projektach powstają wszystkie trzy, jedna po drugiej.

Szkic o niskiej szczegółowości

To kilka prostokątów z podpisami: nagłówek z menu, sekcja z ofertą, opinie klientów, formularz, stopka. Często powstaje na kartce lub na tablicy w trakcie spotkania. Wspomniany podręcznik pisze, że szkice na papierze dobrze nadają się do poznawania podstawowych pomysłów i omawiania ich w zespole. Na tym poziomie rozstrzyga się sprawy zasadnicze: ile sekcji ma strona główna, czy oferta mieści się na jednej podstronie, czy każda usługa dostaje własną, gdzie pojawia się kontakt. Zmiana polega na przerysowaniu kartki, więc to najlepszy moment na śmiałe pomysły i na ich odrzucanie.

Makieta o wysokiej szczegółowości

Tutaj w miejsce szarych pasków wchodzą rzeczywiste treści: brzmienie nagłówków, pierwsze akapity, nazwy pozycji w menu, podpisy przycisków, etykiety pól formularza. Proporcje i odstępy są zbliżone do ostatecznych, ale nadal nie ma kolorów ani zdjęć. Dopiero na takiej makiecie widać, czy opis usługi mieści się w przewidzianym miejscu, czy tabela z cennikiem da się przeczytać i czy nazwy w menu są zrozumiałe dla kogoś spoza firmy. Z naszej praktyki wynika, że to etap, na którym zamawiający najczęściej odkrywa, że nie ma jeszcze tekstów, i warto dowiedzieć się o tym wcześnie.

Klikalny prototyp

Prototyp to makiety połączone odnośnikami. Kliknięcie pozycji w menu przenosi na makietę właściwej podstrony, przycisk przewija do formularza, a formularz pokazuje komunikat po wysłaniu. Dzięki temu można przejść całą drogę klienta, a nie oglądać pojedyncze ekrany. Podręcznik, na który się powołujemy, podkreśla, że prototypy zbliżone do działającego serwisu lepiej nadają się do badań z użytkownikami, ponieważ są bardziej realistyczne, a zarazem zastrzega, że ich kod nie musi spełniać wymagań produkcyjnych i nie powinien być przenoszony wprost do gotowego serwisu.

Kolejność treści - od czego zacząć ocenę makiety

Ocenę najlepiej zacząć od przeczytania makiety z góry na dół tak, jak zrobi to osoba, która pierwszy raz trafia na stronę i nic o firmie nie wie. Po pierwszym ekranie powinno być jasne, czym firma się zajmuje, dla kogo i gdzie działa, a każda kolejna sekcja powinna odpowiadać na następne pytanie klienta. Jeżeli do zrozumienia oferty trzeba przewinąć trzy ekrany, kolejność wymaga zmiany.

Przydatne jest proste ćwiczenie. Warto wypisać na kartce pytania, które klienci zadają przez telefon: czy wykonują Państwo daną usługę, na jakim obszarze, ile to trwa, od czego zależy cena, jak się umówić. Następnie należy wskazać na makiecie miejsce, w którym pada odpowiedź na każde z nich. Pytania bez odpowiedzi to brakujące sekcje. Sekcje, które nie odpowiadają na żadne pytanie, to kandydaci do skrócenia lub przesunięcia niżej. Kancelaria z Krakowa, która w ten sposób przejrzałaby swoją makietę, mogłaby na przykład zauważyć, że historia firmy zajmuje drugi ekran, a zakres spraw, którymi się zajmuje, pojawia się dopiero pod nią.

Nagłówki i podział na sekcje

Drugie spojrzenie dotyczy samych nagłówków. Dobrym sprawdzianem jest przeczytanie wyłącznie ich, z pominięciem akapitów - powinny ułożyć się w zrozumiały spis treści podstrony. Google w przewodniku SEO dla początkujących wśród cech przydatnych treści wymienia to, że tekst jest łatwy w odbiorze i dobrze uporządkowany, a dłuższe materiały są podzielone na akapity i sekcje z nagłówkami ułatwiającymi poruszanie się po stronie. Ten sam dokument uspokaja, że sama kolejność poziomów nagłówków nie ma dla Google decydującego znaczenia, choć porządek pomaga osobom korzystającym z czytników ekranu, i że nie istnieje idealna liczba nagłówków. Nagłówki mają więc służyć czytelnikowi, a makieta to chwila, w której najłatwiej je poprawić. Szerzej piszemy o tym we wpisie o strukturze nagłówków H1, H2 i H3.

Prawdziwe treści zamiast wypełniacza

Makieta wypełniona łacińskim tekstem zastępczym pozwala ocenić proporcje, ale nie pozwala ocenić sensu. Nagłówek z trzech słów w makiecie może w rzeczywistości mieć dwanaście słów i łamać się na cztery wiersze. Opis usługi zaplanowany na dwa zdania może wymagać pięciu akapitów. Dlatego przed akceptacją warto poprosić, aby przynajmniej nagłówki, nazwy pozycji w menu, podpisy przycisków i pierwsze akapity najważniejszych sekcji miały ostateczne lub zbliżone do ostatecznego brzmienie.

Na makiecie warto też sprawdzić odnośniki między podstronami. Wspomniany przewodnik Google zaleca staranne dobieranie tekstu linków, ponieważ to on mówi użytkownikowi i wyszukiwarce, co znajdzie się na stronie docelowej. Jeżeli kafelki usług prowadzą do podstron pod podpisem w rodzaju "więcej", to dobry moment, by zastąpić go nazwą usługi. Układ strony startowej omawiamy we wpisie o tym, jakie sekcje są potrzebne na stronie głównej firmy.

Ścieżka do kontaktu - jak ją prześledzić na makiecie

Ścieżkę do kontaktu sprawdza się, wybierając kilka miejsc, w których klient może zacząć wizytę, i licząc, ile czynności dzieli go od wysłania zapytania lub wybrania numeru telefonu. Z każdego z tych miejsc następny krok powinien być widoczny bez szukania. Jeśli na którejkolwiek makiecie nie da się wskazać palcem elementu prowadzącego do kontaktu, ścieżka jest w tym miejscu przerwana.

Częsty błąd polega na sprawdzaniu wyłącznie drogi ze strony głównej. Tymczasem osoba, która szuka w Google konkretnej usługi, trafia zwykle od razu na podstronę tej usługi albo na wpis na blogu i strony głównej może w ogóle nie zobaczyć. Hydraulik z Łodzi, którego klient w nocy szuka pomocy przy pękniętej rurze, powinien mieć numer telefonu widoczny na samej górze podstrony o usuwaniu awarii, a nie dopiero w zakładce kontaktowej. Dlatego na liście miejsc startowych powinny znaleźć się co najmniej: strona główna, podstrona najważniejszej usługi, wpis blogowy i strona kontaktowa.

Na każdej z tych makiet warto ustalić kilka rzeczy. Po pierwsze, czy istnieje jedno wyraźne działanie główne, na przykład wysłanie zapytania, i czy nie konkuruje z nim pięć innych przycisków o tej samej wadze. Po drugie, czy podpis przycisku mówi, co się stanie po kliknięciu. Po trzecie, czy droga kończy się czymś konkretnym: komunikatem z informacją, kiedy firma odpowie, a nie pustym ekranem. Wytyczne inicjatywy dostępności W3C dla projektantów dodają do tego dwa wymagania, które łatwo sprawdzić już na szkicu: odnośniki i przyciski mają się wyraźnie odróżniać od zwykłego tekstu, a nawigacja ma być spójna na wszystkich podstronach i pokazywać użytkownikowi, gdzie się znajduje.

Zawartość samej zakładki kontaktowej omawiamy w tekście o tym, co powinna zawierać strona kontaktowa.

Jeśli chcą Państwo zamówić stronę internetową, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl

Wersja na telefon - dlaczego makietę mobilną ocenia się osobno

Makietę na telefon ocenia się osobno, ponieważ na wąskim ekranie wszystkie bloki ustawiają się jeden pod drugim i kolejność, która na komputerze wynikała z układu w kolumnach, przestaje być oczywista. Dochodzi do tego powód związany z wyszukiwarką: Google do indeksowania i ustalania pozycji wykorzystuje mobilną wersję treści, pobraną przez robota udającego smartfon. To, czego nie ma na telefonie, dla wyszukiwarki może nie istnieć.

Zasady te opisuje dokument Google o sprawdzonych metodach indeksowania zoptymalizowanego pod kątem urządzeń mobilnych. Wersja mobilna powinna zawierać tę samą główną treść co wersja na komputer, z takimi samymi, jasnymi nagłówkami. Treść wolno dla wygody schować w rozwijanych sekcjach lub zakładkach, o ile nadal jest tą samą treścią, natomiast całkowite usunięcie jej z wersji mobilnej może ograniczyć ruch z wyszukiwarki. Wreszcie treść, która ładuje się dopiero po działaniu użytkownika, na przykład po przesunięciu palcem, kliknięciu lub wpisaniu tekstu, może nie zostać przez Google odczytana, więc główna zawartość podstrony nie powinna od takiego działania zależeć.

W praktyce oznacza to, że makiety na telefon i na komputer warto położyć obok siebie i porównać sekcja po sekcji. Jeżeli na telefonie zniknął opis usługi, tabela z zakresem prac albo pytania i odpowiedzi, należy zapytać wykonawcę, czy treść została schowana w rozwijanym bloku, czy usunięta. Pierwsze rozwiązanie jest dopuszczalne, drugie wymaga rozmowy.

Przyciski i odnośniki pod palcem

Druga rzecz to wielkość elementów, w które trzeba trafić palcem. Serwis web.dev prowadzony przez zespół Chrome zaleca, aby element dotykowy miał około 48 pikseli niezależnych od urządzenia, co odpowiada mniej więcej 9 milimetrom, czyli opuszce palca, oraz aby sąsiednie elementy dzieliło około 8 pikseli odstępu w pionie i w poziomie. Sama ikona może być mniejsza, na przykład 24 piksele, jeżeli otacza ją dodatkowy obszar reagujący na dotyk. Na makiecie mobilnej warto więc przyjrzeć się miejscom, w których odnośniki stoją ciasno obok siebie: stopce, liście usług, ikonom telefonu i poczty w nagłówku.

Warto także ustalić, co dzieje się z menu. Jeżeli pozycje chowają się pod ikoną, makieta powinna pokazywać również ekran z menu rozwiniętym, razem z podpozycjami. Dobrze jest zapytać, czy numer telefonu i przycisk kontaktu pozostają widoczne przy przewijaniu oraz czy nie zasłaniają treści. Szerzej opisujemy to we wpisie o tym, jak projektować wersję mobilną strony od pierwszej makiety.

Stany formularzy - co makieta powinna pokazywać poza pustymi polami

Makieta formularza powinna pokazywać nie jeden ekran, lecz co najmniej trzy: formularz pusty, formularz z błędami oraz potwierdzenie po wysłaniu. Najczęściej rysuje się tylko pierwszy z nich, a pozostałe programista wymyśla sam w trakcie pracy. Tymczasem to właśnie komunikat o błędzie i ekran po wysłaniu decydują o tym, czy klient dokończy zgłoszenie i czy będzie wiedział, że dotarło.

Przy stanie pustym warto sprawdzić etykiety. Kurs o formularzach w serwisie web.dev zaleca, aby każde pole miało widoczną, krótką etykietę umieszczoną najlepiej nad polem i aby nie zastępować jej podpowiedzią wpisaną wewnątrz pola. Formularz powinien mieć jedną kolumnę, bo wtedy użytkownik przechodzi przez pola w jednym kierunku. Pola wymagane należy wyraźnie oznaczyć, a gdy wymagana jest większość, lepiej oznaczyć te nieobowiązkowe. Jeśli pole ma szczególne wymagania, ich opis powinien być widoczny przy polu od początku, a nie dopiero po pomyłce.

Komunikaty o błędach

Przy stanie błędu należy ocenić trzy rzeczy: gdzie komunikat się pojawia, co mówi i czym się wyróżnia. Według materiałów web.dev komunikat powinien stać obok pola, którego dotyczy, a po nieudanej próbie wysłania strona powinna przenieść użytkownika do pierwszego błędnego pola. W części kursu poświęconej sprawdzaniu danych czytamy, że komunikat ma wyjaśniać, co jest nie tak, a nie tylko informować, że pole jest nieprawidłowe, oraz że nie wolno polegać wyłącznie na kolorze, ponieważ czerwone i zielone obramowanie mogą wyglądać niemal tak samo dla osób, które nie rozróżniają tych barw. Potrzebny jest tekst lub ikona.

Materiał inicjatywy dostępności W3C o powiadomieniach w formularzach uzupełnia ten obraz. Użytkownik ma zawsze dowiedzieć się, czy wysłanie się powiodło, a komunikaty mają być zwięzłe, zrozumiałe i wyjaśniać, jak problem naprawić. Przy większej liczbie błędów ich listę warto umieścić nad formularzem, z nazwą pola, opisem problemu i odnośnikiem do tego pola. Na makiecie da się to ocenić bez znajomości kodu: wystarczy przeczytać treść komunikatów i zadać sobie pytanie, czy klient będzie wiedział, co zrobić dalej.

Ekran potwierdzenia zasługuje na osobną makietę. Powinien mówić, że zgłoszenie dotarło, kiedy i jaką drogą firma odpowie oraz co można zrobić w międzyczasie. Więcej o liczbie pól i brzmieniu komunikatów piszemy we wpisie o tym, ile pól powinien mieć formularz kontaktowy.

• Każde pole ma widoczną etykietę nad polem, a nie tylko podpowiedź w środku.
• Pola wymagane lub nieobowiązkowe są oznaczone słownie.
• Formularz ma jedną kolumnę także na komputerze.
• Istnieje makieta stanu z błędami, a komunikat stoi przy polu i mówi, jak błąd poprawić.
• Błąd jest oznaczony tekstem lub ikoną, a nie samym kolorem.
• Istnieje makieta potwierdzenia z informacją, kiedy firma odpowie.

Czego na etapie makiety nie oceniać

Na makiecie nie ocenia się niczego, co należy do oprawy graficznej: kolorów, krojów pisma, zdjęć, ikon, cieni, zaokrągleń ani animacji. Te elementy są celowo pominięte lub zastąpione znakami umownymi, więc uwagi na ich temat nie mają do czego się odnieść, a przy tym odciągają rozmowę od spraw, które właśnie teraz trzeba rozstrzygnąć.

Najczęstsze nieporozumienia dotyczą trzech rzeczy. Pierwsza to szarość: makieta jest czarno-biała nie dlatego, że strona taka będzie, lecz po to, by nie sugerować kolorystyki. Druga to prostokąty z przekątnymi w miejscu zdjęć: pokazują jedynie, że w tym miejscu stanie obraz i jaką będzie miał proporcję. Trzecia to dokładne odstępy i wielkości liter, które na tym etapie są przybliżone. Uwaga w rodzaju "logo powinno być większe" należy do następnego etapu i warto ją zachować dla grafika jako wskazówkę.

Istnieją natomiast kwestie z pogranicza, które warto zgłosić już teraz. Wytyczne W3C dla projektantów wymieniają potrzebę przewidzenia miejsca na napisy i transkrypcje nagrań oraz widocznych przycisków zatrzymania dla ruchomych treści. Podobnie mapa, okno czatu czy baner zgody na pliki cookie zajmują miejsce na ekranie i powinny być na makiecie zaznaczone.

Ile kosztują zmiany zgłoszone dopiero po zaprogramowaniu

Kosztują tym więcej, im więcej gotowej pracy trzeba po drodze wykonać ponownie. Na makiecie zmiana kolejności sekcji to przesunięcie prostokąta. W gotowym projekcie graficznym to przebudowa kilku ekranów w dwóch lub trzech szerokościach. Po zaprogramowaniu do tego samego dochodzi zmiana kodu, ponowne wprowadzenie treści i powtórzenie testów. Nie podajemy tu kwot ani mnożników, bo zależą od projektu i od umowy, a opis opiera się na naszej praktyce - natomiast sam mechanizm jest zawsze ten sam.

Weźmy jedną, pozornie drobną uwagę: "formularz zapytania powinien być na każdej podstronie usługi, a nie tylko w zakładce kontaktowej". Zgłoszona na makiecie oznacza dodanie jednego bloku do szablonu podstrony usługi. Zgłoszona po akceptacji grafiki oznacza, że projektant musi znaleźć dla formularza miejsce w gotowej kompozycji, dopasować sąsiednie sekcje i przygotować wersję na telefon. Zgłoszona po zaprogramowaniu oznacza dodatkowo zmianę szablonu w systemie, obsługę wysyłki z nowego miejsca, osobne komunikaty, podłączenie pomiaru zapytań i ponowne sprawdzenie wszystkich podstron, które z tego szablonu korzystają.

Koszt to nie tylko pieniądze. Zmiana zgłoszona późno przesuwa termin uruchomienia, a w wielu umowach wykracza poza uzgodniony zakres i jest rozliczana osobno. Dlatego jeszcze przed podpisaniem umowy warto ustalić, ile rund poprawek obejmuje każdy etap i co dokładnie oznacza akceptacja makiety. Zakres warto opisać już w zapytaniu ofertowym, o czym piszemy we wpisie o tym, co zapisać w briefie na stronę internetową. W sprawach dotyczących zapisów konkretnej umowy najlepiej zasięgnąć opinii prawnika.

Jak przeprowadzić akceptację makiety w firmie

Akceptację najlepiej przeprowadzić w jednej, zaplanowanej rundzie: zebrać uwagi wszystkich osób decyzyjnych, uzgodnić je wewnętrznie i przekazać wykonawcy jako jedną listę z odniesieniem do konkretnej podstrony i sekcji. Uwagi przesyłane po kawałku, przez kilka osób i w różnych wiadomościach, często sobie przeczą i wydłużają etap, który miał być najszybszy.

1. Przejście makiety na telefonie

   Pierwsze oglądanie warto wykonać na własnym telefonie, nie na dużym monitorze. Tam widać prawdziwą kolejność treści i wielkość przycisków.

2. Próba z osobą spoza projektu

   Dobrze jest poprosić kogoś, kto nie zna ustaleń, o wykonanie jednego zadania, na przykład znalezienie zakresu usługi i wysłanie zapytania. Miejsca, w których się zawaha, to miejsca do poprawy.

3. Porównanie z listą pytań klientów

   Każde pytanie zadawane zwykle przez telefon powinno mieć na makiecie swoje miejsce z odpowiedzią.

4. Kontrola formularzy

   Dla każdego formularza należy obejrzeć stan pusty, stan z błędami i potwierdzenie.

5. Jedna lista uwag

   Każda uwaga powinna wskazywać podstronę, sekcję, stan obecny i stan oczekiwany. Uwagi o wyglądzie trafiają na osobną listę dla grafika.

Na tym etapie warto zaprosić do stołu osobę odpowiedzialną za widoczność w wyszukiwarce. Makieta przesądza o tym, ile tekstu zmieści się na podstronach usług, jak będą wyglądać nagłówki i odnośniki wewnętrzne oraz czy treść na telefonie będzie pełna. Łatwiej uwzględnić te potrzeby teraz, niż dopisywać sekcje do gotowego projektu. Pomoc z zewnątrz przydaje się zwłaszcza wtedy, gdy w firmie nie ma zgody co do kolejności treści albo gdy strona ma wiele rodzajów podstron. W takich sytuacjach wsparciem jest projektowanie UX, czyli projektowanie wygody korzystania ze strony, prowadzone razem z usługą tworzenia stron.

Jeśli chcą Państwo zamówić stronę internetową, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl