Wchodzisz na stronę WWW lub do sklepu internetowego i wiesz gdzie jesteś? To znaczy, że struktura serwisu internetowego lub sklepu została dobrze zaprojektowana. Poznaj najważniejsze informacje o projektowaniu struktur i wdrażaj je w swoich projektach.
Co to jest struktura serwisu internetowego
Struktura serwisu internetowego, to używając analogii budowlanej układ korytarzy, schodów i pomieszczeń, pomiędzy którymi dochodzi do logicznej relacji i zależności. Zaczyna się od wejścia, czyli strony głównej i dalej rozchodzi się w różnych kierunkach. Struktura serwisu WWW jest dobra, kiedy spełnia swoją funkcję, czyli jest logiczna i łatwa do zrozumienia przez każdego odwiedzającego.
Struktura strony, a struktura serwisu internetowego
Struktura strony WWW to koncepcja układu elementów i ich ważności na pojedynczej stronie internetowej (jeden adres URL), najczęściej prezentowany w formie makiety, z angielskiego layoutu. Struktura serwisu WWW lub inaczej witryny internetowej to element większej całości tj. architektury informacji obejmującej sposób organizowania, opisywania i udostępniania treści tak, aby użytkownicy mogli je łatwo znaleźć i zrozumieć. To jednym słowem coś więcej niż „drzewko stron i podstron” ułożonych wg. ustalonej hierarchii.
Rodzaje struktur stron internetowych
Dobrze zaprojektowana struktura witryny internetowej to podstawa. W zależności od tego jak chcesz poprowadzić użytkownika po serwisie WWW, masz do wyboru kilka rodzajów struktur:
- struktura hierarchiczna – łatwa do zrozumienia i najczęściej stosowana,
- struktura sekwencyjna – prowadząca użytkownika za rękę w sposób liniowy, odnajdziesz ją np. podczas zapłaty za produkt w sklepie internetowym,
- struktura macierzy – zastosowanie ma w dużych serwisach WWW np. Amazon, gdzie linkowanie wewnętrzne – kontekstowe – ma większe znaczenie niż rozumienie logiki skąd przyszedłem i dokąd idę,
- struktura bazy danych – mniej hierarchiczna, stawiająca na swobodę wyszukiwania informacji i poruszania się po witrynach internetowych.
Prosta struktura witryny internetowej
Najczęściej witryny internetowe zorganizowane są wokół struktury hierarchicznej, wyglądającej jak model drzewa (odwróconego) i składają się z:
- strony głównej,
- strony kategorii,
- strony produktu lub usługi,
- strony opisującej właściciela strony (np. o firmie, o nas),
- strony kontaktu,
- strony logowania.
Struktura serwisu WWW wg. Nielsen Norman Group (NN/g)
NN/g traktuje strukturę serwisu jako część architektury informacji i definiuje ją przez:
- hierarchię treści – jak głęboko zagnieżdżone są informacje,
- systemy nawigacji – menu, breadcrumbs, linki kontekstowe,
- przewidywalność ścieżek użytkownika – wszystko jest tam, gdzie się tego spodziewam,
- odkrywalność (findability) – jak łatwo coś znaleźć.
NN/g mocno podkreśla też:
- ograniczanie głębokości struktury (lepiej szeroko niż bardzo głęboko),
- spójność nawigacji w całym serwisie.
Struktura serwisu WWW wg. Jesse James Garrett (model UX)
Garrett umieszcza strukturę na poziomie:
- definiowania przepływów użytkownika (user flows)
- projektowania interakcji między ekranami.
W jego modelu struktura serwisu odpowiada za:
- „jak użytkownik przechodzi przez system”,
- „jakie są możliwe ścieżki działania”.
Jak zaprojektować dobrą strukturę serwisu WWW?
Najprostszą do zaprojektowania i do wdrożenia jest struktura hierarchiczna. Jest ona nie tylko łatwa do zaprojektowania ponieważ wynika z hierarchii treści, ale jest również najprostszą do zrozumienia przez użytkowników i roboty np. Google, indeksujące strony WWW.
Kilka podpowiedzi jak zaprojektować dobrą stronę www:
- Zacznij od celów użytkownika, nie od menu – pomyśl co użytkownik chce lub może chcieć, a nie od tego co ma Twoja firma w ofercie,
- Trzymaj się logiki modeli mentalnych – podejście Don Normana to przede wszystkim posługiwanie się językiem użytkownika (nie branży) w treści oraz nazwach kategorii i nawigacji,
- Ogranicz głębokość struktury – lepiej mieć więcej opcji na jednym poziomie niż bardzo głęboką strukturę (wiele kliknięć w dół),
- Zaprojektuj różne ścieżki dotarcia – dobra struktura to nie tylko nawigacja główna, ale też wyszukiwarka, ścieżki okruszków, menu kontekstowe.
- Dbaj o spójność w całym serwisie WWW – menu główne nie powinno zmieniać swojej lokalizacji, a układy treści powinny być czytelne i przewidywalne,
- Testuj strukturę zanim rozpoczniesz projektowanie makiet – istnieje wiele metod projektowania – na sucho – struktury serwisu WWW (z ang. card sorting, tree testing), szczególnie hierarchii treści oraz nazw zastosowanych etykiet w nawigacji,
- Używaj prostych, jednoznacznych wyrazów – nawigacja to nie miejsce na nowomowę, sprawdź jakim językiem mówi Twój odbiorca i takie nazewnictwo stosuj,
- Zadbaj o pełną orientację – jeśli odbiorca trafi na stronę powinien rzucić okiem i wiedzieć: gdzie jest, gdzie może iść dalej i jak wrócić tak skąd przyszedł.
- Myśl o skali – prostota zastosowanych rozwiązań zapewni Ci łatwość rozbudowy serwisu WWW o nowe strony. Pamiętaj, że nawet jeśli dziś Ty zajmujesz się treścią stron WWW, zaraz może przyjść ktoś inny i tak jak Ty powinien rozumieć logikę rozwijanego projektu,
- Upraszczaj bez litości – stara zasada UX mówi: usuń, połącz, uprość. Nie tylko w UX, mniej zawsze znaczy więcej.
Czy struktura jest dobrze zaprojektowana?
Aby odpowiedzieć na to pytanie możesz użyć jednej z metod badania użyteczności serwisów WWW i aplikacji. Przejdź do strony Test użyteczności serwisu internetowego i skorzystaj z rozwiązania rekomendowanego przez Steve’a Kruga. Znajdziesz tam również 10 heurystyk Jakoba Nielsena.
Podsumowanie
Jeśli masz w planie przygotowanie strony internetowej, ale nie masz doświadczenia w projektowaniu struktur serwisów WWW, narysuj, naszkicuj taką logikę informacji jaką uważasz za właściwą i zgłoś się z tym do Agencji interaktywnej. Specjaliści tacy jak my, pomożemy Ci w przeniesieniu pomysłów na poziom profesjonalny, aby Twój projekt, mógł rozwijać się latami, a nie zakończył żywot po pierwszym roku od uruchomienia.
Źródła:
- materiały własne Honki Academy – agencja interaktywna założona w 2002 roku, specjalizująca się w projektowaniu użytecznych serwisów WWW, sklepów internetowych i aplikacji,
- Nielsen Norman Group – Nielsen Norman Group (NN/g) to amerykańska firma badawczo-doradcza specjalizująca się w użyteczności (usability) oraz doświadczeniu użytkownika (UX).
- Peter Morville – Peter Morville to amerykański ekspert w dziedzinie architektury informacji i doświadczeń użytkownika (UX)
- Don Norman – to amerykański naukowiec poznawczy, projektant i krytyk wzornictwa, znany jako „ojciec user experience”.
- Steve Krug – autor książek pt. „Nie każ mi myśleć! O życiowym podejściu do funkcjonalności stron internetowych” oraz „Przetestuj ją sam. O funkcjonalności stron internetowych”.
- Jesse James Garrett – zasłynął jako współzałożyciel firmy Adaptive Path oraz twórca modelu „The Elements of User Experience”, który ukształtował myślenie o projektowaniu skoncentrowanym na użytkowniku.
Autor artykułu: Marcin Rząca i na linkedIn
