SlideShare a Scribd company logo

Serwisy WWW. Projektowanie, tworzenie i zarządzanie

Wydawnictwo Helion, profile picture
Wydawnictwo Helion

Wszystko, co powinieneś wiedzieć, by Twój serwis WWW odniósł sukces * 10 kroków do sukcesu Twojej strony * 50 sposobów na zwiększenie oglądalności * 17 metod przyspieszenia ładowania się strony * 20 sposobów na wyższe miejsce w wyszukiwarkach * 10 prostych metod na sprawienie, by Twoja strona była bardziej przyjazna dla odwiedzających * 8 typowych błędów, które możesz natychmiast poprawić Dwie książki w jednej Jeżeli chcesz przystąpić do pracy od razu i nie masz zamiaru czytać całości, wystarczy, że przejrzysz fragmenty z poradami ekspertów. Jeśli dysponujesz wolnym czasem, możesz zapoznać się ze szczegółowym omówieniem takich tematów jak: planowanie, projektowanie, budowanie i utrzymywanie serwisu internetowego. Listy zadań W książce znajduje się dwadzieścia list zadań do wykonania, dzięki którym przeprowadzenie najważniejszych dla witryny operacji staje się znacznie łatwiejsze. Wśród opisywanych czynności można znaleźć zwiększanie ruchu sieciowego, przyśpieszanie działania witryny, przygotowywanie planu projektu, zapewnianie zgodności rozwiązania z różnymi standardami. Dodatkowe informacje Dzięki dwudziestu pięciu dodatkowym wskazówkom praktycznym możesz się zapoznać z codzienną pracą takich serwisów jak MSN.com czy BabyCenter.com. Zawarte w tych wskazówkach informacje dotyczą kluczowych dla serwisu zagadnień, np. dobieranie nazw poszczególnych sekcji czy efektywne rozsyłanie e-maili. Rady znanych ekspertów Ponad pięćdziesięciu ekspertów -- zarówno twórcy reklamy sieciowej, jak i założyciel serwisu BlackPlanet -- dzieli się na łamach książki informacjami na różne tematy -- od sposobów zarabiania pieniędzy do zasad współpracy z programistami. Pozbawione żargonu opisy Wszystkie poruszane zagadnienia, od wykupywania domeny po przygotowanie rysunków, są opisane w sposób zrozumiały, w formie instrukcji, które możesz wykonać krok po kroku.

BusinessTechnology
1 of 50
Downloaded 10 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
IDZ DO PRZYK£ADOWY ROZDZIA£ SPIS TRE CI Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie KATALOG KSI¥¯EK Autor: June Cohen T³umaczenie: Agata Bulandra (rozdz. 1–8), KATALOG ONLINE Marek Pa³czyñski (rozdz. 9–15, dod. A) ISBN: 83-7361-315-3 ZAMÓW DRUKOWANY KATALOG Tytu³ orygina³u: The Unusually Useful Web Book Format: B5, stron: 380 TWÓJ KOSZYK Wszystko, co powiniene wiedzieæ, DODAJ DO KOSZYKA by Twój serwis WWW odniós³ sukces • 10 kroków do sukcesu Twojej strony • 50 sposobów na zwiêkszenie ogl¹dalno ci CENNIK I INFORMACJE • 17 metod przyspieszenia ³adowania siê strony • 20 sposobów na wy¿sze miejsce w wyszukiwarkach • 10 prostych metod na sprawienie, by Twoja strona by³a bardziej ZAMÓW INFORMACJE O NOWO CIACH przyjazna dla odwiedzaj¹cych • 8 typowych b³êdów, które mo¿esz natychmiast poprawiæ ZAMÓW CENNIK Dwie ksi¹¿ki w jednej Je¿eli chcesz przyst¹piæ do pracy od razu i nie masz zamiaru czytaæ ca³o ci, wystarczy, ¿e przejrzysz fragmenty z poradami ekspertów. Je li dysponujesz wolnym czasem, CZYTELNIA mo¿esz zapoznaæ siê ze szczegó³owym omówieniem takich tematów jak: planowanie, projektowanie, budowanie i utrzymywanie serwisu internetowego. FRAGMENTY KSI¥¯EK ONLINE Listy zadañ W ksi¹¿ce znajduje siê dwadzie cia list zadañ do wykonania, dziêki którym przeprowadzenie najwa¿niejszych dla witryny operacji staje siê znacznie ³atwiejsze. W ród opisywanych czynno ci mo¿na znale æ zwiêkszanie ruchu sieciowego, przy pieszanie dzia³ania witryny, przygotowywanie planu projektu, zapewnianie zgodno ci rozwi¹zania z ró¿nymi standardami. Dodatkowe informacje Dziêki dwudziestu piêciu dodatkowym wskazówkom praktycznym mo¿esz siê zapoznaæ z codzienn¹ prac¹ takich serwisów jak MSN.com czy BabyCenter.com. Zawarte w tych wskazówkach informacje dotycz¹ kluczowych dla serwisu zagadnieñ, np. dobieranie Wydawnictwo Helion nazw poszczególnych sekcji czy efektywne rozsy³anie e-maili. ul. Chopina 6 Rady znanych ekspertów 44-100 Gliwice Ponad piêædziesiêciu ekspertów -- zarówno twórcy reklamy sieciowej, jak i za³o¿yciel tel. (32)230-98-63 serwisu BlackPlanet -- dzieli siê na ³amach ksi¹¿ki informacjami na ró¿ne tematy — e-mail: helion@helion.pl od sposobów zarabiania pieniêdzy do zasad wspó³pracy z programistami. Pozbawione ¿argonu opisy Wszystkie poruszane zagadnienia, od wykupywania domeny po przygotowanie rysunków, s¹ opisane w sposób zrozumia³y, w formie instrukcji, które mo¿esz wykonaæ krok po kroku.
Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 5 Spis treœci Wprowadzenie 16 I Planowanie witryny 21 1. Podejmowanie decyzji 22 Co sprawdza siê w internecie? ...................... 23 Do dzie³a! Dziesiêæ korzyœci, które internet mo¿e daæ firmie ........................................... 25 Opisanie misji ..................................................... 26 Pisanie planu Przyk³adowy opis misji .................................. 26 strona 35 Okreœlenie celów ................................................ 27 Typy celów ..................................................... 27 Czerpanie zysków Typowe cele .................................................. 27 Ustalenie celów witryny korporacyjnej ............... 28 strona 81 Czêœæ praktyczna: Co bêdziemy robiæ z nasz¹ witryn¹? ............... 29 Testy funkcjonalnoœci Decyzja o zawartoœci witryny ............................. 30 strona 143 Ustalenie priorytetów ..................................... 30 Lista propozycji .............................................. 30 Zwiêkszanie szybkoœci dzia³ania witryny Okreœlenie podstawowych funkcji ................. 31 strona 233 Wyznaczanie funkcji priorytetowych .............. 31 Wa¿noœæ ........................................................ 31 Zwiêkszanie ruchu £atwoœæ ......................................................... 32 Proces wyznaczania priorytetów ................... 32 strona 281 Wykres wyznaczania priorytetów ....................... 33 Czêœæ praktyczna: Poprawianie pozycji witryny Jakie funkcje ma zawieraæ witryna? ................ 34 na liœcie wyszukiwanych adresów strona 323 Do dzie³a! Pisanie planu 35 Dlaczego nale¿y pisaæ plan? .............................. 36 Plan podstawowy .......................................... 36 Nie dajmy siê sparali¿owaæ ........................... 37 Podstawowy plan produktu ................................ 38 Czêœæ praktyczna: Tworzenie planu produktu ............................. 43 2. Nazwa witryny 44 Wybieranie nazwy ......................................... 45 Rejestrowanie nazwy .................................... 46 Trzy sposoby nazywania witryn ......................... 47 Wybór przyrostka .......................................... 48 Budowa adresu internetowego ...................... 48 Pozyskanie nazwy domeny ................................ 49 Czêœæ praktyczna: Jak nazwiemy witrynê? .................................... 50
6 Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 3. Ocena konkurencji 52 Do dzie³a! Czerpanie zysków 81 Identyfikacja konkurencji .................................... 54 Sposób zarabiania ......................................... 82 Sk¹d siê bierze konkurencja? ....................... 54 Cztery kroki prowadz¹ce Jak znaleŸæ konkurencjê? ............................. 54 do zarabiania w internecie .......................... 82 Czêœæ praktyczna: Rozwa¿anie mo¿liwoœci ................................ 83 Kim jest nasza konkurencja? ............................. 55 Dlaczego decydowaæ siê tylko na jedno? ...... 83 Ocena konkurencji ............................................. 56 Piêæ sposobów zarabiania w internecie ............. 84 Analiza finansowa ......................................... 56 Czerpanie zysków ze sprzeda¿y ........................ 86 Analiza funkcjonalna ..................................... 56 Czego chc¹ nabywcy? .................................. 86 Rozpoznanie konkurentów ............................ 56 Czerpanie zysków z reklamy ......................... 87 Czêœæ praktyczna: Czego chc¹ reklamodawcy? ......................... 87 Ocena konkurencji ........................................... 57 Czerpanie zysków z op³at i subskrypcji .............. 88 Czego oczekuj¹ subskrybenci? ..................... 88 4. Poznawanie u¿ytkowników 58 Czerpanie zysków z kojarzenia .......................... 89 Wiedza o u¿ytkownikach .................................... 60 Czego oczekuj¹ poszukiwacze kontaktów? .. 89 Badania iloœciowe a jakoœciowe .................... 60 Formy p³atnoœci internetowych ........................... 90 G³ówne etapy badañ u¿ytkowników .............. 61 Czêœæ praktyczna: Narzêdzia do badañ u¿ytkowników .................... 62 Sk¹d bêdziemy czerpaæ zyski? ........................ 91 Tworzenie profilu u¿ytkowników ......................... 64 Ankietowanie u¿ytkowników .......................... 65 Szacowanie liczby odbiorców ............................ 66 Czêœæ praktyczna: Kim s¹ u¿ytkownicy witryny? ............................. 67 Zobrazowanie u¿ytkowników ............................. 68 Tworzenie postaci .......................................... 68 Wskazówki praktyczne: Nie jesteœmy u¿ytkownikami swojej witryny .... 69 Tworzenie scenariuszy .................................. 70 Podzia³ u¿ytkowników ................................... 70 Czêœæ praktyczna: Tworzenie postaci ............................................ 71 Przewidywanie potrzeb u¿ytkowników ............... 72 Narzêdzia do poznawania potrzeb u¿ytkowników ................................. 72 Wskazówki praktyczne: Nasza witryna nie jest centrum wszechœwiata .... 73 Zrozumienie potrzeb u¿ytkowników ................... 74 Planowanie nowej witryny ............................. 74 Analiza zadania ............................................. 74 Przekszta³cenie zadañ w funkcje .................. 75 Jak uzyskaæ dobre wyniki z analizy zadania? .. 75 Zrozumienie zachowania u¿ytkowników ............ 76 Analiza ruchu ................................................. 76 Testy funkcjonalnoœci .................................... 76 Narzêdzia pomagaj¹ce zrozumieæ zachowanie u¿ytkownika ............................ 76 Opinie klientów .............................................. 77 Piêædziesi¹t sposobów, aby straciæ u¿ytkowników ................................ 78
Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 7 II Projektowanie witryny 93 Czêœæ praktyczna: W jaki sposób witryna  bêdzie zorganizowana? ................................. 134 5. Projektowanie Czêœæ praktyczna: na potrzeby internetu 94 Jaki system nawigacyjny wybierzemy? ......... 135 Dobrze zaprojektowana witryna internetowa ... 95 Nazywanie dzia³ów witryny .............................. 136 Projektowanie dla u¿ytkownika .......................... 96 Wybieranie spójnych nazw ............................... 138 Dziesiêæ sposobów Kilka dobrych przyk³adów ................................. 139 poprawy funkcjonalnoœci witryny ..................... 97 Wskazówki praktyczne: Projektowanie zgodnie z konwencjami .............. 98 Dlaczego nazwy dzia³ów powinny byæ Wskazówki praktyczne: jasne, nie wymyœlne? ..................................... 140 Dlaczego nale¿y postêpowaæ Dziwne nazwy .................................................. 141 zgodnie z konwencjami? .................................. 99 Czêœæ praktyczna: Jak ludzie widz¹ witryny internetowe? ............. 100 Jakich nazw dzia³ów u¿yjemy? ...................... 142 Wskazówki praktyczne: Konwencje wizualne w internecie i poza nim ... 101 Do dzie³a! Testy funkcjonalnoœci 143 Projektowanie pod k¹tem jêzyka HTML ........... 102 Piêæ typów testów funkcjonalnoœci .............. 144 Piêæ g³ównych zasad Czego mo¿emy dowiedzieæ siê projektowania w HTML-u .......................... 102 z testów funkcjonalnoœci? .............................. 145 Poradnik: Czego nie mo¿emy siê dowiedzieæ… ......... 146 Wybór oprogramowania ................................. 103 Tani sposób przeprowadzenia testów .............. 147 Projektowanie dla ró¿nych systemów .............. 104 Wskazówki praktyczne: Gdzie jest zgiêcie? ........................................... 105 Dlaczego testy funkcjonalnoœci Projektowanie pod k¹tem szybkoœci pobierania . 106 mog¹ siê nie powieœæ? .................................. 150 6. Organizacja i nawigacja 110 7. Projekt graficzny 152 Dobrze zorganizowana witryna ................... 111 Co projekt graficzny mo¿e daæ witrynie? ..... 153 Organizacja witryny .......................................... 112 Projekt strony g³ównej ...................................... 154 Tworzenie struktury witryny .............................. 113 Osiem wskazówek projektowych Wskazówki praktyczne: dla nowicjuszy ................................................ 157 Witryna nie powinna byæ odbiciem firmy ... 113 Piêæ spornych kwestii w projektowaniu ............ 158 Wskazówki praktyczne: Kolor w internecie ............................................. 160 Jak stworzyæ architekturê informacji? ............ 115 Wybór odpowiednich kolorów ...................... 160 Szeœæ sposobów organizacji witryny ................ 116 Znaczenie koloru ......................................... 160 Tworzenie zabawnych kategorii ....................... 119 Szeœæ wskazówek wybierania kolorów ........ 161 Dokumentowanie struktury witryny .................. 122 Tworzenie systemu kolorów ............................. 162 Nawigacja w witrynie ........................................ 124 RGB a CMYK .............................................. 162 Osiem z³ych pomys³ów na nawigacjê .......... 124 Kolory sprawdzaj¹ce siê w internecie .............. 163 Odrobina teorii: Kolor — kod szesnastkowy ......................... 163 Jak ludzie nawiguj¹ w internecie? ................. 125 Typografia w internecie .................................... 164 Nawigacja lokalna i globalna ............................ 126 Wybór kroju pisma ....................................... 164 Równowa¿enie warstw nawigacji ................ 126 Fonty szeryfowe a fonty bezszeryfowe ....... 164 Dlaczego rozwijane menu Czytelnoœæ na ekranie ................................. 165 nie nadaj¹ siê do nawigacji? ..................... 127 Verdana — najlepszy font w internecie ....... 166 Tworzenie systemu nawigacyjnego .................. 127 Formatowanie tekstu ................................... 167 Dwanaœcie systemów nawigacyjnych .............. 128 Font (czcionka) czy krój pisma? .................. 167
8 Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 8. Technologie projektowe 168 III Budowanie witryny 185 HTML i XHTML ............................................ 169 Arkusze stylów ............................................ 169 9. Projektowanie Rozszerzenia przegl¹darek ......................... 169 Skrypty dzia³aj¹ce po stronie klienta na potrzeby internetu 186 (JavaScript) ............................................... 169 Dziesiêæ powodów, dla których strony Skrypty dzia³aj¹ce po stronie serwera s¹ zbyt d³ugo pobierane ............................ 187 (ASP, PHP) ............................................... 169 Dlaczego strony s¹ zbyt d³ugo pobierane? ... 189 Aplety Java .................................................. 169 Kiedy „wolno” oznacza „zbyt wolno”? .......... 189 Jak uzyskaæ taki wygl¹d? ................................. 170 Projektowanie witryn XHTML — informacje ....................................... 172 z uwzglêdnieniem ich zgodnoœci ................... 190 HTML a XHTML — ró¿nice ......................... 172 Planowanie zgodnoœci Co trzeba wiedzieæ o jêzyku XHTML? ......... 172 z ró¿nymi systemami prezentacji .............. 190 Przejœcie na XHTML .................................... 173 Testowanie zgodnoœci ................................. 191 Konwersja kodu HTML na XHTML .............. 173 Przegl¹d technologii .................................... 191 Tabele — informacje ........................................ 174 Czêœæ praktyczna: Nauka stosowania tabel .............................. 174 W jaki sposób uczyniæ stronê Co trzeba wiedzieæ o tabelach? .................. 174 zgodn¹ z ró¿nymi przegl¹darkami? ............... 192 Ramki — informacje ......................................... 175 Projektowanie z zapewnieniem Zastosowanie ramek ................................... 175 stabilnego dzia³ania witryny ........................... 193 Co trzeba wiedzieæ o ramkach? .................. 175 Zapewnienie stabilnej pracy witryny ............ 193 Arkusze stylów — informacje ........................... 176 Naprawianie wadliwie funkcjonuj¹cej witryny ... 194 Co trzeba wiedzieæ o arkuszach stylów? ..... 176 Udostêpnienie zasobów witryny osobom Nauka stosowania arkuszy stylów ............... 177 niepe³nosprawnym ......................................... 196 JavaScript — informacje .................................. 178 To nie uprzejmoœæ — to inwestycja ............. 196 Co trzeba wiedzieæ o jêzyku JavaScript? .... 178 W Stanach Zjednoczonych Nauka stosowania jêzyka JavaScript .......... 179 to tak¿e wymóg prawny ............................ 196 Inne mo¿liwoœci programowania ................. 179 Dostosowanie serwisu Flash — informacje .......................................... 180 do potrzeb osób niepe³nosprawnych ........ 196 Co trzeba wiedzieæ o Flashu? ..................... 180 Piêæ niewielkich zmian czyni¹cych Nauka stosowania Flasha ........................... 181 witrynê dostêpn¹ dla wiêkszego grona u¿ytkowników .................................. 197 PHP — informacje ............................................ 182 Co trzeba wiedzieæ o PHP? ......................... 182 Gwarancja d³ugotrwa³ego dzia³ania witryny ..... 198 PHP a inne skrypty dzia³aj¹ce  Dlaczego musz¹ istnieæ standardy? ............ 198 po stronie serwera .................................... 183 Co zapewniaj¹ standardy sieciowe? ........... 199 Nauka stosowania PHP ............................... 183 Co stoi na przeszkodzie, ¿eby wdra¿aæ Inne technologie skryptowe dzia³aj¹ce standardy? ................................................ 199 po stronie serwera .................................... 183 Wskazówki praktyczne: Dlaczego nale¿y stosowaæ standardy? .......... 200 Projektowanie infrastruktury serwerowej .......... 202 Technologie typu open-source .................... 202 Przegl¹d technologii serwerowych ................... 203
Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 9 10. Zasada dzia³ania Do dzie³a! Zwiêkszanie witryn internetowych 204 szybkoœci dzia³ania witryny 233 Tworzenie dokumentu HTML ...................... 205 W³aœciwie dzia³aj¹ca witryna internetowa ... 234 Trzy metody budowania witryn internetowych ... 206 Konfiguracja z myœl¹ o szybkoœci dzia³ania ..... 235 Rada eksperta: Zwiêkszenie szybkoœci witryny Co cechuje dobre projekty internetowe? ....... 207 w szeœciu posuniêciach ................................. 236 Jak dzia³a HTML? ............................................ 208 Czêœæ praktyczna: Pierwsza strona WWW .................................... 210 Jak zwiêkszyæ szybkoœæ dzia³ania witryny? ... 239 Jak z utworzonych stron powstaje witryna internetowa? ...................................... 212 12. Aplikacje Ustalenie w³aœciwego nazewnictwa ............ 212 w witrynie internetowej 240 Odpowiednia organizacja stron ................... 212 Wybór odpowiedniej technologii ....................... 242 Po³¹czenia miêdzy stronami ....................... 213 Unikanie potencjalnych trudnoœci ................ 242 Przesy³anie stron do serwera ...................... 213 Oszacowanie wartoœci nowej technologii ......... 243 Pobieranie stron WWW .................................... 214 Czêœæ praktyczna: Pobieranie stron generowanych  Dziesiêæ pytañ, jakie trzeba zadaæ dynamicznie .............................................. 215 przed wyborem nowej technologii .................. 244 Zasada dzia³ania serwera ........................... 215 Tworzenie oprogramowania witryny ................. 245 11. Przygotowanie rysunków Budowanie zespo³u ..................................... 247 Budowa aplikacji .............................................. 248 i plików multimedialnych Dokumentacja aplikacji ................................ 248 do wykorzystania w internecie 216 Wskazówki praktyczne: Podstawy kompresji .................................... 217 Wspó³praca z in¿ynierami .............................. 250 Jak dzia³a procedura kompresji? ................. 218 Podstawowe informacje na temat pamiêci ....... 219 Wyznaczanie rozmiaru pliku ........................ 219 Wyznaczanie rozmiaru pamiêci komputera ... 219 Pliki graficzne w internecie ............................... 220 Wybór formatu pliku graficznego ...................... 221 Przygotowanie rysunków do wykorzystania w internecie ....................... 222 Przesy³anie danych audio ................................ 224 Dlaczego dŸwiêk na stronach WWW mo¿e irytowaæ? ......................................... 224 Wybór formatu dla danych audio wykorzystywanych na stronach WWW .......... 225 Przygotowanie danych audio do wykorzystania w internecie ....................... 226 Przesy³anie danych wideo ................................ 228 Wybór formatu dla danych wideo wykorzystywanych na stronach WWW .......... 229 Przygotowanie danych wideo do wykorzystania w internecie ....................... 230
10 Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie IV Zarz¹dzanie witryn¹ 253 Do dzie³a! Zwiêkszanie ruchu 281 Pocz¹tek ...................................................... 282 13. Monitorowanie Piêæ elementów istotnych przy zwiêkszaniu ruchu ............................. 282 i rozbudowa witryny 254 Piêædziesi¹t sposobów zwiêkszenia ruchu ...... 283 Analiza witryny ................................................. 256 Pozyskiwanie nowych u¿ytkowników ............... 284 W jaki sposób u¿ytkownicy Zatrzymanie u¿ytkowników na stronach korzystaj¹ z witryny? ...................................... 257 witryny przez d³u¿szy czas ............................ 286 W jaki sposób u¿ytkownicy odnajduj¹ witrynê? .. 258 Zachêcanie u¿ytkowników Informacje o Ÿródle ...................................... 258 do czêstszych odwiedzin ............................... 288 Pomiar natê¿enia ruchu ................................... 259 Czêœæ praktyczna: Sposób gromadzenia danych o ruchu ......... 259 W jaki sposób zwiêkszyæ ruch? ..................... 290 Niedok³adnoœæ pomiaru ............................... 259 O czym nale¿y pamiêtaæ 14. Promocja witryny 292 przy pomiarze ruchu? ............................... 259 Szeœæ elementów dobrej promocji witryny .... 293 Jak dzia³aj¹ systemy rankingowe? .............. 260 Strategie reklamy werbalnej ............................. 294 Poradnik: Program p³atnych odsy³aczy ....................... 294 Wybór oprogramowania do analizy ruchu ..... 261 Programy typu „przeka¿ przyjacielowi” ........ 294 Tworzenie raportu na temat ruchu sieciowego .... 262 Ciekawe rozwi¹zanie: Na co nale¿y zwróciæ uwagê? ..................... 262 Niesztampowe sposoby Czêœæ praktyczna: informowania przyjació³ ................................. 295 Przyk³ad raportu na temat natê¿enia ruchu .... 263 Strategie wykorzystania poczty elektronicznej .... 296 Analizowanie zmian ..................................... 264 Szeœæ czynnoœci, jakie mo¿e Co jest przyczyn¹ za nas wykonaæ poczta elektroniczna ....... 296 wzrostu natê¿enia ruchu? ......................... 264 Wybór w³aœciwej strategii wykorzystania Typowy model ruchu ........................................ 265 poczty elektronicznej ................................. 297 Prognoza roczna .............................................. 266 Gromadzenie adresów e-mail ..................... 297 Styczniowy wzrost ....................................... 266 Wybór w³aœciwej strategii wykorzystania Letnia stagnacja .......................................... 266 poczty elektronicznej ..................................... 298 Jesienny wzrost ........................................... 267 Budowanie listy adresowej ............................... 300 Grudniowy spadek ....................................... 267 Czy nale¿y kupowaæ listy z adresami? ........ 300 Wyj¹tki od regu³y ......................................... 267 Poradnik: Rozwój witryny ................................................. 268 Wybór oprogramowania dla list adresowych .... 301 time.com — ma³e zmiany, znaczny efekt .... 268 Sprawdzanie teorii ....................................... 269 Wskazówki praktyczne: Koncentracja na sprawach najwa¿niejszych ... 269 Dwanaœcie wskazówek gwarantuj¹cych efektywne wykorzystanie poczty elektronicznej . 302 Wskazówki praktyczne: Jak MSN zachêca ludzi do klikania Strategie doboru odsy³aczy .............................. 304 (miliony razy)? ............................................... 270 Odsy³acze w wyszukiwarkach ..................... 304 Odsy³acze w katalogach .............................. 304 Wskazówki praktyczne: Odsy³acze z innych witryn ........................... 304 Jak serwis Webmonkey sta³ siê Dlaczego nale¿y starannie dochodow¹ bibliotek¹? .................................... 272 dobieraæ odsy³acze? ................................. 304 Wskazówki praktyczne: Rodzaje odsy³aczy ...................................... 305 Sk¹d w³aœciciele gURL.com wiedzieli, Jak wiele stron zawiera odsy³acze czego pragn¹ kobiety? .................................... 274 do zarz¹dzanej witryny? ........................... 305 Wskazówki praktyczne: Nag³ówki umieszczane na stronach W jaki sposób twórcy BlackPlanet zdo³ali innych witryn ............................................. 306 nak³oniæ u¿ytkowników do rejestracji P³atne odsy³acze ......................................... 306 (i wnoszenia op³at)? ....................................... 276 Reklama sieciowa ............................................ 308 Wykorzystanie witryny ...................................... 278 Tworzenie udanej kampanii ......................... 308 Czêœæ praktyczna: Liczba klikniêæ to nie wszystko .................... 309 Wykorzystanie witryny ................................... 279
Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 11 Ciekawe rozwi¹zanie: 15. Zarz¹dzanie Szeœæ rodzajów reklam, których nie mo¿na nie zauwa¿yæ ................... 310 projektem i zespo³em 334 Gdzie nale¿y umieszczaæ reklamy? ................. 312 Zarz¹dzanie projektem sieciowym ................... 335 Wybór witryny .............................................. 312 Wyjaœnianie celu prac ................................. 335 Cztery sposoby op³acania reklam ............... 312 Ustalenie sposobu podejmowania decyzji .... 335 Czêœæ praktyczna: Stosowanie s³owa „nie” ............................... 336 O co nale¿y zapytaæ Rozpoczêcie procesu .................................. 336 przed umieszczeniem reklamy? .................... 313 Wskazówki praktyczne: Metody doboru reklam ..................................... 314 Jak dotrzymaæ zbli¿aj¹cego siê terminu? ...... 337 Dobór do treœci ............................................ 314 Wykorzystanie dotychczasowej wiedzy ....... 337 Dobór reklam do u¿ytkownika ..................... 314 Wskazówki praktyczne: Rodzaje reklam ................................................ 315 Jak opracowaæ w³aœciwy harmonogram? ...... 338 Bannery ....................................................... 315 Wskazówki praktyczne: Przyciski ...................................................... 315 Jak przeprowadzaæ burze mózgów? ............. 340 Wie¿owce .................................................... 315 Zarz¹dzanie zespo³em ..................................... 342 Pojawiaj¹ce siê i pozostaj¹ce okna ............. 316 Wskazówki praktyczne: Reklamy typu rich media ............................. 316 Jak pos³ugiwaæ siê ró¿nymi jêzykami? .......... 343 Reklamy tekstowe ....................................... 316 Wskazówki praktyczne: Odsy³acze sponsorowane ........................... 316 Jak nak³oniæ pracowników do wspó³pracy? ..... 344 Preferencje twórców serwisu ....................... 316 Organizowanie zespo³u .................................... 346 Standardy reklamy sieciowej ....................... 317 Zespó³ podstawowy ..................................... 346 Sponsorowanie serwisu .............................. 318 Zespó³ rozszerzony ..................................... 348 Umieszczanie produktów ............................ 318 Organizacja zespo³u projektowego .................. 352 Reklamy wideo ............................................ 318 Firmy sieciowe ............................................. 352 Przerywniki .................................................. 318 Du¿e korporacje i agencje sieciowe ............ 353 Strategie reklamowania witryny Ma³e firmy i firmy konsultingowe ................. 354 w ró¿nych mediach przekazu ........................ 319 Wskazówki praktyczne: Czêœæ praktyczna: Jak w³¹czyæ wszystkich do pracy? ................. 355 Jak bêdzie promowana witryna? ................... 321 Czêœæ praktyczna: Jak bêdzie promowana witryna? ................... 322 Dodatki 356 Do dzie³a! Poprawianie A Rady ekspertów 356 pozycji witryny na liœcie Skorowidz 372 wyszukiwanych adresów 323 Zasada dzia³ania wyszukiwarek .................. 324 Plan dzia³ania .............................................. 324 Je¿eli wszystko zawiedzie... ........................ 324 Umieszczenie witryny na liœcie wyszukiwania ... 325 Umieszczenie witryny w katalogu ................ 325 Umieszczenie witryny na listach ................. 325 Wskazówki praktyczne: Jak dostaæ siê na listê Yahoo!? ..................... 326 Poprawianie pozycji witryny na liœcie wyszukiwanych adresów ................. 327 Ciekawe rozwi¹zanie: Jak przygotowaæ stronê  dobrze notowan¹ w rankingach? ................... 330 Czêœæ praktyczna: Jak poprawiæ notowania witryny w rankingach wyszukiwarek? ........................ 331
110 Projektowanie witryny: organizacja i nawigacja Rozdzia³ 6. Organizacja i nawigacja Informacji… informacji…
Projektowanie witryny: organizacja i nawigacja 111 Jakby na to nie spojrzeæ, projekt internetowy to przede wszystkim organizacja i nawigacja. Chocia¿ Dobrze zorganizowana witryna wizualne dodatki takie jak kolor, grafika i style Struktura witryny mo¿e nie byæ najbardziej atrak- mog¹ bardziej przyci¹gaæ uwagê internautów, to cyjnym, ale jest niew¹tpliwie najwa¿niejszym w³aœnie struktura witryny decyduje o jej sukcesie. aspektem projektu. Dobrze zorganizowana struk- Jeœli witryna jest dobrze zorganizowana, u¿yt- tura sprawia, ¿e zadania u¿ytkownika s¹ proste — kownicy realizuj¹ swoje cele bez wysi³ku, poniewa¿ takie, jakie powinny byæ! W procesie organizacji dzia³y witryny dok³adnie odpowiadaj¹ ich potrze- witryny nale¿y uwzglêdniæ trzy ró¿ne elementy. bom. Jêzyk u¿ywany w witrynie jest dla nich zrozu- mia³y, a nawigacja jest konsekwentna i jasna. Z ko- Dobrze zorganizowana witryna cechuje siê: lei witryna Ÿle zorganizowana (czyli taka, która by³a n logiczn¹ struktur¹. Witryna powinna byæ budowana poœpiesznie lub przy jej tworzeniu bra- zorganizowana w sposób zrozumia³y dla no pod uwagê wy³¹cznie potrzeby w³aœciciela) bê- u¿ytkowników. Dzia³y witryny powinny dzie wprowadzaæ u¿ytkowników w b³¹d i w sposób odpowiadaæ potrzebom u¿ytkowników, niezamierzony ukrywaæ przed nimi potrzebne in- a wszystkie podobne elementy (lub zadania) powinny byæ pogrupowane. Zobacz równie¿ formacje i us³ugi. „Organizacja witryny”, str. 112; Sposób zorganizowania witryny tworzy jej szkie- let. Mo¿na go porównaæ do belek tworz¹cych kon- n konsekwentn¹ nawigacj¹. U¿ytkownicy strukcjê domu — organizacja stanowi strukturê, na chc¹ — patrz¹c na system nawigacji w witrynie — móc zorientowaæ siê, w którym której opiera siê projekt graficzny. miejscu witryny siê znajduj¹, a tak¿e Struktura witryny decyduje o jej zorientowaæ siê w kontekœcie (co jeszcze jest w witrynie) i w kierunku (jak siê gdzieœ sukcesie. Jeœli witryna jest dobrze dostaæ). Nawigacja powinna wyznaczaæ zorganizowana, u¿ytkownicy realizuj¹ wyraŸne œcie¿ki, w szybki i intuicyjny sposób prowadz¹ce u¿ytkowników do tego, czego swoje cele bez wysi³ku. potrzebuj¹. Zobacz równie¿ „Nawigacja Mimo to wiele osób ma trudnoœci z rozdziele- w witrynie”, str. 124; niem tych dwóch warstw projektu. Witryny wiele n zrozumia³ymi oznaczeniami. Nazwy, jakie trac¹ z powodu mylenia warstw. „Trzeba oddzieliæ wybierzemy dla dzia³ów witryny, powinny projekt struktury lub projekt funkcjonalny od pro- pomagaæ u¿ytkownikom w odnalezieniu tego, jektu komunikacyjnego” — mówi Peter Merholz, czego szukaj¹. Nie b¹dŸmy zbyt pomys³owi. wspólnik firmy konsultingowej Adaptive Path. „Lu- Po prostu mówmy jasno i wyraŸnie. Zobacz dzie zwykle maj¹ bzika na punkcie koñcowego wy- równie¿ „Nazywanie dzia³ów witryny”, str. 136. gl¹du i nie poœwiêcaj¹ ¿adnej uwagi niewidoczne- mu szkieletowi funkcjonalnemu”. Jednak ten szkielet jest najwa¿niejszy. Jeœli nie cokolwiek innego) jest wyznacznikiem jakoœci wi- zorganizujemy witryny w sposób, który wyda siê tryny” — mówi Jesse James Garrett, autor ksi¹¿ki u¿ytkownikowi rozs¹dny, ¿adne graficzne cuda nie The Elements of User Experience. „Kluczem do udanej sprawi¹, ¿e u¿ytkownik bêdzie zadowolony. „Wi- witryny jest stworzenie dobrej struktury”. tryna powinna dobrze dzia³aæ, zanim zacznie do- „Korporacje, a tak¿e konsultanci, zaczynaj¹ sto- brze wygl¹daæ” — mówi Merholz. „Funkcjonal- sowaæ siê do tej zasady” — mówi Lance McDaniel, noœæ jest najwa¿niejsza”. wiceprezes firmy konsultingowej SBI & Co. Pomimo swojej strategicznej wa¿noœci struktu- „Architektura informacji odebra³a projektowi ra witryny czêsto ustêpuje miejsca rzucaj¹cej siê bar- graficznemu miano najwa¿niejszego elementu pro- dziej w oczy warstwie projektu. Na szczêœcie coraz jektu internetowego” — mówi Lance McDaniel. wiêcej ludzi dostrzega wa¿noœæ struktury. „Projekt informacji przyæmiewa teraz projekt gra- „Kiedyœ moja praca polega³a na tworzeniu tre- ficzny witryny i zbiera wiêcej laurów za sukces wi- œci, ale zaj¹³em siê architektur¹ informacji, ponie- tryny, chocia¿ wczeœniej traktowany by³ zwykle lek- wa¿ zda³em sobie sprawê, ¿e struktura (bardziej ni¿ cewa¿¹co”.
112 Projektowanie witryny: organizacja i nawigacja Organizacja witryny Organizacja witryny powinna byæ najlepszym mo¿liwym po³¹czeniem tych trzech (czasami kon- Chocia¿ nie jest tak fascynuj¹ca jak projekt graficz- fliktowych) kryteriów. Jeœli witryna jest poœwiêco- ny ani tak presti¿owa jak treœæ redakcyjna lub tech- na tylko jednemu tematowi, ma jeden cel firmowy niczna, to jednak organizacja — lub architektura i tylko jeden typ u¿ytkownika (posiadaj¹cego jedn¹ informacji — czêsto jest zasadniczym czynnikiem potrzebê), to zadanie organizacji jest proste. Jednak sukcesu witryny. rzeczywistoœæ jest zazwyczaj bardziej skomplikowana. Architektura informacji jest czêœci¹ projektu, ale Jeœli witryna ma byæ skutecznie jest œciœle powi¹zana ze strategi¹. Jeœli witryna ma byæ skutecznie zaprojektowana i zorganizowana, to zaprojektowana i zorganizowana, musimy dobrze wiedzieæ, dla kogo jest przeznaczo- musimy wiedzieæ, dla kogo na i jakie cele ma zrealizowaæ. jest przeznaczona i jakie cele Zanim przyst¹pimy do procesu organizacji, mu- simy wyznaczyæ cele witryny (zobacz równie¿ „Usta- ma zrealizowaæ. lenie celów witryny korporacyjnej”, str. 28). Jeœli de- Ka¿da witryna ma zazwyczaj kilka grup u¿yt- cyzje takie nie zostan¹ podjête — lub nie zostan¹ kowników, którzy chc¹ w ró¿nym czasie zrealizo- przekazane zespo³owi projektuj¹cemu — niejasne waæ ró¿ne potrzeby, kilka ró¿nych typów treœci — wytyczne bêd¹ rzutowaæ na ca³y proces projektowa- które niekoniecznie dobrze siê ze sob¹ ³¹cz¹, i ró¿- nia, a¿ do ukoñczenia witryny. Zagmatwana misja ne cele do osi¹gniêcia — w zale¿noœci od tego, kogo ujawni siê u¿ytkownikowi poprzez myl¹ce katego- w firmie zapytamy o nie. rie i niespójny interfejs. „Wyzwaniem jest stworzenie dobrej, porz¹dnej „Dobra architektura witryny wymaga, by w or- struktury bez ¿adnych dziur” — mówi Garrett. ganizacji zosta³y uwzglêdnione wspólne cele” — „Wyzwania zwykle pojawiaj¹ siê, gdy próbujemy mówi Jesse James Garrett. „Jeœli nie uda siê nam tego obs³u¿yæ odbiorców o bardzo zró¿nicowanych po- osi¹gn¹æ, to nie bêdziemy mieli ani dobrej archi- trzebach albo gdy firmowe strategie nagle zaczynaj¹ tektury, ani dobrej witryny”. d¹¿yæ w przeciwnych kierunkach”. Kryteria organizacji witryny: „Przyjemnie jest malowaæ taki wyidealizowany n Cele u¿ytkownika. Organizacja witryny obraz projektu, w którym firma ma tylko jedn¹ stra- musi byæ zrozumia³a dla u¿ytkowników tegiê, na dodatek bardzo jasno sformu³owan¹” — oraz powinna umo¿liwiaæ realizacjê celów kontynuuje Garrett. „Prawdê mówi¹c, takie przy- internautów. padki nie istniej¹. Firmy maj¹ wiele ró¿nych stra- tegii — i to ró¿ni¹cych siê na poszczególnych n Cele firmowe. Organizacja witryny musi etapach”. tak¿e realizowaæ cele firmy, podkreœlaj¹c te Zwykle trudno jest dojœæ do porozumienia, która funkcje lub produkty, które s¹ najwa¿niejsze (lub czyja) z tych strategii jest najwa¿niejsza. „Ar- dla sukcesu firmy. chitektura informacji — bardziej ni¿ jakikolwiek n System klasyfikacji treœci. Treœæ i us³ugi inny aspekt projektu internetowego — bêdzie pod w witrynie zapewne daj¹ siê sklasyfikowaæ negatywnym wp³ywem polityki firmowej” — mówi za pomoc¹ naturalnych kategorii (lub Garrett. „Wszystkie wewnêtrzne bitwy o zasoby nachodz¹cych na siebie grup kategorii). w organizacji, bitwy o wsparcie dla ró¿nych firmo- wych inicjatyw, bitwy o lepsze wyeksponowanie przed kierownictwem znaczenia dzia³u maj¹ wp³yw na decyzje dotycz¹ce architektury witryny”.
Projektowanie witryny: organizacja i nawigacja 113 Tworzenie wskazówki praktyczne struktury witryny Witryna nie powinna Przed ró¿nymi witrynami stoj¹ ró¿ne wyzwania co byæ odbiciem firmy do struktury, jednak ich projektanci podejmuj¹ podobne kroki, by utworzyæ strukturê informacji. Jedn¹ z najczêœciej pope³nianych przez projektan- Sam proces mo¿e siê trochê ró¿niæ w zale¿noœci tów pomy³ek jest kszta³towanie witryny na wzór od osób czy od projektów. Mo¿na u¿ywaæ ró¿nych struktury firmy i przydzielenie ka¿demu dzia³owi narzêdzi, wypróbowywaæ odmienne taktyki i two- osobnej czêœci witryny z odnoœnikiem ze strony rzyæ inne dokumenty, ale podstawowe czynnoœci s¹ g³ównej. takie same. Jest to klasyczny b³¹d — mówi Michael Twida- le, profesor bibliotekoznawstwa i nauk informacyj- Cztery etapy tworzenia struktury witryny: nych z uniwersytetu w Urbana-Champaign w Illi- 1. Oceniamy, czym dysponujemy. nois. „Jest to dobre rozwi¹zanie, jeœli tworzymy Najpierw musimy ustaliæ, co witryna firmowy intranet, poniewa¿ mo¿emy zak³adaæ, ¿e powinna zawieraæ. ka¿dy pracownik zna hierarchiê firmy. Ale jeœli jest to strona publiczna, to mamy problem.” 2. Podejmujemy decyzjê, co jest najwa¿niejsze. Nie mo¿na zorganizowaæ Jeœli firmowa witryna staje siê (a tym bardziej zaprojektowaæ) witryny, dopóki nie wiemy, które elementy s¹ najwa¿niejsze. map¹ firmy, na pewno nie osi¹gniemy Czego najbardziej bêd¹ szukaæ u¿ytkownicy? zamierzonych rezultatów. Czego naszym zdaniem maj¹ u¿ywaæ? (Wendy Owen) 3. Wybierzmy zasadê organizacyjn¹. Struktura wiêkszoœci witryn opiera siê na Problem polega na tym, ¿e nasza wewnêtrzna jednym lub kilku systemach organizacyjnych. struktura nie ma ¿adnego znaczenia dla u¿ytkow- Niektóre witryny s¹ zorganizowane wed³ug ników. Ich cele rzadko mo¿na umieœciæ na sche- daty, inne wed³ug kategorii lub typu macie organizacyjnym firmy, a nasze nazwy dzia- u¿ytkownika. ³ów na pewno bêd¹ dla nich niezrozumia³e. Mo¿e siê to okazaæ trudne do wyjaœnienia wspó³pracow- 4. Kategoryzujmy zawartoœæ. Ostatni nikom, którzy chc¹, by ich miejsce w witrynie by³o i niezbêdny krok to zorganizowanie widoczne. zawartoœci witryny w sposób zrozumia³y „Musimy przyj¹æ do wiadomoœci, ¿e w projek- dla u¿ytkowników. cie internetowym jest wiele wewnêtrznej polityki” — kontynuuje Twidale. „Ka¿dy wierzy, ¿e wykony- 1. Oceniamy, czym dysponujemy wana przez niego praca jest niezbêdna w dzia³a- Pierwsz¹ czynnoœci¹ w procesie zorganizowania niu firmy. Oznacza to, ¿e ka¿dy chce, by jego dzia³ witryny (oczywiœcie po zdefiniowaniu celów witry- by³ widoczny na pierwszej stronie witryny. Co ja mówiê — ka¿dy chce znajdowaæ siê na samej gó- ny) jest rozpracowanie tego, czym mamy siê zaj¹æ. rze pierwszej strony!”. Co tak naprawdê ma znajdowaæ siê w witrynie? Wspó³pracownikom trzeba to uœwiadomiæ, jeœli W przypadku wielu witryn wystarczy prosta li- chcemy zbudowaæ witrynê ciesz¹c¹ siê powodze- sta, streszczaj¹ca zawartoœæ witryny. Niektóre witry- niem. „Struktura witryny nie powinna wygl¹daæ jak ny wymagaj¹ jednak przeprowadzenia inwentary- schemat organizacyjny firmy” — mówi projektant- zacji ca³ej istniej¹cej zawartoœci. ka Wendy Owen. „Jeœli firmowa witryna staje siê map¹ firmy, to na pewno nie osi¹gniemy zamie- rzonych rezultatów”.
114 Projektowanie witryny: organizacja i nawigacja Dwa sposoby oceny W restauracji dojdzie do realizacji zamówienia, 1. Stworzenie szkicu. Gdy tworzymy now¹ w internecie — nie. „Ludzie musz¹ jeœæ, ale czy witrynê, zazwyczaj wystarczy podstawowy musz¹ œlêczeæ w naszej witrynie?” — mówi Zeld- szkic, obejmuj¹cy typy treœci i us³ug, które man. „Jeœli przyt³oczymy ich zbyt wieloma mo¿li- bêd¹ dostêpne w witrynie (zw³aszcza jeœli woœciami, pójd¹ gdzie indziej”. witryna jest wzglêdnie ma³a). Powinniœmy tak¿e pamiêtaæ, ¿e nie wszyscy u¿ytkownicy s¹ dla nas jednakowo wa¿ni. „Wœród 2. Inwentaryzacja zawartoœci. Jeœli zmieniamy odbiorców jest wielu ró¿nych ludzi, nie ka¿dej gru- projekt istniej¹cej witryny lub budujmy du¿¹ pie u¿ytkowników musimy poœwiêcaæ tyle samo witrynê, mo¿emy potrzebowaæ sporz¹dzenia uwagi” — mówi Owen. „Na przyk³ad, jeœli w witry- skrupulatnej listy, zawieraj¹cej ka¿dy element nie sprzedajemy szampon i stanowi to 90% naszych dostêpny w witrynie (ka¿dy artyku³, obrotów, to skupimy siê na osobach zainteresowa- listê produktów, wszystkie ilustracje). nych szamponem. Nie bêdziemy tak samo trakto- Z tych list bêdziemy póŸniej korzystaæ, waæ osób kupuj¹cych nasze ¿yletki, poniewa¿ ich kategoryzuj¹c i organizuj¹c treœæ. sprzeda¿ stanowi tylko 5% naszych obrotów”. 2. Decydujemy, 3. Wybierzmy zasadê organizacyjn¹ co jest najwa¿niejsze Organizuj¹c witrynê, bêdziemy musieli wybraæ W trakcie organizowania witryny — zanim ustali- zasadê organizacyjn¹, wokó³ której powstanie struk- my ostateczn¹ strukturê — musimy zdecydowaæ, tura naszej witryny. Na przyk³ad sklepy organizo- które elementy s¹ w witrynie najwa¿niejsze. Czego wane s¹ wed³ug kategorii produktów, a elektroniczne bêdzie poszukiwaæ wiêkszoœæ u¿ytkowników? Od pamiêtniki wed³ug daty wpisu. czego zale¿y sukces finansowy witryny? Ka¿da witryna stanowi niepowtarzalne struktu- „Jednym z najwiêkszych b³êdów, jakie widaæ ralne wyzwanie, jednak wiêkszoœæ witryn mo¿na w witrynach, jest brak wyraŸnej hierarchii” — mówi zorganizowaæ na jeden z szeœciu sposobów: wed³ug Wendy Owen, dyrektor Gigant Ant Design. „Usta- kategorii, zadania, u¿ytkownika, jêzyka lub po³o- lenie, co jest najwa¿niejsze, naprawdê pomaga u¿yt- ¿enia, wed³ug daty lub dzia³u firmy (ostatni sposób kownikom w zrozumieniu organizacji witryny”. nie jest zalecany). Zobacz równie¿ „Szeœæ sposobów Jednak wiele firm wybiera ³atwiejsz¹ drogê i re- organizacji witryny”, str. 116. zygnuje z takiego postêpowania. Traktuj¹ prioryte- towo to, co szef chce uwa¿aæ za najwa¿niejsze lub 4. Kategoryzujemy zawartoœæ — co jest jeszcze gorsze — nadaj¹ wszystkiemu tak¹ Ostatni etap organizacji jest najwa¿niejszy. Zawar- sam¹ rangê. toœæ witryny trzeba podzieliæ na posiadaj¹ce jakieœ „Zbyt wiele witryn unika organizowania mate- znaczenie kategorie lub dzia³y. ria³ów wed³ug potrzeb u¿ytkowników” — mówi Teoretycznie jest to prosty proces. Wystarczy Jeffrey Zeldman (www.zeldman.com). „Gdy o archi- podzieliæ wszystko na logiczne grupy — podobne tekturze zaczynaj¹ decydowaæ komitety (a nie rzeczy dajemy razem, ró¿ne — osobno. Jednak fak- potrzeby u¿ytkowników), powstaj¹ witryny, w któ- tyczny proces podzia³u nie jest taki ³atwy. Trzeba rych jedno klikniêcie prowadzi do wszystkiego, za- rozwa¿yæ potrzeby u¿ytkowników, potrzeby firmy miast kierowaæ odbiorców œciœle zaplanowanymi i system klasyfikacji, widoczny w samej treœci. Jest œcie¿kami”. wiele sposobów rozwi¹zania tego problemu i czê- „Dostêp do wszystkiego za spraw¹ jednego klik- sto istnieje wiêcej ni¿ jedno dobre rozwi¹zanie. niêcia brzmi dobrze, ale jest z³ym rozwi¹zaniem, Zajêcie to jest zarazem satysfakcjonuj¹ce i fru- poniewa¿ przyt³acza u¿ytkownika” — wyjaœnia struj¹ce, poniewa¿ eleganckie rozwi¹zanie wyda siê Zeldman. „Jeœli odwiedzimy nowojorsk¹ jad³odaj- nam oczywiste, gdy ju¿ dokonamy podzia³u. Do niê z dwudziestopiêciostronicowym menu, skoñ- eleganckiego rozwi¹zania prowadzi wiele œcie¿ek, czymy na zamówieniu kawy i jajek, poniewa¿ nie a ka¿dy projektant musi znaleŸæ œcie¿kê odpowied- bêdziemy w stanie przegl¹daæ w nieskoñczonoœæ ni¹ dla siebie (zobacz równie¿ „Jak stworzyæ archi- listy wszystkich potraw do wyboru”. tekturê informacji?”, str. 115).
Projektowanie witryny: organizacja i nawigacja 115 wskazówki praktyczne Jak stworzyæ architekturê informacji? Nietrudno zrozumieæ, czym zajmuje siê architekt infor- Takie æwiczenie pomaga zobrazowaæ naturalne macji — organizuje treœæ strony w rozs¹dny sposób, grupowanie lub zobaczyæ, które elementy musz¹ nadaj¹c witrynie zrozumia³¹ strukturê. Jednak odro- znajdowaæ siê bli¿ej siebie. Garettowi podoba siê fi- binê trudniej jest zobrazowaæ, w jaki sposób to robi. zyczna strona tego procesu. „Takie æwiczenie — prze- „Jeœli ktoœ mówi o metodologii architektury infor- suwanie wizytówek na powierzchni sto³u — jest bar- macji, to mówi o wszystkim poza odcinkiem, na któ- dzo fajne. Jest w tym coœ, co pobudza mój mózg rym faktycznie powstaje architektura” — œmieje siê w taki sam sposób, jak godzina aktywnoœci umys³o- Jesse James Garrett, znany architekt systemów wej dziecka w przedszkolu”. informacji oraz autor ksi¹¿ki The Elements of User Poza tym jest to ca³kiem niez³y sposób na po- Experience. zbycie siê nadwy¿ki „Taka osoba bêdzie wizytówek. „Jeœli W pewnym momencie mówiæ o wszystkich bada- przychodzi³yby w pu- niach, koncepcjach i pla- cz³owiek czuje de³kach mniejszych nowaniu, a¿ dojdzie do prawie grawitacyjny ni¿ po 500 sztuk, to miejsca, w którym zaczy- pewnie musia³bym na siê tworzyæ architektu- poci¹g do któregoœ wymyœliæ inny spo- rê. PóŸniej mo¿e mówiæ rozwi¹zania. sób projektowania o wszystkim, co siê robi, architektury” — œmie- by sprawdziæ poprawnoœæ Jesse James Garrett je siê Garrett. stworzonej architektury. Jak wiêkszoœæ ar- Jednak faktyczny proces chitektów informacji, kreowania architektury Garrett twierdzi, ¿e jest dla nas tajemnic¹”. zawsze sprawdza kilka mo¿liwych pomys³ów, a naj- Tajemnica le¿y w zdolnoœci mózgu do segrego- lepsze rozwi¹zanie ujawnia siê samo. wania informacji, dopóki nie u³o¿¹ siê w porz¹dn¹ „Zazwyczaj rozwa¿am kilka ró¿nych pomys³ów, strukturê. Istnieje wiele ró¿nych sposobów wspomo- zanim skupiê siê na którymœ rozwi¹zaniu architekto- ¿enia tego procesu i wydaje siê, ¿e ka¿dy ma jak¹œ nicznym”. Czynniki decyzyjne zawsze zwi¹zane s¹ swoj¹ technikê. ze strategi¹ witryny. Co zdaniem firmy powinniœmy W wiêkszoœci przypadków projektanci zaczynaj¹ dziêki witrynie osi¹gn¹æ? Jakie oczekiwania wobec od listy z ca³¹ zawartoœci¹ witryny. Nastêpnie zmie- witryny maj¹ u¿ytkownicy? niaj¹ uk³ad elementów, wypróbowuj¹c ró¿ne sche- „Jest to proces równoczesnego rozwoju” — kon- maty organizacyjne i ró¿ne grupowanie, dopóki do- tynuuje Garrett. „Zazwyczaj w tym samym czasie bre rozwi¹zanie samo siê nie znajdzie. pracujê nad treœci¹ i przepycham wizytówki. Czêœæ „Mój proces na pewno uwzglêdnia tworzenie listy” mojego mózgu myœli o treœci, a czêœæ rozwi¹zuje pro- — mówi Garrett. „Tworzê listê, czasami tworzê sche- blemy strategiczne”. mat na komputerze, czasami bazgrzê po tablicy”. „W pewnym momencie czujê niemal grawitacyj- Jego ulubion¹ metod¹ jest przesuwanie wizytówek. ny poci¹g do jakiegoœ rozwi¹zania. Wtedy wiem, ¿e „Odwracam je na drug¹ stronê i wypisujê na nich na- model koncepcyjny zaczyna siê krystalizowaæ, a ele- zwy elementów. Nastêpnie przesuwam je po stole menty treœci zaczynaj¹ wpadaæ w odpowiednie miej- i sortujê, próbuj¹c je jakoœ do siebie dopasowaæ”. sca uk³adanki.”
116 Projektowanie witryny: organizacja i nawigacja Szeœæ sposobów organizacji witryny 1. Wed³ug kategorii 2. Wed³ug zadania Mo¿na stosowaæ, jeœli wszyscy u¿ytkownicy maj¹ Mo¿na stosowaæ, jeœli u¿ytkownicy mog¹ w witry- na uwadze to samo podstawowe zadanie — bez nie zrealizowaæ kilka zadañ, niekoniecznie ze sob¹ wzglêdu na to, czy jest nim zbadanie tematu, zakup powi¹zanych. produktu czy przedyskutowanie problemu. W witrynach zorganizowanych wed³ug zadañ iden- Podzia³ witryny ze wzglêdu na kategorie jest chy- tyfikuje siê ró¿ne cele, które mo¿e mieæ u¿ytkownik ba najbardziej popularny w internecie. Dzia³y witryny i próbuje skierowaæ go na œcie¿kê prowadz¹c¹ do to kolejne tematy lub kategorie oferowanych infor- ich realizacji. Rozwi¹zanie jest skuteczne z jednego macji. Witryny prezentuj¹ce artyku³y mog¹ byæ po- powodu — odpowiada mentalnoœci internauty, który dzielone ze wzglêdu na typy artyku³ów, witryny ko- jest zazwyczaj skoncentrowany na tym, co ma zro- mercyjne ze wzglêdu na typ produktów, a witryny biæ w nastêpnej kolejnoœci. z forami ze wzglêdu na temat dyskusji. Nerve.com organizuje strony osobiste zgodnie z ró¿nymi zadaniami, które ludzie mog¹ wype³niaæ, aby znaleŸæ swojego wymarzonego partnera. BlackPlanet Forum to miejsce, w którym u¿ytkownicy mog¹ dyskutowaæ o swoich problemach i zainteresowaniach. Ka¿dy u¿ytkownik jest tam z tego samego ogólnego powodu, dlatego fora mo¿na zorganizowaæ wed³ug tematów.
Projektowanie witryny: organizacja i nawigacja 117 3. Wed³ug u¿ytkownika 4. Wed³ug jêzyka lub po³o¿enia Mo¿na stosowaæ, jeœli witryna s³u¿y co najmniej Mo¿na stosowaæ, jeœli nasi odwiedzaj¹cy mówi¹ dwóm odrêbnym grupom u¿ytkowników z ró¿nymi ró¿nymi jêzykami lub ¿yj¹ w ró¿nych regionach geo- (chocia¿ czasami powi¹zanymi) celami i zaintereso- graficznych, wymagaj¹cych ró¿nej treœci lub us³ug. waniami. Wiele witryn jest zorganizowanych wed³ug jêzy- Witryny zorganizowane wed³ug u¿ytkowników gru- ka lub lokalizacji, aby sprostaæ potrzebom zró¿nico- puj¹ zadania i tematy, które mog¹ szczególnie zain- wanej jêzykowo lub pochodzeniowo bazie u¿ytkow- teresowaæ konkretny typ odwiedzaj¹cych i kieruj¹ ich ników. Jest to jednak nie tyle system organizacji, co w odpowiedni obszar. Ten system organizacji spraw- sposób skierowania u¿ytkowników do innych witryn, dza siê w przypadku witryn kojarz¹cych, które zbie- które z kolei musz¹ byæ zorganizowane wed³ug raj¹ „nabywców” i „sprzedawców” (lub pracodawców innego kryterium, odpowiadaj¹cemu zawartej w nich i osoby poszukuj¹ce pracy). treœci. Organizacjê wed³ug u¿ytkowników mo¿na tak¿e efektywnie stosowaæ w witrynach prezentuj¹cych tre- œci, komercyjnych lub korporacyjnych, które skupiaj¹ siê na kilku ró¿nych typach klientów. Na przyk³ad Ba- byCenter dzieli witrynê na czêœci dla ciê¿arnych oraz wzglêdem wieku dzieci. W witrynie National Geogra- phic znajduj¹ siê specjalne obszary dla dzieci, rodzi- ców i nauczycieli. Firma odzie¿owa Levi’s dzieli u¿yt- kowników wed³ug kraju pochodzenia, a firma meblarska Herman Miller ma podwitryny dla klien- tów, projektantów i inwestorów. Levi’s kieruje ró¿nych u¿ytkowników do ró¿nych witryn ze wzglêdu na region œwiata, z którego pochodz¹. Ka¿da witryna prezentuje treœci w sposób odpowiedni dla jêzyka, kultury i produktów dostêpnych w danym rejonie. Guru pomaga nawi¹zaæ kontakt firmom i konsultantom. Witryna jest zorganizowana wed³ug u¿ytkowników — kieruje pracodawców oraz przysz³ych pracowników w dwa ró¿ne miejsca, aby uzyskali dostêp do specjalistycznych us³ug przeznaczonych dla konkretnej grupy. Muzeum Guggenheima w Berlinie wita u¿ytkowników po angielsku lub niemiecku („Welcome” albo „Wilkommen”).
118 Projektowanie witryny: organizacja i nawigacja Szeœæ sposobów organizacji witryny — ci¹g dalszy 5. Wed³ug daty lub porz¹dku 6. Wed³ug dzia³u firmy Mo¿na stosowaæ, jeœli data lub kolejnoœæ elemen- Mo¿na stosowaæ tylko wtedy, gdy tów jest niezbêdna dla u¿ytkownika — na przyk³ad projektujemy witrynê intranetow¹, w aktualnoœciach, dziennikach, kalendarzach wyda- w której struktura dzia³ów firmy ma rzeñ lub instrukcjach krok po kroku. znaczenie dla odbiorców (na przyk³ad Ogólnie rzecz bior¹c, witryny nie zale¿¹ tak bar- na stronie uczelni) lub gdy klimat poli- dzo od dat jak inne œrodki przekazu. Daty s¹ wa¿ne tyczny firmy nie pozostawia nam ¿ad- dla publikacji drukowanych, poniewa¿ ca³e wydanie nego innego wyjœcia. i informacje w nim zawarte odpowiadaj¹ konkretnej Jeden z najczêstszych (i zrozumia³ych) b³êdów dacie. Witryny szybciej siê zmieniaj¹, s¹ uaktualnia- projektantów to kszta³towanie witryny wed³ug struk- nie kilka razy dziennie lub kilka razy do roku. tury firmy oraz zapewnienie ka¿demu dzia³owi jed- Oczywiœcie, istniej¹ wyj¹tki. Pamiêtniki interneto- nej sekcji w witrynie i odnoœnika na pierwszej stro- we (zwane „blogami”) s¹ organizowane wed³ug dat, nie. Takie rozwi¹zanie ze wzglêdów socjologicznych od najnowszego do najstarszego wpisu. Czasami jest dobre wewn¹trz firmy, ale nie jest dobre dla u¿yt- tak¿e w witrynach innego typu taki sposób organiza- kowników. cji jest jedynym rozwi¹zaniem — na przyk³ad przy Problem polega na tym, ¿e wewnêtrzna struktura prezentacji wydarzeñ na osi czasu lub publikacji ka- firmy nie ma najmniejszego znaczenia dla u¿ytkow- lendarza wydarzeñ itp. ników. Ich potrzeby rzadko mo¿na odwzorowaæ w we- wnêtrznej hierarchii. Chcemy na przyk³ad odwiedziæ witrynê lokalnego muzeum sztuki, poniewa¿ wyczy- taliœmy gdzieœ, ¿e odbêdzie siê tam wyk³ad na temat Picassa i chcielibyœmy dowiedzieæ siê, kiedy to bê- dzie. Czy wyk³ad bêdzie umieszczony w dziale „edu- kacja”, „wydarzenia” czy „program”? Trudno powie- dzieæ. Oczywiœcie, wszystko by³oby jasne, gdybyœmy pracowali w muzeum i wiedzieli, ¿e wyk³adami na temat sztuki nowoczesnej zajmuje siê pani Krysia z dzia³u przygotowuj¹cego program. Zeldman.com to prywatna witryna projektanta Jeffrey’a Zeldmana. Jak ka¿dy blog, jest zorganizowana wed³ug daty, z najnowszym wpisem widniej¹cym na samym pocz¹tku strony. Zobacz równie¿ „Witryna nie powinna byæ odbiciem firmy”, str. 113. Jak wiêkszoœæ szkó³, Uniwersytet Brown organizuje swoj¹ witrynê wed³ug wydzia³ów, z oddzielnymi sekcjami dla biura rekrutacyjnego, zwi¹zku sportowego, zrzeszenia absolwentów itd.
Projektowanie witryny: organizacja i nawigacja 119 Tworzenie zabawnych kategorii Organizacja witryny powinna byæ intuicyjna, ale nie musi byæ nudna. Witryny (zw³aszcza sklepy) kre- atywnie sortuj¹ce swoje towary w kategorie zaspokajaj¹ prawdziw¹ potrzebê u¿ytkowników, uzmys³a- wiaj¹c im mo¿liwe rozwi¹zanie. I przy okazji daj¹ trochê zabawy. RedEnvelope koncentruje siê ludziach kupuj¹cych na ostatni¹ chwilê prezenty. Zamiast odpytywaæ u¿ytkowników, czego chc¹, RedEnvelope pyta, dla kogo chc¹ kupiæ prezent. Przez podzielenie produktów w kreatywne kategorie stworzyli chyba najprzyjemniejszy w korzystaniu sklep internetowy. NetFlix to internetowa wypo¿yczalnia wideo, która rozwi¹zuje dwa najwiêksze problemy zwi¹zane z wypo¿yczaniem filmów. Gdy ludzie dotr¹ ju¿ do wypo¿yczalni, nie pamiêtaj¹, jaki film chcieli obejrzeæ i nigdy nie pamiêtaj¹, by zwróciæ film na czas. NetFlix pomaga w wyborze filmu, prezentuj¹c interesuj¹ce i pomys³owe kategorie (oraz pozwalaj¹c u¿ytkownikom tworzyæ listy).
120 Projektowanie witryny: organizacja i nawigacja Tworzenie zabawnych kategorii — ci¹g dalszy Bardzo rzadko struktura ca³ej witryny mo¿e byæ zor- ganizowana przy zastosowaniu tylko jednego syste- mu. Zazwyczaj witryny musz¹ wykorzystywaæ kilka systemów — jednoczeœnie lub kolejno — aby kate- goryzowaæ ca³¹ zawartoœæ i prowadziæ u¿ytkowników do obranego przez nich celu. Muzeum Guggenheima ma kilka oddzia³ów w ró¿- nych miastach. Ka¿dy oddzia³ wystawia coœ innego oraz obs³uguje lokaln¹ i miêdzynarodow¹ publicznoœæ. 1. Pierwsza strona zorganizowana wed³ug lokacji Pierwsza strona guggenheim.org dzieli u¿ytkowników wed³ug tego, którym oddzia³em muzeum s¹ zainteresowani (najechanie kursorem myszy na ka¿dy z obrazków ujawnia nazwê miasta, w którym znajduje siê dany budynek). 2. Lokalna witryna zorganizowana wed³ug jêzyka Pierwsza strona ka¿dej podwitryny (w³¹cznie z pokazan¹ na rysunku kolekcj¹ w Wenecji) pocz¹tkowo sortuje u¿ytkowników na podstawie jêzyka — w tym przypadku jest to jêzyk angielski lub w³oski. 3. Lokalna witryna zorganizowana wed³ug dzia³ów Pierwsza strona nowojorskiego oddzia³u muzeum oferuje szeœæ sekcji (zorganizowanych wed³ug dzia³ów), których lista powtarzana jest w ca³ej witrynie jako górny poziomy pasek nawigacyjny. Organizacja wed³ug dzia³ów rzadko jest dobrym rozwi¹zaniem, ale w tym wypadku siê sprawdza, poniewa¿ dzia³y odpowiadaj¹ wybieranym przez u¿ytkowników œcie¿kom. 4. Sekcje witryny zorganizowane wed³ug kategorii Gdy u¿ytkownicy wejd¹ na strony poœwiêcone kolekcji (odnoœnik The Collection), mog¹ wybraæ jeden z szeœciu sposobów prezentowania prac. Muzeum Guggenheima stosuje w witrynie kolejno kilka ró¿nych systemów organizacji, aby doprowadziæ u¿ytkowników do informacji, których szukaj¹.
Projektowanie witryny: organizacja i nawigacja 121 Herman Miller to firma meblarska znana ze swoich eleganckich rozwi¹zañ biurowych (na rysunku widaæ krzes³o Aeron) oraz klasycznych zestawów domo- wych autorstwa znanych projektantów, takich jak Eames. 1. Wed³ug kategorii produktu Wiêksza czêœæ strony g³ównej witryny jest poœwiêcona produktom. Firma dzieli meble na dwie podstawowe kategorie (wyposa¿enie biurowe i nowoczesna klasyka) i na stronie g³ównej umieœci³a punkty wejœcia do obydwu kategorii. 2. Wed³ug zadania Pierwsza strona daje tak¿e mo¿liwoœæ wyboru szybkich odnoœników do innych zadañ (poza ogl¹daniem mebli) — przeczytanie informacji na temat firmy, sprawdzenie ofert pracy itd. 3. Wed³ug u¿ytkownika Pierwsza strona zosta³a zaprojektowana g³ównie z myœl¹ o klientach, dlatego znajduj¹ siê tam osobne punkty wejœcia dla u¿ytkowników z innych kategorii (projektantów, inwestorów). Hewlett Packard to firma technologiczna znana z produkcji drukarek, komputerów itp. 1. Wed³ug u¿ytkownika Odwiedzaj¹cy mog¹ zidentyfikowaæ swoj¹ kategoriê, wybieraj¹c typ firmy lub biura, dla którego kupuj¹ produkty (zastosowania domowe i domowe biura, ma³e i œrednie firmy, przedsiêbiorstwa itd.). 2. Wed³ug kategorii produktu U¿ytkownicy mog¹ tak¿e wybraæ poszczególne poszukiwane produkty (drukarki, komputery stacjonarne, urz¹dzenia narêczne itp.). 3. Wed³ug zadania Pierwsza strona daje tak¿e mo¿liwoœæ wyboru szybkich odnoœników do innych zadañ, takich jak przeczytanie informacji na temat firmy czy przeszukanie ofert pracy.
122 Projektowanie witryny: organizacja i nawigacja Dokumentowanie struktury witryny Gdy ju¿ podjêliœmy decyzjê co do struktury witryny, 1. Mapa witryny musimy jakoœ udokumentowaæ nasz¹ wizjê, aby inni Mapa witryny — zwana równie¿ schematem bloko- mogli j¹ poznaæ. wym — przedstawia organizacjê dzia³ów witryny i ich Istnieje kilka sposobów dokumentowania, które po- wzajemne dopasowanie. zwalaj¹ twórcom internetowym zobrazowaæ struk- Ka¿dy blok odpowiada jednej stronie w witrynie, turê, przekazaæ decyzje organizacyjne i œledziæ pocz¹wszy od strony g³ównej. Przedstawiaj¹cy stos bloków rysunek zazwyczaj reprezentuje zestaw stron zmiany wraz z rozwojem witryny. Do narzêdzi tych o tym samym projekcie i podobnej treœci (np. strony zaliczamy mapê witryny, schemat strony i œcie¿ki generowane na podstawie bazy danych). Mo¿e tak¿e u¿ytkownika. Czêsto stosuje siê je razem, aby przed- reprezentowaæ dzia³ witryny, który zosta³ rozrysowany na osobnej mapie. stawiæ ró¿ne aspekty struktury witryny i doœwiad- czeñ u¿ytkownika. Ka¿da linia reprezentuje po³¹czenie miêdzy stronami lub œcie¿kê, któr¹ mo¿e pod¹¿aæ u¿ytkownik. Dlatego Trzy sposoby wizualizacji struktury: ka¿da linia lub grupa linii stanowi nawigacyjne wyzwanie. 1. Mapa witryny daje obraz witryny z lotu ptaka, Mapa witryny tworzona jest przez architekta informacji pokazuj¹c, jak zorganizowane s¹ poszczególne (lub inn¹ osobê, która organizuje witrynê) po ustaleniu sekcje i jak do siebie pasuj¹. struktury organizacyjnej, ale przed zaprojektowaniem systemu nawigacyjnego. 2. Schemat pokazuje wszystkie elementy, które bêd¹ znajdowaæ siê na danej stronie, oraz sposób ich wzajemnego powi¹zania. 3. Œcie¿ka u¿ytkownika pokazuje „ekran za ekranem” — drogê u¿ytkownika po witrynie, gdy próbuje zrealizowaæ konkretne zadanie.
Projektowanie witryny: organizacja i nawigacja 123 2. Œcie¿ka u¿ytkownika 3. Schemat strony Œcie¿ka u¿ytkownika — zwana tak¿e schematem Sposób ten nazywamy równie¿ rozrysowaniem u¿ytkownika — pokazuje szczegó³owo (ekran za ekra- kadrów. Schemat zawiera wszystkie elementy, które nem) to, czego doœwiadcza u¿ytkownik, który próbuje znajd¹ siê na stronie i pokazuje (w przybli¿eniu), w któ- w witrynie wykonaæ konkretne zadanie. rym miejscu bêd¹ umieszczone. Ka¿dy blok w wykresie reprezentuje jeden ekran, Ka¿dy blok reprezentuje jeden element na stronie widziany przez u¿ytkownika pokonuj¹cego kolejne eta- (grafikê, pasek nawigacyjny, nag³ówek), bez zag³êbia- py zadania. nia siê w szczegó³y dotycz¹ce wygl¹du elementu. Ka¿da linia reprezentuje œcie¿kê, któr¹ u¿ytkownik Schemat jest zazwyczaj tworzony dla ka¿dego typu mo¿e pod¹¿yæ. Powodem tworzenia wykresów œcie- strony w witrynie (lub dla ka¿dego wzorca), zanim za- ¿ek u¿ytkownika jest chêæ przewidzenia wszystkich czn¹ siê prace nad projektem graficznym. Poziom mo¿liwych dróg nawigowania po witrynie, nawet tych, szczegó³owoœci mo¿e byæ ró¿ny. Niektóre schematy s¹ które mog¹ powstaæ w wyniku b³êdu. bardzo szczegó³owe — prezentuj¹ dok³adne rozmiesz- czenie ka¿dego elementu. Inne s¹ bardziej pobie¿ne Ka¿dy blok w kszta³cie karo symbolizuje punkt de- — zawieraj¹ podstawowe elementy i sugestie co do cyzyjny. Linie wychodz¹ce z takiego bloku przedsta- ich wzglêdnego rozmieszczenia. wiaj¹ œcie¿ki, które mo¿e wybraæ u¿ytkownik. Œcie¿ka u¿ytkownika jest szczególnie wa¿na w witry- nach opartych na aplikacjach lub transakcjach, gdy u¿ytkownik rejestruje siê w us³udze, kupuje produkt lub u¿ywa narzêdzi dostêpnych w witrynie. Taki wykres mo¿e byæ tak¿e pomocny do zobrazowania — i popra- wienia — ogólnych doœwiadczeñ u¿ytkownika ka¿dej witryny.
124 Projektowanie witryny: organizacja i nawigacja Nawigacja w witrynie Osiem z³ych pomys³ów Dobry projekt graficzny to dobra nawigacja. Gdy na nawigacjê mówimy, ¿e witryna jest dobrze zaprojektowana lub Istnieje wiele ró¿nych sposobów umo¿liwienia u¿yt- dobrze dzia³a, zazwyczaj mamy na myœli to, ¿e ma kownikowi nawigowania w witrynie. Jedne sposo- wspania³¹, intuicyjn¹ nawigacjê. by s¹ lepsze, inne gorsze, a inne zupe³nie nieuda- Nawigacja wizualnie wyra¿a strukturê witryny ne. Wiem, poniewa¿ wypróbowa³am wszystkie — i jest to podstawowy problem, który trzeba rozwi¹- nawet te lataj¹ce i p³ywaj¹ce dziwad³a. zaæ w trakcie projektowania strony. Problem ten nie 1. Rozwijane menu ukrywaj¹ce sekcje witryny, jest b³ahy. W przeciwieñstwie do czasopism, skle- zamiast je ujawniaæ. pów lub produktów w œwiecie rzeczywistym, witry- ny s¹ rzecz¹ abstrakcyjn¹ — u¿ytkownik nie mo¿e 2. W³asnorêcznie zrobione ikony, których u¿ytkownicy nie zrozumiej¹ bez wzglêdu intuicyjnie oceniæ wielkoœci witryny lub tego, w któ- na nasze starania i w³o¿ony trud. rym jej miejscu siê znajduje (zobacz równie¿ „Jak ludzie nawiguj¹ w internecie?”, str. 125). 3. Kolorowe bloki, których u¿ytkownicy nawet Nawigacja musi dostarczyæ wszystkich tych nie zauwa¿¹, a na pewno nie przypisz¹ im ¿adnego znaczenia. wskazówek. Musi powiedzieæ u¿ytkownikom, co oferujemy, pozwoliæ zorientowaæ siê, w którym 4. Metafory wizualne, takie jak rysunek biura miejscu siê znajduj¹ i skierowaæ ich do miejsca prze- lub lady sklepowej, który u¿ytkownicy mogliby znaczenia — wszystko jednoczeœnie. klikaæ, jednak uznaj¹ go co najwy¿ej za interesuj¹cy. Czego u¿ytkownicy dowiaduj¹ siê 5. Wymyœlne nazwy sekcji witryny, których dziêki nawigacji? u¿ytkownicy nie odwiedz¹ (poniewa¿ nie n Co witryna ma do zaoferowania. bêd¹ ich rozumieæ). Przegl¹daj¹c pasek nawigacyjny (lub dowoln¹ 6. Elementy nawigacyjne, które zmieniaj¹ inn¹ wybran¹ przez nas formê nawigacji), swoje po³o¿enie i pojawiaj¹ siê w ró¿nych odwiedzaj¹cy dowiaduje siê, co witryna zawiera. miejscach na stronach. Powtarzajcie za mn¹: n Jak witryna jest zorganizowana. nie bêdê dezorientowaæ moich u¿ytkowników, nie bêdê dezorientowaæ moich u¿ytkowników… Wielu u¿ytkowników analizuje elementy nawigacyjne, aby zrozumieæ strukturê 7. Elementy nawigacyjne w nieoczekiwanych witryny. W ten sposób mog¹ uzyskaæ miejscach. Na niespodzianki jest miejsce kontekst aktualnie ogl¹danej strony i czas, ale nawigacja nie powinna byæ niespodziank¹. i bardziej pewnie nawigowaæ. 8. Lataj¹ce, p³ywaj¹ce elementy, które n Gdzie wewn¹trz witryny siê znajduj¹. u¿ytkownik musi z³apaæ, gdy przelatuj¹ po W internecie — jak w œwiecie rzeczywistym ekranie. Nasza nawigacja nie powinna byæ — dobry system nawigacyjny zawsze gr¹, chyba ¿e ca³a witryna jest gr¹. Ale nawet pokazuje, gdzie znajduje siê u¿ytkownik wtedy nawigacja nie powinna byæ gr¹. (wyobraŸmy sobie mapê z du¿ym czerwonym krzy¿ykiem i napisem „jesteœ tutaj”). n Jak znaleŸæ to, czego szukaj¹. Zadanie, które nawigacja koniecznie wie na pliki dziennika, które wykazuj¹ co innego. musi spe³niaæ — w jak najszybszy „Interfejs witryny nale¿y projektowaæ tak, jakby i najskuteczniejszy sposób pomóc znaleŸæ wszyscy u¿ytkownicy zawsze ogl¹dali go po raz u¿ytkownikom to, czego szukaj¹. pierwszy” — mówi Cate Corcoran, by³a dyrektor- Gdy projektujemy strukturê nawigacji, kusz¹ce jest ka do spraw komunikacji w PeoplePC. „Wszystkie postawienie za³o¿enia, ¿e bêdziemy mieli lojalnych strony powinny byæ zaprojektowane tak, by mog³y odbiorców, którzy z czasem naucz¹ siê przemiesz- dzia³aæ samodzielnie. Nie ka¿dy internauta wejdzie czaæ po naszej witrynie. Popatrzmy jednak uczci- na nasz¹ witrynê frontowymi drzwiami.”
Projektowanie witryny: organizacja i nawigacja 125 odrobina teorii Jak ludzie nawiguj¹ w internecie? Aby skutecznie projektowaæ na potrzeby internetu, Wiêkszoœæ osób nawiguje w witrynach trzeba najpierw zrozumieæ, jak ludzie zachowuj¹ siê, gdy buszuj¹ po internecie. Sieæ jest ca³kowicie in- tak, jakby biegli przez lotnisko, nym œrodkiem przekazu ni¿ druk, telewizja czy inne próbuj¹c znaleŸæ odpowiedni¹ bramkê. media, do których jest porównywana. Projektowanie dla u¿ytkowników „w biegu” Z ka¿dego medium korzystamy w inny sposób: Odk³adaj¹c teoriê na bok, mo¿emy stwierdziæ, ¿e w³a- œnie przez przestrzenn¹ naturê internetu nawigacja n Czytamy czasopisma. jest tak wa¿na. Z wielu powodów projektowanie wi- n Ogl¹damy telewizjê. tryny przypomina bardziej projektowanie przestrzeni n Nawigujemy w internecie tak, jakby by³a to publicznej ni¿ drukowanej strony. rzeczywista przestrzeñ. U¿ytkownicy docieraj¹ do witryny z jakiegoœ po- wodu, a celem przyœwiecaj¹cym nam podczas pro- Ekran komputera jest fizycznie p³aski — g³adki, jektowania witryny jest jak najszybsze skierowanie bardziej p³aski ni¿ ksi¹¿ka, jednak ludzie poruszaj¹ ich na jak najprostsz¹ drogê, dobrze oznakowan¹ siê w internecie tak, jakby to by³a przestrzeñ. Ka¿d¹ powszechnie rozpoznawanymi symbolami. stronê przeszukuj¹ pod k¹tem obecnoœci sygna³ów Dlatego projekt internetowy jest problemem za- nawigacyjnych, potem skupiaj¹ siê na swoim miej- równo konstrukcyjnym, jak i wizualnym. A jeœli spoj- scu docelowym i myœl¹ „gdzie powinienem pójœæ” rzymy na niego z architektonicznego punktu widze- zamiast „co powinienem przeczytaæ”. nia, jest to wyzwanie, poniewa¿ ludzie nie mog¹ Ró¿nica nie jest ma³a. Przejœcie od czytania cza- polegaæ w nim na wizualnych wskazówkach (lub in- sopisma do korzystania z internetu wymaga zmiany nych zmys³ach), wykorzystywanych do nawigacji kognitywnej — gdy u¿ytkownik patrzy na monitor, w rzeczywistej przestrzeni. kursor na ekranie (kierowany trzyman¹ w rêce mysz¹) W rzeczywistym œwiecie ludzie ³atwiej mog¹ jest przed³u¿eniem jego w³asnego cia³a. Dlatego na- oceniaæ wielkoœæ rzeczy — widz¹ rozmiary budynku wigacja w internecie jest tak podobna do nawigacji i widz¹, kto siê w nim znajduje. Mog¹ okreœliæ g³o- w przestrzeni fizycznej. œnoœæ dŸwiêków, poczuæ zapachy. Widz¹, gdzie s¹ W³aœnie to przewidywa³ Marshall McLuhan. We drzwi, a jeœli siê zgubi¹, zawsze mog¹ cofn¹æ siê wczesnych latach istnienia telewizji McLuhan opu- nieco po œladach i poprosiæ kogoœ o pomoc. blikowa³ teorie dotycz¹ce wp³ywu mediów na ludzi. Internet jest jednak rzecz¹ abstrakcyjn¹ i nie ofe- „Wszystko jest przed³u¿eniem jakiejœ ludzkiej zdol- ruje takich wskazówek. Nasze postrzeganie zmys³o- noœci — fizycznej lub psychicznej” — napisa³ w ksi¹¿- we jest ograniczone do tego, co widzimy w oknie prze- ce PrzekaŸnik jest przekazem (ang. The Medium is gl¹darki. Nie ma dooko³a nikogo, kto móg³by nam the Message). „Ko³o jest przed³u¿eniem stopy. Ksi¹¿- w razie czego pomóc. Rolê tak¹ ma spe³niaæ projekt ka jest przed³u¿eniem wzroku… ubranie jest przed- witryny — a w szczególnoœci struktura nawigacji. ³u¿eniem skóry… obwód elektryczny jest przed³u¿e- Projekt musi informowaæ, jakiego typu jest dana wi- niem centralnego systemu nerwowego”. tryna, jaka jest jej zawartoœæ, w którym miejscu aktu- Jeœli u¿ytkownik odwzorowuje siebie na ekranie alnie znajduje siê odwiedzaj¹cy i gdzie mo¿e pójœæ (kursor staje siê abstrakcyjn¹ reprezentacj¹ jego cia- dalej oraz jak wróciæ. ³a), to posuwamy siê du¿o dalej na drodze do wyja- Nikt nie mówi³, ¿e bêdzie to proste. œnienia nie tylko tego, jak ludzie czuj¹ siê w interne- cie, ale tak¿e tego, jak dzia³aj¹. Wiêkszoœæ osób nawiguje w witrynach tak, jakby biegli przez lotnisko, próbuj¹c znaleŸæ odpowiedni¹ bramkê — szybko, celowo i czasami z desperacj¹.
126 Projektowanie witryny: organizacja i nawigacja Nawigacja lokalna i globalna Wiêkszoœæ witryn musi rozwi¹zaæ problem skom- plikowanej nawigacji, tworz¹c j¹ w sposób warstwo- wy. Ogólna organizacja witryny stawia inne proble- my ni¿ funkcjonalnoœæ poszczególnych obszarów witryny. Dlatego tylko naprawdê ma³e witryny nie bêd¹ musia³y zmagaæ siê z problemami nawigacji lokalnej i globalnej. Na tej przyk³adowej stronie witryny Webmonkey widaæ nawigacjê globaln¹, lokaln¹ i sieciow¹. Trzy typy nawigacji (1) Pasek nawigacji sieciowej (czasami zwany n Nawigacja globalna s³u¿y do wskazania, „paskiem firmowym”) prowadzi do firmy rodzicielskiej w którym miejscu witryny u¿ytkownik siê serwisu — Terra-Lycos. (2) Pasek nawigacji znajduje oraz jak mo¿e dostaæ siê w inne globalnej prowadzi do strony g³ównej serwisu miejsce. Powinna pozostawaæ niezmienna Webmonkey i oferuje rozwijane menu elementów w ca³ej witrynie. dostêpnych w witrynie (nie pokazanych tutaj). n Nawigacja lokalna zaczyna siê od miejsca, Nawigacja globalna istnieje tak¿e pod postaci¹ (3) œcie¿ki — elementu pokazuj¹cego sposób w którym koñczy siê nawigacja globalna, dojœcia do danej strony od strony g³ównej. daj¹c u¿ytkownikom narzêdzia do (4) Nawigacja lokalna — odnoœniki do pozosta³ych poruszania siê — lub ukoñczenia zadañ stron artyku³u — istnieje pod postaci¹ odnoœników — wewn¹trz konkretnej czêœci witryny. wypisanych na lewym marginesie strony. n Nawigacja sieciowa to odnoœniki do innych witryn wewn¹trz wiêkszej sieci. Nawigacja sieciowa Rozwi¹zanie to s³u¿y bar- dziej polityce ni¿ u¿ytkownikom. Nawigacja siecio- Nawigacja globalna Zwana jest te¿ nawigacj¹ wa to warstwa nawigacji czêsto zupe³nie nieistotna sta³¹. Pomaga u¿ytkownikom nawigowaæ w witry- dla u¿ytkownika, ale wa¿na dla interesów. Witryny nie, by mogli znaleŸæ swoje obszary zainteresowañ. stanowi¹ce czêœæ wiêkszej sieci — lub nale¿¹ce do Nawigacja globalna dotyczy zwykle hierarchii jednej firmy rodzicielskiej, która je kontroluje — informacji lub szerokich kategorii zawartoœci. czêsto musz¹ publikowaæ odnoœniki do pozosta- Umieszczona jest zazwyczaj w ten sam sposób ³ych witryn. i w tym samym miejscu na ka¿dej stronie i wymie- niane s¹ w niej zawsze te same opcje. Powinna jed- nak oferowaæ jak¹œ wizualn¹ wskazówkê odnoœnie Równowa¿enie warstw nawigacji tego, w której czêœci witryny u¿ytkownik aktualnie Bardzo trudna mo¿e byæ decyzja o tym, ile elemen- siê znajduje. tów nawigacyjnych powinno siê znaleŸæ na pojedyn- czej stronie. Jeœli umieœcimy ich zbyt du¿o, to mo¿e Nawigacja lokalna Gdy u¿ytkownik dotrze ju¿ siê okazaæ, ¿e przys³onimy omawiany temat i do- w witrynie do „miejsca przeznaczania”, ujawni siê s³ownie wypchniemy treœæ poza stronê. Jeœli damy nawigacja lokalna. Zazwyczaj jest rozwi¹zaniem ja- ich zbyt ma³o, to u¿ytkownicy mog¹ straciæ orien- kichœ mankamentów funkcjonalnoœci aplikacji, tacjê w witrynie. pomaga sklasyfikowaæ tematycznie artyku³y lub te¿ Równowagê pomiêdzy nawigacj¹ lokaln¹ i glo- umo¿liwia zmianê stron wewn¹trz artyku³u. baln¹ osi¹ga siê w ró¿nych witrynach w ró¿ny spo- sób. Na przyk³ad w katalogach nawigacja lokalna jest doœæ ograniczona. Sztywna nawigacja globalna czêsto wchodzi na obszary lokalne. Z kolei gry i wy- stawy sztuki prawie nie maj¹ nawigacji globalnej poza przyciskami prowadz¹cymi do strony g³ównej.
Projektowanie witryny: organizacja i nawigacja 127 Tworzenie Dlaczego rozwijane menu systemu nawigacyjnego nie nadaj¹ siê do nawigacji? Istnieje wiele ró¿nych sposobów projektowania sys- Rozwijane menu nie nadaj¹ siê do nawigacji, gdy¿ temu nawigacyjnego — zak³adki, paski, menu, iko- zgrabnie ukrywaj¹ wiele informacji na bardzo ma- ny, mapy obrazkowe, proste listy. Wybór rozwi¹za- ³ej przestrzeni. Poniewa¿ ich dzia³anie jest zrozu- nia dla naszej witryny zale¿y oczywiœcie od tego, jaki mia³e samo przez siê, s¹ bardzo popularnym sys- problem musimy rozwi¹zaæ. temem nawigacji. Niestety, nie sprawdzaj¹ siê zbyt W wiêkszoœci przypadków mo¿emy skorzystaæ dobrze. „Nauczy³em siê, ¿e lista rozwijana powinna s³u- z istniej¹cych konwencji nawigacyjnych i dostoso- ¿yæ wy³¹cznie do wype³niania formularzy” — mówi waæ je lub po³¹czyæ tak, by zaspokoi³y nasze potrze- Peter Merholz, wspólnik w firmie Adaptive Path. by. Wiele systemów nawigacyjnych sprawdza siê „Nigdy nie powinna byæ stosowana jako element w wiêkszoœci witryn (zobacz równie¿ „Dwanaœcie nawigacyjny”. systemów nawigacyjnych”, str. 128). Mo¿e siê jednak zdarzyæ, ¿e zechcemy zaprojek- Menu w postaci listy rozwijanej towaæ w³asny system nawigacyjny. Pamiêtajmy jednak, to efektywny sposób ukrywania ¿e innowacja zawsze ma swoj¹ cenê. Systemy niestan- dardowe s¹ trudniejsze do zaprojektowania i trudniej- informacji, które chcielibyœmy sze w obs³udze przez u¿ytkowników. W wiêkszoœci pokazaæ u¿ytkownikom. przypadków — zw³aszcza jeœli ktoœ nie jest bieg³ym (Peter Merholz) projektantem — w zupe³noœci powinny nam wy- starczyæ standardowe i znane systemy nawigacyjne. Problem polega na tym, ¿e rozwijane menu ukrywaj¹ informacje. Jeœli u¿ytkownik nie przewi- Pamiêtajmy jednak, ¿e innowacja duje, ¿e coœ jest ukryte — jak w przypadku listy zawsze ma swoj¹ cenê. Systemy krajów lub miesiêcy w roku — nie bêdzie wiedzia³, niestandardowe s¹ trudniejsze co znajduje siê w liœcie menu i nie bêdzie chcia³ nawet na ni¹ spojrzeæ. do zaprojektowania i trudniejsze „Ludzie nie bêd¹ wiedzieli, co siê tam znajduje” w obs³udze przez u¿ytkowników. — kontynuuje Merholz. „Po prostu zignoruj¹ ten „Istniej¹ powody, dla których pasek nawigacyjny element. Menu w postaci listy rozwijanej to œwiet- w lewej czêœci strony jest konwencj¹” — mówi pro- ny sposób ukrywania informacji, które chcieliby- jektant Jim Frew. „Wiele osób go u¿ywa. Wiele osób œmy pokazaæ u¿ytkownikom”. Martha Brockenbrough — by³a redaktor zna tê konwencjê. To dzia³a. Wiele innych, niekon- MSN.com — ca³kowicie zgadza siê z t¹ opini¹. wencjonalnych interfejsów mo¿e dzia³aæ równie Serwis MSN próbowa³ kiedyœ stosowaæ listy roz- dobrze. Jednak trzeba byæ bardziej pilnym, by za- wijane, ale okaza³y siê nieskuteczne. W tamtym czê³y dzia³aæ. Trzeba w³o¿yæ w nie du¿o wiêcej pra- czasie stronê g³ówn¹ witryny odwiedza³o szeœæ cy, umiejêtnoœci i dba³oœci od strony technicznej”. milionów u¿ytkowników dziennie. „Jednak tylko 200 Jeœli zdecydujemy siê wprowadziæ w³asny system osób odkrywa³o skarby ukryte na dnie rozwijane- nawigacyjny, nadal mo¿e przydaæ siê odniesienie do go menu” — mówi Brockenbrough. konwencjonalnych systemów — zobaczmy, co mo¿emy zrobiæ, by u¿ytkownikom by³o ³atwiej zrozumieæ nasz system (zobacz równie¿ „Dlaczego nale¿y stosowaæ standardy?”, str. 200). Pod ¿adnym pozorem nie mo¿emy zaprojekto- Nikt nie znajdzie treœci ukrytych za odnoœnikiem waæ systemu, którego u¿ytkownicy musieliby w rozwijanym menu” — zdecydowanie kontynu- „uczyæ siê”. Jeœli system nawigacyjny nie jest intu- uje Brockenbrough. „Nikt nie widzi, co znajduje siê icyjny, to nie bêdzie u¿ywany. „Zadaniem projek- w takim menu. Nie u¿ywajmy ich. Gwarantujê, ¿e tantów interfejsu jest nie uczyæ ludzi niczego” — siê nie sprawdzaj¹”. mówi Cate Corcoran. „Nie przychodz¹ do witryny po to, by uczyæ siê z niej korzystaæ”.
128 Projektowanie witryny: organizacja i nawigacja Dwanaœcie systemów nawigacyjnych 1. Zak³adki 2. Panel z lewej strony Mo¿na je stosowaæ, gdy witryna jest podzielona na Mo¿na go stosowaæ jako mechanizm nawigacji lokal- kategorie — zw³aszcza kategorie produktów. nej lub globalnej w witrynie niemal ka¿dego rodzaju. Najs³ynniejsze zastosowanie tego systemu mo¿na Po raz pierwszy zosta³ u¿yty w witrynie CNet (stam- zaobserwowaæ w witrynie Amazon.com. Zak³adki t¹d jest najlepiej znany). Lewostronny panel szybko sta³ tworz¹ wizualne skojarzenie z folderami, pozwalaj¹c siê sztampowym rozwi¹zaniem nawigacyjnym, lub u¿ytkownikom zrozumieæ, ¿e znajduj¹ siê w jednym mo¿e nawet niekwestionowan¹ konwencj¹ internetow¹. z kilku równoleg³ych obszarów wewn¹trz witryny. Gdy Jest popularny, poniewa¿ dobrze rozwi¹zuje wiele pro- u¿ytkownik klika zak³adkê (na przyk³ad kategorii muzy- blemów nawigacyjnych oraz ma mo¿liwoœæ skalowa- ka), odpowiadaj¹cy jej folder przesuwa siê do przodu nia — w miarê rozrastania siê witryny wystarczy doda- i zostaje ods³oniêta zawartoœæ folderu. waæ do panelu kolejne odnoœniki lub przyciski Ta wizualna metafora zosta³a po raz pierwszy za- (wyd³u¿aj¹c go w dó³ strony). stosowana przez firmê Apple Computer w interfejsie Lewostronny panel daje do dyspozycji proste, ela- systemu MacOS (który szeroko wykorzystywa³ meta- styczne i sta³e Ÿród³o nawigacji w ca³ej witrynie. Panel forê akt i folderów); teraz jest powszechnie stosowana wyjaœnia strukturê witryny, ods³ania sekcje, które mo- w oprogramowaniu. Jest tak¿e szeroko u¿ywana — gliœmy wczeœniej pomin¹æ, trwale udostêpnia miejsce dodajmy, niew³aœciwie u¿ywana — w internecie. Za- na funkcjê która powinna byæ dostêpna w ca³ej witrynie k³adki najlepiej sprawdzaj¹ siê, gdy w witrynie mamy (na przyk³ad pole wyszukiwania), a tak¿e udostêpnia seriê ró¿nych, ale równoleg³ych kategorii. Dlatego sys- powierzchniê na ma³e og³oszenia. tem ten jest tak skuteczny w witrynach komercyjnych — jest œwietnym sposobem zorganizowania ró¿nych kategorii produktów, jednoczeœnie prezentuj¹c szero- koœæ naszej oferty. Jednak zak³adki wygl¹daj¹ dziw- nie, gdy s³u¿¹ jako pojemnik na niepowi¹zane ze sob¹ dzia³y witryny. Wykorzystuj¹cy zak³adki system nawigacyjny witryny Amazon naœladuje wiele sklepów CNN.com wykorzystuje lewostronny panel, aby internetowych i witryn innego typu. wymieniæ wszystkie obszary tematyczne, a witryna podró¿nicza Expedia wykorzystuje panel jako narzêdzie do wyszukiwania.
Projektowanie witryny: organizacja i nawigacja 129 3. Pasek na górze strony 4. Œcie¿ka Mo¿na go stosowaæ jako mechanizm nawigacji glo- Mo¿na j¹ stosowaæ, gdy witryna zawiera du¿o u³o¿o- balnej w witrynie niemal ka¿dego rodzaju. nych hierarchicznie informacji, do których u¿ytkownicy Prawie ka¿da witryna wykorzystuje do nawigacji dochodz¹, postêpuj¹c œcie¿k¹ pojêciow¹ g³êbiej i g³ê- obszar wzd³u¿ górnego brzegu strony. W niektórych biej do wnêtrza witryny. witrynach znajduje siê tam g³ówne narzêdzie nawiga- Œcie¿ka daje odwiedzaj¹cym wizualn¹ reprezenta- cyjne. W innych witrynach obszar ten s³u¿y jedynie do cjê miejsca, w którym znajduj¹ siê w witrynie. Oprócz nawigacji lokalnej lub globalnej, pozostawiaj¹c tej dru- tego umo¿liwia wycofanie siê nie tylko do strony g³ów- giej dowolne inne miejsce na stronie. Niektórzy wyko- nej (co mo¿na by uzyskaæ, stosuj¹c osobny klawisz), rzystuj¹ ten obszar do zaprezentowania nazwy firmy ale i do poprzednich etapów podró¿y, pozwalaj¹c tym — jest to sposób na identyfikacjê witryny i zapewnie- samym od pewnego miejsca obraæ inn¹ trasê. nie odnoœnika powrotnego do strony g³ównej. Œcie¿ka daje u¿ytkownikowi listê odnoœników (od- dzielonych œrednikami lub ukoœnikami), które wskazuj¹ poziomy hierarchii znajduj¹ce siê na drodze do aktual- nej strony. Jedno klikniêcie przenosi u¿ytkownika do dowolnie wybranego poziomu. Œcie¿ka sta³a siê standardem na stronach katalo- gów takich jak Yahoo!, oferuj¹cych dostêp do g³êbo- kich, zachodz¹cych na siebie hierarchicznych struktur informacji. Metoda ta jest te¿ dobrze wykorzystywana przez inne witryny — prezentuj¹ce bardzo du¿o treœci (CNet), kojarz¹ce (eBay) i komercyjne (Amazon). W wi- trynach tych ten mechanizm naprowadzaj¹cy wykorzy- stywany jest po to, by przedstawiæ u¿ytkownikom kon- tekst ogl¹danej strony. Jeœli ktoœ jeszcze nie odgad³, sk¹d siê wzi¹³ termin „œcie¿ka”… Jest to nawi¹zanie do bajki o Jasiu i Ma³- gosi — dwójce dzieci, które id¹c do lasu, rzuca³y na drogê okruszki chleba, aby zaznaczyæ œcie¿kê powrotn¹ do domu. Oczywiœcie, w bajce œcie¿ka zniknê³a, gdy¿ Sklep ogrodniczy Burpee stosuje widoczny ptaki wydzioba³y okruszki, pozostawiaj¹c w ten spo- górny pasek nawigacyjny, by wyjaœniæ swoj¹ misjê sób Jasia i Ma³gosiê na pastwê losu w œrodku opano- i zaprezentowaæ kategorie produktów. wanego przez czarownicê lasu. Zastanówmy siê, co wtedy dzieci czu³y, poniewa¿ w³aœnie tak czuje siê wiêk- szoœæ internautów. Yahoo! Wykorzystuje œcie¿kê do nawigacji wewn¹trz ogromnego zbioru list witryn istniej¹cych w internecie.
130 Projektowanie witryny: organizacja i nawigacja Dwanaœcie systemów nawigacyjnych — c.d. 5. Foldery i pliki 6. Piasta ze szprychami Mo¿na je stosowaæ, gdy w witrynie znajduje siê kilka Mo¿na j¹ stosowaæ, gdy kilka sekcji ma odwo³aæ siê kategorii informacji i ka¿da z nich ma istotne dla u¿yt- z powrotem do strony g³ównej, ale nie do pozosta³ych kownika podkategorie (ale nie wszystkie mieszcz¹ siê dzia³ów. jednoczeœnie na ekranie). Jest to chyba najprostsza metoda nawigacji, ale nie Metafora folderów i plików, tak szeroko stosowana jest zbyt dobra. Polega przede wszystkim na umiesz- w dzisiejszych systemach komputerowych, zosta³a czeniu odnoœnika z napisem „strona g³ówna” albo zna- wymyœlona w Xerox Parc w latach siedemdziesi¹tych ku graficznego lub ikony reprezentuj¹cej stronê g³ówn¹. XX wieku, a po raz pierwszy zastosowano j¹ w syste- W ma³ych, bardzo prostych witrynach metoda ta mo¿e mie operacyjnym firmy Apple. Czasami jest stosowana dzia³aæ jako jedyny sposób nawigacji. W wiêkszoœci tak¿e w witrynach internetowych, ale zwi¹zane z jej przypadków lepszym rozwi¹zaniem dla tych witryn by³- prezentacj¹ trudnoœci techniczne spowodowa³y, ¿e nie by globalny pasek nawigacyjny, pozwalaj¹cy u¿ytkow- jest szeroko rozpowszechniona. nikom przechodziæ tak¿e do innych dzia³ów. Po co Rozwi¹zanie to sprawdza siê, gdy foldery mog¹ byæ zmuszaæ odwiedzaj¹cych do ci¹g³ego przechodzenia szybko „otwierane” i „zamykane” jednym klikniêciem przez stronê g³ówn¹? myszy. Jednak w przypadku internetu wymaga to za- System ten jest najbardziej u¿yteczny w witrynach, stosowania technik dodatkowych, takich jak JavaScript w których licz¹ siê bogate, g³êbokie doznania u¿ytkow- lub Flash. Upowszechnienie i ci¹gle zwiêkszaj¹ca siê nika — jak w grach lub na wystawach dzie³ sztuki — niezawodnoœæ tych technologii powoduje, ¿e system gdy chcemy wype³niæ ca³y ekran i stworzyæ odpowied- plików i folderów staje siê realnym rozwi¹zaniem dla nie œrodowisko. W takim przypadku mo¿emy nie chcieæ coraz wiêkszej liczby witryn. rozpraszaæ u¿ytkownika zbytecznymi elementami (np. paskiem nawigacyjnym). System ten sprawdza siê wte- dy znakomicie. Webmonkey wykorzystuje foldery do ukrywania — a nastêpnie ods³aniania — zawartoœci kolejnych sekcji swojej biblioteki. Prezentuj¹ca opowiadania witryna Fray stosuje minimaln¹ liczbê elementów nawigacyjnych, gdy u¿ytkownik zacznie ju¿ czytaæ opowiadanie. Na koñcu opowiadania u¿ytkownik widzi pojedynczy odnoœnik do g³ównej strony danego dzia³u opowiadañ (w tym przypadku jest to dzia³ krymina³ów).
Projektowanie witryny: organizacja i nawigacja 131 7. Œcie¿ka linearna 8. Wielostronicowa œcie¿ka Mo¿na j¹ stosowaæ, gdy chcemy opowiedzieæ jak¹œ Mo¿na j¹ stosowaæ, gdy mamy bardzo d³ugi artyku³ historiê — lub powinniœmy ukoñczyæ transakcjê — któ- (lub bardzo du¿o wyników wyszukiwania) rozbity na ra zale¿y od kolejnoœci elementów. wiele stron i chcemy, by u¿ytkownicy mogli prze³¹czaæ System ten jest zazwyczaj stosowany w lokalnej (nie siê pomiêdzy stronami. globalnej) nawigacji. Gdy u¿ytkownik czyta opowiada- Wielostronicowa œcie¿ka zosta³a spopularyzowana nie, odpowiada na pytania konkursu lub dokonuje za- przez wyszukiwarki i aktualnie jest szeroko wykorzy- kupu, powinien widzieæ poszczególne strony w odpo- stywana na stronach handlowych i stronach prezentu- wiedniej kolejnoœci. Pytania wystêpuj¹ w pewnej j¹cych mo¿liwoœci wyboru kolejnych stron. System ten sekwencji, a opowiadanie musi byæ logicznie pouk³a- dzia³a na dwa sposoby. U¿ytkownicy mog¹ albo stoso- dane w ca³oœæ. W takich przypadkach wystarcz¹ bar- waæ przyciski Naprzód/Wstecz (lub Nastêpny/Poprzedni), dzo proste elementy nawigacyjne — strza³ki pozwala- aby posuwaæ siê strona za stron¹ w którymœ kierunku, j¹ce przechodziæ w przód lub do ty³u. albo klikn¹æ numer konkretnej strony i przeskoczyæ bezpoœrednio do niej. Rozwi¹zanie skutecznie poka- zuje zakres materia³u (liczbê stron) oraz to, gdzie wœród nich znajduje siê u¿ytkownik. Witryna Fray z opowiadaniami pozwala u¿ytkownikowi skupiæ siê na historii, oferuj¹c ograniczon¹ do minimum linearn¹ nawigacjê Google (jak wszystkie wyszukiwarki) dzieli wyniki od pocz¹tku do koñca opowiadania. wyszukiwania na wiele stron i pozwala u¿ytkownikom Zwyk³e strza³ki s¹ czêsto przechodziæ przez nie albo za pomoc¹ klikniêcia zastêpowane zabawnymi rysunkami. odnoœnika „Nastêpna”, albo w wyniku klikniêcia poszczególnych numerów stron (lub — jak ma to miejsce w przypadku Google — klikniêcia którejœ z liter „o” w znaku graficznym). Na stronach z artyku³ami stosujemy podobne rozwi¹zanie przy d³ugich artyku³ach. Dzielimy artyku³ na wiele stron i pozwalamy u¿ytkownikom „przeklikiwaæ” siê przez nie.
132 Projektowanie witryny: organizacja i nawigacja Dwanaœcie systemów nawigacyjnych — c.d. 9. Rozwijane menu 10. Pole wyszukiwania Mo¿na je stosowaæ wy³¹cznie wtedy, Mo¿na je stosowaæ w witrynach dowolnej wielkoœci, gdy zawartoœæ rozwijanej listy jest ca³- zawieraj¹cych treœci, które u¿ytkownicy mog¹ chcieæ kowicie zrozumia³a (np. lista krajów, mie- przeszukaæ. siêcy, lat). Internautów mo¿emy podzieliæ na dwie grupy: prze- Jest stosowane zazwyczaj jako sk³adnik systemu gl¹dacze i wyszukiwacze. Przegl¹dacze lubi¹ pocho- nawigacyjnego, a nie jako ca³y system. Rozwijane menu dziæ po witrynie, poznaæ jej system organizacyjny, struk- oferuje szybki, zajmuj¹cy ma³o miejsca mechanizm turê. Nawiguj¹ do szukanych danych, przegl¹daj¹c wyboru jednej z wielu równoleg³ych i wzajemnie wyklu- zamieszczone w witrynie odnoœniki. Lubi¹ kontekst. czaj¹cych siê opcji. Natomiast wyszukiwacze id¹ prosto do pola wyszuki- Poniewa¿ rozwijane menu ukrywaj¹ informacje, naj- wania. Lubi¹ drogê bezpoœredni¹. lepiej jest stosowaæ je do prezentacji pozycji, które s¹ Wœród u¿ytkowników ka¿dej witryny znajd¹ siê za- oczywiste dla u¿ytkownika (np. lista stanów, krajów, równo przegl¹dacze, jak i wyszukiwacze, wiêc powin- miesiêcy, lat). S¹ ma³o skuteczne — i tak naprawdê niœmy uzbroiæ nasze strony w dzia³aj¹c¹ funkcjê wy- ca³kowicie nieefektywne — gdy zawieraj¹ nieoczywiste szukiwania. Jednak samo dodanie mo¿liwoœci opcje, takie jak dzia³y witryny (zobacz równie¿ „Dlaczego wyszukiwania nie wystarczy. Powinniœmy jeszcze móc rozwijane menu nie nadaj¹ siê do nawigacji?”, str. 127). wp³yn¹æ na zwracane wyniki. Dowiedzmy siê, jakich 50 hase³ odbiorcy mog¹ szukaæ w witrynie i sprawdŸ- BBC bardzo umiejêtnie my, czy wyszukiwarka zwraca strony, które maj¹ zna- wykorzystuje czenie w takim wyszukiwaniu (testuj¹c wyszukiwanie, ryzykowne elementy mo¿emy przy okazji upewniæ siê, ¿e z listy mo¿na ³atwo nawigacyjne. dostaæ siê do wyszukanych stron). Pokazane na przyk³adzie rozwijane menu dzia³aj¹ œwietnie, poniewa¿ u¿ytkownicy z ³atwoœci¹ mog¹ przewidzieæ, jakie elementy znajduj¹ siê na zamieszczonych w nich listach. Na górze menu wyraŸnie napisano Country profiles (profile krajów) i nie ma w¹tpliwoœci, ¿e pozycja widoczna w liœcie (Algieria) jest nazw¹ kraju. Menu znajduj¹ce siê Pole wyszukiwania w witrynie L.L. Bean pozwala ni¿ej tak¿e jest wyraŸnie oznaczone (pogoda przeskoczyæ od razu do strony zawieraj¹cej produkt. na Bliskim Wschodzie — ang. Middle East Weather). Zadano sobie tak¿e wiele trudu, by dostosowaæ Pierwsza pozycja w liœcie miast — Abu Dhabir wyniki wyszukiwania. — niestety mówi niewiele. Dlatego do menu dodano instrukcjê (Choose a city — wybierz miasto), dziêki czemu dok³adnie wiadomo, czego mo¿na siê spodziewaæ (Bejrut, Kair itd.).
Projektowanie witryny: organizacja i nawigacja 133 11. Mapy obrazkowe 12. Lista odnoœników Mo¿na je stosowaæ, jeœli organizacja Mo¿na j¹ stosowaæ, gdy mamy krótk¹ listê luŸno po- witryny w oczywisty sposób odpowiada wi¹zanych ze sob¹ elementów lub d³ug¹ listê blisko jakiejœ ilustracji (np. mapie geograficznej). zwi¹zanych ze sob¹ elementów. Mapy obrazkowe zazwyczaj s¹ stosowane niepra- Nie ma nic z³ego w prostych rozwi¹zaniach, a lista wid³owo, ale bardzo dobrze sprawdzaj¹ siê, jeœli tema- odnoœników jest najprostszym z mo¿liwych rozwi¹zañ. tykê witryny mo¿na ³atwo i intuicyjnie odwzorowaæ na Ods³ania pe³n¹ zawartoœæ witryny i jej sekcji przez pro- ilustracji. Odwo³ania geograficzne to oczywiste skoja- ste wymienienie elementów. Listê mo¿na na przyk³ad rzenie, inne przypadki to wykresy produktów, diagra- u³o¿yæ wzd³u¿ górnego brzegu strony, utworzyæ kolum- my medyczne itp. nê lub rozdzieliæ na bloki znajduj¹ce siê w ró¿nych miej- scach strony g³ównej. Wiêkszoœæ witryn gdzieœ w œrodku swoich systemów nawigacyjnych u¿ywa list odnoœników, aby w najprost- szy sposób pokazaæ, co jest dostêpne i gdzie u¿ytkow- nicy mog¹ siê przenieœæ. Nie zdziwmy siê, jeœli nasi u¿ytkownicy pokochaj¹ takie rozwi¹zanie. W witrynie FogDog Sports (pokazanej poni¿ej) listy odnoœników zawsze by³y najbardziej popularnym sposobem nawi- gowania. Lonely Planet oferuje przewodniki na temat krajów z ca³ego œwiata. U¿ytkownicy mog¹ wybraæ interesuj¹cy ich kraj, klikaj¹c w odpowiednim obszarze mapy (albo u¿yæ rozwijanego menu lub pola wyszukiwania). Prosta lista odnoœników jest najbardziej popularn¹ i ³atw¹ metod¹ znalezienia czegoœ w witrynie FogDog Sports.
134 Projektowanie witryny: organizacja i nawigacja czêœæ praktyczna W jaki sposób witryna bêdzie zorganizowana? Organizacja witryny stanowi w pewnym stopniu Organizacja witryny szkielet witryny. Pozosta³a czêœæ witryny zosta- Miejsce na narysowanie mapy witryny: nie rozpiêta na tym szkielecie. Dlatego sposób zor- ganizowania witryny bêdzie dyktowa³ sposób jej u¿ywania (i to, czy w ogóle bêdzie ona u¿ywana). Organizacja witryny W jaki sposób witryna jest zorganizowana? q wed³ug kategorii ................................................................................ ................................................................................ q wed³ug zadania ................................................................................ ................................................................................ q wed³ug u¿ytkowników ................................................................................ Miejsce na narysowanie schematu strony ................................................................................ g³ównej, który poka¿e, jak elementy bêd¹ u³o¿one wzglêdem siebie: q wed³ug jêzyka i lokacji ................................................................................ ................................................................................ q wed³ug daty lub innego porz¹dku ................................................................................ ................................................................................ q wed³ug dzia³ów firmy ................................................................................ ................................................................................ Jaka jest organizacja drugoplanowa? ................................................................................ ................................................................................ Co jest w witrynie najwa¿niejsze? 1. ............................................................................. 2. ............................................................................. 3. .............................................................................
Projektowanie witryny: organizacja i nawigacja 135 czêœæ praktyczna Jaki system nawigacyjny wybierzemy? Mechanizm nawigacji to wizualny obraz struktury W którym miejscu strony bêdzie widoczna witryny. Przedstawia witrynê odwiedzaj¹cym i po- nawigacja? maga poprowadziæ ich przez organizacjê witryny. 1. Strona Systemy nawigacyjne g³ówna Jaki system nawigacji globalnej zastosujemy? q panel z lewej strony q zak³adki q foldery i pliki q œcie¿ka linearna q rozwijane menu q pasek nawigacyjny wzd³u¿ górnego brzegu q œcie¿ka q piasta i szprychy q wielostronicowa œcie¿ka q pole wyszukiwania 2. q lista odnoœników Strony q inny: .................................... wewnêtrzne Jaki system nawigacji lokalnej zastosujemy? q panel z lewej strony q zak³adki q foldery i pliki q œcie¿ka linearna q rozwijane menu q pasek nawigacyjny wzd³u¿ górnego brzegu q œcie¿ka q piasta i szprychy q wielostronicowa œcie¿ka q pole wyszukiwania q lista odnoœników q inny: ....................................
136 Projektowanie witryny: organizacja i nawigacja Nazywanie Wybierajmy konsekwentne nazwy Gdy oznacza- my kilka dzia³ów, których nazwy bêd¹ widoczne dzia³ów witryny obok siebie na pasku nawigacyjnym, ich nazwy po- winny byæ konsekwentnie dobrane. W idealnym Sprawa nazw dzia³ów pocz¹tkowo mo¿e wydawaæ przypadku nazwy lub frazy powinny mieæ tak¹ siê nam banalna — prosty, zbyteczny szczegó³, któ- sam¹ liczbê s³ów, byæ t¹ sam¹ czêœci¹ mowy, cza- ry mo¿na za³atwiæ na samym koñcu procesu. Chcia- sowniki powinny wystêpowaæ w tym samym czasie, ³abym, ¿eby by³o tak naprawdê! Prawdê mówi¹c, to wielkoœæ liter i jêzyk powinny byæ zgodne itd. w³aœnie nazwy decyduj¹ o tym, czy u¿ytkownik zro- Problemem nie jest tutaj gramatyka, a zdolnoœæ zumie, czego dotyczy witryna i jak ona dzia³a. pojmowania. U¿ytkownicy szybciej zrozumiej¹ Dobrze dobrane nazwy s¹ niewidoczne — dys- podzia³ na kategorie (i sam¹ witrynê), jeœli nazwy kretnie wskazuj¹ u¿ytkownikom odpowiednie kie- bêd¹ zgodne. Ludzie to urodzeni klasyfikatorzy — runki i nie zwracaj¹ na siebie uwagi. le dobrane jeœli wyczuj¹ podobieñstwo miêdzy sekcjami, na- nazwy spowalniaj¹ reakcje u¿ytkowników, wprowa- tychmiast po³¹cz¹ te sekcje, buduj¹c wiedzê na te- dzaj¹ ich w b³¹d i zmniejszaj¹ ich pewnoœæ siebie. mat ka¿dej kolejnej kategorii na bazie wiedzy o ka- „Oznaczanie dzia³ów jest wa¿n¹ czêœci¹ archi- tegoriach poznanych wczeœniej. Nawet nieznaczne tektury informacji” — mówi Steve Mulder, kierow- niespójnoœci spowoduj¹ koniecznoœæ ponownego nik do spraw u¿ytkowników w Terra-Lycos. „Wi- przemyœlenia kategorii. dzieliœmy to w laboratoriach funkcjonalnoœci. Najmniejsze problemy z nazwami ca³kowicie unie- Problemem nie jest tutaj gramatyka, mo¿liwia³y u¿ytkownikom ukoñczenie zadania”. a zdolnoœæ pojmowania. U¿ytkownicy Nazwy dzia³ów powinny byæ: szybciej zrozumiej¹ kategorie, jeœli n krótkie — nie mamy du¿o miejsca, nazwy bêd¹ zgodne. by przekazaæ znaczenie. Nazwy powinny Czêsto nawet subtelne zmiany znacznie popra- byæ krótkie i konkretne; wiaj¹ zrozumienie witryny przez u¿ytkowników n konsekwentne — w nazwach dzia³ów (a jest to dziedzina, w której nawet u³amki sekund powinny byæ stosowane podobne zwroty, wp³ywaj¹ na odbiór witryny przez u¿ytkownika). aby uwidoczniæ ich zwi¹zki; Jeœli w witrynie sprzedajemy samochody i domy, nie n jasne — im bardziej treœciwe i dos³owne powinniœmy mieszaæ ró¿nych schematów nazw bêd¹ nazwy dzia³ów, tym bardziej dzia³ów — na przyk³ad „kup dom” i „samochody”. prawdopodobne, ¿e internauta je klinie; Powinniœmy wybraæ jeden schemat nazw „kup n wolne od ¿argonu — klienci nie rozumiej¹ dom” i „kup samochód” lub „domy” i „samochody” wyspecjalizowanego jêzyka naszej bran¿y, (zobacz równie¿ „Wybieranie spójnych nazw”, str. 138). dlatego trzeba przet³umaczyæ etykiety Wybierajmy jasne nazwy Najwa¿niejsze jest, by na zrozumia³y dla nich jêzyk. oznaczenia w witrynie poprawnie reprezentowa³y Wybierajmy krótkie nazwy Przestrzeñ w interne- treœæ lub funkcjê dzia³u. Innymi s³owy — powinni- cie jest bardzo cenna. Musimy du¿o przekazaæ, a nie œmy nazywaæ rzeczy po imieniu. Brzmi to banalnie, mamy na to zbyt du¿o miejsca. Szerokoœæ ekranu ale ta podstawowa zasada jest nagminnie ³amana zawsze bêdzie ograniczaæ d³ugoœæ naszych s³ów. w czterech na piêæ witryn. Dlaczego? Poniewa¿ lu- Wybierajmy wiêc jak najkrótsze i najtrafniejsze s³owa. dzie lubi¹ nazywaæ rzeczy po swojemu, czêsto zwy- czajnie siê wym¹drzaj¹c. Dlatego zamiast nazwaæ dzia³ z wiadomoœciami „wiadomoœciami”, nazy- waj¹ go „sprawy bie¿¹ce” lub „mowa miasta”. Jeœli nie bêdziesz nazywaæ rzeczy po imieniu, nie zdo³asz wykonaæ tego, co musi byæ wykonane. (A. Harvey Block, prezes Bokenon System)
Projektowanie witryny: organizacja i nawigacja 137 Zamiast bombardowaæ u¿ytkownika zagadka- Hunter radzi: „PrzejdŸmy przez ca³¹ witrynê, mi s³ownymi i aliteracjami, skupmy siê na wybra- zidentyfikujmy ka¿dy termin, który wygl¹da na ter- niu etykiety, która bêdzie krótka, prosta i konkret- min wewnêtrzny lub nazwê kategorii, zakreœlmy go na (zobacz równie¿ „Dlaczego nazwy dzia³ów i zastanówmy siê, czy istnieje ³atwiejsza nazwa, któ- powinny byæ jasne, nie wymyœlne?”, str. 140). rej u¿ywaj¹ nasi kupuj¹cy — nazwa stosowana przez nich, a przez nas uwa¿ana za niepoprawn¹ — która Wybierajmy nazwy wolne od ¿argonu Ka¿da mog³aby zast¹piæ zakreœlony termin. Nastêpnie za- bran¿a i ka¿da firma pos³uguje siê swoim w³asnym mieñmy s³ownictwo w witrynie tak, by pasowa³o do jêzykiem — wyspecjalizowanym sposobem mówie- s³ownictwa nabywców”. nia na temat swoich produktów i œwiata — który jest dla niej ca³kowicie zrozumia³y, ale nic nie zna- Co oznacza „¿argon”? czy dla innych osób. W ¿argonie nie ma nic z³ego, n Akronimy niezrozumia³e dla ludzi spoza jednak nie mo¿na stosowaæ go w witrynie — to zna- firmy lub organizacji. czy nie mo¿na, jeœli chcemy, by ktoœ j¹ zrozumia³. n S³owa kodowe stosowane w firmie. „¯argon szerzy siê wewn¹trz firm” — mówi Jes- „W du¿ych organizacjach czêsto ³atwiej jest se James Garrett, architekt informacji, który wspó³- wypromowaæ swoj¹ pracê wewn¹trz firmy, pracowa³ z firmami du¿ymi i ma³ymi. „Wszystkie jeœli stosujemy modne w niej okreœlenia, nazwy rodzaje firm maj¹ swój w³asny jêzyk, którym opi- dzia³ów itp.” — mówi Jeffrey Zeldman. „Ale suj¹ produkty i ich cechy. Jest jêzyk stosowany we- p³acimy te¿ za takie postêpowanie wysok¹ cenê”. wnêtrznie i jest jêzyk, który s³u¿y do komunikacji n S³owa dwuznaczne. „Klasycznym zewnêtrznej, choæby z powodów marketingowych”. przyk³adem dwuznacznego s³owa ¯argon wkrada siê do witryny, poniewa¿ ludzie stosowanego w informatyce jest default” s¹ przyzwyczajeni do opisywania produktów swo- — mówi profesor Michael Twidale. imi w³asnymi bran¿owymi okreœleniami. Czêsto „Wszyscy wiemy, ¿e oznacza wartoœæ domyœln¹. nawet nie zdaj¹ sobie sprawy, ¿e u¿ywaj¹ ¿argonu. Jeœli jednak tworzymy oprogramowanie „W ka¿dym biznesie trudna jest próba zmiany dla ksiêgowych, musimy zdawaæ sobie sposobu myœlenia ze sprzedawcy na kupuj¹cego sprawê, ¿e ich definicja s³owa default jest i przestawienie siê z jêzyka sprzedawcy na jêzyk ku- ca³kowicie inna (niesp³acenie zobowi¹zañ)”. puj¹cego” — mówi ekspert marketingu interneto- n S³owa formalne lub techniczne, których wego Hunter Madsen. nie u¿ywamy na co dzieñ. Na przyk³ad witryna Black and Decker ma dzia³ o nazwie Dziêki odnoœnikowi „konserwacja konfekcji” (ang. Garment Care). „My Chapter” u¿ytkownicy Jak czêsto zwykli ludzie stosuj¹ s³owo mog¹ znaleŸæ grupê klubu „konfekcja”? Mówi¹ raczej o ubraniach. Sierra blisko swojego miejsca zamieszkania. Ale s³owo n Terminy bran¿owe, których klienci mog¹ „Chapter” jest myl¹ce, poniewa¿ nie znaæ, a na pewno ich nie u¿ywaj¹. ma wiele powszechnych n Slogany marketingowe, których chcielibyœmy znaczeñ (np. rozdzia³). nauczyæ klientów. Na przyk³ad producent soków, firma Odwalla, w witrynie ma dzia³ o nazwie „Œwie¿ologia” (ang. freshology). n Slang, którego nasi odwiedzaj¹cy nie u¿ywaj¹. Nie chodzi tu tylko o zrozumienie, ale i o kon- kurencjê. Jeœli u¿ytkownicy maj¹ wybór pomiêdzy dwoma witrynami — tak¹, w której nazwy wpro- wadzaj¹ ich w b³¹d, oraz tak¹, w której u¿yto pro- stego jêzyka — wybior¹ tê, któr¹ rozumiej¹. Jak mówi Jesse James Garrett, „u¿ytkownicy mog¹ przyzwyczaiæ siê do ¿argonu tylko wtedy, gdy nie maj¹ innego wyboru”.
138 Projektowanie witryny: organizacja i nawigacja Wybieranie spójnych nazw Spójnoœæ to jeden z kluczy do intuicyjnego systemu nawigacyjnego. Nazwy w witrynie powinny byæ spójne, aby u¿ytkownicy mogli szybko zauwa¿yæ zwi¹zki miêdzy nimi. Oczywiœcie, trudno jest znaleŸæ nazwy, które s¹ spójne pod ka¿dym wzglêdem, ale powinniœmy d¹¿yæ do tego celu. Czynnik Przyk³ady Czêœæ mowy Nazwa sekcji bêd¹ca Dobrze: samochody | mieszkania wyra¿eniem rzeczownikowym le: samochody | kup mieszkanie lub czasownikowym. Forma Etykiety czasownikowe Dobrze: kup samochód | kup mieszkanie powinny mieæ tê sam¹ formê. le: kup samochód | kupowanie mieszkania Liczba Wszystkie etykiety powinny Dobrze: artyœci | autorzy | muzycy byæ albo w liczbie mnogiej, le: artysta | autorzy | muzyk albo w pojedynczej. Wielkoœæ liter Te same s³owa powinny siê Dobrze: kup samochód | kup mieszkanie zaczynaæ wielk¹ liter¹ le: Kup samochód | kup mieszkanie w ka¿dej etykiecie. Jêzyk Wszystkie nazwy jêzyków Dobrze: angielski | hiszpañski | francuski obcych powinny byæ napisane le: angielski | Espanol | francuski po polsku albo ka¿da nazwa powinna byæ napisana w jêzyku, który reprezentuje. Liczba s³ów Wszystkie etykiety powinny Dobrze: utwórz profil | edytuj profil | przeszukaj profile mieæ w przybli¿eniu tyle le: profil | edytuj profil | przeszukaj wszystkie profile samo s³ów. D³ugoœæ s³ów Etykiety powinny sk³adaæ siê Dobrze: kup mieszkanie | kup samochód ze s³ów o podobnej d³ugoœci. le: kup mieszkanie | kup pojazd rekreacyjny
Projektowanie witryny: organizacja i nawigacja 139 Kilka dobrych przyk³adów 1. RedEnvelope pozwala wyszukaæ prezenty pod k¹tem odbiorcy; ka¿da nazwa kategorii ma tê sam¹ budowê „for ..........” (dla ..........). 2. Muzeum Guggenheima pozwala wyszukaæ prace wed³ug jednej z szeœciu kategorii; ka¿da kategoria wyra¿ona jest pojedynczym rzeczownikiem. 3. BBC News pozwala przeczytaæ artyku³ w wielu jêzykach; nazwy jêzyków zapisane s¹ w tych jêzykach i za pomoc¹ odpowiedniego alfabetu. 4. BackRoads oferuje wiele typów wycieczek, ka¿dy typ oznaczony jest za pomoc¹ przymiotnika i rzeczownika. 5. Nerve.com oferuje szeœæ sposobów u¿ycia stron z danymi personalnymi, ka¿dy sposób oznaczono dwoma s³owami — czasownikiem i rzeczownikiem.
140 Projektowanie witryny: organizacja i nawigacja wskazówki praktyczne Dlaczego nazwy dzia³ów powinny byæ jasne, nie wymyœlne? Ludzie maj¹ niewyt³umaczaln¹ potrzebê nazywania To samo dotyczy internetu. Brockenbrough kon- wszystkiego. Nazywamy dzieci, zwierzêta, zabawki, tynuuje: „Ludzie nie klikaj¹, jeœli nie s¹ pewni, gdzie miasta, dzielnice i ulice. Wiadomo, ¿e w niektórych ich to zawiedzie. Dlatego bardzo wa¿ne jest, by na- sytuacjach nadajemy imiona nawet czêœciom nasze- sze oznaczenia by³y bardzo wyraŸne. Jasne ozna- go cia³a. czenia zawsze s¹ lepsze ni¿ zbyt pomys³owe”. Wydaje siê, ¿e ka¿da bran¿a prowadzi swoj¹ Trudno jest zaakceptowaæ to redaktorom, który w³asn¹ grê nazw. Czasopisma wymyœlaj¹ m¹dre rozpoczêli swoj¹ karierê w wydawnictwach drukowa- nazwy ka¿dej sekcji, kolumny czy artyku³u. Firmy nych. Czasopisma i gazety k³ad¹ du¿y nacisk na grê samochodowe wynajduj¹ ró¿ne nazwy dla kolejnych s³ów i aliteracje. Jednak takie doskona³e pos³ugiwa- modeli samochodów. Przemys³ kosmetyczny wymyœli³ nie siê s³owem jest raczej recept¹ na pora¿kê w in- wiêcej nazw dla kolorów lakierów do paznokci ni¿ ternecie. jest gwiazd na niebie1. „W internecie potrzeb- Po czêœci jest to ny jest poziom jasnoœci, niegroŸny fetysz. Jeœli W internecie ka¿da którego nie ma w ¿adnym chcemy nadaæ pomy- nazwa musi byæ innym œrodku przekazu” s³ow¹ nazwê pomy- — mówi Jim Frew, projek- s³owej kolumnie w na- ca³kowicie oczywista. tant, który dzieli swój czas szym pomys³owym Np. nie mo¿na pomiêdzy druk i internet. czasopiœmie, to czy „W czasopismach mo¿na ktoœ na tym ucierpi? wyszukiwania stosowaæ stylizowane na- W internecie jed- nazwaæ szperaniem. zwy, które s¹ trochê tajem- nak ucierpi¹ na tym nicze. Jednak w internecie Jim Frew u¿ytkownicy i nasza ka¿da nazwa musi byæ witryna. Stosowanie oczywista. Nie mo¿na na- ma³o znacz¹cych, wymijaj¹cych nazw dla dzia³ów wet wyszukiwania nazwaæ szperaniem”. witryny prowadzi do zmylenia u¿ytkowników i nara- Oczywiœcie, kiedyœ tego nie wiedzieliœmy. Na po- stania w nich frustracji. Internet nie dostarcza wy- cz¹tku w witrynie HotWired zastosowaliœmy takie na- starczaj¹cej liczby wskazówek kontekstowych, by zwy dzia³ów, jakich u¿ylibyœmy w czasopiœmie (np. u¿ytkownik móg³ zrozumieæ, ¿e „ciernisty krzew” „Piazza” i „Signal”). Nazwy te by³y chwytliwe, ale ca³- oznacza „obszar dyskusji”. Jeœli nie wiemy, co kryje kowicie dezorientowa³y u¿ytkowników. Nie maj¹c do- siê za odnoœnikiem, to jest ma³o prawdopodobne, ¿e datkowych podpowiedzi, nie wiedzieli, co maj¹ zro- wybierzemy go. biæ ani gdzie klikn¹æ. „Pod¹¿anie za odnoœnikiem mo¿na porównaæ do By³a to dla nas nauczka. Taki problem nie przy- kupowania miêsa — zapakowanego miêsa” — œmieje darzy³ siê tylko nam. W ca³ym internecie producenci siê Martha Brockenbrough, by³a redaktor MSN.com. nagminnie pope³niali ten b³¹d. „Nie chcemy, by by³o opisane tylko jako ,MIÊSO’. „Mia³am problemy z nazwami dzia³ów” — przy- Chcemy wiedzieæ, z jakiego zwierzêcia pochodzi. znaje Brockenbrough. „Humorystyczn¹ kolumnê Joela Chcemy znaæ datê wa¿noœci i chcemy móc obejrzeæ Steina nazwa³am Lúser, co mia³o oznaczaæ codzien- produkt. Ma ju¿ to têczowe zabarwienie, czy wygl¹- nego u¿ytkownika. By³a to równie¿ gra s³ów z an- da jeszcze dobrze?” gielskim loser — nieudacznik. Niestety, nikt nie ro- zumia³, co mia³am na myœli”. 1 W bezchmurn¹ noc, w bardzo ciemnym miejscu, Jaki jest mora³? „Nie silmy siê na pomys³owoœæ. bez dodatkowego sprzêtu optycznego mo¿emy Nie wymyœlajmy cudacznych nazw. Nie utrudniajmy zobaczyæ oko³o 8.768 gwiazd. Jeœli policzylibyœmy ¿ycia swoim u¿ytkownikom. Nie mówiê, ¿eby w ogó- nazwy kolorów lakieru do paznokci na piêtrze le nie u¿ywaæ ¿artobliwych tekstów, ale u¿ywajmy z przyborami do makija¿u w sklepie Macy’s, zobaczylibyœmy, o ile ta liczba jest wiêksza… ich w miejscach mniej krytycznych ni¿ nawigacja”.
Projektowanie witryny: organizacja i nawigacja 141 Dziwne nazwy Gdy zespó³ przystêpuje do wymyœlania nazw dzia³ów, zazwyczaj pojawiaj¹ siê jakieœ problemy. Pierwszy problem — wewnêtrzny firmowy ¿argon wkrada siê do witryny. Drugi problem — ludzie uwielbiaj¹ nazywaæ rzeczy i s¹ przy tym bardzo pomys³owi. Jednak niejasne i nieobrazowe nazwy wprowadzaj¹ u¿ytkowników w b³¹d. Zgodnie z ruchem wskazówek zegara od lewej: (1) Nazwy i ikony reprezentuj¹ce dzia³y w witrynie Lonely Planet s¹ pe³ne wdziêku, ale tajemnicze. Czym jest ciernisty krzew (ang. thorn tree)? Tutaj oznacza forum dyskusyjne. (2) Pierwsza strona HotWired oko³o 1994 roku zawiera³a przyci¹gaj¹ce wzrok ikony i wymyœlne nazwy sekcji, które wprawia³y u¿ytkowników w zak³opota- nie. (3) Sierra Club wymyœli³ nazwy, które trudno rozszyfrowaæ, a ich zgru- powanie — sugeruj¹ce ¿e s¹ ze sob¹ jakoœ powi¹zane — jeszcze pogorszy- ³o sprawê. „Currents” (sprawy bie¿¹ce) oznacza wiadomoœci. Dlaczego auto- rzy nie nazwali dzia³u po prostu „wia- domoœciami”? „Zoomer” pomaga zna- leŸæ witryny na temat spraw lokalnych — dlaczego nie zosta³ nazwany „spra- wy lokalne”? Nazwa „Lewis & Clark” ma o dziwo znaczenie dos³owne — prowadzi do dzia³u poœwiêconego tym osobom. (4) Odwalla stosuje w swojej nawigacji slogany marketingowe typu „Freshology” (œwie¿ologia) i „People to Planet” (ludzie planecie). (5) 360degre- es pozwoli³o zakraœæ siê ¿argonowi technicznemu do nawigacji — sekcja o nazwie „Dynamic Data” (dynamicz- ne dane) zawiera funkcje interaktyw- ne, takie jak konkursy i ankiety.
142 Projektowanie witryny: organizacja i nawigacja czêœæ praktyczna Jakich nazw dzia³ów u¿yjemy? Jeœli chcemy byæ pomys³owi, zrealizujmy tê po- Grupa 2. trzebê gdzie indziej. Bardzo wa¿ne jest stosowa- 1. ................................................................................... nie prostych, jasnych, typowych nazw dzia³ów. Czy nazwa jest: q krótka q jasna q wolna od ¿argonu Przede wszystkim maj¹ byæ zrozumia³e dla u¿yt- kowników. 2. ................................................................................... Czy nazwa jest: q krótka q jasna q wolna od ¿argonu Nazwy dzia³ów 3. ................................................................................... Grupa 1. Czy nazwa jest: q krótka q jasna q wolna od ¿argonu 1. ................................................................................... Czy nazwa jest: q krótka q jasna q wolna od ¿argonu 4. ................................................................................... Czy nazwa jest: q krótka q jasna q wolna od ¿argonu 2. ................................................................................... Czy nazwa jest: q krótka q jasna q wolna od ¿argonu Test spójnoœci 3. ................................................................................... Czy nazwy dzia³ów s¹ ze sob¹ zgodne Czy nazwa jest: q krótka q jasna q wolna od ¿argonu pod wzglêdem: q u¿ytej czêœci mowy (rzeczowniki a czasowniki) 4. ................................................................................... q formy Czy nazwa jest: q krótka q jasna q wolna od ¿argonu q u¿ycia wielkich liter 5. ................................................................................... q jêzyka Czy nazwa jest: q krótka q jasna q wolna od ¿argonu q liczby s³ów q d³ugoœci s³ów 6. ................................................................................... Czy nazwa jest: q krótka q jasna q wolna od ¿argonu Wykrywanie ¿argonu 7. ................................................................................... Czy mamy pewnoœæ, ¿e ¿adna z tych Czy nazwa jest: q krótka q jasna q wolna od ¿argonu nazw nie jest: q akronimem 8. ................................................................................... q s³owem kodowym Czy nazwa jest: q krótka q jasna q wolna od ¿argonu q dwuznaczna q terminem bran¿owym 9. ................................................................................... q sloganem marketingowym Czy nazwa jest: q krótka q jasna q wolna od ¿argonu q slangiem 10. ................................................................................. Czy nazwa jest: q krótka q jasna q wolna od ¿argonu
Projektowanie witryny: organizacja i nawigacja 143 Mia³eœ sprawdzaæ pisowniê, a nie krytykowaæ stosowanie symboliki rysunkowej! Do dzie³a ! Testy funkcjonalnoœci Testy z udzia³em jednego u¿ytkownika to sytuacja o sto procent lepsza ni¿ brak testów. (Steve Krug)
144 Projektowanie witryny: organizacja i nawigacja Wczeœniej czy póŸniej ka¿dy projektant interneto- wy odkrywa prost¹ prawdê — jeœli witryna ma mieæ Piêæ typów testów szansê na powodzenie, u¿ytkownicy musz¹ umieæ funkcjonalnoœci z niej skorzystaæ. Ten prosty wymóg jest si³¹ napê- dow¹ projektu internetowego. Prawie ka¿da decy- 1. Testy zorientowane na zadanie zja projektowa powinna uwzglêdniaæ argument Standardowy test funkcjonalnoœci sprawdza funkcjonalnoœci. ³atwoœæ wykonania zadania w dzia³aj¹cej witrynie. „Zapomnieæ o funkcjonalnoœci w internecie to Ochotnicy otrzymuj¹ zadanie do wykonania, a ob- tak, jakby zapomnieæ o w¹tku w filmie” — mówi serwator zapisuje ich reakcje i wyniki. Jeffrey Zeldman (www.zeldman.com). „Jeœli witryna 2. Obserwacja przez ramiê nie jest funkcjonalna, to tak, jakby nie istnia³a”. Zamiast sadzaæ ochotników przy komputerach Dobrzy projektanci zawsze maj¹ na uwadze funk- testowych, po¿yteczne mo¿e okazaæ siê obserwo- cjonalnoœæ, ale nigdy nie mo¿na powiedzieæ, w jaki wanie ludzi w ich naturalnym œrodowisku, w któ- sposób witryna bêdzie u¿ywana, dopóki nie zoba- rym korzystaj¹ z internetu — w domu lub w biurze. czymy, jak ludzie pracuj¹ w jej œrodowisku. Tutaj Jest to bardziej antropologiczne podejœcie do te- w³aœnie dochodz¹ do g³osu testy funkcjonalnoœci. stów funkcjonalnoœci, które bardziej przybli¿a fak- Testy funkcjonalnoœci daj¹ nam mo¿liwoœæ po- tyczne odczucia u¿ytkownika. Otrzymujemy pe³- dejrzenia, jak zwykli ludzie korzystaj¹ z naszej wi- niejszy obraz, w³¹cznie z ba³aganem na biurku tryny w sposób symuluj¹cy normalne zadania u¿yt- i wszystkimi elementami zwyk³ego ¿ycia, np. dzwo- kowników. Gdy taki u¿ytkownik nawiguje w naszej ni¹cym telefonem, p³acz¹cym dzieckiem czy prze- witrynie i próbuje ukoñczyæ zadanie, mo¿emy za- szkadzaj¹cym wspó³pracownikiem. dawaæ mu pytania. Czy rozumie, co oznaczaj¹ ety- 3. Otwarta eksploracja kiety, dok¹d prowadz¹ odnoœniki i co robi¹ dane przyciski? Czy interfejs dzia³a zgodnie z oczekiwa- W przypadku niektórych typów witryn wiêcej mo¿- niami odwiedzaj¹cego? Czy u¿ytkownik potrafi na zaobserwowaæ, jeœli nie poinstruujemy u¿ytkow- ników, co maj¹ zrobiæ. Po prostu sadzamy u¿yt- ukoñczyæ dane zadanie? kownika przed komputerem i obserwujemy, co siê Obserwuj¹c ochotników próbuj¹cych interpre- dzieje. Sposób ten doskonale sprawdza siê w przy- towaæ, nawigowaæ i ogólnie korzystaæ z naszej wi- padku witryn rozrywkowych (na przyk³ad z grami tryny, dowiadujemy siê, co siê sprawdza, a co siê nie internetowymi). sprawdza w naszym projekcie. Zobaczymy, ¿e nie ma nic tak pouczaj¹cego, jak 4. Œledzenie wzroku obserwacja zmagañ prawdziwych u¿ytkowników. Œledzenie wzroku daje bardzo szczegó³owy obraz A na pewno bêd¹ siê zmagaæ z witryn¹. Bez wzglê- tego, jak u¿ytkownik patrzy na witrynê, jak wodzi du na to, jak dobry by³by nasz pocz¹tkowy projekt po niej wzrokiem. Korzystaj¹c ze specjalnych ka- i jak utalentowani byliby nasi projektanci, niektóre mer skierowanych w oczy u¿ytkownika, badacze aspekty interfejsu (np. system nawigacyjny, ozna- sprawdzaj¹, gdzie dok³adnie patrzy u¿ytkownik, nie czenia lub kolejnoœæ elementów) bêd¹ nieuchron- sugeruj¹c siê tym, co u¿ytkownik mówi lub wska- nie myliæ u¿ytkowników naszej witryny. zuje kursorem. 5. Papierowe prototypy Nie mo¿na przewidzieæ tego, Na bardzo wczesnych etapach projektowania po- co mo¿e siê zdarzyæ mocne mo¿e byæ przedstawienie u¿ytkownikom w trakcie testów funkcjonalnoœci. papierowych prototypów. Takie wczesne testy po- magaj¹ poznaæ reakcje u¿ytkowników na nazwê „Nie mo¿na przewidzieæ tego, co mo¿e siê zda- witryny i podstawowy projekt. Czy u¿ytkownicy zro- rzyæ w trakcie testów funkcjonalnoœci” — mówi zumiej¹, czym zajmuje siê witryna? Czy intuicyjnie Doug Bowman, by³y projektant w HotWired i Ter- odgaduj¹, co mo¿na w niej zrobiæ i w jaki sposób? ra-Lycos. „To, co dla nas jest bardzo jasne i zrozu- mia³e, mo¿e byæ najtrudniejsz¹ w œwiecie spraw¹ dla piêciu kolejnych u¿ytkowników”.
Projektowanie witryny: organizacja i nawigacja 145 Czego mo¿emy dowiedzieæ Czasami nasze odkrycia bêd¹ wydawa³y siê oczy- wiste. Greg Dotson mówi: „Po przeprowadzeniu te- siê z testów funkcjonalnoœci? stów czêsto zastanawiamy siê, jak mogliœmy byæ tacy g³upi i tego nie zauwa¿yæ”. Ale czasami wyniki s¹ Ogromn¹ zalet¹ testów funkcjonalnoœci jest mo¿- ca³kowicie nieprzewidywalne. liwoœæ spojrzenia na witrynê oczami kogoœ innego. „Jest to bardzo interesuj¹ce” — mówi Steve Pomaga to wychwyciæ b³êdy i zdaæ sobie sprawê z ist- Mulder, ekspert pracuj¹c dla Lycos. „Czasami po nienia problemów, których nie dostrzegamy w trak- prostu nie wiemy, dlaczego coœ nie dzia³a”. cie projektowania witryny. W ka¿dym z tych przypadków najcenniejsze wnio- Testy funkcjonalnoœci to „forma szkolenia ski, wyci¹gane z wyników testów funkcjonalnoœci, z wra¿liwoœci” — mówi Michael Twidale, profesor to w³aœnie te problemy, których nie dostrzegaliœmy, Uniwersytetu stanu Illinois w Urbana-Champaign. poniewa¿ byliœmy za bardzo zaanga¿owani w projekt. „Pomagaj¹ nam poznaæ odczucia innych osób”. „Testy z u¿ytkownikami ods³aniaj¹ problemy, któ- „Sztuk¹ dobrego projektowania jest umiejêt- rych po prostu nie dostrzegaj¹ ludzie znaj¹cy firmê, noœæ za³o¿enia okularów i spojrzenia na swój pro- produkt oraz internet” — mówi Lance McDaniel, jekt oczami kogoœ innego. Jest to bardzo trudne, wiceprezes SBI & Co. „Te odkryte niespodzianki s¹ ale mo¿na to wyæwiczyæ, patrz¹c, jak inne osoby ko- moim zdaniem prawdziwym darem niebios, ponie- rzystaj¹ z naszego systemu”. wa¿ przed udostêpnieniem witryny dziesiêciu milio- W³aœnie do tego s³u¿¹ testy funkcjonalnoœci. nom osób lepiej jest zauwa¿yæ problem, który by³ „Przygl¹daj¹c siê sesjom badañ z u¿ytkownikami, oczywisty dla wszystkich oœmiu testuj¹cych projekt”. zmieni³em swój pogl¹d na projektowanie” — mówi Pokazuj¹c u¿ytkownikom witrynê we wcze- Doug Bowman. „Testy nie tylko pomagaj¹ w po- snych fazach projektowania, mo¿emy oceniæ swoje prawieniu testowanego projektu, ale tak¿e pozosta- za³o¿enia i wy³apaæ problemy na tyle wczeœnie, by wiaj¹ pewne przemyœlenia w naszej g³owie. Gdy pro- móc je jeszcze poprawiæ. Niektóre problemy — ta- jektujemy kolejn¹ witrynê, automatycznie myœlimy kie jak myl¹ce oznaczenia — mo¿na ³atwo usun¹æ. o tym, co zauwa¿yliœmy kiedyœ podczas sesji badañ Inne niestety mog¹ byæ trudniejsze do poprawienia. z u¿ytkownikami i instynktownie wiemy, jak u¿yt- Czasami testy funkcjonalnoœci wykazuj¹ problemy kownik mo¿e zachowaæ siê na takiej stronie”. bardzo g³êboko zakorzenione w projekcie. Mo¿e- Jednak bez wzglêdu na to, w ilu testach projek- my odkryæ b³êdy w funkcjonalnoœci lub organiza- towanych przez siebie witryn uczestniczyliœmy, ka¿- cji witryny, przez co trzeba bêdzie od nowa prze- dy nowy interfejs trzeba przetestowaæ. Trzeba to zro- myœleæ ca³y projekt i sposób podejœcia do niego. biæ, poniewa¿ im d³u¿ej pracujemy nad witryn¹, Co mo¿na odkryæ podczas tym trudniej jest nam zachowaæ dystans do niej. testów funkcjonalnoœci: I bez wzglêdu na nasz stopieñ znajomoœci zacho- wañ u¿ytkowników, zawsze mo¿emy zostaæ zasko- n Problemy w organizacji witryny. Czasami czeni czymœ nowym”. zawartoœæ witryny mo¿e zostaæ zorganizowana „Zawsze przydarzaj¹ siê jakieœ niespodzianki” inaczej ni¿ spodziewaj¹ siê tego u¿ytkownicy. — przyznaje Greg Dotson, pracuj¹cy w Guru. Mo¿e to bardzo spowalniaæ transakcje „Badania funkcjonalnoœci pozwalaj¹ znaleŸæ pro- lub nawet uniemo¿liwiaæ u¿ytkownikom ste, przeoczone b³êdy. Œwietnie sprawdzaj¹ siê tak- ukoñczenie zadania (zobacz równie¿ ¿e w potwierdzaniu, ¿e dobre cechy projektu s¹ na- „Organizacja witryny”, str. 112). prawdê dobre”. n Problemy z nazwami lub oznaczeniami. „Nie mogê sobie wyobraziæ w projektowaniu Czêsto nazwy stosowane dla dzia³ów witryny scenariusza, w którym testy funkcjonalnoœci nie by- i odnoœników wprowadzaj¹ u¿ytkowników ³yby pomocne” — mówi projektant Doug Bow- w b³¹d. Elementy mog¹ byæ w pe³ni man. „Nasze przewidywania, jak ktoœ inny bêdzie funkcjonalne, ale u¿ytkownicy — nie korzysta³ z witryny, mog¹ siê ca³kowicie ró¿niæ od rozumiej¹c oznaczeñ — nie bêd¹ potrafili faktycznych zachowañ u¿ytkownika próbuj¹cego ich znaleŸæ, a tym bardziej u¿yæ (zobacz skorzystaæ z witryny”. „Nazywanie dzia³ów witryny”, str. 136).
146 Projektowanie witryny: organizacja i nawigacja n Problemy z rozmieszczeniem. wiedzieæ, kim s¹ nasi odbiorcy, znaæ problemy, któ- Czêsto u¿ytkownicy bêd¹ intuicyjnie szukali rym stawiaj¹ czo³a i wiedzieæ, ¿e mamy rozwi¹zanie, przycisku lub odnoœnika w jakieœ czêœci którego bêd¹ chcieli u¿ywaæ” — kontynuuje Kunia- ekranu (np. odnoœnik do „koszyka” vsky. „Testy funkcjonalnoœci mog¹ jedynie wykazaæ, w prawym górnym rogu). Jeœli u¿ytkownik siê czy stworzone rozwi¹zanie nadaje siê do u¿ytku”. waha i przewija stronê, prawdopodobnie To, ¿e funkcja jest zrozumia³a i da siê u¿ywaæ, ma trudnoœci ze znalezieniem tego, czego nie œwiadczy jeszcze o tym, ¿e bêdzie stosowana. szuka (zobacz równie¿ „Jak ludzie widz¹ „Najlepszym przyk³adem s¹ kosze z promocyjny- witryny internetowe?”, str. 100). mi p³ytami w sklepach muzycznych. To, ¿e s¹ pe³- n Problemy z grupowaniem. U¿ytkownicy ne, nie oznacza, ¿e ktoœ ich potrzebuje”. intuicyjnie oczekuj¹, ¿e zwi¹zane ze sob¹ Tê ostatni¹ informacjê trudno przekazaæ, ponie- elementy powinny byæ zgrupowane. wa¿ wielu orêdowników przeprowadzania testów Mog¹ czuæ zak³opotanie, widz¹c zgrupowane funkcjonalnoœci myli umiejêtnoœæ wykonania za- elementy, które ich zdaniem nie s¹ ze sob¹ dania z zainteresowaniem tym zadaniem. w ¿aden sposób zwi¹zane lub jeœli powi¹zane „Zaskakuj¹ce jest, jak wiele z³ych decyzji podjê- elementy bêd¹ rozrzucone na stronie to na temat witryn, argumentuj¹c je wynikami te- (zobacz równie¿ „Dwanaœcie systemów stów funkcjonalnoœci” — mówi Adam Berliant nawigacyjnych”, str. 128). z Microsoft. „Dlaczego? Poniewa¿ funkcjonalnoœæ nie ma nic wspólnego z tym, czy ludzie faktycznie n Problemy z tempem lub kolejnoœci¹ bêd¹ z czegoœ korzystaæ. Istnieje ró¿nica miêdzy czynnoœci. Gdy u¿ytkownicy realizuj¹ pytaniem, czy ktoœ potrafi obs³ugiwaæ ekspres do transakcjê, maj¹ pewne oczekiwania co kawy, a pytaniem, czy bêdzie u¿ywaæ tego ekspresu”. do nastêpnego jej etapu. Niekiedy kolejnoœæ „Przeprowadzaj¹c badania na w³asny u¿ytek, mo¿na negocjowaæ, ale czasami nie podlega najpierw sprawdzam, czy ludzie bêd¹ u¿ywali mo- ona dyskusji. W opinii u¿ytkowników jego rozwi¹zania. Jeœli odpowiedŸ na to pytanie podanie numeru karty kredytowej na pewno brzmi: „Tak”, to wtedy robiê wszystko, by moje jest ostatnim etapem transakcji. Jeœli dodamy rozwi¹zanie by³o funkcjonalne”. kolejny etap po obci¹¿eniu karty p³atniczej, u¿ytkownicy mog¹ go nawet nie zauwa¿yæ. Czego nie mo¿na dowiedzieæ siê z testów funkcjonalnoœci: Czego nie mo¿emy siê dowiedzieæ… n Czy dana funkcja bêdzie u¿ywana. Chocia¿ testy funkcjonalnoœci s¹ bardzo potê¿nym W czasie testów funkcjonalnoœci narzêdziem, to nie s¹ panaceum. Nie mog¹ rozwi¹- przeprowadzamy ochotników przez zadanie, zaæ wszystkich problemów naszej witryny lub za- które musz¹ zrealizowaæ, korzystaj¹c pobiec jej pora¿kom. Nie s¹ tak¿e substytutem wcze- z funkcji naszej witryny. Z takich badañ œniejszych badañ na temat odbiorców. mo¿emy jedynie dowiedzieæ siê, czy ludzie „Trzeba poœwiêciæ swój czas i zrozumieæ klien- potrafi¹ u¿ywaæ naszych narzêdzi, ale nie tów. Testy funkcjonalnoœci to tylko czêœæ procesu mo¿emy wywnioskowaæ, czy bêd¹ ich u¿ywaæ. poznawania klientów” — wyjaœnia Mike Kunia- n Czy umieœciliœmy w witrynie odpowiednie vsky, autor ksi¹¿ki Observing the User Experience: A Prac- funkcje. Czasami z testów mo¿e wynikaæ, titioner’s Guide for User Research. jakie funkcje powinny byæ dodane (na przyk³ad „Zanim przejdziemy do przeprowadzenia te- wtedy, gdy u¿ytkownik nie jest w stanie stów funkcjonalnoœci, powinniœmy z ca³¹ pewnoœci¹ ukoñczyæ jakiegoœ zadania). Ale testy nie powiedz¹ nam, czy wybraliœmy odpowiednie Zapytajmy ekspertów narzêdzia. „Testy funkcjonalnoœci mog¹ Pytanie: Jakie jest najbardziej b³êdne przekonanie klientów? nam jedynie pokazaæ, czy ktoœ jest w stanie Jeffrey Veen: „S¹dz¹, ¿e funkcjonalnoœæ to rozwi¹zanie. ukoñczyæ zadanie” — mówi Jeffrey Veen. Tak naprawdê funkcjonalnoœæ jest raczej narzêdziem „Ale nic wiêcej naprawdê nie wyka¿¹”. sprawdzania pisowni…” (pe³na odpowiedŸ w ramce „Dlaczego testy funkcjonalnoœci mog¹ siê nie powieœæ?”, str. 150).
Projektowanie witryny: organizacja i nawigacja 147 Tani sposób przeprowadzenia testów Jeœli dysponujemy przyzwoitym — lub nawet skrom- 2. Rekrutacja ochotników nym — bud¿etem na stworzenie witryny, powinniœmy zainwestowaæ w profesjonalne testy funkcjonalnoœci, Ochotnicy, jakich rekrutujemy, maj¹ ogromny wp³yw na prowadzone przez ekspertów funkcjonalnoœci w œro- to, co uda siê nam odkryæ. Profesjonalne laboratoria dowisku laboratoryjnym. funkcjonalnoœci zazwyczaj wybieraj¹ osoby z d³ugiej Jeœli jest to nieosi¹galne przy naszym bud¿ecie, listy potencjalnych wolontariuszy, zwerbowanych przez powinniœmy sami przeprowadziæ testy, poœwiêcaj¹c na firmy badawcze. nie kilka godzin i wykorzystuj¹c do tego paru ochotni- Rekrutujemy ochotników ków. Nawet tak proste rozwi¹zanie mo¿e nam ujawniæ Jeœli chcemy przeprowadziæ testy na du¿¹ skalê, za- wiele wa¿nych spostrze¿eñ. pewne bêdziemy chcieli zatrudniæ profesjonaln¹ firmê „Nawet test z jednym u¿ytkownikiem daje nam bar- rekrutacyjn¹. Mo¿emy jednak rekrutowaæ u¿ytkowników dzo du¿o” — mówi profesor Uniwersytetu Stanu Illinois testowych w du¿o tañszy i mniej formalny sposób, szu- Michael Twidale, który udzieli³ zamieszczonych poni- kaj¹c ich wœród nastêpuj¹cych grup: ¿ej wskazówek. A jak mawia Steve Krug w swojej wspa- nia³ej ksi¹¿ce Don’t Make Me Think „Testy z udzia³em n Klienci. Istniej¹cy klienci s¹ œwietnymi kandydatami jednego u¿ytkownika to sytuacja o sto procent lepsza do przeprowadzenia testów funkcjonalnoœci, ni¿ brak testów”. poniewa¿ s¹ ju¿ zapoznani z naszymi produktami i zainteresowani nimi. Klientów mo¿na próbowaæ 1. Przygotowanie „laboratorium” zachêciæ osobiœcie lub zwerbowaæ ochotników, umieszczaj¹c og³oszenie w witrynie. Oczywiœcie, testy mo¿emy przeprowadziæ, siedz¹c za plecami naszego wspó³pracownika i przygl¹daj¹c siê, n Wspó³pracownicy. Jest to grupa dobrych testerów jak korzysta on z naszej nowej witryny. Jeœli chcemy, interfejsu przy za³o¿eniu, ¿e pracownicy ci by testy by³y bardziej profesjonalne, powinniœmy naj- nie uczestnicz¹ bezpoœrednio w pracach nad pierw przygotowaæ prawdziwe laboratorium funkcjo- testowanym produktem. Pamiêtajmy tak¿e, ¿e nalnoœci. osoby zwerbowane wewn¹trz firmy wiedz¹ du¿o W wiêkszoœci laboratoriów ochotnik sadzany jest wiêcej na temat produktu ni¿ prawdziwi u¿ytkownicy. przy komputerze z kamer¹, która rejestruje wyraz jego Ich odpowiedzi mog¹ byæ tak¿e umotywowane twarzy. Druga kamera rejestruje, co dzieje siê w tym stosunkami spo³ecznymi panuj¹cymi w firmie. samym czasie na ekranie. Przekaz wideo jest wyko- n Przyjaciele i rodzina. Nie ma nic z³ego rzystywany na dwa sposoby — jest nagrywany na ta- w poproszeniu przyjació³ i cz³onków rodziny œmê (na przysz³y u¿ytek i do badañ) oraz jest wyœwie- o pomoc w testowaniu nowej witryny. Pamiêtajmy tlany w przyleg³ym pokoju, gdzie obserwatorzy mog¹ jednak, ¿e mog¹ oni nie byæ ca³kowicie szczerzy. na ¿ywo ogl¹daæ test, widz¹c u¿ytkownika na jednym Ich odpowiedzi mog¹ byæ bardziej dyplomatyczne ekranie, a obraz z przegl¹darki na drugim. W niektó- ni¿ odpowiedzi normalnych u¿ytkowników (chocia¿ rych laboratoriach pokój z ochotnikami i pokój z obser- mog¹ byæ równie dobrze mniej dyplomatyczne — watorami oddzielone s¹ lustrem weneckim. wszystko zale¿y od tego, jakich mamy przyjació³). Potrzebny sprzêt: Ochotnicy do badañ n komputer z dostêpem do internetu lub do witryny, Ochotnicy powinni jak najlepiej pasowaæ do profilu do- któr¹ zamierzamy testowaæ, celowego u¿ytkownika: n kamera wideo lub kamera cyfrowa, n Poziom znajomoœci treœci. Jeœli witryna jest n przyleg³y pokój ze sprzêtem wideo (opcjonalne), dedykowana osobom o specyficznych zainteresowaniach, potrzebach lub poziomie n ekran pokazuj¹cy obraz z monitora u¿ytkownika znajomoœci zagadnienia, nasi ochotnicy te¿ (opcjonalne), powinni siê tym cechowaæ. n drugi ekran, na którym bêdzie wyœwietlana twarz n Poziom znajomoœci technologii. Ochotnicy u¿ytkownika (opcjonalne). powinni pasowaæ do odbiorców pod wzglêdem znajomoœci technologii internetowych.
148 Projektowanie witryny: organizacja i nawigacja n Poziom znajomoœci komputera. Ochotnicy 4. Obserwacja powinni umieæ swobodnie korzystaæ z komputera i przegl¹darki. Gdy ochotnik wykonuje przydzielone mu zadanie, trze- ba zachowywaæ siê cicho i uwa¿nie obserwowaæ go. 3. Przygotowanie zadania W naszych obserwacjach powinniœmy zwróciæ szcze- góln¹ uwagê na: Niektóre testy s¹ zadaniami otwartymi, umo¿liwiaj¹cymi n Œcie¿kê u¿ytkownika. W myœlach pod¹¿ajmy ochotnikom swobodne eksplorowanie interfejsu i chodze- œcie¿k¹ u¿ytkownika przez witrynê i zwróæmy nie w³asnymi drogami. Rozwi¹zanie takie jest dobre uwagê, w których miejscach odchodzi on od tylko w przypadku niektórych witryn i tylko w niektórych zalecanej lub spodziewanej trasy. Zwróæmy uwagê, zastosowaniach. Ogólnie nie jest to zalecana technika. jak zachowuje siê, gdy znajdzie siê w „œlepej uliczce” Powinniœmy raczej przygotowaæ kilka zadañ do wy- — czy potrafi cofn¹æ siê i naprawiæ swoj¹ pomy³kê? konania w witrynie. Dziêki temu u¿ytkownicy aktywniej anga¿uj¹ siê w test, a ca³oœæ bardziej przypomina rze- n Wahanie. Zwróæmy uwagê, kiedy u¿ytkownik siê czywisty œwiat (poniewa¿ wiêkszoœæ u¿ytkowników waha lub nie wie, co zrobiæ (pewnie jeŸdzi przybywaj¹cych do witryny ma ju¿ wytyczony cel). kursorem nad kilkoma odnoœnikami). W takim miejscu powinniœmy dopracowaæ interfejs. Nawet Najpierw dodajmy otuchy jeœli nasz testowy u¿ytkownik wybierze w koñcu Ochotnicy na pewno bêd¹ trochê zdenerwowani, przy- dobr¹ drogê, to inny mo¿e siê tutaj pomyliæ. stêpuj¹c do testu. Daliœmy im zadanie do wykonania n Szukanie i przewijanie strony. Zwróæmy uwagê i dlatego czuj¹ siê tak, jakby byli sprawdzani (i tak jak na sytuacje, w których ochotnik szuka jakiegoœ w szkole oceniani za swoje wyniki). Zdenerwowani u¿yt- odnoœnika, ale nie potrafi go znaleŸæ. kownicy nie pomog¹ nam w uzyskaniu realistycznych n Reakcje emocjonalne. Zwróæmy uwagê, i przydatnych wyników, dlatego trzeba dodaæ im otuchy gdy ochotnik wyrazi zdziwienie lub frustracjê. i zapewniæ, ¿e to oni testuj¹ system, a nie odwrotnie. W³aœnie to mo¿emy im powiedzieæ. Mike Kuniavsky, Zadawajmy pytania. Gdy nabierzemy ju¿ trochê wpra- autor ksi¹¿ki Observing the User Experience i za³o¿y- wy w przeprowadzaniu testów, mo¿emy zacz¹æ zada- ciel laboratorium funkcjonalnoœci w Wired, zawsze za- waæ pytania, aby zrozumieæ sposób myœlenia testowego czyna³ testy od zapewnienia u¿ytkowników s³owami: u¿ytkownika. Powinniœmy jednak zwróciæ uwagê na to, „Pamiêtajcie, ¿e to wy testujecie interfejs, a nie inter- jak formu³ujemy pytania. fejs testuje was. B³êdne wykonanie zadania nie jest n Zadawajmy pytania otwarte. Nie pytajmy, mo¿liwe”. czy coœ wygl¹da jak odnoœnik do stron z pomoc¹, Opiszmy zadanie tylko „jak myœlisz, co mo¿e znajdowaæ siê za takim odnoœnikiem?” Opiszmy ochotnikowi prawdopodobny scenariusz tego, co ma zrobiæ w witrynie — czy ma zlokalizowaæ sklep, Nie pytajmy „Dlaczego to zrobi³eœ?” Ludzie przelaæ pieni¹dze w witrynie banku lub znaleŸæ zdjêcie kojarz¹ to pytanie ze szko³¹. Mog¹ staæ siê karlika malutkiego. Wa¿ne jest, by ochotnik rozumia³, defensywni i próbowaæ wymyœliæ jak¹kolwiek co ma osi¹gn¹æ w witrynie, nawet jeœli jest to coœ, cze- zaspokajaj¹c¹ nas odpowiedŸ. go sam nigdy by nie robi³. n Nie pytajmy „Dlaczego to zrobi³eœ?” Profesor Michael Twidale uwa¿a, ¿e ludzie kojarz¹ to Nie przeszkadzajmy pytanie ze szko³¹. Mog¹ uchylaæ siê od odpowiedzi Trzeba powstrzymaæ siê od podpowiadania testowe- lub te¿ mog¹ wymyœliæ jak¹kolwiek odpowiedŸ. mu u¿ytkownikowi, co ma zrobiæ. Jest to trudne zada- „Tak sformu³owane pytanie sugeruje, ¿e zrobili coœ nie, jeœli testujemy witrynê, któr¹ sami stworzyliœmy Ÿle. Lepiej zapytaæ — Jak myœlisz, co zasugerowa³o (chcemy wyjaœniæ jej strukturê, broniæ przed zarzutami ciê, ¿eby tak post¹piæ?” — mówi profesor. lub pokazaæ najciekawsze funkcje). Ale musimy pozwo- n Powiedzmy tylko „hmm”. Gdy chcemy liæ u¿ytkownikowi samemu zmagaæ siê z ni¹, jeœli chce- zrozumieæ, co powoduje frustracjê lub zagubienie, my zobaczyæ, jak ludzie bêd¹ sobie radziæ poza labo- mo¿emy zachêciæ ochotnika do wypowiedzi, ratorium funkcjonalnoœci.
Projektowanie witryny: organizacja i nawigacja 149 mówi¹c „hmm”. Twidale kontynuuje: „jest to bardzo dziwne, ale ludzie czêsto rozwijaj¹ swoje wypowiedzi w³aœnie wtedy, gdy powiemy zwyk³e hmm, zamiast spytaæ ich, co myœl¹. Konkretne pytania czêsto wprawiaj¹ ich w zak³opotanie. Natomiast zwyk³e hmm mo¿e sprawiæ, ¿e zaczn¹ dok³adniej opowiadaæ, co myœl¹ na dany temat”. 5. Zidentyfikowanie problemów Patrz¹c, jak ochotnicy zmagaj¹ siê z interfejsem na- szej witryny, mo¿emy szybko zidentyfikowaæ g³ówne problemy z funkcjonalnoœci¹. Zazwyczaj ma³y test, prze- prowadzony przy pomocy od trzech do piêciu u¿ytkow- ników, odkryje wszystkie wiêksze b³êdy interfejsu. Przy- gl¹daj¹c siê zachowaniu ochotników, powinniœmy umieæ wskazaæ nie tylko problematyczne obszary, ale tak¿e przyczyny tych problemów. Szczególn¹ uwagê powin- niœmy zwracaæ na: n problemy z rozmieszczeniem elementów, n problemy z oznaczeniami, n problemy z grupowaniem, n problemy z tempem lub kolejnoœci¹ wykonywania czynnoœci, n problemy z modelem funkcjonalnym projektu. Jeœli wczeœnie w procesie testowania wykryjemy pro- sty problem (np. przy pierwszym ochotniku), mo¿emy szybko poprawiæ go przed rozpoczêciem testów z ko- lejnym ochotnikiem. Usuwaj¹c pocz¹tkow¹ przeszko- dê, mo¿emy skupiæ siê na innych, mniej oczywistych problemach. 6. Wynagrodzenie ochotników Jeœli zamierzamy wykorzystaæ czyjœ czas, powinniœmy mu to jakoœ wynagrodziæ. W standardowych testach ochotnikom p³aci siê gotówk¹. Ale ludzi mo¿na moty- wowaæ tak¿e czymœ innym. Mog¹ to byæ firmowe ma- teria³y reklamowe, takie jak koszulki, torby, kubki z logo produktu lub na przyk³ad jakiœ produkt naszej firmy. Na wynagrodzenie nadaj¹ siê tak¿e bony towarowe (zw³aszcza na darmowy posi³ek w restauracji czy bile- ty do kina). Jeœli rekrutujemy testowych u¿ytkowników wœród pracowników firmy, mo¿emy ich motywowaæ, ofe- ruj¹c im wolny dzieñ.
150 Projektowanie witryny: organizacja i nawigacja wskazówki praktyczne Dlaczego testy funkcjonalnoœci mog¹ siê nie powieœæ? Testy funkcjonalnoœci to chyba najlepsza sprawa 2. Jeœli testujemy coœ, co nie mo¿e zostaæ zmie- w historii rozwoju internetu. Nie s¹ jednak zawsze nione. Wiele testów funkcjonalnoœci zmarnowano, niezawodne. Projektant Jeffrey Zeldman napisa³ poniewa¿ osoby przeprowadzaj¹ce test lub wolonta- w swojej ksi¹¿ce Taking Your Talent to the Web: „Jest riusze skupiali siê na elementach witryny lub inter- dobre testowanie funkcjonalnoœci i jest bezu¿ytecz- fejsu, których nie mo¿na zmieniæ. na pseudonauka, promuj¹ca banalnoœæ. Niestety, do- „Zanim zaczniemy testy, musimy wiedzieæ, co póki nie zaczniemy wspó³pracowaæ z agencj¹ inter- mo¿na, a czego nie mo¿na zmieniæ w witrynie” — netow¹, nie mo¿emy powiedzieæ, czy stosowane mówi projektant Jim Frew. „Jeœli nasz znak graficzny przez ni¹ metody testowania daj¹ przydatne infor- zawsze by³ i zawsze bêdzie zielony, nie pytajmy, czy macje, czy prowadz¹ na manowce”. powinien byæ czerwony. Nigdy nie bêdzie czerwony”. Jeœli nie chcemy zostaæ sprowadzeni na ma- 3. Jeœli testujemy coœ, co nie ma znaczenia. Zbyt nowce, musimy umieæ rozpoznaæ znaki ostrzegaw- czêsto testy funkcjonalnoœci prowadz¹ donik¹d, po- cze. Testy funkcjonal- niewa¿ dotycz¹ aspektów noœci mog¹ nie udaæ siê witryny lub jej interfejsu w kilku sytuacjach: Naprawdê trudno nie wp³ywaj¹cych na funk- 1. Jeœli nie wiemy, co jest wierzyæ danym, cjonalnoœæ witryny. Po- testujemy. Przed rozpo- poniewa¿ na ich nownie prym wiedzie ko- czêciem testów musimy lor. Ludzie uwielbiaj¹ podj¹æ decyzjê, jakie podstawie ka¿dy komentowaæ niew³aœciwy aspekty witryny chcemy mo¿e sformu³owaæ ich zdaniem dobór kolo- przetestowaæ. Pomaga rów. Kolor faktycznie inne wnioski. to skoncentrowaæ siê wp³ywa na odbiór witryny w czasie testów i igno- Sheryl Cababa przez u¿ytkownika, ale rowaæ zbêdne wska- rzadko ma znaczenie dla zówki uczestnicz¹cego funkcjonalnoœci, chyba ¿e w teœcie wolontariusza. powoduje nieczytelnoœæ tekstu w witrynie. „Jednym z kluczy do testowania jest ustalenie, „Ludzie nie opuszczaj¹ witryny dlatego, ¿e nie jakie informacje chcemy uzyskaæ, poniewa¿ nie kon- lubi¹ fioletu” — mówi Lance McDaniel. „Opuszczaj¹ trolujemy, co komentuje osoba testuj¹ca” — mówi witrynê, jeœli za d³ugo siê ³aduje, jeœli nie potrafi¹ zna- Lance McDaniel, wiceprezes firmy SBI & Co. Na przy- leŸæ tego, czego szukaj¹ lub jeœli w witrynie nie ma k³ad, wolontariusze uwielbiaj¹ mówiæ o kolorach. tego, co ich interesuje”. „Klient mówi wtedy, ¿e testuj¹cym nie podoba³ siê 4. Jeœli przeprowadzaj¹cy test nie przygotowa³ kolor. Powinniœmy odpowiedzieæ, ¿e nie testujemy dobrego scenariusza. Gdy przeprowadzamy testy koloru; testujemy proces zamawiania, co do którego funkcjonalnoœci we w³asnym zakresie, musimy upew- nie by³o zarzutów”. niæ siê, ¿e osoby nadzoruj¹ce testy wyraŸnie, zwiêŸ- le i obiektywnie wyjaœni³y wolontariuszom, czego od nich oczekujemy.
Projektowanie witryny: organizacja i nawigacja 151 „Uczestniczy³em w ró¿nych testach. Zauwa¿y³em, 7. Jeœli próbujemy sprawdziæ, czy dane narzêdzie ¿e niektóre osoby przeprowadzaj¹ce testy nie zawsze bêdzie u¿ywane. Jest to klasyczny problem testów wiedz¹, w jaki sposób zachêciæ u¿ytkowników lub jak funkcjonalnoœci — ludzie interpretuj¹ pozytywne wy- kierowaæ procesem testowania — mówi projektant niki testów jako potwierdzenie, ¿e tworz¹ odpowied- Jim Frew. „Ca³e testowanie nie mia³o sensu, ponie- ni¹ rzecz. Jednak testy funkcjonalnoœci nie mog¹ nam wa¿ osoba przeprowadzaj¹ca test nie potrafi³a uzy- tego powiedzieæ. Testy funkcjonalnoœci mog¹ daæ je- skaæ od u¿ytkownika odpowiednich opinii”. dynie informacjê, czy ludzie rozumiej¹ i wiedz¹, jak 5. Jeœli ochotnik nie jest typowym u¿ytkownikiem. u¿ywaæ danego narzêdzia, gdy musz¹ go u¿yæ. Nie Najwa¿niejszym celem testów funkcjonalnoœci jest mówi¹ jednak nic o tym, czy dane narzêdzie bêdzie poznanie sposobu myœlenia u¿ytkownika w czasie dobrowolnie stosowane. wykonywania typowych zadañ w witrynie. Nie uda Jak ujê³a to Martha Brockenbrough, by³a redaktor siê nam to, jeœli ochotnicy nie bêd¹ stanowiæ repre- MSN: „Testy funkcjonalnoœci nie mog¹ sprawdziæ, czy zentatywnej grupy naszych odbiorców. Gdy ochotnicy dane narzêdzie bêdzie faktycznie u¿ywane”. znacznie ró¿ni¹ siê od typowego u¿ytkownika pod 8. Jeœli testerzy lub ochotnicy s¹ nieprzyjaŸnie wzglêdem nastawienia, umiejêtnoœci, komputerowego nastawieni. Jeœli testy funkcjonalnoœci (lub ich doœwiadczenia (wiedz¹ zbyt wiele lub zbyt ma³o z da- wyniki) wpadn¹ w niepowo³ane rêce, mog¹ staæ siê nego tematu lub na temat broni¹ w utarcz- internetu), uzyskane wyni- kach miêdzy pra- ki nie bêd¹ poprawne. Funkcjonalnoœæ cownikami, tak „Nasze badania bêd¹ przypomina sprawdzanie powszechnych wielokrotnie lepsze, jeœli w firmach. Tester u¿ytkownicy, z którymi pisowni. Sprawdzenie mo¿e zasugero- rozmawiamy, bêd¹ po- pisowni nie ulepszy waæ u¿ytkowniko- dobni do naszych odbior- wi jakieœ szcze- ców” — mówi Jeffrey naszego eseju, a jedynie gólne wnioski, Veen. „Im wiêcej wysi³ku poprawi w nim b³êdy. a osoba analizu- w³o¿ymy w rekrutacjê, tym j¹ca wyniki mo¿e Jeffrey Veen bardziej wiarygodne bêd¹ zinterpretowaæ je wyniki testów”. zgodnie z celami 6. Jeœli wyniki zostan¹ Ÿle zinterpretowane. Testy w³asnymi lub celami swojego wydzia³u. Sami wolon- funkcjonalnoœci mo¿na interpretowaæ w ró¿ny spo- tariusze mog¹ mieæ wp³yw na koñcowe wyniki, jeœli sób. Wnioski wyci¹gniête z tego samego testu mog¹ ¿ywi¹ jak¹œ niechêæ do firmy, witryny lub œwiata. siê znacznie ró¿niæ w zale¿noœci od profesji i osobo- 9. Jeœli oczekujemy, ¿e rozwi¹¿¹ wszystkie na- woœci obserwatora. Projektant, in¿ynier, sprzedaw- sze problemy. „Najbardziej b³êdnym przekonaniem, ca mog¹ mieæ bardzo ró¿ne spostrze¿enia. le zin- jakie miewaj¹ klienci, jest to, ¿e funkcjonalnoœæ jest terpretowany dobry test jest gorszy ni¿ z³y test. rozwi¹zaniem” — mówi Jeffrey Veen. „Funkcjonal- „Gdy tworzony przeze mnie produkt ma byæ te- noœæ przypomina sprawdzanie pisowni. Sprawdze- stowany, staram siê obserwowaæ ka¿dy test” — mówi nie pisowni nie ulepszy naszego eseju, a jedynie Sheryl Cababa, projektantka produktów w Microsoft. poprawi w nim b³êdy. Z funkcjonalnoœci¹ jest podob- „Widzê wtedy, jak in¿ynierowie funkcjonalnoœci pod- nie. Jest to ostatnia czynnoœæ w d³ugim procesie po- sumowuj¹ zebrane dane i jakie wnioski z nich wyci¹- znawania naszych u¿ytkowników. Jest to jedynie gaj¹. Mog¹ byæ one ca³kowicie inne ni¿ wnioski, któ- sprawdzenie, ¿e nasze za³o¿enia by³y poprawne”. re ja bym wyci¹gnê³a. Naprawdê trudno jest wierzyæ danym, poniewa¿ na ich podstawie ka¿dy mo¿e sfor- mu³owaæ inne wnioski”.

More Related Content

PDF
Tworzenie stron WWW w praktyce
Wydawnictwo Helion
 
PDF
Po prostu Pajączek 5 NxG
Wydawnictwo Helion
 
PDF
Adobe Dreamweaver CS3/CS3 PL. Oficjalny podręcznik
Wydawnictwo Helion
 
PDF
Adobe PageMaker 7.0. Oficjalny podręcznik
Wydawnictwo Helion
 
PDF
Web Design. Projektowanie atrakcyjnych stron WWW
Wydawnictwo Helion
 
PDF
MS Project 2003. Zarządzanie projektami. Edycja limitowana
Wydawnictwo Helion
 
PDF
ABC tworzenia stron WWW
Wydawnictwo Helion
 
PDF
HTML w 10 prostych krokach
Wydawnictwo Helion
 
Tworzenie stron WWW w praktyce
Wydawnictwo Helion
 
Po prostu Pajączek 5 NxG
Wydawnictwo Helion
 
Adobe Dreamweaver CS3/CS3 PL. Oficjalny podręcznik
Wydawnictwo Helion
 
Adobe PageMaker 7.0. Oficjalny podręcznik
Wydawnictwo Helion
 
Web Design. Projektowanie atrakcyjnych stron WWW
Wydawnictwo Helion
 
MS Project 2003. Zarządzanie projektami. Edycja limitowana
Wydawnictwo Helion
 
ABC tworzenia stron WWW
Wydawnictwo Helion
 
HTML w 10 prostych krokach
Wydawnictwo Helion
 

What's hot (20)

PDF
Pajączek 5 NxG. Oficjalny podręcznik
Wydawnictwo Helion
 
PDF
HTML i XHTML dla każdego
Wydawnictwo Helion
 
PDF
Contribute 2. Szybki start
Wydawnictwo Helion
 
PDF
Tworzenie stron WWW. Kurs
Wydawnictwo Helion
 
PDF
FrontPage 2003 PL. Nie tylko dla webmasterów
Wydawnictwo Helion
 
PDF
Dreamweaver MX
Wydawnictwo Helion
 
PDF
CSS. Antologia. 101 wskazówek i trików
Wydawnictwo Helion
 
PDF
Microsoft Office 2007 PL. Rady i wskazówki. Rozwiązania w biznesie
Wydawnictwo Helion
 
PDF
JavaScript i DHTML. Receptury
Wydawnictwo Helion
 
PDF
MS Project 2002. Zarządzanie projektami
Wydawnictwo Helion
 
PDF
Komputer PC w biurze i nie tylko
Wydawnictwo Helion
 
PDF
Funkcjonalność stron www. 50 witryn bez sekretów
Wydawnictwo Helion
 
PDF
Tworzenie stron WWW w praktyce. Wydanie II
Wydawnictwo Helion
 
PDF
Po prostu Office 2003 PL
Wydawnictwo Helion
 
PDF
Serwisy internetowe. Programowanie
Wydawnictwo Helion
 
PDF
Dreamweaver MX 2004
Wydawnictwo Helion
 
PDF
Po prostu PowerPoint 2007 PL
Wydawnictwo Helion
 
PDF
Tworzenie stron WWW. Kurs. Wydanie II
Wydawnictwo Helion
 
PDF
Po prostu Outlook 2003 PL
Wydawnictwo Helion
 
PDF
Pajączek 5 NxG
Wydawnictwo Helion
 
Pajączek 5 NxG. Oficjalny podręcznik
Wydawnictwo Helion
 
HTML i XHTML dla każdego
Wydawnictwo Helion
 
Contribute 2. Szybki start
Wydawnictwo Helion
 
Tworzenie stron WWW. Kurs
Wydawnictwo Helion
 
FrontPage 2003 PL. Nie tylko dla webmasterów
Wydawnictwo Helion
 
Dreamweaver MX
Wydawnictwo Helion
 
CSS. Antologia. 101 wskazówek i trików
Wydawnictwo Helion
 
Microsoft Office 2007 PL. Rady i wskazówki. Rozwiązania w biznesie
Wydawnictwo Helion
 
JavaScript i DHTML. Receptury
Wydawnictwo Helion
 
MS Project 2002. Zarządzanie projektami
Wydawnictwo Helion
 
Komputer PC w biurze i nie tylko
Wydawnictwo Helion
 
Funkcjonalność stron www. 50 witryn bez sekretów
Wydawnictwo Helion
 
Tworzenie stron WWW w praktyce. Wydanie II
Wydawnictwo Helion
 
Po prostu Office 2003 PL
Wydawnictwo Helion
 
Serwisy internetowe. Programowanie
Wydawnictwo Helion
 
Dreamweaver MX 2004
Wydawnictwo Helion
 
Po prostu PowerPoint 2007 PL
Wydawnictwo Helion
 
Tworzenie stron WWW. Kurs. Wydanie II
Wydawnictwo Helion
 
Po prostu Outlook 2003 PL
Wydawnictwo Helion
 
Pajączek 5 NxG
Wydawnictwo Helion
 
Ad

Viewers also liked (12)

PDF
Access 2003 PL. Biblia
Wydawnictwo Helion
 
PDF
C++. Potęga języka. Od przykładu do przykładu
Wydawnictwo Helion
 
PDF
Perl. Receptury. Wydanie II
Wydawnictwo Helion
 
PDF
Access 2003 PL. Kurs
Wydawnictwo Helion
 
PDF
Internet. Kurs
Wydawnictwo Helion
 
PDF
PHP. Praktyczne wprowadzenie
Wydawnictwo Helion
 
PDF
ABC Linux
Wydawnictwo Helion
 
PDF
C++. Algorytmy i struktury danych
Wydawnictwo Helion
 
PDF
C++. Styl programowania
Wydawnictwo Helion
 
PDF
UML. Wprowadzenie
Wydawnictwo Helion
 
PDF
XML. Wprowadzenie. Wydanie II
Wydawnictwo Helion
 
PDF
Nero 6. Nagrywanie płyt CD i DVD. Ćwiczenia praktyczne
Wydawnictwo Helion
 
Access 2003 PL. Biblia
Wydawnictwo Helion
 
C++. Potęga języka. Od przykładu do przykładu
Wydawnictwo Helion
 
Perl. Receptury. Wydanie II
Wydawnictwo Helion
 
Access 2003 PL. Kurs
Wydawnictwo Helion
 
Internet. Kurs
Wydawnictwo Helion
 
PHP. Praktyczne wprowadzenie
Wydawnictwo Helion
 
ABC Linux
Wydawnictwo Helion
 
C++. Algorytmy i struktury danych
Wydawnictwo Helion
 
C++. Styl programowania
Wydawnictwo Helion
 
UML. Wprowadzenie
Wydawnictwo Helion
 
XML. Wprowadzenie. Wydanie II
Wydawnictwo Helion
 
Nero 6. Nagrywanie płyt CD i DVD. Ćwiczenia praktyczne
Wydawnictwo Helion
 
Ad

Similar to Serwisy WWW. Projektowanie, tworzenie i zarządzanie (20)

PDF
Pozycjonowanie w wyszukiwarkach internetowych
Wydawnictwo Helion
 
PDF
Projektowanie funkcjonalnych serwisów internetowych
Wydawnictwo Helion
 
PDF
Pozycjonowanie i optymalizacja stron WWW. Jak to się robi
Wydawnictwo Helion
 
PDF
Optymalizacja funkcjonalności serwisów internetowych
Wydawnictwo Helion
 
PDF
Projektowanie stron WWW. Jak to zrobić?
Wydawnictwo Helion
 
PDF
Tworzenie stron WWW. Nieoficjalny podręcznik
Wydawnictwo Helion
 
PDF
Marketing I Reklama w Internecie
Sławomir Stańczuk
 
PDF
Zwiększ szybkość! Optymalizacja serwisów internetowych
Wydawnictwo Helion
 
PDF
Niezawodne strategie wygrywania w sieci
Lucas Jarzembowski
 
PDF
Czas na e-biznes
Wydawnictwo Helion
 
PDF
Witryny nie do ukrycia. Jak zbudować stronę, którą znajdzie każda wyszukiwarka
Wydawnictwo Helion
 
PDF
Niezawodne strategie wygrywania w sieci
Ebooki za darmo
 
PDF
Tworzenie stron WWW. Biblia. Wydanie II
Wydawnictwo Helion
 
PDF
Tworzenie stron WWW. Ilustrowany przewodnik
Wydawnictwo Helion
 
PDF
ABC tworzenia stron WWW. Wydanie II
Wydawnictwo Helion
 
PDF
Niezawodne strategie-wygrywania-w-sieci
Przemysław Wolny
 
PDF
7 rzeczy, które musisz wiedzieć, zanim założysz własną stronę www
Krzysztof Morawski
 
PDF
Usprawnij swoj-serwis-internetowy-i-zwielokrotnij-zyski
Przemysław Wolny
 
PDF
Pozycjonowanie i optymalizacja stron WWW. Jak się to robi. Wydanie II poprawi...
Wydawnictwo Helion
 
PDF
Kurs tworzenia stron internetowych
Wydawnictwo Helion
 
Pozycjonowanie w wyszukiwarkach internetowych
Wydawnictwo Helion
 
Projektowanie funkcjonalnych serwisów internetowych
Wydawnictwo Helion
 
Pozycjonowanie i optymalizacja stron WWW. Jak to się robi
Wydawnictwo Helion
 
Optymalizacja funkcjonalności serwisów internetowych
Wydawnictwo Helion
 
Projektowanie stron WWW. Jak to zrobić?
Wydawnictwo Helion
 
Tworzenie stron WWW. Nieoficjalny podręcznik
Wydawnictwo Helion
 
Marketing I Reklama w Internecie
Sławomir Stańczuk
 
Zwiększ szybkość! Optymalizacja serwisów internetowych
Wydawnictwo Helion
 
Niezawodne strategie wygrywania w sieci
Lucas Jarzembowski
 
Czas na e-biznes
Wydawnictwo Helion
 
Witryny nie do ukrycia. Jak zbudować stronę, którą znajdzie każda wyszukiwarka
Wydawnictwo Helion
 
Niezawodne strategie wygrywania w sieci
Ebooki za darmo
 
Tworzenie stron WWW. Biblia. Wydanie II
Wydawnictwo Helion
 
Tworzenie stron WWW. Ilustrowany przewodnik
Wydawnictwo Helion
 
ABC tworzenia stron WWW. Wydanie II
Wydawnictwo Helion
 
Niezawodne strategie-wygrywania-w-sieci
Przemysław Wolny
 
7 rzeczy, które musisz wiedzieć, zanim założysz własną stronę www
Krzysztof Morawski
 
Usprawnij swoj-serwis-internetowy-i-zwielokrotnij-zyski
Przemysław Wolny
 
Pozycjonowanie i optymalizacja stron WWW. Jak się to robi. Wydanie II poprawi...
Wydawnictwo Helion
 
Kurs tworzenia stron internetowych
Wydawnictwo Helion
 

More from Wydawnictwo Helion (20)

PDF
Tworzenie filmów w Windows XP. Projekty
Wydawnictwo Helion
 
PDF
Blog, więcej niż internetowy pamiętnik
Wydawnictwo Helion
 
PDF
Access w biurze i nie tylko
Wydawnictwo Helion
 
PDF
Pozycjonowanie i optymalizacja stron WWW. Ćwiczenia praktyczne
Wydawnictwo Helion
 
PDF
E-wizerunek. Internet jako narzędzie kreowania image'u w biznesie
Wydawnictwo Helion
 
PDF
Microsoft Visual C++ 2008. Tworzenie aplikacji dla Windows
Wydawnictwo Helion
 
PDF
Co potrafi Twój iPhone? Podręcznik użytkownika. Wydanie II
Wydawnictwo Helion
 
PDF
Makrofotografia. Magia szczegółu
Wydawnictwo Helion
 
PDF
Windows PowerShell. Podstawy
Wydawnictwo Helion
 
PDF
Java. Efektywne programowanie. Wydanie II
Wydawnictwo Helion
 
PDF
JavaScript. Pierwsze starcie
Wydawnictwo Helion
 
PDF
Ajax, JavaScript i PHP. Intensywny trening
Wydawnictwo Helion
 
PDF
PowerPoint 2007 PL. Seria praktyk
Wydawnictwo Helion
 
PDF
Excel 2007 PL. Seria praktyk
Wydawnictwo Helion
 
PDF
Access 2007 PL. Seria praktyk
Wydawnictwo Helion
 
PDF
Word 2007 PL. Seria praktyk
Wydawnictwo Helion
 
PDF
Serwisy społecznościowe. Budowa, administracja i moderacja
Wydawnictwo Helion
 
PDF
AutoCAD 2008 i 2008 PL
Wydawnictwo Helion
 
PDF
Bazy danych. Pierwsze starcie
Wydawnictwo Helion
 
PDF
Inventor. Pierwsze kroki
Wydawnictwo Helion
 
Tworzenie filmów w Windows XP. Projekty
Wydawnictwo Helion
 
Blog, więcej niż internetowy pamiętnik
Wydawnictwo Helion
 
Access w biurze i nie tylko
Wydawnictwo Helion
 
Pozycjonowanie i optymalizacja stron WWW. Ćwiczenia praktyczne
Wydawnictwo Helion
 
E-wizerunek. Internet jako narzędzie kreowania image'u w biznesie
Wydawnictwo Helion
 
Microsoft Visual C++ 2008. Tworzenie aplikacji dla Windows
Wydawnictwo Helion
 
Co potrafi Twój iPhone? Podręcznik użytkownika. Wydanie II
Wydawnictwo Helion
 
Makrofotografia. Magia szczegółu
Wydawnictwo Helion
 
Windows PowerShell. Podstawy
Wydawnictwo Helion
 
Java. Efektywne programowanie. Wydanie II
Wydawnictwo Helion
 
JavaScript. Pierwsze starcie
Wydawnictwo Helion
 
Ajax, JavaScript i PHP. Intensywny trening
Wydawnictwo Helion
 
PowerPoint 2007 PL. Seria praktyk
Wydawnictwo Helion
 
Excel 2007 PL. Seria praktyk
Wydawnictwo Helion
 
Access 2007 PL. Seria praktyk
Wydawnictwo Helion
 
Word 2007 PL. Seria praktyk
Wydawnictwo Helion
 
Serwisy społecznościowe. Budowa, administracja i moderacja
Wydawnictwo Helion
 
AutoCAD 2008 i 2008 PL
Wydawnictwo Helion
 
Bazy danych. Pierwsze starcie
Wydawnictwo Helion
 
Inventor. Pierwsze kroki
Wydawnictwo Helion
 

Serwisy WWW. Projektowanie, tworzenie i zarządzanie

  • 1. IDZ DO PRZYK£ADOWY ROZDZIA£ SPIS TRE CI Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie KATALOG KSI¥¯EK Autor: June Cohen T³umaczenie: Agata Bulandra (rozdz. 1–8), KATALOG ONLINE Marek Pa³czyñski (rozdz. 9–15, dod. A) ISBN: 83-7361-315-3 ZAMÓW DRUKOWANY KATALOG Tytu³ orygina³u: The Unusually Useful Web Book Format: B5, stron: 380 TWÓJ KOSZYK Wszystko, co powiniene wiedzieæ, DODAJ DO KOSZYKA by Twój serwis WWW odniós³ sukces • 10 kroków do sukcesu Twojej strony • 50 sposobów na zwiêkszenie ogl¹dalno ci CENNIK I INFORMACJE • 17 metod przyspieszenia ³adowania siê strony • 20 sposobów na wy¿sze miejsce w wyszukiwarkach • 10 prostych metod na sprawienie, by Twoja strona by³a bardziej ZAMÓW INFORMACJE O NOWO CIACH przyjazna dla odwiedzaj¹cych • 8 typowych b³êdów, które mo¿esz natychmiast poprawiæ ZAMÓW CENNIK Dwie ksi¹¿ki w jednej Je¿eli chcesz przyst¹piæ do pracy od razu i nie masz zamiaru czytaæ ca³o ci, wystarczy, ¿e przejrzysz fragmenty z poradami ekspertów. Je li dysponujesz wolnym czasem, CZYTELNIA mo¿esz zapoznaæ siê ze szczegó³owym omówieniem takich tematów jak: planowanie, projektowanie, budowanie i utrzymywanie serwisu internetowego. FRAGMENTY KSI¥¯EK ONLINE Listy zadañ W ksi¹¿ce znajduje siê dwadzie cia list zadañ do wykonania, dziêki którym przeprowadzenie najwa¿niejszych dla witryny operacji staje siê znacznie ³atwiejsze. W ród opisywanych czynno ci mo¿na znale æ zwiêkszanie ruchu sieciowego, przy pieszanie dzia³ania witryny, przygotowywanie planu projektu, zapewnianie zgodno ci rozwi¹zania z ró¿nymi standardami. Dodatkowe informacje Dziêki dwudziestu piêciu dodatkowym wskazówkom praktycznym mo¿esz siê zapoznaæ z codzienn¹ prac¹ takich serwisów jak MSN.com czy BabyCenter.com. Zawarte w tych wskazówkach informacje dotycz¹ kluczowych dla serwisu zagadnieñ, np. dobieranie Wydawnictwo Helion nazw poszczególnych sekcji czy efektywne rozsy³anie e-maili. ul. Chopina 6 Rady znanych ekspertów 44-100 Gliwice Ponad piêædziesiêciu ekspertów -- zarówno twórcy reklamy sieciowej, jak i za³o¿yciel tel. (32)230-98-63 serwisu BlackPlanet -- dzieli siê na ³amach ksi¹¿ki informacjami na ró¿ne tematy — e-mail: [email protected] od sposobów zarabiania pieniêdzy do zasad wspó³pracy z programistami. Pozbawione ¿argonu opisy Wszystkie poruszane zagadnienia, od wykupywania domeny po przygotowanie rysunków, s¹ opisane w sposób zrozumia³y, w formie instrukcji, które mo¿esz wykonaæ krok po kroku.
  • 2. Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 5 Spis treœci Wprowadzenie 16 I Planowanie witryny 21 1. Podejmowanie decyzji 22 Co sprawdza siê w internecie? ...................... 23 Do dzie³a! Dziesiêæ korzyœci, które internet mo¿e daæ firmie ........................................... 25 Opisanie misji ..................................................... 26 Pisanie planu Przyk³adowy opis misji .................................. 26 strona 35 Okreœlenie celów ................................................ 27 Typy celów ..................................................... 27 Czerpanie zysków Typowe cele .................................................. 27 Ustalenie celów witryny korporacyjnej ............... 28 strona 81 Czêœæ praktyczna: Co bêdziemy robiæ z nasz¹ witryn¹? ............... 29 Testy funkcjonalnoœci Decyzja o zawartoœci witryny ............................. 30 strona 143 Ustalenie priorytetów ..................................... 30 Lista propozycji .............................................. 30 Zwiêkszanie szybkoœci dzia³ania witryny Okreœlenie podstawowych funkcji ................. 31 strona 233 Wyznaczanie funkcji priorytetowych .............. 31 Wa¿noœæ ........................................................ 31 Zwiêkszanie ruchu £atwoœæ ......................................................... 32 Proces wyznaczania priorytetów ................... 32 strona 281 Wykres wyznaczania priorytetów ....................... 33 Czêœæ praktyczna: Poprawianie pozycji witryny Jakie funkcje ma zawieraæ witryna? ................ 34 na liœcie wyszukiwanych adresów strona 323 Do dzie³a! Pisanie planu 35 Dlaczego nale¿y pisaæ plan? .............................. 36 Plan podstawowy .......................................... 36 Nie dajmy siê sparali¿owaæ ........................... 37 Podstawowy plan produktu ................................ 38 Czêœæ praktyczna: Tworzenie planu produktu ............................. 43 2. Nazwa witryny 44 Wybieranie nazwy ......................................... 45 Rejestrowanie nazwy .................................... 46 Trzy sposoby nazywania witryn ......................... 47 Wybór przyrostka .......................................... 48 Budowa adresu internetowego ...................... 48 Pozyskanie nazwy domeny ................................ 49 Czêœæ praktyczna: Jak nazwiemy witrynê? .................................... 50
  • 3. 6 Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 3. Ocena konkurencji 52 Do dzie³a! Czerpanie zysków 81 Identyfikacja konkurencji .................................... 54 Sposób zarabiania ......................................... 82 Sk¹d siê bierze konkurencja? ....................... 54 Cztery kroki prowadz¹ce Jak znaleŸæ konkurencjê? ............................. 54 do zarabiania w internecie .......................... 82 Czêœæ praktyczna: Rozwa¿anie mo¿liwoœci ................................ 83 Kim jest nasza konkurencja? ............................. 55 Dlaczego decydowaæ siê tylko na jedno? ...... 83 Ocena konkurencji ............................................. 56 Piêæ sposobów zarabiania w internecie ............. 84 Analiza finansowa ......................................... 56 Czerpanie zysków ze sprzeda¿y ........................ 86 Analiza funkcjonalna ..................................... 56 Czego chc¹ nabywcy? .................................. 86 Rozpoznanie konkurentów ............................ 56 Czerpanie zysków z reklamy ......................... 87 Czêœæ praktyczna: Czego chc¹ reklamodawcy? ......................... 87 Ocena konkurencji ........................................... 57 Czerpanie zysków z op³at i subskrypcji .............. 88 Czego oczekuj¹ subskrybenci? ..................... 88 4. Poznawanie u¿ytkowników 58 Czerpanie zysków z kojarzenia .......................... 89 Wiedza o u¿ytkownikach .................................... 60 Czego oczekuj¹ poszukiwacze kontaktów? .. 89 Badania iloœciowe a jakoœciowe .................... 60 Formy p³atnoœci internetowych ........................... 90 G³ówne etapy badañ u¿ytkowników .............. 61 Czêœæ praktyczna: Narzêdzia do badañ u¿ytkowników .................... 62 Sk¹d bêdziemy czerpaæ zyski? ........................ 91 Tworzenie profilu u¿ytkowników ......................... 64 Ankietowanie u¿ytkowników .......................... 65 Szacowanie liczby odbiorców ............................ 66 Czêœæ praktyczna: Kim s¹ u¿ytkownicy witryny? ............................. 67 Zobrazowanie u¿ytkowników ............................. 68 Tworzenie postaci .......................................... 68 Wskazówki praktyczne: Nie jesteœmy u¿ytkownikami swojej witryny .... 69 Tworzenie scenariuszy .................................. 70 Podzia³ u¿ytkowników ................................... 70 Czêœæ praktyczna: Tworzenie postaci ............................................ 71 Przewidywanie potrzeb u¿ytkowników ............... 72 Narzêdzia do poznawania potrzeb u¿ytkowników ................................. 72 Wskazówki praktyczne: Nasza witryna nie jest centrum wszechœwiata .... 73 Zrozumienie potrzeb u¿ytkowników ................... 74 Planowanie nowej witryny ............................. 74 Analiza zadania ............................................. 74 Przekszta³cenie zadañ w funkcje .................. 75 Jak uzyskaæ dobre wyniki z analizy zadania? .. 75 Zrozumienie zachowania u¿ytkowników ............ 76 Analiza ruchu ................................................. 76 Testy funkcjonalnoœci .................................... 76 Narzêdzia pomagaj¹ce zrozumieæ zachowanie u¿ytkownika ............................ 76 Opinie klientów .............................................. 77 Piêædziesi¹t sposobów, aby straciæ u¿ytkowników ................................ 78
  • 4. Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 7 II Projektowanie witryny 93 Czêœæ praktyczna: W jaki sposób witryna  bêdzie zorganizowana? ................................. 134 5. Projektowanie Czêœæ praktyczna: na potrzeby internetu 94 Jaki system nawigacyjny wybierzemy? ......... 135 Dobrze zaprojektowana witryna internetowa ... 95 Nazywanie dzia³ów witryny .............................. 136 Projektowanie dla u¿ytkownika .......................... 96 Wybieranie spójnych nazw ............................... 138 Dziesiêæ sposobów Kilka dobrych przyk³adów ................................. 139 poprawy funkcjonalnoœci witryny ..................... 97 Wskazówki praktyczne: Projektowanie zgodnie z konwencjami .............. 98 Dlaczego nazwy dzia³ów powinny byæ Wskazówki praktyczne: jasne, nie wymyœlne? ..................................... 140 Dlaczego nale¿y postêpowaæ Dziwne nazwy .................................................. 141 zgodnie z konwencjami? .................................. 99 Czêœæ praktyczna: Jak ludzie widz¹ witryny internetowe? ............. 100 Jakich nazw dzia³ów u¿yjemy? ...................... 142 Wskazówki praktyczne: Konwencje wizualne w internecie i poza nim ... 101 Do dzie³a! Testy funkcjonalnoœci 143 Projektowanie pod k¹tem jêzyka HTML ........... 102 Piêæ typów testów funkcjonalnoœci .............. 144 Piêæ g³ównych zasad Czego mo¿emy dowiedzieæ siê projektowania w HTML-u .......................... 102 z testów funkcjonalnoœci? .............................. 145 Poradnik: Czego nie mo¿emy siê dowiedzieæ… ......... 146 Wybór oprogramowania ................................. 103 Tani sposób przeprowadzenia testów .............. 147 Projektowanie dla ró¿nych systemów .............. 104 Wskazówki praktyczne: Gdzie jest zgiêcie? ........................................... 105 Dlaczego testy funkcjonalnoœci Projektowanie pod k¹tem szybkoœci pobierania . 106 mog¹ siê nie powieœæ? .................................. 150 6. Organizacja i nawigacja 110 7. Projekt graficzny 152 Dobrze zorganizowana witryna ................... 111 Co projekt graficzny mo¿e daæ witrynie? ..... 153 Organizacja witryny .......................................... 112 Projekt strony g³ównej ...................................... 154 Tworzenie struktury witryny .............................. 113 Osiem wskazówek projektowych Wskazówki praktyczne: dla nowicjuszy ................................................ 157 Witryna nie powinna byæ odbiciem firmy ... 113 Piêæ spornych kwestii w projektowaniu ............ 158 Wskazówki praktyczne: Kolor w internecie ............................................. 160 Jak stworzyæ architekturê informacji? ............ 115 Wybór odpowiednich kolorów ...................... 160 Szeœæ sposobów organizacji witryny ................ 116 Znaczenie koloru ......................................... 160 Tworzenie zabawnych kategorii ....................... 119 Szeœæ wskazówek wybierania kolorów ........ 161 Dokumentowanie struktury witryny .................. 122 Tworzenie systemu kolorów ............................. 162 Nawigacja w witrynie ........................................ 124 RGB a CMYK .............................................. 162 Osiem z³ych pomys³ów na nawigacjê .......... 124 Kolory sprawdzaj¹ce siê w internecie .............. 163 Odrobina teorii: Kolor — kod szesnastkowy ......................... 163 Jak ludzie nawiguj¹ w internecie? ................. 125 Typografia w internecie .................................... 164 Nawigacja lokalna i globalna ............................ 126 Wybór kroju pisma ....................................... 164 Równowa¿enie warstw nawigacji ................ 126 Fonty szeryfowe a fonty bezszeryfowe ....... 164 Dlaczego rozwijane menu Czytelnoœæ na ekranie ................................. 165 nie nadaj¹ siê do nawigacji? ..................... 127 Verdana — najlepszy font w internecie ....... 166 Tworzenie systemu nawigacyjnego .................. 127 Formatowanie tekstu ................................... 167 Dwanaœcie systemów nawigacyjnych .............. 128 Font (czcionka) czy krój pisma? .................. 167
  • 5. 8 Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 8. Technologie projektowe 168 III Budowanie witryny 185 HTML i XHTML ............................................ 169 Arkusze stylów ............................................ 169 9. Projektowanie Rozszerzenia przegl¹darek ......................... 169 Skrypty dzia³aj¹ce po stronie klienta na potrzeby internetu 186 (JavaScript) ............................................... 169 Dziesiêæ powodów, dla których strony Skrypty dzia³aj¹ce po stronie serwera s¹ zbyt d³ugo pobierane ............................ 187 (ASP, PHP) ............................................... 169 Dlaczego strony s¹ zbyt d³ugo pobierane? ... 189 Aplety Java .................................................. 169 Kiedy „wolno” oznacza „zbyt wolno”? .......... 189 Jak uzyskaæ taki wygl¹d? ................................. 170 Projektowanie witryn XHTML — informacje ....................................... 172 z uwzglêdnieniem ich zgodnoœci ................... 190 HTML a XHTML — ró¿nice ......................... 172 Planowanie zgodnoœci Co trzeba wiedzieæ o jêzyku XHTML? ......... 172 z ró¿nymi systemami prezentacji .............. 190 Przejœcie na XHTML .................................... 173 Testowanie zgodnoœci ................................. 191 Konwersja kodu HTML na XHTML .............. 173 Przegl¹d technologii .................................... 191 Tabele — informacje ........................................ 174 Czêœæ praktyczna: Nauka stosowania tabel .............................. 174 W jaki sposób uczyniæ stronê Co trzeba wiedzieæ o tabelach? .................. 174 zgodn¹ z ró¿nymi przegl¹darkami? ............... 192 Ramki — informacje ......................................... 175 Projektowanie z zapewnieniem Zastosowanie ramek ................................... 175 stabilnego dzia³ania witryny ........................... 193 Co trzeba wiedzieæ o ramkach? .................. 175 Zapewnienie stabilnej pracy witryny ............ 193 Arkusze stylów — informacje ........................... 176 Naprawianie wadliwie funkcjonuj¹cej witryny ... 194 Co trzeba wiedzieæ o arkuszach stylów? ..... 176 Udostêpnienie zasobów witryny osobom Nauka stosowania arkuszy stylów ............... 177 niepe³nosprawnym ......................................... 196 JavaScript — informacje .................................. 178 To nie uprzejmoœæ — to inwestycja ............. 196 Co trzeba wiedzieæ o jêzyku JavaScript? .... 178 W Stanach Zjednoczonych Nauka stosowania jêzyka JavaScript .......... 179 to tak¿e wymóg prawny ............................ 196 Inne mo¿liwoœci programowania ................. 179 Dostosowanie serwisu Flash — informacje .......................................... 180 do potrzeb osób niepe³nosprawnych ........ 196 Co trzeba wiedzieæ o Flashu? ..................... 180 Piêæ niewielkich zmian czyni¹cych Nauka stosowania Flasha ........................... 181 witrynê dostêpn¹ dla wiêkszego grona u¿ytkowników .................................. 197 PHP — informacje ............................................ 182 Co trzeba wiedzieæ o PHP? ......................... 182 Gwarancja d³ugotrwa³ego dzia³ania witryny ..... 198 PHP a inne skrypty dzia³aj¹ce  Dlaczego musz¹ istnieæ standardy? ............ 198 po stronie serwera .................................... 183 Co zapewniaj¹ standardy sieciowe? ........... 199 Nauka stosowania PHP ............................... 183 Co stoi na przeszkodzie, ¿eby wdra¿aæ Inne technologie skryptowe dzia³aj¹ce standardy? ................................................ 199 po stronie serwera .................................... 183 Wskazówki praktyczne: Dlaczego nale¿y stosowaæ standardy? .......... 200 Projektowanie infrastruktury serwerowej .......... 202 Technologie typu open-source .................... 202 Przegl¹d technologii serwerowych ................... 203
  • 6. Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 9 10. Zasada dzia³ania Do dzie³a! Zwiêkszanie witryn internetowych 204 szybkoœci dzia³ania witryny 233 Tworzenie dokumentu HTML ...................... 205 W³aœciwie dzia³aj¹ca witryna internetowa ... 234 Trzy metody budowania witryn internetowych ... 206 Konfiguracja z myœl¹ o szybkoœci dzia³ania ..... 235 Rada eksperta: Zwiêkszenie szybkoœci witryny Co cechuje dobre projekty internetowe? ....... 207 w szeœciu posuniêciach ................................. 236 Jak dzia³a HTML? ............................................ 208 Czêœæ praktyczna: Pierwsza strona WWW .................................... 210 Jak zwiêkszyæ szybkoœæ dzia³ania witryny? ... 239 Jak z utworzonych stron powstaje witryna internetowa? ...................................... 212 12. Aplikacje Ustalenie w³aœciwego nazewnictwa ............ 212 w witrynie internetowej 240 Odpowiednia organizacja stron ................... 212 Wybór odpowiedniej technologii ....................... 242 Po³¹czenia miêdzy stronami ....................... 213 Unikanie potencjalnych trudnoœci ................ 242 Przesy³anie stron do serwera ...................... 213 Oszacowanie wartoœci nowej technologii ......... 243 Pobieranie stron WWW .................................... 214 Czêœæ praktyczna: Pobieranie stron generowanych  Dziesiêæ pytañ, jakie trzeba zadaæ dynamicznie .............................................. 215 przed wyborem nowej technologii .................. 244 Zasada dzia³ania serwera ........................... 215 Tworzenie oprogramowania witryny ................. 245 11. Przygotowanie rysunków Budowanie zespo³u ..................................... 247 Budowa aplikacji .............................................. 248 i plików multimedialnych Dokumentacja aplikacji ................................ 248 do wykorzystania w internecie 216 Wskazówki praktyczne: Podstawy kompresji .................................... 217 Wspó³praca z in¿ynierami .............................. 250 Jak dzia³a procedura kompresji? ................. 218 Podstawowe informacje na temat pamiêci ....... 219 Wyznaczanie rozmiaru pliku ........................ 219 Wyznaczanie rozmiaru pamiêci komputera ... 219 Pliki graficzne w internecie ............................... 220 Wybór formatu pliku graficznego ...................... 221 Przygotowanie rysunków do wykorzystania w internecie ....................... 222 Przesy³anie danych audio ................................ 224 Dlaczego dŸwiêk na stronach WWW mo¿e irytowaæ? ......................................... 224 Wybór formatu dla danych audio wykorzystywanych na stronach WWW .......... 225 Przygotowanie danych audio do wykorzystania w internecie ....................... 226 Przesy³anie danych wideo ................................ 228 Wybór formatu dla danych wideo wykorzystywanych na stronach WWW .......... 229 Przygotowanie danych wideo do wykorzystania w internecie ....................... 230
  • 7. 10 Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie IV Zarz¹dzanie witryn¹ 253 Do dzie³a! Zwiêkszanie ruchu 281 Pocz¹tek ...................................................... 282 13. Monitorowanie Piêæ elementów istotnych przy zwiêkszaniu ruchu ............................. 282 i rozbudowa witryny 254 Piêædziesi¹t sposobów zwiêkszenia ruchu ...... 283 Analiza witryny ................................................. 256 Pozyskiwanie nowych u¿ytkowników ............... 284 W jaki sposób u¿ytkownicy Zatrzymanie u¿ytkowników na stronach korzystaj¹ z witryny? ...................................... 257 witryny przez d³u¿szy czas ............................ 286 W jaki sposób u¿ytkownicy odnajduj¹ witrynê? .. 258 Zachêcanie u¿ytkowników Informacje o Ÿródle ...................................... 258 do czêstszych odwiedzin ............................... 288 Pomiar natê¿enia ruchu ................................... 259 Czêœæ praktyczna: Sposób gromadzenia danych o ruchu ......... 259 W jaki sposób zwiêkszyæ ruch? ..................... 290 Niedok³adnoœæ pomiaru ............................... 259 O czym nale¿y pamiêtaæ 14. Promocja witryny 292 przy pomiarze ruchu? ............................... 259 Szeœæ elementów dobrej promocji witryny .... 293 Jak dzia³aj¹ systemy rankingowe? .............. 260 Strategie reklamy werbalnej ............................. 294 Poradnik: Program p³atnych odsy³aczy ....................... 294 Wybór oprogramowania do analizy ruchu ..... 261 Programy typu „przeka¿ przyjacielowi” ........ 294 Tworzenie raportu na temat ruchu sieciowego .... 262 Ciekawe rozwi¹zanie: Na co nale¿y zwróciæ uwagê? ..................... 262 Niesztampowe sposoby Czêœæ praktyczna: informowania przyjació³ ................................. 295 Przyk³ad raportu na temat natê¿enia ruchu .... 263 Strategie wykorzystania poczty elektronicznej .... 296 Analizowanie zmian ..................................... 264 Szeœæ czynnoœci, jakie mo¿e Co jest przyczyn¹ za nas wykonaæ poczta elektroniczna ....... 296 wzrostu natê¿enia ruchu? ......................... 264 Wybór w³aœciwej strategii wykorzystania Typowy model ruchu ........................................ 265 poczty elektronicznej ................................. 297 Prognoza roczna .............................................. 266 Gromadzenie adresów e-mail ..................... 297 Styczniowy wzrost ....................................... 266 Wybór w³aœciwej strategii wykorzystania Letnia stagnacja .......................................... 266 poczty elektronicznej ..................................... 298 Jesienny wzrost ........................................... 267 Budowanie listy adresowej ............................... 300 Grudniowy spadek ....................................... 267 Czy nale¿y kupowaæ listy z adresami? ........ 300 Wyj¹tki od regu³y ......................................... 267 Poradnik: Rozwój witryny ................................................. 268 Wybór oprogramowania dla list adresowych .... 301 time.com — ma³e zmiany, znaczny efekt .... 268 Sprawdzanie teorii ....................................... 269 Wskazówki praktyczne: Koncentracja na sprawach najwa¿niejszych ... 269 Dwanaœcie wskazówek gwarantuj¹cych efektywne wykorzystanie poczty elektronicznej . 302 Wskazówki praktyczne: Jak MSN zachêca ludzi do klikania Strategie doboru odsy³aczy .............................. 304 (miliony razy)? ............................................... 270 Odsy³acze w wyszukiwarkach ..................... 304 Odsy³acze w katalogach .............................. 304 Wskazówki praktyczne: Odsy³acze z innych witryn ........................... 304 Jak serwis Webmonkey sta³ siê Dlaczego nale¿y starannie dochodow¹ bibliotek¹? .................................... 272 dobieraæ odsy³acze? ................................. 304 Wskazówki praktyczne: Rodzaje odsy³aczy ...................................... 305 Sk¹d w³aœciciele gURL.com wiedzieli, Jak wiele stron zawiera odsy³acze czego pragn¹ kobiety? .................................... 274 do zarz¹dzanej witryny? ........................... 305 Wskazówki praktyczne: Nag³ówki umieszczane na stronach W jaki sposób twórcy BlackPlanet zdo³ali innych witryn ............................................. 306 nak³oniæ u¿ytkowników do rejestracji P³atne odsy³acze ......................................... 306 (i wnoszenia op³at)? ....................................... 276 Reklama sieciowa ............................................ 308 Wykorzystanie witryny ...................................... 278 Tworzenie udanej kampanii ......................... 308 Czêœæ praktyczna: Liczba klikniêæ to nie wszystko .................... 309 Wykorzystanie witryny ................................... 279
  • 8. Serwisy WWW. Projektowanie, tworzenie i zarz¹dzanie 11 Ciekawe rozwi¹zanie: 15. Zarz¹dzanie Szeœæ rodzajów reklam, których nie mo¿na nie zauwa¿yæ ................... 310 projektem i zespo³em 334 Gdzie nale¿y umieszczaæ reklamy? ................. 312 Zarz¹dzanie projektem sieciowym ................... 335 Wybór witryny .............................................. 312 Wyjaœnianie celu prac ................................. 335 Cztery sposoby op³acania reklam ............... 312 Ustalenie sposobu podejmowania decyzji .... 335 Czêœæ praktyczna: Stosowanie s³owa „nie” ............................... 336 O co nale¿y zapytaæ Rozpoczêcie procesu .................................. 336 przed umieszczeniem reklamy? .................... 313 Wskazówki praktyczne: Metody doboru reklam ..................................... 314 Jak dotrzymaæ zbli¿aj¹cego siê terminu? ...... 337 Dobór do treœci ............................................ 314 Wykorzystanie dotychczasowej wiedzy ....... 337 Dobór reklam do u¿ytkownika ..................... 314 Wskazówki praktyczne: Rodzaje reklam ................................................ 315 Jak opracowaæ w³aœciwy harmonogram? ...... 338 Bannery ....................................................... 315 Wskazówki praktyczne: Przyciski ...................................................... 315 Jak przeprowadzaæ burze mózgów? ............. 340 Wie¿owce .................................................... 315 Zarz¹dzanie zespo³em ..................................... 342 Pojawiaj¹ce siê i pozostaj¹ce okna ............. 316 Wskazówki praktyczne: Reklamy typu rich media ............................. 316 Jak pos³ugiwaæ siê ró¿nymi jêzykami? .......... 343 Reklamy tekstowe ....................................... 316 Wskazówki praktyczne: Odsy³acze sponsorowane ........................... 316 Jak nak³oniæ pracowników do wspó³pracy? ..... 344 Preferencje twórców serwisu ....................... 316 Organizowanie zespo³u .................................... 346 Standardy reklamy sieciowej ....................... 317 Zespó³ podstawowy ..................................... 346 Sponsorowanie serwisu .............................. 318 Zespó³ rozszerzony ..................................... 348 Umieszczanie produktów ............................ 318 Organizacja zespo³u projektowego .................. 352 Reklamy wideo ............................................ 318 Firmy sieciowe ............................................. 352 Przerywniki .................................................. 318 Du¿e korporacje i agencje sieciowe ............ 353 Strategie reklamowania witryny Ma³e firmy i firmy konsultingowe ................. 354 w ró¿nych mediach przekazu ........................ 319 Wskazówki praktyczne: Czêœæ praktyczna: Jak w³¹czyæ wszystkich do pracy? ................. 355 Jak bêdzie promowana witryna? ................... 321 Czêœæ praktyczna: Jak bêdzie promowana witryna? ................... 322 Dodatki 356 Do dzie³a! Poprawianie A Rady ekspertów 356 pozycji witryny na liœcie Skorowidz 372 wyszukiwanych adresów 323 Zasada dzia³ania wyszukiwarek .................. 324 Plan dzia³ania .............................................. 324 Je¿eli wszystko zawiedzie... ........................ 324 Umieszczenie witryny na liœcie wyszukiwania ... 325 Umieszczenie witryny w katalogu ................ 325 Umieszczenie witryny na listach ................. 325 Wskazówki praktyczne: Jak dostaæ siê na listê Yahoo!? ..................... 326 Poprawianie pozycji witryny na liœcie wyszukiwanych adresów ................. 327 Ciekawe rozwi¹zanie: Jak przygotowaæ stronê  dobrze notowan¹ w rankingach? ................... 330 Czêœæ praktyczna: Jak poprawiæ notowania witryny w rankingach wyszukiwarek? ........................ 331
  • 9. 110 Projektowanie witryny: organizacja i nawigacja Rozdzia³ 6. Organizacja i nawigacja Informacji… informacji…
  • 10. Projektowanie witryny: organizacja i nawigacja 111 Jakby na to nie spojrzeæ, projekt internetowy to przede wszystkim organizacja i nawigacja. Chocia¿ Dobrze zorganizowana witryna wizualne dodatki takie jak kolor, grafika i style Struktura witryny mo¿e nie byæ najbardziej atrak- mog¹ bardziej przyci¹gaæ uwagê internautów, to cyjnym, ale jest niew¹tpliwie najwa¿niejszym w³aœnie struktura witryny decyduje o jej sukcesie. aspektem projektu. Dobrze zorganizowana struk- Jeœli witryna jest dobrze zorganizowana, u¿yt- tura sprawia, ¿e zadania u¿ytkownika s¹ proste — kownicy realizuj¹ swoje cele bez wysi³ku, poniewa¿ takie, jakie powinny byæ! W procesie organizacji dzia³y witryny dok³adnie odpowiadaj¹ ich potrze- witryny nale¿y uwzglêdniæ trzy ró¿ne elementy. bom. Jêzyk u¿ywany w witrynie jest dla nich zrozu- mia³y, a nawigacja jest konsekwentna i jasna. Z ko- Dobrze zorganizowana witryna cechuje siê: lei witryna Ÿle zorganizowana (czyli taka, która by³a n logiczn¹ struktur¹. Witryna powinna byæ budowana poœpiesznie lub przy jej tworzeniu bra- zorganizowana w sposób zrozumia³y dla no pod uwagê wy³¹cznie potrzeby w³aœciciela) bê- u¿ytkowników. Dzia³y witryny powinny dzie wprowadzaæ u¿ytkowników w b³¹d i w sposób odpowiadaæ potrzebom u¿ytkowników, niezamierzony ukrywaæ przed nimi potrzebne in- a wszystkie podobne elementy (lub zadania) powinny byæ pogrupowane. Zobacz równie¿ formacje i us³ugi. „Organizacja witryny”, str. 112; Sposób zorganizowania witryny tworzy jej szkie- let. Mo¿na go porównaæ do belek tworz¹cych kon- n konsekwentn¹ nawigacj¹. U¿ytkownicy strukcjê domu — organizacja stanowi strukturê, na chc¹ — patrz¹c na system nawigacji w witrynie — móc zorientowaæ siê, w którym której opiera siê projekt graficzny. miejscu witryny siê znajduj¹, a tak¿e Struktura witryny decyduje o jej zorientowaæ siê w kontekœcie (co jeszcze jest w witrynie) i w kierunku (jak siê gdzieœ sukcesie. Jeœli witryna jest dobrze dostaæ). Nawigacja powinna wyznaczaæ zorganizowana, u¿ytkownicy realizuj¹ wyraŸne œcie¿ki, w szybki i intuicyjny sposób prowadz¹ce u¿ytkowników do tego, czego swoje cele bez wysi³ku. potrzebuj¹. Zobacz równie¿ „Nawigacja Mimo to wiele osób ma trudnoœci z rozdziele- w witrynie”, str. 124; niem tych dwóch warstw projektu. Witryny wiele n zrozumia³ymi oznaczeniami. Nazwy, jakie trac¹ z powodu mylenia warstw. „Trzeba oddzieliæ wybierzemy dla dzia³ów witryny, powinny projekt struktury lub projekt funkcjonalny od pro- pomagaæ u¿ytkownikom w odnalezieniu tego, jektu komunikacyjnego” — mówi Peter Merholz, czego szukaj¹. Nie b¹dŸmy zbyt pomys³owi. wspólnik firmy konsultingowej Adaptive Path. „Lu- Po prostu mówmy jasno i wyraŸnie. Zobacz dzie zwykle maj¹ bzika na punkcie koñcowego wy- równie¿ „Nazywanie dzia³ów witryny”, str. 136. gl¹du i nie poœwiêcaj¹ ¿adnej uwagi niewidoczne- mu szkieletowi funkcjonalnemu”. Jednak ten szkielet jest najwa¿niejszy. Jeœli nie cokolwiek innego) jest wyznacznikiem jakoœci wi- zorganizujemy witryny w sposób, który wyda siê tryny” — mówi Jesse James Garrett, autor ksi¹¿ki u¿ytkownikowi rozs¹dny, ¿adne graficzne cuda nie The Elements of User Experience. „Kluczem do udanej sprawi¹, ¿e u¿ytkownik bêdzie zadowolony. „Wi- witryny jest stworzenie dobrej struktury”. tryna powinna dobrze dzia³aæ, zanim zacznie do- „Korporacje, a tak¿e konsultanci, zaczynaj¹ sto- brze wygl¹daæ” — mówi Merholz. „Funkcjonal- sowaæ siê do tej zasady” — mówi Lance McDaniel, noœæ jest najwa¿niejsza”. wiceprezes firmy konsultingowej SBI & Co. Pomimo swojej strategicznej wa¿noœci struktu- „Architektura informacji odebra³a projektowi ra witryny czêsto ustêpuje miejsca rzucaj¹cej siê bar- graficznemu miano najwa¿niejszego elementu pro- dziej w oczy warstwie projektu. Na szczêœcie coraz jektu internetowego” — mówi Lance McDaniel. wiêcej ludzi dostrzega wa¿noœæ struktury. „Projekt informacji przyæmiewa teraz projekt gra- „Kiedyœ moja praca polega³a na tworzeniu tre- ficzny witryny i zbiera wiêcej laurów za sukces wi- œci, ale zaj¹³em siê architektur¹ informacji, ponie- tryny, chocia¿ wczeœniej traktowany by³ zwykle lek- wa¿ zda³em sobie sprawê, ¿e struktura (bardziej ni¿ cewa¿¹co”.
  • 11. 112 Projektowanie witryny: organizacja i nawigacja Organizacja witryny Organizacja witryny powinna byæ najlepszym mo¿liwym po³¹czeniem tych trzech (czasami kon- Chocia¿ nie jest tak fascynuj¹ca jak projekt graficz- fliktowych) kryteriów. Jeœli witryna jest poœwiêco- ny ani tak presti¿owa jak treœæ redakcyjna lub tech- na tylko jednemu tematowi, ma jeden cel firmowy niczna, to jednak organizacja — lub architektura i tylko jeden typ u¿ytkownika (posiadaj¹cego jedn¹ informacji — czêsto jest zasadniczym czynnikiem potrzebê), to zadanie organizacji jest proste. Jednak sukcesu witryny. rzeczywistoœæ jest zazwyczaj bardziej skomplikowana. Architektura informacji jest czêœci¹ projektu, ale Jeœli witryna ma byæ skutecznie jest œciœle powi¹zana ze strategi¹. Jeœli witryna ma byæ skutecznie zaprojektowana i zorganizowana, to zaprojektowana i zorganizowana, musimy dobrze wiedzieæ, dla kogo jest przeznaczo- musimy wiedzieæ, dla kogo na i jakie cele ma zrealizowaæ. jest przeznaczona i jakie cele Zanim przyst¹pimy do procesu organizacji, mu- simy wyznaczyæ cele witryny (zobacz równie¿ „Usta- ma zrealizowaæ. lenie celów witryny korporacyjnej”, str. 28). Jeœli de- Ka¿da witryna ma zazwyczaj kilka grup u¿yt- cyzje takie nie zostan¹ podjête — lub nie zostan¹ kowników, którzy chc¹ w ró¿nym czasie zrealizo- przekazane zespo³owi projektuj¹cemu — niejasne waæ ró¿ne potrzeby, kilka ró¿nych typów treœci — wytyczne bêd¹ rzutowaæ na ca³y proces projektowa- które niekoniecznie dobrze siê ze sob¹ ³¹cz¹, i ró¿- nia, a¿ do ukoñczenia witryny. Zagmatwana misja ne cele do osi¹gniêcia — w zale¿noœci od tego, kogo ujawni siê u¿ytkownikowi poprzez myl¹ce katego- w firmie zapytamy o nie. rie i niespójny interfejs. „Wyzwaniem jest stworzenie dobrej, porz¹dnej „Dobra architektura witryny wymaga, by w or- struktury bez ¿adnych dziur” — mówi Garrett. ganizacji zosta³y uwzglêdnione wspólne cele” — „Wyzwania zwykle pojawiaj¹ siê, gdy próbujemy mówi Jesse James Garrett. „Jeœli nie uda siê nam tego obs³u¿yæ odbiorców o bardzo zró¿nicowanych po- osi¹gn¹æ, to nie bêdziemy mieli ani dobrej archi- trzebach albo gdy firmowe strategie nagle zaczynaj¹ tektury, ani dobrej witryny”. d¹¿yæ w przeciwnych kierunkach”. Kryteria organizacji witryny: „Przyjemnie jest malowaæ taki wyidealizowany n Cele u¿ytkownika. Organizacja witryny obraz projektu, w którym firma ma tylko jedn¹ stra- musi byæ zrozumia³a dla u¿ytkowników tegiê, na dodatek bardzo jasno sformu³owan¹” — oraz powinna umo¿liwiaæ realizacjê celów kontynuuje Garrett. „Prawdê mówi¹c, takie przy- internautów. padki nie istniej¹. Firmy maj¹ wiele ró¿nych stra- tegii — i to ró¿ni¹cych siê na poszczególnych n Cele firmowe. Organizacja witryny musi etapach”. tak¿e realizowaæ cele firmy, podkreœlaj¹c te Zwykle trudno jest dojœæ do porozumienia, która funkcje lub produkty, które s¹ najwa¿niejsze (lub czyja) z tych strategii jest najwa¿niejsza. „Ar- dla sukcesu firmy. chitektura informacji — bardziej ni¿ jakikolwiek n System klasyfikacji treœci. Treœæ i us³ugi inny aspekt projektu internetowego — bêdzie pod w witrynie zapewne daj¹ siê sklasyfikowaæ negatywnym wp³ywem polityki firmowej” — mówi za pomoc¹ naturalnych kategorii (lub Garrett. „Wszystkie wewnêtrzne bitwy o zasoby nachodz¹cych na siebie grup kategorii). w organizacji, bitwy o wsparcie dla ró¿nych firmo- wych inicjatyw, bitwy o lepsze wyeksponowanie przed kierownictwem znaczenia dzia³u maj¹ wp³yw na decyzje dotycz¹ce architektury witryny”.
  • 12. Projektowanie witryny: organizacja i nawigacja 113 Tworzenie wskazówki praktyczne struktury witryny Witryna nie powinna Przed ró¿nymi witrynami stoj¹ ró¿ne wyzwania co byæ odbiciem firmy do struktury, jednak ich projektanci podejmuj¹ podobne kroki, by utworzyæ strukturê informacji. Jedn¹ z najczêœciej pope³nianych przez projektan- Sam proces mo¿e siê trochê ró¿niæ w zale¿noœci tów pomy³ek jest kszta³towanie witryny na wzór od osób czy od projektów. Mo¿na u¿ywaæ ró¿nych struktury firmy i przydzielenie ka¿demu dzia³owi narzêdzi, wypróbowywaæ odmienne taktyki i two- osobnej czêœci witryny z odnoœnikiem ze strony rzyæ inne dokumenty, ale podstawowe czynnoœci s¹ g³ównej. takie same. Jest to klasyczny b³¹d — mówi Michael Twida- le, profesor bibliotekoznawstwa i nauk informacyj- Cztery etapy tworzenia struktury witryny: nych z uniwersytetu w Urbana-Champaign w Illi- 1. Oceniamy, czym dysponujemy. nois. „Jest to dobre rozwi¹zanie, jeœli tworzymy Najpierw musimy ustaliæ, co witryna firmowy intranet, poniewa¿ mo¿emy zak³adaæ, ¿e powinna zawieraæ. ka¿dy pracownik zna hierarchiê firmy. Ale jeœli jest to strona publiczna, to mamy problem.” 2. Podejmujemy decyzjê, co jest najwa¿niejsze. Nie mo¿na zorganizowaæ Jeœli firmowa witryna staje siê (a tym bardziej zaprojektowaæ) witryny, dopóki nie wiemy, które elementy s¹ najwa¿niejsze. map¹ firmy, na pewno nie osi¹gniemy Czego najbardziej bêd¹ szukaæ u¿ytkownicy? zamierzonych rezultatów. Czego naszym zdaniem maj¹ u¿ywaæ? (Wendy Owen) 3. Wybierzmy zasadê organizacyjn¹. Struktura wiêkszoœci witryn opiera siê na Problem polega na tym, ¿e nasza wewnêtrzna jednym lub kilku systemach organizacyjnych. struktura nie ma ¿adnego znaczenia dla u¿ytkow- Niektóre witryny s¹ zorganizowane wed³ug ników. Ich cele rzadko mo¿na umieœciæ na sche- daty, inne wed³ug kategorii lub typu macie organizacyjnym firmy, a nasze nazwy dzia- u¿ytkownika. ³ów na pewno bêd¹ dla nich niezrozumia³e. Mo¿e siê to okazaæ trudne do wyjaœnienia wspó³pracow- 4. Kategoryzujmy zawartoœæ. Ostatni nikom, którzy chc¹, by ich miejsce w witrynie by³o i niezbêdny krok to zorganizowanie widoczne. zawartoœci witryny w sposób zrozumia³y „Musimy przyj¹æ do wiadomoœci, ¿e w projek- dla u¿ytkowników. cie internetowym jest wiele wewnêtrznej polityki” — kontynuuje Twidale. „Ka¿dy wierzy, ¿e wykony- 1. Oceniamy, czym dysponujemy wana przez niego praca jest niezbêdna w dzia³a- Pierwsz¹ czynnoœci¹ w procesie zorganizowania niu firmy. Oznacza to, ¿e ka¿dy chce, by jego dzia³ witryny (oczywiœcie po zdefiniowaniu celów witry- by³ widoczny na pierwszej stronie witryny. Co ja mówiê — ka¿dy chce znajdowaæ siê na samej gó- ny) jest rozpracowanie tego, czym mamy siê zaj¹æ. rze pierwszej strony!”. Co tak naprawdê ma znajdowaæ siê w witrynie? Wspó³pracownikom trzeba to uœwiadomiæ, jeœli W przypadku wielu witryn wystarczy prosta li- chcemy zbudowaæ witrynê ciesz¹c¹ siê powodze- sta, streszczaj¹ca zawartoœæ witryny. Niektóre witry- niem. „Struktura witryny nie powinna wygl¹daæ jak ny wymagaj¹ jednak przeprowadzenia inwentary- schemat organizacyjny firmy” — mówi projektant- zacji ca³ej istniej¹cej zawartoœci. ka Wendy Owen. „Jeœli firmowa witryna staje siê map¹ firmy, to na pewno nie osi¹gniemy zamie- rzonych rezultatów”.
  • 13. 114 Projektowanie witryny: organizacja i nawigacja Dwa sposoby oceny W restauracji dojdzie do realizacji zamówienia, 1. Stworzenie szkicu. Gdy tworzymy now¹ w internecie — nie. „Ludzie musz¹ jeœæ, ale czy witrynê, zazwyczaj wystarczy podstawowy musz¹ œlêczeæ w naszej witrynie?” — mówi Zeld- szkic, obejmuj¹cy typy treœci i us³ug, które man. „Jeœli przyt³oczymy ich zbyt wieloma mo¿li- bêd¹ dostêpne w witrynie (zw³aszcza jeœli woœciami, pójd¹ gdzie indziej”. witryna jest wzglêdnie ma³a). Powinniœmy tak¿e pamiêtaæ, ¿e nie wszyscy u¿ytkownicy s¹ dla nas jednakowo wa¿ni. „Wœród 2. Inwentaryzacja zawartoœci. Jeœli zmieniamy odbiorców jest wielu ró¿nych ludzi, nie ka¿dej gru- projekt istniej¹cej witryny lub budujmy du¿¹ pie u¿ytkowników musimy poœwiêcaæ tyle samo witrynê, mo¿emy potrzebowaæ sporz¹dzenia uwagi” — mówi Owen. „Na przyk³ad, jeœli w witry- skrupulatnej listy, zawieraj¹cej ka¿dy element nie sprzedajemy szampon i stanowi to 90% naszych dostêpny w witrynie (ka¿dy artyku³, obrotów, to skupimy siê na osobach zainteresowa- listê produktów, wszystkie ilustracje). nych szamponem. Nie bêdziemy tak samo trakto- Z tych list bêdziemy póŸniej korzystaæ, waæ osób kupuj¹cych nasze ¿yletki, poniewa¿ ich kategoryzuj¹c i organizuj¹c treœæ. sprzeda¿ stanowi tylko 5% naszych obrotów”. 2. Decydujemy, 3. Wybierzmy zasadê organizacyjn¹ co jest najwa¿niejsze Organizuj¹c witrynê, bêdziemy musieli wybraæ W trakcie organizowania witryny — zanim ustali- zasadê organizacyjn¹, wokó³ której powstanie struk- my ostateczn¹ strukturê — musimy zdecydowaæ, tura naszej witryny. Na przyk³ad sklepy organizo- które elementy s¹ w witrynie najwa¿niejsze. Czego wane s¹ wed³ug kategorii produktów, a elektroniczne bêdzie poszukiwaæ wiêkszoœæ u¿ytkowników? Od pamiêtniki wed³ug daty wpisu. czego zale¿y sukces finansowy witryny? Ka¿da witryna stanowi niepowtarzalne struktu- „Jednym z najwiêkszych b³êdów, jakie widaæ ralne wyzwanie, jednak wiêkszoœæ witryn mo¿na w witrynach, jest brak wyraŸnej hierarchii” — mówi zorganizowaæ na jeden z szeœciu sposobów: wed³ug Wendy Owen, dyrektor Gigant Ant Design. „Usta- kategorii, zadania, u¿ytkownika, jêzyka lub po³o- lenie, co jest najwa¿niejsze, naprawdê pomaga u¿yt- ¿enia, wed³ug daty lub dzia³u firmy (ostatni sposób kownikom w zrozumieniu organizacji witryny”. nie jest zalecany). Zobacz równie¿ „Szeœæ sposobów Jednak wiele firm wybiera ³atwiejsz¹ drogê i re- organizacji witryny”, str. 116. zygnuje z takiego postêpowania. Traktuj¹ prioryte- towo to, co szef chce uwa¿aæ za najwa¿niejsze lub 4. Kategoryzujemy zawartoœæ — co jest jeszcze gorsze — nadaj¹ wszystkiemu tak¹ Ostatni etap organizacji jest najwa¿niejszy. Zawar- sam¹ rangê. toœæ witryny trzeba podzieliæ na posiadaj¹ce jakieœ „Zbyt wiele witryn unika organizowania mate- znaczenie kategorie lub dzia³y. ria³ów wed³ug potrzeb u¿ytkowników” — mówi Teoretycznie jest to prosty proces. Wystarczy Jeffrey Zeldman (www.zeldman.com). „Gdy o archi- podzieliæ wszystko na logiczne grupy — podobne tekturze zaczynaj¹ decydowaæ komitety (a nie rzeczy dajemy razem, ró¿ne — osobno. Jednak fak- potrzeby u¿ytkowników), powstaj¹ witryny, w któ- tyczny proces podzia³u nie jest taki ³atwy. Trzeba rych jedno klikniêcie prowadzi do wszystkiego, za- rozwa¿yæ potrzeby u¿ytkowników, potrzeby firmy miast kierowaæ odbiorców œciœle zaplanowanymi i system klasyfikacji, widoczny w samej treœci. Jest œcie¿kami”. wiele sposobów rozwi¹zania tego problemu i czê- „Dostêp do wszystkiego za spraw¹ jednego klik- sto istnieje wiêcej ni¿ jedno dobre rozwi¹zanie. niêcia brzmi dobrze, ale jest z³ym rozwi¹zaniem, Zajêcie to jest zarazem satysfakcjonuj¹ce i fru- poniewa¿ przyt³acza u¿ytkownika” — wyjaœnia struj¹ce, poniewa¿ eleganckie rozwi¹zanie wyda siê Zeldman. „Jeœli odwiedzimy nowojorsk¹ jad³odaj- nam oczywiste, gdy ju¿ dokonamy podzia³u. Do niê z dwudziestopiêciostronicowym menu, skoñ- eleganckiego rozwi¹zania prowadzi wiele œcie¿ek, czymy na zamówieniu kawy i jajek, poniewa¿ nie a ka¿dy projektant musi znaleŸæ œcie¿kê odpowied- bêdziemy w stanie przegl¹daæ w nieskoñczonoœæ ni¹ dla siebie (zobacz równie¿ „Jak stworzyæ archi- listy wszystkich potraw do wyboru”. tekturê informacji?”, str. 115).
  • 14. Projektowanie witryny: organizacja i nawigacja 115 wskazówki praktyczne Jak stworzyæ architekturê informacji? Nietrudno zrozumieæ, czym zajmuje siê architekt infor- Takie æwiczenie pomaga zobrazowaæ naturalne macji — organizuje treœæ strony w rozs¹dny sposób, grupowanie lub zobaczyæ, które elementy musz¹ nadaj¹c witrynie zrozumia³¹ strukturê. Jednak odro- znajdowaæ siê bli¿ej siebie. Garettowi podoba siê fi- binê trudniej jest zobrazowaæ, w jaki sposób to robi. zyczna strona tego procesu. „Takie æwiczenie — prze- „Jeœli ktoœ mówi o metodologii architektury infor- suwanie wizytówek na powierzchni sto³u — jest bar- macji, to mówi o wszystkim poza odcinkiem, na któ- dzo fajne. Jest w tym coœ, co pobudza mój mózg rym faktycznie powstaje architektura” — œmieje siê w taki sam sposób, jak godzina aktywnoœci umys³o- Jesse James Garrett, znany architekt systemów wej dziecka w przedszkolu”. informacji oraz autor ksi¹¿ki The Elements of User Poza tym jest to ca³kiem niez³y sposób na po- Experience. zbycie siê nadwy¿ki „Taka osoba bêdzie wizytówek. „Jeœli W pewnym momencie mówiæ o wszystkich bada- przychodzi³yby w pu- niach, koncepcjach i pla- cz³owiek czuje de³kach mniejszych nowaniu, a¿ dojdzie do prawie grawitacyjny ni¿ po 500 sztuk, to miejsca, w którym zaczy- pewnie musia³bym na siê tworzyæ architektu- poci¹g do któregoœ wymyœliæ inny spo- rê. PóŸniej mo¿e mówiæ rozwi¹zania. sób projektowania o wszystkim, co siê robi, architektury” — œmie- by sprawdziæ poprawnoœæ Jesse James Garrett je siê Garrett. stworzonej architektury. Jak wiêkszoœæ ar- Jednak faktyczny proces chitektów informacji, kreowania architektury Garrett twierdzi, ¿e jest dla nas tajemnic¹”. zawsze sprawdza kilka mo¿liwych pomys³ów, a naj- Tajemnica le¿y w zdolnoœci mózgu do segrego- lepsze rozwi¹zanie ujawnia siê samo. wania informacji, dopóki nie u³o¿¹ siê w porz¹dn¹ „Zazwyczaj rozwa¿am kilka ró¿nych pomys³ów, strukturê. Istnieje wiele ró¿nych sposobów wspomo- zanim skupiê siê na którymœ rozwi¹zaniu architekto- ¿enia tego procesu i wydaje siê, ¿e ka¿dy ma jak¹œ nicznym”. Czynniki decyzyjne zawsze zwi¹zane s¹ swoj¹ technikê. ze strategi¹ witryny. Co zdaniem firmy powinniœmy W wiêkszoœci przypadków projektanci zaczynaj¹ dziêki witrynie osi¹gn¹æ? Jakie oczekiwania wobec od listy z ca³¹ zawartoœci¹ witryny. Nastêpnie zmie- witryny maj¹ u¿ytkownicy? niaj¹ uk³ad elementów, wypróbowuj¹c ró¿ne sche- „Jest to proces równoczesnego rozwoju” — kon- maty organizacyjne i ró¿ne grupowanie, dopóki do- tynuuje Garrett. „Zazwyczaj w tym samym czasie bre rozwi¹zanie samo siê nie znajdzie. pracujê nad treœci¹ i przepycham wizytówki. Czêœæ „Mój proces na pewno uwzglêdnia tworzenie listy” mojego mózgu myœli o treœci, a czêœæ rozwi¹zuje pro- — mówi Garrett. „Tworzê listê, czasami tworzê sche- blemy strategiczne”. mat na komputerze, czasami bazgrzê po tablicy”. „W pewnym momencie czujê niemal grawitacyj- Jego ulubion¹ metod¹ jest przesuwanie wizytówek. ny poci¹g do jakiegoœ rozwi¹zania. Wtedy wiem, ¿e „Odwracam je na drug¹ stronê i wypisujê na nich na- model koncepcyjny zaczyna siê krystalizowaæ, a ele- zwy elementów. Nastêpnie przesuwam je po stole menty treœci zaczynaj¹ wpadaæ w odpowiednie miej- i sortujê, próbuj¹c je jakoœ do siebie dopasowaæ”. sca uk³adanki.”
  • 15. 116 Projektowanie witryny: organizacja i nawigacja Szeœæ sposobów organizacji witryny 1. Wed³ug kategorii 2. Wed³ug zadania Mo¿na stosowaæ, jeœli wszyscy u¿ytkownicy maj¹ Mo¿na stosowaæ, jeœli u¿ytkownicy mog¹ w witry- na uwadze to samo podstawowe zadanie — bez nie zrealizowaæ kilka zadañ, niekoniecznie ze sob¹ wzglêdu na to, czy jest nim zbadanie tematu, zakup powi¹zanych. produktu czy przedyskutowanie problemu. W witrynach zorganizowanych wed³ug zadañ iden- Podzia³ witryny ze wzglêdu na kategorie jest chy- tyfikuje siê ró¿ne cele, które mo¿e mieæ u¿ytkownik ba najbardziej popularny w internecie. Dzia³y witryny i próbuje skierowaæ go na œcie¿kê prowadz¹c¹ do to kolejne tematy lub kategorie oferowanych infor- ich realizacji. Rozwi¹zanie jest skuteczne z jednego macji. Witryny prezentuj¹ce artyku³y mog¹ byæ po- powodu — odpowiada mentalnoœci internauty, który dzielone ze wzglêdu na typy artyku³ów, witryny ko- jest zazwyczaj skoncentrowany na tym, co ma zro- mercyjne ze wzglêdu na typ produktów, a witryny biæ w nastêpnej kolejnoœci. z forami ze wzglêdu na temat dyskusji. Nerve.com organizuje strony osobiste zgodnie z ró¿nymi zadaniami, które ludzie mog¹ wype³niaæ, aby znaleŸæ swojego wymarzonego partnera. BlackPlanet Forum to miejsce, w którym u¿ytkownicy mog¹ dyskutowaæ o swoich problemach i zainteresowaniach. Ka¿dy u¿ytkownik jest tam z tego samego ogólnego powodu, dlatego fora mo¿na zorganizowaæ wed³ug tematów.
  • 16. Projektowanie witryny: organizacja i nawigacja 117 3. Wed³ug u¿ytkownika 4. Wed³ug jêzyka lub po³o¿enia Mo¿na stosowaæ, jeœli witryna s³u¿y co najmniej Mo¿na stosowaæ, jeœli nasi odwiedzaj¹cy mówi¹ dwóm odrêbnym grupom u¿ytkowników z ró¿nymi ró¿nymi jêzykami lub ¿yj¹ w ró¿nych regionach geo- (chocia¿ czasami powi¹zanymi) celami i zaintereso- graficznych, wymagaj¹cych ró¿nej treœci lub us³ug. waniami. Wiele witryn jest zorganizowanych wed³ug jêzy- Witryny zorganizowane wed³ug u¿ytkowników gru- ka lub lokalizacji, aby sprostaæ potrzebom zró¿nico- puj¹ zadania i tematy, które mog¹ szczególnie zain- wanej jêzykowo lub pochodzeniowo bazie u¿ytkow- teresowaæ konkretny typ odwiedzaj¹cych i kieruj¹ ich ników. Jest to jednak nie tyle system organizacji, co w odpowiedni obszar. Ten system organizacji spraw- sposób skierowania u¿ytkowników do innych witryn, dza siê w przypadku witryn kojarz¹cych, które zbie- które z kolei musz¹ byæ zorganizowane wed³ug raj¹ „nabywców” i „sprzedawców” (lub pracodawców innego kryterium, odpowiadaj¹cemu zawartej w nich i osoby poszukuj¹ce pracy). treœci. Organizacjê wed³ug u¿ytkowników mo¿na tak¿e efektywnie stosowaæ w witrynach prezentuj¹cych tre- œci, komercyjnych lub korporacyjnych, które skupiaj¹ siê na kilku ró¿nych typach klientów. Na przyk³ad Ba- byCenter dzieli witrynê na czêœci dla ciê¿arnych oraz wzglêdem wieku dzieci. W witrynie National Geogra- phic znajduj¹ siê specjalne obszary dla dzieci, rodzi- ców i nauczycieli. Firma odzie¿owa Levi’s dzieli u¿yt- kowników wed³ug kraju pochodzenia, a firma meblarska Herman Miller ma podwitryny dla klien- tów, projektantów i inwestorów. Levi’s kieruje ró¿nych u¿ytkowników do ró¿nych witryn ze wzglêdu na region œwiata, z którego pochodz¹. Ka¿da witryna prezentuje treœci w sposób odpowiedni dla jêzyka, kultury i produktów dostêpnych w danym rejonie. Guru pomaga nawi¹zaæ kontakt firmom i konsultantom. Witryna jest zorganizowana wed³ug u¿ytkowników — kieruje pracodawców oraz przysz³ych pracowników w dwa ró¿ne miejsca, aby uzyskali dostêp do specjalistycznych us³ug przeznaczonych dla konkretnej grupy. Muzeum Guggenheima w Berlinie wita u¿ytkowników po angielsku lub niemiecku („Welcome” albo „Wilkommen”).
  • 17. 118 Projektowanie witryny: organizacja i nawigacja Szeœæ sposobów organizacji witryny — ci¹g dalszy 5. Wed³ug daty lub porz¹dku 6. Wed³ug dzia³u firmy Mo¿na stosowaæ, jeœli data lub kolejnoœæ elemen- Mo¿na stosowaæ tylko wtedy, gdy tów jest niezbêdna dla u¿ytkownika — na przyk³ad projektujemy witrynê intranetow¹, w aktualnoœciach, dziennikach, kalendarzach wyda- w której struktura dzia³ów firmy ma rzeñ lub instrukcjach krok po kroku. znaczenie dla odbiorców (na przyk³ad Ogólnie rzecz bior¹c, witryny nie zale¿¹ tak bar- na stronie uczelni) lub gdy klimat poli- dzo od dat jak inne œrodki przekazu. Daty s¹ wa¿ne tyczny firmy nie pozostawia nam ¿ad- dla publikacji drukowanych, poniewa¿ ca³e wydanie nego innego wyjœcia. i informacje w nim zawarte odpowiadaj¹ konkretnej Jeden z najczêstszych (i zrozumia³ych) b³êdów dacie. Witryny szybciej siê zmieniaj¹, s¹ uaktualnia- projektantów to kszta³towanie witryny wed³ug struk- nie kilka razy dziennie lub kilka razy do roku. tury firmy oraz zapewnienie ka¿demu dzia³owi jed- Oczywiœcie, istniej¹ wyj¹tki. Pamiêtniki interneto- nej sekcji w witrynie i odnoœnika na pierwszej stro- we (zwane „blogami”) s¹ organizowane wed³ug dat, nie. Takie rozwi¹zanie ze wzglêdów socjologicznych od najnowszego do najstarszego wpisu. Czasami jest dobre wewn¹trz firmy, ale nie jest dobre dla u¿yt- tak¿e w witrynach innego typu taki sposób organiza- kowników. cji jest jedynym rozwi¹zaniem — na przyk³ad przy Problem polega na tym, ¿e wewnêtrzna struktura prezentacji wydarzeñ na osi czasu lub publikacji ka- firmy nie ma najmniejszego znaczenia dla u¿ytkow- lendarza wydarzeñ itp. ników. Ich potrzeby rzadko mo¿na odwzorowaæ w we- wnêtrznej hierarchii. Chcemy na przyk³ad odwiedziæ witrynê lokalnego muzeum sztuki, poniewa¿ wyczy- taliœmy gdzieœ, ¿e odbêdzie siê tam wyk³ad na temat Picassa i chcielibyœmy dowiedzieæ siê, kiedy to bê- dzie. Czy wyk³ad bêdzie umieszczony w dziale „edu- kacja”, „wydarzenia” czy „program”? Trudno powie- dzieæ. Oczywiœcie, wszystko by³oby jasne, gdybyœmy pracowali w muzeum i wiedzieli, ¿e wyk³adami na temat sztuki nowoczesnej zajmuje siê pani Krysia z dzia³u przygotowuj¹cego program. Zeldman.com to prywatna witryna projektanta Jeffrey’a Zeldmana. Jak ka¿dy blog, jest zorganizowana wed³ug daty, z najnowszym wpisem widniej¹cym na samym pocz¹tku strony. Zobacz równie¿ „Witryna nie powinna byæ odbiciem firmy”, str. 113. Jak wiêkszoœæ szkó³, Uniwersytet Brown organizuje swoj¹ witrynê wed³ug wydzia³ów, z oddzielnymi sekcjami dla biura rekrutacyjnego, zwi¹zku sportowego, zrzeszenia absolwentów itd.
  • 18. Projektowanie witryny: organizacja i nawigacja 119 Tworzenie zabawnych kategorii Organizacja witryny powinna byæ intuicyjna, ale nie musi byæ nudna. Witryny (zw³aszcza sklepy) kre- atywnie sortuj¹ce swoje towary w kategorie zaspokajaj¹ prawdziw¹ potrzebê u¿ytkowników, uzmys³a- wiaj¹c im mo¿liwe rozwi¹zanie. I przy okazji daj¹ trochê zabawy. RedEnvelope koncentruje siê ludziach kupuj¹cych na ostatni¹ chwilê prezenty. Zamiast odpytywaæ u¿ytkowników, czego chc¹, RedEnvelope pyta, dla kogo chc¹ kupiæ prezent. Przez podzielenie produktów w kreatywne kategorie stworzyli chyba najprzyjemniejszy w korzystaniu sklep internetowy. NetFlix to internetowa wypo¿yczalnia wideo, która rozwi¹zuje dwa najwiêksze problemy zwi¹zane z wypo¿yczaniem filmów. Gdy ludzie dotr¹ ju¿ do wypo¿yczalni, nie pamiêtaj¹, jaki film chcieli obejrzeæ i nigdy nie pamiêtaj¹, by zwróciæ film na czas. NetFlix pomaga w wyborze filmu, prezentuj¹c interesuj¹ce i pomys³owe kategorie (oraz pozwalaj¹c u¿ytkownikom tworzyæ listy).
  • 19. 120 Projektowanie witryny: organizacja i nawigacja Tworzenie zabawnych kategorii — ci¹g dalszy Bardzo rzadko struktura ca³ej witryny mo¿e byæ zor- ganizowana przy zastosowaniu tylko jednego syste- mu. Zazwyczaj witryny musz¹ wykorzystywaæ kilka systemów — jednoczeœnie lub kolejno — aby kate- goryzowaæ ca³¹ zawartoœæ i prowadziæ u¿ytkowników do obranego przez nich celu. Muzeum Guggenheima ma kilka oddzia³ów w ró¿- nych miastach. Ka¿dy oddzia³ wystawia coœ innego oraz obs³uguje lokaln¹ i miêdzynarodow¹ publicznoœæ. 1. Pierwsza strona zorganizowana wed³ug lokacji Pierwsza strona guggenheim.org dzieli u¿ytkowników wed³ug tego, którym oddzia³em muzeum s¹ zainteresowani (najechanie kursorem myszy na ka¿dy z obrazków ujawnia nazwê miasta, w którym znajduje siê dany budynek). 2. Lokalna witryna zorganizowana wed³ug jêzyka Pierwsza strona ka¿dej podwitryny (w³¹cznie z pokazan¹ na rysunku kolekcj¹ w Wenecji) pocz¹tkowo sortuje u¿ytkowników na podstawie jêzyka — w tym przypadku jest to jêzyk angielski lub w³oski. 3. Lokalna witryna zorganizowana wed³ug dzia³ów Pierwsza strona nowojorskiego oddzia³u muzeum oferuje szeœæ sekcji (zorganizowanych wed³ug dzia³ów), których lista powtarzana jest w ca³ej witrynie jako górny poziomy pasek nawigacyjny. Organizacja wed³ug dzia³ów rzadko jest dobrym rozwi¹zaniem, ale w tym wypadku siê sprawdza, poniewa¿ dzia³y odpowiadaj¹ wybieranym przez u¿ytkowników œcie¿kom. 4. Sekcje witryny zorganizowane wed³ug kategorii Gdy u¿ytkownicy wejd¹ na strony poœwiêcone kolekcji (odnoœnik The Collection), mog¹ wybraæ jeden z szeœciu sposobów prezentowania prac. Muzeum Guggenheima stosuje w witrynie kolejno kilka ró¿nych systemów organizacji, aby doprowadziæ u¿ytkowników do informacji, których szukaj¹.
  • 20. Projektowanie witryny: organizacja i nawigacja 121 Herman Miller to firma meblarska znana ze swoich eleganckich rozwi¹zañ biurowych (na rysunku widaæ krzes³o Aeron) oraz klasycznych zestawów domo- wych autorstwa znanych projektantów, takich jak Eames. 1. Wed³ug kategorii produktu Wiêksza czêœæ strony g³ównej witryny jest poœwiêcona produktom. Firma dzieli meble na dwie podstawowe kategorie (wyposa¿enie biurowe i nowoczesna klasyka) i na stronie g³ównej umieœci³a punkty wejœcia do obydwu kategorii. 2. Wed³ug zadania Pierwsza strona daje tak¿e mo¿liwoœæ wyboru szybkich odnoœników do innych zadañ (poza ogl¹daniem mebli) — przeczytanie informacji na temat firmy, sprawdzenie ofert pracy itd. 3. Wed³ug u¿ytkownika Pierwsza strona zosta³a zaprojektowana g³ównie z myœl¹ o klientach, dlatego znajduj¹ siê tam osobne punkty wejœcia dla u¿ytkowników z innych kategorii (projektantów, inwestorów). Hewlett Packard to firma technologiczna znana z produkcji drukarek, komputerów itp. 1. Wed³ug u¿ytkownika Odwiedzaj¹cy mog¹ zidentyfikowaæ swoj¹ kategoriê, wybieraj¹c typ firmy lub biura, dla którego kupuj¹ produkty (zastosowania domowe i domowe biura, ma³e i œrednie firmy, przedsiêbiorstwa itd.). 2. Wed³ug kategorii produktu U¿ytkownicy mog¹ tak¿e wybraæ poszczególne poszukiwane produkty (drukarki, komputery stacjonarne, urz¹dzenia narêczne itp.). 3. Wed³ug zadania Pierwsza strona daje tak¿e mo¿liwoœæ wyboru szybkich odnoœników do innych zadañ, takich jak przeczytanie informacji na temat firmy czy przeszukanie ofert pracy.
  • 21. 122 Projektowanie witryny: organizacja i nawigacja Dokumentowanie struktury witryny Gdy ju¿ podjêliœmy decyzjê co do struktury witryny, 1. Mapa witryny musimy jakoœ udokumentowaæ nasz¹ wizjê, aby inni Mapa witryny — zwana równie¿ schematem bloko- mogli j¹ poznaæ. wym — przedstawia organizacjê dzia³ów witryny i ich Istnieje kilka sposobów dokumentowania, które po- wzajemne dopasowanie. zwalaj¹ twórcom internetowym zobrazowaæ struk- Ka¿dy blok odpowiada jednej stronie w witrynie, turê, przekazaæ decyzje organizacyjne i œledziæ pocz¹wszy od strony g³ównej. Przedstawiaj¹cy stos bloków rysunek zazwyczaj reprezentuje zestaw stron zmiany wraz z rozwojem witryny. Do narzêdzi tych o tym samym projekcie i podobnej treœci (np. strony zaliczamy mapê witryny, schemat strony i œcie¿ki generowane na podstawie bazy danych). Mo¿e tak¿e u¿ytkownika. Czêsto stosuje siê je razem, aby przed- reprezentowaæ dzia³ witryny, który zosta³ rozrysowany na osobnej mapie. stawiæ ró¿ne aspekty struktury witryny i doœwiad- czeñ u¿ytkownika. Ka¿da linia reprezentuje po³¹czenie miêdzy stronami lub œcie¿kê, któr¹ mo¿e pod¹¿aæ u¿ytkownik. Dlatego Trzy sposoby wizualizacji struktury: ka¿da linia lub grupa linii stanowi nawigacyjne wyzwanie. 1. Mapa witryny daje obraz witryny z lotu ptaka, Mapa witryny tworzona jest przez architekta informacji pokazuj¹c, jak zorganizowane s¹ poszczególne (lub inn¹ osobê, która organizuje witrynê) po ustaleniu sekcje i jak do siebie pasuj¹. struktury organizacyjnej, ale przed zaprojektowaniem systemu nawigacyjnego. 2. Schemat pokazuje wszystkie elementy, które bêd¹ znajdowaæ siê na danej stronie, oraz sposób ich wzajemnego powi¹zania. 3. Œcie¿ka u¿ytkownika pokazuje „ekran za ekranem” — drogê u¿ytkownika po witrynie, gdy próbuje zrealizowaæ konkretne zadanie.
  • 22. Projektowanie witryny: organizacja i nawigacja 123 2. Œcie¿ka u¿ytkownika 3. Schemat strony Œcie¿ka u¿ytkownika — zwana tak¿e schematem Sposób ten nazywamy równie¿ rozrysowaniem u¿ytkownika — pokazuje szczegó³owo (ekran za ekra- kadrów. Schemat zawiera wszystkie elementy, które nem) to, czego doœwiadcza u¿ytkownik, który próbuje znajd¹ siê na stronie i pokazuje (w przybli¿eniu), w któ- w witrynie wykonaæ konkretne zadanie. rym miejscu bêd¹ umieszczone. Ka¿dy blok w wykresie reprezentuje jeden ekran, Ka¿dy blok reprezentuje jeden element na stronie widziany przez u¿ytkownika pokonuj¹cego kolejne eta- (grafikê, pasek nawigacyjny, nag³ówek), bez zag³êbia- py zadania. nia siê w szczegó³y dotycz¹ce wygl¹du elementu. Ka¿da linia reprezentuje œcie¿kê, któr¹ u¿ytkownik Schemat jest zazwyczaj tworzony dla ka¿dego typu mo¿e pod¹¿yæ. Powodem tworzenia wykresów œcie- strony w witrynie (lub dla ka¿dego wzorca), zanim za- ¿ek u¿ytkownika jest chêæ przewidzenia wszystkich czn¹ siê prace nad projektem graficznym. Poziom mo¿liwych dróg nawigowania po witrynie, nawet tych, szczegó³owoœci mo¿e byæ ró¿ny. Niektóre schematy s¹ które mog¹ powstaæ w wyniku b³êdu. bardzo szczegó³owe — prezentuj¹ dok³adne rozmiesz- czenie ka¿dego elementu. Inne s¹ bardziej pobie¿ne Ka¿dy blok w kszta³cie karo symbolizuje punkt de- — zawieraj¹ podstawowe elementy i sugestie co do cyzyjny. Linie wychodz¹ce z takiego bloku przedsta- ich wzglêdnego rozmieszczenia. wiaj¹ œcie¿ki, które mo¿e wybraæ u¿ytkownik. Œcie¿ka u¿ytkownika jest szczególnie wa¿na w witry- nach opartych na aplikacjach lub transakcjach, gdy u¿ytkownik rejestruje siê w us³udze, kupuje produkt lub u¿ywa narzêdzi dostêpnych w witrynie. Taki wykres mo¿e byæ tak¿e pomocny do zobrazowania — i popra- wienia — ogólnych doœwiadczeñ u¿ytkownika ka¿dej witryny.
  • 23. 124 Projektowanie witryny: organizacja i nawigacja Nawigacja w witrynie Osiem z³ych pomys³ów Dobry projekt graficzny to dobra nawigacja. Gdy na nawigacjê mówimy, ¿e witryna jest dobrze zaprojektowana lub Istnieje wiele ró¿nych sposobów umo¿liwienia u¿yt- dobrze dzia³a, zazwyczaj mamy na myœli to, ¿e ma kownikowi nawigowania w witrynie. Jedne sposo- wspania³¹, intuicyjn¹ nawigacjê. by s¹ lepsze, inne gorsze, a inne zupe³nie nieuda- Nawigacja wizualnie wyra¿a strukturê witryny ne. Wiem, poniewa¿ wypróbowa³am wszystkie — i jest to podstawowy problem, który trzeba rozwi¹- nawet te lataj¹ce i p³ywaj¹ce dziwad³a. zaæ w trakcie projektowania strony. Problem ten nie 1. Rozwijane menu ukrywaj¹ce sekcje witryny, jest b³ahy. W przeciwieñstwie do czasopism, skle- zamiast je ujawniaæ. pów lub produktów w œwiecie rzeczywistym, witry- ny s¹ rzecz¹ abstrakcyjn¹ — u¿ytkownik nie mo¿e 2. W³asnorêcznie zrobione ikony, których u¿ytkownicy nie zrozumiej¹ bez wzglêdu intuicyjnie oceniæ wielkoœci witryny lub tego, w któ- na nasze starania i w³o¿ony trud. rym jej miejscu siê znajduje (zobacz równie¿ „Jak ludzie nawiguj¹ w internecie?”, str. 125). 3. Kolorowe bloki, których u¿ytkownicy nawet Nawigacja musi dostarczyæ wszystkich tych nie zauwa¿¹, a na pewno nie przypisz¹ im ¿adnego znaczenia. wskazówek. Musi powiedzieæ u¿ytkownikom, co oferujemy, pozwoliæ zorientowaæ siê, w którym 4. Metafory wizualne, takie jak rysunek biura miejscu siê znajduj¹ i skierowaæ ich do miejsca prze- lub lady sklepowej, który u¿ytkownicy mogliby znaczenia — wszystko jednoczeœnie. klikaæ, jednak uznaj¹ go co najwy¿ej za interesuj¹cy. Czego u¿ytkownicy dowiaduj¹ siê 5. Wymyœlne nazwy sekcji witryny, których dziêki nawigacji? u¿ytkownicy nie odwiedz¹ (poniewa¿ nie n Co witryna ma do zaoferowania. bêd¹ ich rozumieæ). Przegl¹daj¹c pasek nawigacyjny (lub dowoln¹ 6. Elementy nawigacyjne, które zmieniaj¹ inn¹ wybran¹ przez nas formê nawigacji), swoje po³o¿enie i pojawiaj¹ siê w ró¿nych odwiedzaj¹cy dowiaduje siê, co witryna zawiera. miejscach na stronach. Powtarzajcie za mn¹: n Jak witryna jest zorganizowana. nie bêdê dezorientowaæ moich u¿ytkowników, nie bêdê dezorientowaæ moich u¿ytkowników… Wielu u¿ytkowników analizuje elementy nawigacyjne, aby zrozumieæ strukturê 7. Elementy nawigacyjne w nieoczekiwanych witryny. W ten sposób mog¹ uzyskaæ miejscach. Na niespodzianki jest miejsce kontekst aktualnie ogl¹danej strony i czas, ale nawigacja nie powinna byæ niespodziank¹. i bardziej pewnie nawigowaæ. 8. Lataj¹ce, p³ywaj¹ce elementy, które n Gdzie wewn¹trz witryny siê znajduj¹. u¿ytkownik musi z³apaæ, gdy przelatuj¹ po W internecie — jak w œwiecie rzeczywistym ekranie. Nasza nawigacja nie powinna byæ — dobry system nawigacyjny zawsze gr¹, chyba ¿e ca³a witryna jest gr¹. Ale nawet pokazuje, gdzie znajduje siê u¿ytkownik wtedy nawigacja nie powinna byæ gr¹. (wyobraŸmy sobie mapê z du¿ym czerwonym krzy¿ykiem i napisem „jesteœ tutaj”). n Jak znaleŸæ to, czego szukaj¹. Zadanie, które nawigacja koniecznie wie na pliki dziennika, które wykazuj¹ co innego. musi spe³niaæ — w jak najszybszy „Interfejs witryny nale¿y projektowaæ tak, jakby i najskuteczniejszy sposób pomóc znaleŸæ wszyscy u¿ytkownicy zawsze ogl¹dali go po raz u¿ytkownikom to, czego szukaj¹. pierwszy” — mówi Cate Corcoran, by³a dyrektor- Gdy projektujemy strukturê nawigacji, kusz¹ce jest ka do spraw komunikacji w PeoplePC. „Wszystkie postawienie za³o¿enia, ¿e bêdziemy mieli lojalnych strony powinny byæ zaprojektowane tak, by mog³y odbiorców, którzy z czasem naucz¹ siê przemiesz- dzia³aæ samodzielnie. Nie ka¿dy internauta wejdzie czaæ po naszej witrynie. Popatrzmy jednak uczci- na nasz¹ witrynê frontowymi drzwiami.”
  • 24. Projektowanie witryny: organizacja i nawigacja 125 odrobina teorii Jak ludzie nawiguj¹ w internecie? Aby skutecznie projektowaæ na potrzeby internetu, Wiêkszoœæ osób nawiguje w witrynach trzeba najpierw zrozumieæ, jak ludzie zachowuj¹ siê, gdy buszuj¹ po internecie. Sieæ jest ca³kowicie in- tak, jakby biegli przez lotnisko, nym œrodkiem przekazu ni¿ druk, telewizja czy inne próbuj¹c znaleŸæ odpowiedni¹ bramkê. media, do których jest porównywana. Projektowanie dla u¿ytkowników „w biegu” Z ka¿dego medium korzystamy w inny sposób: Odk³adaj¹c teoriê na bok, mo¿emy stwierdziæ, ¿e w³a- œnie przez przestrzenn¹ naturê internetu nawigacja n Czytamy czasopisma. jest tak wa¿na. Z wielu powodów projektowanie wi- n Ogl¹damy telewizjê. tryny przypomina bardziej projektowanie przestrzeni n Nawigujemy w internecie tak, jakby by³a to publicznej ni¿ drukowanej strony. rzeczywista przestrzeñ. U¿ytkownicy docieraj¹ do witryny z jakiegoœ po- wodu, a celem przyœwiecaj¹cym nam podczas pro- Ekran komputera jest fizycznie p³aski — g³adki, jektowania witryny jest jak najszybsze skierowanie bardziej p³aski ni¿ ksi¹¿ka, jednak ludzie poruszaj¹ ich na jak najprostsz¹ drogê, dobrze oznakowan¹ siê w internecie tak, jakby to by³a przestrzeñ. Ka¿d¹ powszechnie rozpoznawanymi symbolami. stronê przeszukuj¹ pod k¹tem obecnoœci sygna³ów Dlatego projekt internetowy jest problemem za- nawigacyjnych, potem skupiaj¹ siê na swoim miej- równo konstrukcyjnym, jak i wizualnym. A jeœli spoj- scu docelowym i myœl¹ „gdzie powinienem pójœæ” rzymy na niego z architektonicznego punktu widze- zamiast „co powinienem przeczytaæ”. nia, jest to wyzwanie, poniewa¿ ludzie nie mog¹ Ró¿nica nie jest ma³a. Przejœcie od czytania cza- polegaæ w nim na wizualnych wskazówkach (lub in- sopisma do korzystania z internetu wymaga zmiany nych zmys³ach), wykorzystywanych do nawigacji kognitywnej — gdy u¿ytkownik patrzy na monitor, w rzeczywistej przestrzeni. kursor na ekranie (kierowany trzyman¹ w rêce mysz¹) W rzeczywistym œwiecie ludzie ³atwiej mog¹ jest przed³u¿eniem jego w³asnego cia³a. Dlatego na- oceniaæ wielkoœæ rzeczy — widz¹ rozmiary budynku wigacja w internecie jest tak podobna do nawigacji i widz¹, kto siê w nim znajduje. Mog¹ okreœliæ g³o- w przestrzeni fizycznej. œnoœæ dŸwiêków, poczuæ zapachy. Widz¹, gdzie s¹ W³aœnie to przewidywa³ Marshall McLuhan. We drzwi, a jeœli siê zgubi¹, zawsze mog¹ cofn¹æ siê wczesnych latach istnienia telewizji McLuhan opu- nieco po œladach i poprosiæ kogoœ o pomoc. blikowa³ teorie dotycz¹ce wp³ywu mediów na ludzi. Internet jest jednak rzecz¹ abstrakcyjn¹ i nie ofe- „Wszystko jest przed³u¿eniem jakiejœ ludzkiej zdol- ruje takich wskazówek. Nasze postrzeganie zmys³o- noœci — fizycznej lub psychicznej” — napisa³ w ksi¹¿- we jest ograniczone do tego, co widzimy w oknie prze- ce PrzekaŸnik jest przekazem (ang. The Medium is gl¹darki. Nie ma dooko³a nikogo, kto móg³by nam the Message). „Ko³o jest przed³u¿eniem stopy. Ksi¹¿- w razie czego pomóc. Rolê tak¹ ma spe³niaæ projekt ka jest przed³u¿eniem wzroku… ubranie jest przed- witryny — a w szczególnoœci struktura nawigacji. ³u¿eniem skóry… obwód elektryczny jest przed³u¿e- Projekt musi informowaæ, jakiego typu jest dana wi- niem centralnego systemu nerwowego”. tryna, jaka jest jej zawartoœæ, w którym miejscu aktu- Jeœli u¿ytkownik odwzorowuje siebie na ekranie alnie znajduje siê odwiedzaj¹cy i gdzie mo¿e pójœæ (kursor staje siê abstrakcyjn¹ reprezentacj¹ jego cia- dalej oraz jak wróciæ. ³a), to posuwamy siê du¿o dalej na drodze do wyja- Nikt nie mówi³, ¿e bêdzie to proste. œnienia nie tylko tego, jak ludzie czuj¹ siê w interne- cie, ale tak¿e tego, jak dzia³aj¹. Wiêkszoœæ osób nawiguje w witrynach tak, jakby biegli przez lotnisko, próbuj¹c znaleŸæ odpowiedni¹ bramkê — szybko, celowo i czasami z desperacj¹.
  • 25. 126 Projektowanie witryny: organizacja i nawigacja Nawigacja lokalna i globalna Wiêkszoœæ witryn musi rozwi¹zaæ problem skom- plikowanej nawigacji, tworz¹c j¹ w sposób warstwo- wy. Ogólna organizacja witryny stawia inne proble- my ni¿ funkcjonalnoœæ poszczególnych obszarów witryny. Dlatego tylko naprawdê ma³e witryny nie bêd¹ musia³y zmagaæ siê z problemami nawigacji lokalnej i globalnej. Na tej przyk³adowej stronie witryny Webmonkey widaæ nawigacjê globaln¹, lokaln¹ i sieciow¹. Trzy typy nawigacji (1) Pasek nawigacji sieciowej (czasami zwany n Nawigacja globalna s³u¿y do wskazania, „paskiem firmowym”) prowadzi do firmy rodzicielskiej w którym miejscu witryny u¿ytkownik siê serwisu — Terra-Lycos. (2) Pasek nawigacji znajduje oraz jak mo¿e dostaæ siê w inne globalnej prowadzi do strony g³ównej serwisu miejsce. Powinna pozostawaæ niezmienna Webmonkey i oferuje rozwijane menu elementów w ca³ej witrynie. dostêpnych w witrynie (nie pokazanych tutaj). n Nawigacja lokalna zaczyna siê od miejsca, Nawigacja globalna istnieje tak¿e pod postaci¹ (3) œcie¿ki — elementu pokazuj¹cego sposób w którym koñczy siê nawigacja globalna, dojœcia do danej strony od strony g³ównej. daj¹c u¿ytkownikom narzêdzia do (4) Nawigacja lokalna — odnoœniki do pozosta³ych poruszania siê — lub ukoñczenia zadañ stron artyku³u — istnieje pod postaci¹ odnoœników — wewn¹trz konkretnej czêœci witryny. wypisanych na lewym marginesie strony. n Nawigacja sieciowa to odnoœniki do innych witryn wewn¹trz wiêkszej sieci. Nawigacja sieciowa Rozwi¹zanie to s³u¿y bar- dziej polityce ni¿ u¿ytkownikom. Nawigacja siecio- Nawigacja globalna Zwana jest te¿ nawigacj¹ wa to warstwa nawigacji czêsto zupe³nie nieistotna sta³¹. Pomaga u¿ytkownikom nawigowaæ w witry- dla u¿ytkownika, ale wa¿na dla interesów. Witryny nie, by mogli znaleŸæ swoje obszary zainteresowañ. stanowi¹ce czêœæ wiêkszej sieci — lub nale¿¹ce do Nawigacja globalna dotyczy zwykle hierarchii jednej firmy rodzicielskiej, która je kontroluje — informacji lub szerokich kategorii zawartoœci. czêsto musz¹ publikowaæ odnoœniki do pozosta- Umieszczona jest zazwyczaj w ten sam sposób ³ych witryn. i w tym samym miejscu na ka¿dej stronie i wymie- niane s¹ w niej zawsze te same opcje. Powinna jed- nak oferowaæ jak¹œ wizualn¹ wskazówkê odnoœnie Równowa¿enie warstw nawigacji tego, w której czêœci witryny u¿ytkownik aktualnie Bardzo trudna mo¿e byæ decyzja o tym, ile elemen- siê znajduje. tów nawigacyjnych powinno siê znaleŸæ na pojedyn- czej stronie. Jeœli umieœcimy ich zbyt du¿o, to mo¿e Nawigacja lokalna Gdy u¿ytkownik dotrze ju¿ siê okazaæ, ¿e przys³onimy omawiany temat i do- w witrynie do „miejsca przeznaczania”, ujawni siê s³ownie wypchniemy treœæ poza stronê. Jeœli damy nawigacja lokalna. Zazwyczaj jest rozwi¹zaniem ja- ich zbyt ma³o, to u¿ytkownicy mog¹ straciæ orien- kichœ mankamentów funkcjonalnoœci aplikacji, tacjê w witrynie. pomaga sklasyfikowaæ tematycznie artyku³y lub te¿ Równowagê pomiêdzy nawigacj¹ lokaln¹ i glo- umo¿liwia zmianê stron wewn¹trz artyku³u. baln¹ osi¹ga siê w ró¿nych witrynach w ró¿ny spo- sób. Na przyk³ad w katalogach nawigacja lokalna jest doœæ ograniczona. Sztywna nawigacja globalna czêsto wchodzi na obszary lokalne. Z kolei gry i wy- stawy sztuki prawie nie maj¹ nawigacji globalnej poza przyciskami prowadz¹cymi do strony g³ównej.
  • 26. Projektowanie witryny: organizacja i nawigacja 127 Tworzenie Dlaczego rozwijane menu systemu nawigacyjnego nie nadaj¹ siê do nawigacji? Istnieje wiele ró¿nych sposobów projektowania sys- Rozwijane menu nie nadaj¹ siê do nawigacji, gdy¿ temu nawigacyjnego — zak³adki, paski, menu, iko- zgrabnie ukrywaj¹ wiele informacji na bardzo ma- ny, mapy obrazkowe, proste listy. Wybór rozwi¹za- ³ej przestrzeni. Poniewa¿ ich dzia³anie jest zrozu- nia dla naszej witryny zale¿y oczywiœcie od tego, jaki mia³e samo przez siê, s¹ bardzo popularnym sys- problem musimy rozwi¹zaæ. temem nawigacji. Niestety, nie sprawdzaj¹ siê zbyt W wiêkszoœci przypadków mo¿emy skorzystaæ dobrze. „Nauczy³em siê, ¿e lista rozwijana powinna s³u- z istniej¹cych konwencji nawigacyjnych i dostoso- ¿yæ wy³¹cznie do wype³niania formularzy” — mówi waæ je lub po³¹czyæ tak, by zaspokoi³y nasze potrze- Peter Merholz, wspólnik w firmie Adaptive Path. by. Wiele systemów nawigacyjnych sprawdza siê „Nigdy nie powinna byæ stosowana jako element w wiêkszoœci witryn (zobacz równie¿ „Dwanaœcie nawigacyjny”. systemów nawigacyjnych”, str. 128). Mo¿e siê jednak zdarzyæ, ¿e zechcemy zaprojek- Menu w postaci listy rozwijanej towaæ w³asny system nawigacyjny. Pamiêtajmy jednak, to efektywny sposób ukrywania ¿e innowacja zawsze ma swoj¹ cenê. Systemy niestan- dardowe s¹ trudniejsze do zaprojektowania i trudniej- informacji, które chcielibyœmy sze w obs³udze przez u¿ytkowników. W wiêkszoœci pokazaæ u¿ytkownikom. przypadków — zw³aszcza jeœli ktoœ nie jest bieg³ym (Peter Merholz) projektantem — w zupe³noœci powinny nam wy- starczyæ standardowe i znane systemy nawigacyjne. Problem polega na tym, ¿e rozwijane menu ukrywaj¹ informacje. Jeœli u¿ytkownik nie przewi- Pamiêtajmy jednak, ¿e innowacja duje, ¿e coœ jest ukryte — jak w przypadku listy zawsze ma swoj¹ cenê. Systemy krajów lub miesiêcy w roku — nie bêdzie wiedzia³, niestandardowe s¹ trudniejsze co znajduje siê w liœcie menu i nie bêdzie chcia³ nawet na ni¹ spojrzeæ. do zaprojektowania i trudniejsze „Ludzie nie bêd¹ wiedzieli, co siê tam znajduje” w obs³udze przez u¿ytkowników. — kontynuuje Merholz. „Po prostu zignoruj¹ ten „Istniej¹ powody, dla których pasek nawigacyjny element. Menu w postaci listy rozwijanej to œwiet- w lewej czêœci strony jest konwencj¹” — mówi pro- ny sposób ukrywania informacji, które chcieliby- jektant Jim Frew. „Wiele osób go u¿ywa. Wiele osób œmy pokazaæ u¿ytkownikom”. Martha Brockenbrough — by³a redaktor zna tê konwencjê. To dzia³a. Wiele innych, niekon- MSN.com — ca³kowicie zgadza siê z t¹ opini¹. wencjonalnych interfejsów mo¿e dzia³aæ równie Serwis MSN próbowa³ kiedyœ stosowaæ listy roz- dobrze. Jednak trzeba byæ bardziej pilnym, by za- wijane, ale okaza³y siê nieskuteczne. W tamtym czê³y dzia³aæ. Trzeba w³o¿yæ w nie du¿o wiêcej pra- czasie stronê g³ówn¹ witryny odwiedza³o szeœæ cy, umiejêtnoœci i dba³oœci od strony technicznej”. milionów u¿ytkowników dziennie. „Jednak tylko 200 Jeœli zdecydujemy siê wprowadziæ w³asny system osób odkrywa³o skarby ukryte na dnie rozwijane- nawigacyjny, nadal mo¿e przydaæ siê odniesienie do go menu” — mówi Brockenbrough. konwencjonalnych systemów — zobaczmy, co mo¿emy zrobiæ, by u¿ytkownikom by³o ³atwiej zrozumieæ nasz system (zobacz równie¿ „Dlaczego nale¿y stosowaæ standardy?”, str. 200). Pod ¿adnym pozorem nie mo¿emy zaprojekto- Nikt nie znajdzie treœci ukrytych za odnoœnikiem waæ systemu, którego u¿ytkownicy musieliby w rozwijanym menu” — zdecydowanie kontynu- „uczyæ siê”. Jeœli system nawigacyjny nie jest intu- uje Brockenbrough. „Nikt nie widzi, co znajduje siê icyjny, to nie bêdzie u¿ywany. „Zadaniem projek- w takim menu. Nie u¿ywajmy ich. Gwarantujê, ¿e tantów interfejsu jest nie uczyæ ludzi niczego” — siê nie sprawdzaj¹”. mówi Cate Corcoran. „Nie przychodz¹ do witryny po to, by uczyæ siê z niej korzystaæ”.
  • 27. 128 Projektowanie witryny: organizacja i nawigacja Dwanaœcie systemów nawigacyjnych 1. Zak³adki 2. Panel z lewej strony Mo¿na je stosowaæ, gdy witryna jest podzielona na Mo¿na go stosowaæ jako mechanizm nawigacji lokal- kategorie — zw³aszcza kategorie produktów. nej lub globalnej w witrynie niemal ka¿dego rodzaju. Najs³ynniejsze zastosowanie tego systemu mo¿na Po raz pierwszy zosta³ u¿yty w witrynie CNet (stam- zaobserwowaæ w witrynie Amazon.com. Zak³adki t¹d jest najlepiej znany). Lewostronny panel szybko sta³ tworz¹ wizualne skojarzenie z folderami, pozwalaj¹c siê sztampowym rozwi¹zaniem nawigacyjnym, lub u¿ytkownikom zrozumieæ, ¿e znajduj¹ siê w jednym mo¿e nawet niekwestionowan¹ konwencj¹ internetow¹. z kilku równoleg³ych obszarów wewn¹trz witryny. Gdy Jest popularny, poniewa¿ dobrze rozwi¹zuje wiele pro- u¿ytkownik klika zak³adkê (na przyk³ad kategorii muzy- blemów nawigacyjnych oraz ma mo¿liwoœæ skalowa- ka), odpowiadaj¹cy jej folder przesuwa siê do przodu nia — w miarê rozrastania siê witryny wystarczy doda- i zostaje ods³oniêta zawartoœæ folderu. waæ do panelu kolejne odnoœniki lub przyciski Ta wizualna metafora zosta³a po raz pierwszy za- (wyd³u¿aj¹c go w dó³ strony). stosowana przez firmê Apple Computer w interfejsie Lewostronny panel daje do dyspozycji proste, ela- systemu MacOS (który szeroko wykorzystywa³ meta- styczne i sta³e Ÿród³o nawigacji w ca³ej witrynie. Panel forê akt i folderów); teraz jest powszechnie stosowana wyjaœnia strukturê witryny, ods³ania sekcje, które mo- w oprogramowaniu. Jest tak¿e szeroko u¿ywana — gliœmy wczeœniej pomin¹æ, trwale udostêpnia miejsce dodajmy, niew³aœciwie u¿ywana — w internecie. Za- na funkcjê która powinna byæ dostêpna w ca³ej witrynie k³adki najlepiej sprawdzaj¹ siê, gdy w witrynie mamy (na przyk³ad pole wyszukiwania), a tak¿e udostêpnia seriê ró¿nych, ale równoleg³ych kategorii. Dlatego sys- powierzchniê na ma³e og³oszenia. tem ten jest tak skuteczny w witrynach komercyjnych — jest œwietnym sposobem zorganizowania ró¿nych kategorii produktów, jednoczeœnie prezentuj¹c szero- koœæ naszej oferty. Jednak zak³adki wygl¹daj¹ dziw- nie, gdy s³u¿¹ jako pojemnik na niepowi¹zane ze sob¹ dzia³y witryny. Wykorzystuj¹cy zak³adki system nawigacyjny witryny Amazon naœladuje wiele sklepów CNN.com wykorzystuje lewostronny panel, aby internetowych i witryn innego typu. wymieniæ wszystkie obszary tematyczne, a witryna podró¿nicza Expedia wykorzystuje panel jako narzêdzie do wyszukiwania.
  • 28. Projektowanie witryny: organizacja i nawigacja 129 3. Pasek na górze strony 4. Œcie¿ka Mo¿na go stosowaæ jako mechanizm nawigacji glo- Mo¿na j¹ stosowaæ, gdy witryna zawiera du¿o u³o¿o- balnej w witrynie niemal ka¿dego rodzaju. nych hierarchicznie informacji, do których u¿ytkownicy Prawie ka¿da witryna wykorzystuje do nawigacji dochodz¹, postêpuj¹c œcie¿k¹ pojêciow¹ g³êbiej i g³ê- obszar wzd³u¿ górnego brzegu strony. W niektórych biej do wnêtrza witryny. witrynach znajduje siê tam g³ówne narzêdzie nawiga- Œcie¿ka daje odwiedzaj¹cym wizualn¹ reprezenta- cyjne. W innych witrynach obszar ten s³u¿y jedynie do cjê miejsca, w którym znajduj¹ siê w witrynie. Oprócz nawigacji lokalnej lub globalnej, pozostawiaj¹c tej dru- tego umo¿liwia wycofanie siê nie tylko do strony g³ów- giej dowolne inne miejsce na stronie. Niektórzy wyko- nej (co mo¿na by uzyskaæ, stosuj¹c osobny klawisz), rzystuj¹ ten obszar do zaprezentowania nazwy firmy ale i do poprzednich etapów podró¿y, pozwalaj¹c tym — jest to sposób na identyfikacjê witryny i zapewnie- samym od pewnego miejsca obraæ inn¹ trasê. nie odnoœnika powrotnego do strony g³ównej. Œcie¿ka daje u¿ytkownikowi listê odnoœników (od- dzielonych œrednikami lub ukoœnikami), które wskazuj¹ poziomy hierarchii znajduj¹ce siê na drodze do aktual- nej strony. Jedno klikniêcie przenosi u¿ytkownika do dowolnie wybranego poziomu. Œcie¿ka sta³a siê standardem na stronach katalo- gów takich jak Yahoo!, oferuj¹cych dostêp do g³êbo- kich, zachodz¹cych na siebie hierarchicznych struktur informacji. Metoda ta jest te¿ dobrze wykorzystywana przez inne witryny — prezentuj¹ce bardzo du¿o treœci (CNet), kojarz¹ce (eBay) i komercyjne (Amazon). W wi- trynach tych ten mechanizm naprowadzaj¹cy wykorzy- stywany jest po to, by przedstawiæ u¿ytkownikom kon- tekst ogl¹danej strony. Jeœli ktoœ jeszcze nie odgad³, sk¹d siê wzi¹³ termin „œcie¿ka”… Jest to nawi¹zanie do bajki o Jasiu i Ma³- gosi — dwójce dzieci, które id¹c do lasu, rzuca³y na drogê okruszki chleba, aby zaznaczyæ œcie¿kê powrotn¹ do domu. Oczywiœcie, w bajce œcie¿ka zniknê³a, gdy¿ Sklep ogrodniczy Burpee stosuje widoczny ptaki wydzioba³y okruszki, pozostawiaj¹c w ten spo- górny pasek nawigacyjny, by wyjaœniæ swoj¹ misjê sób Jasia i Ma³gosiê na pastwê losu w œrodku opano- i zaprezentowaæ kategorie produktów. wanego przez czarownicê lasu. Zastanówmy siê, co wtedy dzieci czu³y, poniewa¿ w³aœnie tak czuje siê wiêk- szoœæ internautów. Yahoo! Wykorzystuje œcie¿kê do nawigacji wewn¹trz ogromnego zbioru list witryn istniej¹cych w internecie.
  • 29. 130 Projektowanie witryny: organizacja i nawigacja Dwanaœcie systemów nawigacyjnych — c.d. 5. Foldery i pliki 6. Piasta ze szprychami Mo¿na je stosowaæ, gdy w witrynie znajduje siê kilka Mo¿na j¹ stosowaæ, gdy kilka sekcji ma odwo³aæ siê kategorii informacji i ka¿da z nich ma istotne dla u¿yt- z powrotem do strony g³ównej, ale nie do pozosta³ych kownika podkategorie (ale nie wszystkie mieszcz¹ siê dzia³ów. jednoczeœnie na ekranie). Jest to chyba najprostsza metoda nawigacji, ale nie Metafora folderów i plików, tak szeroko stosowana jest zbyt dobra. Polega przede wszystkim na umiesz- w dzisiejszych systemach komputerowych, zosta³a czeniu odnoœnika z napisem „strona g³ówna” albo zna- wymyœlona w Xerox Parc w latach siedemdziesi¹tych ku graficznego lub ikony reprezentuj¹cej stronê g³ówn¹. XX wieku, a po raz pierwszy zastosowano j¹ w syste- W ma³ych, bardzo prostych witrynach metoda ta mo¿e mie operacyjnym firmy Apple. Czasami jest stosowana dzia³aæ jako jedyny sposób nawigacji. W wiêkszoœci tak¿e w witrynach internetowych, ale zwi¹zane z jej przypadków lepszym rozwi¹zaniem dla tych witryn by³- prezentacj¹ trudnoœci techniczne spowodowa³y, ¿e nie by globalny pasek nawigacyjny, pozwalaj¹cy u¿ytkow- jest szeroko rozpowszechniona. nikom przechodziæ tak¿e do innych dzia³ów. Po co Rozwi¹zanie to sprawdza siê, gdy foldery mog¹ byæ zmuszaæ odwiedzaj¹cych do ci¹g³ego przechodzenia szybko „otwierane” i „zamykane” jednym klikniêciem przez stronê g³ówn¹? myszy. Jednak w przypadku internetu wymaga to za- System ten jest najbardziej u¿yteczny w witrynach, stosowania technik dodatkowych, takich jak JavaScript w których licz¹ siê bogate, g³êbokie doznania u¿ytkow- lub Flash. Upowszechnienie i ci¹gle zwiêkszaj¹ca siê nika — jak w grach lub na wystawach dzie³ sztuki — niezawodnoœæ tych technologii powoduje, ¿e system gdy chcemy wype³niæ ca³y ekran i stworzyæ odpowied- plików i folderów staje siê realnym rozwi¹zaniem dla nie œrodowisko. W takim przypadku mo¿emy nie chcieæ coraz wiêkszej liczby witryn. rozpraszaæ u¿ytkownika zbytecznymi elementami (np. paskiem nawigacyjnym). System ten sprawdza siê wte- dy znakomicie. Webmonkey wykorzystuje foldery do ukrywania — a nastêpnie ods³aniania — zawartoœci kolejnych sekcji swojej biblioteki. Prezentuj¹ca opowiadania witryna Fray stosuje minimaln¹ liczbê elementów nawigacyjnych, gdy u¿ytkownik zacznie ju¿ czytaæ opowiadanie. Na koñcu opowiadania u¿ytkownik widzi pojedynczy odnoœnik do g³ównej strony danego dzia³u opowiadañ (w tym przypadku jest to dzia³ krymina³ów).
  • 30. Projektowanie witryny: organizacja i nawigacja 131 7. Œcie¿ka linearna 8. Wielostronicowa œcie¿ka Mo¿na j¹ stosowaæ, gdy chcemy opowiedzieæ jak¹œ Mo¿na j¹ stosowaæ, gdy mamy bardzo d³ugi artyku³ historiê — lub powinniœmy ukoñczyæ transakcjê — któ- (lub bardzo du¿o wyników wyszukiwania) rozbity na ra zale¿y od kolejnoœci elementów. wiele stron i chcemy, by u¿ytkownicy mogli prze³¹czaæ System ten jest zazwyczaj stosowany w lokalnej (nie siê pomiêdzy stronami. globalnej) nawigacji. Gdy u¿ytkownik czyta opowiada- Wielostronicowa œcie¿ka zosta³a spopularyzowana nie, odpowiada na pytania konkursu lub dokonuje za- przez wyszukiwarki i aktualnie jest szeroko wykorzy- kupu, powinien widzieæ poszczególne strony w odpo- stywana na stronach handlowych i stronach prezentu- wiedniej kolejnoœci. Pytania wystêpuj¹ w pewnej j¹cych mo¿liwoœci wyboru kolejnych stron. System ten sekwencji, a opowiadanie musi byæ logicznie pouk³a- dzia³a na dwa sposoby. U¿ytkownicy mog¹ albo stoso- dane w ca³oœæ. W takich przypadkach wystarcz¹ bar- waæ przyciski Naprzód/Wstecz (lub Nastêpny/Poprzedni), dzo proste elementy nawigacyjne — strza³ki pozwala- aby posuwaæ siê strona za stron¹ w którymœ kierunku, j¹ce przechodziæ w przód lub do ty³u. albo klikn¹æ numer konkretnej strony i przeskoczyæ bezpoœrednio do niej. Rozwi¹zanie skutecznie poka- zuje zakres materia³u (liczbê stron) oraz to, gdzie wœród nich znajduje siê u¿ytkownik. Witryna Fray z opowiadaniami pozwala u¿ytkownikowi skupiæ siê na historii, oferuj¹c ograniczon¹ do minimum linearn¹ nawigacjê Google (jak wszystkie wyszukiwarki) dzieli wyniki od pocz¹tku do koñca opowiadania. wyszukiwania na wiele stron i pozwala u¿ytkownikom Zwyk³e strza³ki s¹ czêsto przechodziæ przez nie albo za pomoc¹ klikniêcia zastêpowane zabawnymi rysunkami. odnoœnika „Nastêpna”, albo w wyniku klikniêcia poszczególnych numerów stron (lub — jak ma to miejsce w przypadku Google — klikniêcia którejœ z liter „o” w znaku graficznym). Na stronach z artyku³ami stosujemy podobne rozwi¹zanie przy d³ugich artyku³ach. Dzielimy artyku³ na wiele stron i pozwalamy u¿ytkownikom „przeklikiwaæ” siê przez nie.
  • 31. 132 Projektowanie witryny: organizacja i nawigacja Dwanaœcie systemów nawigacyjnych — c.d. 9. Rozwijane menu 10. Pole wyszukiwania Mo¿na je stosowaæ wy³¹cznie wtedy, Mo¿na je stosowaæ w witrynach dowolnej wielkoœci, gdy zawartoœæ rozwijanej listy jest ca³- zawieraj¹cych treœci, które u¿ytkownicy mog¹ chcieæ kowicie zrozumia³a (np. lista krajów, mie- przeszukaæ. siêcy, lat). Internautów mo¿emy podzieliæ na dwie grupy: prze- Jest stosowane zazwyczaj jako sk³adnik systemu gl¹dacze i wyszukiwacze. Przegl¹dacze lubi¹ pocho- nawigacyjnego, a nie jako ca³y system. Rozwijane menu dziæ po witrynie, poznaæ jej system organizacyjny, struk- oferuje szybki, zajmuj¹cy ma³o miejsca mechanizm turê. Nawiguj¹ do szukanych danych, przegl¹daj¹c wyboru jednej z wielu równoleg³ych i wzajemnie wyklu- zamieszczone w witrynie odnoœniki. Lubi¹ kontekst. czaj¹cych siê opcji. Natomiast wyszukiwacze id¹ prosto do pola wyszuki- Poniewa¿ rozwijane menu ukrywaj¹ informacje, naj- wania. Lubi¹ drogê bezpoœredni¹. lepiej jest stosowaæ je do prezentacji pozycji, które s¹ Wœród u¿ytkowników ka¿dej witryny znajd¹ siê za- oczywiste dla u¿ytkownika (np. lista stanów, krajów, równo przegl¹dacze, jak i wyszukiwacze, wiêc powin- miesiêcy, lat). S¹ ma³o skuteczne — i tak naprawdê niœmy uzbroiæ nasze strony w dzia³aj¹c¹ funkcjê wy- ca³kowicie nieefektywne — gdy zawieraj¹ nieoczywiste szukiwania. Jednak samo dodanie mo¿liwoœci opcje, takie jak dzia³y witryny (zobacz równie¿ „Dlaczego wyszukiwania nie wystarczy. Powinniœmy jeszcze móc rozwijane menu nie nadaj¹ siê do nawigacji?”, str. 127). wp³yn¹æ na zwracane wyniki. Dowiedzmy siê, jakich 50 hase³ odbiorcy mog¹ szukaæ w witrynie i sprawdŸ- BBC bardzo umiejêtnie my, czy wyszukiwarka zwraca strony, które maj¹ zna- wykorzystuje czenie w takim wyszukiwaniu (testuj¹c wyszukiwanie, ryzykowne elementy mo¿emy przy okazji upewniæ siê, ¿e z listy mo¿na ³atwo nawigacyjne. dostaæ siê do wyszukanych stron). Pokazane na przyk³adzie rozwijane menu dzia³aj¹ œwietnie, poniewa¿ u¿ytkownicy z ³atwoœci¹ mog¹ przewidzieæ, jakie elementy znajduj¹ siê na zamieszczonych w nich listach. Na górze menu wyraŸnie napisano Country profiles (profile krajów) i nie ma w¹tpliwoœci, ¿e pozycja widoczna w liœcie (Algieria) jest nazw¹ kraju. Menu znajduj¹ce siê Pole wyszukiwania w witrynie L.L. Bean pozwala ni¿ej tak¿e jest wyraŸnie oznaczone (pogoda przeskoczyæ od razu do strony zawieraj¹cej produkt. na Bliskim Wschodzie — ang. Middle East Weather). Zadano sobie tak¿e wiele trudu, by dostosowaæ Pierwsza pozycja w liœcie miast — Abu Dhabir wyniki wyszukiwania. — niestety mówi niewiele. Dlatego do menu dodano instrukcjê (Choose a city — wybierz miasto), dziêki czemu dok³adnie wiadomo, czego mo¿na siê spodziewaæ (Bejrut, Kair itd.).
  • 32. Projektowanie witryny: organizacja i nawigacja 133 11. Mapy obrazkowe 12. Lista odnoœników Mo¿na je stosowaæ, jeœli organizacja Mo¿na j¹ stosowaæ, gdy mamy krótk¹ listê luŸno po- witryny w oczywisty sposób odpowiada wi¹zanych ze sob¹ elementów lub d³ug¹ listê blisko jakiejœ ilustracji (np. mapie geograficznej). zwi¹zanych ze sob¹ elementów. Mapy obrazkowe zazwyczaj s¹ stosowane niepra- Nie ma nic z³ego w prostych rozwi¹zaniach, a lista wid³owo, ale bardzo dobrze sprawdzaj¹ siê, jeœli tema- odnoœników jest najprostszym z mo¿liwych rozwi¹zañ. tykê witryny mo¿na ³atwo i intuicyjnie odwzorowaæ na Ods³ania pe³n¹ zawartoœæ witryny i jej sekcji przez pro- ilustracji. Odwo³ania geograficzne to oczywiste skoja- ste wymienienie elementów. Listê mo¿na na przyk³ad rzenie, inne przypadki to wykresy produktów, diagra- u³o¿yæ wzd³u¿ górnego brzegu strony, utworzyæ kolum- my medyczne itp. nê lub rozdzieliæ na bloki znajduj¹ce siê w ró¿nych miej- scach strony g³ównej. Wiêkszoœæ witryn gdzieœ w œrodku swoich systemów nawigacyjnych u¿ywa list odnoœników, aby w najprost- szy sposób pokazaæ, co jest dostêpne i gdzie u¿ytkow- nicy mog¹ siê przenieœæ. Nie zdziwmy siê, jeœli nasi u¿ytkownicy pokochaj¹ takie rozwi¹zanie. W witrynie FogDog Sports (pokazanej poni¿ej) listy odnoœników zawsze by³y najbardziej popularnym sposobem nawi- gowania. Lonely Planet oferuje przewodniki na temat krajów z ca³ego œwiata. U¿ytkownicy mog¹ wybraæ interesuj¹cy ich kraj, klikaj¹c w odpowiednim obszarze mapy (albo u¿yæ rozwijanego menu lub pola wyszukiwania). Prosta lista odnoœników jest najbardziej popularn¹ i ³atw¹ metod¹ znalezienia czegoœ w witrynie FogDog Sports.
  • 33. 134 Projektowanie witryny: organizacja i nawigacja czêœæ praktyczna W jaki sposób witryna bêdzie zorganizowana? Organizacja witryny stanowi w pewnym stopniu Organizacja witryny szkielet witryny. Pozosta³a czêœæ witryny zosta- Miejsce na narysowanie mapy witryny: nie rozpiêta na tym szkielecie. Dlatego sposób zor- ganizowania witryny bêdzie dyktowa³ sposób jej u¿ywania (i to, czy w ogóle bêdzie ona u¿ywana). Organizacja witryny W jaki sposób witryna jest zorganizowana? q wed³ug kategorii ................................................................................ ................................................................................ q wed³ug zadania ................................................................................ ................................................................................ q wed³ug u¿ytkowników ................................................................................ Miejsce na narysowanie schematu strony ................................................................................ g³ównej, który poka¿e, jak elementy bêd¹ u³o¿one wzglêdem siebie: q wed³ug jêzyka i lokacji ................................................................................ ................................................................................ q wed³ug daty lub innego porz¹dku ................................................................................ ................................................................................ q wed³ug dzia³ów firmy ................................................................................ ................................................................................ Jaka jest organizacja drugoplanowa? ................................................................................ ................................................................................ Co jest w witrynie najwa¿niejsze? 1. ............................................................................. 2. ............................................................................. 3. .............................................................................
  • 34. Projektowanie witryny: organizacja i nawigacja 135 czêœæ praktyczna Jaki system nawigacyjny wybierzemy? Mechanizm nawigacji to wizualny obraz struktury W którym miejscu strony bêdzie widoczna witryny. Przedstawia witrynê odwiedzaj¹cym i po- nawigacja? maga poprowadziæ ich przez organizacjê witryny. 1. Strona Systemy nawigacyjne g³ówna Jaki system nawigacji globalnej zastosujemy? q panel z lewej strony q zak³adki q foldery i pliki q œcie¿ka linearna q rozwijane menu q pasek nawigacyjny wzd³u¿ górnego brzegu q œcie¿ka q piasta i szprychy q wielostronicowa œcie¿ka q pole wyszukiwania 2. q lista odnoœników Strony q inny: .................................... wewnêtrzne Jaki system nawigacji lokalnej zastosujemy? q panel z lewej strony q zak³adki q foldery i pliki q œcie¿ka linearna q rozwijane menu q pasek nawigacyjny wzd³u¿ górnego brzegu q œcie¿ka q piasta i szprychy q wielostronicowa œcie¿ka q pole wyszukiwania q lista odnoœników q inny: ....................................
  • 35. 136 Projektowanie witryny: organizacja i nawigacja Nazywanie Wybierajmy konsekwentne nazwy Gdy oznacza- my kilka dzia³ów, których nazwy bêd¹ widoczne dzia³ów witryny obok siebie na pasku nawigacyjnym, ich nazwy po- winny byæ konsekwentnie dobrane. W idealnym Sprawa nazw dzia³ów pocz¹tkowo mo¿e wydawaæ przypadku nazwy lub frazy powinny mieæ tak¹ siê nam banalna — prosty, zbyteczny szczegó³, któ- sam¹ liczbê s³ów, byæ t¹ sam¹ czêœci¹ mowy, cza- ry mo¿na za³atwiæ na samym koñcu procesu. Chcia- sowniki powinny wystêpowaæ w tym samym czasie, ³abym, ¿eby by³o tak naprawdê! Prawdê mówi¹c, to wielkoœæ liter i jêzyk powinny byæ zgodne itd. w³aœnie nazwy decyduj¹ o tym, czy u¿ytkownik zro- Problemem nie jest tutaj gramatyka, a zdolnoœæ zumie, czego dotyczy witryna i jak ona dzia³a. pojmowania. U¿ytkownicy szybciej zrozumiej¹ Dobrze dobrane nazwy s¹ niewidoczne — dys- podzia³ na kategorie (i sam¹ witrynê), jeœli nazwy kretnie wskazuj¹ u¿ytkownikom odpowiednie kie- bêd¹ zgodne. Ludzie to urodzeni klasyfikatorzy — runki i nie zwracaj¹ na siebie uwagi. le dobrane jeœli wyczuj¹ podobieñstwo miêdzy sekcjami, na- nazwy spowalniaj¹ reakcje u¿ytkowników, wprowa- tychmiast po³¹cz¹ te sekcje, buduj¹c wiedzê na te- dzaj¹ ich w b³¹d i zmniejszaj¹ ich pewnoœæ siebie. mat ka¿dej kolejnej kategorii na bazie wiedzy o ka- „Oznaczanie dzia³ów jest wa¿n¹ czêœci¹ archi- tegoriach poznanych wczeœniej. Nawet nieznaczne tektury informacji” — mówi Steve Mulder, kierow- niespójnoœci spowoduj¹ koniecznoœæ ponownego nik do spraw u¿ytkowników w Terra-Lycos. „Wi- przemyœlenia kategorii. dzieliœmy to w laboratoriach funkcjonalnoœci. Najmniejsze problemy z nazwami ca³kowicie unie- Problemem nie jest tutaj gramatyka, mo¿liwia³y u¿ytkownikom ukoñczenie zadania”. a zdolnoœæ pojmowania. U¿ytkownicy Nazwy dzia³ów powinny byæ: szybciej zrozumiej¹ kategorie, jeœli n krótkie — nie mamy du¿o miejsca, nazwy bêd¹ zgodne. by przekazaæ znaczenie. Nazwy powinny Czêsto nawet subtelne zmiany znacznie popra- byæ krótkie i konkretne; wiaj¹ zrozumienie witryny przez u¿ytkowników n konsekwentne — w nazwach dzia³ów (a jest to dziedzina, w której nawet u³amki sekund powinny byæ stosowane podobne zwroty, wp³ywaj¹ na odbiór witryny przez u¿ytkownika). aby uwidoczniæ ich zwi¹zki; Jeœli w witrynie sprzedajemy samochody i domy, nie n jasne — im bardziej treœciwe i dos³owne powinniœmy mieszaæ ró¿nych schematów nazw bêd¹ nazwy dzia³ów, tym bardziej dzia³ów — na przyk³ad „kup dom” i „samochody”. prawdopodobne, ¿e internauta je klinie; Powinniœmy wybraæ jeden schemat nazw „kup n wolne od ¿argonu — klienci nie rozumiej¹ dom” i „kup samochód” lub „domy” i „samochody” wyspecjalizowanego jêzyka naszej bran¿y, (zobacz równie¿ „Wybieranie spójnych nazw”, str. 138). dlatego trzeba przet³umaczyæ etykiety Wybierajmy jasne nazwy Najwa¿niejsze jest, by na zrozumia³y dla nich jêzyk. oznaczenia w witrynie poprawnie reprezentowa³y Wybierajmy krótkie nazwy Przestrzeñ w interne- treœæ lub funkcjê dzia³u. Innymi s³owy — powinni- cie jest bardzo cenna. Musimy du¿o przekazaæ, a nie œmy nazywaæ rzeczy po imieniu. Brzmi to banalnie, mamy na to zbyt du¿o miejsca. Szerokoœæ ekranu ale ta podstawowa zasada jest nagminnie ³amana zawsze bêdzie ograniczaæ d³ugoœæ naszych s³ów. w czterech na piêæ witryn. Dlaczego? Poniewa¿ lu- Wybierajmy wiêc jak najkrótsze i najtrafniejsze s³owa. dzie lubi¹ nazywaæ rzeczy po swojemu, czêsto zwy- czajnie siê wym¹drzaj¹c. Dlatego zamiast nazwaæ dzia³ z wiadomoœciami „wiadomoœciami”, nazy- waj¹ go „sprawy bie¿¹ce” lub „mowa miasta”. Jeœli nie bêdziesz nazywaæ rzeczy po imieniu, nie zdo³asz wykonaæ tego, co musi byæ wykonane. (A. Harvey Block, prezes Bokenon System)
  • 36. Projektowanie witryny: organizacja i nawigacja 137 Zamiast bombardowaæ u¿ytkownika zagadka- Hunter radzi: „PrzejdŸmy przez ca³¹ witrynê, mi s³ownymi i aliteracjami, skupmy siê na wybra- zidentyfikujmy ka¿dy termin, który wygl¹da na ter- niu etykiety, która bêdzie krótka, prosta i konkret- min wewnêtrzny lub nazwê kategorii, zakreœlmy go na (zobacz równie¿ „Dlaczego nazwy dzia³ów i zastanówmy siê, czy istnieje ³atwiejsza nazwa, któ- powinny byæ jasne, nie wymyœlne?”, str. 140). rej u¿ywaj¹ nasi kupuj¹cy — nazwa stosowana przez nich, a przez nas uwa¿ana za niepoprawn¹ — która Wybierajmy nazwy wolne od ¿argonu Ka¿da mog³aby zast¹piæ zakreœlony termin. Nastêpnie za- bran¿a i ka¿da firma pos³uguje siê swoim w³asnym mieñmy s³ownictwo w witrynie tak, by pasowa³o do jêzykiem — wyspecjalizowanym sposobem mówie- s³ownictwa nabywców”. nia na temat swoich produktów i œwiata — który jest dla niej ca³kowicie zrozumia³y, ale nic nie zna- Co oznacza „¿argon”? czy dla innych osób. W ¿argonie nie ma nic z³ego, n Akronimy niezrozumia³e dla ludzi spoza jednak nie mo¿na stosowaæ go w witrynie — to zna- firmy lub organizacji. czy nie mo¿na, jeœli chcemy, by ktoœ j¹ zrozumia³. n S³owa kodowe stosowane w firmie. „¯argon szerzy siê wewn¹trz firm” — mówi Jes- „W du¿ych organizacjach czêsto ³atwiej jest se James Garrett, architekt informacji, który wspó³- wypromowaæ swoj¹ pracê wewn¹trz firmy, pracowa³ z firmami du¿ymi i ma³ymi. „Wszystkie jeœli stosujemy modne w niej okreœlenia, nazwy rodzaje firm maj¹ swój w³asny jêzyk, którym opi- dzia³ów itp.” — mówi Jeffrey Zeldman. „Ale suj¹ produkty i ich cechy. Jest jêzyk stosowany we- p³acimy te¿ za takie postêpowanie wysok¹ cenê”. wnêtrznie i jest jêzyk, który s³u¿y do komunikacji n S³owa dwuznaczne. „Klasycznym zewnêtrznej, choæby z powodów marketingowych”. przyk³adem dwuznacznego s³owa ¯argon wkrada siê do witryny, poniewa¿ ludzie stosowanego w informatyce jest default” s¹ przyzwyczajeni do opisywania produktów swo- — mówi profesor Michael Twidale. imi w³asnymi bran¿owymi okreœleniami. Czêsto „Wszyscy wiemy, ¿e oznacza wartoœæ domyœln¹. nawet nie zdaj¹ sobie sprawy, ¿e u¿ywaj¹ ¿argonu. Jeœli jednak tworzymy oprogramowanie „W ka¿dym biznesie trudna jest próba zmiany dla ksiêgowych, musimy zdawaæ sobie sposobu myœlenia ze sprzedawcy na kupuj¹cego sprawê, ¿e ich definicja s³owa default jest i przestawienie siê z jêzyka sprzedawcy na jêzyk ku- ca³kowicie inna (niesp³acenie zobowi¹zañ)”. puj¹cego” — mówi ekspert marketingu interneto- n S³owa formalne lub techniczne, których wego Hunter Madsen. nie u¿ywamy na co dzieñ. Na przyk³ad witryna Black and Decker ma dzia³ o nazwie Dziêki odnoœnikowi „konserwacja konfekcji” (ang. Garment Care). „My Chapter” u¿ytkownicy Jak czêsto zwykli ludzie stosuj¹ s³owo mog¹ znaleŸæ grupê klubu „konfekcja”? Mówi¹ raczej o ubraniach. Sierra blisko swojego miejsca zamieszkania. Ale s³owo n Terminy bran¿owe, których klienci mog¹ „Chapter” jest myl¹ce, poniewa¿ nie znaæ, a na pewno ich nie u¿ywaj¹. ma wiele powszechnych n Slogany marketingowe, których chcielibyœmy znaczeñ (np. rozdzia³). nauczyæ klientów. Na przyk³ad producent soków, firma Odwalla, w witrynie ma dzia³ o nazwie „Œwie¿ologia” (ang. freshology). n Slang, którego nasi odwiedzaj¹cy nie u¿ywaj¹. Nie chodzi tu tylko o zrozumienie, ale i o kon- kurencjê. Jeœli u¿ytkownicy maj¹ wybór pomiêdzy dwoma witrynami — tak¹, w której nazwy wpro- wadzaj¹ ich w b³¹d, oraz tak¹, w której u¿yto pro- stego jêzyka — wybior¹ tê, któr¹ rozumiej¹. Jak mówi Jesse James Garrett, „u¿ytkownicy mog¹ przyzwyczaiæ siê do ¿argonu tylko wtedy, gdy nie maj¹ innego wyboru”.
  • 37. 138 Projektowanie witryny: organizacja i nawigacja Wybieranie spójnych nazw Spójnoœæ to jeden z kluczy do intuicyjnego systemu nawigacyjnego. Nazwy w witrynie powinny byæ spójne, aby u¿ytkownicy mogli szybko zauwa¿yæ zwi¹zki miêdzy nimi. Oczywiœcie, trudno jest znaleŸæ nazwy, które s¹ spójne pod ka¿dym wzglêdem, ale powinniœmy d¹¿yæ do tego celu. Czynnik Przyk³ady Czêœæ mowy Nazwa sekcji bêd¹ca Dobrze: samochody | mieszkania wyra¿eniem rzeczownikowym le: samochody | kup mieszkanie lub czasownikowym. Forma Etykiety czasownikowe Dobrze: kup samochód | kup mieszkanie powinny mieæ tê sam¹ formê. le: kup samochód | kupowanie mieszkania Liczba Wszystkie etykiety powinny Dobrze: artyœci | autorzy | muzycy byæ albo w liczbie mnogiej, le: artysta | autorzy | muzyk albo w pojedynczej. Wielkoœæ liter Te same s³owa powinny siê Dobrze: kup samochód | kup mieszkanie zaczynaæ wielk¹ liter¹ le: Kup samochód | kup mieszkanie w ka¿dej etykiecie. Jêzyk Wszystkie nazwy jêzyków Dobrze: angielski | hiszpañski | francuski obcych powinny byæ napisane le: angielski | Espanol | francuski po polsku albo ka¿da nazwa powinna byæ napisana w jêzyku, który reprezentuje. Liczba s³ów Wszystkie etykiety powinny Dobrze: utwórz profil | edytuj profil | przeszukaj profile mieæ w przybli¿eniu tyle le: profil | edytuj profil | przeszukaj wszystkie profile samo s³ów. D³ugoœæ s³ów Etykiety powinny sk³adaæ siê Dobrze: kup mieszkanie | kup samochód ze s³ów o podobnej d³ugoœci. le: kup mieszkanie | kup pojazd rekreacyjny
  • 38. Projektowanie witryny: organizacja i nawigacja 139 Kilka dobrych przyk³adów 1. RedEnvelope pozwala wyszukaæ prezenty pod k¹tem odbiorcy; ka¿da nazwa kategorii ma tê sam¹ budowê „for ..........” (dla ..........). 2. Muzeum Guggenheima pozwala wyszukaæ prace wed³ug jednej z szeœciu kategorii; ka¿da kategoria wyra¿ona jest pojedynczym rzeczownikiem. 3. BBC News pozwala przeczytaæ artyku³ w wielu jêzykach; nazwy jêzyków zapisane s¹ w tych jêzykach i za pomoc¹ odpowiedniego alfabetu. 4. BackRoads oferuje wiele typów wycieczek, ka¿dy typ oznaczony jest za pomoc¹ przymiotnika i rzeczownika. 5. Nerve.com oferuje szeœæ sposobów u¿ycia stron z danymi personalnymi, ka¿dy sposób oznaczono dwoma s³owami — czasownikiem i rzeczownikiem.
  • 39. 140 Projektowanie witryny: organizacja i nawigacja wskazówki praktyczne Dlaczego nazwy dzia³ów powinny byæ jasne, nie wymyœlne? Ludzie maj¹ niewyt³umaczaln¹ potrzebê nazywania To samo dotyczy internetu. Brockenbrough kon- wszystkiego. Nazywamy dzieci, zwierzêta, zabawki, tynuuje: „Ludzie nie klikaj¹, jeœli nie s¹ pewni, gdzie miasta, dzielnice i ulice. Wiadomo, ¿e w niektórych ich to zawiedzie. Dlatego bardzo wa¿ne jest, by na- sytuacjach nadajemy imiona nawet czêœciom nasze- sze oznaczenia by³y bardzo wyraŸne. Jasne ozna- go cia³a. czenia zawsze s¹ lepsze ni¿ zbyt pomys³owe”. Wydaje siê, ¿e ka¿da bran¿a prowadzi swoj¹ Trudno jest zaakceptowaæ to redaktorom, który w³asn¹ grê nazw. Czasopisma wymyœlaj¹ m¹dre rozpoczêli swoj¹ karierê w wydawnictwach drukowa- nazwy ka¿dej sekcji, kolumny czy artyku³u. Firmy nych. Czasopisma i gazety k³ad¹ du¿y nacisk na grê samochodowe wynajduj¹ ró¿ne nazwy dla kolejnych s³ów i aliteracje. Jednak takie doskona³e pos³ugiwa- modeli samochodów. Przemys³ kosmetyczny wymyœli³ nie siê s³owem jest raczej recept¹ na pora¿kê w in- wiêcej nazw dla kolorów lakierów do paznokci ni¿ ternecie. jest gwiazd na niebie1. „W internecie potrzeb- Po czêœci jest to ny jest poziom jasnoœci, niegroŸny fetysz. Jeœli W internecie ka¿da którego nie ma w ¿adnym chcemy nadaæ pomy- nazwa musi byæ innym œrodku przekazu” s³ow¹ nazwê pomy- — mówi Jim Frew, projek- s³owej kolumnie w na- ca³kowicie oczywista. tant, który dzieli swój czas szym pomys³owym Np. nie mo¿na pomiêdzy druk i internet. czasopiœmie, to czy „W czasopismach mo¿na ktoœ na tym ucierpi? wyszukiwania stosowaæ stylizowane na- W internecie jed- nazwaæ szperaniem. zwy, które s¹ trochê tajem- nak ucierpi¹ na tym nicze. Jednak w internecie Jim Frew u¿ytkownicy i nasza ka¿da nazwa musi byæ witryna. Stosowanie oczywista. Nie mo¿na na- ma³o znacz¹cych, wymijaj¹cych nazw dla dzia³ów wet wyszukiwania nazwaæ szperaniem”. witryny prowadzi do zmylenia u¿ytkowników i nara- Oczywiœcie, kiedyœ tego nie wiedzieliœmy. Na po- stania w nich frustracji. Internet nie dostarcza wy- cz¹tku w witrynie HotWired zastosowaliœmy takie na- starczaj¹cej liczby wskazówek kontekstowych, by zwy dzia³ów, jakich u¿ylibyœmy w czasopiœmie (np. u¿ytkownik móg³ zrozumieæ, ¿e „ciernisty krzew” „Piazza” i „Signal”). Nazwy te by³y chwytliwe, ale ca³- oznacza „obszar dyskusji”. Jeœli nie wiemy, co kryje kowicie dezorientowa³y u¿ytkowników. Nie maj¹c do- siê za odnoœnikiem, to jest ma³o prawdopodobne, ¿e datkowych podpowiedzi, nie wiedzieli, co maj¹ zro- wybierzemy go. biæ ani gdzie klikn¹æ. „Pod¹¿anie za odnoœnikiem mo¿na porównaæ do By³a to dla nas nauczka. Taki problem nie przy- kupowania miêsa — zapakowanego miêsa” — œmieje darzy³ siê tylko nam. W ca³ym internecie producenci siê Martha Brockenbrough, by³a redaktor MSN.com. nagminnie pope³niali ten b³¹d. „Nie chcemy, by by³o opisane tylko jako ,MIÊSO’. „Mia³am problemy z nazwami dzia³ów” — przy- Chcemy wiedzieæ, z jakiego zwierzêcia pochodzi. znaje Brockenbrough. „Humorystyczn¹ kolumnê Joela Chcemy znaæ datê wa¿noœci i chcemy móc obejrzeæ Steina nazwa³am Lúser, co mia³o oznaczaæ codzien- produkt. Ma ju¿ to têczowe zabarwienie, czy wygl¹- nego u¿ytkownika. By³a to równie¿ gra s³ów z an- da jeszcze dobrze?” gielskim loser — nieudacznik. Niestety, nikt nie ro- zumia³, co mia³am na myœli”. 1 W bezchmurn¹ noc, w bardzo ciemnym miejscu, Jaki jest mora³? „Nie silmy siê na pomys³owoœæ. bez dodatkowego sprzêtu optycznego mo¿emy Nie wymyœlajmy cudacznych nazw. Nie utrudniajmy zobaczyæ oko³o 8.768 gwiazd. Jeœli policzylibyœmy ¿ycia swoim u¿ytkownikom. Nie mówiê, ¿eby w ogó- nazwy kolorów lakieru do paznokci na piêtrze le nie u¿ywaæ ¿artobliwych tekstów, ale u¿ywajmy z przyborami do makija¿u w sklepie Macy’s, zobaczylibyœmy, o ile ta liczba jest wiêksza… ich w miejscach mniej krytycznych ni¿ nawigacja”.
  • 40. Projektowanie witryny: organizacja i nawigacja 141 Dziwne nazwy Gdy zespó³ przystêpuje do wymyœlania nazw dzia³ów, zazwyczaj pojawiaj¹ siê jakieœ problemy. Pierwszy problem — wewnêtrzny firmowy ¿argon wkrada siê do witryny. Drugi problem — ludzie uwielbiaj¹ nazywaæ rzeczy i s¹ przy tym bardzo pomys³owi. Jednak niejasne i nieobrazowe nazwy wprowadzaj¹ u¿ytkowników w b³¹d. Zgodnie z ruchem wskazówek zegara od lewej: (1) Nazwy i ikony reprezentuj¹ce dzia³y w witrynie Lonely Planet s¹ pe³ne wdziêku, ale tajemnicze. Czym jest ciernisty krzew (ang. thorn tree)? Tutaj oznacza forum dyskusyjne. (2) Pierwsza strona HotWired oko³o 1994 roku zawiera³a przyci¹gaj¹ce wzrok ikony i wymyœlne nazwy sekcji, które wprawia³y u¿ytkowników w zak³opota- nie. (3) Sierra Club wymyœli³ nazwy, które trudno rozszyfrowaæ, a ich zgru- powanie — sugeruj¹ce ¿e s¹ ze sob¹ jakoœ powi¹zane — jeszcze pogorszy- ³o sprawê. „Currents” (sprawy bie¿¹ce) oznacza wiadomoœci. Dlaczego auto- rzy nie nazwali dzia³u po prostu „wia- domoœciami”? „Zoomer” pomaga zna- leŸæ witryny na temat spraw lokalnych — dlaczego nie zosta³ nazwany „spra- wy lokalne”? Nazwa „Lewis & Clark” ma o dziwo znaczenie dos³owne — prowadzi do dzia³u poœwiêconego tym osobom. (4) Odwalla stosuje w swojej nawigacji slogany marketingowe typu „Freshology” (œwie¿ologia) i „People to Planet” (ludzie planecie). (5) 360degre- es pozwoli³o zakraœæ siê ¿argonowi technicznemu do nawigacji — sekcja o nazwie „Dynamic Data” (dynamicz- ne dane) zawiera funkcje interaktyw- ne, takie jak konkursy i ankiety.
  • 41. 142 Projektowanie witryny: organizacja i nawigacja czêœæ praktyczna Jakich nazw dzia³ów u¿yjemy? Jeœli chcemy byæ pomys³owi, zrealizujmy tê po- Grupa 2. trzebê gdzie indziej. Bardzo wa¿ne jest stosowa- 1. ................................................................................... nie prostych, jasnych, typowych nazw dzia³ów. Czy nazwa jest: q krótka q jasna q wolna od ¿argonu Przede wszystkim maj¹ byæ zrozumia³e dla u¿yt- kowników. 2. ................................................................................... Czy nazwa jest: q krótka q jasna q wolna od ¿argonu Nazwy dzia³ów 3. ................................................................................... Grupa 1. Czy nazwa jest: q krótka q jasna q wolna od ¿argonu 1. ................................................................................... Czy nazwa jest: q krótka q jasna q wolna od ¿argonu 4. ................................................................................... Czy nazwa jest: q krótka q jasna q wolna od ¿argonu 2. ................................................................................... Czy nazwa jest: q krótka q jasna q wolna od ¿argonu Test spójnoœci 3. ................................................................................... Czy nazwy dzia³ów s¹ ze sob¹ zgodne Czy nazwa jest: q krótka q jasna q wolna od ¿argonu pod wzglêdem: q u¿ytej czêœci mowy (rzeczowniki a czasowniki) 4. ................................................................................... q formy Czy nazwa jest: q krótka q jasna q wolna od ¿argonu q u¿ycia wielkich liter 5. ................................................................................... q jêzyka Czy nazwa jest: q krótka q jasna q wolna od ¿argonu q liczby s³ów q d³ugoœci s³ów 6. ................................................................................... Czy nazwa jest: q krótka q jasna q wolna od ¿argonu Wykrywanie ¿argonu 7. ................................................................................... Czy mamy pewnoœæ, ¿e ¿adna z tych Czy nazwa jest: q krótka q jasna q wolna od ¿argonu nazw nie jest: q akronimem 8. ................................................................................... q s³owem kodowym Czy nazwa jest: q krótka q jasna q wolna od ¿argonu q dwuznaczna q terminem bran¿owym 9. ................................................................................... q sloganem marketingowym Czy nazwa jest: q krótka q jasna q wolna od ¿argonu q slangiem 10. ................................................................................. Czy nazwa jest: q krótka q jasna q wolna od ¿argonu
  • 42. Projektowanie witryny: organizacja i nawigacja 143 Mia³eœ sprawdzaæ pisowniê, a nie krytykowaæ stosowanie symboliki rysunkowej! Do dzie³a ! Testy funkcjonalnoœci Testy z udzia³em jednego u¿ytkownika to sytuacja o sto procent lepsza ni¿ brak testów. (Steve Krug)
  • 43. 144 Projektowanie witryny: organizacja i nawigacja Wczeœniej czy póŸniej ka¿dy projektant interneto- wy odkrywa prost¹ prawdê — jeœli witryna ma mieæ Piêæ typów testów szansê na powodzenie, u¿ytkownicy musz¹ umieæ funkcjonalnoœci z niej skorzystaæ. Ten prosty wymóg jest si³¹ napê- dow¹ projektu internetowego. Prawie ka¿da decy- 1. Testy zorientowane na zadanie zja projektowa powinna uwzglêdniaæ argument Standardowy test funkcjonalnoœci sprawdza funkcjonalnoœci. ³atwoœæ wykonania zadania w dzia³aj¹cej witrynie. „Zapomnieæ o funkcjonalnoœci w internecie to Ochotnicy otrzymuj¹ zadanie do wykonania, a ob- tak, jakby zapomnieæ o w¹tku w filmie” — mówi serwator zapisuje ich reakcje i wyniki. Jeffrey Zeldman (www.zeldman.com). „Jeœli witryna 2. Obserwacja przez ramiê nie jest funkcjonalna, to tak, jakby nie istnia³a”. Zamiast sadzaæ ochotników przy komputerach Dobrzy projektanci zawsze maj¹ na uwadze funk- testowych, po¿yteczne mo¿e okazaæ siê obserwo- cjonalnoœæ, ale nigdy nie mo¿na powiedzieæ, w jaki wanie ludzi w ich naturalnym œrodowisku, w któ- sposób witryna bêdzie u¿ywana, dopóki nie zoba- rym korzystaj¹ z internetu — w domu lub w biurze. czymy, jak ludzie pracuj¹ w jej œrodowisku. Tutaj Jest to bardziej antropologiczne podejœcie do te- w³aœnie dochodz¹ do g³osu testy funkcjonalnoœci. stów funkcjonalnoœci, które bardziej przybli¿a fak- Testy funkcjonalnoœci daj¹ nam mo¿liwoœæ po- tyczne odczucia u¿ytkownika. Otrzymujemy pe³- dejrzenia, jak zwykli ludzie korzystaj¹ z naszej wi- niejszy obraz, w³¹cznie z ba³aganem na biurku tryny w sposób symuluj¹cy normalne zadania u¿yt- i wszystkimi elementami zwyk³ego ¿ycia, np. dzwo- kowników. Gdy taki u¿ytkownik nawiguje w naszej ni¹cym telefonem, p³acz¹cym dzieckiem czy prze- witrynie i próbuje ukoñczyæ zadanie, mo¿emy za- szkadzaj¹cym wspó³pracownikiem. dawaæ mu pytania. Czy rozumie, co oznaczaj¹ ety- 3. Otwarta eksploracja kiety, dok¹d prowadz¹ odnoœniki i co robi¹ dane przyciski? Czy interfejs dzia³a zgodnie z oczekiwa- W przypadku niektórych typów witryn wiêcej mo¿- niami odwiedzaj¹cego? Czy u¿ytkownik potrafi na zaobserwowaæ, jeœli nie poinstruujemy u¿ytkow- ników, co maj¹ zrobiæ. Po prostu sadzamy u¿yt- ukoñczyæ dane zadanie? kownika przed komputerem i obserwujemy, co siê Obserwuj¹c ochotników próbuj¹cych interpre- dzieje. Sposób ten doskonale sprawdza siê w przy- towaæ, nawigowaæ i ogólnie korzystaæ z naszej wi- padku witryn rozrywkowych (na przyk³ad z grami tryny, dowiadujemy siê, co siê sprawdza, a co siê nie internetowymi). sprawdza w naszym projekcie. Zobaczymy, ¿e nie ma nic tak pouczaj¹cego, jak 4. Œledzenie wzroku obserwacja zmagañ prawdziwych u¿ytkowników. Œledzenie wzroku daje bardzo szczegó³owy obraz A na pewno bêd¹ siê zmagaæ z witryn¹. Bez wzglê- tego, jak u¿ytkownik patrzy na witrynê, jak wodzi du na to, jak dobry by³by nasz pocz¹tkowy projekt po niej wzrokiem. Korzystaj¹c ze specjalnych ka- i jak utalentowani byliby nasi projektanci, niektóre mer skierowanych w oczy u¿ytkownika, badacze aspekty interfejsu (np. system nawigacyjny, ozna- sprawdzaj¹, gdzie dok³adnie patrzy u¿ytkownik, nie czenia lub kolejnoœæ elementów) bêd¹ nieuchron- sugeruj¹c siê tym, co u¿ytkownik mówi lub wska- nie myliæ u¿ytkowników naszej witryny. zuje kursorem. 5. Papierowe prototypy Nie mo¿na przewidzieæ tego, Na bardzo wczesnych etapach projektowania po- co mo¿e siê zdarzyæ mocne mo¿e byæ przedstawienie u¿ytkownikom w trakcie testów funkcjonalnoœci. papierowych prototypów. Takie wczesne testy po- magaj¹ poznaæ reakcje u¿ytkowników na nazwê „Nie mo¿na przewidzieæ tego, co mo¿e siê zda- witryny i podstawowy projekt. Czy u¿ytkownicy zro- rzyæ w trakcie testów funkcjonalnoœci” — mówi zumiej¹, czym zajmuje siê witryna? Czy intuicyjnie Doug Bowman, by³y projektant w HotWired i Ter- odgaduj¹, co mo¿na w niej zrobiæ i w jaki sposób? ra-Lycos. „To, co dla nas jest bardzo jasne i zrozu- mia³e, mo¿e byæ najtrudniejsz¹ w œwiecie spraw¹ dla piêciu kolejnych u¿ytkowników”.
  • 44. Projektowanie witryny: organizacja i nawigacja 145 Czego mo¿emy dowiedzieæ Czasami nasze odkrycia bêd¹ wydawa³y siê oczy- wiste. Greg Dotson mówi: „Po przeprowadzeniu te- siê z testów funkcjonalnoœci? stów czêsto zastanawiamy siê, jak mogliœmy byæ tacy g³upi i tego nie zauwa¿yæ”. Ale czasami wyniki s¹ Ogromn¹ zalet¹ testów funkcjonalnoœci jest mo¿- ca³kowicie nieprzewidywalne. liwoœæ spojrzenia na witrynê oczami kogoœ innego. „Jest to bardzo interesuj¹ce” — mówi Steve Pomaga to wychwyciæ b³êdy i zdaæ sobie sprawê z ist- Mulder, ekspert pracuj¹c dla Lycos. „Czasami po nienia problemów, których nie dostrzegamy w trak- prostu nie wiemy, dlaczego coœ nie dzia³a”. cie projektowania witryny. W ka¿dym z tych przypadków najcenniejsze wnio- Testy funkcjonalnoœci to „forma szkolenia ski, wyci¹gane z wyników testów funkcjonalnoœci, z wra¿liwoœci” — mówi Michael Twidale, profesor to w³aœnie te problemy, których nie dostrzegaliœmy, Uniwersytetu stanu Illinois w Urbana-Champaign. poniewa¿ byliœmy za bardzo zaanga¿owani w projekt. „Pomagaj¹ nam poznaæ odczucia innych osób”. „Testy z u¿ytkownikami ods³aniaj¹ problemy, któ- „Sztuk¹ dobrego projektowania jest umiejêt- rych po prostu nie dostrzegaj¹ ludzie znaj¹cy firmê, noœæ za³o¿enia okularów i spojrzenia na swój pro- produkt oraz internet” — mówi Lance McDaniel, jekt oczami kogoœ innego. Jest to bardzo trudne, wiceprezes SBI & Co. „Te odkryte niespodzianki s¹ ale mo¿na to wyæwiczyæ, patrz¹c, jak inne osoby ko- moim zdaniem prawdziwym darem niebios, ponie- rzystaj¹ z naszego systemu”. wa¿ przed udostêpnieniem witryny dziesiêciu milio- W³aœnie do tego s³u¿¹ testy funkcjonalnoœci. nom osób lepiej jest zauwa¿yæ problem, który by³ „Przygl¹daj¹c siê sesjom badañ z u¿ytkownikami, oczywisty dla wszystkich oœmiu testuj¹cych projekt”. zmieni³em swój pogl¹d na projektowanie” — mówi Pokazuj¹c u¿ytkownikom witrynê we wcze- Doug Bowman. „Testy nie tylko pomagaj¹ w po- snych fazach projektowania, mo¿emy oceniæ swoje prawieniu testowanego projektu, ale tak¿e pozosta- za³o¿enia i wy³apaæ problemy na tyle wczeœnie, by wiaj¹ pewne przemyœlenia w naszej g³owie. Gdy pro- móc je jeszcze poprawiæ. Niektóre problemy — ta- jektujemy kolejn¹ witrynê, automatycznie myœlimy kie jak myl¹ce oznaczenia — mo¿na ³atwo usun¹æ. o tym, co zauwa¿yliœmy kiedyœ podczas sesji badañ Inne niestety mog¹ byæ trudniejsze do poprawienia. z u¿ytkownikami i instynktownie wiemy, jak u¿yt- Czasami testy funkcjonalnoœci wykazuj¹ problemy kownik mo¿e zachowaæ siê na takiej stronie”. bardzo g³êboko zakorzenione w projekcie. Mo¿e- Jednak bez wzglêdu na to, w ilu testach projek- my odkryæ b³êdy w funkcjonalnoœci lub organiza- towanych przez siebie witryn uczestniczyliœmy, ka¿- cji witryny, przez co trzeba bêdzie od nowa prze- dy nowy interfejs trzeba przetestowaæ. Trzeba to zro- myœleæ ca³y projekt i sposób podejœcia do niego. biæ, poniewa¿ im d³u¿ej pracujemy nad witryn¹, Co mo¿na odkryæ podczas tym trudniej jest nam zachowaæ dystans do niej. testów funkcjonalnoœci: I bez wzglêdu na nasz stopieñ znajomoœci zacho- wañ u¿ytkowników, zawsze mo¿emy zostaæ zasko- n Problemy w organizacji witryny. Czasami czeni czymœ nowym”. zawartoœæ witryny mo¿e zostaæ zorganizowana „Zawsze przydarzaj¹ siê jakieœ niespodzianki” inaczej ni¿ spodziewaj¹ siê tego u¿ytkownicy. — przyznaje Greg Dotson, pracuj¹cy w Guru. Mo¿e to bardzo spowalniaæ transakcje „Badania funkcjonalnoœci pozwalaj¹ znaleŸæ pro- lub nawet uniemo¿liwiaæ u¿ytkownikom ste, przeoczone b³êdy. Œwietnie sprawdzaj¹ siê tak- ukoñczenie zadania (zobacz równie¿ ¿e w potwierdzaniu, ¿e dobre cechy projektu s¹ na- „Organizacja witryny”, str. 112). prawdê dobre”. n Problemy z nazwami lub oznaczeniami. „Nie mogê sobie wyobraziæ w projektowaniu Czêsto nazwy stosowane dla dzia³ów witryny scenariusza, w którym testy funkcjonalnoœci nie by- i odnoœników wprowadzaj¹ u¿ytkowników ³yby pomocne” — mówi projektant Doug Bow- w b³¹d. Elementy mog¹ byæ w pe³ni man. „Nasze przewidywania, jak ktoœ inny bêdzie funkcjonalne, ale u¿ytkownicy — nie korzysta³ z witryny, mog¹ siê ca³kowicie ró¿niæ od rozumiej¹c oznaczeñ — nie bêd¹ potrafili faktycznych zachowañ u¿ytkownika próbuj¹cego ich znaleŸæ, a tym bardziej u¿yæ (zobacz skorzystaæ z witryny”. „Nazywanie dzia³ów witryny”, str. 136).
  • 45. 146 Projektowanie witryny: organizacja i nawigacja n Problemy z rozmieszczeniem. wiedzieæ, kim s¹ nasi odbiorcy, znaæ problemy, któ- Czêsto u¿ytkownicy bêd¹ intuicyjnie szukali rym stawiaj¹ czo³a i wiedzieæ, ¿e mamy rozwi¹zanie, przycisku lub odnoœnika w jakieœ czêœci którego bêd¹ chcieli u¿ywaæ” — kontynuuje Kunia- ekranu (np. odnoœnik do „koszyka” vsky. „Testy funkcjonalnoœci mog¹ jedynie wykazaæ, w prawym górnym rogu). Jeœli u¿ytkownik siê czy stworzone rozwi¹zanie nadaje siê do u¿ytku”. waha i przewija stronê, prawdopodobnie To, ¿e funkcja jest zrozumia³a i da siê u¿ywaæ, ma trudnoœci ze znalezieniem tego, czego nie œwiadczy jeszcze o tym, ¿e bêdzie stosowana. szuka (zobacz równie¿ „Jak ludzie widz¹ „Najlepszym przyk³adem s¹ kosze z promocyjny- witryny internetowe?”, str. 100). mi p³ytami w sklepach muzycznych. To, ¿e s¹ pe³- n Problemy z grupowaniem. U¿ytkownicy ne, nie oznacza, ¿e ktoœ ich potrzebuje”. intuicyjnie oczekuj¹, ¿e zwi¹zane ze sob¹ Tê ostatni¹ informacjê trudno przekazaæ, ponie- elementy powinny byæ zgrupowane. wa¿ wielu orêdowników przeprowadzania testów Mog¹ czuæ zak³opotanie, widz¹c zgrupowane funkcjonalnoœci myli umiejêtnoœæ wykonania za- elementy, które ich zdaniem nie s¹ ze sob¹ dania z zainteresowaniem tym zadaniem. w ¿aden sposób zwi¹zane lub jeœli powi¹zane „Zaskakuj¹ce jest, jak wiele z³ych decyzji podjê- elementy bêd¹ rozrzucone na stronie to na temat witryn, argumentuj¹c je wynikami te- (zobacz równie¿ „Dwanaœcie systemów stów funkcjonalnoœci” — mówi Adam Berliant nawigacyjnych”, str. 128). z Microsoft. „Dlaczego? Poniewa¿ funkcjonalnoœæ nie ma nic wspólnego z tym, czy ludzie faktycznie n Problemy z tempem lub kolejnoœci¹ bêd¹ z czegoœ korzystaæ. Istnieje ró¿nica miêdzy czynnoœci. Gdy u¿ytkownicy realizuj¹ pytaniem, czy ktoœ potrafi obs³ugiwaæ ekspres do transakcjê, maj¹ pewne oczekiwania co kawy, a pytaniem, czy bêdzie u¿ywaæ tego ekspresu”. do nastêpnego jej etapu. Niekiedy kolejnoœæ „Przeprowadzaj¹c badania na w³asny u¿ytek, mo¿na negocjowaæ, ale czasami nie podlega najpierw sprawdzam, czy ludzie bêd¹ u¿ywali mo- ona dyskusji. W opinii u¿ytkowników jego rozwi¹zania. Jeœli odpowiedŸ na to pytanie podanie numeru karty kredytowej na pewno brzmi: „Tak”, to wtedy robiê wszystko, by moje jest ostatnim etapem transakcji. Jeœli dodamy rozwi¹zanie by³o funkcjonalne”. kolejny etap po obci¹¿eniu karty p³atniczej, u¿ytkownicy mog¹ go nawet nie zauwa¿yæ. Czego nie mo¿na dowiedzieæ siê z testów funkcjonalnoœci: Czego nie mo¿emy siê dowiedzieæ… n Czy dana funkcja bêdzie u¿ywana. Chocia¿ testy funkcjonalnoœci s¹ bardzo potê¿nym W czasie testów funkcjonalnoœci narzêdziem, to nie s¹ panaceum. Nie mog¹ rozwi¹- przeprowadzamy ochotników przez zadanie, zaæ wszystkich problemów naszej witryny lub za- które musz¹ zrealizowaæ, korzystaj¹c pobiec jej pora¿kom. Nie s¹ tak¿e substytutem wcze- z funkcji naszej witryny. Z takich badañ œniejszych badañ na temat odbiorców. mo¿emy jedynie dowiedzieæ siê, czy ludzie „Trzeba poœwiêciæ swój czas i zrozumieæ klien- potrafi¹ u¿ywaæ naszych narzêdzi, ale nie tów. Testy funkcjonalnoœci to tylko czêœæ procesu mo¿emy wywnioskowaæ, czy bêd¹ ich u¿ywaæ. poznawania klientów” — wyjaœnia Mike Kunia- n Czy umieœciliœmy w witrynie odpowiednie vsky, autor ksi¹¿ki Observing the User Experience: A Prac- funkcje. Czasami z testów mo¿e wynikaæ, titioner’s Guide for User Research. jakie funkcje powinny byæ dodane (na przyk³ad „Zanim przejdziemy do przeprowadzenia te- wtedy, gdy u¿ytkownik nie jest w stanie stów funkcjonalnoœci, powinniœmy z ca³¹ pewnoœci¹ ukoñczyæ jakiegoœ zadania). Ale testy nie powiedz¹ nam, czy wybraliœmy odpowiednie Zapytajmy ekspertów narzêdzia. „Testy funkcjonalnoœci mog¹ Pytanie: Jakie jest najbardziej b³êdne przekonanie klientów? nam jedynie pokazaæ, czy ktoœ jest w stanie Jeffrey Veen: „S¹dz¹, ¿e funkcjonalnoœæ to rozwi¹zanie. ukoñczyæ zadanie” — mówi Jeffrey Veen. Tak naprawdê funkcjonalnoœæ jest raczej narzêdziem „Ale nic wiêcej naprawdê nie wyka¿¹”. sprawdzania pisowni…” (pe³na odpowiedŸ w ramce „Dlaczego testy funkcjonalnoœci mog¹ siê nie powieœæ?”, str. 150).
  • 46. Projektowanie witryny: organizacja i nawigacja 147 Tani sposób przeprowadzenia testów Jeœli dysponujemy przyzwoitym — lub nawet skrom- 2. Rekrutacja ochotników nym — bud¿etem na stworzenie witryny, powinniœmy zainwestowaæ w profesjonalne testy funkcjonalnoœci, Ochotnicy, jakich rekrutujemy, maj¹ ogromny wp³yw na prowadzone przez ekspertów funkcjonalnoœci w œro- to, co uda siê nam odkryæ. Profesjonalne laboratoria dowisku laboratoryjnym. funkcjonalnoœci zazwyczaj wybieraj¹ osoby z d³ugiej Jeœli jest to nieosi¹galne przy naszym bud¿ecie, listy potencjalnych wolontariuszy, zwerbowanych przez powinniœmy sami przeprowadziæ testy, poœwiêcaj¹c na firmy badawcze. nie kilka godzin i wykorzystuj¹c do tego paru ochotni- Rekrutujemy ochotników ków. Nawet tak proste rozwi¹zanie mo¿e nam ujawniæ Jeœli chcemy przeprowadziæ testy na du¿¹ skalê, za- wiele wa¿nych spostrze¿eñ. pewne bêdziemy chcieli zatrudniæ profesjonaln¹ firmê „Nawet test z jednym u¿ytkownikiem daje nam bar- rekrutacyjn¹. Mo¿emy jednak rekrutowaæ u¿ytkowników dzo du¿o” — mówi profesor Uniwersytetu Stanu Illinois testowych w du¿o tañszy i mniej formalny sposób, szu- Michael Twidale, który udzieli³ zamieszczonych poni- kaj¹c ich wœród nastêpuj¹cych grup: ¿ej wskazówek. A jak mawia Steve Krug w swojej wspa- nia³ej ksi¹¿ce Don’t Make Me Think „Testy z udzia³em n Klienci. Istniej¹cy klienci s¹ œwietnymi kandydatami jednego u¿ytkownika to sytuacja o sto procent lepsza do przeprowadzenia testów funkcjonalnoœci, ni¿ brak testów”. poniewa¿ s¹ ju¿ zapoznani z naszymi produktami i zainteresowani nimi. Klientów mo¿na próbowaæ 1. Przygotowanie „laboratorium” zachêciæ osobiœcie lub zwerbowaæ ochotników, umieszczaj¹c og³oszenie w witrynie. Oczywiœcie, testy mo¿emy przeprowadziæ, siedz¹c za plecami naszego wspó³pracownika i przygl¹daj¹c siê, n Wspó³pracownicy. Jest to grupa dobrych testerów jak korzysta on z naszej nowej witryny. Jeœli chcemy, interfejsu przy za³o¿eniu, ¿e pracownicy ci by testy by³y bardziej profesjonalne, powinniœmy naj- nie uczestnicz¹ bezpoœrednio w pracach nad pierw przygotowaæ prawdziwe laboratorium funkcjo- testowanym produktem. Pamiêtajmy tak¿e, ¿e nalnoœci. osoby zwerbowane wewn¹trz firmy wiedz¹ du¿o W wiêkszoœci laboratoriów ochotnik sadzany jest wiêcej na temat produktu ni¿ prawdziwi u¿ytkownicy. przy komputerze z kamer¹, która rejestruje wyraz jego Ich odpowiedzi mog¹ byæ tak¿e umotywowane twarzy. Druga kamera rejestruje, co dzieje siê w tym stosunkami spo³ecznymi panuj¹cymi w firmie. samym czasie na ekranie. Przekaz wideo jest wyko- n Przyjaciele i rodzina. Nie ma nic z³ego rzystywany na dwa sposoby — jest nagrywany na ta- w poproszeniu przyjació³ i cz³onków rodziny œmê (na przysz³y u¿ytek i do badañ) oraz jest wyœwie- o pomoc w testowaniu nowej witryny. Pamiêtajmy tlany w przyleg³ym pokoju, gdzie obserwatorzy mog¹ jednak, ¿e mog¹ oni nie byæ ca³kowicie szczerzy. na ¿ywo ogl¹daæ test, widz¹c u¿ytkownika na jednym Ich odpowiedzi mog¹ byæ bardziej dyplomatyczne ekranie, a obraz z przegl¹darki na drugim. W niektó- ni¿ odpowiedzi normalnych u¿ytkowników (chocia¿ rych laboratoriach pokój z ochotnikami i pokój z obser- mog¹ byæ równie dobrze mniej dyplomatyczne — watorami oddzielone s¹ lustrem weneckim. wszystko zale¿y od tego, jakich mamy przyjació³). Potrzebny sprzêt: Ochotnicy do badañ n komputer z dostêpem do internetu lub do witryny, Ochotnicy powinni jak najlepiej pasowaæ do profilu do- któr¹ zamierzamy testowaæ, celowego u¿ytkownika: n kamera wideo lub kamera cyfrowa, n Poziom znajomoœci treœci. Jeœli witryna jest n przyleg³y pokój ze sprzêtem wideo (opcjonalne), dedykowana osobom o specyficznych zainteresowaniach, potrzebach lub poziomie n ekran pokazuj¹cy obraz z monitora u¿ytkownika znajomoœci zagadnienia, nasi ochotnicy te¿ (opcjonalne), powinni siê tym cechowaæ. n drugi ekran, na którym bêdzie wyœwietlana twarz n Poziom znajomoœci technologii. Ochotnicy u¿ytkownika (opcjonalne). powinni pasowaæ do odbiorców pod wzglêdem znajomoœci technologii internetowych.
  • 47. 148 Projektowanie witryny: organizacja i nawigacja n Poziom znajomoœci komputera. Ochotnicy 4. Obserwacja powinni umieæ swobodnie korzystaæ z komputera i przegl¹darki. Gdy ochotnik wykonuje przydzielone mu zadanie, trze- ba zachowywaæ siê cicho i uwa¿nie obserwowaæ go. 3. Przygotowanie zadania W naszych obserwacjach powinniœmy zwróciæ szcze- góln¹ uwagê na: Niektóre testy s¹ zadaniami otwartymi, umo¿liwiaj¹cymi n Œcie¿kê u¿ytkownika. W myœlach pod¹¿ajmy ochotnikom swobodne eksplorowanie interfejsu i chodze- œcie¿k¹ u¿ytkownika przez witrynê i zwróæmy nie w³asnymi drogami. Rozwi¹zanie takie jest dobre uwagê, w których miejscach odchodzi on od tylko w przypadku niektórych witryn i tylko w niektórych zalecanej lub spodziewanej trasy. Zwróæmy uwagê, zastosowaniach. Ogólnie nie jest to zalecana technika. jak zachowuje siê, gdy znajdzie siê w „œlepej uliczce” Powinniœmy raczej przygotowaæ kilka zadañ do wy- — czy potrafi cofn¹æ siê i naprawiæ swoj¹ pomy³kê? konania w witrynie. Dziêki temu u¿ytkownicy aktywniej anga¿uj¹ siê w test, a ca³oœæ bardziej przypomina rze- n Wahanie. Zwróæmy uwagê, kiedy u¿ytkownik siê czywisty œwiat (poniewa¿ wiêkszoœæ u¿ytkowników waha lub nie wie, co zrobiæ (pewnie jeŸdzi przybywaj¹cych do witryny ma ju¿ wytyczony cel). kursorem nad kilkoma odnoœnikami). W takim miejscu powinniœmy dopracowaæ interfejs. Nawet Najpierw dodajmy otuchy jeœli nasz testowy u¿ytkownik wybierze w koñcu Ochotnicy na pewno bêd¹ trochê zdenerwowani, przy- dobr¹ drogê, to inny mo¿e siê tutaj pomyliæ. stêpuj¹c do testu. Daliœmy im zadanie do wykonania n Szukanie i przewijanie strony. Zwróæmy uwagê i dlatego czuj¹ siê tak, jakby byli sprawdzani (i tak jak na sytuacje, w których ochotnik szuka jakiegoœ w szkole oceniani za swoje wyniki). Zdenerwowani u¿yt- odnoœnika, ale nie potrafi go znaleŸæ. kownicy nie pomog¹ nam w uzyskaniu realistycznych n Reakcje emocjonalne. Zwróæmy uwagê, i przydatnych wyników, dlatego trzeba dodaæ im otuchy gdy ochotnik wyrazi zdziwienie lub frustracjê. i zapewniæ, ¿e to oni testuj¹ system, a nie odwrotnie. W³aœnie to mo¿emy im powiedzieæ. Mike Kuniavsky, Zadawajmy pytania. Gdy nabierzemy ju¿ trochê wpra- autor ksi¹¿ki Observing the User Experience i za³o¿y- wy w przeprowadzaniu testów, mo¿emy zacz¹æ zada- ciel laboratorium funkcjonalnoœci w Wired, zawsze za- waæ pytania, aby zrozumieæ sposób myœlenia testowego czyna³ testy od zapewnienia u¿ytkowników s³owami: u¿ytkownika. Powinniœmy jednak zwróciæ uwagê na to, „Pamiêtajcie, ¿e to wy testujecie interfejs, a nie inter- jak formu³ujemy pytania. fejs testuje was. B³êdne wykonanie zadania nie jest n Zadawajmy pytania otwarte. Nie pytajmy, mo¿liwe”. czy coœ wygl¹da jak odnoœnik do stron z pomoc¹, Opiszmy zadanie tylko „jak myœlisz, co mo¿e znajdowaæ siê za takim odnoœnikiem?” Opiszmy ochotnikowi prawdopodobny scenariusz tego, co ma zrobiæ w witrynie — czy ma zlokalizowaæ sklep, Nie pytajmy „Dlaczego to zrobi³eœ?” Ludzie przelaæ pieni¹dze w witrynie banku lub znaleŸæ zdjêcie kojarz¹ to pytanie ze szko³¹. Mog¹ staæ siê karlika malutkiego. Wa¿ne jest, by ochotnik rozumia³, defensywni i próbowaæ wymyœliæ jak¹kolwiek co ma osi¹gn¹æ w witrynie, nawet jeœli jest to coœ, cze- zaspokajaj¹c¹ nas odpowiedŸ. go sam nigdy by nie robi³. n Nie pytajmy „Dlaczego to zrobi³eœ?” Profesor Michael Twidale uwa¿a, ¿e ludzie kojarz¹ to Nie przeszkadzajmy pytanie ze szko³¹. Mog¹ uchylaæ siê od odpowiedzi Trzeba powstrzymaæ siê od podpowiadania testowe- lub te¿ mog¹ wymyœliæ jak¹kolwiek odpowiedŸ. mu u¿ytkownikowi, co ma zrobiæ. Jest to trudne zada- „Tak sformu³owane pytanie sugeruje, ¿e zrobili coœ nie, jeœli testujemy witrynê, któr¹ sami stworzyliœmy Ÿle. Lepiej zapytaæ — Jak myœlisz, co zasugerowa³o (chcemy wyjaœniæ jej strukturê, broniæ przed zarzutami ciê, ¿eby tak post¹piæ?” — mówi profesor. lub pokazaæ najciekawsze funkcje). Ale musimy pozwo- n Powiedzmy tylko „hmm”. Gdy chcemy liæ u¿ytkownikowi samemu zmagaæ siê z ni¹, jeœli chce- zrozumieæ, co powoduje frustracjê lub zagubienie, my zobaczyæ, jak ludzie bêd¹ sobie radziæ poza labo- mo¿emy zachêciæ ochotnika do wypowiedzi, ratorium funkcjonalnoœci.
  • 48. Projektowanie witryny: organizacja i nawigacja 149 mówi¹c „hmm”. Twidale kontynuuje: „jest to bardzo dziwne, ale ludzie czêsto rozwijaj¹ swoje wypowiedzi w³aœnie wtedy, gdy powiemy zwyk³e hmm, zamiast spytaæ ich, co myœl¹. Konkretne pytania czêsto wprawiaj¹ ich w zak³opotanie. Natomiast zwyk³e hmm mo¿e sprawiæ, ¿e zaczn¹ dok³adniej opowiadaæ, co myœl¹ na dany temat”. 5. Zidentyfikowanie problemów Patrz¹c, jak ochotnicy zmagaj¹ siê z interfejsem na- szej witryny, mo¿emy szybko zidentyfikowaæ g³ówne problemy z funkcjonalnoœci¹. Zazwyczaj ma³y test, prze- prowadzony przy pomocy od trzech do piêciu u¿ytkow- ników, odkryje wszystkie wiêksze b³êdy interfejsu. Przy- gl¹daj¹c siê zachowaniu ochotników, powinniœmy umieæ wskazaæ nie tylko problematyczne obszary, ale tak¿e przyczyny tych problemów. Szczególn¹ uwagê powin- niœmy zwracaæ na: n problemy z rozmieszczeniem elementów, n problemy z oznaczeniami, n problemy z grupowaniem, n problemy z tempem lub kolejnoœci¹ wykonywania czynnoœci, n problemy z modelem funkcjonalnym projektu. Jeœli wczeœnie w procesie testowania wykryjemy pro- sty problem (np. przy pierwszym ochotniku), mo¿emy szybko poprawiæ go przed rozpoczêciem testów z ko- lejnym ochotnikiem. Usuwaj¹c pocz¹tkow¹ przeszko- dê, mo¿emy skupiæ siê na innych, mniej oczywistych problemach. 6. Wynagrodzenie ochotników Jeœli zamierzamy wykorzystaæ czyjœ czas, powinniœmy mu to jakoœ wynagrodziæ. W standardowych testach ochotnikom p³aci siê gotówk¹. Ale ludzi mo¿na moty- wowaæ tak¿e czymœ innym. Mog¹ to byæ firmowe ma- teria³y reklamowe, takie jak koszulki, torby, kubki z logo produktu lub na przyk³ad jakiœ produkt naszej firmy. Na wynagrodzenie nadaj¹ siê tak¿e bony towarowe (zw³aszcza na darmowy posi³ek w restauracji czy bile- ty do kina). Jeœli rekrutujemy testowych u¿ytkowników wœród pracowników firmy, mo¿emy ich motywowaæ, ofe- ruj¹c im wolny dzieñ.
  • 49. 150 Projektowanie witryny: organizacja i nawigacja wskazówki praktyczne Dlaczego testy funkcjonalnoœci mog¹ siê nie powieœæ? Testy funkcjonalnoœci to chyba najlepsza sprawa 2. Jeœli testujemy coœ, co nie mo¿e zostaæ zmie- w historii rozwoju internetu. Nie s¹ jednak zawsze nione. Wiele testów funkcjonalnoœci zmarnowano, niezawodne. Projektant Jeffrey Zeldman napisa³ poniewa¿ osoby przeprowadzaj¹ce test lub wolonta- w swojej ksi¹¿ce Taking Your Talent to the Web: „Jest riusze skupiali siê na elementach witryny lub inter- dobre testowanie funkcjonalnoœci i jest bezu¿ytecz- fejsu, których nie mo¿na zmieniæ. na pseudonauka, promuj¹ca banalnoœæ. Niestety, do- „Zanim zaczniemy testy, musimy wiedzieæ, co póki nie zaczniemy wspó³pracowaæ z agencj¹ inter- mo¿na, a czego nie mo¿na zmieniæ w witrynie” — netow¹, nie mo¿emy powiedzieæ, czy stosowane mówi projektant Jim Frew. „Jeœli nasz znak graficzny przez ni¹ metody testowania daj¹ przydatne infor- zawsze by³ i zawsze bêdzie zielony, nie pytajmy, czy macje, czy prowadz¹ na manowce”. powinien byæ czerwony. Nigdy nie bêdzie czerwony”. Jeœli nie chcemy zostaæ sprowadzeni na ma- 3. Jeœli testujemy coœ, co nie ma znaczenia. Zbyt nowce, musimy umieæ rozpoznaæ znaki ostrzegaw- czêsto testy funkcjonalnoœci prowadz¹ donik¹d, po- cze. Testy funkcjonal- niewa¿ dotycz¹ aspektów noœci mog¹ nie udaæ siê witryny lub jej interfejsu w kilku sytuacjach: Naprawdê trudno nie wp³ywaj¹cych na funk- 1. Jeœli nie wiemy, co jest wierzyæ danym, cjonalnoœæ witryny. Po- testujemy. Przed rozpo- poniewa¿ na ich nownie prym wiedzie ko- czêciem testów musimy lor. Ludzie uwielbiaj¹ podj¹æ decyzjê, jakie podstawie ka¿dy komentowaæ niew³aœciwy aspekty witryny chcemy mo¿e sformu³owaæ ich zdaniem dobór kolo- przetestowaæ. Pomaga rów. Kolor faktycznie inne wnioski. to skoncentrowaæ siê wp³ywa na odbiór witryny w czasie testów i igno- Sheryl Cababa przez u¿ytkownika, ale rowaæ zbêdne wska- rzadko ma znaczenie dla zówki uczestnicz¹cego funkcjonalnoœci, chyba ¿e w teœcie wolontariusza. powoduje nieczytelnoœæ tekstu w witrynie. „Jednym z kluczy do testowania jest ustalenie, „Ludzie nie opuszczaj¹ witryny dlatego, ¿e nie jakie informacje chcemy uzyskaæ, poniewa¿ nie kon- lubi¹ fioletu” — mówi Lance McDaniel. „Opuszczaj¹ trolujemy, co komentuje osoba testuj¹ca” — mówi witrynê, jeœli za d³ugo siê ³aduje, jeœli nie potrafi¹ zna- Lance McDaniel, wiceprezes firmy SBI & Co. Na przy- leŸæ tego, czego szukaj¹ lub jeœli w witrynie nie ma k³ad, wolontariusze uwielbiaj¹ mówiæ o kolorach. tego, co ich interesuje”. „Klient mówi wtedy, ¿e testuj¹cym nie podoba³ siê 4. Jeœli przeprowadzaj¹cy test nie przygotowa³ kolor. Powinniœmy odpowiedzieæ, ¿e nie testujemy dobrego scenariusza. Gdy przeprowadzamy testy koloru; testujemy proces zamawiania, co do którego funkcjonalnoœci we w³asnym zakresie, musimy upew- nie by³o zarzutów”. niæ siê, ¿e osoby nadzoruj¹ce testy wyraŸnie, zwiêŸ- le i obiektywnie wyjaœni³y wolontariuszom, czego od nich oczekujemy.
  • 50. Projektowanie witryny: organizacja i nawigacja 151 „Uczestniczy³em w ró¿nych testach. Zauwa¿y³em, 7. Jeœli próbujemy sprawdziæ, czy dane narzêdzie ¿e niektóre osoby przeprowadzaj¹ce testy nie zawsze bêdzie u¿ywane. Jest to klasyczny problem testów wiedz¹, w jaki sposób zachêciæ u¿ytkowników lub jak funkcjonalnoœci — ludzie interpretuj¹ pozytywne wy- kierowaæ procesem testowania — mówi projektant niki testów jako potwierdzenie, ¿e tworz¹ odpowied- Jim Frew. „Ca³e testowanie nie mia³o sensu, ponie- ni¹ rzecz. Jednak testy funkcjonalnoœci nie mog¹ nam wa¿ osoba przeprowadzaj¹ca test nie potrafi³a uzy- tego powiedzieæ. Testy funkcjonalnoœci mog¹ daæ je- skaæ od u¿ytkownika odpowiednich opinii”. dynie informacjê, czy ludzie rozumiej¹ i wiedz¹, jak 5. Jeœli ochotnik nie jest typowym u¿ytkownikiem. u¿ywaæ danego narzêdzia, gdy musz¹ go u¿yæ. Nie Najwa¿niejszym celem testów funkcjonalnoœci jest mówi¹ jednak nic o tym, czy dane narzêdzie bêdzie poznanie sposobu myœlenia u¿ytkownika w czasie dobrowolnie stosowane. wykonywania typowych zadañ w witrynie. Nie uda Jak ujê³a to Martha Brockenbrough, by³a redaktor siê nam to, jeœli ochotnicy nie bêd¹ stanowiæ repre- MSN: „Testy funkcjonalnoœci nie mog¹ sprawdziæ, czy zentatywnej grupy naszych odbiorców. Gdy ochotnicy dane narzêdzie bêdzie faktycznie u¿ywane”. znacznie ró¿ni¹ siê od typowego u¿ytkownika pod 8. Jeœli testerzy lub ochotnicy s¹ nieprzyjaŸnie wzglêdem nastawienia, umiejêtnoœci, komputerowego nastawieni. Jeœli testy funkcjonalnoœci (lub ich doœwiadczenia (wiedz¹ zbyt wiele lub zbyt ma³o z da- wyniki) wpadn¹ w niepowo³ane rêce, mog¹ staæ siê nego tematu lub na temat broni¹ w utarcz- internetu), uzyskane wyni- kach miêdzy pra- ki nie bêd¹ poprawne. Funkcjonalnoœæ cownikami, tak „Nasze badania bêd¹ przypomina sprawdzanie powszechnych wielokrotnie lepsze, jeœli w firmach. Tester u¿ytkownicy, z którymi pisowni. Sprawdzenie mo¿e zasugero- rozmawiamy, bêd¹ po- pisowni nie ulepszy waæ u¿ytkowniko- dobni do naszych odbior- wi jakieœ szcze- ców” — mówi Jeffrey naszego eseju, a jedynie gólne wnioski, Veen. „Im wiêcej wysi³ku poprawi w nim b³êdy. a osoba analizu- w³o¿ymy w rekrutacjê, tym j¹ca wyniki mo¿e Jeffrey Veen bardziej wiarygodne bêd¹ zinterpretowaæ je wyniki testów”. zgodnie z celami 6. Jeœli wyniki zostan¹ Ÿle zinterpretowane. Testy w³asnymi lub celami swojego wydzia³u. Sami wolon- funkcjonalnoœci mo¿na interpretowaæ w ró¿ny spo- tariusze mog¹ mieæ wp³yw na koñcowe wyniki, jeœli sób. Wnioski wyci¹gniête z tego samego testu mog¹ ¿ywi¹ jak¹œ niechêæ do firmy, witryny lub œwiata. siê znacznie ró¿niæ w zale¿noœci od profesji i osobo- 9. Jeœli oczekujemy, ¿e rozwi¹¿¹ wszystkie na- woœci obserwatora. Projektant, in¿ynier, sprzedaw- sze problemy. „Najbardziej b³êdnym przekonaniem, ca mog¹ mieæ bardzo ró¿ne spostrze¿enia. le zin- jakie miewaj¹ klienci, jest to, ¿e funkcjonalnoœæ jest terpretowany dobry test jest gorszy ni¿ z³y test. rozwi¹zaniem” — mówi Jeffrey Veen. „Funkcjonal- „Gdy tworzony przeze mnie produkt ma byæ te- noœæ przypomina sprawdzanie pisowni. Sprawdze- stowany, staram siê obserwowaæ ka¿dy test” — mówi nie pisowni nie ulepszy naszego eseju, a jedynie Sheryl Cababa, projektantka produktów w Microsoft. poprawi w nim b³êdy. Z funkcjonalnoœci¹ jest podob- „Widzê wtedy, jak in¿ynierowie funkcjonalnoœci pod- nie. Jest to ostatnia czynnoœæ w d³ugim procesie po- sumowuj¹ zebrane dane i jakie wnioski z nich wyci¹- znawania naszych u¿ytkowników. Jest to jedynie gaj¹. Mog¹ byæ one ca³kowicie inne ni¿ wnioski, któ- sprawdzenie, ¿e nasze za³o¿enia by³y poprawne”. re ja bym wyci¹gnê³a. Naprawdê trudno jest wierzyæ danym, poniewa¿ na ich podstawie ka¿dy mo¿e sfor- mu³owaæ inne wnioski”.