Optymalizacja funkcjonalności serwisów internetowych
0 likes903 views
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ć.
Optymalizacja funkcjonalności serwisów internetowych
- 1. Optymalizacja funkcjonalnoœci serwisów internetowych Autorzy: Jakob Nielsen, Hoa Loranger T³umaczenie: Zbigniew Smogur ISBN: 83-246-0845-1 Tytu³ orygina³u: Prioritizing Web Usability Format: B5, stron: 432 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 Wydawnictwo Helion • U¿ywanie odpowiednich czcionek ul. Koœciuszki 1c • Zastosowania technologii 44-100 Gliwice • Rozwi¹zania najczêœciej pope³nianych b³êdów tel. 032 230 98 63 • Testowanie funkcjonalnoœci witryn e-mail: [email protected] Naucz siê tworzyæ atrakcyjne witryny, z których u¿ytkownicy bêd¹ chêtnie korzystaæ
- 2. Spis treści Wstęp 17 Czym jest funkcjonalność? 18 Gdzie 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 30 Jak wykonane zostały badania do książki 31 Strony przetestowane 33 Co, jeśli na stronie wprowadzone zostały zmiany? 40 Jeszcze raz: dlaczego testowanie przy wykorzystaniu użytkowników jest ważne? 43 Testowanie z wykorzystaniem użytkowników w trzy dni 43 Wyjątki 43 2 Doświadczenie użytkowników sieci 47 Jak dobrze ludzie używają sieci? 48 Mierzenie skali sukcesu 49 Wskaźniki powodzenia w internecie 50 Powodzenie 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 53 Trzy wskazówki dotyczące wspierania dociekliwych użytkowników 53 Strona startowa — tak wiele do powiedzenia, tak niewiele czasu 56 Cztery cele w trzydzieści sekund 56 Sposoby pracy na wewnętrznych stronach 59 Wskazówka — optymalizacja odnośników na wewnętrznych stronach 61 Strategia dominującego wyszukiwania 62 Rozwój „wyszukiwarek dających odpowiedzi” 62 Cztery sposoby, aby zyskać uznanie w oczach użytkowników wyszukiwarek 64 Odnośniki zwykłe kontra sponsorowane 65 W jaki sposób ludzie korzystają ze strony z wynikami wyszukiwania 65 Pierwsze zalecenie dotyczące optymalizacji pod kątem wyszukiwarek 66 8 Spis treści
- 3. Korzystanie ze słów kluczowych do oszacowania usprawnień funkcjonalności 67 Jak określić optymalną cenę dla reklamy słowa kluczowego 68 Ile warta jest poprawiona funkcjonalność? 69 Trzy powody, dla których warto usprawnić własną stronę 70 Przewijanie 71 Wskazówka — projekt z krótkim przewijaniem 71 Spełnianie reguł projektowych oraz zaleceń dotyczących funkcjonalności 73 Definicja standardów i konwencji 73 Siedem powodów przemawiających za standaryzacją elementów projektu 74 Poszukiwanie informacji 78 Zalecana lektura 78 Ślad informacji — przewidywanie powodzenia śladu 78 Wybór pożywienia — jakie strony odwiedzić 78 Trzy sposoby na wyróżnienie śladu informacji 79 Porzucenie śladu — kiedy zmienić obszar poszukiwań 79 Nowe strategie projektowania, aby zainteresować poszukujących informacji 80 Więcej informacji 81 Sposoby nawigacji osób pochłaniających informacje 81 3 Ponowne spojrzenie na wczesne wyniki badań nad funkcjonalnością 83 W trakcie budowy 85 Osiem problemów, które nie uległy zmianie 86 Odnośniki, które nie zmieniają koloru po kliknięciu 86 Dlaczego projektanci nam nie wierzą? 88 Ucieczka od przycisku Wstecz 89 Prawo Fittsa dotyczące czasu klikania 91 Otwieranie nowych okien przeglądarki internetowej 93 Klątwa maksymalizacji 95 Jak można używać okien, skoro się ich nie rozumie? 97 Wyskakujące okienka 98 Najbardziej znienawidzone techniki reklamowe 101 Projekty elementów, które wyglądają jak reklamy 102 Naruszanie konwencji obowiązujących w sieci 104 Unikanie podczas testów wpływowych użytkowników 104 Mglista treść oraz pusta reklama 106 Zwarta treść oraz nieprzeszukiwalny tekst 107 Spis treści 9
- 4. Zmiana technologiczna i jej wpływ na funkcjonalność 110 Wskazówki sił lotniczych z 1986 roku przeszły próbę czasu 111 Długi czas pobierania 112 Trzy poziomy emocjonalnego projektowania Dona Normana 112 Ramki 113 Technologia Flash 114 Technologia Flash — dobra, zła i funkcjonalna 116 Wyniki wyszukiwania o niskiej zgodności 117 Materiały multimedialne i długie wideoklipy 117 Zamrożone układy graficzne 118 Nastolatki — mistrzowie technologii? 118 Brak kompatybilności na różnych platformach 120 Smutny Mac 120 Urządzenia przenośne — nowy argument przemawiający za projektami na różne platformy? 122 Adaptacja — w jaki sposób użytkownicy wpłynęli na funkcjonalność 122 Niepewna możliwość klikania 123 Odnośniki, które nie są niebieskie 126 Przewijanie 126 Rejestracja 128 Skomplikowane adresy URL 129 Wysuwane i kaskadowe menu 129 Powściągliwość — w jaki sposób projektanci zmniejszyli problemy z funkcjonalnością 130 Wtyczki oraz technologia najnowszego stanu kodu 134 Trójwymiarowy interfejs użytkownika 135 Rozdęty projekt 137 Strony wprowadzające 137 Ruchoma grafika oraz przewijany tekst 139 Własne elementy interfejsu użytkownika 139 Brak informacji o tym, kto jest twórcą strony 141 Elementy „O nas” nie przekazują dostatecznej ilości informacji 141 Wymyślone słowa 142 Nieaktualna treść 142 Niespójność w ramach tej samej strony 144 Pochopne żądania o dane osobowe 144 Powielone strony 145 Osamotnione strony 145 Ocena losu wczesnych odkryć 145 Więcej informacji 147 10 Spis treści
- 5. 4 Nadawanie priorytetu problemom z funkcjonalnością 149 Jak poważny jest problem? 150 Co czyni problemy poważnymi 151 Ocenianie powagi problemu 151 Funkcjonalność w szpitalu — przypadki krytyczne 154 Skala nieszczęścia 155 Wskazówka — pierwsze prawo handlu elektronicznego 157 Dlaczego użytkownicy nie osiągają celu 158 Pięć 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 164 Wskazówka — jak rozpoznać, czy potrzebne jest wyszukiwanie 164 Trzy proste kroki do lepszego wyszukiwania 165 Jak powinno działać wyszukiwanie 166 Trzy rzeczy, których użytkownicy oczekują od wyszukiwarek 166 Wskazówka — kiedy wyszukiwanie nie jest wyszukiwaniem? 166 Interfejs wyszukiwania 168 Wskazówka — nie staraj się być wyszukiwarką 169 Długość pytania a szerokość pola wyszukiwarki 174 Wskazówka dotycząca pola wyszukiwania — musi być szerokie 174 Zaawansowane wyszukiwanie 176 Strony z wynikami wyszukiwania 177 Zalecenia dotyczące odnośników docelowych 177 Wskazówka — konwencja datowania stron z wynikami wyszukiwania 178 Wskazówka — pomoc osobom mającym kłopoty z pisownią 180 Najlepszy strzał 180 Cztery sposoby na tworzenie najlepszych strzałów 181 Utrzymywanie najlepszych strzałów 182 Sortowanie stron z wynikami wyszukiwania 183 Nie znaleziono wyników 185 Znaleziono jeden wynik 185 Optymalizacja pod kątem wyszukiwarek 186 Sztuczki oszustów używane do pozycjonowania stron 187 Nadawanie nazwy 189 Spis treści 11
- 6. Wskazówka — piękno używania reklam tylko tekstowych 190 Wskazówka — śledzenie wartości reklam w wyszukiwarkach 191 Lingwistyczne pozycjonowanie stron w wyszukiwarkach 191 Najważniejsza wskazówka lingwistyczna dotycząca pozycjonowania stron w wyszukiwarkach 191 Wskazówka — nadużywanie słów kluczowych przynosi odwrotny efekt 192 Wskazówka — myśl frazami, nie słowami kluczowymi 193 Architektoniczne pozycjonowanie stron w wyszukiwarkach 193 Pozycjonowanie stron w wyszukiwarkach na podstawie reputacji 195 W 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 199 Zalecana lektura dotycząca architektury informacji 199 Architektura informacji w intranecie 200 Nawigacja — musi być jednolita 204 Nawigacja — strzeż się mody 210 Dzieciaki lubią grę w sapera 210 Ograniczanie nieładu oraz unikanie powtórzeń 215 Nie 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ąć? 231 Przystępność 232 Bezpośredni dostęp ze strony głównej 236 Więcej informacji 237 7 Typografia — czytelność i przejrzystość 239 Wskazówka — minus imitacji tekstu 240 Cztery najważniejsze wskazówki dotyczące kroju pisma 241 Tekst podstawowy — reguła dziesięciu punktów 247 Wskazówka — unikanie antyaliasingu 248 Wiek nie jest problemem 249 Wskazówka — kiedy ten sam rozmiar wygląda na mniejszy 250 Planowanie pod kątem różnic w sprzęcie 251 Powszechne rozdzielczości ekranu 251 Dostępność dotyczy nas wszystkich 252 12 Spis treści
- 7. Relatywne specyfikacje 253 Reguła relatywnego rozmiaru 253 Projektowanie z myślą o użytkownikach z wadami wzroku 253 Wybieranie czcionek 258 W przypadku wątpliwości należy korzystać z czcionki Verdana 259 Kiedy z ekranu będzie można czytać tak dobrze, jak z kartki? 260 Mieszanie czcionek i kolorów 261 Wojna przeciwko wersalikom 264 Kontrast między tekstem i tłem 266 Powszechny daltonizm 271 Dwa sposoby, by spowodować, że kolor będzie widoczny 271 Obrazki z tekstem 273 Poruszający się tekst 275 Więcej informacji 275 8 Pisanie na potrzeby internetu 279 Jak słaby sposób pisania powoduje niepowodzenie strony internetowej 280 Zrozumieć, jak czytają użytkownicy sieci 284 Wskazówka — zatrudnić pisarza specjalizującego się w pisaniu na potrzeby sieci 284 Dlaczego użytkownicy przeglądają 285 Pisać dla swoich czytelników 285 Wskazówka — poznać swoich odbiorców 285 Używać prostego języka 288 Trzy wskazówki dotyczące lepszego pisania w sieci 288 Wychodzenie naprzeciw niskim potrzebom literackim 291 Stonować krzykliwe reklamy 291 Wskazówka — kiedy i gdzie używać krzykliwego stylu 293 Próbki pisania — przed i po 293 Punkty podsumowujące i skracanie 295 Wskazówka — test dwóch zdań 295 Utrzymywanie tekstu w krótkiej i miłej formie 295 Wskazówka — tworzenie opisowych etykiet 297 Jak formatować tekst, by był czytelny 301 Szybka poprawa funkcjonalności 301 Wyróżnianie słów kluczowych 301 Używanie zwięzłych i opisowych tytułów oraz nagłówków 302 Trzy wskazówki na temat hierarchii nagłówków 303 Używanie list wypunktowanych i numerowanych 305 Spis treści 13
- 8. Siedem najważniejszych wskazówek dotyczących list wypunktowanych 306 Wskazówka — podobne formułowanie jest ważne 307 Używanie krótkich paragrafów 308 Więcej informacji 308 9 Zapewnienie dobrej informacji o produkcie 311 Pokaż mi pieniądze 313 Wskazówka — kiedy wyświetlać ceny 313 Bez wymówek 316 Wskazówka — ceny przybliżone są lepsze od żadnych 317 Pokazywać dodatkowe opłaty 318 Wygrać zaufanie klientów 321 Opisywanie produktu 321 Zapewnienie rysunków i ilustracji produktów 324 Jazda próbna strony motoryzacyjnej 324 Pięć dużych błędów dotyczących obrazów produktów 325 Warstwowe układanie stron produktów 330 Pokazywanie wiarygodności 336 Wspierać zakupy oparte na porównywaniu 337 Udoskonalanie i sortowanie 340 Wspierać zakupy towarów dobrej jakości 343 Cztery powody stosowania artykułów informacyjnych 343 Oni nie mają produktów, prawda? 344 Więcej informacji 345 10 Prezentowanie elementów strony 347 Kiedy reguła trzech kliknięć sieje spustoszenie 348 Czy powinno się projektować z myślą o przewijaniu? 348 Cztery reguły przewijania 350 Instruowanie użytkowników. Krok po kroku 355 Wskazówka — strzeż się magicznych numerów 355 Trzymać podobne elementy obok siebie 359 Niedbałe formatowanie formularzy 364 Spełniać oczekiwania użytkowników 370 Patrz na mnie! 370 Wykorzystanie pustej przestrzeni 373 14 Spis treści
- 9. 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 385 Uwzględnianie użytkowników o niskich możliwościach technicznych 385 Wskazówka — zapewnianie alternatywnej dostępności 385 Strony dla dzieci — muszą być realne 386 Projektowanie pod kątem prędkości łącza odbiorców 387 Zapewnienie prostych i właściwych wskaźników ładowania i statusu strony 387 Nie doceniać wiedzy technicznej własnych użytkowników 390 Zwracanie uwagi na język 390 Wykrywanie przepustowości łącza użytkowników 392 Przykleić się do znanych konwencji związanych z interfejsami 394 Wskazówka — wyskakujące okienka zazwyczaj się mszczą 395 Wskazówka — paski przewijania powinny być elementami standardowymi 397 Unikać nadmiaru materiałów multimedialnych 401 Wskazówka — media rozbudowane kontra skromne 401 Zmniejszanie głośności 403 Jak się to wyłącza? 403 Tworzenie materiałów wideo na potrzeby sieci 404 Wskazówka — kiedy zrobić przerwę na reklamę 404 Praktykowanie prostoty 406 Doskonalenie swojej strony — prędzej czy później? 409 Trzy wskazówki — prostota, prostota i jeszcze raz prostota 410 W stronę jeszcze bardziej eleganckich projektów 416 Więcej informacji 416 12 Podsumowanie — projekt, który spełnia swoje zadanie 419 Testowanie własnych przypuszczeń 421 Skorowidz 422 Spis treści 15
- 10. 6 Nawigacja i architektura informacji 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ć.
- 11. Raz za razem z naszych badań wynika, że ludzie walczą o to, by zdobyć 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łaszany przez naszych użytkowników testowych. Pomimo że wyszuki- wanie samo w sobie sprawiało najmniej problemów, cztery inne obszary, które zaliczamy do elementów umożliwiających odnalezienie 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ę po serwisie, zamiast od razu udawać się do wyszukiwarki. (Wiele osób traktuje nazwy kategorii jako problem zależny od archi- tektury informacji ze względu na to, że nazywanie często idzie w parze ze strukturyzowaniem. Jednak biorąc pod uwagę fakt, iż angażują one różne decyzje projektowe, wydaje nam się, że warto rozważyć je osobno). Czy już osiągnąłem cel? Słabo zaprojektowane strony internetowe czynią więcej zła niż Jednym z największych tylko spowalnianie pracy użytkowników — mogą ich zniechę- komplementów, jaki strona cić do korzystania z danego serwisu. Kiedy ktoś nie może zna- może uzyskać, jest brak 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. komentarzy użytkowników, dotyczących jej struktury. Systematycznie zorganizowany projekt gwarantuje, że ludzie Myślenie i analizowanie odnajdują informacje przy mniejszym nakładzie sił dzięki czy- struktury serwisu to telnie reprezentowanym etykietom, układowi strony i relacjom zadanie dla jego między poszczególnymi stronami serwisu. Dobry projekt nawi- gacji pokazuje użytkownikom, gdzie są, gdzie znajdują się po- projektanta, a nie szczególne rzeczy i jak metodycznie dotrzeć do tego, czego po- użytkownika. trzebują. Właściwie wykonana architektura informacji daje uż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 jej struktury. Na dobrze zorganizowanych stronach mogą oni poru- szać się swobodnie, koncentrując się jedynie na zadaniu, a nie na strukturze strony. Myślenie i analizowanie struktury serwisu to zadanie dla jego projektanta, a nie użytkownika. 198 Optymalizacja funkcjonalności serwisów internetowych
- 12. Zalecana lektura Dopasowanie struktury strony dotycząca architektury informacji do oczekiwań użytkowników Jeśli ktoś jest zainteresowany Najbardziej efektywnymi stronami w kierowaniu użytkowni- poznaniem metod planowania ków do właściwej lokalizacji są te, które spełniają ich oczeki- i strukturyzowania zawartości wania. Wiemy, że użytkownicy nie będą marnować czasu na za- stron internetowych, pamiętywanie lub uczenie się sposobu nawigacji po różnych to polecamy publikację serwisach. Warto więc zaangażować odpowiednie środki, aby Architektura informacji zaprojektować najlepszą architekturę informacji strony, która w serwisach internetowych zagwarantuje klientom odpowiedzi, jakich potrzebują w miej- napisaną przez Louisa scach, gdzie się ich spodziewają. Im bardziej naturalna wydaje Rosenfelda oraz Petera się ta architektura, tym większe prawdopodobieństwo, że użyt- Morville’a (wydawnictwo kownicy wrócą na taką stronę. Helion, 2003). Czasem zwana jest ona „książką Ludzie nie lubią przeciskać się przez gąszcz dwuznacznych od- niedźwiedzia polarnego” nośników do treści. Oczekują, że strona internetowa posiada ze względu na obrazek tak zorganizowaną zawartość, że jest ona klarowna dla nich. przedstawiający dużego Należy więc korzystać z takiej struktury nawigacyjnej, która niedźwiedzia polarnego, odzwierciedla ich pogląd na stronę i oferowane przez nią infor- umieszczony na okładce. macje oraz usługi. Nie wolno zapominać, że podmiotem są Jest to klasyka architektury „oni”, a nie „my”. informacji. Ktoś, kto chce zaoszczędzić pieniądze, Każdy może myśleć, że struktura jego strony jest zorganizowana może za darmo pobrać w sposób intuicyjny. Jednym z największych popełnianych z internetu pierwsze wydanie, przez firmy błędów jest używanie schematów, które są intuicyj- które zawiera więcej ne dla nich. Przykładem może być pogrupowanie produktów użytecznych informacji względem marek lub takie tworzenie treści serwisu, by odzwier- niż niejedna nowa publikacja ciedlała strukturę organizacji. W efekcie uzyskuje się witryny, na rynku. Jednakże kupno które są całkowicie logiczne dla ich twórców, ale zupełnie nie- najnowszego wydania to zrozumiałe dla odwiedzających. inwestycja warta swojej ceny. Dlaczego? Dlatego że to, w jaki sposób my i nasza firma doko- namy strukturyzacji informacji, może różnić się diametralnie od tego, jak wyobrażają to sobie użytkownicy. Jeżeli na przy- kład handlujemy latarkami, lepiej jest je zorganizować według Próba zaprojektowania atrybutów oczekiwanych przez użytkowników, na przykład według rozmiaru, a nie nazw marek, takich jak Xeon. Chociaż struktury strony bez Xeon może być ogólnie znaną linią produktów dla osób z na- wkładu wniesionego przez szej firmy, to jednocześnie może być zupełnie obcy naszym jej użytkowników jest klientom. olbrzymim błędem, który może kosztować tysiące, Próba zaprojektowania struktury strony bez wkładu wniesione- go przez jej użytkowników jest olbrzymim błędem, który może a nawet miliony dolarów. kosztować tysiące, a nawet miliony dolarów. Nieważne, jak do- Projektować należy dla brze i nowocześnie wygląda strona, gdyż jest bezużyteczna, je- wygody ich, nie naszej. śli grupa docelowa klientów uzna ją za bezsensowną. Projekto- wać należy dla wygody ich, nie naszej. 6. Nawigacja i architektura informacji 199
- 13. (Na sąsiedniej stronie u góry) W jaki sposób strona powinna zostać zorganizowana? Mimo że Ta strona zbytnio koncentruje się zalecamy, by struktura projektu odwzorowywała sposób myśle- na marce. Osoby nieznające nia i cele użytkowników, nie jesteśmy w stanie dostarczyć jed- marek muszą kliknąć każdą nej, uniwersalnej odpowiedzi na to pytanie. To, czego ludzie z trzech dostępnych opcji potrzebują, jest zmienne i zależy od rodzaju strony, tak więc — Mizerak, Murrey oraz Mosconi optymalna architektura informacji dla każdej strony wynika — aby zobaczyć, który ze stołów z unikatowych zamiarów i celów zarówno organizacji, jak i jej bilardowych najlepiej pasuje do klientów. Tematyka poświęcona tworzeniu funkcjonalnych ich potrzeb. To strata ich czasu. Ponadto opisy marketingowe struktur architektury nie tylko może, ale i wypełnia całe książki. każdej z marek nie dostarczają Poruszamy ją w tej publikacji po to, by zaznaczyć, jak duże ma informacji, które byłyby znaczenie. Jeżeli użytkownicy będą w stanie robić na stronie to, pomocne w ustaleniu, jaki model co chcą, będziemy czerpać z tego korzyści. jest potrzebny danej osobie. (Na sąsiedniej stronie na dole) Architektura informacji w intranecie Mimo że strona firmy Escalade dostarcza informacji o różnych Zalecenie, by unikać odwzorowywania na stronie struktury typach i stylach wyposażenia, firmy, dotyczy jedynie stron internetowych przeznaczonych użytkownicy ją przegapiają, dla użytkowników zewnętrznych. Gdy projektuje się serwis gdyż duże znaki towarowe dla pracowników, obowiązują inne reguły. zaciemniają odnośniki do tych Personel firmy zazwyczaj wie, w jaki sposób jest ona danych: zorganizowana. Ponadto wiele zadań realizowanych przez „Według mnie to było trudne. członków załogi powiązanych jest w jakiś sposób ze strukturą Zaraz po tym, jak dotarłem do przedsiębiorstwa. Bardzo często pracownicy muszą przeglądać producenta, droga się skończyła. schematy organizacyjne firmy, aby zobaczyć, kto jest szefem Nie można było przeglądać jakiegoś departamentu lub w jaki sposób różne departamenty indywidualnych produktów… są ze sobą powiązane. Nie podobało mi się to”. Dobrym pomysłem jest posiadanie w intranecie wyraźnej „Każda indywidualna etykieta reprezentacji struktury firmy. Niemniej jednak, nawet produktu sprzedaje firmę, w przypadku intranetu, nie jest dobrze by budować architekturę zamiast produkt”. informacji opierając się na schemacie organizacyjnym „Nie mogę tego znaleźć. przedsiębiorstwa. Większość z najlepszych stron intranetowych, Wolałbym przejść na inną stronę jakie mieliśmy okazję studiować, używa organizacji pracy, albo skorzystać z wyszukiwarki sposobu przepływu zadań oraz najczęstszych czynności Google”. pracowników jako podstawy do budowy własnej architektury informacji. 200 Optymalizacja funkcjonalności serwisów internetowych
- 14. www.escaladesports.com www.escaladesports.com 6. Nawigacja i architektura informacji 201
- 15. www.blackmountainbicycles.com Pokazana na rysunku strona próbuje spełnić oczekiwania szerokiej grupy odbiorców poprzez pogrupowanie rowerów zarówno względem marki, jak i typu. Te z osób, które są zaznajomione z markami, mogą dotrzeć do nich dzięki odpowiednim nazwom, a ci, którzy przeszukują 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 przeszukiwanie produktó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 naszych testów nie miały nic przeciwko ogromnej liczbie odnośników umieszczonych na stronie głównej, gdyż odnośniki te są zorganizowane i opisane krótkimi, jasnymi nagłówkami. Ludzie preferują krótkie, zwięzłe odnośniki niż długie, szczegółowe opisy. Warto zwrócić uwagę, że podkategorie pozwalają określić większe kategorie poprzez dostarczenie informacji o tym, co można znaleźć w każdej z nich. Na przykład nie zawsze jest oczywiste, co będzie obejmowała kategoria taka jak Community (społeczność), przez co zazwyczaj odradzalibyśmy jej stosowanie. Jednakże na omawianej stronie jest jasne, co znajduje się wewnątrz, ponieważ sześć dostarczonych podkategorii to opisuje. Niemniej jednak niniejsza strona dodatkowo używa ogólnych podkategorii more (więcej), co według nas nie jest właściwe, bo nie zapewniają samoczynnego objaśnienia. 202 Optymalizacja funkcjonalności serwisów internetowych
- 16. www.sandiego.gov www.cummins.com Niewłaściwa kategoryzacja. Użytkownicy, „Teraz się zgubiłem… Nie mam żadnej pomocy. którzy przetestowali tę stronę, oczekiwali, I nie czuję, bym miał do dyspozycji jakiekolwiek że informacje dotyczące technologii ogniw opcje. Muszę przeglądać całą stronę. Niełatwo paliwowych znajdą w menu Products (produkty), jest znaleźć te informacje w górnych kolumnach a nie w Who We Are (kim jesteśmy), gdzie (elementach globalnej nawigacji)”. znajduje się to na ostatniej pozycji. Ten błąd „Szukam kategorii dotyczącej ogniw paliwowych. w sposobie zorganizowania powodował, Nie widzę jej w pozycji Products”. że ludzie trudzili się lub uznawali, że informacja „To zajęło zbyt dużo czasu!”. ta nie została w ogóle zamieszczona: 6. Nawigacja i architektura informacji 203
- 17. Nawigacja — musi być jednolita W momencie, gdy nawigacja ulega Konsekwencja to podstawowe założenie nawigacji. Utrzymanie diametralnej zmianie przy jednolitej struktury nawigacji pomaga ludziom wizualizować ich bieżącą lokalizację oraz opcje i zminimalizować zgadywa- przejściu z jednej strony nie. Elementy nawigacyjne pełnią funkcję szczebli, które umoż- na drugą, użytkownicy liwiają ludziom przejście z jednego obszaru na drugi. muszą przenieść swą uwagę z używania strony Zmiana sposobu nawigacji to jak usuwanie tychże szczebli na rozeznanie, jak działa w momencie, kiedy użytkownicy wciąż są „w powietrzu”. Kiedy wylądują, to w miejscu, którego się nie spodziewali. Nawigacja, nawigacja. Serwisy, które która wcześniej znajdowała się z lewej strony, teraz może być nie są wyposażone pośrodku, a kategorie uległy zmianie. Przycisk Wstecz nie działa w jednolitą nawigację, i nie ma łatwej drogi, aby wrócić na wcześniejsze strony. powodują, że użytkownik czuje się niepewnie. W momencie, gdy nawigacja ulega diametralnej zmianie przy przejściu z jednej strony na drugą, użytkownicy muszą prze- nieść swą uwagę z używania strony na rozeznanie, jak działa nawigacja. 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 lub przejmują 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 serwisy korporacyjne są rozłączone, gdy sekcje dla inwestorów, prasy oraz produktów posiadają własny schemat nawigacji i na doda- tek wyglądają zupełnie inaczej. Dobrze zorganizowana nawigacja jest przewidywalna, dzięki czemu 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 informacja powinna 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ę. 204 Optymalizacja funkcjonalności serwisów internetowych
- 18. www.pixar.com Prosty w formie, globalny obszar nawigacji w górnej części witryny wytwórni Pixar pozostaje widoczny i jednolity na wszystkich stronach. Gdziekolwiek by był użytkownik, wie, gdzie szukać różnych opcji nawigacyjnych. Nasi testerzy czuli się na tej stronie pewnie 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”. 6. Nawigacja i architektura informacji 205
- 19. www.ssa.gov 206 Optymalizacja funkcjonalności serwisów internetowych
- 20. (Na sąsiedniej stronie) Częściowo emeryturę. Porównajmy oba ekrany i zwróćmy pokrywające się obszary treści i niespójna uwagę na częściowo pokrywające się możliwości nawigacja na stronie U.S. Social Security wyboru. Tak nieuporządkowana architektura (amerykański urząd ds. socjalnych) są powodem informacji powoduje, że ludzie zapominają, co błędów. Wybieranie różnych, choć brzmiących kliknęli i jakie mają jeszcze możliwości wyboru, co podobnie, ścieżek wywołuje różne rezultaty. Na prowadzi do następujących komentarzy: przykład odszukanie swojego wieku „Wydawało mi się, że odnalezienie granicy wieku emerytalnego jest łatwe, gdy na stronie głównej emerytalnego to coś łatwego, ale nie udało mi się wybierze się opcję Plan Your Retirement (zaplanuj jej zlokalizować. Poczułem się głupio”. swoją emeryturę). Niemniej jednak, gdy ktoś „Serwis mógłby być bardziej przyjazny dla wybierze inną drogę i kliknie Retirement Planner użytkownika. Musi myśleć, jakby był nowym (planista emerytury), trudniej będzie mu znaleźć użytkownikiem”. granicę wieku emerytalnego. Odnośnik Find my retirement age (znajdź mój wiek emerytalny) dostępny jest w pierwszej z przytoczonych opcji, ale nie w drugiej, mimo że obie wyglądają jak miejsca, w których można planować swoją www.ssa.gov Kiedy odwiedzający tę stronę klikną Learn About Factors that Affect Your Retirement Benefis (dowiedz się więcej o czynnikach, które mają wpływ na twoją emeryturę), opcje wyboru z poprzedniego ekranu znikną i zostaną zastąpione przez inne, choć związane z poprzednimi. To było przyczyną zamętu wśród naszych użytkowników, którzy brali udział w teście. Na przykład nie mieli pewności, czy Calculate My Benefits (oblicz moje zyski) znaczy to samo co Benefits Calculators (kalkulatory zysków). Cały ciężar okreś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. 6. Nawigacja i architektura informacji 207
- 21. 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 przez użytkownika. Każdy z trzech dostępnych paneli posiada inny tytuł oraz styl nawigacji. Te ekstremalne zmiany w systemie nawigacji dezorientował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 strona głó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ż na innych stronach”. (Na sąsiedniej stronie) Niespójny schemat się jedynie na górze, lecz rozdzielona na dwa nawigacji na stronach firmy Nestlé spowodował, poziomy. Oto opinie użytkowników o tej stronie: że nasi użytkownicy mieli trudności, by odnaleźć „Nie jest to strona, na którą wrócę, gdyż nawigacja swoją drogę. Globalna nawigacja ulega zmianie na niej jest dziwna i trudna. Podoba mi się inny w różnych sekcjach witryny. Na przykład styl witryny, szczególnie boczny panel, w którym nawigacja główna na stronie All About Nestlé można oglądać różne rzeczy. Tutaj znajduje się (wszystko o Nestlé) pojawia się u góry i z boku. kilka górnych pasków i inne rzeczy mają miejsce Ale już na stronie Nutrition (odżywianie) znajduje na każdym z nich. Trzeba być wszędzie”. 208 Optymalizacja funkcjonalności serwisów internetowych
- 22. www.nestle.com „Na stronie nie mogę znaleźć tego, po co „Jest tu tak dużo informacji. Ukończenie zadania przyszedłem. Jeżeli szukałbym przekąski, zajęło mi nieco więcej czasu, niż pierwotnie opuściłbym witrynę, bo nie widzę jej tu”. przypuszczałem. Można ulec dezorientacji, „Zmarnowałem dużo czasu, szukając tego, próbując znaleźć kilka prostych rzeczy”. czego potrzebowałem”. 6. Nawigacja i architektura informacji 209
- 23. Nawigacja — strzeż się mody Należy unikać miłych i wymyślnych systemów Nawigacja to droga do celu, jej jedyną funkcją jest dać szybko nawigacji. Ludzie nimi ludziom to, czego szukają. Im bardziej będzie efektywna, tym większe prawdopodobieństwo, że użytkownicy pozostaną zain- gardzą. Warto więc teresowani stroną. oszczędzać kreatywność i wykorzystywać ją Główne tematy powinny być niezmienne i pojawiać się jedno- w miejscach, cześnie, dzięki czemu odwiedzający mogą łatwo i szybko je na których użytkownikom przejrzeć. Czekanie, aż nawigacja się załaduje lub zmieni, to dla nich strata czasu. Jakakolwiek forma nawigacji dynamicznej naprawdę zależy. koniecznie musi być łatwa w używaniu. Elementy menu, które są zbyt czułe i zmieniają się przy najmniejszym poruszeniu my- szy, mogą być bardziej nieporęczne niż przydatne. A dodatkowo pogrzebią 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 celem do kliknięcia lub konieczność poruszania kursorem po całym ekranie po to, by znaleźć coś do kliknięcia („gra w sapera”), nie jest czymś, co sprawia radość. Jeszcze więcej trudności sprawi osobom 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ów nawigacji. Ludzie nimi gardzą. Warto więc oszczędzać kreatyw- ność i wykorzystywać ją w miejscach, na których użytkowni- kom naprawdę zależy. Dzieciaki lubią grę w sapera Z naszych badań wynika, że dzieci w wieku niecierpliwością i oczekują szybkich rezultatów od 6 do 12 roku życia lubią „grę w sapera”, podczas swojej pracy ze stronami internetowymi. tak więc jest to jedyny przypadek, w którym Ogólnie mówiąc, wskazówki dotyczące rozmieszczanie elementów nawigacyjnych po funkcjonalności, które odnoszą się do osób całym ekranie jest uzasadnione. Dzieci często w wieku kilkunastu lat, różnią się nieco od tych traktują środowisko internetu jak grę i doceniają przeznaczonych dla dorosłych, a te dla dzieci możliwość odkrywania go i jego sekretów. Co różnią się diametralnie. Oczywiście, można znaleźć ważne, nie mają nic przeciw przemieszczaniu wiele podobieństw, ale jeśli grupą odbiorców kursora myszy po całym dobrze przygotowanym mają być najmłodsi użytkownicy, zalecamy rysunku, aby zobaczyć, co się znajduje pod nim. przeprowadzenie osobnych badań funkcjonalności Jednakże gdy wchodzą w wiek dorastania, z użyciem grupy osób właśnie w tym młodym tracą już swoje zainteresowanie tego typu wieku. Jeżeli nie jest zaznaczone inaczej, wszystkie formą nawigacji. Nastolatki cechują się dużą reguły opisane w tej książce dotyczą dorosłych. 210 Optymalizacja funkcjonalności serwisów internetowych
- 24. www.wynnlasvegas.com Menu główne na tej stronie przemieszcza się automatycznie w poprzek strony w sposób wolny i jednostajny. Jeżeli ktoś chce na przykład dokonać rezerwacji, musi poczekać, aż właściwa pozycja się pojawi. Można przyspieszyć ten proces, przesuwając wskaźnik myszy na jedną z dwóch strzałek, ale kto tak naprawdę chce sobie tym zawracać głowę? Strony internetowe powinny osiągać elegancki wygląd, ale nie kosztem czasu użytkowników. 6. Nawigacja i architektura informacji 211
- 25. www.bathandbodyworks.com Stary projekt. Nasi użytkownicy byli sfrustrowani faktem, że oferowane produkty zmieniały swoje położenie wraz z tym, jak oni zmieniali położenie myszy na ekranie. Niektórzy z nich nie mieli poję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 nich nie 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ć”. 212 Optymalizacja funkcjonalności serwisów internetowych
- 26. www.bathandbodyworks.com Nowy projekt. Firma Bath & Body Works przeprojektowała swój serwis, wyeliminowała kilka problemów z funkcjonalnością znalezionych przez nas podczas testów, dzięki czemu jest on lepszy. Strony statyczne zastąpiły wymyślny dynamiczny model interaktywny. 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że obejdzie się bez utraty części klientów! 6. Nawigacja i architektura informacji 213
- 27. www.dimewill.com www.atlantis.com 214 Optymalizacja funkcjonalności serwisów internetowych
- 28. (Na sąsiedniej stronie u góry) Ograniczanie nieładu Ukryte etykiety nawigacyjne zbijały użytkowników z tropu. oraz unikanie powtórzeń Na stronie na przykład nie widać, Nie należy umieszczać wielu obszarów nawigacji dla tego sa- by można było w cokolwiek mego typu odnośników. Zduplikowane lub trudne do rozróż- kliknąć, dopóki użytkownicy nie przesuną swoich wskaźników nienia kategorie powodują, że użytkownicy muszą włożyć spo- na pokazujące się etykiety ro wysiłku, by zachować kolejność. Muszą oni angażować czas tekstowe. Niektóre z osób w to, by znaleźć różnice w podobnie brzmiących nazwach. Co biorących udział w teście nie więcej, przedobrzenie z liczbą odnośników poprzez rozmiesz- zdawały sobie z tego sprawy czenie tych samych elementów w wielu miejscach strony i zastanawiały się, co właściwie zmniejszy prawdopodobieństwo tego, że użytkownicy je za- mają zrobić na tej stronie. uważą. Prawda jest taka, że im mniej obiektów na stronie, tym Ludzie preferują widoczne opcje większa szansa, że zostaną one zauważone. Jeśli w serwisie wyboru, dzięki czemu mogą je umieści się zbyt wiele rywalizujących ze sobą elementów, każdy przejrzeć za jednym zamachem. z nich straci na ważności. (Na sąsiedniej stronie na dole) Najlepiej jest jasno określić pewną cechę w jednym miejscu. Panel nawigacyjny tego serwisu Ograniczenie powtórzeń minimalizuje nieład, przez co łatwiej pojawia się jedynie wówczas, jest znaleźć pożądane informacje. gdy użytkownicy przemieszczą wskaźnik myszy na graficzny fragment umieszczony na środku. Nasi testerzy wzdragali się na samą myśl, że będą musieli wywołać menu za każdym razem, gdy będą go potrzebować. Nie dać się nabrać na duplikaty Klienci często mówią nam, że chcieliby Prawdą jest to, że duplikowanie odnośników zatrzymać powielone odnośniki zarówno może zwiększyć ogólny ruch do elementu na swoich stronach głównych, jak i w innych docelowego, ale dzieje się tak dlatego, że dając miejscach, gdyż każdy odnośnik generuje odnośnikowi więcej miejsca, bardziej promuje znaczący ruch. Czasami pokazują nam statystki się dany element niż pozostałe. Uczynienie mówiące, że ruch do strony rośnie, gdy takiego odnośnika większym lub umieszczenie odnośniki na niej są zduplikowane. go w bardziej widocznym miejscu przyniosłoby Chociaż dane takie mogą wydawać się nie do dokładnie taki sam skutek bez jednoczesnego podważenia, w rzeczywistości wprowadzają wywoływania dezorientacji. Co więcej, kiedy w błąd. Oczywiście, każdy z tych odnośników promuje się jeden z elementów, skutkuje to otrzymuje kliknięcia, ale to wcale nie znaczy, mniejszym ruchem do pozostałych. Każdy że jeśli odnośnik nie byłby powielony, to użytkownik ma stały zakres uwagi, jaką użytkownicy nie odnaleźliby szukanego celu. poświęca stronom internetowym, i jeżeli więcej Powiedzmy, że te same odnośniki znajdują się uwagi przyciągniemy do jednego z elementów, na górze i dole witryny. Użytkownicy często ucierpią na tym pozostałe. rozważają kliknięcie górnego odnośnika, ale Tak więc powielane odnośniki wywołują więcej postanawiają przed tym sprawdzić, co znajduje szkody niż pożytku. Jeżeli nawet zwiększy się się w niższej części witryny. Kiedy dojdą na sam ruch do określonej witryny, ucierpieć mogą dół witryny, mogą kliknąć w znajdujący się pozostałe strony ze względu na to, że tam odnośnik, ale gdyby go tam nie było, użytkownicy ulegli dezorientacji i nie mogli przewinęliby stronę do góry i kliknęli w odnośnik znaleźć tego, czego szukali. znajdujący się u góry. 6. Nawigacja i architektura informacji 215
- 29. www.usps.com www.sandiego.gov 216 Optymalizacja funkcjonalności serwisów internetowych
- 30. (Na sąsiedniej stronie u góry) Zduplikowane odnośniki niepotrzebnie skomplikowały strony United States Postal Service (Urząd pocztowy Stanów Zjednoczonych). Opcje dostępne w ś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órnej części powtarza zakładki, które dostępne są w głównym obszarze treści. Lepiej byłoby pokazać nawigację w jednym, oczywistym miejscu, i zarezerwować pozostałą przestrzeń na jakąś ważną treść lub pozostawić ją pustą. www.escaladesports.com Strona firmy Escalade Sports oferuje podwójny sposób nawigacji — za pomocą listy odnośników tekstowych oraz grafiki (z wybieraniem za pomocą pokrętła). Większość naszych użytkowników wybierało metodę tekstową, ponieważ odnośniki były łatwiejsze do przeglądania. Pozostali w ostateczności sięgali do narzędzia graficznego, ale byli zawiedzeni, gdy odkrywali, że obie metody prowadzą do tych samych informacji. Co za strata czasu! 6. Nawigacja i architektura informacji 217
- 31. Nazwy odnośników i etykiet Należy pomagać użytkownikom łatwo — liczy się dokładność rozróżnić odnośniki Należy upewnić się, że odwiedzający mogą łatwo zrozumieć poprzez nadawanie im etykiety nawigacyjne. Kiedy osoba nawiguje pomiędzy strona- bardziej informujących mi zazwyczaj ignoruje duże bloki z treścią i celuje w odnośniki, nazw. Zamiast nazywać by ustalić znaczenie strony. Żeby maksymalizować przejrzy- odnośnik na przykład stość, nazwy odnośników powinny być możliwie krótkie i jed- Więcej, lepiej jest noznaczne. Mądrze sformułowane słowa lub nazwy kategorii są problematyczne, gdyż ludzie ich nie rozumieją. Jeżeli na stronie powiedzieć użytkownikom, muszą znaleźć się pomysłowe nazwy, zawsze trzeba wyjaśnić co więcej otrzymają ich znaczenie, gdyż użytkownicy mają tendencję do niezwraca- po jego kliknięciu. nia uwagi na słowa, które nie mają dla nich sensu. Warto zawężać swoje odnośniki, rozpoczynając ich nazwę od słowa kluczowego lub informacyjnego. Należy usunąć zbędne wyrazy, takie jak powtarzająca się w każdym odnośniku nazwa firmy. 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 ich nazwy 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 nadawanie im bardziej informujących nazw. Zamiast nazywać odnośnik na przykład Więcej, lepiej jest powiedzieć użytkownikom, czego więcej otrzymają po jego kliknięciu. (Na sąsiedniej stronie u góry) Stary projekt. Mało precyzyjne 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, jest wyś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 to Toe Solutions (rozwiązania od głowy do palców) powinno w moim mniemaniu dotyczyć mycia ciała, lub czegoś w tym rodzaju”. „Uważam, że ciężko jest to zrobić. Na stronie nie ma dostatecznej liczby kategorii, aby szybko odnaleźć to, czego się szuka”. (Na sąsiedniej stronie na dole) Nowy projekt. Po zakończeniu przez nas testu, o którym mówiliśmy przy okazji poprzedniego rysunku, firma Bath & Body Works przebudowała swoją stronę. Teraz strona domowa zamiast mało zrozumiałych nazw kategorii takich jak learn (poznaj) lub live (żyj) posiada nazwy dużo bardziej bezpośrednie, takie jak Face (twarz), Hair (włosy) oraz Articles & Advice (artykułu i porady). Dobry ruch. 218 Optymalizacja funkcjonalności serwisów internetowych
- 32. www.bathandbodyworks.com www.bathandbodyworks.com 6. Nawigacja i architektura informacji 219
- 33. www.bathandbodyworks.com Firma Bath & Body Works nie może przestać. W czasie, kiedy kończyliśmy pisać ten rozdział, firma wypuściła kolejną wersję projektu strony, tym razem z jeszcze bardziej opisowymi etykietami elementów nawigacyjnych. Chociaż uważamy, że wygląd opisów byłby zbyt nieokreślony dla większości witryn, w tym przypadku wydaje nam się, że jest akceptowalny. Dodatkowo, nowa i bardziej wyrazista etykieta Facial Skincare (pielęgnacja skóry twarzy) niesie więcej informacji, przez co działa lepiej, kierując użytkowników do produktów, które chcą kupić. 220 Optymalizacja funkcjonalności serwisów internetowych
- 34. www.hmce.gov.uk Stara strona główna. Brytyjskie ministerstwo ds. podatków i ceł na swojej stronie głównej umieszcza informacje o zwrocie podatku VAT 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 (zwroty podatku VAT dla turystów). Odnośniki te dokładnie informują o tym, co zawierają. Witryna w sprytny sposób umieszcza najczęściej używane odnośniki w centralnym obszarze strony, z dala od innych rozpraszających uwagę elementów. 6. Nawigacja i architektura informacji 221
- 35. www.hmce.gov.uk Nowa strona główna. Niestety, przeprojektowany wygląd strony głó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 na wakacje i chce dowiedzieć się, jak może otrzymać zwrot swojego podatku VAT? Na stronie można znaleźć wiele miejsc, gdzie widnieje skrótowiec VAT, ale które z nich jest najlepsze w danym przypadku? Na poprzedniej stronie istniał odnośnik VAT refunds for 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ększej uwagi poprzez sztuczne „zelektronizowanie” nazw usług. 222 Optymalizacja funkcjonalności serwisów internetowych
- 36. www.americanheart.org Ogólny odnośnik Learn more (dowiedz się więcej) rozrzucony po całej stronie American Heart Association (Amerykańskie Stowarzyszenie Kardiologiczne) nie pomaga w naprowadzaniu użytkowników na obszary ich zainteresowań. Nie mogą oni szybko przejrzeć wszystkich odnośników i wychwycić sedna ich znaczenia. Zamiast tego muszą przeczytać wstęp, co niepotrzebnie ich spowalnia. Lepiej jest wyraźnie powiedzieć użytkownikom, czego więcej się dowiedzą, zamiast denerwować ich odnośnikami, które nie zawierają żadnych konkretnych informacji. 6. Nawigacja i architektura informacji 223
- 37. www.dimewill.com Ludzie uważają, że trudno jest znaleźć różnice spojrzenie na opcje i rozszyfrowanie ich znaczenia pomiędzy nic niemówiącymi nazwami kategorii bez konieczności kliknięcia ich. Ten typ nawigacji takimi jak Club (klub) lub Passbook (książeczka wymaga od odwiedzającego zbyt dużo pracy. oszczędnościowa). Praktycznie nie jest możliwe (Na sąsiedniej stronie u góry) Stary projekt. Pokazywana strona spowalnia użytkowników, ponieważ pojazdy zorganizowane są względem nazw modeli. Takie rozwiązanie sprawdza się jedynie w przypadku, gdy ktoś jest zaznajomiony z samochodami firmy Honda. Nasi testerzy zastanawiali się, jakie rodzaje pojazdów reprezentowały poszczególne modele; jaka na przykład jest różnica między modelami „Odyssey” i „S2000”. Mimo że na dole listy znajduje się odnośnik All Models (wszystkie modele), ludzie często go nie zauważali. (Na sąsiedniej stronie na dole) Nowy projekt. Firma Honda ulepszyła nieco swoje kategorie nawigacji. Warto zauważyć, że odnoś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ą na modelach, lepiej byłoby przebudować cały system nawigacji tak, by jasno przedstawiał różnice pomiędzy poszczególnymi modelami. 224 Optymalizacja funkcjonalności serwisów internetowych
- 38. www.automobiles.honda.com www.automobiles.honda.com 6. Nawigacja i architektura informacji 225
- 39. www.automobiles.honda.com Witryna pokazana na tym rysunku lepiej spełnia są względnie małe, a wiele modeli wygląda swoje zadanie, pokazując poszczególne modele podobnie, przez co trudno jest określić, czy wraz z ceną i ich zdjęciami. Rysunki pomagają na przykład „Civic Si” jest minivanem. rozpoznać typ pojazdu. Niemniej jednak obrazki (Na sąsiedniej stronie u góry) Ta strona poprawnie klasyfikuje samochody, bo używa terminologii znanej użytkownikom. Zamiast zakładać, że ludzie znają modele samochodów firmy Ford, używane są proste i zrozumiałe terminy, takie jak Pickup Trucks (półciężarówki) i Minivans/Vans (minivany/samochody rodzinne), które znacznie lepiej spełniają swoje zadanie. (Na sąsiedniej stronie na dole) Typy podłóg dostępne na tej witrynie posegregowane są według linii produktu, a nie jego cech. Taka struktura może wydawać się logiczna dla pracowników firmy Anderson, ale nie dla jej potencjalnych klientów, którzy szukają produktów, posługując się ich atrybutami. Nazwy typu Appalachian lub Biltmore mogą być dla ludzi zupełnie niezrozumiałe. Kiedy projektanci uważają, że konieczne jest dostarczenie instrukcji, w jaki sposób nawigować po stronie, to jest to znak, iż interakcja na niej nie działa poprawnie. Lepiej jest wychodzić naprzeciw oczekiwaniom użytkowników, niż oczekiwać, że oni wyjdą naprzeciw naszym oczekiwaniom. 226 Optymalizacja funkcjonalności serwisów internetowych
- 40. www.ford.com www.andersonfloors.com 6. Nawigacja i architektura informacji 227
- 41. Pionowo rozwijane menu Im dłuższa lista menu, tym trudniej ją kontrolować. — krótkie jest piękne Im dalej użytkownik musi Rozwijane pionowo menu stały się bardzo popularnym narzę- schodzić w menu, tym dziem, głównie dlatego, że pozwalają zaoszczędzić miejsce na większa szansa, że zgubi ekranach z ograniczoną powierzchnią nieruchomą. Przez lata swoją pozycję. użytkownicy uczyli się ich używać. Chociaż rozwijane pionowo menu 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 lista menu, tym trudniej ją kontrolować. Im dalej użytkownik musi schodzić 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, co z kolei pomaga użytkownikom rozpoznawać różnice między poszczególnymi opcjami. Pionowo rozwijane menu mają ten- dencję do bycia wąskimi, przez co zapewniają mało miejsca dla opisowych nazw kategorii. Zamiast ryzykować i używać długiej listy 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ęcej Wielopoziomowego menu trzeba używać oszczędnie i nigdy nie (Na sąsiedniej stronie u góry) należy używać więcej jak dwóch poziomów. Większa liczba po- Wielopoziomowe menu na tej ziomów zakrywa ekran i jest trudna w obsłudze. Poziom trzeci stronie irytowało użytkowników, zazwyczaj jest oznaką kłopotów, a czwarty praktycznie zawsze ponieważ sprawiało problemy kończy się tym, że nie można go używać. W menu, które mają z kontrolą. Przypadkowe zbyt wiele poziomów, problemem staje się to, że ze względu na przesunięcie wskaźnika myszy ciągle rozwijane i ukrywane podmenu trudno jest zlokalizować tuż poza obszar kategorii poszukiwaną opcję. produktu powodowało, że niespodziewanie pojawiało się Ludzie zazwyczaj pracują z założeniem, że najkrótszą drogą kolejne, inne menu. 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. (Na sąsiedniej stronie na dole) W tym momencie zazwyczaj gubią oni swoją pozycję i doznają Pokazana tutaj strona używa rozwijanych menu w sposób frustracji, gdy muszą ponownie wybierać swoje opcje. Problem rozsądny, gdyż są one ograniczone ten jest jeszcze bardziej uciążliwy na laptopach, ponieważ ma- jedynie do dwóch poziomów. nipulowanie wskaźnikiem i wykonywanie operacji „przeciągnij Dodatkowo witryna wykorzystuje i upuść” za pomocą panelu dotykowego jest jeszcze bardziej nawyki użytkowników do nieporęczne. przeciągania wskaźnika w linii Należy upewnić się, że dynamiczne menu znajduje się dosta- prostej przy wykonywaniu tecznie długo na stronie, by ludzie mogli dokonywać swoich wyboru opcji. Menu nie znika także w sytuacji, gdy ktoś wyborów. Kapryśne rozwiązania, które wymagają precyzji oraz wyjedzie kursorem nieznacznie otwierają się i zamykają przy najmniejszym poruszeniem poza obszar menu. myszą, są trudne do kontrolowania. Zaawansowani i doświad- 228 Optymalizacja funkcjonalności serwisów internetowych
- 42. czeni użytkownicy prawdopodobnie poradzą sobie z kontrolo- waniem dynamicznych menu bez większych problemów, ale przeciętny użytkownik będzie się bardzo męczył. www.escaladesports.com www.americanheart.org 6. Nawigacja i architektura informacji 229
- 43. www.blackmountainbicycles.com www.blackmountainbicycles.com 230 Optymalizacja funkcjonalności serwisów internetowych
- 44. (Na sąsiedniej stronie u góry) Czy mogę to kliknąć? Stary projekt. Tu pokazany jest przykład nadgorliwego Kiedy ludzie nie wiedzą, które elementy można kliknąć, muszą wykorzystania wielopoziomowego wykonywać więcej pracy i zgadywać. Łatwo mogą pominąć to, menu. Cztery poziomy czego szukają, porzucić stronę przedwcześnie lub założyć, że rozwijanych paneli zakrywają odkryli już wszystkie opcje, gdy w rzeczywistości tak nie jest. większość obszaru strony, utrudniając w ten sposób Standardowy paradygmat podkreślania odnośników i pisania użytkownikowi kontrolowanie ich na niebiesko zapewnia widoczne oznakowanie ich funkcji. ruchów. Bardziej prawdopodobne Nie należy więc używać koloru niebieskiego do kolorowania jest pojawienie się błędów, zwykłego tekstu, gdyż wciąż kojarzy się on głównie z elemen- gdyż projekt wymaga od tem, który można klikać. odwiedzających koncentracji i zręczności manualnej. Mimo to niebieski nie zawsze jest najlepszym kolorem do kolo- Osoby, które opuszczą pozycję rowania odnośników. W niektórych sytuacjach może on nie pa- lub wyjadą poza menu, muszą sować do kolorystyki marki lub być nieodpowiedni ze wzglę- za każdym razem rozpoczynać dów czysto estetycznych. Również elementy pogrubione od nowa. wskazują, że można je kliknąć. Ponadto, jeśli chodzi o sposoby wskazywania elementów, które można klikać, dobrą praktyką jest podświetlanie tekstu, kiedy przesunie się na niego wskaź- (Na sąsiedniej stronie na dole) nik myszy. Jednakże nie powinien to być jedyny z dostępnych Nowy projekt. Nowy projekt sposobów na wskazanie miejsc do klikania, gdyż użytkownicy firmy Black Mountain ulepszył stronę ze względu na mniejszą musieliby wówczas przeszukiwać całą stronę, aby znaleźć od- liczbę poziomów z czterech do nośniki. trzech. Mimo że jest to pewna Podobną funkcję pełnią elementy graficzne, które w jakikol- poprawa, duża liczba menu wiek sposób się wyróżniają. Użytkownicy zazwyczaj zauważają nadal zakrywa znaczną część standardowe kształty przycisków, podobnie jak inne elementy, witryny i wymaga od które zazwyczaj używane są w interfejsach, i zakładają, że moż- użytkownika znaczącego na je klikać. manewrowania wskaźnikiem. 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ąć Należy upewnić się, że każdy element na ekranie, by sprawdzić, które z nich są odno- śnikami. Tak więc odnośniki na stronie powinny być obrobione każda osoba jest w stanie wizualnie tak, by wywoływały skojarzenie, iż można je kliknąć łatwo określić, które — można użyć na przykład kolorowej czcionki lub podkreśle- elementy można klikać, nia. Nie wolno całkowicie ufać kursorowi w kształcie dłoni a których nie. Nie wolno jako elementowi wskazującemu odnośnik. Nawet doświadcze- zmuszać ich do tego, ni użytkownicy nie zawsze zauważą, kiedy standardowy kursor by musieli kliknąć każdy zmieni się w dłoń, a dla nowicjuszy oba oznaczają dokładnie element na ekranie, to samo. by sprawdzić, które z nich są odnośnikami. 6. Nawigacja i architektura informacji 231
- 45. Przystępność „Przystępność” była pierwotnie terminem W pewnym sensie każda kropka na ekranie psychologicznym używanym do określenia akcji umożliwia kliknięcie, ponieważ można ją możliwych do zaistnienia między ludźmi lub wskazać kursorem i kliknąć przyciskiem myszy. zwierzętami i światem. Nasz kolega, Donald A. W praktyce jednak mówimy, że coś umożliwia Norman, w swojej książce The Design Of kliknięcie, jeśli po tej czynności wykonywana Everyday Things zastosował ten termin do jest jakaś akcja. Tak więc kwestią kluczową jest zdefiniowania odczuć ludzi względem świata. to, czy element, który można kliknąć, sprawia Mówiąc ogólnie, termin „przystępność” dotyczy wrażenie przystępności. Innymi słowy, czy jest wszystkiego, co można zrobić z obiektem. możliwe, by użytkownik po prostu patrząc na Na przykład krzesło nadaje się do siedzenia na element, przewidział, że jego kliknięcie nim, przycisk umożliwia wciśnięcie, a rączka spowoduje jakąś akcję? Jeśli tak, projekt ma umożliwia przekręcenie lub pociągnięcie zazwyczaj znacznie większą funkcjonalność, w zależności od tego, jak jest zaprojektowana. niż ten, który wymaga zgadywania, które Najważniejszą rzeczą, jaką w kontekście elementy można kliknąć. funkcjonalności zauważył Donald, jest to, Omawianie tej idei zazwyczaj sprowadza się że dostrzeżona przystępność jest nawet do tego, czy element, który można kliknąć, ważniejsza niż prawdziwa. Jego najsłynniejszym dostatecznie mocno przekonuje użytkownika przykładem są drzwi — drzwi umożliwiają o swojej funkcji. To determinuje, czy osoba pchnięcie lub pociągnięcie, w zależności od może na każdym ekranie łatwo rozpoznać tego, w którą stronę się otwierają. Kiedy osoba dostępne możliwości. Ale istnieje również drugi od razu wie, czy drzwi należy pociągnąć lub aspekt. Czy strona, na której nie ma elementów, pchnąć, to jest to dobry projekt interfejsu które można kliknąć, pokazuje użytkownikowi użytkownika. Innymi słowy, użytkownik może elementy, które można kliknąć? Jeśli tak, będzie zauważyć przystępność drzwi, po prostu on wierzył, że ma wybór, którego tak naprawdę patrząc na nie. Nie musi z nimi walczyć, aby nie ma, co prowadzić będzie do jego odkryć, w jaki sposób ich używać. (I na pewno dezorientacji w momencie, kiedy coś kliknie, nie musi czytać instrukcji obsługi, aby je a kliknięcie nie będzie wywoływać żadnej akcji. otworzyć. Każde drzwi, które dostarczane Aby uniknąć tego problemu, nie wolno korzystać są z wyraźną instrukcją mówiącą „pchnij” z elementów grafiki przypominających przyciski, lub „pociągnij”, są słabo zaprojektowane). jeżeli nie można ich kliknąć. I nie należy W interfejsie użytkownika opartym na ekranie kolorować tekstu na niebiesko ani go musimy nieco odwrócić koncepcję przystępności. podkreślać, chyba że jest on odnośnikiem. (Na sąsiedniej stronie u góry) Podczas naszych (Na sąsiedniej stronie na dole) testów użytkownicy tej strony narzekali, że nie było Wypunktowana na niebiesko lista wygląda sposobu na złożenie przez internet wniosku jak odnośniki, przez co użytkownicy testowi, o założenie konta; myśleli, że należy skontaktować się którzy na nią klikali, byli zakłopotani tym, iż nie z przedstawicielem banku. Nie zdawali sobie sprawy, byli przenoszeni na nową stronę. Brak reakcji że przyciskiem był mały pomarańczowy prostokącik. powodował, że część osób zaczęła uważać, Ponieważ jest on płaski, ludzie zakładali, że jest to iż strona w ogóle nie działa. Niebieski kolor zwykła grafika statyczna, której zadaniem jest wywołuje silne postrzeganie przystępności przykuć uwagę do znajdującego się obok odnośnika. elementu. Nie wolno go używać do oznaczania Porównując oba odnośniki, dochodzi się do wniosku, elementów, których nie można kliknąć. że podkreślony i pokolorowany tekst sprawia silne wrażenie, iż dany element można kliknąć, podczas gdy płaskie pole nie. To ostatnie wygląda jak element czysto dekoracyjny. Jednakże gdy prostokąt zostanie połączony z czymś, co gwarantuje silne wrażenie przystępności, całość prawie na pewno zawsze będzie przykuwać uwagę użytkowników. 232 Optymalizacja funkcjonalności serwisów internetowych
- 46. www.bankone.com www.san-diego-vision.com 6. Nawigacja i architektura informacji 233
- 47. www.bk.com Nasi testerzy nie wiedzieli, że nagłówki na tej stronie były aktywne, ponieważ nie miały one dostatecznie silnych cech oznaczających możliwość kliknięcia. Nie były podkreślone, więc użytkownicy zakładali, że są po prostu pogrubionymi nagłówkami. Instrukcja na 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 wizualnej przenośni. Chociaż prostokątne i wypukłe pola wyglądają jak przyciski, to nie są nimi. Instrukcje mówią, by klikać w innym miejscu. 234 Optymalizacja funkcjonalności serwisów internetowych
- 48. www.bk.com Czy da się określić, które z elementów na tej stronie można kliknąć? Jeżeli ktoś założył, że takie elementy to dowolny fragment wytłuszczonego tekstu lub grafika, to był w błędzie. Jedynym polem aktywnym jest tekst Read more… (więcej). Dobrze jest, że element możliwy do kliknięcia ma kolor niebieski, ale co z innymi niebieskimi i pogrubionymi elementami? Ważne jest, by używać kolorów i oznaczeń graficznych w sposób zachowujący spójność, która pozwala jednoznacznie wskazywać różne rzeczy. www.hmce.gov.uk 6. Nawigacja i architektura informacji 235
- 49. Bezpośredni dostęp Długa lista odnośników bezpośrednich niszczy inne ze strony głównej funkcje, jakie ma pełnić strona Jedna z najlepszych strategii projektowych, jakie spotkali- główna. Należy zarezerwować śmy podczas naszych testów, polega na umieszczaniu bez- je dla najważniejszych zadań pośrednich odnośników na stronie głównej, które pro- użytkownika. wadzą do bardzo małej liczby najważniejszych operacji. Bez względu na to, jak dobrze zorganizowana zostanie struktura informacji lub jak przejrzysty będzie system na- wigacji, użytkownicy mogą się zgubić lub stracić cierpli- W tygodniu, w którym Mozilla wość, jeżeli będą zmuszeni przechodzić przez zbyt wiele wypuściła nową wersję swojej poziomów. Odnośniki bezpośrednie skracają i upraszczają przeglądarki Firefox, bezpiecznie było projekt. założyć, że większość użytkowników, którzy odwiedzali stronę domową, Niestety, nie można zaprezentować bezpośrednich odno- chciała przejść do pobierania nowego śników do znacznej liczby elementów, które oferuje stro- oprogramowania. Z tego powodu na. Jeżeli nie zachowa się tej zasady, zniszczona zostanie Mozilla postąpiła mądrze, zaopatrując idea odnośników bezpośrednich, gdyż zaistnieje większe bezpośredni odnośnik realizujący to prawdopodobieństwo, że użytkownicy klikną niewłaściwy zadanie w najbardziej rzucający się odnośnik. Dodatkowo długa lista odnośników bezpośred- w oczy wygląd. Niestety, strzałka, nich niszczy inne funkcje, jakie ma pełnić strona główna, która sprawia wrażenie odnośnika na przykład jej podatność na pozycjonowanie czy infor- rozpoczynającego pobieranie, nie mowanie użytkowników o pełnym zakresie czynności, ja- umożliwia kliknięcia. Jest to jednak kie mogą na niej wykonać. Szczegóły nakreślają obszerny niewielki problem z funkcjonalnością, gdyż większość użytkowników obraz możliwości, ale niestety jest on nieprzejrzysty. kliknęłaby odnośnik tekstowy poniżej. Strona zapewnia również bezpośrednie odnośniki do innych zadań o wysokim priorytecie, które związane są z trzema podstawowymi produktami. Innym dobrym elementem tej strony jest to, że zawiera cytat — wypowiedź Walta Mossberga, znanego recenzenta oprogramowania. Dużo bardziej wiarygodne jest, gdy produkt jest chwalony przez kogoś, kto nie jest związany z naszą organizacją, i oczywiście jest jeszcze bardziej wiarygodne, gdy ten ktoś negatywnie wypowiada się o naszej konkurencji, tak jak w tym przypadku. Sprytnym posunięciem było również zamieszczenie odnośnika do pełnego artykułu Walta Mossberga, opublikowanego na stronie internetowej Wall Street Journal. Pokazuje to, że Mozilla nie obawia się pokazać użytkownikom pełnej recenzji. Zastosowana strategia jest skuteczna bez względu na to, czy poszczególne osoby będą klikać na dołączony odnośnik, czy też nie. www.mozilla.org 236 Optymalizacja funkcjonalności serwisów internetowych
- 50. Więcej informacji Odnośniki bezpośrednie należy zarezerwować dla niewielkiej liczby najważniejszych zadań, jakie użytkownik może na stro- Bardziej szczegółowe informacje o badaniach nie wykonać. Dla każdego z niezależnych obszarów strony omawianych w tym rozdziale liczba tych odnośników powinna być ograniczona do trzech, można znaleźć na stronie maksymalnie pięciu. Trzy lub mniej to liczba najwłaściwsza www.nngroup.com/reports. w przypadków serwisów o wielu niezależnych obszarach, z któ- Szukaj haseł intranet, children rych każdy wspiera własne odnośniki bezpośrednie. oraz teenagers. www.mozilla.com Przy kolejnej odsłonie przeglądarki Firefox, Mozilla uprościła stronę domową jeszcze bardziej i lepiej wyróżniła cel wizyty większości użytkowników — możliwość pobrania najnowszej wersji. Przeniesienie odnośnika Other Systems and Languages (inne systemy i języki) poza obszar dużego przycisku służącego do pobierania było kolejnym usprawnieniem. W poprzednim projekcie odnośnik ten dostępny był wewnątrz dużego cieniowanego obszaru, który był bezdyskusyjnie pomyślany ze względu na użytkowników systemu Windows. Każdy, kto potrzebował innej wersji, prawdopodobnie szukał gdzie indziej. 6. Nawigacja i architektura informacji 237
- 51. • Wskazówka — minus • Powszechne 261 Mieszanie imitacji tekstu rozdzielczości ekranu czcionek i kolorów • Cztery najważniejsze • Dostępność dotyczy • Wojna przeciwko wskazówki dotyczące nas wszystkich wersalikom kroju pisma 253 Relatywne • Kontrast między 247 Tekst podstawowy specyfikacje tekstem i tłem — reguła • Reguła relatywnego • Powszechny daltonizm dziesięciu punktów rozmiaru • Dwa sposoby, • Wskazówka • Projektowanie z myślą by spowodować, że — unikanie o użytkownikach kolor będzie widoczny antyaliasingu z wadami wzroku 273 Obrazki z tekstem • Wiek nie jest 258 Wybieranie czcionek 275 Poruszający się tekst problemem • W przypadku • Więcej informacji • Wskazówka wątpliwości — kiedy ten sam należy korzystać rozmiar wygląda z czcionki Verdana na mniejszy • Kiedy z ekranu będzie • Planowanie pod kątem można czytać tak różnic w sprzęcie dobrze, jak z kartki? 238 Optymalizacja funkcjonalności serwisów internetowych