Webdesign & UX

Etykiety na stronach internetowych

Etykiety na stronach internetowych
Image courtesy of digitalart at FreeDigitalPhotos.net

‚Etykietowanie stron internetowych’ to pojęcie, które może budzić mylne skojarzenia i jest dość rzadko spotykane. Cokolwiek sobie teraz nie pomyśleliście na temat tego czym jest etykietowanie stron mogę Wam z dużą dozą pewności powiedzieć, że nie trafiliście… W uproszczeniu etykietowanie to proces organizacji treści na stronie internetowej i jest on częścią procesu tworzenia architektury informacji a nie czymś do czego będzie Wam potrzebna znajomość PHP lub HTML. Jeśli to Was nie zniechęca to zapraszam do dalszej lektury…

Czym są etykiety?

Etykieta nawigacyjna (bo właściwie tak powinniśmy ją określać) to nazwa odzwierciedlająca jakiś fragment treści strony internetowej. Załóżmy, że projektujemy sklep internetowy z częściami komputerowymi. Etykietą może być nazwa „Procesory” lub „Klawiatury”. Na wyższym poziomie hierarchii treści możemy znaleźć takie etykiety jak „Laptopy” lub „Komputery stacjonarne”. Jak więc widać idea jest prosta… schody zaczynają się później…

Jednak nim dojdziemy do tych schodów spójrzmy jak etykiety nawigacyjne definiuje profesjonalna literatura. Dzięki temu liźniemy trochę teorii, która może przydać się później:

Etykiety nawigacyjne, kluczowe z uwagi na łatwość szukania, to słowa naprowadzające, których użytkownicy szukają w czasie przeglądania opcji nawigacyjnych.

Projektowanie nawigacji strony WWW. Optymalizacja funkcjonalności witryny

Jeśli zrozumiemy powyższą definicję to możemy ją ładnie spiąć klamrą z tym o czym pisaliśmy na samym początku. Etykiety będą służyc nam do nazywania fragmentów projektowanej witryny internetowej.

Jednak z perspektywy użytkownika etykiety nawigacyjne są zawartością, mechanizmami i strukturą witryny. Jeśli nawigacja ma zapewniać narrację dla witryny internetowej, etykiety to słowa opowiadające historię.
Projektowanie nawigacji strony WWW. Optymalizacja funkcjonalności witryny

Wszystko jasne? Przejdźmy więc dalej.

Gdzie pies leży pogrzebany, czyli w czym problem?

Może się wydawać, że to prościzna. Projektuję stronę internetową i po prostu nazywam jej fragmenty tak jak wynika to z ich znaczenia, później odzwierciedlam to nazewnictwo w nawigacji i problem z głowy. Otóż niestety nie jest to aż tak proste.

Pojęcia są dość swobodnie interpretowane przez użytkowników i spójność w tym zakresie możemy otrzymać jedynie dla niewielkiej grupy potencjalnych odwiedzajacych. W dużej mierze ludzie będą różnie rozumieć różne pojęcia i to co ‚wydaje się projektantowi’ często będzie sprzeczne z oczekiwaniami użytkowników.

Semantyka potrafi płatać figle. Dla przykładu załóżmy, że trafiacie na stronę firmy świadczącej usługi księgowe, gdzie jedną z pozycji w menu jest pozycja „Usługi”. Wchodzicie tam myśląc, że traficie na podstronę zawierającą listę usług świadczonych przez firmę a tam zawarte są informacje o regulacjach prawnych dotycząych opłacania podatku VAT za usługi… Współczynnik odrzuceń rośnie…

To trochę jaskrawy przykład, ale podobne rzeczy zdarzają się wbrew pozorom często. Podstawowy problem leży w oczekiwaniach użytkowników i konfronacji ich z założeniami projektanta. Drugi problem polega na tym, że (jak już wskazaliśmy) nie ma spójności w nazewnictwie stosowanym przez użytkowników.

Jak prawidłowo tworzyć etykiety na strony internetowe?

Jest kilka wskazówek, których stosowanie powinno nam pomóc w etykietowaniu tworzonych stron internetowych.

  • Powinniśmy wykluczać niejednoznaczności – ciężko jest osiągnąć zupełną jednoznaczność dla każdego użytkownika ponieważ nie znamy jego stanu wiedzy, zamiarów, oczekiwań itd., ale jesteśmy w stanie eliminować niejednoznaczności z systemu etykiet nawigacyjnych naszej strony. W tym celu powinniśmy starać się unikać stosowania: żargonu firmowego skrótów, nie nadużywać terminologii technicznej lub całkiem ją wyeliminować (uwaga: są wyjątki od tych zasad)
  • Nazywanie etykiet (czyli naszych nawigacyjnych odzwierciedleń fragmentów treści strony) powinno być dokonywane w sposób, który nie sprawa, iż stają się niezrozumiałe jeśli wyciągniemy je z kontekstu. Dobrym przykładem może być tworzenie ogólnych nazw dla bardziej precyzyjnej kategorii. Np. w sklepie internetowym mamy produkty firmy X, która oferuje dyski twarde, procesory, karty graficzne i muzyczne. Produkty firmy X tworzą własną kategorię produktów (etykietę firmy X), ale w architekturze informacji hierarchicznie niżej mamy etykiety w stylu „dyski twarde”. Wyciągnięcie „tych dysków twardych” poza kategorię firmy X może być mylące bo użytkownik nie znajdzie tam wszystkich dysków twardych a jedynie te firmy X.
  • Eykiety muszą się wzajemnie wykluczać – właściwie to ta cecha łączy się z unikaniem niejednoznaczności, gdyż nie ma gorszej niejednoznaczności niż ta gdy użytkownik nie potrafi rozróżnić fragmentów serwisu internetowego po jego etykietach. Przykład: w serwisie internetowym mamy kategorię „Wiadomości” oraz „Newsy ze świata”. W kategorii „Wiadomości” możemy znaleźć podkategorię „Wiadomości zagraniczne”. Mamy zbędne powielenie treści, które nie jest niczym uzasadnione.
  • Musimy zachować spójność obranego systemu etykiet nawigacyjnych – jeśli wybieramy już jakąś nazwę to po prostu się jej trzymajmy. Nie można zmieniać raz obranego systemu, modyfikować go albo po prostu ‚zapominać’ o tym, że wcześniej użyto innej nazwy. Spójność w tym zakresie jest kluczem do stworzenia czytelnej narracji sprzyjającej odnajdywaniu treści przez użytkowników. Ta spójność sprzyja też realizacji zasady stawiania na rozpoznawalność elementów interfejsu a nie na konieczność przypominania sobie jego elementów.
  • Etykiety nawigacyjne powinniśmy dobierać tak aby były one przystępne dla użytkowników – poza sytuacjami specjalistycznych portali najlepiej jest odwoływać się do poziomu szczegółowości odpowiadającemu racjonalnym oczekiwaniom co do zachowań użytkowników. Podobnie jest ze znaczeniami nazw używanych etykiet. Powinniśmy stosować takie, które nie są ‚przekąbionowane’. Prostota to pierwszy krok do sukcesu. Ta zasada wyraźnie łączy się z zasadą unikania niejednoznaczności szczególnie w kontekście stosowania języka, którym posługują się użytkownicy.
  • Etykiety nie mogą być ani zbyt długie ani zbyt krótkie – skrótowce zdecydowanie odpadają, ale z drugiej strony nie wyobrażam sobie etykiety składającej się z np. 179 znaków. Umiar to podstawa. Nie możemy zmuszać użytkowników do przeciążania pamięci krótkotrwałej, więc starajmy się tworzyć etykiety, które będą łatwo rozpoznawalne i nie będą wymagały zapamiętywania (znowu możemy cofnąć się do linkowanego wcześniej artykułu)
  • Starajmy się antycypować potrzeby użytkowników i ich zachowania – o tym szerzej dalej i w następnych artykułach…

Tytułem wyjaśnienia. W powyższych punktach pisaliśmy o pewnych wyjątkach od wymienionych zasad. Najczęściej w tych wyjątkach chodzi o portale branżowe i/lub pracownicze portale intranetowe. To miejsca gdzie czasami lepiej jest stosować żargon i skrótowce ponieważ w danym środowisku mogą one być bardziej przystępne niż język potoczny. Na tego typu stronach możemy też zakładać pewien poziom wiedzy fachowej użytkowników, który ułatwia komunikację z nimi. Jak na ironię wiele portali branżowych czy pracowniczych portali intranetowych nie miało by sensu gdyby nie żargron, skrótowce (np. HTML z naszej bajki) i pewne założenia co do wiedzy fachowej odwiedzających a nawet gdyby ich etykiety nawigacyjne miały jakiś sens to były by niezmiernie i niepotrzebnie przekombinowane…

Kiedy użytkownik spotyka się z etykietami?

Baaardzo wcześnie:

Wyniki wyszukiwania hasła "Webroad"

Odwiedzający naszą witrynę może napotkać nasze etykiety nawigacyjne jeszcze nim wejdzie na stronę. Wyniki wyszukiwania Google to pierwszy moment by zacząć opowiadać odwiedzającym naszą narrację. Sprawmy żeby od początku miała sens.

Etykiety nawigacyjne to nie tylko tekst linków wykorzystywanych w nawigacji globalnej, to również:

  • Teksty nagłówków
  • Adresy URL
  • Treść tagu <title>
  • Tekst linków anchor

Pośrednio w tworzeniu narracji przez spójną i przejrzystą architekturę informacji oraz system etykiet nawigacyjnych pomagać mogą nawet:

  • Odpowiednio dobrane zdjęcia
  • Copywriting spójny z ustaloną architekturą nawigacji
  • Treść wiadomości „Podobne artykuły”, czy „Podobne produkty”
  • Treści wezwań do działania
  • i wiele innych elementów witryny

Poproś użytkowników o pomoc

Jak to zwykle z projektowaniem stron internetowych bywa zamiast spekulować najlepiej jest po prostu potestować z użytkownikami to co udało nam się zaprojetować. W końcu projektowanie to proces iteracyjny, więc jeśli po testach odnajedziemy jakieś problemy (a tak pewnie będzie) to jak najbardziej powinniśmy powrócić do kolejnej iteracji projektowania.

Chyba najbardziej znanym sposobem na weryfikowanie założeń dotyczących projektowania etykiet nawigacyjnych jest card sorting (sortowanie kart). Ale teraz nie będziemy o tym pisać, gdyż poświęcimy jej oddzielny wpis.

Podsumowanie

Jak widać etykietowanie stron internetowych wcale nie jest takie proste jak by się mogło wydawać. Wiele pozornych i fałszywych przekonań na ten temat nie oddaje istoty problemu, który jest duży szczególnie jeśli budujemy serwis skierowany do szerokiej gamy użytkowników o potencjalnie różnym poziomie merytorycznego rozezenania, wiedzy tematycznej itd.

Oczywiście nie dajmy się też ześwirować. Współczesny internet wykształcił wiele wzroców, które są rozpoznawalne przez użytkowników. Już podążając tymi wzorcami jesteśmy w stanie osiągnąć sensowny projekt architektury informacji o ile oczywiście projektowana strona ma dość ‚generyczny’ charakter. W przypdku bardziej zindywidualizowanych projektów wymagane będzie nie tylko dogłębne poznanie problemu segregacji treści na stronie, ale pewnie też warsztaty projektowe z użytkownikami a później testy A/B i testy użyteczności.

Tagi:architektura informacjiuser experienceweb design

komentarzy 6

  • Awatar
    Blog o e-commerce i grafice

    23 grudnia 2014 00:32

    Właściwie wchodząc z mojego Feedly myślałem, że będzie to artykuł o htmlowych mikroformatach. Interesuję mnie ten temat i jego wpływ na pozycjonowanie Polskich stron może stworzylibyście taki wpis?Co do artykułu… przeczytałem i większość rzeczy odwołuje się raczej do zdrowego rozsądku. Przydałyby się jakieś ciekawe przykłady poprawnej struktury;)

    Odpowiedz
    • Awatar
      Mr.Mr

      23 grudnia 2014 07:14

      Co do zdrowego rozsądku to prawda. Wpis będzie rozbudowywany w przyszłości i tam pojawi się więcej przykładów.

      W kwestii artykułu to nie wiem. Na razie nie ma czegoś takiego w planach, ale temat ciekawy, więc możliwe że go poruszymy.

      Odpowiedz
    • Awatar
      Comandeer

      24 grudnia 2014 00:16

      Co do artykułu o mikroformatach – swego czasu wspominałem o nich w moim tutku o HTML5, wraz ze Schema.org i Dublin Core, niemniej kwestia pozycjonowania mnie całkowicie nie interesuje: http://tutorials.comandeer.pl/html5-blog.html

      Wgl uważam, że pisanie o architekturze stron w kontekście pozycjonowania jest de facto szkodliwe dla semantyki HTML-a…

      Odpowiedz
  • Awatar
    Jarosław Wróblewski

    2 stycznia 2015 12:59

    Artykuł hmm lekki poza tym duży plus za „jaskrawy przykład” bo wątki humorystyczne są zawsze mile widziane :) Etykiety na stronach przyrównałbym do biznesu.. aby osiągnąć sukces trzeba znać potrzeby konsumenta i odpowiednio je zaspokoić.

    Odpowiedz
  • Awatar
    ar0000

    11 lutego 2015 11:55

    ‚Zdecydownym kupować tanio polecam stronke:
    http://www.make.my/aukcje

    Mega okazje, licytacje za grosze.

    Ja kupiłem sobie nowy TV 46cali za 180 zł :)..

    Odpowiedz
  • Awatar

Zostaw odpowiedź