Nie ka mi myœleæ! O yciowym podejœciu do funkcjonalnoœci stron internetowych. Wydanie II. Edycja kolorowa

Transkrypt

1 Nie ka mi myœleæ! O yciowym podejœciu do funkcjonalnoœci stron internetowych. Wydanie II. Edycja kolorowa Autor: Steve Krug T³umaczenie: Krzysztof Jurczyk ISBN: Tytu³ orygina³u: Don't Make Me Think: A Common Sense Approach to Web Usability (2nd Edition) Format: B5, stron: 216 W g¹szczu milionów witryn WWW znajduj¹cych siê w sieci jest równie i Twoja. Co nale y zrobiæ, aby u ytkownicy sieci korzystali akurat z niej, a nie z innych? Odpowiednie wypozycjonowanie strony w wyszukiwarkach jest niezwykle wa ne, ale nie stanowi jedynego rozwi¹zania. Równie wa ne, jeœli nie wa niejsze, jest takie jej zaprojektowanie i przygotowanie witryny, aby odwiedzaj¹ce j¹ osoby nie zosta³y przyt³oczone nadmiarem funkcji nawigacyjnych, dziesi¹tkami akapitów czy te mnóstwem nie do koñca potrzebnych elementów graficznych. Nale y zaprojektowaæ witrynê tak, aby korzystanie z niej by³o intuicyjne i ³atwe. W kolejnym wydaniu doskona³ej ksi¹ ki 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, czytelne i ³atwe w nawigacji. Nauczysz siê projektowaæ strukturê witryny, opracowywaæ logiczny schemat nawigacji i przygotowywaæ elementy graficzne, które bêd¹ uatrakcyjniaæ stronê, a nie odwracaæ uwagê u ytkownika od jej treœci. Dowiesz siê tak e, jak stosowaæ kaskadowe arkusze stylów i radziæ sobie z czêsto absurdalnymi zachciankami szefów i klientów. Specyfika przedstawiania informacji na stronach WWW Dzielenie strony na elementy funkcjonalne Projektowanie schematów i mechanizmów nawigacyjnych Planowanie odpowiedniego uk³adu strony g³ównej Uwzglêdnianie grupy docelowej przy projektowaniu witryny Testowanie funkcjonalnoœci i dzia³ania witryny Zastosowanie stylów CSS Chcesz, aby Twoje witryny zagoœci³y w folderze Ulubione u setek u ytkowników sieci? Nic prostszego wykorzystaj znajduj¹ce siê w tej ksi¹ ce porady.

2 Spis tre ci Przedmowa do drugiego wydania 6 Wst p 12 ROZDZIA 1. ROZDZIA 2. ROZDZIA 3. ROZDZIA 4. ROZDZIA 5. ROZDZIA 6. Wprowadzenie Kilka uwag na pocz tek Nie ka mi my le! O yciowym podej ciu do funkcjonalno ci stron internetowych Pierwsze prawo funkcjonalno ci Kruga Jak naprawd korzystamy z internetu? Przegl danie stron, zadowalanie si znalezionymi witrynami i dawanie sobie jako rady z witrynami Wst p do projektowania billboardu Projektowanie stron do przegl dania, a nie czytania Zwierz, ro lina czy rzecz? Dlaczego u ytkownicy lubi podejmowa wybory niewymagaj ce my lenia? Usu zb dne s owa Sztuka pisania tekstów w internecie Znaki drogowe i cie ki powrotu Projektowanie nawigacji [ 4 ]

3 ROZDZIA 7. ROZDZIA 8. ROZDZIA 9. ROZDZIA 10. ROZDZIA 11. ROZDZIA 12. Co robi, gdy strona g ówna wymyka si spod kontroli Projektowanie strony g ównej Farmer i pastuch powinni by przyjació mi Dlaczego wi kszo argumentów osób projektuj cych strony internetowe na temat ich funkcjonalno ci jest nieprawdziwa i jak samemu unikn wyra ania takich opinii Testowanie funkcjonalno ci za 50 groszy dziennie Upraszczanie testów po to, aby zrobi ich odpowiednio wiele Funkcjonalno jako wzajemne zaufanie Dlaczego Twoja witryna powinna by spolegliwa Dost pno witryny, kaskadowe arkusze stylów i Ty Gdy tylko pomy lisz, e sko czy e, oto pojawia si uniesiony w powietrzu kot z przywi zanym do grzbietu tostem Pomocy! Mój szef chce, abym Gdy dobrzy ludzie podejmuj z e decyzje Podzi kowania i wszystko, co dosta em, to ten okropnie brzydki podkoszulek Skorowidz 204 [ 5 ]

4 ROZDZIA WPROWADZENIE Zwierz, ro lina czy rzecz? Nie ka mi my le! O yciowym podej ciu do funkcjonalno ci stron internetowych PIERWSZE PRAWO FUNKCJONALNO CI KRUGA [ 22 ]

5 Michael, czemu okna s ods oni te? NIE KA MI MY LE! O YCIOWYM PODEJ CIU DO FUNKCJONALNO CI KAY CORLEONE W OJCU CHRZESTNYM L 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 cej stron internetowych ogl dam, tym bardziej jestem przekonany o jego s uszno ci. Zasada ta jest wa niejsza od innych i stanowi kluczowy argument podczas podejmowania decyzji, czy co jest przydatne, czy nie w projekcie strony WWW. Je li potrafisz zapami ta tylko jedn regu, niech to b dzie w a nie ta 1. Oznacza to, e ogl dana przeze mnie strona WWW powinna by, na ile jest to tylko mo liwe, zrozumia a, oczywista i niewymagaj ca dodatkowych obja nie. Powinienem bez adnego zastanowienia za apa j zrozumie, w jakim celu powsta 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 witryny w ogóle nie interesuje i która raczej nie wie, do czego s u y w przegl darce przycisk Wstecz, mog a po obejrzeniu 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 dej strony, potem po ow z tego, co zosta o. Omówi j w osobnym rozdziale w dalszej cz ci ksi ki. [ 23 ]

6 ROZDZIA 1 Gdy patrz na stron internetow, która nie zmusza mnie do zastanawiania si nad jej zawarto ci czy uk adem, my l mniej wi cej tak: OK, tu jest A tutaj widz A tu jest to, czego szukam. [ 24 ]

7 NIE KA MI MY LE! O YCIOWYM PODEJ CIU DO FUNKCJONALNO CI Gdy natomiast ogl dam stron, która zmusza mnie do my lenia, wówczas ka dej my li towarzyszy znak zapytania. Gdy tworzysz witryn internetow, Twoim zadaniem jest usuni cie znaków zapytania z my li przysz ego odbiorcy. [ 25 ]

8 ROZDZIA 1 Elementy, które ka nam my le Praktycznie wszystko, co znajduje si na stronie internetowej, mo e zmusi nas do niepotrzebnego zatrzymania si i zastanowienia. Takimi elementami s np. nazwy w asne produktów, nazwy powsta e na potrzeby marketingu, nazwy charakterystyczne dla 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 nadana przyciskowi, który prowadzi do listy wakatów, ma istotne znaczenie dla w a ciwego zrozumienia jego znaczenia. 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 zwrotu przez 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 zwrotu u ywaj od zawsze w ich wewn trznej gazetce. Zastosowane kompromisy powinny jednak zawsze by bli ej grupy wyra e oczywistych dla ka dego ni tej, która zmusza do niepotrzebnego my lenia. Innym przyk adem ród a nieko cz cych si znaków zapytania dla osób odwiedzaj cych strony internetowe s odno niki i przyciski, które nie wygl daj jak te, które mo na klikn. U ytkownik nigdy nie powinien mie cienia w tpliwo ci, czy dany element s u y do klikni cia, czy nie. [ 26 ]

9 NIE KA MI MY LE! O YCIOWYM PODEJ CIU DO FUNKCJONALNO CI 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 znak zapytania zwi ksza nasz wysi ek i rozprasza uwag. Tego typu niedogodno ci mog 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 projektanci nie przejmuj si wystarczaj co, aby tworzona przez nich strona by a przejrzysta i nieskomplikowana, mo e zniszczy nasze zaufanie do witryny i jej w a cicieli. [ 27 ]

10 ROZDZIA 1 Inny przyk ad: zanim rozpoczn wyszukiwanie ksi ek w wi kszo ci ksi garni internetowych, musz pomy le, jak to szukanie przeprowadzi 2. 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 kolejnego znaku zapytania. 2 Gdy rok temu sprawdza em, czy to wci prawda, odkry em, e niestety tak. Dopiero w tym roku wi kszo ksi gar poprawi a interfejsy swoich wyszukiwarek. [ 28 ]

11 NIE KA MI MY LE! O YCIOWYM PODEJ CIU DO FUNKCJONALNO CI W interfejsie ksi garni Amazon.com nie ma nawet rozró nienia Title-Author-Keyword (tytu -autor-s owo kluczowe). Mechanizm wyszukiwania analizuje po prostu to, 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, lub zastanawia 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ów i nakazów, któr nale a oby do czy do poka nego ju stosu innych list zwi zanych z projektowaniem stron internetowych. Najwa niejsze jest to, aby zapami ta kilka podstawowych metod eliminacji pojawiaj cych si w tpliwo ci. Je li tak si stanie, wówczas zaczniesz zauwa a na odwiedzanych stronach WWW wszystkie elementy zmuszaj ce do niepotrzebnego my lenia, a w rezultacie nauczysz si je rozpoznawa i unika ich w tworzonych projektach. [ 29 ]

12 ROZDZIA 1 Nie wszystko mo e by idealne Twoim celem powinno by takie zaprojektowanie stron, aby ka da z nich by a ca kowicie zrozumia a i atwa w obs udze dla zwyk ego u ytkownika 3. Czasami jednak zw aszcza w sytuacjach, kiedy tworzysz co oryginalnego, zwalaj cego z nóg lub bardzo skomplikowanego nie ma mo liwo ci wykreowania idealnej strony 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 prawie natychmiastowe zrozumienie zawarto ci strony. Je li nie ma mo liwo ci, aby strona by a intuicyjna, powiniene zrobi wszystko, aby przynajmniej sta a si zrozumia a. Dlaczego jest to tak wa ne? Zadziwiaj ce, ale nie dlatego, e 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ód w czasie przegl dania witryn internetowych próbuje za zaistnia sytuacj oskar a siebie, a nie odwiedzane strony. 3 Naprawd wzór Zwyk ego U ytkownika umieszczony jest w hermetycznie zamkni tej piwnicy w 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. [ 30 ]

13 NIE KA MI MY LE! O YCIOWYM PODEJ CIU DO FUNKCJONALNO CI Mo e by jednak i tak, e Twoja strona nie jest atwa do odnalezienia, a odwiedzaj cy nic 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 zmusza do my lenia o rzeczach nieistotnych, nie wymaga adnego wysi ku, podczas gdy konieczno zaprz tania sobie g owy niepotrzebnymi szczegó ami wyczerpuje energi 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 kowicie intuicyjnych lub chocia w pe ni zrozumia ych. [ 31 ]