Professional Documents
Culture Documents
PRZYKADOWY ROZDZIA
SPIS TRECI
KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG
TWJ KOSZYK
DODAJ DO KOSZYKA
CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK
CZYTELNIA
FRAGMENTY KSIEK ONLINE
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
Spis treci
Przedmowa............................................... 7
Od Autorki.............................................. 9
Wstp.................................................. 13
Podstawy projektowania interakcji z myl o uytkowniku 23
Co to jest projektowanie informacji? ......................
Kto zajmuje si projektowaniem informacji? ................
Co to jest uyteczno? ...................................
Podsumowanie ..............................................
23
31
36
42
45
47
69
71
76
78
79
82
88
89
151
153
174
179
181
185
189
194
219
220
221
226
Rozdzia 3.
Dobr zawartoci witryny
Jeli ustalie ju, kto bdzie korzysta z witryny i jakie
czynnoci bd wykonywali jej uytkownicy, moesz przystpi
do dobierania treci i zawartoci witryny. Tok postpowania
na tym etapie zaley od typu witryny, ktr projektujesz.
Jeli tworzysz witryn stanowic narzdzie, witryn, w
ktrej dominuj transakcje, zakupy przeprowadzane drog
elektroniczn czy wyszukiwanie okrelonego rodzaju informacji, przejd do rozdziau 4. (Tworzenie mapy witryny i
schematw pracy uytkownika), a nastpnie wr do tego
rozdziau po wykonaniu opisanych tam zada. Jeli jednak
gwnym celem witryny jest prezentowanie treci informacyjnych, kontynuuj czytanie tego rozdziau.
W tym rozdziale omwimy projektowanie, planowanie i ustalanie struktury zawartoci witryny. Pokaemy te, jak pomc
zleceniodawcy opracowa materiay na witryn w taki sposb,
by przypieszy proces jej produkcji. Zesp tworzcy witryn bdzie nieformalnie testowa struktur zawartoci, by
upewni si, e prezentowane treci nie tylko satysfakcjonuj docelowych uytkownikw, lecz rwnie speniaj zaoenia biznesowe zdefiniowane przez zleceniodawc (rysunek
3.1).
92
Rysunek 3.1.
Dobr zawartoci
witryny z myl o
uytkowniku
Rysunek 3.2.
Wzbud apetyt.
Powi czas na
ustalenie,
co uytkownicy
lubi, zaprezentuj
to moliwie
atrakcyjnie i
spraw,
by mieli ochot na
wicej
93
Poniej przedstawi pewne sugestie dotyczce doboru zawartoci witryny, lecz przede wszystkim zachcam projektantw
do traktowania procesu przygotowania zawartoci witryny w
taki sposb, w jaki traktuje si przygotowywanie pysznego,
eleganckiego posiku. Zwykle jest tak, e mniej znaczy
wicej. Dostarczaj uytkownikom tego, czego chc, i rb to
w zwizy sposb. Mniejsze porcje o wyszej jakoci i wieoci s bardziej satysfakcjonujce ni dua objto niszej jakoci, a w dodatku niewiea.
94
witryny, zwikszamy szanse spenienia jej zaoe biznesowych, a take uatwiamy ewentualne modyfikacje czy przeprojektowania w przyszoci, o czym powiemy w rozdziale 7.
(Dalszy proces modyfikacji, rozwoju i aktualizacji witryny).
Rozpocznij od personalizacji
Personalizacja witryny nie jest ju adn nowoci. W latach dziewidziesitych ubiegego stulecia niektre witryny oferoway uytkownikom moliwo wyboru zawartoci speniajcej ich potrzeby i dopasowanej do ich zainteresowa.
Sukces witryn takich, jak My Yahoo (http://my.yahoo.com)
jest dowodem na to, e uytkownicy lubi otrzymywa dokadnie to, czego potrzebuj, dokadnie w taki sposb, jaki im
si podoba (rysunek 3.3).
95
Rysunek 3.3.
Personalizowana
zawarto witryny.
Witryna My Yahoo
umoliwia
uytkownikowi
wybranie tego, co
chce zobaczy na
stronie
otwierajcej
Indywidualny marketing
Idc dalej tropem technik personalizacji, umoliwiajcych
uytkownikom wybr treci witryny lub sposobu jej prezentacji, trafiamy na techniki indywidualnego marketingu, polegajce na automatycznym zbieraniu informacji o upodobaniach
konkretnego uytkownika i dobieraniu dla niego indywidualnych ofert i rekomendacji (rysunek 3.4).
96
Rysunek 3.4.
Personalizowane
rekomendacje. Inn
dobr metod
personalizowania
zawartoci jest
wykorzystywanie
informacji podawany
ch
przez uytkownikw.
Zlikwidowana ju
witryna
MovieCritic.com
rekomendowaa filmy
na podstawie ocen,
jakie uytkownik
wystawia innym
filmom oraz
odpowiedzi, jakich
udziela
97
98
99
a si jednym z tych poszukiwanych miejsc, gdzie mog znale to, co ich naprawd interesuje.
Ludzie o podobnych zainteresowaniach uwielbiaj wymienia
si pogldami. Chtnie wzajemnie sobie pomagaj, przyczyniajc si do rozwoju sportw, pasji, zainteresowa i prac,
ktre uwielbiaj. Projektanci mog poczu tego ducha
i sprawi, by witryna znalaza si w centrum i staa si
nonikiem tych rozmw, dyskusji i wzajemnej pomocy.
Niestety, tego typu starania mog skoczy si fiaskiem,
jeli projektant strony internetowej nie dysponuje odpowiedni wiedz na tematy, ktrych maj dotyczy te rozmowy. Dlatego zachcam Ci do przedyskutowania tego tematu z wszystkimi czonkami zespou i osobami podejmujcymi decyzje
(reprezentujcymi zleceniodawc). Udostpnij t ksik
waciwym osobom, aby mogy one przeczyta ten rozdzia i
kilka innych fragmentw dotyczcych projektowania z myl o
uytkowniku.
W sytuacjach takich jak ta rozwaania zwizane z projektowaniem witryny internetowej zaczynaj przecina granice podziau kompanii na dziay, poruszajc obszary zwizane z
dziaami sprzeday, marketingu, promocji, komunikacji
i relacji midzyludzkich. Identyfikujc dotyczce zawartoci witryny potrzeby jej uytkownikw, warto skoordynowa
wysiki innych czonkw organizacji, ktrzy rwnie mog
wnie swj wartociowy wkad w spenienie tych potrzeb.
Innym powodem podjcia tej dyskusji moe by ch otrzymania
pomocy od ekspertw nalecych do danej organizacji, ktrzy
dysponuj materiaami, wiedz i dowiadczeniem. Przygotowujc si do spotkania powiconego zawartoci i strukturze
witryny (omawianego dalej), osoby podejmujce decyzje dotyczce w tryny rozgldaj si za rdami materiaw. Kompania
moe dysponowa archiwum porad i technik pomagajcych uytkownikom w jak najlepszym wykorzystaniu produktw lub usug.
Materiaami moe te by biblioteka magazynw, broszur i innej literatury, ktra dla odwiedzajcych witryn moe by
zot y wiedzy.
Eksperci z danej dziedziny mog te na wiele sposobw komunikowa si z odwiedzajcymi witryn. Mog na przykad tworzy list najczciej zadawanych pyta i odpowiedzi (FAQ
Frequently Asked Questions), ktra skoni uytkownikw do
ponownych odwiedzin; mog te zamieszcza w witrynie instrukcje typu jak to zrobi lub artykuy prezentujce
specyficzne techniki czy rozwizania pewnych problemw. Mog bra udzia w forum dyskusyjnym lub prowadzi dyskusj
na ywo w pokojach pogawdek. Praktycznym rozwizaniem jest
te branie udziau w dyskusjach prowadzonych w formie biuletynu. Eksperci reprezentujcy dan organizacj mog ofero-
100
101
102
Rysunek 3.7.
Zawarto
podzielona
na sekcje.
Samouczki
udostpnione
przez witryn
HotWired zostay
z rozmysem
podzielone na
sekcje, dziki
czemu
odwiedzajcy nie
czuje si
przytoczony
nadmiarem
informacji
Kada lekcja jest podzielona na cztery lub pi czci, a kada z
nich jest prezentowana na oddzielnej stronie. Kada strona jest krtka krtsza ni dwie wysokoci ekranu.
Cz nawigacyjna po lewej stronie ekranu wskazuje kontekst i ma konsekwentn budow na wszystkich stronach.
103
104
Lista sprawunkw
Na spotkanie przygotuj nastpujce pomoce:
karteczki samoprzylepne na krtkie notatki,
105
tablic i gbk,
pisaki do pisania na tablicy (w kilku kolorach),
notatnik,
komputer poczony z Internetem.
Otwarcie spotkania
Rozpocznij spotkanie od zebrania wszystkich list ycze dotyczcych zawartoci.
Kademu z reprezentantw zleceniodawcy daj bloczek karteczek samoprzylepnych i popro, aby zapisali kade z ycze
na osobnej karteczce. Zbierz je i po kolei przyklejaj na
tablicy, grupujc i czc podobne.
Podczas przyklejania kadej karteczki popro jej autora o
omwienie yczenia, aby zrozumia bez adnych wtpliwoci,
jak wyobraa on sobie dany element. Na przykad, czy historyjki bd zawieray obrazki? Jak czsto bd aktualizowane? Czy bd dostpne w archiwum witryny?
Skoncentruj si na rnych typach materiaw. Nale do nich
teksty, fotografie i ilustracje. (W pniejszym terminie
projektant oprawy graficznej przeprowadzi szczegowe spotkania, lecz ju teraz mona udzieli reprezentantom zleceniodawcy pewnych wskazwek dotyczcych objtoci i typu
ilustracji, ktre bd przygotowywali. Powinny to by oglne wskazwki bazujce na wczeniejszych badaniach i scenariuszach dziaa uytkownikw).
Oto inne typy danych, ktre warto wzi pod uwag:
wersje stron internetowych przeznaczone dla drukarki,
dokumenty w formacie Adobe PDF przygotowane do pobrania,
interaktywne elementy JavaScript,
aplety JavaScript,
animacja: animowane pliki GIF, Macromedia Flash i
Shockwave oraz Adobe LiveMotion,
strumieniowe klipy wideo: RealPlayer (.ram), Apple
QuickTime, Windows Media (.mov),
strumieniowe klipy dwikowe: RealAudio, QuickTime,
Windows Media Player, MP3, AIFF, WAV.
106
Po zidentyfikowaniu potrzebnych typw materiaw przedyskutuj, dlaczego witryna potrzebuje kadego z gwnych typw
materiaw i elementw. Zwr uwag na to, w jaki sposb
zasugerowane elementy zawartoci bd speniay podstawowe
zaoenia biznesowe witryny. Nastpnie wybierz te typy materiaw, ktre najlepiej speniaj wspomniane zaoenia.
Po osigniciu porozumienia na temat typw materiaw i
gwnych elementw treci witryny odnie te ustalenia do
realiw produkcji i budetu.
Na przykad zleceniodawca moe mie nadziej na umieszczenie
w witrynie elektronicznego katalogu prezentujcego 100 produktw. Mona to zrobi w przyjtym terminie i z przyjtym
budetem, jeli kady produkt bdzie ilustrowany tylko jedn fotografi. Jeli jednak zleceniodawca zayczy sobie dodatkowych fotografii ze zblieniami, z widokiem od tyu
oraz z charakterystykami czcymi poszczeglne produkty
(na przykad dopasowujcymi poszczeglne czci garderoby,
takie jak sukienka i kapelusz), w chwili uruchomienia witryny bdzie moliwe umieszczenie w katalogu jedynie 50 produktw. Projektant szaty graficznej powinien w takiej sytuacji okreli wymagania techniczne i budetowe zwizane z
utworzeniem ilustracji do strony kadego produktu.
107
108
109
Spis inwentarza
Popro zleceniodawc o wskazanie, ktre z wymienionych materiaw ju istniej, a ktre musz dopiero zosta przygotowane. Aby niczego nie pomin, posu si list stanowic
spis inwentarza zawartoci witryny (rysunek 3.9).
Rysunek 3.9.
Spis inwentarza.
Przygotuj list
wszystkich
materiaw
gotowych
i wymagajcych
przygotowania
Proponowana zawarto
Gotowe
Profesjonalny rozwj
Ankieta
Wymagaj
przygotowania
X
110
Mapa zawartoci
Przygotuj map zawartoci, na ktrej w trakcie produkcji
bdziesz przypisywa poszczeglne materiay konkretnym
stronom witryny. Nadaj elementom mapy nazwy i numery zgodnie ze schematem (omwionym w rozdziale 4.) i takie same
nazwy nadaj poszczeglnym plikom, aby uatwi sobie porzdkowanie i wyszukiwanie materiaw.
Stosowane formaty
Zadbaj o to, by kady z czonkw zespou dokadnie wiedzia, jakie formaty plikw bd stosowane w poszczeglnych typach materiaw: w tekcie (format dokumentw Microsoft Word lub kod HTML), w plikach obrazkw (formaty GIF,
JPEG, PICT), w plikach dwikowych (AIFF, WAV, MP3), w klipach wideo (QuickTime, etc.), w animacjach (Flash, MOV,
animowane pliki GIF). Jeli te elementy nie zostan dostarczone w odpowiednich formatach, zesp tworzcy witryn
bdzie musia powici dodatkowy czas na ich konwersj.
Podsumowanie spotkania
Wyjanij wszystkim, e ustalenia poczynione na tym spotkaniu
pomog w wygenerowaniu tabeli zawartoci (rysunek 3.10). Ta
tabela bdzie podstaw harmonogramu prac nad materiaami,
ktry zostanie opracowany przez producenta witryny. Z kolei
111
harmonogram bdzie zawiera daty dostarczenia elementw zastpczych (na przykad tekstu lub obrazkw, ktre bd jedynie wyznaczay miejsce na stronie, zanim ostateczna wersja
materiaw nie zostanie dostarczona), a take finalnych
elementw, gotowych do umieszczenia w witrynie.
Waciciel
USA
Wlk.Bryt.
news.html
T dziennie
D D X
faq.html
S kwartalnie
M M
A M
troubleshooting.html
S kwartalnie
1 AP
A M
gettingstarted.html
S kwartalnie
S w
1 JR
P D N M
N M
Samouczek:
rozwizywanie
problemw
Samouczek:
pierwsze kroki
1 AP
Osoba odpowiedzialna
Kraj docelowy
Adres URL
Nowoci
Faza
T dziennie
P D N M D tips.html
T dziennie
Wszystkie kraje
Porada dnia
Wspomaga mark
D N
Artyku
Czstotliwo aktualizacji
S tygodniowo D D X
D product.html
Marketing
Cel
Obsuga witryny
Dlaczego
Informacja
o produktach
Elementy witryny
Kiedy
Gdzie
Co
Kto
Strona gwna
feature.html
2 JR
1 EB
1 ES
Pomoc
Klucz
USA
1 AP
Gdzie: pooenie
w witrynie
112
Model liniowy
Struktura liniowa sprawdza si w przypadku procedur prezentowanych krok po kroku, ktre powinny by ogldane w okrelonej kolejnoci. Przykadem moe by proces potwierdzania zamwienia w sklepie internetowym lub aplikacja
edukacyjna, w ktrej studenci musz wykona wiczenia lub
odpowiedzie na pytania testowe w okrelonej kolejnoci
(rysunek 3.12).
113
.com) ma struktur liniow i prezentuje fotografie z wyprawy jako kolejne slajdy uoone jeden za drugim. Uytkownik
przechodzi do nastpnej lub poprzedniej fotografii, klikajc przycisk Next lub Previous (rysunek 3.13). Przycisk
Previous (poprzednia) jest umieszczony po prawej stronie
przycisku Next (nastpna) ze wzgldu na Egipcjan, ktrzy
czytaj od prawej do lewej.
Rysunek 3.13.
Liniowa struktura
witryny. Pokaz
slajdw w witrynie
Decibel Dragon ma
struktur liniow.
Uytkownicy
przechodz
pomidzy stronami
w okrelonej
kolejnoci
Model hierarchiczny
Struktura hierarchiczna sprawdza si w przypadku witryn,
ktrych celem jest umoliwianie schodzenia na coraz bardziej szczegowe poziomy informacji, jak w encyklopediach
lub leksykonach (rysunek 3.14).
Rysunek 3.14.
Hierarchiczna
struktura witryny.
Ten model
umoliwia
schodzenie
na kolejne poziomy
szczegowoci
informacji
Witryna pokazana na rysunku 3.15 jest klasyfikacj delfinw oceanicznych, wielorybw i delfinw rzecznych. Gdy
uytkownik kliknie przycisk kategorii Oceanic Dolphins, zo-
114
Rysunek 3.15.
Witryna o
strukturze
hierarchicznej.
Hipercza w tej
witrynie prowadz
do coraz wszych
grup delfinw, a
dotrzesz
do interesujcego
Ci gatunku
Model rwnolegy
Model rwnolegy pozwala zorganizowa witryn, w ktrej
prezentowane s na przykad poszczeglne linie produktw
danej firmy, przy czym kada z linii jest uoona zgodnie
z tym samym szablonem (rysunki 3.16 i 3.17).
115
Rysunek 3.16.
Rwnolega
struktura witryny.
Ten model sprawdza
si w sytuacji,
gdy trzeba
zaprezentowa
wiele rnych
elementw
opisywanych przez
podobne
charakterystyki
Rysunek 3.17.
Rwnolega
struktura witryny.
Witryna Decibel
Dragon stosuje
model rwnolegy,
prezentujc
fotografie miast
San Francisco i
Bejrut.
Indeks i strony z
fotografiami s
zbudowane w
oparciu o ten sam
schemat,
co pozwala
przewidzie
dziaanie
poszczeglnych
elementw
nawigacyjnych
Model swobodny
Model swobodny pozwala zorganizowa witryn poruszajc
kilka tematw o wsplnym wtku lub punkcie odniesienia (rysunek 3.18). Na przykad w witrynie podrniczej sekcja powicona Egiptowi mogaby zawiera strony dotyczce historii, kuchni, kultury, muzyki, atrakcji turystycznych, pogody
itp. Wszystkie te tematy s istotne dla podrnikw, jednak
nie sposb uoy ich w struktur hierarchiczn, ani w se-
116
Rysunek 3.18.
Struktura swobodna
witryny. Ten model
pozwala
zorganizowa kilka
swobodnie
powizanych
ze sob tematw
Witryna
The
Plumb
Design
Visual
Thesaurus
(www.visualthesaurus.com) prezentuje swobodny tok mylowy.
Odwiedzajcy widzi sowa, ktre przesuwaj si w kierunku
rodka ekranu, a po klikniciu wok nich radialnie rozchodz
si sowa pokrewne (rysunek 3.19). Interfejs ten jest przykadem struktury swobodnej, nieustannie dopasowujcej si
do dziaa uytkownika poprzez wyrodkowanie kadej nowo
wybranej myli.
Rysunek 3.19.
Struktura swobodna
witryny. Witryna
The Plumb Design
Visual Thesaurus o
strukturze
swobodnej
umoliwia
wybr pokrewnych
sw
i odnalezienie
tego,
ktre interesuje
uytkownika
117
Alfabetycznie
Alfabetyczne uoenie elementw uatwia wyszukanie okrelonego elementu, jeli znamy jego nazw lub tytu. Kolejno
alfabetyczna moe te by uzupenieniem innego schematu organizacji.
Na przykad, gdy znamy nazwy producentw kapeluszy, moemy
je uoy w takiej kolejnoci:
Bowler
Cap
Fedora
Witryna Zagat (www.zagat.com) prezentuje list restauracji,
ktrych nazwy s uoone alfabetycznie (rysunek 3.20).
Rysunek 3.20.
Alfabetyczny
schemat
organizacji.
Czasem zwyke
abecado jest
najlepszym
narzdziem
organizacji
zawartoci
witryny,
szczeglnie w
przypadku,
gdy uytkownik zna
nazwy elementw,
ktrych poszukuje
118
Chronologicznie
Przykadami zastosowa dla chronologicznego schematu organizacji mog by yciorysy, listwy czasowe historii czy archiwa (rysunek 3.21).
Portier przyjmujcy goci mgby uoy kapelusze zgodnie z
czasem przybycia poszczeglnych goci:
13:01
13:05
13:15
119
Rysunek 3.22.
Organizacja wedug
pooenia
geograficznego.
Witryna Gymboree
(www.gymboree.com)
prezentuje oferty
posad
posegregowane
wedug pooenia
geograficznego
Wedug cechy
Piwa mona uoy od najciemniejszego do najjaniejszego,
za sosy od najbardziej agodnego do najbardziej pikantnego.
Nakrycia gowy mona uoy wedug ich wielkoci od najmniejszego do najwikszego:
Beret
Czapka z daszkiem
Kapelusz kowbojski
Mona je te uoy wedug ceny od najtaszego do najdroszego:
120
Wedug kategorii
Poszczeglne elementy mona posegregowa w kategorie, identyfikowane przez wyrniajc je waciwo (rysunek 3.24).
Na przykad ksika telefoniczna jest uporzdkowana wedug
kategorii, dziki czemu atwo mona znale numer telefoniczny lekarza, nawet jeli nie zna si jego nazwiska.
Rysunek 3.23.
Organizacja wedug
wybranej cechy. Ta
sekcja witryny
Peapod pozwala
uytkownikom
uporzdkowa
elementy wedug
wielkoci
opakowania, ceny
za jednostkow
objto
i ceny sumarycznej
Rysunek 3.24.
Organizacja wedug
kategorii. Witryna Zagat
umoliwia wyszukanie
restauracji wedug
ssiedztwa, serwowanej
kuchni bd
alfabetycznie w obrbie
danego miasta
121
Wedug zada
Metafora pulpitu w komputerze jest inspirowana przez
czynnoci biurowe wykonywane na biurku lub w jego pobliu,
takie jak pisanie, porzdkowanie, segregowanie czy wyrzucanie dokumentw. Z kolei proces zamawiania produktw w
sklepie internetowym naladuje rzeczywiste czynnoci wykonywane w trakcie zakupw w fizycznie istniejcym sklepie.
Witryna GM BuyPower (www.gmbuypower.com) wykorzystuje schemat organizacji wedug zada (rysunek 3.25). Bazuje on na
zadaniach zwizanych z poszukiwaniem, porwnywaniem, sprawdzaniem i kupowaniem samochodu.
122
Hierarchicznie
Zawarto witryny moe te by uporzdkowana wedug hierarchii informacji. Struktura taka moe by wska i gboka,
czyli skada si z zaledwie kilku sekcji oferujcych wiele
stron ze szczegami.
Struktura informacji moe te by szeroka i pytka, z wieloma sekcjami skadajcymi si z zaledwie kilku stron kada (rysunek 3.27). Tak struktur mona atwo rozbudowywa, dodajc strony do poszczeglnych sekcji.
Rysunek 3.27.
Organizacja
hierarchiczna.
Witryna MPM3.net
posiada szerok,
pytk,
hierarchiczn
struktur
informacji,
podzielon na
cztery sekcje.
Mona j atwo
rozbudowa,
dodajc strony do
poszczeglnych
sekcji
Wedug metafory
Metafory sprawiaj, e witryna, ktra jest dla uytkownika
zupenie nowa, jest dla niego zrozumiaa, poniewa odnosi
si do poj lub abstrakcji, ktre ju zna.
Witryny korzystaj z trzech podstawowych typw metafor. Metafory organizacyjne polegaj na podziale zawartoci na kategorie, metafory funkcjonalne wi si z wykonywanymi zadaniami, natomiast metafory wizualne dotycz wszystkiego
tego, co uytkownik widzi.
123
Metafory organizacyjne
Wikszo sklepw z artykuami spoywczymi dzieli ywno
na takie same kategorie, czyli stosuje taki sam system organizacji. Jogurt i ser zawsze znajdziesz w dziale nabiau, czosnek w dziale warzywnym, za drodwk w dziale wypiekw.
Podczas tworzenia witryny Peapod zastosowano metafor organizacyjn i model konceptualny sklepu spoywczego, naladujc go w postaci elektronicznej. Kategorie i nazwy dziaw
s takie same, jak w rzeczywistym sklepie spoywczym (rysunek 3.28).
Rysunek 3.28.
Metafory
organizacyjne.
Witryna Peapod
naladuje
rzeczywisty sklep
spoywczy
Metafory funkcjonalne
Gdy chcesz znale ksik w fizycznie istniejcej bibliotece, moesz przeszuka katalog, przejrze zawarto pek lub
poprosi o pomoc bibliotekarza. Witryny internetowe bdce
elektronicznymi bibliotekami rwnie oferuj uytkownikom
te opcje.
Witryna
biblioteki
Los
Angeles
Public
Library
(www.lapl.org) pozwala przeszuka katalog wedug sowa
kluczowego, autora, tematu, tytuu lub numeru porzdkowego
(rysunek 3.29). Ponadto pozwala ucili poszukiwania przez
podanie formatu (nagranie dwikowe, klip wideo, mapa i inne) oraz jzyka.
124
Rysunek 3.29.
Metafory
funkcjonalne.
Witryna biblioteka
Los Angeles Public
Library
funkcjonuje w
podobny
sposb, jak
tradycyjna
biblioteka
pozwala stosowa
te same metody
poszukiwania, a
nawet poprosi
bibliotekarza
o pomoc
Metafory wizualne
Internetowa ksika telefoniczna z adresami firm i numerami
ich telefonw jest koloru tego, dziki czemu tworzy skojarzenie z tymi stronami fizycznie istniejcej ksiki
telefonicznej. W witrynie stanowicej internetowy sklep spoywczy narzdzia nawigacji wygldaj jak brzowa papierowa
torba pena zakupw, za elementy w koszyku s wywietlane
w dziurkowanym notesiku podobnym do tych, ktre s tak chtnie uywane przez gospodynie domowe do robienia listy sprawunkw.
Przed
przeprojektowaniem
witryna
Encyclopedia
(www.encyclopedia.com) korzystaa z dosownej wizualnej metafory encyklopedii. Uytkownicy mogli nawigowa w encyklopedii, klikajc obrazki tomw na pce, za poszczeglne menu wyglday jak strona indeksowa ksiki (rysunek 3.30).
125
Rysunek 3.30.
Metafory wizualne.
Oto przykad
witryny, w ktrym
zastosowanie
bezporedniej
metafory wizualnej
okazao si bdem
nie pomaga ona,
lecz przeszkadza
w korzystaniu z
internetowej
encyklopedii.
Obrazek
przedstawiajcy
tomy encyklopedii
na pce nie jest
tak czytelny, jak
cza
z poszczeglnymi
literkami,
zajmujce mniej
miejsca i szybciej
pojawiajce si
na ekranie
(pokazane
na rysunku 3.31)
126
Rysunek 3.31.
Przeprojektowana
witryna
Encyclopedia. Nowy
projekt wzmacnia
pozytywne
postrzeganie marki
tej encyklopedii i
minimalizuje
liczb odnonikw
do liter alfabetu,
ktre w
poprzedniej wersji
wypeniay cay
ekran.
Wygospodarowane
miejsce na ekranie
suy do
prezentacji wielu
funkcji witryny,
w tym przydatnego
mechanizmu
wyszukiwania
i dziennych
aktualizacji
127
128
Rysunek 3.32.
Metafory
zastosowane
w witrynie Peapod.
Witryna internetowa
moe korzysta
z kilku rnych
metafor i ich
kombinacji, w
zalenoci
od przeznaczenia
poszczeglnych
sekcji.
W tym przypadku
metafory
organizacyjne
uatwiaj
odwiedzajcym
wybieranie
produktw
spoywczych.
Na przykad
szarlotk
uytkownik znajdzie
klikajc ikony
Bakeshop (dzia
wypiekw),
nastpnie Desserts
(desery) i wreszcie
Pies (ciasta).
Uoenie produktw
wedug wybranej
cechy pozwala
uytkownikom
przeanalizowa
takie ich
waciwoci, jak
wielko, cena,
zawarto tuszczu,
zawarto cukru,
kaloryczno i inne
129
4.3.
Numery telefonw
4.3.1. USA
4.3.1.1. Zarzd
4.3.1.2. Dzia
marketingu
4.3.1.3. Dzia
projektowy
4.3.1.4. Dzia rozwoju
4.3.2. Europa
4.3.2.1. Zarzd
4.3.2.2. Dzia
marketingu
4.3.2.3. Dzia
projektowy
130
2.4.
Powiadomienia
3.
Wskazwki dotyczce stylw
3.1.
Tworzenie stylu
3.2.
Specyfikacje dotyczce
projektowania informacji
3.3.
Wskazwki dotyczce
oprawy graficznej
3.4.
Specyfikacje HTML
4.
Informacje o firmie
4.1.
Regiony sprzeday i
marketingu
4.1.1. USA
4.1.2. Europa
4.1.3. Azja
4.2.
Schematy organizacyjne
4.2.1. Zarzd
4.2.2. Dzia marketingu
4.2.3. Dzia projektowy
4.2.4. Dzia rozwoju
Sprawd rezultaty
Nie zapomnij sprawdzi uzyskanych rezultatw dotyczcych zawartoci witryny (rysunek 3.33). Przede wszystkim sprawd
plany dotyczce poniszych kwestii:
Typy materiaw
Kategorie zawartoci
Nazwy poszczeglnych kategorii
Struktura spisu treci
Rysunek 3.33.
Przetestuj nazwy
elementw
i struktur.
Zawsze testuj
rezultaty, by mie
pewno,
e uytkownicy
pozytywnie na nie
zareaguj
131
132
133
Podsumowanie
Tre witryny musi wspomaga mark organizacji, jej
polityk marketingow, sprzeda, relacje z klientami i
programy komunikacji.
Daj uytkownikom moliwo personalizacji lub
modyfikowania zawartoci oraz wygldu witryny. Zastosuj
marketing indywidualny, aby odwiedzajcy widzieli to, co
chc widzie, wtedy, kiedy chc i w taki sposb, w jaki
chc to zobaczy.
Zaprojektuj, zaplanuj i opracuj mechanizmy, ktre
zaangauj uytkownikw witryny jako wsptwrcw jej
zawartoci. Zapro ich do wyraania opinii na temat
witryny, aby mg nieustannie dopasowywa projekt i
sprawia, by by coraz bardziej praktyczny, wygodny i
atrakcyjny.
Opracuj spis treci witryny, prezentujcy proponowan
struktur i materiay. Przeprowad testy z
reprezentatywnymi uytkownikami, wprowadzajc poprawki
na podstawie ich uwag.
Osignij konsensus w sprawie zawartoci witryny z
osobami podejmujcymi decyzje, reprezentujcymi
zleceniodawc. Dopiero, gdy to zrobisz, bdziesz mg
przej do nastpnego etapu.