Top Banner
Wydawnictwo Helion ul. Koœciuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: [email protected] Optymalizacja funkcjonalnoœci serwisów internetowych Stwórz funkcjonalne witryny i zdob¹dŸ przewagê w internecie! • Uniknij standardowych b³êdów • Zrozum potrzeby u¿ytkowników • Udostêpnij przydatne informacje w czytelny sposób W ci¹gu ostatnich kilkunastu lat internet sta³ siê wszechobecny. Nawet ma³e firmy maj¹ w³asne strony, a rozmaite produkty i informacje mo¿na znaleŸæ na niezliczonych konkurencyjnych witrynach. Jak w takiej sytuacji sprawiæ, ¿eby u¿ytkownik skorzysta³ z Twoich us³ug? Coraz wiêksze znaczenie w sieci odgrywa funkcjonalnoœæ, a klienci wybieraj¹ te witryny, na których mog¹ szybko i ³atwo znaleŸæ to, czego szukaj¹. W ksi¹¿ce „Optymalizacja funkcjonalnoœci serwisów internetowych” guru w zakresie funkcjonalnoœci w internecie, Jakob Nielsen, przedstawia oparte na wszechstronnych badaniach wskazówki dotycz¹ce projektowania wygodnych witryn. Dziêki nim dowiesz siê, jak utworzyæ idealn¹ stronê startow¹ oraz unikn¹æ najczêœciej pope³nianych b³êdów. Zrozumiesz, jak u³atwiæ u¿ytkownikom wyszukiwanie informacji oraz nawigowanie po serwisie. Poznasz zasady pisania poprawnych tekstów dla witryn internetowych i stosowania odpowiednich czcionek, a tak¿e nauczysz siê w³aœciwie korzystaæ z ró¿norodnych technologii, które mog¹ wzbogaciæ Twój serwis. To kolejna doskona³a ksi¹¿ka autora bestsellera „Projektowanie funkcjonalnych serwisów internetowych”, któr¹ ka¿dy webmaster powinien mieæ w swej biblioteczce. W ksi¹¿ce poruszono nastêpuj¹ce zagadnienia: • Projektowanie strony startowej • Wyszukiwanie informacji • Nawigowanie po witrynie • Sposób pisania tekstów • Udostêpnianie odpowiednich informacji • U¿ywanie odpowiednich czcionek • Zastosowania technologii • Rozwi¹zania najczêœciej pope³nianych b³êdów • Testowanie funkcjonalnoœci witryn Naucz siê tworzyæ atrakcyjne witryny, z których u¿ytkownicy bêd¹ chêtnie korzystaæ Autorzy: Jakob Nielsen, Hoa Loranger T³umaczenie: Zbigniew Smogur ISBN: 83-246-0845-1 Tytu³ orygina³u: Prioritizing Web Usability Format: B5, stron: 432
51

Optymalizacja funkcjonalności serwisów internetowych

Jan 20, 2015

Download

Technology

Stwórz funkcjonalne witryny i zdobądź przewagę w internecie!

* Uniknij standardowych błędów
* Zrozum potrzeby użytkowników
* Udostępnij przydatne informacje w czytelny sposób

W ciągu ostatnich kilkunastu lat internet stał się wszechobecny. Nawet małe firmy mają własne strony, a rozmaite produkty i informacje można znaleźć na niezliczonych konkurencyjnych witrynach. Jak w takiej sytuacji sprawić, żeby użytkownik skorzystał z Twoich usług? Coraz większe znaczenie w sieci odgrywa funkcjonalność, a klienci wybierają te witryny, na których mogą szybko i łatwo znaleźć to, czego szukają.

W książce "Optymalizacja funkcjonalności serwisów internetowych" guru w zakresie funkcjonalności w internecie, Jakob Nielsen, przedstawia oparte na wszechstronnych badaniach wskazówki dotyczące projektowania wygodnych witryn. Dzięki nim dowiesz się, jak utworzyć idealną stronę startową oraz uniknąć najczęściej popełnianych błędów. Zrozumiesz, jak ułatwić użytkownikom wyszukiwanie informacji oraz nawigowanie po serwisie. Poznasz zasady pisania poprawnych tekstów dla witryn internetowych i stosowania odpowiednich czcionek, a także nauczysz się właściwie korzystać z różnorodnych technologii, które mogą wzbogacić Twój serwis. To kolejna doskonała książka autora bestsellera "Projektowanie funkcjonalnych serwisów internetowych", którą każdy webmaster powinien mieć w swej biblioteczce.

W książce poruszono następujące zagadnienia:

* Projektowanie strony startowej
* Wyszukiwanie informacji
* Nawigowanie po witrynie
* Sposób pisania tekstów
* Udostępnianie odpowiednich informacji
* Używanie odpowiednich czcionek
* Zastosowania technologii
* Rozwiązania najczęściej popełnianych błędów
* Testowanie funkcjonalności witryn

Naucz się tworzyć atrakcyjne witryny,
z których użytkownicy będą chętnie korzystać.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Optymalizacja funkcjonalności serwisów internetowych

Wydawnictwo Helionul. Koœciuszki 1c44-100 Gliwicetel. 032 230 98 63e-mail: [email protected]

Optymalizacjafunkcjonalnoœciserwisów internetowych

Stwórz funkcjonalne witryny i zdob¹dŸ przewagê w internecie!

• Uniknij standardowych b³êdów• Zrozum potrzeby u¿ytkowników• Udostêpnij przydatne informacje w czytelny sposób

W ci¹gu ostatnich kilkunastu lat internet sta³ siê wszechobecny. Nawet ma³e firmymaj¹ w³asne strony, a rozmaite produkty i informacje mo¿na znaleŸæ na niezliczonych konkurencyjnych witrynach. Jak w takiej sytuacji sprawiæ, ¿eby u¿ytkownik skorzysta³z Twoich us³ug? Coraz wiêksze znaczenie w sieci odgrywa funkcjonalnoœæ, a klienci wybieraj¹ te witryny, na których mog¹ szybko i ³atwo znaleŸæ to, czego szukaj¹.

W ksi¹¿ce „Optymalizacja funkcjonalnoœci serwisów internetowych” guru w zakresie funkcjonalnoœci w internecie, Jakob Nielsen, przedstawia oparte na wszechstronnych badaniach wskazówki dotycz¹ce projektowania wygodnych witryn. Dziêki nim dowiesz siê, jak utworzyæ idealn¹ stronê startow¹ oraz unikn¹æ najczêœciej pope³nianych b³êdów. Zrozumiesz, jak u³atwiæ u¿ytkownikom wyszukiwanie informacji oraz nawigowanie po serwisie. Poznasz zasady pisania poprawnych tekstów dla witryn internetowych i stosowania odpowiednich czcionek, a tak¿e nauczysz siê w³aœciwie korzystaæ z ró¿norodnych technologii, które mog¹ wzbogaciæ Twój serwis. To kolejna doskona³a ksi¹¿ka autora bestsellera „Projektowanie funkcjonalnych serwisów internetowych”, któr¹ ka¿dy webmaster powinien mieæ w swej biblioteczce.

W ksi¹¿ce poruszono nastêpuj¹ce zagadnienia:

• Projektowanie strony startowej• Wyszukiwanie informacji• Nawigowanie po witrynie• Sposób pisania tekstów• Udostêpnianie odpowiednich informacji• U¿ywanie odpowiednich czcionek• Zastosowania technologii• Rozwi¹zania najczêœciej pope³nianych b³êdów• Testowanie funkcjonalnoœci witryn

Naucz siê tworzyæ atrakcyjne witryny, z których u¿ytkownicy bêd¹ chêtnie korzystaæ

Autorzy: Jakob Nielsen, Hoa LorangerT³umaczenie: Zbigniew SmogurISBN: 83-246-0845-1Tytu³ orygina³u: Prioritizing Web UsabilityFormat: B5, stron: 432

Page 2: Optymalizacja funkcjonalności serwisów internetowych

Spis treści8

Spis treściWstęp 17

Czym jest funkcjonalność? 18Gdzie szukać szczegółowych badań użytkowników? 20

Funkcjonalność wczoraj i dziś 21

Kto powinien przeczytać tę książkę? 23

1 Wprowadzenie. Nic do ukrycia 29

Gdzie zdobywamy nasze dane 30Jak wykonane zostały badania do książki 31Strony przetestowane 33Co, jeśli na stronie wprowadzone zostały zmiany? 40

Jeszcze raz: dlaczego testowanie przy wykorzystaniuużytkowników jest ważne? 43

Testowanie z wykorzystaniem użytkowników w trzy dni 43Wyjątki 43

2 Doświadczenie użytkowników sieci 47

Jak dobrze ludzie używają sieci? 48Mierzenie skali sukcesu 49Wskaźniki powodzenia w internecie 50Powodzenie a wskaźnik doświadczenia 51

Satysfakcja użytkowników w pracy ze stronami internetowymi 52

W jaki sposób użytkownicy używają stron internetowych 53Trzy wskazówki dotyczące wspierania

dociekliwych użytkowników 53Strona startowa — tak wiele do powiedzenia,

tak niewiele czasu 56Cztery cele w trzydzieści sekund 56Sposoby pracy na wewnętrznych stronach 59Wskazówka — optymalizacja odnośników

na wewnętrznych stronach 61

Strategia dominującego wyszukiwania 62Rozwój „wyszukiwarek dających odpowiedzi” 62Cztery sposoby, aby zyskać uznanie

w oczach użytkowników wyszukiwarek 64Odnośniki zwykłe kontra sponsorowane 65W jaki sposób ludzie korzystają ze strony

z wynikami wyszukiwania 65Pierwsze zalecenie dotyczące optymalizacji

pod kątem wyszukiwarek 66

Page 3: Optymalizacja funkcjonalności serwisów internetowych

Spis treści 9

Korzystanie ze słów kluczowychdo oszacowania usprawnień funkcjonalności 67

Jak określić optymalną cenę dla reklamy słowa kluczowego 68Ile warta jest poprawiona funkcjonalność? 69Trzy powody, dla których warto usprawnić własną stronę 70

Przewijanie 71Wskazówka — projekt z krótkim przewijaniem 71

Spełnianie reguł projektowych oraz zaleceńdotyczących funkcjonalności 73

Definicja standardów i konwencji 73Siedem powodów przemawiających

za standaryzacją elementów projektu 74

Poszukiwanie informacji 78Zalecana lektura 78Ślad informacji — przewidywanie powodzenia śladu 78Wybór pożywienia — jakie strony odwiedzić 78Trzy sposoby na wyróżnienie śladu informacji 79Porzucenie śladu — kiedy zmienić obszar poszukiwań 79Nowe strategie projektowania,

aby zainteresować poszukujących informacji 80Więcej informacji 81Sposoby nawigacji osób pochłaniających informacje 81

3 Ponowne spojrzenie na wczesne wynikibadań nad funkcjonalnością 83

W trakcie budowy 85

Osiem problemów, które nie uległy zmianie 86Odnośniki, które nie zmieniają koloru po kliknięciu 86Dlaczego projektanci nam nie wierzą? 88Ucieczka od przycisku Wstecz 89Prawo Fittsa dotyczące czasu klikania 91Otwieranie nowych okien przeglądarki internetowej 93Klątwa maksymalizacji 95Jak można używać okien, skoro się ich nie rozumie? 97Wyskakujące okienka 98Najbardziej znienawidzone techniki reklamowe 101Projekty elementów, które wyglądają jak reklamy 102Naruszanie konwencji obowiązujących w sieci 104Unikanie podczas testów wpływowych użytkowników 104Mglista treść oraz pusta reklama 106Zwarta treść oraz nieprzeszukiwalny tekst 107

Page 4: Optymalizacja funkcjonalności serwisów internetowych

Spis treści10

Zmiana technologiczna i jej wpływ na funkcjonalność 110Wskazówki sił lotniczych z 1986 roku przeszły próbę czasu 111Długi czas pobierania 112Trzy poziomy emocjonalnego projektowania Dona Normana 112Ramki 113Technologia Flash 114Technologia Flash — dobra, zła i funkcjonalna 116Wyniki wyszukiwania o niskiej zgodności 117Materiały multimedialne i długie wideoklipy 117Zamrożone układy graficzne 118Nastolatki — mistrzowie technologii? 118Brak kompatybilności na różnych platformach 120Smutny Mac 120Urządzenia przenośne — nowy argument

przemawiający za projektami na różne platformy? 122

Adaptacja — w jaki sposób użytkownicywpłynęli na funkcjonalność 122

Niepewna możliwość klikania 123Odnośniki, które nie są niebieskie 126Przewijanie 126Rejestracja 128Skomplikowane adresy URL 129Wysuwane i kaskadowe menu 129

Powściągliwość — w jaki sposób projektancizmniejszyli problemy z funkcjonalnością 130

Wtyczki oraz technologia najnowszego stanu kodu 134Trójwymiarowy interfejs użytkownika 135Rozdęty projekt 137Strony wprowadzające 137Ruchoma grafika oraz przewijany tekst 139Własne elementy interfejsu użytkownika 139Brak informacji o tym, kto jest twórcą strony 141Elementy „O nas” nie przekazują dostatecznej

ilości informacji 141Wymyślone słowa 142Nieaktualna treść 142Niespójność w ramach tej samej strony 144Pochopne żądania o dane osobowe 144Powielone strony 145Osamotnione strony 145

Ocena losu wczesnych odkryć 145Więcej informacji 147

Page 5: Optymalizacja funkcjonalności serwisów internetowych

Spis treści 11

4 Nadawanie priorytetu problemom z funkcjonalnością 149Jak poważny jest problem? 150

Co czyni problemy poważnymi 151Ocenianie powagi problemu 151Funkcjonalność w szpitalu — przypadki krytyczne 154

Skala nieszczęścia 155Wskazówka — pierwsze prawo handlu elektronicznego 157

Dlaczego użytkownicy nie osiągają celu 158Pięć najważniejszych przyczyn tego,że użytkownicy nie osiągają celu 159

Czy wystarczy skupić się na największych problemach? 160

5 Wyszukiwanie 163

Stan wyszukiwania 164Wskazówka — jak rozpoznać, czy potrzebne

jest wyszukiwanie 164Trzy proste kroki do lepszego wyszukiwania 165

Jak powinno działać wyszukiwanie 166Trzy rzeczy, których użytkownicy

oczekują od wyszukiwarek 166Wskazówka — kiedy wyszukiwanie

nie jest wyszukiwaniem? 166

Interfejs wyszukiwania 168Wskazówka — nie staraj się być wyszukiwarką 169Długość pytania a szerokość pola wyszukiwarki 174Wskazówka dotycząca pola wyszukiwania

— musi być szerokie 174Zaawansowane wyszukiwanie 176

Strony z wynikami wyszukiwania 177Zalecenia dotyczące odnośników docelowych 177Wskazówka — konwencja datowania stron

z wynikami wyszukiwania 178Wskazówka — pomoc osobom mającym

kłopoty z pisownią 180Najlepszy strzał 180Cztery sposoby na tworzenie najlepszych strzałów 181Utrzymywanie najlepszych strzałów 182Sortowanie stron z wynikami wyszukiwania 183Nie znaleziono wyników 185Znaleziono jeden wynik 185

Optymalizacja pod kątem wyszukiwarek 186Sztuczki oszustów używane do pozycjonowania stron 187Nadawanie nazwy 189

Page 6: Optymalizacja funkcjonalności serwisów internetowych

Spis treści12

Wskazówka — piękno używania reklam tylko tekstowych 190Wskazówka — śledzenie wartości reklam

w wyszukiwarkach 191Lingwistyczne pozycjonowanie stron w wyszukiwarkach 191Najważniejsza wskazówka lingwistyczna

dotycząca pozycjonowania stron w wyszukiwarkach 191Wskazówka — nadużywanie słów kluczowych

przynosi odwrotny efekt 192Wskazówka — myśl frazami, nie słowami kluczowymi 193Architektoniczne pozycjonowanie stron w wyszukiwarkach 193Pozycjonowanie stron w wyszukiwarkach

na podstawie reputacji 195W jaki sposób wyszukiwarki określają reputację strony 195

6 Nawigacja i architektura informacji 197

Czy już osiągnąłem cel? 198

Dopasowanie struktury strony do oczekiwań użytkowników 199Zalecana lektura dotycząca architektury informacji 199Architektura informacji w intranecie 200

Nawigacja — musi być jednolita 204

Nawigacja — strzeż się mody 210Dzieciaki lubią grę w sapera 210

Ograniczanie nieładu oraz unikanie powtórzeń 215Nie dać się nabrać na duplikaty 215

Nazwy odnośników i etykiet — liczy się dokładność 218

Pionowo rozwijane menu — krótkie jest piękne 228

Menu wielopoziomowe — mniej oznacza więcej 228

Czy mogę to kliknąć? 231Przystępność 232

Bezpośredni dostęp ze strony głównej 236Więcej informacji 237

7 Typografia — czytelność i przejrzystość 239Wskazówka — minus imitacji tekstu 240Cztery najważniejsze wskazówki dotyczące kroju pisma 241

Tekst podstawowy — reguła dziesięciu punktów 247Wskazówka — unikanie antyaliasingu 248Wiek nie jest problemem 249Wskazówka — kiedy ten sam rozmiar wygląda na mniejszy 250Planowanie pod kątem różnic w sprzęcie 251Powszechne rozdzielczości ekranu 251Dostępność dotyczy nas wszystkich 252

Page 7: Optymalizacja funkcjonalności serwisów internetowych

Spis treści 13

Relatywne specyfikacje 253Reguła relatywnego rozmiaru 253Projektowanie z myślą o użytkownikach z wadami wzroku 253

Wybieranie czcionek 258W przypadku wątpliwości należy korzystać

z czcionki Verdana 259Kiedy z ekranu będzie można czytać

tak dobrze, jak z kartki? 260

Mieszanie czcionek i kolorów 261Wojna przeciwko wersalikom 264Kontrast między tekstem i tłem 266Powszechny daltonizm 271Dwa sposoby, by spowodować, że kolor będzie widoczny 271

Obrazki z tekstem 273

Poruszający się tekst 275Więcej informacji 275

8 Pisanie na potrzeby internetu 279

Jak słaby sposób pisania powodujeniepowodzenie strony internetowej 280

Zrozumieć, jak czytają użytkownicy sieci 284Wskazówka — zatrudnić pisarza specjalizującego się

w pisaniu na potrzeby sieci 284Dlaczego użytkownicy przeglądają 285

Pisać dla swoich czytelników 285Wskazówka — poznać swoich odbiorców 285Używać prostego języka 288Trzy wskazówki dotyczące lepszego pisania w sieci 288Wychodzenie naprzeciw niskim potrzebom literackim 291Stonować krzykliwe reklamy 291Wskazówka — kiedy i gdzie używać krzykliwego stylu 293Próbki pisania — przed i po 293Punkty podsumowujące i skracanie 295Wskazówka — test dwóch zdań 295Utrzymywanie tekstu w krótkiej i miłej formie 295Wskazówka — tworzenie opisowych etykiet 297

Jak formatować tekst, by był czytelny 301Szybka poprawa funkcjonalności 301Wyróżnianie słów kluczowych 301Używanie zwięzłych i opisowych tytułów oraz nagłówków 302Trzy wskazówki na temat hierarchii nagłówków 303Używanie list wypunktowanych i numerowanych 305

Page 8: Optymalizacja funkcjonalności serwisów internetowych

Spis treści14

Siedem najważniejszych wskazówekdotyczących list wypunktowanych 306

Wskazówka — podobne formułowanie jest ważne 307Używanie krótkich paragrafów 308Więcej informacji 308

9 Zapewnienie dobrej informacji o produkcie 311

Pokaż mi pieniądze 313Wskazówka — kiedy wyświetlać ceny 313Bez wymówek 316Wskazówka — ceny przybliżone są lepsze od żadnych 317Pokazywać dodatkowe opłaty 318

Wygrać zaufanie klientów 321Opisywanie produktu 321Zapewnienie rysunków i ilustracji produktów 324Jazda próbna strony motoryzacyjnej 324Pięć dużych błędów dotyczących obrazów produktów 325Warstwowe układanie stron produktów 330Pokazywanie wiarygodności 336

Wspierać zakupy oparte na porównywaniu 337Udoskonalanie i sortowanie 340

Wspierać zakupy towarów dobrej jakości 343Cztery powody stosowania artykułów informacyjnych 343Oni nie mają produktów, prawda? 344Więcej informacji 345

10 Prezentowanie elementów strony 347Kiedy reguła trzech kliknięć sieje spustoszenie 348

Czy powinno się projektować z myślą o przewijaniu? 348Cztery reguły przewijania 350

Instruowanie użytkowników. Krok po kroku 355Wskazówka — strzeż się magicznych numerów 355

Trzymać podobne elementy obok siebie 359Niedbałe formatowanie formularzy 364

Spełniać oczekiwania użytkowników 370Patrz na mnie! 370

Wykorzystanie pustej przestrzeni 373

Page 9: Optymalizacja funkcjonalności serwisów internetowych

Spis treści 15

11 Balansowanie między technologiąi potrzebami użytkowników 377

Powrót do roku 2000. Uwaga od Jakoba Nielsena 378

Używać materiałów multimedialnych,gdy są one właściwe dla naszych odbiorców 379

Pokonywanie barier związanych z materiałami multimedialnymi 385Uwzględnianie użytkowników o niskich

możliwościach technicznych 385Wskazówka — zapewnianie alternatywnej dostępności 385Strony dla dzieci — muszą być realne 386Projektowanie pod kątem prędkości łącza odbiorców 387Zapewnienie prostych i właściwych wskaźnikówładowania i statusu strony 387

Nie doceniać wiedzy technicznej własnych użytkowników 390Zwracanie uwagi na język 390Wykrywanie przepustowości łącza użytkowników 392

Przykleić się do znanych konwencjizwiązanych z interfejsami 394

Wskazówka — wyskakujące okienka zazwyczaj się mszczą 395Wskazówka — paski przewijania powinny

być elementami standardowymi 397

Unikać nadmiaru materiałów multimedialnych 401Wskazówka — media rozbudowane kontra skromne 401Zmniejszanie głośności 403Jak się to wyłącza? 403

Tworzenie materiałów wideo na potrzeby sieci 404Wskazówka — kiedy zrobić przerwę na reklamę 404

Praktykowanie prostoty 406Doskonalenie swojej strony — prędzej czy później? 409Trzy wskazówki — prostota, prostota i jeszcze raz prostota 410

W stronę jeszcze bardziej eleganckich projektów 416Więcej informacji 416

12 Podsumowanie — projekt, który spełnia swoje zadanie 419

Testowanie własnych przypuszczeń 421

Skorowidz 422

Page 10: Optymalizacja funkcjonalności serwisów internetowych

Nawigacjai architektura informacji

6

Chaotyczny projekt prowadzi do porażki

i zmarnowania wysiłków. Tworzone

w pośpiechu strony, które nie zawierają

skutecznych schematów informacji,

uniemożliwiają użytkownikom dotarcie

do poszukiwanych przez nich danych.

Kiedy do tego dojdzie, mogą się poddać

lub, co gorsza, przejść na inną stronę.

Dobrze zorganizowana struktura serwisu

dostarcza użytkownikom to, czego chcą,

wtedy, kiedy chcą. W rozdziale tym

przyjrzymy się niektórym najpopularniejszym

przeszkodom projektowym, które stoją

między użytkownikami i ich celami, oraz

dostarczymy wskazówek, jak przeszkód

tych unikać.

Page 11: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych198

Raz za razem z naszych badań wynika, że ludzie walczą o to, byzdobyć informacje, których potrzebują, przeklinając i narzeka-jąc przy tym przez cały czas. W rzeczywistości kłopoty z odna-lezieniem szukanych treści to największy problem zgłaszanyprzez naszych użytkowników testowych. Pomimo że wyszuki-wanie samo w sobie sprawiało najmniej problemów, czteryinne obszary, które zaliczamy do elementów umożliwiającychodnalezienie danych, powodowały znacznie większe problemy.

Te cztery elementy, do których zalicza się nawigację i menu, na-zwy kategorii, odnośniki oraz architekturę informacji, determi-nują łatwość, z jaką można odnaleźć rzeczy, poruszając się poserwisie, zamiast od razu udawać się do wyszukiwarki. (Wieleosób traktuje nazwy kategorii jako problem zależny od archi-tektury informacji ze względu na to, że nazywanie często idziew parze ze strukturyzowaniem. Jednak biorąc pod uwagę fakt,iż angażują one różne decyzje projektowe, wydaje nam się, żewarto rozważyć je osobno).

Czy już osiągnąłem cel?Słabo zaprojektowane strony internetowe czynią więcej zła niżtylko spowalnianie pracy użytkowników — mogą ich zniechę-cić do korzystania z danego serwisu. Kiedy ktoś nie może zna-leźć tego, czego szuka, często zakłada, że informacja nie jest do-stępna. Pod wpływem frustracji może udać się gdzie indziej.

Systematycznie zorganizowany projekt gwarantuje, że ludzieodnajdują informacje przy mniejszym nakładzie sił dzięki czy-telnie reprezentowanym etykietom, układowi strony i relacjommiędzy poszczególnymi stronami serwisu. Dobry projekt nawi-gacji pokazuje użytkownikom, gdzie są, gdzie znajdują się po-szczególne rzeczy i jak metodycznie dotrzeć do tego, czego po-trzebują. Właściwie wykonana architektura informacji dajeużytkownikom poczucie wygody i pewności, że mogą wrócićna wcześniej odwiedzane strony.

Jednym z największych komplementów, jaki strona może uzy-skać, jest brak komentarzy użytkowników, dotyczących jejstruktury. Na dobrze zorganizowanych stronach mogą oni poru-szać się swobodnie, koncentrując się jedynie na zadaniu, a niena strukturze strony. Myślenie i analizowanie struktury serwisuto zadanie dla jego projektanta, a nie użytkownika.

Jednym z największychkomplementów, jaki stronamoże uzyskać, jest brakkomentarzy użytkowników,dotyczących jej struktury.Myślenie i analizowaniestruktury serwisu tozadanie dla jegoprojektanta, a nieużytkownika.

Page 12: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 199

Dopasowanie struktury stronydo oczekiwań użytkownikówNajbardziej efektywnymi stronami w kierowaniu użytkowni-ków do właściwej lokalizacji są te, które spełniają ich oczeki-wania. Wiemy, że użytkownicy nie będą marnować czasu na za-pamiętywanie lub uczenie się sposobu nawigacji po różnychserwisach. Warto więc zaangażować odpowiednie środki, abyzaprojektować najlepszą architekturę informacji strony, którazagwarantuje klientom odpowiedzi, jakich potrzebują w miej-scach, gdzie się ich spodziewają. Im bardziej naturalna wydajesię ta architektura, tym większe prawdopodobieństwo, że użyt-kownicy wrócą na taką stronę.

Ludzie nie lubią przeciskać się przez gąszcz dwuznacznych od-nośników do treści. Oczekują, że strona internetowa posiadatak zorganizowaną zawartość, że jest ona klarowna dla nich.Należy więc korzystać z takiej struktury nawigacyjnej, któraodzwierciedla ich pogląd na stronę i oferowane przez nią infor-macje oraz usługi. Nie wolno zapominać, że podmiotem są„oni”, a nie „my”.

Każdy może myśleć, że struktura jego strony jest zorganizowanaw sposób intuicyjny. Jednym z największych popełnianychprzez firmy błędów jest używanie schematów, które są intuicyj-ne dla nich. Przykładem może być pogrupowanie produktówwzględem marek lub takie tworzenie treści serwisu, by odzwier-ciedlała strukturę organizacji. W efekcie uzyskuje się witryny,które są całkowicie logiczne dla ich twórców, ale zupełnie nie-zrozumiałe dla odwiedzających.

Dlaczego? Dlatego że to, w jaki sposób my i nasza firma doko-namy strukturyzacji informacji, może różnić się diametralnieod tego, jak wyobrażają to sobie użytkownicy. Jeżeli na przy-kład handlujemy latarkami, lepiej jest je zorganizować wedługatrybutów oczekiwanych przez użytkowników, na przykładwedług rozmiaru, a nie nazw marek, takich jak Xeon. ChociażXeon może być ogólnie znaną linią produktów dla osób z na-szej firmy, to jednocześnie może być zupełnie obcy naszymklientom.

Próba zaprojektowania struktury strony bez wkładu wniesione-go przez jej użytkowników jest olbrzymim błędem, który możekosztować tysiące, a nawet miliony dolarów. Nieważne, jak do-brze i nowocześnie wygląda strona, gdyż jest bezużyteczna, je-śli grupa docelowa klientów uzna ją za bezsensowną. Projekto-wać należy dla wygody ich, nie naszej.

Jeśli ktoś jest zainteresowanypoznaniem metod planowaniai strukturyzowania zawartościstron internetowych,to polecamy publikacjęArchitektura informacjiw serwisach internetowychnapisaną przez LouisaRosenfelda oraz PeteraMorville’a (wydawnictwoHelion, 2003). Czasemzwana jest ona „książkąniedźwiedzia polarnego”ze względu na obrazekprzedstawiający dużegoniedźwiedzia polarnego,umieszczony na okładce.Jest to klasyka architekturyinformacji. Ktoś, kto chcezaoszczędzić pieniądze,może za darmo pobraćz internetu pierwsze wydanie,które zawiera więcejużytecznych informacjiniż niejedna nowa publikacjana rynku. Jednakże kupnonajnowszego wydania toinwestycja warta swojej ceny.

Zalecana lekturadotycząca architekturyinformacji

Próba zaprojektowaniastruktury strony bezwkładu wniesionego przezjej użytkowników jestolbrzymim błędem, którymoże kosztować tysiące,a nawet miliony dolarów.Projektować należy dlawygody ich, nie naszej.

Page 13: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych200

W jaki sposób strona powinna zostać zorganizowana? Mimo żezalecamy, by struktura projektu odwzorowywała sposób myśle-nia i cele użytkowników, nie jesteśmy w stanie dostarczyć jed-nej, uniwersalnej odpowiedzi na to pytanie. To, czego ludziepotrzebują, jest zmienne i zależy od rodzaju strony, tak więcoptymalna architektura informacji dla każdej strony wynikaz unikatowych zamiarów i celów zarówno organizacji, jak i jejklientów. Tematyka poświęcona tworzeniu funkcjonalnychstruktur architektury nie tylko może, ale i wypełnia całe książki.Poruszamy ją w tej publikacji po to, by zaznaczyć, jak duże maznaczenie. Jeżeli użytkownicy będą w stanie robić na stronie to,co chcą, będziemy czerpać z tego korzyści.

Zalecenie, by unikać odwzorowywania na stronie strukturyfirmy, dotyczy jedynie stron internetowych przeznaczonychdla użytkowników zewnętrznych. Gdy projektuje się serwisdla pracowników, obowiązują inne reguły.

Personel firmy zazwyczaj wie, w jaki sposób jest onazorganizowana. Ponadto wiele zadań realizowanych przezczłonków załogi powiązanych jest w jakiś sposób ze strukturąprzedsiębiorstwa. Bardzo często pracownicy muszą przeglądaćschematy organizacyjne firmy, aby zobaczyć, kto jest szefemjakiegoś departamentu lub w jaki sposób różne departamentysą ze sobą powiązane.

Dobrym pomysłem jest posiadanie w intranecie wyraźnejreprezentacji struktury firmy. Niemniej jednak, nawetw przypadku intranetu, nie jest dobrze by budować architekturęinformacji opierając się na schemacie organizacyjnymprzedsiębiorstwa. Większość z najlepszych stron intranetowych,jakie mieliśmy okazję studiować, używa organizacji pracy,sposobu przepływu zadań oraz najczęstszych czynnościpracowników jako podstawy do budowy własnej architekturyinformacji.

Architektura informacji w intranecie

(Na sąsiedniej stronie u góry)Ta strona zbytnio koncentruje sięna marce. Osoby nieznającemarek muszą kliknąć każdąz trzech dostępnych opcji— Mizerak, Murrey oraz Mosconi— aby zobaczyć, który ze stołówbilardowych najlepiej pasuje doich potrzeb. To strata ich czasu.Ponadto opisy marketingowekażdej z marek nie dostarczająinformacji, które byłybypomocne w ustaleniu, jaki modeljest potrzebny danej osobie.

(Na sąsiedniej stronie na dole)Mimo że strona firmy Escaladedostarcza informacji o różnychtypach i stylach wyposażenia,użytkownicy ją przegapiają,gdyż duże znaki towarowezaciemniają odnośniki do tychdanych:

„Według mnie to było trudne.Zaraz po tym, jak dotarłem doproducenta, droga się skończyła.Nie można było przeglądaćindywidualnych produktów…Nie podobało mi się to”.

„Każda indywidualna etykietaproduktu sprzedaje firmę,zamiast produkt”.

„Nie mogę tego znaleźć.Wolałbym przejść na inną stronęalbo skorzystać z wyszukiwarkiGoogle”.

Page 14: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 201

www.escaladesports.com

www.escaladesports.com

Page 15: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych202

www.blackmountainbicycles.com

Pokazana na rysunku strona próbuje spełnić oczekiwania szerokiejgrupy odbiorców poprzez pogrupowanie rowerów zarówno względemmarki, jak i typu. Te z osób, które są zaznajomione z markami,mogą dotrzeć do nich dzięki odpowiednim nazwom, a ci, którzyprzeszukują zasoby pod kątem funkcji lub innych cech, mogąwyszukiwać według typu roweru. Niestety firma nie zadbała,by ta druga opcja była łatwo dostępna. Użytkownicy musząnajpierw wybrać markę, zanim zaoferuje się im przeszukiwanieproduktów według takich cech, jak typ i cena.

(Na sąsiedniej stronie u góry) Właściwa kategoryzacja.Osoby korzystające ze strony miasta San Diego w czasie naszychtestów nie miały nic przeciwko ogromnej liczbie odnośnikówumieszczonych na stronie głównej, gdyż odnośniki te sązorganizowane i opisane krótkimi, jasnymi nagłówkami. Ludziepreferują krótkie, zwięzłe odnośniki niż długie, szczegółowe opisy.Warto zwrócić uwagę, że podkategorie pozwalają określić większekategorie poprzez dostarczenie informacji o tym, co można znaleźćw każdej z nich. Na przykład nie zawsze jest oczywiste, co będzieobejmowała kategoria taka jak Community (społeczność), przez cozazwyczaj odradzalibyśmy jej stosowanie. Jednakże na omawianejstronie jest jasne, co znajduje się wewnątrz, ponieważ sześćdostarczonych podkategorii to opisuje. Niemniej jednak niniejszastrona dodatkowo używa ogólnych podkategorii more (więcej),co według nas nie jest właściwe, bo nie zapewniająsamoczynnego objaśnienia.

Page 16: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 203

www.sandiego.gov

www.cummins.com

Niewłaściwa kategoryzacja. Użytkownicy,którzy przetestowali tę stronę, oczekiwali,że informacje dotyczące technologii ogniwpaliwowych znajdą w menu Products (produkty),a nie w Who We Are (kim jesteśmy), gdzieznajduje się to na ostatniej pozycji. Ten błądw sposobie zorganizowania powodował,że ludzie trudzili się lub uznawali, że informacjata nie została w ogóle zamieszczona:

„Teraz się zgubiłem… Nie mam żadnej pomocy.I nie czuję, bym miał do dyspozycji jakiekolwiekopcje. Muszę przeglądać całą stronę. Niełatwojest znaleźć te informacje w górnych kolumnach(elementach globalnej nawigacji)”.

„Szukam kategorii dotyczącej ogniw paliwowych.Nie widzę jej w pozycji Products”.

„To zajęło zbyt dużo czasu!”.

Page 17: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych204

Nawigacja — musi być jednolitaKonsekwencja to podstawowe założenie nawigacji. Utrzymaniejednolitej struktury nawigacji pomaga ludziom wizualizowaćich bieżącą lokalizację oraz opcje i zminimalizować zgadywa-nie. Elementy nawigacyjne pełnią funkcję szczebli, które umoż-liwiają ludziom przejście z jednego obszaru na drugi.

Zmiana sposobu nawigacji to jak usuwanie tychże szczebliw momencie, kiedy użytkownicy wciąż są „w powietrzu”. Kiedywylądują, to w miejscu, którego się nie spodziewali. Nawigacja,która wcześniej znajdowała się z lewej strony, teraz może byćpośrodku, a kategorie uległy zmianie. Przycisk Wstecz nie działai nie ma łatwej drogi, aby wrócić na wcześniejsze strony.

W momencie, gdy nawigacja ulega diametralnej zmianie przyprzejściu z jednej strony na drugą, użytkownicy muszą prze-nieść swą uwagę z używania strony na rozeznanie, jak działanawigacja. Serwisy, które nie są wyposażone w jednolitą nawi-gację, powodują, że użytkownik czuje się niepewnie.

Duże serwisy internetowe, które zawierają wiele podstron lubprzejmują wiele witryn, cechują się tym, że regularnie popeł-niają wspomniany błąd. Każda z podrzędnych witryn jest stwo-rzona zazwyczaj przez inną grupę osób oraz ma swoją własnąorganizację, wygląd i postrzeganie. Jeżeli takie witryny połączo-ne są ze sobą na chybił trafił, odczucia użytkowników sąokropne. Często muszą oni wielokrotnie żądać tego samego, po-nieważ każda ze stron działa niezależnie. Na przykład serwisykorporacyjne są rozłączone, gdy sekcje dla inwestorów, prasyoraz produktów posiadają własny schemat nawigacji i na doda-tek wyglądają zupełnie inaczej.

Dobrze zorganizowana nawigacja jest przewidywalna, dziękiczemu użytkownicy czują się komfortowo podczas przegląda-nia strony. Nie wymaga od nich nauki lub zapamiętywania cze-gokolwiek, gdyż oddaje ich wyobrażenia o tym, jak informacjapowinna być reprezentowana w internecie. Jest sensowna, upo-rządkowana i nie cechuje ją żadna lub prawie żadna dwuznacz-ność. Użytkownicy mogą przechodzić na kolejne strony, cofaćsię, eksplorować stronę i czuć pewność, że to, co robią, nie spo-woduje, iż zgubią drogę.

W momencie, gdynawigacja ulegadiametralnej zmianie przyprzejściu z jednej stronyna drugą, użytkownicymuszą przenieść swąuwagę z używania stronyna rozeznanie, jak działanawigacja. Serwisy, którenie są wyposażonew jednolitą nawigację,powodują, że użytkownikczuje się niepewnie.

Page 18: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 205

Prosty w formie, globalny obszar nawigacji w górnej części witrynywytwórni Pixar pozostaje widoczny i jednolity na wszystkichstronach. Gdziekolwiek by był użytkownik, wie, gdzie szukaćróżnych opcji nawigacyjnych. Nasi testerzy czuli się na tej stroniepewnie i mieli pewność, że zawsze mogą wrócić do miejsca,z którego rozpoczęli:

„Wszystko jest po prostu wyświetlone na górze. Nie trzeba sięrozglądać wokół. Ustawienie i rozłożenie było bardzo dobre,gdyż oczy nie muszą wędrować po całym ekranie”.

„Cokolwiek się klika, wydaje się, że jest wzajemnie ze sobąpowiązane. Strona sprawia wrażenie łatwej w obsłudze”.

www.pixar.com

Page 19: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych206

www.ssa.gov

Page 20: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 207

www.ssa.gov

Kiedy odwiedzający tę stronę klikną Learn About Factors thatAffect Your Retirement Benefis (dowiedz się więcej o czynnikach,które mają wpływ na twoją emeryturę), opcje wyboru z poprzedniegoekranu znikną i zostaną zastąpione przez inne, choć związanez poprzednimi. To było przyczyną zamętu wśród naszychużytkowników, którzy brali udział w teście. Na przykład nie mielipewności, czy Calculate My Benefits (oblicz moje zyski) znaczyto samo co Benefits Calculators (kalkulatory zysków). Cały ciężarokreślenia tego, czy odnośniki kryją za sobą taką samą, czy nowąinformację, spoczywa na użytkownikach, którzy muszą usiąśći klikając przejrzeć wszystkie strony.

(Na sąsiedniej stronie) Częściowopokrywające się obszary treści i niespójnanawigacja na stronie U.S. Social Security(amerykański urząd ds. socjalnych) są powodembłędów. Wybieranie różnych, choć brzmiącychpodobnie, ścieżek wywołuje różne rezultaty. Naprzykład odszukanie swojego wiekuemerytalnego jest łatwe, gdy na stronie głównejwybierze się opcję Plan Your Retirement (zaplanujswoją emeryturę). Niemniej jednak, gdy ktośwybierze inną drogę i kliknie Retirement Planner(planista emerytury), trudniej będzie mu znaleźćgranicę wieku emerytalnego. Odnośnik Find myretirement age (znajdź mój wiek emerytalny)dostępny jest w pierwszej z przytoczonych opcji,ale nie w drugiej, mimo że obie wyglądają jakmiejsca, w których można planować swoją

emeryturę. Porównajmy oba ekrany i zwróćmyuwagę na częściowo pokrywające się możliwościwyboru. Tak nieuporządkowana architekturainformacji powoduje, że ludzie zapominają, cokliknęli i jakie mają jeszcze możliwości wyboru, coprowadzi do następujących komentarzy:

„Wydawało mi się, że odnalezienie granicy wiekuemerytalnego to coś łatwego, ale nie udało mi sięjej zlokalizować. Poczułem się głupio”.

„Serwis mógłby być bardziej przyjazny dlaużytkownika. Musi myśleć, jakby był nowymużytkownikiem”.

Page 21: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych208

www.bathandbodyworks.com

Tematy pod głównymi kategoriami na tej stronie rozszerzają sięi kurczą w zależności od tego, która z nich została wybrana przezużytkownika. Każdy z trzech dostępnych paneli posiada inny tytułoraz styl nawigacji. Te ekstremalne zmiany w systemie nawigacjidezorientowały naszych użytkowników:

„Gubię się. Nie wiem, gdzie byłem w danym momencie”.

„Strona ma trzy paski. Łatwiej byłoby, gdyby istniała jedna stronagłówna zamiast konieczności klikania w trzy miejsca, by dotrzećdo większej ilości informacji”.

„To frustrujące, bo nie można odnaleźć tego, czego się szuka”.

„Nie pamiętam nawet, gdzie kliknąłem. Gdzie ja w ogóle jestem?”.

„To, gdzie znajdują się poszczególne rzeczy, nie było oczywiste.Trzeba było wyszukiwać i walczyć o informację bardziej niż nainnych stronach”.

(Na sąsiedniej stronie) Niespójny schematnawigacji na stronach firmy Nestlé spowodował,że nasi użytkownicy mieli trudności, by odnaleźćswoją drogę. Globalna nawigacja ulega zmianiew różnych sekcjach witryny. Na przykładnawigacja główna na stronie All About Nestlé(wszystko o Nestlé) pojawia się u góry i z boku.Ale już na stronie Nutrition (odżywianie) znajduje

się jedynie na górze, lecz rozdzielona na dwapoziomy. Oto opinie użytkowników o tej stronie:

„Nie jest to strona, na którą wrócę, gdyż nawigacjana niej jest dziwna i trudna. Podoba mi się innystyl witryny, szczególnie boczny panel, w którymmożna oglądać różne rzeczy. Tutaj znajduje siękilka górnych pasków i inne rzeczy mają miejscena każdym z nich. Trzeba być wszędzie”.

Page 22: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 209

www.nestle.com

„Na stronie nie mogę znaleźć tego, po coprzyszedłem. Jeżeli szukałbym przekąski,opuściłbym witrynę, bo nie widzę jej tu”.

„Zmarnowałem dużo czasu, szukając tego,czego potrzebowałem”.

„Jest tu tak dużo informacji. Ukończenie zadaniazajęło mi nieco więcej czasu, niż pierwotnieprzypuszczałem. Można ulec dezorientacji,próbując znaleźć kilka prostych rzeczy”.

Page 23: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych210

Nawigacja — strzeż się modyNawigacja to droga do celu, jej jedyną funkcją jest dać szybkoludziom to, czego szukają. Im bardziej będzie efektywna, tymwiększe prawdopodobieństwo, że użytkownicy pozostaną zain-teresowani stroną.

Główne tematy powinny być niezmienne i pojawiać się jedno-cześnie, dzięki czemu odwiedzający mogą łatwo i szybko jeprzejrzeć. Czekanie, aż nawigacja się załaduje lub zmieni, to dlanich strata czasu. Jakakolwiek forma nawigacji dynamicznejkoniecznie musi być łatwa w używaniu. Elementy menu, któresą zbyt czułe i zmieniają się przy najmniejszym poruszeniu my-szy, mogą być bardziej nieporęczne niż przydatne. A dodatkowopogrzebią szansę zrobienia interesu z osobami starszymi, nie-pełnosprawnymi i nowymi użytkownikami sieci.

Ludzie nie szukają gry w chowanego, więc nie wolno ukrywaćprzed nimi elementów menu nawigacyjnego. Pogoń za celemdo kliknięcia lub konieczność poruszania kursorem po całymekranie po to, by znaleźć coś do kliknięcia („gra w sapera”), niejest czymś, co sprawia radość. Jeszcze więcej trudności sprawiosobom z ograniczoną sprawnością ruchową lub upośledzonąręką, dla których kontrolowanie myszy to duże wyzwanie. Każ-dy dużo szybciej używa opcji, jeżeli są łatwo zauważalne.

Podsumowując: należy unikać miłych i wymyślnych systemównawigacji. Ludzie nimi gardzą. Warto więc oszczędzać kreatyw-ność i wykorzystywać ją w miejscach, na których użytkowni-kom naprawdę zależy.

Należy unikać miłychi wymyślnych systemównawigacji. Ludzie nimigardzą. Warto więcoszczędzać kreatywnośći wykorzystywać jąw miejscach,na których użytkownikomnaprawdę zależy.

Z naszych badań wynika, że dzieci w wiekuod 6 do 12 roku życia lubią „grę w sapera”,tak więc jest to jedyny przypadek, w którymrozmieszczanie elementów nawigacyjnych pocałym ekranie jest uzasadnione. Dzieci częstotraktują środowisko internetu jak grę i doceniająmożliwość odkrywania go i jego sekretów. Coważne, nie mają nic przeciw przemieszczaniukursora myszy po całym dobrze przygotowanymrysunku, aby zobaczyć, co się znajduje pod nim.

Jednakże gdy wchodzą w wiek dorastania,tracą już swoje zainteresowanie tego typuformą nawigacji. Nastolatki cechują się dużą

Dzieciaki lubią grę w sapera

niecierpliwością i oczekują szybkich rezultatówpodczas swojej pracy ze stronami internetowymi.

Ogólnie mówiąc, wskazówki dotyczącefunkcjonalności, które odnoszą się do osóbw wieku kilkunastu lat, różnią się nieco od tychprzeznaczonych dla dorosłych, a te dla dzieciróżnią się diametralnie. Oczywiście, można znaleźćwiele podobieństw, ale jeśli grupą odbiorcówmają być najmłodsi użytkownicy, zalecamyprzeprowadzenie osobnych badań funkcjonalnościz użyciem grupy osób właśnie w tym młodymwieku. Jeżeli nie jest zaznaczone inaczej, wszystkiereguły opisane w tej książce dotyczą dorosłych.

Page 24: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 211

Menu główne na tej stronie przemieszcza się automatyczniew poprzek strony w sposób wolny i jednostajny. Jeżeli ktoś chcena przykład dokonać rezerwacji, musi poczekać, aż właściwapozycja się pojawi. Można przyspieszyć ten proces, przesuwającwskaźnik myszy na jedną z dwóch strzałek, ale kto tak naprawdęchce sobie tym zawracać głowę? Strony internetowe powinnyosiągać elegancki wygląd, ale nie kosztem czasu użytkowników.

www.wynnlasvegas.com

Page 25: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych212

Stary projekt. Nasi użytkownicy byli sfrustrowani faktem, żeoferowane produkty zmieniały swoje położenie wraz z tym, jak onizmieniali położenie myszy na ekranie. Niektórzy z nich nie mielipojęcia o tym, że to oni kontrolują ten ruch! Ogólnie rzecz ujmując,użytkownicy nie byli zadowoleni, że muszą manewrować mysząwokół poza jeden obszar, by zdobyć informacje. Niektórzy z nichnie mieli dość cierpliwości, by dotrzeć w taki sposób do produktów,i mówili, że w normalnych okolicznościach by się poddali:

„Produkt przemieszcza się zbyt mocno. Kiedy próbujesz najechaćna dany element, on zmienia swoje położenie. To sprawia,że czujesz się zdezorientowany. Nie podoba mi się to”.

„Frustrujące jest to, że produkt ucieka, kiedy próbujesz siędo niego zbliżyć”.

www.bathandbodyworks.com

Page 26: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 213

www.bathandbodyworks.com

Nowy projekt. Firma Bath & Body Works przeprojektowała swójserwis, wyeliminowała kilka problemów z funkcjonalnościąznalezionych przez nas podczas testów, dzięki czemu jest onlepszy. Strony statyczne zastąpiły wymyślny dynamiczny modelinteraktywny. Ludzie nie muszą więc dłużej przemieszczaćwskaźnika myszy nad różne rysunki, by otrzymać opis produktu.

Zamieściliśmy zrzuty ekranu pokazujące poprzedni projekt,ponieważ jego skazy wciąż można zauważyć na innych stronach.Każdy, podobnie jak firma Bath & Body Works, może odrobićswoją lekcję i zmienić je. I w przeciwieństwie do nich być możeobejdzie się bez utraty części klientów!

Page 27: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych214

www.dimewill.com

www.atlantis.com

Page 28: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 215

Ograniczanie nieładuoraz unikanie powtórzeńNie należy umieszczać wielu obszarów nawigacji dla tego sa-mego typu odnośników. Zduplikowane lub trudne do rozróż-nienia kategorie powodują, że użytkownicy muszą włożyć spo-ro wysiłku, by zachować kolejność. Muszą oni angażować czasw to, by znaleźć różnice w podobnie brzmiących nazwach. Cowięcej, przedobrzenie z liczbą odnośników poprzez rozmiesz-czenie tych samych elementów w wielu miejscach stronyzmniejszy prawdopodobieństwo tego, że użytkownicy je za-uważą. Prawda jest taka, że im mniej obiektów na stronie, tymwiększa szansa, że zostaną one zauważone. Jeśli w serwisieumieści się zbyt wiele rywalizujących ze sobą elementów, każdyz nich straci na ważności.

Najlepiej jest jasno określić pewną cechę w jednym miejscu.Ograniczenie powtórzeń minimalizuje nieład, przez co łatwiejjest znaleźć pożądane informacje.

(Na sąsiedniej stronie u góry)Ukryte etykiety nawigacyjnezbijały użytkowników z tropu.Na stronie na przykład nie widać,by można było w cokolwiekkliknąć, dopóki użytkownicynie przesuną swoich wskaźnikówna pokazujące się etykietytekstowe. Niektóre z osóbbiorących udział w teście niezdawały sobie z tego sprawyi zastanawiały się, co właściwiemają zrobić na tej stronie.Ludzie preferują widoczne opcjewyboru, dzięki czemu mogą jeprzejrzeć za jednym zamachem.

(Na sąsiedniej stronie na dole)Panel nawigacyjny tego serwisupojawia się jedynie wówczas,gdy użytkownicy przemieszcząwskaźnik myszy na graficznyfragment umieszczony naśrodku. Nasi testerzy wzdragalisię na samą myśl, że będąmusieli wywołać menu zakażdym razem, gdy będągo potrzebować.

Klienci często mówią nam, że chcielibyzatrzymać powielone odnośniki zarównona swoich stronach głównych, jak i w innychmiejscach, gdyż każdy odnośnik generujeznaczący ruch. Czasami pokazują nam statystkimówiące, że ruch do strony rośnie, gdyodnośniki na niej są zduplikowane.

Chociaż dane takie mogą wydawać się nie dopodważenia, w rzeczywistości wprowadzająw błąd. Oczywiście, każdy z tych odnośnikówotrzymuje kliknięcia, ale to wcale nie znaczy,że jeśli odnośnik nie byłby powielony, toużytkownicy nie odnaleźliby szukanego celu.Powiedzmy, że te same odnośniki znajdują sięna górze i dole witryny. Użytkownicy częstorozważają kliknięcie górnego odnośnika, alepostanawiają przed tym sprawdzić, co znajdujesię w niższej części witryny. Kiedy dojdą na samdół witryny, mogą kliknąć w znajdujący siętam odnośnik, ale gdyby go tam nie było,przewinęliby stronę do góry i kliknęli w odnośnikznajdujący się u góry.

Nie dać się nabrać na duplikaty

Prawdą jest to, że duplikowanie odnośnikówmoże zwiększyć ogólny ruch do elementudocelowego, ale dzieje się tak dlatego, że dającodnośnikowi więcej miejsca, bardziej promujesię dany element niż pozostałe. Uczynienietakiego odnośnika większym lub umieszczeniego w bardziej widocznym miejscu przyniosłobydokładnie taki sam skutek bez jednoczesnegowywoływania dezorientacji. Co więcej, kiedypromuje się jeden z elementów, skutkuje tomniejszym ruchem do pozostałych. Każdyużytkownik ma stały zakres uwagi, jakąpoświęca stronom internetowym, i jeżeli więcejuwagi przyciągniemy do jednego z elementów,ucierpią na tym pozostałe.

Tak więc powielane odnośniki wywołują więcejszkody niż pożytku. Jeżeli nawet zwiększy sięruch do określonej witryny, ucierpieć mogąpozostałe strony ze względu na to, żeużytkownicy ulegli dezorientacji i nie mogliznaleźć tego, czego szukali.

Page 29: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych216

www.usps.com

www.sandiego.gov

Page 30: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 217

www.escaladesports.com

Strona firmy Escalade Sports oferuje podwójny sposób nawigacji— za pomocą listy odnośników tekstowych oraz grafiki (z wybieraniemza pomocą pokrętła). Większość naszych użytkowników wybierałometodę tekstową, ponieważ odnośniki były łatwiejsze doprzeglądania. Pozostali w ostateczności sięgali do narzędziagraficznego, ale byli zawiedzeni, gdy odkrywali, że obie metodyprowadzą do tych samych informacji. Co za strata czasu!

(Na sąsiedniej stronie u góry) Zduplikowane odnośnikiniepotrzebnie skomplikowały strony United States Postal Service(Urząd pocztowy Stanów Zjednoczonych). Opcje dostępnew środkowej części witryny są takie same jak te dostępne u góry.

(Na sąsiedniej stronie na dole) Strona San Diego w górnejczęści powtarza zakładki, które dostępne są w głównym obszarzetreści. Lepiej byłoby pokazać nawigację w jednym, oczywistymmiejscu, i zarezerwować pozostałą przestrzeń na jakąś ważnątreść lub pozostawić ją pustą.

Page 31: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych218

Nazwy odnośników i etykiet— liczy się dokładnośćNależy upewnić się, że odwiedzający mogą łatwo zrozumiećetykiety nawigacyjne. Kiedy osoba nawiguje pomiędzy strona-mi zazwyczaj ignoruje duże bloki z treścią i celuje w odnośniki,by ustalić znaczenie strony. Żeby maksymalizować przejrzy-stość, nazwy odnośników powinny być możliwie krótkie i jed-noznaczne. Mądrze sformułowane słowa lub nazwy kategorii sąproblematyczne, gdyż ludzie ich nie rozumieją. Jeżeli na stroniemuszą znaleźć się pomysłowe nazwy, zawsze trzeba wyjaśnićich znaczenie, gdyż użytkownicy mają tendencję do niezwraca-nia uwagi na słowa, które nie mają dla nich sensu.

Warto zawężać swoje odnośniki, rozpoczynając ich nazwę odsłowa kluczowego lub informacyjnego. Należy usunąć zbędnewyrazy, takie jak powtarzająca się w każdym odnośniku nazwafirmy. Taka forma reklamy niepotrzebnie komplikuje interfejs.Odnośniki, które rozpoczynają się od identycznych lub powta-rzalnych słów, zmuszają ludzi do uważnego czytania całej ichnazwy po to, by mogli wychwycić różnice.

Należy unikać również w nazwach odnośników instrukcji ogól-nych, takich jak Kliknij tu. Zamiast tego lepiej jest pomagaćużytkownikom łatwo rozróżnić odnośniki poprzez nadawanieim bardziej informujących nazw. Zamiast nazywać odnośnik naprzykład Więcej, lepiej jest powiedzieć użytkownikom, czegowięcej otrzymają po jego kliknięciu.

Należy pomagaćużytkownikom łatworozróżnić odnośnikipoprzez nadawanie imbardziej informującychnazw. Zamiast nazywaćodnośnik na przykładWięcej, lepiej jestpowiedzieć użytkownikom,co więcej otrzymająpo jego kliknięciu.

(Na sąsiedniej stronie u góry) Stary projekt. Małoprecyzyjne słowa oraz etykiety kategorii w stylu discover(odkryj), learn (poznaj) lub live (żyj) irytowały naszych testerów.Niektórzy zastanawiali się, co oznacza „live: with our products”(„żyj: z naszymi produktami”). Hasło to, nawet z opisem, jestwyświechtane i nieczytelne. Hasło w stylu „jak zdrowo żyć”dostarczyłoby znacznie więcej użytecznej informacji.Chwytliwe hasła są bezużyteczne, jeśli nie pozwalająużytkownikom przewidzieć, co się pod nimi kryje:„Tytuły nie są tak naprawdę tym, co sądziłem. Na przykład Head toToe Solutions (rozwiązania od głowy do palców) powinno w moimmniemaniu dotyczyć mycia ciała, lub czegoś w tym rodzaju”.

„Uważam, że ciężko jest to zrobić. Na stronie nie ma dostatecznejliczby kategorii, aby szybko odnaleźć to, czego się szuka”.

(Na sąsiedniej stronie na dole) Nowy projekt. Po zakończeniuprzez nas testu, o którym mówiliśmy przy okazji poprzedniegorysunku, firma Bath & Body Works przebudowała swoją stronę.Teraz strona domowa zamiast mało zrozumiałych nazw kategoriitakich jak learn (poznaj) lub live (żyj) posiada nazwy dużo bardziejbezpośrednie, takie jak Face (twarz), Hair (włosy) oraz Articles& Advice (artykułu i porady). Dobry ruch.

Page 32: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 219

www.bathandbodyworks.com

www.bathandbodyworks.com

Page 33: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych220

www.bathandbodyworks.com

Firma Bath & Body Works nie może przestać. W czasie, kiedykończyliśmy pisać ten rozdział, firma wypuściła kolejną wersjęprojektu strony, tym razem z jeszcze bardziej opisowymi etykietamielementów nawigacyjnych. Chociaż uważamy, że wygląd opisówbyłby zbyt nieokreślony dla większości witryn, w tym przypadkuwydaje nam się, że jest akceptowalny. Dodatkowo, nowa i bardziejwyrazista etykieta Facial Skincare (pielęgnacja skóry twarzy) niesiewięcej informacji, przez co działa lepiej, kierując użytkownikówdo produktów, które chcą kupić.

Page 34: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 221

Stara strona główna. Brytyjskie ministerstwo ds. podatków i cełna swojej stronie głównej umieszcza informacje o zwrocie podatkuVAT i inne ważne dla podróżujących dane, które znajdują sięza opisowymi odnośnikami, takimi jak Your customs allowance(dozwolone wwożenie dóbr) oraz VAT refunds for visitors (zwrotypodatku VAT dla turystów). Odnośniki te dokładnie informująo tym, co zawierają. Witryna w sprytny sposób umieszczanajczęściej używane odnośniki w centralnym obszarze strony,z dala od innych rozpraszających uwagę elementów.

www.hmce.gov.uk

Page 35: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych222

Nowa strona główna. Niestety, przeprojektowany wygląd stronygłównej definitywnie obniża jej funkcjonalność, gdyż nagłówki,odnośniki i nawigacja nie mówią dokładnie, co tak naprawdęoznaczają. Czym na przykład są eVAT Services (usługi eVAT)?Gdzie ma kliknąć turysta, który przyjechał do Wielkiej Brytanii nawakacje i chce dowiedzieć się, jak może otrzymać zwrot swojegopodatku VAT? Na stronie można znaleźć wiele miejsc, gdziewidnieje skrótowiec VAT, ale które z nich jest najlepsze w danymprzypadku? Na poprzedniej stronie istniał odnośnik VAT refundsfor visitors (zwroty podatku VAT dla turystów), ale już go nie ma.Złe posunięcie.

Ogólnie rzecz ujmując, jeżeli zaczynamy posługiwać się nazwami,które rozpoczynają się od „e” lub „internet”, powinna włączyć sięlampka ostrzegawcza. Użytkownicy wchodzący na stronę wiedzą,że są w trybie online, i nie ma potrzeby zwracać im na to większejuwagi poprzez sztuczne „zelektronizowanie” nazw usług.

www.hmce.gov.uk

Page 36: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 223

Ogólny odnośnik Learn more (dowiedz się więcej) rozrzuconypo całej stronie American Heart Association (AmerykańskieStowarzyszenie Kardiologiczne) nie pomaga w naprowadzaniuużytkowników na obszary ich zainteresowań. Nie mogą oni szybkoprzejrzeć wszystkich odnośników i wychwycić sedna ich znaczenia.Zamiast tego muszą przeczytać wstęp, co niepotrzebnie ichspowalnia. Lepiej jest wyraźnie powiedzieć użytkownikom, czegowięcej się dowiedzą, zamiast denerwować ich odnośnikami, którenie zawierają żadnych konkretnych informacji.

www.americanheart.org

Page 37: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych224

www.dimewill.com

Ludzie uważają, że trudno jest znaleźć różnicepomiędzy nic niemówiącymi nazwami kategoriitakimi jak Club (klub) lub Passbook (książeczkaoszczędnościowa). Praktycznie nie jest możliwe

(Na sąsiedniej stronie u góry) Stary projekt. Pokazywanastrona spowalnia użytkowników, ponieważ pojazdy zorganizowanesą względem nazw modeli. Takie rozwiązanie sprawdza się jedyniew przypadku, gdy ktoś jest zaznajomiony z samochodami firmyHonda. Nasi testerzy zastanawiali się, jakie rodzaje pojazdówreprezentowały poszczególne modele; jaka na przykład jestróżnica między modelami „Odyssey” i „S2000”. Mimo że na dolelisty znajduje się odnośnik All Models (wszystkie modele), ludzieczęsto go nie zauważali.

(Na sąsiedniej stronie na dole) Nowy projekt. Firma Hondaulepszyła nieco swoje kategorie nawigacji. Warto zauważyć, żeodnośnik, który poprzednio nosił nazwę Odyssey, teraz nazywa sięOdyssey Minivan, a S2000 zmienił się na S2000 Roadster.Zmiany te działają jak plaster. Zakrywają ranę, nie lecząc choroby.Zamiast wciąż wymuszać na użytkownikach nawigację opartą namodelach, lepiej byłoby przebudować cały system nawigacji tak,by jasno przedstawiał różnice pomiędzy poszczególnymi modelami.

spojrzenie na opcje i rozszyfrowanie ich znaczeniabez konieczności kliknięcia ich. Ten typ nawigacjiwymaga od odwiedzającego zbyt dużo pracy.

Page 38: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 225

www.automobiles.honda.com

www.automobiles.honda.com

Page 39: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych226

Witryna pokazana na tym rysunku lepiej spełniaswoje zadanie, pokazując poszczególne modelewraz z ceną i ich zdjęciami. Rysunki pomagająrozpoznać typ pojazdu. Niemniej jednak obrazki

www.automobiles.honda.com

(Na sąsiedniej stronie u góry) Ta strona poprawnie klasyfikujesamochody, bo używa terminologii znanej użytkownikom.Zamiast zakładać, że ludzie znają modele samochodów firmyFord, używane są proste i zrozumiałe terminy, takie jak PickupTrucks (półciężarówki) i Minivans/Vans (minivany/samochodyrodzinne), które znacznie lepiej spełniają swoje zadanie.

(Na sąsiedniej stronie na dole) Typy podłóg dostępne na tejwitrynie posegregowane są według linii produktu, a nie jego cech.Taka struktura może wydawać się logiczna dla pracowników firmyAnderson, ale nie dla jej potencjalnych klientów, którzy szukająproduktów, posługując się ich atrybutami. Nazwy typu Appalachianlub Biltmore mogą być dla ludzi zupełnie niezrozumiałe. Kiedyprojektanci uważają, że konieczne jest dostarczenie instrukcji,w jaki sposób nawigować po stronie, to jest to znak, iż interakcjana niej nie działa poprawnie. Lepiej jest wychodzić naprzeciwoczekiwaniom użytkowników, niż oczekiwać, że oni wyjdąnaprzeciw naszym oczekiwaniom.

są względnie małe, a wiele modeli wyglądapodobnie, przez co trudno jest określić, czyna przykład „Civic Si” jest minivanem.

Page 40: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 227

www.ford.com

www.andersonfloors.com

Page 41: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych228

Pionowo rozwijane menu— krótkie jest piękneRozwijane pionowo menu stały się bardzo popularnym narzę-dziem, głównie dlatego, że pozwalają zaoszczędzić miejsce naekranach z ograniczoną powierzchnią nieruchomą. Przez lataużytkownicy uczyli się ich używać. Chociaż rozwijane pionowomenu ma wiele zalet, to nie znaczy, że nie powoduje proble-mów, szczególnie wówczas, gdy jest za długie. Im dłuższa listamenu, tym trudniej ją kontrolować. Im dalej użytkownik musischodzić w menu, tym większa szansa, że zgubi swoją pozycję.

Często lepiej jest prezentować długie listy w standardowym for-macie tekstowym, który zapewnia więcej miejsca na opisy, coz kolei pomaga użytkownikom rozpoznawać różnice międzyposzczególnymi opcjami. Pionowo rozwijane menu mają ten-dencję do bycia wąskimi, przez co zapewniają mało miejsca dlaopisowych nazw kategorii. Zamiast ryzykować i używać długiejlisty elementów, których znaczenia mogą się częściowo pokrywaćlub być niejasne, lepiej pozwolić użytkownikom kliknąć na głów-ny nagłówek i następnie przenieść ich na inną stronę, gdzie znaj-duje się czytelna lista możliwych opcji z właściwym opisem.

Menu wielopoziomowe— mniej oznacza więcejWielopoziomowego menu trzeba używać oszczędnie i nigdy nienależy używać więcej jak dwóch poziomów. Większa liczba po-ziomów zakrywa ekran i jest trudna w obsłudze. Poziom trzecizazwyczaj jest oznaką kłopotów, a czwarty praktycznie zawszekończy się tym, że nie można go używać. W menu, które majązbyt wiele poziomów, problemem staje się to, że ze względu naciągle rozwijane i ukrywane podmenu trudno jest zlokalizowaćposzukiwaną opcję.

Ludzie zazwyczaj pracują z założeniem, że najkrótszą drogąmiędzy dwoma punktami jest linia prosta. Tak więc w przypad-ku wielopoziomowych menu mają w zwyczaju przeciągaćwskaźnik myszy na skos, bezpośrednio do menu podrzędnego.W tym momencie zazwyczaj gubią oni swoją pozycję i doznająfrustracji, gdy muszą ponownie wybierać swoje opcje. Problemten jest jeszcze bardziej uciążliwy na laptopach, ponieważ ma-nipulowanie wskaźnikiem i wykonywanie operacji „przeciągniji upuść” za pomocą panelu dotykowego jest jeszcze bardziejnieporęczne.

Należy upewnić się, że dynamiczne menu znajduje się dosta-tecznie długo na stronie, by ludzie mogli dokonywać swoichwyborów. Kapryśne rozwiązania, które wymagają precyzji orazotwierają się i zamykają przy najmniejszym poruszeniemmyszą, są trudne do kontrolowania. Zaawansowani i doświad-

Im dłuższa lista menu,tym trudniej ją kontrolować.Im dalej użytkownik musischodzić w menu, tymwiększa szansa, że zgubiswoją pozycję.

(Na sąsiedniej stronie u góry)Wielopoziomowe menu na tejstronie irytowało użytkowników,ponieważ sprawiało problemyz kontrolą. Przypadkoweprzesunięcie wskaźnika myszytuż poza obszar kategoriiproduktu powodowało, żeniespodziewanie pojawiało siękolejne, inne menu.

(Na sąsiedniej stronie na dole)Pokazana tutaj strona używarozwijanych menu w sposóbrozsądny, gdyż są one ograniczonejedynie do dwóch poziomów.Dodatkowo witryna wykorzystujenawyki użytkowników doprzeciągania wskaźnika w liniiprostej przy wykonywaniuwyboru opcji. Menu nie znikatakże w sytuacji, gdy ktośwyjedzie kursorem nieznaczniepoza obszar menu.

Page 42: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 229

www.escaladesports.com

www.americanheart.org

czeni użytkownicy prawdopodobnie poradzą sobie z kontrolo-waniem dynamicznych menu bez większych problemów, aleprzeciętny użytkownik będzie się bardzo męczył.

Page 43: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych230

www.blackmountainbicycles.com

www.blackmountainbicycles.com

Page 44: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 231

Czy mogę to kliknąć?Kiedy ludzie nie wiedzą, które elementy można kliknąć, musząwykonywać więcej pracy i zgadywać. Łatwo mogą pominąć to,czego szukają, porzucić stronę przedwcześnie lub założyć, żeodkryli już wszystkie opcje, gdy w rzeczywistości tak nie jest.

Standardowy paradygmat podkreślania odnośników i pisaniaich na niebiesko zapewnia widoczne oznakowanie ich funkcji.Nie należy więc używać koloru niebieskiego do kolorowaniazwykłego tekstu, gdyż wciąż kojarzy się on głównie z elemen-tem, który można klikać.

Mimo to niebieski nie zawsze jest najlepszym kolorem do kolo-rowania odnośników. W niektórych sytuacjach może on nie pa-sować do kolorystyki marki lub być nieodpowiedni ze wzglę-dów czysto estetycznych. Również elementy pogrubionewskazują, że można je kliknąć. Ponadto, jeśli chodzi o sposobywskazywania elementów, które można klikać, dobrą praktykąjest podświetlanie tekstu, kiedy przesunie się na niego wskaź-nik myszy. Jednakże nie powinien to być jedyny z dostępnychsposobów na wskazanie miejsc do klikania, gdyż użytkownicymusieliby wówczas przeszukiwać całą stronę, aby znaleźć od-nośniki.

Podobną funkcję pełnią elementy graficzne, które w jakikol-wiek sposób się wyróżniają. Użytkownicy zazwyczaj zauważająstandardowe kształty przycisków, podobnie jak inne elementy,które zazwyczaj używane są w interfejsach, i zakładają, że moż-na je klikać.

Podsumowując, należy upewnić się, że każda osoba jest w sta-nie łatwo określić, które elementy można klikać, a których nie.Nie wolno zmuszać użytkowników do tego, by musieli kliknąćkażdy element na ekranie, by sprawdzić, które z nich są odno-śnikami. Tak więc odnośniki na stronie powinny być obrobionewizualnie tak, by wywoływały skojarzenie, iż można je kliknąć— można użyć na przykład kolorowej czcionki lub podkreśle-nia. Nie wolno całkowicie ufać kursorowi w kształcie dłonijako elementowi wskazującemu odnośnik. Nawet doświadcze-ni użytkownicy nie zawsze zauważą, kiedy standardowy kursorzmieni się w dłoń, a dla nowicjuszy oba oznaczają dokładnieto samo.

(Na sąsiedniej stronie u góry)Stary projekt. Tu pokazanyjest przykład nadgorliwegowykorzystania wielopoziomowegomenu. Cztery poziomyrozwijanych paneli zakrywająwiększość obszaru strony,utrudniając w ten sposóbużytkownikowi kontrolowanieruchów. Bardziej prawdopodobnejest pojawienie się błędów,gdyż projekt wymaga ododwiedzających koncentracjii zręczności manualnej.Osoby, które opuszczą pozycjęlub wyjadą poza menu, musząza każdym razem rozpoczynaćod nowa.

(Na sąsiedniej stronie na dole)Nowy projekt. Nowy projektfirmy Black Mountain ulepszyłstronę ze względu na mniejsząliczbę poziomów z czterech dotrzech. Mimo że jest to pewnapoprawa, duża liczba menunadal zakrywa znaczną częśćwitryny i wymaga odużytkownika znaczącegomanewrowania wskaźnikiem.

Należy upewnić się, żekażda osoba jest w staniełatwo określić, któreelementy można klikać,a których nie. Nie wolnozmuszać ich do tego,by musieli kliknąć każdyelement na ekranie,by sprawdzić, które z nichsą odnośnikami.

Page 45: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych232

„Przystępność” była pierwotnie terminempsychologicznym używanym do określenia akcjimożliwych do zaistnienia między ludźmi lubzwierzętami i światem. Nasz kolega, Donald A.Norman, w swojej książce The Design OfEveryday Things zastosował ten termin dozdefiniowania odczuć ludzi względem świata.

Mówiąc ogólnie, termin „przystępność” dotyczywszystkiego, co można zrobić z obiektem.Na przykład krzesło nadaje się do siedzenia nanim, przycisk umożliwia wciśnięcie, a rączkaumożliwia przekręcenie lub pociągnięciew zależności od tego, jak jest zaprojektowana.Najważniejszą rzeczą, jaką w kontekściefunkcjonalności zauważył Donald, jest to,że dostrzeżona przystępność jest nawetważniejsza niż prawdziwa. Jego najsłynniejszymprzykładem są drzwi — drzwi umożliwiająpchnięcie lub pociągnięcie, w zależności odtego, w którą stronę się otwierają. Kiedy osobaod razu wie, czy drzwi należy pociągnąć lubpchnąć, to jest to dobry projekt interfejsuużytkownika. Innymi słowy, użytkownik możezauważyć przystępność drzwi, po prostupatrząc na nie. Nie musi z nimi walczyć, abyodkryć, w jaki sposób ich używać. (I na pewnonie musi czytać instrukcji obsługi, aby jeotworzyć. Każde drzwi, które dostarczanesą z wyraźną instrukcją mówiącą „pchnij”lub „pociągnij”, są słabo zaprojektowane).

W interfejsie użytkownika opartym na ekraniemusimy nieco odwrócić koncepcję przystępności.

Przystępność

W pewnym sensie każda kropka na ekranieumożliwia kliknięcie, ponieważ można jąwskazać kursorem i kliknąć przyciskiem myszy.W praktyce jednak mówimy, że coś umożliwiakliknięcie, jeśli po tej czynności wykonywanajest jakaś akcja. Tak więc kwestią kluczową jestto, czy element, który można kliknąć, sprawiawrażenie przystępności. Innymi słowy, czy jestmożliwe, by użytkownik po prostu patrząc naelement, przewidział, że jego kliknięciespowoduje jakąś akcję? Jeśli tak, projekt mazazwyczaj znacznie większą funkcjonalność,niż ten, który wymaga zgadywania, któreelementy można kliknąć.

Omawianie tej idei zazwyczaj sprowadza siędo tego, czy element, który można kliknąć,dostatecznie mocno przekonuje użytkownikao swojej funkcji. To determinuje, czy osobamoże na każdym ekranie łatwo rozpoznaćdostępne możliwości. Ale istnieje również drugiaspekt. Czy strona, na której nie ma elementów,które można kliknąć, pokazuje użytkownikowielementy, które można kliknąć? Jeśli tak, będzieon wierzył, że ma wybór, którego tak naprawdęnie ma, co prowadzić będzie do jegodezorientacji w momencie, kiedy coś kliknie,a kliknięcie nie będzie wywoływać żadnej akcji.Aby uniknąć tego problemu, nie wolno korzystaćz elementów grafiki przypominających przyciski,jeżeli nie można ich kliknąć. I nie należykolorować tekstu na niebiesko ani gopodkreślać, chyba że jest on odnośnikiem.

(Na sąsiedniej stronie u góry) Podczas naszychtestów użytkownicy tej strony narzekali, że nie byłosposobu na złożenie przez internet wnioskuo założenie konta; myśleli, że należy skontaktować sięz przedstawicielem banku. Nie zdawali sobie sprawy,że przyciskiem był mały pomarańczowy prostokącik.Ponieważ jest on płaski, ludzie zakładali, że jest tozwykła grafika statyczna, której zadaniem jestprzykuć uwagę do znajdującego się obok odnośnika.Porównując oba odnośniki, dochodzi się do wniosku,że podkreślony i pokolorowany tekst sprawia silnewrażenie, iż dany element można kliknąć, podczasgdy płaskie pole nie. To ostatnie wygląda jak elementczysto dekoracyjny. Jednakże gdy prostokąt zostaniepołączony z czymś, co gwarantuje silne wrażenieprzystępności, całość prawie na pewno zawszebędzie przykuwać uwagę użytkowników.

(Na sąsiedniej stronie na dole)Wypunktowana na niebiesko lista wyglądajak odnośniki, przez co użytkownicy testowi,którzy na nią klikali, byli zakłopotani tym, iż niebyli przenoszeni na nową stronę. Brak reakcjipowodował, że część osób zaczęła uważać,iż strona w ogóle nie działa. Niebieski kolorwywołuje silne postrzeganie przystępnościelementu. Nie wolno go używać do oznaczaniaelementów, których nie można kliknąć.

Page 46: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 233

www.bankone.com

www.san-diego-vision.com

Page 47: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych234

Nasi testerzy nie wiedzieli, że nagłówki na tej stronie były aktywne,ponieważ nie miały one dostatecznie silnych cech oznaczającychmożliwość kliknięcia. Nie były podkreślone, więc użytkownicyzakładali, że są po prostu pogrubionymi nagłówkami. Instrukcjana stronie mówi, że aby wyświetlić oferty pracy, należy kliknąćSearch (wyszukaj). Byli zakłopotani, kiedy nie mogli odnaleźćprzycisku, który aktywowałby żądanie.

(Na sąsiedniej stronie u góry) To przykład nadużycia wizualnejprzenośni. Chociaż prostokątne i wypukłe pola wyglądają jakprzyciski, to nie są nimi. Instrukcje mówią, by klikać w innym miejscu.

www.bk.com

Page 48: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 235

www.bk.com

Czy da się określić, którez elementów na tej stronie możnakliknąć? Jeżeli ktoś założył,że takie elementy to dowolnyfragment wytłuszczonego tekstulub grafika, to był w błędzie.Jedynym polem aktywnym jesttekst Read more… (więcej).Dobrze jest, że element możliwydo kliknięcia ma kolor niebieski,ale co z innymi niebieskimii pogrubionymi elementami?Ważne jest, by używać kolorówi oznaczeń graficznych w sposóbzachowujący spójność, którapozwala jednoznaczniewskazywać różne rzeczy.

www.hmce.gov.uk

Page 49: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych236

Bezpośredni dostępze strony głównejJedna z najlepszych strategii projektowych, jakie spotkali-śmy podczas naszych testów, polega na umieszczaniu bez-pośrednich odnośników na stronie głównej, które pro-wadzą do bardzo małej liczby najważniejszych operacji.Bez względu na to, jak dobrze zorganizowana zostaniestruktura informacji lub jak przejrzysty będzie system na-wigacji, użytkownicy mogą się zgubić lub stracić cierpli-wość, jeżeli będą zmuszeni przechodzić przez zbyt wielepoziomów. Odnośniki bezpośrednie skracają i upraszczająprojekt.

Niestety, nie można zaprezentować bezpośrednich odno-śników do znacznej liczby elementów, które oferuje stro-na. Jeżeli nie zachowa się tej zasady, zniszczona zostanieidea odnośników bezpośrednich, gdyż zaistnieje większeprawdopodobieństwo, że użytkownicy klikną niewłaściwyodnośnik. Dodatkowo długa lista odnośników bezpośred-nich niszczy inne funkcje, jakie ma pełnić strona główna,na przykład jej podatność na pozycjonowanie czy infor-mowanie użytkowników o pełnym zakresie czynności, ja-kie mogą na niej wykonać. Szczegóły nakreślają obszernyobraz możliwości, ale niestety jest on nieprzejrzysty.

Długa lista odnośnikówbezpośrednich niszczy innefunkcje, jakie ma pełnić stronagłówna. Należy zarezerwowaćje dla najważniejszych zadańużytkownika.

www.mozilla.org

W tygodniu, w którym Mozillawypuściła nową wersję swojejprzeglądarki Firefox, bezpiecznie byłozałożyć, że większość użytkowników,którzy odwiedzali stronę domową,chciała przejść do pobierania nowegooprogramowania. Z tego powoduMozilla postąpiła mądrze, zaopatrującbezpośredni odnośnik realizujący tozadanie w najbardziej rzucający sięw oczy wygląd. Niestety, strzałka,która sprawia wrażenie odnośnikarozpoczynającego pobieranie, nieumożliwia kliknięcia. Jest to jednakniewielki problem z funkcjonalnością,gdyż większość użytkownikówkliknęłaby odnośnik tekstowy poniżej.Strona zapewnia również bezpośrednieodnośniki do innych zadań o wysokimpriorytecie, które związane sąz trzema podstawowymi produktami.

Innym dobrym elementem tej stronyjest to, że zawiera cytat — wypowiedźWalta Mossberga, znanego recenzentaoprogramowania. Dużo bardziejwiarygodne jest, gdy produkt jestchwalony przez kogoś, kto nie jestzwiązany z naszą organizacją,i oczywiście jest jeszcze bardziejwiarygodne, gdy ten ktoś negatywniewypowiada się o naszej konkurencji,tak jak w tym przypadku.Sprytnym posunięciem było równieżzamieszczenie odnośnika dopełnego artykułu Walta Mossberga,opublikowanego na stronieinternetowej Wall Street Journal.Pokazuje to, że Mozilla nie obawia siępokazać użytkownikom pełnejrecenzji. Zastosowana strategia jestskuteczna bez względu na to,czy poszczególne osoby będą klikaćna dołączony odnośnik, czy też nie.

Page 50: Optymalizacja funkcjonalności serwisów internetowych

6. Nawigacja i architektura informacji 237

Odnośniki bezpośrednie należy zarezerwować dla niewielkiejliczby najważniejszych zadań, jakie użytkownik może na stro-nie wykonać. Dla każdego z niezależnych obszarów stronyliczba tych odnośników powinna być ograniczona do trzech,maksymalnie pięciu. Trzy lub mniej to liczba najwłaściwszaw przypadków serwisów o wielu niezależnych obszarach, z któ-rych każdy wspiera własne odnośniki bezpośrednie.

Bardziej szczegółoweinformacje o badaniachomawianych w tym rozdzialemożna znaleźć na stroniewww.nngroup.com/reports.Szukaj haseł intranet, childrenoraz teenagers.

Więcej informacji

www.mozilla.com

Przy kolejnej odsłonie przeglądarki Firefox, Mozilla uprościłastronę domową jeszcze bardziej i lepiej wyróżniła cel wizytywiększości użytkowników — możliwość pobrania najnowszejwersji. Przeniesienie odnośnika Other Systems and Languages(inne systemy i języki) poza obszar dużego przycisku służącegodo pobierania było kolejnym usprawnieniem. W poprzednimprojekcie odnośnik ten dostępny był wewnątrz dużego cieniowanegoobszaru, który był bezdyskusyjnie pomyślany ze względu naużytkowników systemu Windows. Każdy, kto potrzebował innejwersji, prawdopodobnie szukał gdzie indziej.

Page 51: Optymalizacja funkcjonalności serwisów internetowych

Optymalizacja funkcjonalności serwisów internetowych238

• Wskazówka — minusimitacji tekstu

• Cztery najważniejszewskazówki dotyczącekroju pisma

247 Tekst podstawowy— reguładziesięciu punktów• Wskazówka

— unikanieantyaliasingu

• Wiek nie jestproblemem

• Wskazówka— kiedy ten samrozmiar wyglądana mniejszy

• Planowanie pod kątemróżnic w sprzęcie

• Powszechnerozdzielczości ekranu

• Dostępność dotyczynas wszystkich

253 Relatywnespecyfikacje• Reguła relatywnego

rozmiaru• Projektowanie z myślą

o użytkownikachz wadami wzroku

258 Wybieranie czcionek• W przypadku

wątpliwościnależy korzystać z czcionki Verdana

• Kiedy z ekranu będziemożna czytać takdobrze, jak z kartki?

261 Mieszanieczcionek i kolorów• Wojna przeciwko

wersalikom• Kontrast między

tekstem i tłem• Powszechny daltonizm• Dwa sposoby,

by spowodować, żekolor będzie widoczny

273 Obrazki z tekstem275 Poruszający się tekst

• Więcej informacji