Darmowy fragment publikacji:
Tytuł oryginału:
Tłumaczenie: Piotr Cieślak z wykorzystaniem fragmentów książki „Nie każ mi myśleć! O życiowym
podejściu do funkcjonalności stron internetowych. Wydanie II” w tłumaczeniu Krzysztofa Jurczyka
ISBN: 978-83-246-9274-3
Authorized translation from the English language edition, entitled:
DON’T MAKE ME THINK, REVISITED: A COMMON SENSE APPROACH TO WEB USABILITY
Third Edition; ISBN: 0321965515; by Steve Krug; published by Pearson Education, Inc,
publishing as New Riders Publishing.
Copyright © 2014 by Stephen Krug
All rights reserved. No part of this book may be reproduced or transmitted in any form
or by any means, eklectronic or mechanical, including photocopying, recording or by any
information storage retrieval system, without permission from Pearson Education, Inc.
Polish language edition published by HELION S.A.
Copyright © 2014.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu
niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą
kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym
lub innym powoduje naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź
towarowymi ich właścicieli.
Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje
były kompletne i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie,
ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich.
Wydawnictwo HELION nie ponosi również żadnej odpowiedzialności za ewentualne
szkody wynikłe z wykorzystania informacji zawartych w książce.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/nieka3
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
• Kup książkę
• Poleć książkę
• Oceń książkę
• Księgarnia internetowa
• Lubię to! » Nasza społeczność
SPIS TREŚCI
PRZEDMOWA O nowym wydaniu
WSTĘP
Przeczytaj najpierw to
Pozwól, że odkaszlnę i wyjaśnię parę spraw
PODSTAWOWE ZASADY
ROZDZIAŁ 1 Nie każ mi myśleć!
Pierwsze prawo funkcjonalności Kruga
ROZDZIAŁ 2
Jak naprawdę korzystamy z internetu?
O przeglądaniu, zadowalaniu się i radzeniu sobie
ROZDZIAŁ 3
Elementarz projektanta billboardów
Projektowanie stron do przeglądania, a nie do czytania
ROZDZIAŁ 4 Zwierzę, roślina czy rzecz?
Dlaczego użytkownicy lubią podejmować wybory
niewymagające myślenia?
ROZDZIAŁ 5
Pomijaj zbędne słowa
Lapidarność na usługach internetu
SPRAWY, O KTÓRE MUSISZ SIĘ ZATROSZCZYĆ
ROZDZIAŁ 6 O znakach drogowych i okruszkach
Projektowanie nawigacji
ROZDZIAŁ 7
Projektowanie stron WWW
a teoria Wielkiego Wybuchu
Sugerowanie ludziom właściwego działania i wyjaśnianie,
dlaczego to takie ważne
[ 4 ]
6
12
20
30
40
54
60
66
96
Kup książkęPoleć książkęSPIS TREŚCI
JAK SIĘ UPEWNIĆ, ŻE NAPRAWDĘ CI SIĘ UDAŁO
ROZDZIAŁ 8 O trudnej przyjaźni między farmerem
a hodowcą bydła
Dlaczego większość kłótni o funkcjonalności jest stratą czasu i jak ich unikać
114
ROZDZIAŁ 9
Testowanie funkcjonalności za grosze
Czyli lepiej prościej, lecz częściej
ISTOTNE PROBLEMY I WPŁYWY Z ZEWNĄTRZ
ROZDZIAŁ 10 Wielka mobilizacja, czyli świat w kieszeni
Witamy w XXI wieku. Niektórzy z Państwa mogą poczuć
lekkie zawroty głowy
ROZDZIAŁ 11 Funkcjonalność jako życzliwość
Dlaczego Twoja strona powinna być zwyczajnie ludzka
ROZDZIAŁ 12 Kwestia dostępności
Myślisz, że wszystko już widziałeś, aż tu nagle przelatuje kot
z posmarowaną masłem kromką chleba, przywiązaną do jego grzbietu
ROZDZIAŁ 13 Przewodnik błądzących
Jak nieść kaganek funkcjonalności, by się nie poparzyć
Podziękowania
Skorowidz
122
154
178
188
200
210
214
[ 5 ]
Kup książkęPoleć książkę3
Elementarz
projektanta
billboardów
PROJEKTOWAnIE STROn DO PRZEGLĄDAnIA,
A nIE DO CZyTAnIA
ROZDZIAŁKup książkęPoleć książkęNie bierz setką/Tego zakrętu
Nie lubimy/Tracić klientów/Burma-Shave!
— CYKL PRZYDROŻNYCH TABLIC REKLAMUJĄCYCH
KREM DO GOLENIA, CIRCA 1935
M ając na uwadze, że goście Twojej strony tylko ją przeglądają, musisz
zatroszczyć się o kilka istotnych spraw, aby mieć pewność, że dostrzegą i zrozumieją
wszystko to, czego potrzebują, a także w jak największej mierze to, na czym zależy Tobie:
¢ Przestrzegaj utartych konwencji.
¢ Utwórz czytelną hierarchię elementów.
¢ Podziel stronę na funkcjonalne obszary.
¢ Wyraźnie wyróżnij elementy, które można kliknąć.
¢ Ogranicz chaos na stronie do minimum.
¢ Opracuj treść tak, by ułatwiała szybkie przeglądanie.
Przestrzegaj utartych konwencji
Jedna z najlepszych metod na ułatwienie odbiorcy zrozumienia intencji autora, nawet
jeśli ów odbiorca bardzo się spieszy, polega na przestrzeganiu istniejących konwencji —
powszechnie stosowanych albo utartych standardów. Oto przykłady:
¢ Znaki STOP. Zważywszy na to, jak ważne jest, by kierowcy
dostrzegali je i poznawali na pierwszy rzut oka, z dużej odległości,
niezależnie od warunków pogodowych i oświetleniowych, trudno nie
docenić faktu, iż znaki STOP niemal wszędzie wyglądają tak samo.
(Owszem, w różnych krajach dzielą je drobne różnice, ale zasadniczo
projekt tych znaków jest praktycznie identyczny na całym świecie).
W tym przypadku konwencja obejmuje charakterystyczny kształt,
napis „STOP”, bardzo zauważalny kolor (kontrastujący z niemal
każdym naturalnym otoczeniem), standardowy rozmiar, wysokość
i umiejscowienie.
[ 41 ]
Kup książkęPoleć książkęROZDZIAŁ 3
¢ Prowadzenie samochodu. Wyobraź sobie, że chcesz wypożyczyć samochód i nie
wiesz, czy pedał gazu będzie się znajdował po prawej stronie albo czy klakson będzie
jak zwykle na kierownicy.
W ciągu minionych dwudziestu lat wiele utartych schematów projektowania stron
WWW uległo zmianie. Jako użytkownicy nauczyliśmy się oczekiwać wielu rzeczy,
na przykład:
¢ W jaki sposób będą rozlokowane typowe elementy strony. Na przykład logo albo
symbol serwisu powinny się znajdować w lewym górnym rogu (przynajmniej w tych
krajach, w których czyta się od strony lewej do prawej), natomiast główne elementy
nawigacji będą umieszczone poziomo u góry bądź po lewej stronie.
¢ Jak funkcjonują pewne mechanizmy. Na przykład niemal wszystkie sklepy
internetowe posługują się metaforą „koszyka” i są wyposażone w podobne
formularze, umożliwiające określenie metody płatności, adresu dostawy itd.
¢ Jak wyglądają poszczególne
elementy. Wiele elementów
stron ma charakterystyczny,
typowy wygląd, na przykład
ikony symbolizujące,
że mamy do czynienia
z materiałem wideo, ikona
wyszukiwania czy przyciski
prowadzące do serwisów
społecznościowych.
Powstały też pewne konwencje
dotyczące konstruowania
różnych rodzajów stron WWW
— sklepów, szkół, blogów,
restauracji, filmów, etc. —
ponieważ strony w każdej z tych kategorii pełnią bardzo podobne funkcje.
SomeSlightlyIrregular.com
cityislandmovie.com
Tego rodzaju standardy nie wzięły się znikąd — wszystkie zaczęły swoje życie jako
czyjś błyskotliwy pomysł. Jeśli jakiś pomysł się sprawdzi, to inni projektanci zaczynają
powielać go na kolejnych stronach, aż wreszcie użytkownicy opatrzą się z nim na tyle,
że nie wymaga wyjaśnień.
[ 42 ]
Kup książkęPoleć książkęELEMEnTARZ PROJEKTAnTA BILLBOARDÓW
Chcesz dowodów na
to, że przestrzeganie
konwencji pomaga?
Popatrz na tę stronę:
choć zapewne nie
rozumiesz z niej ani
słowa, to łatwo się
domyślasz, jaka jest
rola poszczególnych
elementów, gdyż
zostały zaprojektowane
według utartych norm
Poprawnie użyte,
zwyczajowe normy ułatwiają
użytkownikom życie,
gdyż pozwalają uniknąć
ciągłego zastanawiania się,
do czego służy to czy owo
i jak należy postępować na
odwiedzanych stronach.
Z konwencjami jest
jednak pewien problem —
projektanci raczej niechętnie
się do nich odwołują.
Zamiast skwapliwie
wykorzystywać konwencje, autorzy stron WWW
niejednokrotnie próbują ponownie wynaleźć koło.
Powodem tego jest najczęściej ich przekonanie
(niesłuszne), że zostali zatrudnieni, aby zrobić
coś nowego i innego, a nie powielać istniejące
rozwiązania. Nie wspominam już o fakcie, że
pochwały przełożonych, nagrody czy oferty dobrej
pracy rzadko biorą się z powodu „najlepszego
wykorzystywania konwencji”.
KOŁO
Przyznawanie patentu w toku: 48082 p.n.e., 48022 p.n.e.,
42639 p.n.e., 36210 p.n.e., 30599 p.n.e., 28714 p.n.e.,
28001 p.n.e., 19711 p.n.e., 15690 p.n.e., 15689 p.n.e.,
15675 p.n.e., 15674 p.n.e. …
Zdarza się, że czas spędzony nad powtórnym wymyślaniem koła prowadzi do
rewolucyjnego odkrycia nowego urządzenia tocznego. Częściej jednak jest to po prostu
strata czasu.
Jeśli zamierzasz wprowadzać innowacje, powinieneś zdawać sobie sprawę z wartości
tego, co zamierzasz zastąpić (jak powiedziałby Bob Dylan: „Żeby żyć ponad regułami,
musisz być pewien, czego chcesz”), tymczasem utartych schematów bardzo często się
nie docenia. Doskonałym przykładem są niestandardowe paski przewijania. Za każdym
razem, gdy projektant decyduje się na opracowanie od zera własnych, nietypowych
pasków przewijania — na ogół po to, by były ładniejsze — rezultat niemal zawsze
niezbicie dowodzi tego, że autor nie zdawał sobie sprawy, ile setek albo tysięcy godzin
pracy wymagała ewolucja standardowych, systemowych pasków.
[ 43 ]
Kup książkęPoleć książkęROZDZIAŁ 3
Jeśli nie chcesz korzystać z utartych schematów, musisz się upewnić, że to, czym
zamierzasz je zastąpić, jest co najmniej tak intuicyjne — czyli równie dobre — jak
rozwiązanie, z którego zrezygnowałeś, bądź jest to rzecz na tyle nowatorska, że warto
poświęcić trochę czasu, żeby się jej nauczyć.
Mam dla Ciebie następującą radę. Wprowadzaj innowacje, gdy jesteś pewny, że masz
lepszy pomysł, a w przeciwnym razie wykorzystuj istniejące konwencje.
Nie zrozum mnie źle — w żadnym razie nie zamierzam Cię zniechęcać do
kreatywności. Uwielbiam innowacyjne, oryginalne projekty stron WWW.
Jednym z moich ulubionych przykładów jest serwis Harlem.org. Cały projekt
został opracowany na bazie słynnego zdjęcia Arta Kane’a z sierpnia 1957 roku,
przedstawiającego 57 jazzmanów pozujących przed kamienicą w Harlemie. Zamiast
odsyłaczy tekstowych albo menu nawigacja została skonstruowana właśnie w oparciu
o tę fotografię.
Kliknięcie w wybranym
miejscu zdjęcia…
…otwiera stronę ze spisem
widocznych tam ludzi…
…z poziomu którego można wyświetlić
szczegółowe informacje na ich temat
To rozwiązanie jest nie tylko intuicyjne i ciekawe, ale też przystępne i łatwe w obsłudze.
A ponieważ twórcy mieli świadomość tego, że po jakimś czasie ta nietypowa forma
może się znudzić, zaproponowali także
alternatywną, konwencjonalną metodę
nawigacji w oparciu o kategorie.
Zasadniczo możesz — a wręcz
powinieneś — być tak twórczy
i innowacyjny, jak tylko chcesz, a także
uatrakcyjniać projekt, jak tylko uznasz
za stosowne, dopóki jesteś pewien, że jest
on nadal praktyczny w obsłudze.
I jeszcze kwestia konsekwencji.
Informacje o muzykach
można przeglądać także
na podstawie nazwisk,
instrumentów i stylów jazzu
[ 44 ]
Kup książkęPoleć książkęELEMEnTARZ PROJEKTAnTA BILLBOARDÓW
Często się słyszy, że konsekwencja, spójność, to sprawy nadrzędne. Wiele sporów na
temat projektów kończy się argumentem w rodzaju: „Nie możemy tego zrobić. To
wprowadziłoby niespójność”.
Do spójności projektu strony WWW albo aplikacji rzeczywiście warto dążyć. Jeśli
na przykład kontrolki nawigacji zawsze wyglądają tak samo i znajdują się w jednym
miejscu, to użytkownik nie musi tracić czasu na poszukiwania i zastanawiać się nad ich
obsługą. Ale w pewnych przypadkach drobna niekonsekwencja może się przyczynić do
poprawienia przejrzystości projektu.
Proponuję zapamiętać następującą regułę:
PRZEJRZYSTOŚĆ JEST WAŻNIEJSZA OD KONSEKWENCJI
Jeśli za sprawą wprowadzenia drobnej niekonsekwencji możesz znacznie poprawić
przejrzystość, postaw na to drugie.
Utwórz czytelną hierarchię elementów
Następnym ważnym sposobem na ułatwienie odbioru strony wiecznie spieszącemu się
użytkownikowi jest zapewnienie odpowiedniego wyglądu wszystkim elementom strony,
tak aby wszelkie zależności między tymi elementami były wyczuwane intuicyjnie.
Użytkownik musi być pewny, które elementy są najważniejsze, które mają podobne
znaczenie, a które wchodzą w skład innych. Innymi słowy, każda strona powinna być
skonstruowana według wyraźnej, czytelnej hierarchii.
[ 45 ]
Kup książkęPoleć książkęROZDZIAŁ 3
Strony zaprojektowane zgodnie z tą zasadą mają trzy charakterystyczne cechy.
¢ Im coś jest ważniejsze, tym bardziej się
wyróżnia. Najważniejsze nagłówki mogą być
napisane na przykład większą lub pogrubioną
czcionką, wyróżnione kolorem; można też
oddzielić je pustą przestrzenią od reszty
zawartości lub umieścić bliżej górnej krawędzi
strony.
Bardzo ważne
Trochę mniej ważne
Zupełnie mało ważne
¢ Elementy powiązane ze sobą logicznie muszą
być powiązane również w sposób wizualny.
Elementy, które są do siebie podobne, można
umieścić w jednej grupie pod odpowiednim
nagłówkiem, sformatować podobnym stylem
lub umiejscowić w osobnej części strony.
Książki
Muzyka
Filmy
Gry
¢ Elementy powinny być wizualnie
„zagnieżdżone”, aby ich przynależność była
wyraźnie określona. Przykładowo nagłówek
działu („Książki informatyczne”) powinien
znajdować się powyżej tytułu danej pozycji
w tym dziale (konkretnej książki) i wizualnie
obejmować cały obszar treści strony, co
wskazuje, że jest to dział dotyczący tylko
pozycji danego typu (różnych książek). Z kolei
tytuł książki powinien obejmować wszystkie
elementy ją opisujące.
Książki informatyczne
Konkretna książka informatyczna
bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla,
24,95 zł
Inna książka informatyczna
bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla,
19,95 zł
[ 46 ]
Kup książkęPoleć książkęELEMEnTARZ PROJEKTAnTA BILLBOARDÓW
Stosowanie hierarchii wizualnej to nic nowego. Na każdej stronie gazety codziennej
wykorzystywane są techniki takie jak wyróżnianie elementów, grupowanie
i zagnieżdżanie — ma to na celu wizualne uporządkowanie treści, zanim jeszcze
zaczniemy ją czytać. To zdjęcie dotyczy tego tekstu, ponieważ oba łączy ten nagłówek.
Ten artykuł jest najważniejszy, ponieważ posiada największy nagłówek i został
umieszczony w najważniejszym miejscu na stronie.
Nagłówek
obejmujący te
cztery kolumny
wyraźnie oznacza,
że wszystkie
wchodzą w skład
jednego artykułu
Po wielkości nagłówka
łatwo się zorientować,
że jest to najważniejszy
artykuł na stronie
Każdy z nas codziennie ma do czynienia z tego rodzaju hierarchiami i podświadomie je
analizuje. Dzieje się to jednak tak szybko, że zdajemy sobie z tego sprawę tylko wtedy,
gdy nie możemy tego zrobić — kiedy wskazówki wizualne (lub ich brak) zmuszają nas
do myślenia.
Prawidłowo zastosowana hierarchia wizualna polega na wstępnym przetworzeniu
strony; zorganizowaniu i uporządkowaniu jej zawartości w taki sposób, że możemy
ją przyswoić błyskawicznie i niemal bez wysiłku.
Gdy jednak strona nie posiada prawidłowo zbudowanej hierarchii wizualnej —
np. wówczas gdy wszystko wygląda na jednakowo ważne — jesteśmy zmuszeni
do samodzielnego przeglądania strony w poszukiwaniu odpowiednich wyrazów
i zwrotów, a potem
ułożenia własnego
obrazu tego, co
jest najważniejsze
i jak wszystko jest
zorganizowane.
Wymaga to o wiele
większego nakładu
pracy z naszej strony.
Książki
Muzyka
Filmy
Gry
Książki
Muzyka
Filmy
Gry
Książki informatyczne
Książki informatyczne
W tym przypadku nieprawidłowa
hierarchia wizualna sugeruje, że
wszystkie główne działy serwisu
należą do działu „Książki
informatyczne”
Odpowiednie umiejscowienie
nagłówka poprawia
czytelność zależności
[ 47 ]
Kup książkęPoleć książkęROZDZIAŁ 3
Analizowanie projektu, którego hierarchia wizualna jest choć w niewielkim stopniu
wadliwa — na przykład nagłówki obejmują elementy niezwiązane ze sobą — jest
jak czytanie niedbale zbudowanego zdania („Bill kupił stary samochód do spółki ze
stryjem, którym dojeżdża do pracy”).
Mimo że najczęściej nie mamy większych problemów ze zrozumieniem tego rodzaju
zdań, to jednak niechlujny szyk słów na chwilę wytrąca z rytmu i niepotrzebnie zmusza
do zastanowienia się.
Podziel stronę na funkcjonalne obszary
W idealnym przypadku użytkownicy mogą na każdej prawidłowo zaprojektowanej
stronie WWW zagrać z łatwością w internetową wersję amerykańskiego teleturnieju
$25 000 Pyramid1. Chodzi mi o to, że gdy wstępnie rozejrzą się po stronie, bez
problemów powinni po wskazaniu różnych jej obszarów opisać ich przeznaczenie:
„Opis zawartości strony!”, „Odnośniki do artykułów dnia!”, „Lista produktów firmy!”,
„Rzeczy, które chcą mi sprzedać!”, „Pasek ułatwiający nawigowanie na stronie!”.
Dzielenie strony na obszary jest bardzo ważne, ponieważ pozwala użytkownikom na
szybkie podjęcie decyzji, na których częściach strony mają się skupić, a które mogą
bezpiecznie pominąć. Wyniki badań polegających na śledzeniu wzroku użytkownika
sugerują, że ludzie bardzo szybko podejmują decyzję o tym, które części zawierają
potencjalnie przydatne informacje, wskutek czego prawie nigdy nie interesuje ich
pozostała zawartość — omijają ją tak, jakby w ogóle nie istniała. (Skrajnym przykładem
może być całkowite zobojętnienie na reklamy; swoista „banerowa ślepota” — zdolność
do ignorowania treści, które prawdopodobnie mają charakter promocyjny).
Wyraźnie wyróżnij elementy, które można kliknąć
Ponieważ użytkownicy internetu najczęściej szukają kolejnej rzeczy, którą można
kliknąć, ważne jest, aby bardzo wyraźnie oznaczyć takie elementy.
Podczas przeglądania strony szukamy różnorodnych sugestii wizualnych,
umożliwiających znalezienie obiektów, które da się kliknąć (albo „stuknąć”
1 Teleturniej polegał na tym, że jeden z uczestników dostawał opis jakiejś kategorii, powiedzmy,
„przedmioty, które kojarzą się z hydraulikiem”, i próbował naprowadzić partnera na jej trop, dając
konkretne przykłady („klucz francuski, urządzenie do cięcia rur, majtki wystające spod roboczych
drelichów…”).
[ 48 ]
Kup książkęPoleć książkęELEMEnTARZ PROJEKTAnTA BILLBOARDÓW
w przypadku ekranów dotykowych). Takimi wyróżnikami mogą być kształty
(przyciski, zakładki itp.), położenie (na przykład w menu) oraz formatowanie (kolor
i podkreślenie)2.
Proces poszukiwania w wyglądzie rzeczy wskazówek, które ułatwiają domyślenie
się ich zastosowania, nie ogranicza się do stron internetowych. Niezwykle zabawnie
i przystępnie pisze o tym Don Norman w swojej niedawno
zaktualizowanej, klasycznej już książce pod tytułem The Design
of Everyday Things. Okazuje się, że nieustannie szukamy takich
wskazówek w naszym otoczeniu (na przykład na podstawie wyglądu
klamek staramy się domyślić, czy drzwi należy ciągnąć, czy pchać).
Tę książkę warto przeczytać. W życiu nie spojrzysz już na drzwi
w ten sam sposób.
Od samego początku istnienia internetu kwestia łatwości identyfikacji aktywnych
elementów na stronach WWW to pojawiała się, to odchodziła w cień.
1995
2000
2005
2010
Prehistoria
Większość stron jest
projektowana przez
programistów,
którzy korzystają ze
standardowych
odsyłaczy tekstowych
HTML oraz przycisków
Możliwość ich
kliknięcia nie budzi
wątpliwości, ale
wieje nudą…
Dziki Zachód
Sfrustrowani ograniczeniami
narzuconymi przez
sieciowe standardy
(nieliczne fonty, brzydkie
podkreślenia) projektanci
z doświadczeniem
w poligra(cid:25)i zaczynają
używać obrazków
przedstawiających napisy
w charakterze odsyłaczy
Często ciężko się domyślić,
co można kliknąć
Złota era
CSS zapewnia eleganckie rozwiązanie:
zastosowanie jednego koloru (bez podkreśleń)
dla wszystkich aktywnych odsyłaczy
Użytkownicy przyzwyczajają się do tego
schematu. I super!
2 Ludzie często bazują na tym, że w przeglądarce WWW kursor po wskazaniu odsyłacza zamienia się
ze strzałki na rączkę. To jednak wymaga przesuwania kursora po ekranie, co trwa stosunkowo długo.
Poza tym ta metoda nie sprawdza się w przypadku urządzeń z ekranami dotykowymi, w których
kursora po prostu nie ma.
[ 49 ]
Kup książkęPoleć książkęROZDZIAŁ 3
W rozdziale 10. przekonasz się jednak, że omawiany problem ponownie daje o sobie
znać w świecie projektów mobilnych.
Zasadniczo nie powinieneś mieć problemów, jeśli będziesz używał jednego koloru dla
wszystkich odsyłaczy tekstowych i zadbasz o to, by kształt oraz położenie pozostałych
odnośników sugerowały, że da się je kliknąć. Unikaj szkolnych błędów w rodzaju
zastosowania tego samego koloru dla odsyłaczy i nieaktywnych nagłówków.
Ogranicz chaos na stronie do minimum
Jednym z największych wrogów stron internetowych jest graficzny chaos.
Użytkownicy w różnym stopniu tolerują zawiłość i chaos; niektórym szum wizualny
na stronie nie sprawia żadnego problemu, ale dla wielu innych jest szalenie irytujący.
Znam historię użytkowników, którzy naklejali na monitorze karteczki samoprzylepne,
żeby zasłonić denerwujące animacje, przeszkadzające im w skupieniu się na tekście.
Istnieją trzy rodzaje zakłóceń utrudniających przeglądanie treści.
¢ Krzyk. Gdy każdy element znajdujący się na stronie próbuje zwrócić na siebie
uwagę odbiorcy, efekt może być przytłaczający: same oferty kupna, mnóstwo
wykrzykników, różnych krojów pisma i rażących kolorów, dużo hałasu i krzyku!
Automatyczne pokazy slajdów, animacje, wyskakujące okienka i niekończący się
strumień nowych reklam!
Prawda jest taka, że nie da się zaakcentować wszystkiego. Krzyk jest na ogół
następstwem niepodjęcia trudnej decyzji o tym, jakie elementy strony rzeczywiście
są ważne, i rezygnacji ze stworzenia wizualnej hierarchii, która pokieruje
użytkownika do kluczowych aspektów strony.
¢ Dezorganizacja. Niektóre strony wyglądają jak mieszkanie po splądrowaniu
przez rabusiów: wszystko jest porozrzucane dookoła. Świadczy to o nonszalancji
projektanta, który nie wyrównał poszczególnych elementów strony do siatki kolumn
i wierszy.
¢ Przeładowanie. Wszyscy chyba znamy strony — zwłaszcza strony główne — które
są przeładowane. Efekt przypomina skrzynkę pocztową zapchaną po brzegi mailami
i biuletynami z serwisów internetowych, których autorzy wyszli z założenia,
[ 50 ]
Kup książkęPoleć książkęELEMEnTARZ PROJEKTAnTA BILLBOARDÓW
że jedne odwiedziny upoważniają do zalewania odbiorcy stosem niechcianej
korespondencji. W takim chaosie trudno znaleźć naprawdę istotne wiadomości.
Inżynierowie nazywają takie zjawisko małym odstępem sygnału od szumu: mnóstwo
hałasu, niewiele konkretnych informacji, a te, które są, zostały zagłuszone.
Podczas projektowania stron WWW dobrze jest wyjść z założenia, że wszystko
jest wizualnym szumem (podejście typu „winny, dopóki nie udowodni swojej
niewinności”), i pozbyć się wszystkiego, co niewiele wnosi do projektu. W świetle
ograniczonego czasu i uwagi użytkownika każdy nadmiarowy element jest
zwyczajnie zbędny.
Opracuj treść tak, by ułatwiała szybkie przeglądanie
Sporo czasu — być może nawet większość — spędzanego na stronach WWW internauci
poświęcają na przeglądanie tekstu w poszukiwaniu jakiejś informacji.
Sposób formatowania
tekstu może im to
zdecydowanie ułatwić.
Oto najważniejsze
kwestie, które warto
uwzględnić, aby Twoje
projekty sprzyjały
szybkiemu przeglądaniu:
Którą z tych
stron wolałbyś
przejrzeć?
¢ Stosuj wiele nagłówków. Dobrze napisane, przemyślane nagłówki rozsiane
w tekście działają jak nieformalny konspekt albo spis treści strony. Informują
odbiorcę, czego się może spodziewać w danych akapitach albo — jeśli są mniej
dosłowne — intrygują i zachęcają do czytania. Tak czy owak, ułatwiają czytelnikowi
podjęcie decyzji o tym, czy dany fragment warto przeczytać albo choć przejrzeć, czy
lepiej go pominąć.
Zasadniczo staraj się stosować więcej nagłówków, niż uważasz za konieczne, i nie
żałuj czasu na ich opracowanie.
[ 51 ]
Kup książkęPoleć książkęROZDZIAŁ 3
Zatroszcz się też o właściwe sformatowanie śródtytułów. Poniżej opisałem dwie ważne,
często jednak pomijane kwestie dotyczące zastosowania stylów.
Jeśli używasz kilku stopni
nagłówków, koniecznie opracuj
je tak, by nie można było ich
pomylić. Możesz to osiągnąć
poprzez powiększenie tekstu
proporcjonalnie do stopnia
nagłówka lub pozostawienie
większej ilości miejsca ponad nim.
Źle
Lepiej
I druga sprawa, nawet ważniejsza
— nie pozwól, żeby nagłówki
„pływały” w tekście. Zadbaj o to,
by znajdowały się bliżej akapitu, który poprzedzają, niż tego, po którym następują.
To naprawdę sprawia ogromną różnicę.
Lepiej
Źle
¢ Ogranicz długość akapitów. Długie akapity stawiają czytelnika przed czymś, co
Caroline Jarrett i Ginny Redish, specjalistki od projektowania i funkcjonalności
stron, nazywają „ścianą tekstu”. Są przytłaczające, utrudniają użytkownikowi
przebrnięcie przez materiał i są trudniejsze do przejrzenia niż kilka osobnych,
krótszych akapitów.
Być może uczono Cię, że każdy akapit powinien zaczynać się od zdania
wprowadzającego, mieć rozwinięcie i zakończenie, ale czytanie w internecie rządzi
się innymi prawami. Nawet pojedyncze zdania dobrze jest czasem wyodrębnić
w postaci akapitu.
Jeśli przyjrzysz się długiemu akapitowi, niemal zawsze wpadniesz na jakiś sensowny
pomysł podzielenia go na dwie części. Spróbuj nabrać takiego nawyku.
¢ Używaj list. Wyjdź z następującego założenia: niemal wszystko, co da się
przedstawić w postaci listy, zapewne dobrze byłoby właśnie tak opracować. Przejrzyj
tekst pod kątem serii pozycji
rozdzielonych przecinkami
albo średnikami, a być może
znajdziesz fragmenty nadające
się do tego rodzaju przeróbki.
Lepiej
Źle
[ 52 ]
Kup książkęPoleć książkęELEMEnTARZ PROJEKTAnTA BILLBOARDÓW
W celu poprawienia czytelności nieznacznie zwiększ zwykłe odstępy pomiędzy
punktami na liście.
¢ Wyróżnij ważne pojęcia. Przeglądanie stron polega w dużej mierze na szukaniu
kluczowych słów i określeń. Wyróżnienie najważniejszych haseł przez pogrubienie
pierwszego wystąpienia ułatwia ich lokalizację. (Jeśli są to zarazem odsyłacze,
to oczywiście sam styl odsyłacza powinien wystarczyć jako wyróżnienie). Nie
wyróżniaj jednak zbyt wielu rzeczy, bo zmniejszysz skuteczność tej metody.
Jeżeli chcesz poznać od podszewki techniki formatowania
treści ułatwiające jej przeglądanie (a także wiele innych
zagadnień związanych z publikowaniem tekstu na ekranie),
to poszukaj (najbliższego!) urządzenia podłączonego do
internetu i zamów książkę Ginny Redish pod tytułem Letting
Go of the Words.
A przy okazji zamów jeszcze jeden egzemplarz dla kogoś, kto
pisze, redaguje albo w dowolny inny sposób jest związany
z cyfrową publikacją treści. Zaskarbisz sobie jego dozgonną
wdzięczność.
[ 53 ]
Kup książkęPoleć książkę50 milisekund na ocenę
strony, 102
A
affordances, 163
agile, 14
akapity, 52
aktualne położenie, 89
wyróżnienie, 90
aktualności, 98
alt, 196
analiza
ilościowa, 131
jakościowa, 131
projektu, 157
architektura informacji, 15, 201
ASketch, 171
autoreklama, 98
B
badania fokusowe, 124
zastosowanie, 125
banerowa ślepota, 48
bieżąca lokalizacja, 90
błędy obsługi, 186
Brundlefly, 174
C
chaos, 50
Clear, 168
czołówka, 62
czytniki ekranu, 195
D
dezorganizacja, 50
dokonywanie wyboru, 58
dostępność, 189
obawy programistów, 191
obserwacje użytkowników
niepełnosprawnych, 195
poprawianie, 194
sprawdzanie poprawności
kodu, 193
usuwanie przeszkód, 194
wprowadzanie zmian, 196
źródła, 196
dowiedz się więcej, 105
Skorowidz
E
ekspercka analiza
funkcjonalności, 13
elementy
obniżające poziom
zaufania, 182
zmuszające do myślenia, 24
zwiększające poziom
zaufania, 184
elementy strony
które można kliknąć, 48
powiązane logicznie, 46
rozlokowanie, 42
ważność, 46
wygląd, 45
wyróżnianie, 48
zagnieżdżenie, 46
eliminowanie wątpliwości, 27
etykiety, 111
F
facilitator, 134
formatowanie treści, 53
formularze, 79
opisy pól, 208
zwiększenie dostępności, 197
Frequently Asked
Questions, 185
funkcjonalność, 10, 19, 206
a projektowanie, 201
aplikacji mobilnych, 167
definicja, 167
przekonywanie o wartości, 202
właściwości, 19
G
gadka szmatka, 62
graficzny chaos, 50
H
hierarchia elementów, 45
cechy stron, 46
hierarchia treści, 75
hierarchia wizualna, 47
logo, 80
nazwa strony, 87
hover, 164
[ 214 ]
I
idea istnienia strony, 105
idea projektu, zrozumienie, 38
identyfikacja aktywnych
elementów, 49
identyfikator serwisu, 107
innowacje, 43
instrukcje, 63
użytkowania aplikacji, 169
interfejs użytkownika, 163
spłaszczanie, 164
intuicyjność, 28
J
jesteś tutaj, 89, 94
K
kamera Brundlefly, 174
kategorie, 81, 94
klikanie, uciążliwość, 55
klonowanie, 173
kłótnie o funkcjonalności, 115
antidotum, 121
osobiste przyzwyczajenia, 117
zawodowe pasje, 118
kompromis, 157, 192
komunikaty, 166
konsekwencja, 44
konsultant funkcjonalności, 13
kontrast, 197, 208
konwencje, 41
konstruowania stron, 42
nawigacja, 44, 76
wykorzystywanie, 43
wyszukiwarka, 83
korzystanie z internetu, 31
krzyk, 50
kursor, 164
L
lean, 14
liczba kliknięć, 55
listy, 52
często zadawanych pytań, 185
kategorii, 82
wad funkcjonalnych, 150
z przydatnymi łączami, 82
Kup książkęPoleć książkęSKOROWIDZ
logo serwisu, 79, 105
atrybuty, 80
strona główna, 82
Ł
łatwość
dostępu, 189
zapamiętywania, 171
łącza
do strony głównej, 82
do strony wyszukiwania, 83
M
mały odstęp sygnału
od szumu, 51
manipulowanie, 206
misja, 97, 107
Mobile First, 159
motto, 109
N
nagłówki, 51
HTML, 197
umieszczanie, 209
narzędzia
pomocnicze, 81
sprawdzające poprawność
kodu, 193
nauka aplikacji, 168
nawigacja, 44, 67
definicja, 74
funkcje niedoceniane, 75
globalna, 78, 81
hierarchia, 81
kluczowe elementy, 78
konwencje, 76
lokalna, 94
na niższych
poziomach, 85
okruszkowa, 91
podstawy, 70
stała, 78, 82
test, 94
wielopoziomowa, 85
wygląd, 77
nazwa serwisu, 79, 94
nazwa strony, 86, 94
odnośnik, 88
zasady, 87
nie każ mi myśleć, 21
normy zwyczajowe, 43
NPS, 181
O
obserwator, 135
obszary funkcjonalne, 48
odnośniki, 25
przejdź do głównej treści
strony, 197
odsyłacze, 53, 55
główne, 81
narzędzia pomocnicze, 82
odwiedzone, 209
serwisy mobilne, 162
ograniczenia, 157
okazje, 98
okienka podpowiedzi,
wyskakujące, 59
określanie własnego
położenia, 75
opisy tekstowe, 197
opracowanie treści, 51
optymalizacja wyborów, 35
osoby niepełnosprawne, 190
P
Paper, 168
pierwsze wrażenia, 102
podejmowanie decyzji, 34
pomoc dla użytkownika, 59
wątpliwości, 59
podkategorie, 81
podpowiedzi, 59, 164
podstrony, projektowanie, 104
pojemnościowy ekran
dotykowy, 164
pola wyszukiwarki, 83
położenie na stronie, 89
powiększanie, 162
poziom zaufania, 180
obniżanie, 182
zwiększanie, 184
poziomy hierarchii, 84
separatory, 92
prawa funkcjonalności
jednoznaczne wybory, 55
lapidarność, 61
nie każ mi myśleć, 21
proces obsługi strony, 70, 72
projektowanie interakcji, 15
[ 215 ]
projektowanie stron
na urządzenia mobilne, 156
schematy, 42
projekty
mobilne, 159
płaskie, 164
przeładowanie, 166
skalowalne, 161
prowadzący, 134
przeciążenie reklamowe, 112
przeglądanie stron, 32, 41
szybkie, 51
użytkownicy, 71
zakłócenia, 50
przeglądarka, 36
przejrzystość projektu, 45
przeładowanie, 50, 166
przestrzeganie konwencji, 41
przestrzeń internetowa, 73
przeznaczenie serwisu, 106
przyciski, 25
pytania nieoczywiste, 58
R
radzenie sobie, 36
efektywność, 38
rejestracja, 98
reklama
funkcjonalności, 98
zawartości, 98
ROI, 202
S
samouczek, 170
satisficing, 34
selekcja, 32
serwisy mobilne, struktura, 160
skalowalność, 161
skłonność do zmian, 29
skróty, 98
slogan reklamowy, 105, 107
cechy, 108
słowa klucze, 33
smartfony, 155
SoundHound, 168
spotkanie podsumowujące, 149
spójność projektu, 45
standardy, 41
starcie kultury reklamy i kultury
rzemiosła, 119
Kup książkęPoleć książkęSKOROWIDZ
strona główna, 74
idea istnienia serwisu, 103, 105
łącza do strony, 82
od czego zacząć, 110
pierwsze odwiedziny, 101
projektowanie, 97, 100
promowanie rzeczy, 111
punkty startowe, 111
utrudnienia, 99
wymagania, 99
zawartość, 97
znaczenie, 104
struktura hierarchii, 84
style, zastosowanie, 52
sugestie wizualne, 48
system instruktażowy, 169
system nawigacji, 67, 78
system pomocy, 169
szukanie, 73
najlepszych rozwiązań, 35
szum wizualny, 50
Ś
ściana tekstu, 52
ścieżki powrotu, 91
zasady poprawnej
implementacji, 92
śródtytuły, 52
T
tekst
alternatywny, 196
drobny, 208
powitalny, 105
teoria
Wielkiego Wybuchu, 101
zagłady stada, 112
testowanie, 126
funkcjonalności, 13
mobilne, 172
skrypt, 137
stron konkurentów, 136, 204
tradycyjne podejście, 129
w początkowej fazie
projektu, 127
zdalne, 152
bez prowadzącego, 152
zwiększanie dostępności, 194
testy
dostępności, 189
nawigacji, 95
testy funkcjonalności, 121
a badania fokusowe, 125
cele, 206
częstotliwość, 130
kiedy testować, 136
liczba uczestników, 131
manipulacje, 206
miejsce przeprowadzenia, 134
na urządzeniach mobilnych,
użytkownicy
mit zwykłego użytkownika,
120
nastawieni na przeglądanie, 71
nastawieni na wyszukiwanie,
70
oczekiwania, 42
testowanie funkcjonalności,
131
172
najważniejsze informacje, 126
obserwatorzy, 135
pierwszy, 37
pokazowe, 126
problemy, 149
programy rejestrujące, 134
prowadzący, 134
próbowanie, 152
przebieg, 138
przykładowa sesja, 139
sposoby przeprowadzania, 152
spotkanie podsumowujące,
136, 149
we własnym zakresie, 127, 131
werbowanie uczestników, 133
wybór uczestników, 132
wymówki, 153
zadania, 136
znaczenie, 124
tooltips, 59
tożsamość, 97
U
UCD, 201, 202
uczestnicy testów, 132
werbowanie, 133
udogodnienia wizualne, 163, 165
Ulubione, 74
urządzenia mobilne, 155
mała przestrzeń życiowa, 159
testowanie funkcjonalności,
172
wydajność, 166
Usability and User Centered
Design, 201
User Experience Design, 10, 201
UserTesting.com, 152
UX, 201, 202
UXD, 10, 201
użyteczność, 201
[ 216 ]
W
wady funkcjonalne, 14, 131
usuwanie, 150
ważne pojęcia, 53
wersje do wydruku, 186
weryfikacja poprawności
kodu, 193
wskaźniki, 90
Wstecz, 74
wstępne decyzje, 58
wybory optymalne, 34
wygoda obsługi, 186
wyrażenia oczywiste, 24
wyróżniki, 49
wyszukiwarka, 83
Z
zachwycający, 167
zadowalanie się, 34
zakładki, 92
forma graficzna, 93
zakłócenia, 50
zakres wyszukiwania, 83
zapach informacji, 55
zasady
jak coś działa, 36
postępowania internauty, 32
zbędne słowa, 61
zgadywanie, 35
zmiana rozmiaru tekstu, 189
zrozumienie zasady
działania, 37
zwięzłość, 61
zwinne zarządzanie
projektem, 14
zwrot z inwestycji, 202
zwykły użytkownik, 120
Ż
życzliwość, 180
Kup książkęPoleć książkęKup książkęPoleć książkę
Pobierz darmowy fragment (pdf)