Wydawnictwo Helion

ul. Chopina 6

44-100 Gliwice

tel. (32)230-98-63

e-mail: helion@helion.pl

PRZYK£ADOWY ROZDZIA£PRZYK£ADOWY ROZDZIA£

IDZ DOIDZ DO

ZAMÓW DRUKOWANY KATALOGZAMÓW DRUKOWANY KATALOG

KATALOG KSI¥¯EKKATALOG KSI¥¯EK

TWÓJ KOSZYKTWÓJ KOSZYK

CENNIK I INFORMACJECENNIK I INFORMACJE

ZAMÓW INFORMACJEO NOWO�CIACH

ZAMÓW INFORMACJEO NOWO�CIACH

ZAMÓW CENNIKZAMÓW CENNIK

CZYTELNIACZYTELNIA

FRAGMENTY KSI¥¯EK ONLINEFRAGMENTY KSI¥¯EK ONLINE

SPIS TRE�CISPIS TRE�CI

DODAJ DO KOSZYKADODAJ DO KOSZYKA

KATALOG ONLINEKATALOG ONLINE

Nie ka¿ mi my�leæ! O ¿yciowympodej�ciu do funkcjonalno�cistron internetowychAutor: Steve Krug

T³umaczenie: Krzysztof Jurczyk

ISBN: 83-7361-696-9

Tytu³ orygina³u: Dont Make Me Think

Format: B5, stron: 192

W ksi¹¿ce „Nie ka¿ mi my�leæ! O ¿yciowym podej�ciu do funkcjonalno�ci stron

internetowych” znajdziesz wskazówki, dziêki którym projektowane przez Ciebie witryny

WWW bêd¹ spe³nia³y podstawowe wymaganie wiêkszo�ci u¿ytkowników internetu —

bêd¹ przejrzyste i ³atwe w nawigacji. Dowiesz siê, jak stworzyæ witrynê, która wzbudzi

zainteresowanie odwiedzaj¹cych i sprawi, ¿e bêd¹ do niej wracaæ.

• Znaczenie funkcjonalno�ci stron WWW

• Zasady projektowania uk³adu graficznego

• Pisanie tekstów na strony WWW

• Schemat nawigacji w witrynie

• Testowanie funkcjonalno�ci witryn WWW

Dziêki zawartym w tej ksi¹¿ce wiadomo�ciom sprawisz, ¿e Twoje witryny WWW bêd¹

przedstawiane innym projektantom jako wzór do na�ladowania.

ASDFADFROZDZIAŁ 2

[ 4 ]

Spis treści

Przedmowa 6

WprowadzenieKilka uwag na początek

8

ROZDZIAŁ 1. Nie każ mi myśleć!

O życiowym podejściu do funkcjonalności stron internetowychPierwsze prawo funkcjonalności Kruga

16

ROZDZIAŁ 2. Jak naprawdę korzystamy z internetu?Przeglądanie, zadowalanie się i dawanie sobie rady

26

ROZDZIAŁ 3. Wstęp do projektowania billboarduProjektowanie stron do przeglądania, a nie czytania

36

ROZDZIAŁ 4. Zwierzę, roślina czy rzecz?Dlaczego użytkownicy lubią podejmować wybory niewymagające myślenia?

46

ROZDZIAŁ 5. Usuń zbędne słowaSztuka pisania tekstów w internecie

50

ROZDZIAŁ 6. Znaki drogowe i ścieżki powrotuProjektowanie nawigacji

56

JAK NAPRAWDĘ KORASDZYSTAMY Z INTERNETU?

[ 5 ]

ROZDZIAŁ 7. Co robić, gdy strona główna wymyka się spod kontroliProjektowanie strony głównej

102

ROZDZIAŁ 8. „Farmer i pastuch powinni być przyjaciółmi”Dlaczego większość argumentów osób projektującychstrony internetowe na temat ich funkcjonalności jestnieprawdziwa i jak samemu uniknąć wyrażaniatakich opinii. Jeden człowiek lubi orać ziemię,

136

ROZDZIAŁ 9. Testowanie funkcjonalności za 50 groszy dziennieUpraszczanie testów — po to, aby zrobić ich odpowiednio wiele

144

ROZDZIAŁ 10. Film pod tytułem „Testowanie funkcjonalności”Jak samodzielnie przeprowadzić testowanie funkcjonalności?

160

ROZDZIAŁ 11. Co zrobić, aby nie wylać dziecka z kąpieląInterpretacja wyników testów

178

Skorowidz 186

NIE KAŻ MI MYŚLEĆ ! O ŻYCIOWYM PODEJŚCIU DO FUNKCJONALNOŚCI…

[ 17 ]

udzie często pytają mnie:

„Na co powinienem zwrócić uwagę, aby mieć pewność,że moja witryna będzie łatwa w użyciu?”.

Odpowiedź jest prosta. Nie jest to: „Najważniejsze rzeczy nie powinny być dalej niżo dwa kliknięcia” lub: „Używaj języka odbiorcy” ani też: „Bądź konsekwentny”.

To po prostu…

Nie każ mi myśleć!Od lat mówię ludziom, że jest to moje pierwsze prawo funkcjonalności. Im więcejstron internetowych oglądam, tym bardziej jestem przekonany o jego słuszności.

Zasada ta jest ważniejsza od innych i stanowi kluczowy argument podczas podejmowaniadecyzji, czy coś jest przydatne, czy nie w projekcie strony WWW. Jeśli potrafiszzapamiętać tylko jedną regułę, niech to będzie właśnie ta1.

Oznacza to, że oglądana przeze mnie strona WWW powinna być, na ile jest to tylkomożliwe, zrozumiała, oczywista i niewymagająca dodatkowych objaśnień.

Powinienem bez żadnego zastanowienia „załapać ją” — zrozumieć, w jakim celupowstała i jak z niej korzystać.

Do jakiego stopnia strona WWW powinna być zrozumiała?

No cóż, do takiego, aby np. sąsiadka z mieszkania obok, której tematyka Twojej witrynyw ogóle nie interesuje i która raczej nie wie, do czego służy w przeglądarce przyciskWstecz, mogła po oglądnięciu strony startowej witryny powiedzieć: „Tak, to jest…”(przy odrobinie szczęścia może nawet: „Tak, to jest… Fajnie wygląda”, ale to jużinna sprawa).

1 Tak naprawdę istnieje jeszcze jedna podobna do niej zasada: „Wyrzuć połowę wyrazów z każdejstrony, potem połowę z tego, co zostało”. Omówię ją w osobnym rozdziale w dalszej części książki.

L

Michael, czemu okna są odsłonięte?

— K A Y C O R L E ON E W O J C U C H R Z E S T N Y M

ROZDZIAŁ 1

[ 18 ]

Gdy patrzę na stronę internetową, która nie zmusza mnie do zastanawiania się nadjej zawartością czy układem, myślę mniej więcej tak: „OK, tu jest… A tutaj widzę…A tu jest to, czego szukam”.

NIE WYMAGA MYŚLENIA

…a tu sądzisiejszeoferty specjalne

Tu widzękategorie

produktów…

Pamięćmodemył

Są! Monitory.Kliknięcie

NIE KAŻ MI MYŚLEĆ ! O ŻYCIOWYM PODEJŚCIU DO FUNKCJONALNOŚCI…

[ 19 ]

Gdy natomiast oglądam stronę, która zmusza mnie do myślenia, wówczas każdejmyśli towarzyszy znak zapytania.

WYMAGA MYŚLENIA

Gdy tworzysz witrynę internetową, Twoim zadaniem jest usunięcie znaków zapytaniaz myśli przyszłego odbiorcy.

Hmm. Sporotu rzeczy.Od czego

zacząć?

Hmm. Czemuoni tak to

nazwali?

Mogę tokliknąć?

Czy to jest paseknawigacji?Czy może to,co jest nad nim?

Czemu to jestw tym miejscu?

Oba łączawyglądają tak samo.Ciekawe czemu?

ROZDZIAŁ 1

[ 20 ]

Elementy, które każą nam myślećPraktycznie wszystko, co znajduje się na stronie internetowej, może zmusić nasdo niepotrzebnego zatrzymania się i zastanowienia. Takimi elementami są np. nazwywłasne produktów, nazwy powstałe na potrzeby marketingu, nazwy charakterystycznedla danych firm czy specjalistyczne wyrażenia techniczne.

Przypuśćmy, że znajomy wspomniał Ci o firmie XYZ, która planuje zatrudnić kogośz kwalifikacjami dokładnie takimi jak Twoje. W tym celu odwiedzasz stronę internetowąXYZ i przeglądasz ją, próbując znaleźć odnośnik do ofert pracy. Nazwa nadanaprzyciskowi, który prowadzi do listy wakatów, ma istotne znaczenie dla właściwegozrozumienia jego znaczenia.

<OCZYWISTE WYMAGA ZASTANOWIENIA SIĘ>

Praca!Kliknięcie

Hmm[Milisekundy zastanawiania się]Praca.Kliknięcie

Hmm. To pewnie ofertypracy, ale wygląda jednak na coświęcej. Powinienemkliknąć czy szukać dalej?

Użyte wyrażenia zawsze znajdują się gdzieś pomiędzy kategorią „oczywiste dla każdego”a „absolutnie niezrozumiałe”, przy czym za każdym razem o wybraniu danego zwrotuprzez projektanta decyduje jakiś kompromis.

Przykładowo, „Praca” może brzmieć zbyt nieoficjalnie dla XYZ, natomiast „Świat pracy”może wynikać z jakiejś skomplikowanej polityki wewnętrznej lub tego, że takiego zwrotuużywają od zawsze w ich wewnętrznej gazetce. Zastosowane kompromisy powinnyjednak zawsze być bliżej grupy wyrażeń oczywistych dla każdego niż tej, która zmuszado niepotrzebnego myślenia.

Innym przykładem źródła niekończących się znaków zapytania dla osób odwiedzającychstrony internetowe są odnośniki i przyciski, które nie wyglądają jak te, które możnakliknąć. Użytkownik nigdy nie powinien mieć cienia wątpliwości, czy dany elementsłuży do kliknięcia, czy nie.

NIE KAŻ MI MYŚLEĆ ! O ŻYCIOWYM PODEJŚCIU DO FUNKCJONALNOŚCI…

[ 21 ]

<NA PEWNO MOŻNA KLIKNĄĆ WYMAGA ZASTANOWIENIA SIĘ>

Kliknięcie

Hmm[Milisekundy zastanawiania się]Myślę, że jest to przycisk.Kliknięcie

Hmm.Czy to jest przycisk?

Pomyślisz pewnie: „No tak, ale przecież nietrudno poznać, czy coś da siękliknąć. Po najechaniu kursorem powinien przyjąć on kształt dłoni.W czym problem?”.

Problem w tym, że przy korzystaniu z internetu każdy kolejny znakzapytania zwiększa nasz wysiłek i rozprasza uwagę. Tego typu niedogodnościmogą być niewielkie, jednak z czasem sumują się i w końcu mogąwyprowadzić z równowagi.

Należy przyjąć, że ludzie nie lubią głowić się nad tym, jak coś zrobić. Fakt, że projektancinie przejmują się wystarczająco, aby tworzona przez nich strona była przejrzystai nieskomplikowana, może zniszczyć nasze zaufanie do witryny i jej właścicieli.

Inny przykład: zanim rozpocznę wyszukiwanie książek w większości księgarniinternetowych, muszę pomyśleć, jak to szukanie przeprowadzić.

ROZDZIAŁ 1

[ 22 ]

Większość witryn księgarni internetowych

Spójrzmy. „Szybkie wyszukiwanie”.To chyba to samo co „Szukaj”, prawda?

Czy muszę kliknąć tę listę rozwijaną?

Wszystko, co wiem o książce,to jej autor — Tom Clancy.Czy Clancy to słowo kluczowe?

(Co to właściwie jest „słowo kluczowe”?)

Chyba jednak muszę użyć tej listy.Klika symbol strzałki

„Tytuł. Autor. Słowo kluczowe.”OK, wybieram „Autor”.Klika symbol strzałki

Wpisuje „Tom Clency”Klika „Szukaj”

Zgoda, ten dedukcyjny ciąg myślowy trwa ułamek sekundy, mimo to może byćmęczący. Nawet coś tak banalnego jak zmiana opisu przycisku z Search (szukaj)na Quick Search (szybkie wyszukiwanie) może spowodować pojawienie się kolejnegoznaku zapytania.

NIE KAŻ MI MYŚLEĆ ! O ŻYCIOWYM PODEJŚCIU DO FUNKCJONALNOŚCI…

[ 23 ]

W interfejsie księgarni Amazon.com nie ma nawet rozróżnienia Title-Author-Keyword (tytuł-autor-słowo kluczowe). Mechanizm wyszukiwania analizuje po prostuto, co wpisałeś i próbuje zwrócić jak najbardziej sensowne wyniki.

Dlaczego miałbym myśleć nad tym, w jaki sposób chcę przeszukać bazę książek lubzastanawiać się, czego oczekuje po moim wpisie mechanizm wyszukujący książki?Takie interfejsy przypominają mi kłótliwego trolla stojącego na straży mostu(„Zapomniałeś spytać się, czy Ci wolno?”).

Mógłbym zrobić listę kilkudziesięciu innych pytań, które nie powinny pojawiać sięw głowach odwiedzających stronę, np.:

> Gdzie się znajduję?

> Od czego powinienem zacząć?

> Gdzie oni umieścili…?

> Co jest na tej stronie najważniejsze?

> Dlaczego oni to tak nazwali?

Oczywiście najmniej potrzebną rzeczą w tej chwili jest kolejna lista zakazówi nakazów, którą należałoby dołączyć do pokaźnego już stosu innych list związanychz projektowaniem stron internetowych. Najważniejsze jest to, aby zapamiętać kilkapodstawowych metod eliminacji pojawiających się wątpliwości. Jeśli tak się stanie,wówczas zaczniesz zauważać na odwiedzanych stronach WWW wszystkie elementyzmuszające do niepotrzebnego myślenia, a w rezultacie — nauczysz się je rozpoznawaći unikać ich w tworzonych projektach.

OK. „Wyszukajksiążki wg …”

Wpisuje „Tom Clancy”Klika „Go”

AMAZON.COM

ROZDZIAŁ 1

[ 24 ]

Nie wszystko może być idealneTwoim celem powinno być takie zaprojektowanie stron, aby każda z nich byłacałkowicie zrozumiała i łatwa w obsłudze dla zwykłego użytkownika2.

Czasami jednak — zwłaszcza w sytuacjach, kiedy tworzysz coś oryginalnego, zwalającegoz nóg lub bardzo skomplikowanego — nie ma możliwości wykreowania idealnejstrony WWW. Rozeznanie się w prawidłowo zaprojektowanej stronie zajmuje chwilę— i tylko chwilę. Wygląd elementów i ich prawidłowe opisy, układ strony i niewielka

ilość starannie dobranego tekstu — to wszystko powinno pozwolić na prawienatychmiastowe zrozumienie zawartości strony.

Jeśli nie ma możliwości, aby strona była intuicyjna, powinieneś zrobić wszystko,abyprzynajmniej stała się zrozumiała.

Dlaczego jest to tak ważne?Zadziwiające, ale nie dlatego, jak myśli wiele osób:

Czasami to prawda, ale zaskakujące jest, jak długo niektórzy ludzie potrafią wytrzymaćna stronach, które sprawiają im same problemy. Wiele osób po napotkaniu przeszkódw czasie przeglądania witryn internetowych próbuje za zaistniałą sytuację oskarżaćsiebie, a nie odwiedzane strony.

2 Naprawdę wzór Zwykłego Użytkownika umieszczony jest w hermetycznie zamkniętej piwnicyw budynku Międzynarodowego Biura Standaryzacyjnego w Genewie. Do tego, jak wyobrażaćsobie „zwykłego użytkownika”, powrócimy jeszcze w dalszej części książki.

W Internecie konkurencja jest zawszejedno kliknięcie obok. Dlatego więc,

jeśli użytkownik poczuje sięrozczarowany, pójdzie do konkurencji.

NIE KAŻ MI MYŚLEĆ ! O ŻYCIOWYM PODEJŚCIU DO FUNKCJONALNOŚCI…

[ 25 ]

Może być jednak i tak, że Twoja strona nie jest łatwa do odnalezienia, a odwiedzającynic nie wie o konkurencji. W takim przypadku perspektywa rozpoczynania poszukiwańod nowa nie zawsze jest pocieszająca.

Istnieje jeszcze zjawisko: „Czekałem na autobus już 10 minut, mogę więc wytrzymaćjeszcze chwilę”. Poza tym, kto mówi, że strona konkurencji będzie mniej uciążliwa?

Po co więc to wszystko?Tworzenie stron zrozumiałych i przejrzystych jest jak dobre oświetlenie w sklepie— sprawia, że wszystko wygląda lepiej. Korzystanie ze strony, która nie zmuszado myślenia o rzeczach nieistotnych, nie wymaga żadnego wysiłku, podczasgdy konieczność zaprzątania sobie głowy niepotrzebnymi szczegółami wyczerpujeenergię oraz zmniejsza entuzjazm — nie wspominam już o stracie czasu.

Jak jednak zobaczysz w następnym rozdziale, analiza sposobu, w jaki naprawdękorzystamy z internetu, pokazuje, że głównym powodem, dla którego należy tworzyćstrony niewymagające myślenia, jest fakt, że większość ludzi ma zamiar poświęcićoglądaniu strony o wiele mniej czasu, niż nam się wydaje.

Jeśli więc strony internetowe mają być efektywne, muszą w mgnieniu oka spełniaćswoje zadanie. A najlepszą metodą, aby to osiągnąć, jest tworzenie stron całkowicieintuicyjnych lub chociaż w pełni zrozumiałych.