Home | Polski Polski
Attached
Go back

(Note: This page is available in Polish language only. If you would like it translated to English, please let me know. Sorry for the inconvenience)


Oto artykuł, którego nieco zmieniona wersja ukazała się w numerze 6/2003 magazynu Enter. Oryginalny artykuł można zobaczyć na dole strony.

Użyteczność przede wszystkim

Każdemu chyba zdarzyło się wejść na witrynę tak chaotyczną, mało czytelną, i trudną w obsłudze, iż jedynym przyjemnym odczuciem było zamykanie okna przeglądarki. Upewnijmy się, że odwiedzających naszą witrynę nie spotka to samo.

Najciekawsze strony traktujące o użyteczności witryn WWW:

Jakob Nielsen's Alertbox Link points to external site
Stanford Guidelines For Web Credibility Link points to external site
Web Design & Usability Guidelines Link points to external site
Style Guide for Online Hypertext Link points to external site
Web Pages That Suck Link points to external site
Attached (strona autora)

Podane w tym artykule sugestie oraz propozycje pomogą w uczynieniu strony WWW bardziej przyjazną i użyteczną dla odwiedzających – warto zapoznać się z nimi oraz sprawdzić, czy nie przydadzą się i naszej witrynie.

Wygląd odnośników

Internauci podczas ponaddziesięcioletniej historii WWW przyzwyczaili się do trzech prostych reguł dotyczących odnośników (linków):

  • odnośniki są niebieskie,
  • odnośniki są podkreślone,
  • odnośniki do odwiedzonych stron zmieniają kolor.

Czy odnośniki muszą koniecznie być niebieskie? Nie, czasami niebieski nie komponuje się z kolorystyką witryny. Podkreślone? Również nie – chociaż tutaj bądźmy już bardziej ostrożni z eksperymentami.

Najważniejsze jest jednak, żeby wszystko, co prowadzi do innych stron, w wyraźny sposób odróżniało się od zwykłego tekstu. Nie zmuszajmy internautów do zgadywania, co jest odnośnikiem a co nie, lub wodzenia kursorem po elementach interfejsu i obserwowaniu, czy kursor zmienia się w “łapkę”.

Stosujmy również dwa odmienne kolory dla stron nowych i już odwiedzonych. Z jednej strony pozwoli to internautom na szybkie zorientowanie się, które części serwisu już odwiedzili – z drugiej zadziała jak wydeptana ścieżka, kiedy podczas kolejnej wizyty będą chcieli trafić w to samo miejsce.

Don’t make the internauts guessing what is a link and what is not
Don’t make the internauts guessing what is a link and what is not



Opisy odnośników

Badania wykazały, iż przeglądanie stron WWW przypomina bardziej skakanie pilotem po kanałach telewizyjnych, niż czytanie książki. W testach jedynie co szósta osoba czytała witrynę słowo po słowie, reszta natomiast dokonywała swoistego “skanowania” treści w celu odnalezienia pewnych słów kluczowych czy znanych symboli graficznych – a następnie przechodziła do kolejnej strony.

Starajmy się więc uwypuklać najważniejsze treści tak, aby wspomóc takie właśnie “skanowanie”. Tyczy się to m.in. wspomnianych odnośników – dla przykładu, widząc zdanie typu

internauta zobaczy przede wszystkim trzy wyrwane z kontekstu słowa “tutaj”, które będzie musiał świadomie dopasować do poszczególnych znaczeń. Jakże lepiej pod tym względem wygląda zdanie

gdzie wszystko jest jasne na pierwszy rzut oka? To wypaczenie idei hipertekstu jest tak często spotykane, iż ma swoją dość oczywistą nazwę – Syndromu “Kliknij Tutaj”.

Two problems in one: "Click Here" syndrome and invisible links
Two problems in one: "Click Here" syndrome and invisible links



Nawigacja

W parze z dbałością o wygląd odnośników powinna iść troska o nawigację, ponieważ mało który odwiedzający potrafi zbudować sobie w głowie mapę naszego serwisu, szczególnie jeśli dopiero co do niego trafił, lub – co gorsza – nie rozpoczynał wędrówki od strony początkowej.

Nie uciekajmy więc od widocznej, przejrzystej i spójnej (ale i nie nazbyt rozdmuchanej!) nawigacji. Każdy z nas widział chyba mapę centrum miasta, muzeum czy ZOO, przedstawiającą dokładnie całą okolicę, wraz z punktem oznaczonym “tu jesteś” – tak samo powinna działać nawigacja na stronie. Dajmy odwiedzającemu wyraźne informacje, gdzie w strukturze serwisu aktualnie się znajduje, jak może wrócić do nadrzędnej strony, oraz jakie strony są podobne do tej, którą odwiedza.

One of the most popular methods of showing a current position in website’s hierarchy (here: Amazon.com)
One of the most popular methods of showing a current position in website’s hierarchy (here: Amazon.com)



Co więcej, każdy większy serwis powinien zawierać także widoczny z daleka indeks stron – mapę przedstawiającą zarys struktury całego serwisu, będącą kołem ratunkowym dla tych, którzy po prostu się zagubili.

Pamiętajmy także o zróżnicowaniu tytułów (<TITLE>) poszczególnych podstron serwisu. Pomaga to bardzo przy ich dodawaniu do “ulubionych”, przy przeglądaniu historii oraz przy orientowaniu się, które z otwartych aktualnie okienek zawiera którą podstronę serwisu. Jeśli każdą nazwiemy tak samo, wówczas użytkownik skazany będzie na raczej uciążliwą metodę “chybił-trafił”.

Now, which site was it...?
Now, which site was it...?
Nie otwierajmy nowych stron w nowych oknach, dopóki nie jest to absolutnie konieczne i uzasadnione – a jeśli jest, uprzedźmy o tym użytkownika przed faktem. Nowe, pojawiające się bez wyraźnego nakazu okna naruszają porządek ustalony przez internautę i często powodują zagubienie (szczególnie jeśli otwierają się w tym samym miejscu, co poprzednie), nie wspominając o skojarzeniu z wyskakującymi reklamami i następującym natychmiastowym odruchu zamknięcia okna.

I jeszcze jeden drobiazg – przyjętą konwencją jest to, iż kliknięcie na obrazku z logo naszej firmy lub tytułem witryny kieruje do strony głównej. Mała rzecz, a cieszy, szczególnie głęboko “zakopanych” w naszym serwisie, którzy chcą szybko wrócić w znajome już miejsce.

Obrazki

Opisujmy wszystkie obrazki korzystając z atrybutu ALT, na przykład:

<IMG SRC='kot.gif' ALT='Kot rasy perskiej'>

Takie opisy nie tylko ułatwiają (a czasem wręcz umożliwiają) oglądanie strony korzystającym z wolniejszego łącza czy przeglądarek tekstowych, oraz osobom niedowidzącym, dla których treść witryny jest “czytana” przez odpowiednie oprogramowanie. Możemy także wykorzystać opis do dopowiedzienia rzeczy, które nie są widoczne na obrazku (na przykład model wyświetlanego produktu lub znaczenie ikonki) – tekst zawarty w atrybucie ALT zostanie wyświetlony po wskazaniu kursorem danego obrazka.

Pojęcia takie jak użyteczność (ang. usability) i User-Centered Design są obecne na świecie już od dawna, jednak wciąż zbyt mało popularne w naszym kraju. Nie tyczą się zresztą tylko komputerów, ale wszystkich technologii, gdzie występuje styk człowiek-maszyna i związane z nim problemy.

Prowadzone przez specjalistów z tej dziedziny badania można podsumować jako próby uczynienia interfejsów jak najbardziej przyjaznymi i “przezroczystymi” – w końcu chcemy wykorzystywać urządzenia do konkretnych zadań, a nie walczyć z ich obsługą. W samochodzie nie zastanawiamy się, która dźwigienka czy przycisk służy do jakiej czynności; mając dobrze zaprojektowany telefon komórkowy po prostu... rozmawiamy, a zwiększenie głośności na pilocie nie powinno być niczym więcej niż szybkim odruchem.

I to samo powinno tyczyć się stron WWW. Pamiętajmy, że internauci mając do wyboru miliony innych stron nie są skłonni wybaczać. Odwiedzający naszą witrynę nie wróci do niej nigdy, jeżeli nie będzie potrafił z niej korzystać lub się w niej odnaleźć – i to niezależnie od tego, jak wiele ciekawych informacji tam umieściliśmy. W przypadku naszej prywatnej strony domowej strata będzie może niewielka (chociaż zależy nam przecież na odwiedzających!), jeśli jednak internauta opuści z uczuciem niesmaku witrynę naszej firmy – wówczas mogliśmy stracić przyszłego klienta.

Apple tries to describe every single photo on their website
Apple tries to describe every single photo on their website



Spróbujmy też, w miarę możliwości, definiować z góry wymiary obrazków (atrybuty WIDTH i HEIGHT). Unikniemy wtedy charakterystycznego przestawiania się elementów strony w trakcie jej wczytywania na wolniejszych łączach – a co za tym idzie, dezorientacji i niezadowolenia odwiedzającego, kiedy np. odnośnik, w który celował, "ucieka" mu spod kursora.

Podsumowanie

Podane powyżej uwagi dotyczą głównie poruszania się po serwisie – jest to oczywiście jedna z najbardziej istotnych rzeczy, ale też dopiero wierzchołek góry lodowej, jeśli chodzi o przyjazność dla użytkownika. Jednak przejrzenie naszej strony lub tworzenie nowej mając tenże “wierzchołek” w pamięci powinno dać już wiele.

Można zarzucić, iż to wszystko to mało znaczące drobiazgi, na które nikt nie zwraca uwagi. Nic bardziej błędnego – każdy interfejs składa się z miliona takich właśnie drobiazgów, od “dopieszczenia” których będzie zależał efekt końcowy w postaci zadowolenia odwiedzającego naszą witrynę oraz skuteczności jego wizyty. Wykorzystajmy więc doświadczenie i nauczki innych – i to nie tylko po to, aby zadbać o “naszych” internautów, ale też aby uczynić WWW nieco bardziej przyjaznym i miłym miejscem.

A na koniec najlepsza z możliwych sugestia: jeszcze przed premierą pokażmy naszą stronę rodzinie, znajomym, jednemu z klientów... i z pokorą wysłuchajmy tego, co mają do powiedzenia. Na pewno znajdą wiele problemów i błędów, o których nie mieliśmy najmniejszego pojęcia. Dlaczego? Siedząc godzinami czy tygodniami przy naszej witrynie i znając ją na wylot, nigdy już nie będziemy potrafili spojrzeć na nią tak, jak każdy z przyszłych odwiedzających. A to w końcu na nich najbardziej nam zależy...

Marcin Wichary


Oto oryginalny artykuł:

First page
This image can be zoomed
Second page
This image can be zoomed

Źródło: “Enter,” Link points to external site nr 6/2003, str. 126-127



 
Page added on 10th May 2003.

Copyright © 2002-2005 Marcin Wichary
Printable version | Contact | Site map