Makieta strony internetowej

Makieta strony internetowej jest niczym dobra rakieta. Albo pomoże stronie wzbić się ponad wyżyny przeciętnej wydajności, funkcjonalności i wyglądu, albo skaże ją na katastrofę.

A to tylko kilka z powodów, dla których to jest super ważne.

Przypomnij sobie jak wiele razy kliknąłeś X w przypadku stron, które nie ładowały się szybko, czy zniechęcały Cię wyskakującymi okienkami. To samo tyczy się Twoich klientów i Twojej strony.

Nie licz na FUXA, korzystaj z UX’a. Czym jest? To skrót od user experience, czyli po polsku doświadczeń użytkownika.

Też Cię to denerwuje? Te migające niczym neony banery, te przeskakujące reklamy, których nie sposób wyłączyć?

W takim razie UX to odpowiedź na te bolączki. Najprościej mówiąc to zbiór praktyk, które zminimalizują prawdopodobieństwo tego, że użytkownik wejdzie na Twoją stronę, pomyśli sobie “co za badziew” i z niej wyjdzie.

• Możliwość wprowadzenia zmian i cofnięcia się do poprzedniego kroku np. w formularzach zapisu, koszyku zamówień.
• Opcje sortowania, filtrowania, porównywania wyników oraz lupka z opcją wyszukiwania.
• Bezpieczeństwo i szyfrowanie danych: szczególnie przy płatnościach.
• Nawigacja po stronie: dobrze widoczne i klikalne menu w sekcji HEAD i stopce strony.
• Ułożenie treści zgodnie z zasadą odwróconej piramidy: najważniejsze informacje umieszczaj na samej górze
• Dobrej jakości wiarygodne zdjęcia i filmy o firmie, produktach, usługach.
  

A teraz bardziej technicznie. UI, czyli User Interface (interfejs użytkownika), to termin używany w dziedzinie projektowania interakcji człowiek-komputer.

UI odnosi się do wszystkich elementów i środków, które umożliwiają użytkownikom komunikację z komputerem, urządzeniem elektronicznym lub aplikacją.

Graficzny interfejs użytkownika: widoczna część interfejsu, którą użytkownik widzi i może kliknąć.

Tekst i etykiety: informacje, opisy i komunikaty prezentowane użytkownikowi.

Interaktywne elementy: przyciski, pola tekstowe, checkboxy, buttony i suwaki, które umożliwiają wykonanie akcji.

Układ strony: sposób, w jaki elementy UI są rozmieszczone na ekranie.

Kolor i styl: wybór kolorów, czcionek, ikon i innych elementów graficznych, które tworzą wygląd interfejsu.

Nawigacja: sposób, w jaki użytkownik porusza się po aplikacji lub witrynie internetowej, w tym menu, przyciski powrotu, linki itp.

UI (User Interface) odnosi się do projektowania graficznego i interaktywnego interfejsu użytkownika, czyli konkretnych elementów, które użytkownik widzi i wchodzi z nimi w interakcję.

Chodzi o estetykę, układ, kolory, czcionki, przyciski itp.

UX (User Experience) to szersze podejście, które koncentruje się na ogólnym doświadczeniu użytkownika podczas korzystania ze strony.

Obejmuje to wszystkie aspekty, od interfejsu po jakość usług, dostępność, wydajność i satysfakcję użytkownika.

Na układy nie ma rady. To powiedzenie świetnie tutaj pasuje.

Dlaczego? Bo układ strony to jeden z najważniejszych elementów dobrych doświadczeń użytkownika.

Przeciążone układy stron są jak przeciążone układy organizmu. Z czasem prowadzą do przestojów, a w konsekwencji blokad.

Makiety są zazwyczaj tworzone na wczesnym etapie projektowania stron internetowych.

Umożliwiają szybką i łatwą modyfikację elementów, zanim zostaną faktycznie wdrożone.

W marketingu internetowym hasło “projektowanie, pisanie pod roboty Google” ma rację bytu. W ten sposób robi się np. SEO.

To oni są klientami i powinni stać w centrum Twoich zainteresowań podczas projektowania makiety, a kolejno kodowania strony www.

To trochę przypomina goszczenie kogoś we własnym domu. Gospodarz dba o gościa. Inaczej ten prędko nie wróci.

Empatyczne podejście w projektowaniu makiety/strony, które jest skoncentrowane na człowieku, sprawi że stworzysz witrynę, która będzie sprzyjać sprzedaży.

Z badań wynika, że każdy dolar zainwestowany w poprawę UX przynosi 100 dolarów zysku.

Choć sztuczna inteligencja, interakcje głosowe i automatyzacja to trzy czynniki, które mają i będą mieć coraz większy wpływ na UX, nie rzucaj się na głęboką wodę.

Zacznij od podstaw UX oraz UI i nie popełniaj typowych błędów. Jakich?

Błędy to jedno - pamiętaj by ich nie popełniać. Ale jednocześnie skup się na tym, by makieta i strona była:

Zgodna z normami jakości, spójności - ładny projekt graficzny, brak przeskakujących elementów podczas przeglądania strony, dobre i stosunkowo krótkie treści (nie ściany tekstów).

Zgodna z wymogami bezpieczeństwa - certyfikat SSL, Polityka Cookies, RODO.

Zgodna z potrzebami użytkowników - przejrzysta struktura, łatwa nawigacja - czyli wszystko, co składa się na dobre doświadczenia użytkowników.

Krok 1: Zdefiniuj cel i zakres projektu

• Określ profil strony internetowej i jej cel z biznesowego punktu widzenia.
• Przeprowadź burzę mózgów z wymianą pomysłów na to, jak strona przełoży się na osiągnięcie celu.
• Zdefiniuj cele strony internetowej i stwórz zamysł interfejsu, który maksymalnie upraszcza ich osiągnięcie przez użytkownika
• Zaplanuj wstępną wersję struktury strony tzw. content inventory.

Krok 2: Zbadaj grupę docelową i rynek

• Zbierz dane o potrzebach grupy docelowej, poznaj ich bolączki.
• Opracuj personę klienta. W tym pomoże Ci szablon idealnego klienta z zeszytem ćwiczeń. Kliknij i pobierz.
• Opracuj listę potrzeb klientów, na jakie odpowiadać ma strona
• Zidentyfikuj, w jaki sposób strona stanie się przewagą konkurencyjną
• Przeprowadź badania rynkowe w celu określenia różnic wobec dostępnych rozwiązań
• Wykonaj badania konkurencji, które pozwolą zaoferować klientom “coś więcej”
• Przeprowadź badanie procesu zakupowego w celu określenia jak ułatwić zakup/kontakt

Krok 3: Stwórz wstępny projekt - makietę strony internetowej

• Utwórz projekt funkcjonalny i nałóż na niego identyfikację wizualną, która uatrakcyjni korzystanie ze strony.
• Przygotuj szkic strony - może być nawet na kartce
• Przełóż to na GRID - tzw. szkielet, czyli ułożenie poszczególnych sekcji na stronie

Krok 4: Projektuj

• Przełóż GRID na DESIGN - stwórz atrakcyjny wygląd strony poprzez odpowiednią ilość sekcji
• Nałóż identyfikację wizualną, kolory marki, grafiki na GRID
• Zaplanuj ułożenie zdjęć, nagłówków, tekstów, filmów, przycisków na stronie.

Krok 5: Testuj

• Zakoduj stronę i zacznij z niej korzystać w zespole, zbierając informacje zwrotne.
• Wykonaj testy A/B oraz inne opisane w dalszej części tego tekstu.
• Zidentyfikuj wąskie gardła i nanieś poprawki, by wypłynąć na “niebieski ocean”

Krok 6: Popraw

• Błędy trafiają się zawsze, zbierz opinie użytkowników i nanieś poprawki.
• Powtórz ten etap minimum 3-krotnie, by mieć pewność, że projekt jest spójny, funkcjonalny i ładny dla projektantów, użytkowników, osób ze specjalnymi potrzebami.

Krok 7: Wdrażaj

Uruchom stronę i podepnij do niej narzędzia analityczne, by oceniać w czasie wzorzec zachowań na stronie, co pozwoli Ci ocenić czy faza testów i poprawek nie powinna być przeprowadzona jeszcze raz.

Testy A/B:

• Porównaj dwie wersje strony lub aplikacji wobec jednego czynnika.

• Monitoruj zachowania użytkowników, np. śledź kliknięcia i konwersje.
• Wyłoń lepszą wersję, która powinna być przyjęta.

Ocena heurystyczna:

• Skorzystaj z ekspertów zewnętrznych do oceny zgodności z normami i wytycznymi.
• Wygeneruj w ten sposób listę elementów do poprawy na podstawie wytycznych.

Zogniskowany wywiad grupowy:

• Przeprowadź moderowaną dyskusję z małą grupą potencjalnych użytkowników.
• Zbierz opinie na temat wad i zalet aktualnego projektu.

Scenariusze użycia:

• Przeprowadź też użyteczności strony na kilku klientach na zasadzie “skorzystaj ze strony i pokaż jak Ty to robisz”
• Przygotuj listę kroków, jakie podejmują klienci w celu osiągnięcia celu + zastanów się jak je uprościć.

Wywiady pogłębione:

• Przeprowadź wywiad z potencjalnymi użytkownikami.
• Oceń w ten sposób dodatkowe ułatwienia, udoskonalenia, które “podkręcą” dobre doświadczenia użytkownika.

Nagrania sesji:

• Monitoruj zachowanie użytkowników na stronie lub w aplikacji.
• Zlokalizuj “wąskie gardła” funkcjonalności strony.

Eyetracking:

• Śledzi ruchy oczu użytkowników podczas korzystania z interfejsu.

• W ten sposób sprawdzisz co przyciąga ich uwagę, co posłuży Ci do ostatecznej zmiany układu sekcji i wyeksponowania najważniejszych elementów oferty.

Ten tekst to jedynie zbiór informacji na temat UX i UI. Jest w nim wiele porad, statystyk i faktów, które powinieneś uwzględnić.

Pamiętaj jednak, że przed rozpoczęciem pracy warto również sprawdzić dobre, ale już funkcjonujące strony. W ten sposób “na żywo” ocenisz elementy UX i UI, które mają znaczenie.

Chcesz dowiedzieć się, jak projektujemy owocne strony internetowe? Sprawdź nasz przewodnik.

Stwórz makietę i całą stronę u Owocnych. Skontaktuj się z nami i odbierz niezobowiązującą ofertę.