Zaznacz stronę

Zakładanie strony internetowej z pozoru wydaje się bardzo prostym zadaniem. Żeby wszystko skończyło się z jak najlepszym efektem, to tak, jak w przypadku innych działań dobrze jest poświęcić czas na zaplanowanie strony. Wyglada to trochę jak budowa domu. W tym przypadku zanim zaczniesz malować ściany czy wieszać obrazki ze słonecznikami czeka Cię sporo planowania. Zaczynasz od wyobrażenia, być może już zobaczyłeś gdzieś dom swoich marzeń. Później ustalasz rozkład pomieszczeń. Taki, który będzie dla Ciebie najbardziej funkcjonalny. Rysujesz plany, które później architekt przekształci w gotowy projekt. I to wszystko zanim wbijesz w ziemię pierwszy szpadel.

Dlaczego więc w przypadku strony www od razu rozglądasz się za atrakcyjnym szablonem (co w ogóle nie jest dobrym pomysłem, ale o tym powiem kiedy indziej)?

Wolisz posłuchać?

Jakie informacje umieścić na stronie www?

Zanim przejdziesz do wyboru kolorów, grafiki i znalezienia odpowiednich zdjęć poświęć chwilę na zrobienie szkicu swojej strony.  Zastanów się jakie informacje powinny powinny pojawić się na twojej stronie. Wypisz je wszystkie nieuporządkowane. Pozwól sobie na trochę luzu, zapomnij przez chwilę o formie tych informacji, objętości treści czy wyglądzie. Chodzi o to żeby otworzyć głowę na pomysły, których z jakiegoś powodu nie zauważamy na codzień. Zrób taką listę. 

Kiedy już wystrzelasz się z pomysłów na kartkę lub ekran monitora przyjrzyj się im wszystkim. Na razie leżą sobie bez składu i ładu, każdy w innym miejscu. Zaczniemy teraz tworzyć architekturę informacji. Ten termin wydaje się być bardzo tajemnnczy ale nie chodzi o nic innego, jak poukładanie klocków z informacjami w logiczny sposób. Pogrupowanie ich według kontekstu i ustalenie zależności między nimi.  

Spróbuj pogrupować je według swoich kryteriów. Możesz przyjąć grupy w postaci poszczególnych zakładek swojej strony www. I tak: oczywistym będzie, że informacje o produktach trafią na podstronę „oferta” a wszystkie dane kontaktowe do „kontaktu”. W przypadku stron rozbudowanych o bloga dobrze będzie też przyjąć jakiś system kategorii dla poszczególnych wpisów, czy aktualności. 

Co jeszcze umieścić na firmowej stronie internetowej?

Zanim przejdziemy do kolejnego kroku, powiem ci jeszcze o kilku ważnych z punktu widzenia klienta elementach treści. 

Oprócz tego czym się zajmujesz, czyli szeroko pojętej oferty dobrze jest żeby znaleźć miejsce, na przekonanie klienta o tym, że powinien wybrać właśnie twoją firmę. Żeby to zrobić możesz pokazać to, co konkretnie wyróżnia twoją firmę, jakie masz atuty na tle konkurencji i co konkretnie wynika z tego dla twojego klienta. 

Ważnym elementem budującym zaufanie jest społeczny dowód słuszności, a tutaj z pomocą przychodzą np. wszystkie pozytywne opinie na temat twoich produktów lub usług. Możesz wykorzystać komentarze z Google, czy Facebooka. 

W niektórych branżach klienci bardzo dużą wagę przywiązują do procesu obsługi. Opisz go w kilku krokach, żeby wiedzieli od czego zacząć współpracę i jak będzie ona dalej przebiegać.

Im częściej takie treści będą występować na stronie, tym bardziej klient będzie upewniał się że warto z tobą współpracować.

Na czym polega sortowanie kart?

Ciekawym ćwiczeniem, powszechnym w trakcie procesu projektowania User Experience (UX) jest sortowanie kart. UX to sposób projektowania sposobu obsługi i wyglądu stron internetowych, ale także wszystkich innych interaktywnych elementów naszego życia. Począwszy od elektronicznego domofonu poprzez radio, parkometr, system operacyjny komputera, czy smartfona na złożonych systemach informatycznych skończywszy. UX zakłada, żeby działanie jakie ma do wykonania użytkownik (w naszym przypadku strony www) zrobił w jak najszybszy i najbardziej przyjemny sposób. Eliminuje niepotrzebne przeszkody i upraszcza proces realizacji celu. 

Wracając do sortowania kart. Swoją nieuporządkowaną listę tematów i informacji możesz pociąć nożyczkami, lub wypisać każdą na osobnej karteczce post-it. Każda z karteczek to osobny klocek w budowaniu architektury informacji. Przesuwaj, grupuj, układaj. Weź sobie kogoś do pomocy. Nie musi to być nikt zaangażowany w proces tworzenia strony. Może to być osoba postronna, z innym niż Twój punktem widzenia. Pozwól jej ułożyć karteczki „po swojemu” w sposób, który najbardziej będzie jej odpowiadał. Pytaj dlaczego zrobiła to właśnie tak – to może być inspirujące źródło informacji. W Studio Simplo przeprowadzamy taki warsztat przy pomocy internetowych narzędzi do współpracy np. Miro, lub Figma. Ty też możesz skorzystać z nich bezpłatnie i przeprowadzić takie ćwiczenie zdalnie w dowolnym czasie. 

Sortowanie kart – pomocne ćwiczenie przy umiejscowieniu treści w odpowiednim miejscu strony internetowej.

Mając już pogrupowane treści możemy zająć się kolejnym krokiem. 

Makietowanie

Makietowanie, czy inaczej wireframe to nic innego jak szkic strony internetowej. Pozwala on stworzyć ogólny obraz i umiejscowienie poszczególnych treści, odnośników, menu nawigacyjnego… Słowem wszystkich treści i zdjęć oraz funkcjonalności strony internetowej. 

Makieta posłuży nam do sprawdzenia, czy użytkownik strony nie napotka w projekcie jakiejś przeszkody, która spowoduje jego frustrację. Może frustracja to zbyt duże słowo w przypadku jednej małej przeszkody. Ale…

Jak udowadnia Steve Krug w swojej książce poświęconej projektowaniu stron www „Nie każ mi myśleć” w każdym momencie interakcji ze stroną użytkownicy zadają sobie różne pytania: 

  • Czy mogę to kliknąć?
  • Co się stanie jak to kliknę?
  • Czy po kliknięciu tego dostanę to, czego teraz potrzebuję?

Zauważ, że kiedy ty przeglądasz jakąś stronę zadajesz sobie w myślach podobne pytania.  Oczywiście robisz to bardzo szybko i równie szybko odpowiadasz sobie na nie. Nie zawsze dane działanie potwierdza twoją odpowiedź. Używasz wtedy przycisku „wstecz” i próbujesz raz jeszcze. Jeżeli twórca strony nie poświęcił odpowiednio dużo czasu na zaprojektowanie i przetestowanie swojej witryny to takich pomyłek może być całkiem dużo. A każda z nich wyczerpuje twoją energię, obniża przyjemność korzystania ze strony i zwiększa ryzyko jej porzucenia.

Żeby zminimalizować ryzyko porzucenia strony i zwiększyć szansę na realizację celu strony przygotujemy jej makietę. 

Makiety lo-fi

Lo-fi to termin zaczerpnięty z technologii odtwarzania muzyki, a oznacza low fidelity, czyli niską dokładność. Na tym etapie projektowania przygotowujemy ogólny zarys układu poszczególnych elementów na stronie internetowej.

Do tworzenia makiet lo-fi możesz użyć wspomnianej wyżej Figmy, czy Miro, ale równie dobrze sprawdzą się narzędzia analogowe jak długopis czy ołówek i kartka papieru. Chodzi o przedstawienie zgrubnego układu. Określamy poszczególne sekcje strony głównej i podstron. 

Strona główna zazwyczaj stanowi zbiór skrótów zachęcających do odwiedzenia poszczególnych podstron. Często spotykanym układem sekcji na stronie głównej jest:

  • menu nawigacyjne (logo, linki do podstron)
  • baner główny, rzadziej baner ze slajdami
  • 3-5 przewag konkurencyjnych i co z nich wynika dla klienta
  • skrócona oferta
  • społeczny dowód słuszności 1 – np. logosy firm z którymi współpracujesz
  • o firmie
  • baner wizerunkowy
  • galeria realizacji / kilka produktów
  • społeczny dowód słuszności 2 – np. opinie klientów
  • wezwanie do zrealizowania celu strony (skontaktuj się teraz, zapoznaj się z ofertą, zapisz się na newsletter itp.)
  • stopka strony

Na makiecie lo-fi określamy położenie i wielkość wszystkich elementów: obrazów, grafik, tekstu, i innych elementów strony, np. formularza kontaktowego czy wyszukiwarki.

Makiety hi-fi

Podobnie jak lo-fi oznacza low fidelity (niską dokładność) tak hi-fi tak high fidelity oznacza wysoką dokładność. Tego rodzaju makietę należy przygotować w wersji cyfrowej i to najlepiej w narzędziu do tego przeznaczonym. Dlaczego wersja cyfrowa? Przede wszystkim narzędzie cyfrowe pozwoli na linkowanie między sobą poszczególnych elementów strony, wprowadzi interakcję do projektu i będzie dobrym punktem wyjścia do pracy nad graficzną warstwą projektu. W Simplo używamy do tego Adobe XD, który bardzo dobrze sprawdza się przy zdalnej współpracy nad projektem. Oferuje naszym klientom prosty w obsłudze panel, gdzie mogą odnieść się do poszczególnych elementów strony, zaznaczyć je i opisać. Wszyscy dołączeni do zespołu który pracuje nad danym projektem mają dostęp do tych informacji, co bardzo usprawnia pracę. Klienci cenią sobie to rozwiązanie bo widzą przebieg pracy i mają na nią realny wpływ. Sam też możesz pobrać bezpłatnie Adobe XD ze strony producenta.

Bez względu na to jakiego programu użyjesz do projektowania makiet wysokiej dokładności, zwróć uwagę na ich wysoką dokładność :-). Oznacza to że elementy strony powinny być określone na dużo wyższym poziomie szczegółowości niż makiety lo-fi. Pamiętaj żeby dokładnie określić odległości pomiędzy danymi elementami, wielkości fontów (czcionek) i ich warianty. Możesz też na tym etapie pokusić się o wybór konkretnego fontu, chociaż możesz też odłożyć to na późniejszy etap – tworzenia grafik na stronę www.

Poza dokładnym ułożeniem elementów na makiecie jej bardzo istotnym częścią jest system linkowania. Linkowanie to połączenie poszczególnych elementów (np. przycisku) z ich miejscem docelowym (np. podstroną). I tutaj każdy element interaktywny (link, przycisk, wyszukiwarka) powinny kierować do określonego celu (podstrony, strony z wynikami wyszukiwania lub sekcji na otwartej stronie). 

Jeśli z jakiegoś powodu nie możesz lub po prostu nie chcesz sam zrobić makiety – zadzwoń do nas. Przygotujemy za Ciebie makiety twojej strony www.

Makiety to doskonały sposób na sprawdzenie czy pomysł naszej strony i jej układ będzie przyjazny dla użytkownika. Sprawdzisz w ten sposób czy odwiedzający będzie potrafił bezboleśnie zrealizować cel strony. 

W programie do tworzenia makiet możesz zmienić widok projektu na taki, jakby to była gotowa strona www. Możesz poruszać się po niej jak po zwykłej stronie: elementy interaktywne będą prowadzić cię do kolejnych podstron. W ten sposób możesz sprawdzić różne warianty ścieżki użytkownika i ocenić czy nie ma na nich przeszkód, które zakłócą tą podróż. Oczywiście jeszcze lepiej, kiedy możesz sprawdzić swój projekt z kimś jeszcze. Może to być ktoś z pracy, domownik lub znajomy. Zadaj mu wtedy pytanie: jak myślisz, jak na tej stronie znaleźć usługę X? Wyniki takiej zabawy są często bardzo zaskakujące i pozwalają wyeliminować sporo błędów, które są niewidoczne na pierwszy rzut oka. Zobacz, ile pracy zaoszczędzisz eliminując błędy na tym etapie projektowania. 

Przy projektowaniu makiet jest jeszcze jeden ważny aspekt: pamiętaj, żeby wykonać je dla co najmniej dwóch widoków: widoku na komputerze (desktop) i widoku na urządzeniu mobilnym. Statystyki odwiedzin stron z urządzeń mobilnych wskazują że blisko 60% odwiedzin stron odbywa się na komórkach. Pokazuje to że nikt nie może sobie pozwolić na ignorowanie potrzeb ponad połowy odwiedzających.

Nie potrzeba badań, żeby ocenić że inaczej korzystamy ze strony na różnych urządzeniach. Dlatego, żeby uniknąć frustracji swoich klientów bezwględnie trzeba  zaprojektować mobilną wersję strony www. Dlatego przy tworzeniu makiet zwróć uwagę na kontekst korzystania z danego urządzenia, jego możliwości i ograniczenia.

Przygotowanie makiet stron www dla urządzeń mobilnych

Wydaje się że w 2022 roku internet już w całości jest przystosowany do wyświetlania na komórkach. Zaskakujące jednak jest to że wciąż wiele stron wygląda okropnie na małym ekranie. Informacje są nieczytelne ze względu na źle dobraną wielkość fontu, elementy klikalne są zbyt blisko siebie, brakuje elementów interakcji: „zadzwoń” lub „sprawdź dojazd”. Doświadczenie użytkownika jest przez to na niskim poziomie i może on porzucić twoją stronę.

Sprawdzając i testując swoje makiety oszczędzisz sobie wielu godzin poprawek na późniejszym etapie wdrażania strony. Nie buduj swojego domu bez planu. Zadbaj o to, żeby był dokładny, sprawdzony i funkcjonalny. Twoi użytkownicy z pewnością to docenią.

Co zrobić w skrócie:

  1. Wypisz wszystkie treści które chcesz umieścić na stronie.
  2. Pogrupuj je tematycznie i kontekstowo. Wykorzystaj do tego sortowanie kart.
  3. Dodaj treści marketingowe: przewagi konkurencyjne, proces i opinie klientów.
  4. Poukładaj wszystko na makiecie.
  5. Stwórz mapę linków.
  6. Sprawdzaj, testuj, zmieniaj.

Narzędzia do makietowania:

Źródła: