Web-design 9789639326262, 9639326267 [PDF]

Zitiervorschau

Web-design Jákob Nielsen

W eb-design Jákob Nielsen

Információs társadalom A-tól Z-ig sorozat

A mű eredeti címe: Designing Web Usability, Jákob Nielsen © 2000 by New Riders Publishing © Hungárián translation Nyisztor Andor, Tölgyesi Zsuzsanna, Typotex, 2002

ISBN: 963-9326-26-7 ISSN: 1587 6705

Tartalom

Előszó.................................................................................................................................... 3 1.

Bevezető: Miért éppen a web-ergonómia?

...................................... 8

A művészi illetve mérnök szemlélet................................................................................. 11

Magasan van a léc...................................................................................................................... 11

A példákról.................................................................................................................................. 12 Eljött az idő ..................................................................................................................................... 13

Mi mindenről nem szól ez a könyv? ................................................................................ 13

Rossz használhatóság -> nincs vásárló..................................................................................... 14 Miért tervezi mindenki rosszul a webet? ..................................................................... 14

2.

Oldaltervezés ......................................................................................................... 16 Sáfárkodás a képernyővel .......................................................................................................18

Platform független megjelenítés ........................................................................................25

Honnan érik el a webet a felhasználók?..........................

27

Adatpaca és képszemét ............................................................................................................. 27

Az autó, mint böngésző'............................................................................................................. 28

Felbontásfüggetlen tervezés .......................................................................................... 29 Még mélyebb színmélység.......................................................................................................... 29

Szerezzünk egy nagy képernyői! .............................................................................................. 31

A hagyományostól eltérő tartalom ............................................................................... 31 A szoftvertelepítések megmaradási törvénye.............................................................. 33 Mikor szabad verziót váltani? ............................... 33 Segítőkész guruk......................................................................................................................... 35

Gyűjtsünk böngészőket!............................................................................................................. 36 A tartalom és a megjelenítés különválasztása......................................................... 36

Platformváltás............................................................................................................................ 37

Tartalomjegyzék

[i]

Válaszidők ........................................................................................................................................ 42

Az adat megmarad................................................................................................................... 43

Megjósolható válaszidők ................................................................................................ 44 A szerver válaszideje ................................................................................................................ 45

Gyors letöltés, gyors kapcsolat....................................................................................... 46 A legjobb site-ok gyorsak.......................................................................................................... 46 A felhasználók szeretik a gyors oldalakat................................................................................47 Mi is az az oldalméret?............................................................................................................. 48

Kell egy saját TI-vonal............................................................................................................. 48

Gyorsabb URL-ek...................................................................................................................... 50

Pillantás az első képernyőre .......................................................................................... 50 A HTTP ICeep-alive előnyeinek kihasználása .............................................................. 51 Linkelés .............................................................................................................................................. 51

Link leírások................................................................................. Linkcímek ............................................

60

Linkcímekre vonatkozó javaslatok ........................................................................................ 60 Már most használjunk linkcímeket! ..................................................................................... 60

Linkszínek .................................................................................. A linkekkel kapcsolatos elvárások ............................................................................... 64 A kék szín pszichológiája.......................................................................................................... 64

Kifelé mutató linkek......................................

66

Emberekre mutató linkek .....................................

66

Bejövő linkek ....................................................................................................................74 Feliratkozási és regisztrációs linkek............................................................................... 76 Reklámlinkek ......................................... 77 Stíluslapok........................................................................................................................................ 81

A design szabványosítása stíluslapokkal...................................................................... 82 WYSIWYG.................................................................................................................................. 82 Intranetes stíluslap-példák....................................................................................................... 83

A stíluslapoknak biztosan kell működniök................................................................. 84 Keretek .............................................................................................................................................. 85

......................................................................................................................... 85 Frame-ek a Netscape 2.0-ban................................................................................................. 86 Keret nélküli frame-ek............................................................................................................. 87

Érdemes-e egyáltalán bármikor is frame-eket használni? ....................................... 91 A frame-ek, mint a szerzői jog bitorlói .................................................................................. 91 Hitelesség ........................................................................................................................................ 92 Nyom tatás........................................................................................................................................ 94 Összefoglalás .................................................................................................................................. 97

[ ii ]

Jákob Nielsen: Web-design

3.

Tartalom tervezés..................................................................................................98 Hogyan írjunk a webre? ..................................

100

Mit ér egy szerkesztő?............................................................................................................. 100

Legyenek a szövegek rövidek! ..................................................................................... 101 Szókimondás a weben............................................................................................................. 101

Olvasószerkesztés ....................................... 103 Átláthatóság .................................................................................................................... 104 Miért csak átfutják?................................................................................................................ 106

Egyszerű nyelvezet........................................................................................................... 111 Oldaldarabolás ................................................................................................................. 112 Korlátozzuk az oldalon belüli linkeket! ................................................................................115 Oldalcím........................................................................................................................................... 123

Oldalcímek írása

...................................................................................................................... 124

Olvashatóság.................................................................................................................................. 125

Online-dokumentáció ............................................................................................................. 129

Screenshotok..............................................

129

Multimédia ..................................................................................................................................... 131

Automatikusan telepíthető'plug-inek..................................................................................... 131 Kliens-oldali multimédia .....................................

132

Szoftverek elterjedésének kivárása............................................................................................28 Válaszidők .................................................................................................................................... 1 34 Képek és fényképek ................................................................................................................ 134

Képkicsinyítés ................................................................................................................. 135 Anim áció ....................................................................................................................................... 1 43

Átmenetek folytonosságának bemutatása................................................................. 145 Átmenetek dimenzióinak jelzése.................................................................................. 145

Időbeli változások illusztrálása..................................................................................... 145 A kijelző' megsokszorosítása ........................................................................................146 Grafikai ábrák gazdagítása .......................................................................................... 146 Az animáció visszaüt........................................

146

Háromdimenziós struktúrák megjelenítése .............................................................. 146 Figyelemfelkeltés ........................................................................................................... 147 Videó................................................................................................................................................ 1 49

Streaming videó avagy letölthető videó .................................................................... 150 Hangok.............................................................................................................................................. 154 Multimédiás tartalom hátrányos helyzetűek számára ....................................... 155 Háromdimenziós grafika.......................................................................................................156

A 3D helytelen használata .......................................................................................... 156 Mikor használjunk 3D-t? ............................................................................................. 159 Összefoglalás ............................................................................................................................... 160

A figyelem iparága ................................................................................................................ 160 Tartalomjegyzék

[iii]

4.

[ iv ]

Site-tervezés......................................................................................................... 162 A honlap ............................................ 166 Milyen széles legyen egy webhely? .............................................................................. 174 Honlapszélesség .............................................................................................................. 174 Le a beköszönő oldalakkal! ................................................................................................ 176 Honlapok és belső oldalak.................................................................................................... 178 Mély linkelés.................................................................................................................... 179 Partnerprogramok................................................................................................................... 179 Metaforák........................................................................................................................................ 180 A bevásárlókocsi, mint felületi szabvány.................................................................... 188 Alternatív terminológia.......................................................................................................... 188 Navigáció....................................................................................................................................... 1 88 Hol vagyok? .................................................................................................................... 188 A navigáció támogatása a böngészőkben .............................................................................189 Hol jártam már? .............................................................................................................. 191 Hova mehetek innen? .................................... 191 Site-szerkezet ......................................... 198 Az alelnöki gomb ................................................................................................................... 198 A felhasználó-központú felépítés fontossága ....................................................................... 202 Szélesség vagy mélység ................................................................................................ 203 A felhasználó irányítja a navigációt ........................................................................... 214 Segítsünk a felhasználónak boldogulni a sok információval! ............................... 217 Design-teremtés avagy design-evolúció................................................................................... 218 A jövő' navigációja................................................................................................................... 221 Az eligazodás megkönnyítése........................................................................................221 Ne használjunk 3D-t a navigációra!......................................................................................222 Rész-site-ok .................................................................................................................................. 222 Keresési módszerek .................................... 224 Ne keressünk a weben!.......................................................................................................... 224 Mikro-navigáció...................................................................................................................... 225 Általános keresés .......................................... 227 Részletes keresés ...................................... 227 A keresési eredmények oldala..................................................................................... 230 Oldalleírások és kulcsszavak.................................. 231 Legyen széles a keresómezó'l.................................................................................................... 233 Nézzük meg, mire szoktak keresni! ......................................................................................237 Keresési céloldalak tervezése................................ 238 A site-ok és keresőprogramok integrációja .......................................................................... 238 URL-tervezés.................................................................................................................................. 246 Összetett domainnevek .......................................................................................................... 246

Jákob Nielsen: Web-design

A HTML-kódban teljesen adjuk meg az URL-eket! ........................................................... 247

URL-próbálgatás................................................................................................................... 248 A 0 és az 0 nem ugyanaz!.................................................................................................... 249

Archív URL-ek .............................................................................................................. 249 URL hirdetése................................................................................................................. 250 Y2KURL.................................................................................................................................. 251 Régi URL-ek támogatása................................................................................................ 251 Felhasználók által készített tartalom........................................................................... 256 Navigáció appletekkel .......................................................................................................... 256 Dupla kattintás...................................................................................................................... 258 Lassú műveletek ....................................... 259 Összefoglalás ............................................................................................................................... 259 5.

Intranet-tervezés .............................................................................................. 262 Az intranet-design megkülönböztetése az internet-designtól .................. 265 Extranet-design ......................................................................................................................... 266

Bevételnövelés a dolgozói hatékonyság növelésével............ .............................270

Átlag- vagy marginális költség.............................................................................................. 276 Intranet-portálok: a vállalati információs infrastruktúra.............................. 276

Szabaduljunk meg az e-mailtől!............................................................................................277

Az intranet karbantartása.................................. 279 Az infrastruktúra három nagy összetevője: katalógus, keresés és hírek.............. 279 Intranet-design szabványok ..............................................................................................280

Kalauz a szabványokhoz................................................................................................ 281 Intranet-design outsourcing ........................................................................................284 A dolgozók webhozzáférésének kezelése.................................................................. 284

Hardver-szabványok...................................................................................................... 285 Böngésző alapbeállítások ............................................................................................. 286 Alapértelmezett keresőprogramok ............................................................................ 288 Az intranet felhasználói tesztje .................................................................................... 289 Terepgyakorlat................................................................................................................. 290 A terepen ne készítsünk videofelvételt! ................................................................................292 Összefoglalás ............................................................................................................................ 293 6.

Hátrányos helyzetű felhasználók ...........................................................296 Web Accessibility Initiative ..............................................................................................298 A korral járó nehézségek....................................................................................................... 298

Segédberendezések ................................................................................................................ 299 Látáskárosultak ......................................................................................................................... 302

ALT-attribútumok........................................................................................................... 303

Tartalomjegyzék

[v]

Hallás-károsultak...................................................................................................................... 308 Beszédhibások ............................................................................................................................ 308 Mozgáskorlátozottak................................................................................................................ 309

Értelmi fogyatékosságok ....................................................................................................309

(Helyes)írás nélküli keresés.................................................................................................... 310 Összefoglalás: pragmatikus elvek

7.

................................................................................. 311

Nemzetközi használat: szóljunk a nagyközönséghez! ............ 312 Nemzetköziség vagy helyhezkötés ................................................................................. 315 Nemzetközi tervezés ................................................................................................................ 315 Nemzetközi bevizsgálás.......................................................................................................... 319

A domain .com-ra végződjön-e? ........................................................................................... 319 Lefordított és többnyelvű site-ok.................................................................................... 320

Nyelvválasztás................................................................................................................. 324 A fordítások legyenek könyvjelzőkbe tehetők/gyűjthetők!..................................................... 331

Többnyelvű keresés.........................................................................................................331 Regionális különbségek .......................................................................................................332 Nemzetközi felhasználói teszt .......................................................................................... 333

A nyelvi nehézségek leküzdése .................................................................................. 333 Hagyjunk többletidőt a feladatokra!..................................................................................... 334

Hány országra teszteljünk? .......................................................................................... 335 Megköszönni a résztvevőknek..................................................................................... 335 Tesztelési módszerek ............................................................................................................. 336

Magunk utazunk ........................................................................................................... 336 Hosszabbítsuk meg az utat pár nappal!................................................................................336 Távoli felhasználói teszt .................................. 337 Ergonómiai laboratóriumok a nemzetközi tesztelésre .......................................... 338 Saját tesztek.................................................................................................................................. 341 Összefoglalás ............................................................................................................................... 344

8.

Jóslatok a közeljövőre vonatkozóan: a weben az egyetlen állandó a változás................................. 346 Az internet nehéz...................................................................................................................... 348 Hosszú távú tendenciák .................................

348

Az anti-Mac felhasználói felület ............................. 351 A láthatatlan számítógép ............................................................................................. 352 Inform ációs rendszere k .......................................................................................................353

Rajzoljunk számítógépet! ............................................................................................. 353 WebTV............................................................................................................................... 354 WebTV-re tervezünk..................................... 356

[ vi ]

Jákob Nielsen: Web-design

A webböngészők halála .......................................................................................................362

Lassan növekvő sávszélesség..............................................................................................363 Metaforák a webre ................................................................................................................... 365

A telefon.............................................. ......................................................................... 366 Más médiák, más erősségekkel.............................................................................................. 366 A telefon ergonómiai problémái........................................................................................... 368 Kapcsolati zsetonok................................................................................................................ 369

A televízió ...........................................

370

A média újraszervezése: búcsú azújságoktól ........................................................ 372

A technológia által szétválasztott médiumok ....................................................................... 373 Összefoglalás ............................................................................................................................... 376

9. Összefoglalás: Az egyszerűwebtervezés ............................................378 Mesejoo weboldalák................................................................................................................ 380

Felhasználói kérdőív: mitől térnek vissza? .......................................................................... 382 Jobb, mint a valóság ............................................................................................................. 383 Legjobb vagy legrosszabb idő?....................................................................................... 388

Kattintva szavazunk ............................................................................................................. 390

Ajánlott olvasmányok ........................................................................................ 392

Név- és tárgymutató ........................................................................................... 398

Tartalomjegyzék [ víí ]

Előszó

„Hagyd abba, Jákob! Nem öngyilkosság-e kiszáradt

fadarabon közzétenni valamit,

ami a hálóról szól?" Biztos sok olvasó felteszi majd

ezt a kérdést, hát hadd válaszoljak mindenekelőtt erre!

Hibajegyzék A fizikai könyvkiadás egyik hátránya, hogy nem lehet azonnal újranyomni és terjeszteni, ha a hibák vagy a technológiai fejlődés miatt valamit módosítani kell. A hálón azonban lehe­ tőség van azonnali vissza­ jelzésekre, tehát készítet­ tem egy weboldalt, ahol a javításokat fogom közzé­ tenni. Nézze meg a http://www.useit.com/errata oldalt!

[4 ]

Ergonómiai szakértő' lévén a felhasználandó médium ki­ választásában nálam az dönt, hogy a kommunikáció célját mivel érhetem el legjobban, s nem az, hogy valamikor mi éppen a legdivatosabb. Természetesen a web remek kom­ munikációs médium (ezért is írok róla), és sok hivat­ kozással rendelkező rövid dokumentumok számára meg­ felelő (számos ilyen oldal van a weboldalámon, a www. useit.com-on). A web azonban nem felel meg olyan hoszszú dokumentumoknak, amelyek fokozatosan felépített fejtegetést tartalmaznak. Ha az ember igazán meg akar ismerni egy témát, jobb, ha egy összefüggő, a témát átfogóan tárgyaló, egyetlen szemszögből megírt értekezést olvas el, mint ha több rö­ vid, különböző nézőpontból írt elképzelések között ugrál. Vagyis egy könyv még mindig jobb a webnél, ha el aka­ rom érni a célomat: a webes tervezés ergonómiai néző­ pontjának megértetését. Három feltételnek kellene ahhoz teljesülnie, hogy ne ír­ jak több könyvet: ■ A számítógép képernyőinek annyit kell javulniuk, hogy a képernyőről olvasás ugyanolyan gyors és kényelmes legyen, mint a papírról olvasás. Biztos vagyok benne, hogy a csúcskategóriás számítógépek esetén ez már 2002-re2, a többség számára pedig 2007-re meg fog tör­ ténni, hiszen a laboratóriumokban készültek már ilyen képernyők. ■ A böngészők felületeinek kellőképpen fejlődniük kell ahhoz, hogy a weben ugyanolyan könnyen tájékozód­ junk, mint amilyen könnyű egy könyvet végiglapozni. Ezzel kapcsolatban már szkeptikusabb vagyok, hiszen manapság úgy tűnik, a böngészők készítői többet áldoz­ nak bizonyos haszontalan multimédiás és hirdetési módszerekre, mint a navigáció elősegítésére; ennek el­ lenére 2003-ra már talán használhatóbb böngészőink lesznek. ■ Az íróknak és olvasóknak hozzá kell szokniuk a nem li­ neáris információs terekhez, vagyis ahhoz, hogyan kell a hiperszöveges lehetőségeket kihasználva írni, vala­ mint úgy olvasni, hogy a lapozáson kívül ne kelljen semmin se gondolkodni. Ezen csak sok tapasztalat és jól elkészített hipertextek segíthetnek. Sajnos itt a tyúk és a tojás esete forog fenn, vagyis addig nem lesznek jó hi­ pertextek, amíg jó írók nem tanulják meg, hogyan kell ilyeneket készíteni. Számításaim szerint jó hiperszövegeket nagyobb mennyiségben 2001 körül fognak készí-

Jákob Nielsen: Web-design

A könyv külseje Egy nyomtatott könyvnek megvan az az előnye, hogy olyan oldalsávokat és egyéb, kétdimenziós elhe­ lyezési trükköket lehet használni, amilyeneket egy weboldalon nem lehet, hiszen az még mindig egy egydimenziós „tekercs" ahogyan az egyiptomiak szerették. Egy könyvbe az illusztráció­ kat és a feliratokat úgy le­ het elhelyezni, hogy azok a szöveget jobban kiegészít­ sék, mint ahogyan azt a weben meg lehetne tenni. Nem én készítettem e könyv oldaltervét, de remé­ lem, hasznosnak fogja találni.

teni, s a hangsúly ekkorra tolódik el az újdonságokkal tör­ ténő' szédítésről a felhasználói szükségletek kielégítése felé. Lehet, hogy négy évvel ezután, 2005-ben a felhasz­ nálók többsége már elég tapasztalatra tehet szert a hiper­ texttel kapcsolatban. E három tényezőt összehasonlítva az derül ki, hogy a hardvertechnológia lesz a szűk keresztmetszet, s hogy kö­ rülbelül 2007-ig kell várnunk, mielőtt a könyvek eltűn­ hetnek, hogy átadják helyüket a hálózati információnak. Régi típusú kiadók, figyelem: ez meg fog történni!

Használati útmutató a könyvhöz

A könyv, amelyet most olvas, két, a webergonómiáról szóló könyv közül az első. Két okból határoztam úgy, hogy két könyvet jelentetek meg. Először azért, mert egy olyan könyvnek semmi értelme, amit senki sem olvas el túl sok vastag könyvet láttam már porfogóként ahhoz, ne­ hogy én is ilyet akarjak írni. Egy öt centiméter vastag könyv, amely arról szól, hogyan kell Excelben kördiagra­ mokat készíteni, mindenkit visszariaszt attól, hogy egyál­ talán kinyissa azt. Talán jó érzés, hogy megvan nekünk, de sohasem olvasnánk el. Két viszonylag vékony kötetnek több esélye van, mint egy vastagnak. Másodszor azért, mert lehet, hogy nem kell minden ol­ vasónak mindkettőt elolvasnia, hiszen a Web-ergonómiát eltérő szemszögből közelítik meg. A szűkebb témáról szóló könyveket diákok és olyanok is könnyebben megenged­ hetik maguknak, akiknek csak az információ egy részére van szükségük. Nem kell sokat fizetniük egy olyan terje­ delmes írásért, aminek a felére nincs is szükség. Ez a két könyv a használható hálózati tervezés problé­ máját különböző irányokból tárgyalja. Az első a jó webol­ dalak „mit'-jéről, a második azok „hogyan"-járói szól. Mindenki szeretné azonnal megismerni a megoldást, ezért itt ezt állítottam a középpontba. Ez a könyv azt tárgyalja, amit a könnyen használható website-okról ma tudunk. Röviden összefoglalva: törekedjünk egyszerűségre, és ke­ rüljük a csillogó elrendezést! Az első fejezet a web-design fő területeivel foglalkozik: az oldaltervezéssel, tartalomtervezéssel és a site egészének felépítésével. A következő fejezetek olyan speciális terüle­ tekről szólnak, amelyek az alapokat a belső hálózatra, a hátrányos helyzetű és a nemzetközi felhasználókra

Előszó

[5]

vonatkozó szakanyagokkal egészítik ki. Ez a kötet a végén az internet és a web jövőbeli fejlődéséről ad áttekintést. A második könyv a webergonómia „hogyan"-járói fog szólni, és olyan módszereket mesél el, amelyek az első könyvben megfogalmazott állításokhoz vezettek. Azok a türelmetlen olvasók, akik csak a tényeket akarják megis­ merni, elég, ha csak ezt az elsőt olvassák el. Ha olyan ol­ dalakat tervez, amelyek követik az itt lefektetett szabályo­ kat, már biztos, hogy azok az internet legkönnyebben használható site-jai között lesznek. De ahhoz, hogy igazán jó oldalakat készítsen, további tájékoztatásra lesz szüksége saját projektjével, ügyfeleivel és igényeikkel kapcsolatban. Nem lehet elkerülni, hogy saját projektjével kapcsolatos további ergonómiai adatokat is begyújtson. Azt, hogy ezt hogyan kell megtenni, a második könyvbó'l tudhatja meg.

Jákob Nielsen Mountain View, Kalifornia

[6]

Jákob Nielsen: Web-design

A művészi illetve mérnöki szemlélet .............. 11 • •

Magasan van a léc A példákról

Eljött az idő ............13 Mi mindenről nem szól ez a könyv? ..13 •

Rossz használhatóság -> nincs vásárló

Miért tervezi m indenki rosszul a webet?..................14

Bevezető: Miért éppen a web-ergonómia1?

[1]

fejezet

A világháló sikere az ergonómiától függ. Ha a vásárló nem találja meg a terméket,

nem fogja megvenni. A web hatalommal

ruházza fel a vásárlót, aki kattintásaival mindent eldönthet. Hiszen oly egyszerűen

elmehet máshová; a világ összes vetélytárs cége egyetlen kattintással elérhető.

A felhasználóbarát szemlélet minden eddiginél fontosabb lett az internetes gazdaságban.

[ 10 ]

A 2000. januári tízmillió weboldallal (ami 2002 végére el fogja érni a százmilliót) a felhasználók minden eddiginél több választási lehetőséghez jutottak. Miért is pazarolnák idejüket olyasmire, ami bonyolult, lassú vagy nem felel meg az igényeiknek? Tényleg, miért? A megnövekedett választási lehetőségeknek köszönhetően, és mivel végtelenül egyszerű másik oldalt keresni, a háló felhasználói meglehetősen türelmetlenek lettek, gyors eredményeket akarnak. Ha nem jönnek rá rögtön, hogyan kell egy weboldalt használni, azt a következtetést vonják le, hogy nem érdemes időt pazarolni rá, és továbbállnak. Az internetes gazdaságban minden eddiginél fontosabb lett a felhasználóbarát szemlélet. Egy hagyományos termék megvásárlásakor a vevő mindaddig nem tudja pontosan felmérni, mennyire hasz­ nálható az áru, amíg ki nem fizette, és haza nem vitte. Te­ gyük fel, vesz egy videót, és rájön, hogy nehéz beállítani rajta az órát, ráadásul az sem világos, hogyan kell beprog­ ramoznia kedvenc tévéműsorának felvételére. Nincs sze­ rencséje, a gyártó pedig nevet a markába, miközben duz­ zad a zsebe. A szoftveriparnak több oka van rá, hogy használható terméket dobjon piacra, mint a hagyományos termékek gyártóinak. A szoftvereket általában egy információs köz­ pont támogatja, melyet a felhasználók felhívhatnak, ha valami hibát észlelnek. Ezek a telefonok nagyon sokba ke­ rülnek (a probléma bonyolultságától függően híváson­ ként körülbelül 30-100 dollárba), ráadásul a hívásoknak több mint a fele abból adódik, hogy a szoftver nem eléggé segíti a felhasználót. Sajnos az információs központ mű­ ködtetésének ára általában nem a fejlesztési kiadásokat növeli, ezért a fejlesztési igazgatók nem túlságosan érde­ keltek abban, hogy jobban segítsék a felhasználót. A fő­ nyereményt az időben történő szállítással lehet megütni, nem pedig az információs-részleg következő évi költség­ vetésének megnyirbálásával. A háló a feje tetejére állítja az eddigi gyakorlatot. A fel­ használók most már előbb érzékelik, hogy mennyire hasz­ nálható egy site, és csak azután kötelezik el magukat, kez­ denek el esetleg pénzt költeni, vásárolni. A képlet egyszerű: ■ A hagyományos termékek és szoftverek vásárlásakor a vásárló először fizet, és csak azután szembesül azzal, hogy mennyire használható a vásárolt termék.

Jákob Nielsen: Web-design

■ A weben a felhasználók előbb tisztázzák, hogy mennyi­ re használható az oldal, és csak azután fizetnek. Ezért fontosabb a használhatóság figyelembevétele a web megtervezésekor.

A művészi, illetve mérnöki szemlélet

Magasan van a léc A weben a versengés nem csak az adott iparágon be­ lüli cégekre korlátozódik. Mivel oldalak milliói állnak a felhasználó rendelkezésé­ re, versenyezni kell az ide­ jéért és a figyelméért is, hi­ szen a sok oldal közül azt fogja választani, amelyik leginkább megfelel elképze­ léseinek, azaz amelyik a leginkább felhasználóbarát. A vevő ugyanis így gondol­ kodik: „Ha ilyen remek kiszolgálásban van részem, pedig csak egy olcsó, ötdolláros könyvet veszek, miért ne várhatnék el legalább ilyen jó online­ szolgáltatást, mikor dol­ lárok ezreit költőm el náluk?" És ez a kérdés tényleg jogos.

A webes tervezést alapvetően kétféleképp lehet megköze­ líteni: művészi önkifejezéssel, illetve mérnöki, vevőköz­ pontú, problémamegoldó elképzeléssel. Ez a könyv hatá­ rozottan a mérnöki változat mellett teszi le a voksát. Bár elismerem, hogy szükség van művészi kivitelezésre, jópo­ fa megoldásokra és általában arra, hogy jól szórakozzunk a weben töltött idő alatt, mégis úgy gondolom, hogy egy webes projekt legfőbb célja mégiscsak az, hogy megkönynyítse a különféle gyakorlati műveletek végrehajtását. A webes tervezést meglehetősen rendszerezve közelí­ tem meg. Bemutatok több olyan módszert, melyeket bárki felhasználhat arra, hogy felmérje a felhasználók igényeit. Elmondom, hogy mi okozhat nehézséget számukra a site használata közben. Ha a web-projektet szoftverfejlesztési projektként kezeljük, egyszerűbb lesz betartani a határ­ időket és biztosítani a minőséget. Főként akkor fogunk folyamatos fejlődést elérni, ha a web-projekt alatt az ere­ deti s az újabb elképzeléseket egyaránt figyelembe vesszük, és következetesen használjuk a felhasználóbarát fejlesztés módszereit. Ebben a könyvben rengeteg szabály, alapelv, irányelv és módszer található, amelyek gyakorlati tapasztalatokból fa­ kadnak. Tudnunk kell, hogy mi válik be, ha egy hozzáértő felhasználó egy igazi műveletet akar végrehajtani a web­ en. A web korai éveitől kezdve felhasználók százait figyel­ tem meg weboldalak százainak használata közben; termé­ szetesen sok-sok olyan felhasználót is, aki másfajta háló­ zati információs rendszert, hiperszöveg-tervezést használt a 80-as évek elejétől kezdve. Nem mondom, hogy az itt leírtakat minden egyes pro­ jekt esetében szóról szóra követni kell. Egy jól képzett szakember tudja, mikor kell bizonyos szabályokat betarta­ ni, figyelmen kívül hagyni vagy akár megszegni. Először azonban mégis ismerni kell a szabályokat ah­ hoz, hogy elgondolkodhassunk azon, melyikük fogja elő­ revinni a projektet, és melyiktől érdemes eltérni. Ha úgy döntünk, hogy valamelyik irányelvtől el akarunk térni, csak akkor tegyük, ha nagyon alapos okunk van rá.

Bevezető': Miért éppen a web-ergonómia?

[ 11 ]

A példákról A könyv példaként bemu­ tatott képeihez fűzött kommentárok a weboldal aznapi állapotára vonatkoz­ nak. Mivel már jó néhány éve gyűjtök példákat, képe­ ket, mire az olvasók kezük­ be veszik ezt a könyvet, sok közülük már megváltozott - remélhetőleg a javára. Attól, hogy valamelyik itt példaként bemutatott weboldal megváltozott, a könyvbeli példa még ér­ vényes. A példák bemuta­ tásának nem célja valamely site, cég vagy tervező dicsérete, illetve földbe döngölése, hiszen minden megjelenítésnek van jó és rossz oldala is. Néha egy rossz weboldal jó oldalát mutatom be, máskor épp ellenkezőleg. A példák bemutatásának célja, hogy illusztrálják a webes meg­ jelenítésről vallott néze­ teimet és a könyvemben bemutatott módszereket, hiszen sokkal egyszerűbb egy elméletet konkrét pél­ dákon keresztül megérteni.

[lí]

A mérnöki megközelítésnek van egy nagy előnye: ami­ kor kétségek merülnek fel, vajon melyik megoldást válasszuk, feltehetünk egy empirikus kérdést, amelyre a felhasználóktól gyűjtött valódi adatok birtokában vála­ szolni is tudunk: az A vagy B megoldással jutnak-e a vásár­ lók gyorsabban információhoz? Az általános vásárlói elé­ gedettséget mérő kérdőíven a felhasználók az A vagy B megoldást értékelik jobbnak? Válasszuk azt, amelyikre többen szavaznak, ne azt, amelyet személy szerint jobban kedvelünk! A tudományos módszer lehetőségei itt természetesen véget érnek, s egy jó weboldal megtervezésekor tagadha­ tatlanul szükség van kreativitásra. Egy egyszerű, minden­ ki által követhető, a használhatóságot mérő módszer pél­ dául rávilágíthat, hogy navigációs problémák vannak a site-on, vagy hogy senki sem veszi észre a keresőgombot a honlapon. Ha ismerjük ezeket az adatokat, jobb navigá­ ciós elgondolással élhetünk, netán egy tetszetősebb, jobb helyen lévő keresőgombot nyomhatunk meg, de ehhez sem elég az egyszerű lépések sorozata, szükség van ihletre is. Ne feledjük azonban, hogy az újítás csak 10%-bán kreativitás, 90%-bán vér és verejték. Hogy használható design elkészítéséhez gyűjtsünk ötleteket, azt kell megfi­ gyelnünk, hogy a felhasználók mit szeretnek, mit találnak könnyűnek, vagy éppen hol ütköznek nehézségekbe. Ne alkossunk olyan konstrukciót, amely jól mutat ugyan, de senki sem képes használni. Ha pedig a jó tervezéshez gyűjtünk ötleteket, alkalmazzunk felhasználóbarát mű­ szaki módszereket, és vessük bele magunkat a felhaszná­ lóktól eredő adatok elemzésébe! A webes felhasználói igények nem változnak olyan gyorsan, mint a webes technológia, tehát azok a módsze­ rek és elképzelések, amelyek ebben a könyvben meg­ fogalmazódnak, még évekig érvényesek lesznek, még ha maguk a megvalósítások meg is változnak. Az itt leírt elvek az általam és mások által, a hipertext és más inter­ aktív bemutató rendszerek területén végzett kutatásokon alapulnak. Én magam az első hipertextes kutatást 1984ben végeztem, de mások már az 1960-as évektől kezdve készítettek felméréseket. Ezeknek az eredményeknek nagy része kiállta az idő próbáját. Mivel az 1980-as évek közepén kifejlesztett módszerek és az akkori eredmények az 1990-es évek végén is érvényesek, semmi okunk kétel­ kedni abban, hogy így lesz ez a XXI. században is.

Jákob Nielsen: Web-design

Eljött az idő!

Ha belelapoz ebbe a könyvbe és félreteszi, kudarcot vallot­ tam. Persze, ha úgy teszi félre, hogy el sem olvassa, telje­ sen kudarcot vallottam. Bízom benne, hogy a könyv elég­ gé tetszeni fog ahhoz, hogy legalább átfussa, mielőtt vég­ leg eldugja a könyvespolc legfelső polcára. Ennek a könyvnek az a célja, hogy megváltoztassa az Ön viselkedését. Szívem mélyén igehirdető vagyok, azt szeretném, ha a könyv elolvasása után Ön a vevőinek jobb szolgáltatást tudna nyújtani. Olyan sokat tehetünk azért, hogy megkönnyítsük a felhasználók életét! Ebben a könyvben rengeteg olyan speciális módszer található, amely egy webes projekt szinte minden szakaszában al­ kalmazható annak érdekében, hogy sokat javítsunk a fel­ használó élményén. Önnek pedig nem lehet kifogása elle­ nük, mivel legtöbbjük hihetetlenül olcsó. Nem lehet kifo­ gása az ellen sem, hogy legközelebbi webes projektjében néhányat alkalmazzon e felhasználóbarát módszerek kö­ zül, hiszen legtöbbjüket végtelenül egyszerű elsajátítani. A könyv elolvasása után Ön készen áll majd arra, hogy megtegye az első lépést. Már a következő projektben al­ kalmazhat felhasználóbarát módszereket, hiszen csak így lehet jobb a weboldala. A puszta olvasgatás nem segít, csak konkrét lépések megtételével fejlődhetünk. Ne feled­ je, maga is megteheti, hiszen bárki képes megtenni. Akkor van baj, ha sok tervező ostoba módon nem veszi figyelem­ be, hogy az oldal, amelyet készít, mennyire használható, és csupán saját elégedettségét (még rosszabb esetben csak a főnökéét) tartja szem előtt ahelyett, hogy a felhasználók igényeire lenne tekintettel. Ez a könyv Önnek tulajdon­ képpen jó hír, hiszen immár titkos fegyvert tart a kezében, amellyel saját oldalát az interneten találhatók 90%-ánál jobban tudja megtervezni - és köszönheti ezt annak, hogy a tervezők nem tudják (nem is foglalkoznak vele), hogy létezik egy egyszerű technika, amit most meg fogok Ön­ nek tanítani. Mi mindenről nem szól ez a könyv?

Ez a könyv nem szól a HTML-ről3, sem arról, hogyan raj­ zoljunk ikont, sem bármilyen más megvalósítási techno­ lógiáról. Rengeteg jó könyvet írtak már erről; én meg sem próbálom, már csak azért sem, mert igen nehéz feladat valami olyasmiről írni, ami annyira gyorsan változik, mint a webes technológiák. Önnek valószínűleg két könyvet Bevezető: Miért éppen a web-ergonómia?

[13 ]

Rossz használható­ ság -> nincs vásárló Az internetes gazdaságban egy vállalat a website-on tesz először kísérletet a vásárlók megnyerésére, mi több, az elektronikus kereskedelemben a site ma­ ga a vállalat. A felhasználói felület lesz a marketing­ anyag, a bolt belseje és kül­ seje, az eladó személyzet és az eladás utáni támogatás pedig egybeolvad. Sok eset­ ben a site maga a termék is. Tehát ha a weboldalunk nem elég felhasználóbarát, az épp olyan, mintha az üz­ letünk egy épület 17. eme­ letén lenne (ahol senki nem találja meg), csak szerdán­ ként 3-tól 4-ig lenne nyitva (amikor senki nem ér rá) és kizárólag barátságtalan el­ adóink lennének, akik nem hajlandók a vevőkhöz szólni (tehát a vásárlók nemigen vásárolnának tőlünk).

kell megvennie (a könyvkereskedők szeretni fogják ezt a részt): a jelen művet, hogy megtudja, mit kezdjen website-jával és egy, a webes technológiával foglalkozó köny­ vet, hogy megtudja, hogyan tegye fel azt a világhálóra. Azt javaslom, a fenti sorrendben olvassa el őket. Kezdje ezzel a könyvvel, mert először is azt kell felmérnie, mit akarnak a vásárlói, és hogy milyen módszerekkel tudja azt a legjobban megvalósítani. Veszélyes lehet eló'ször a tech­ nológiáról, kódolásról, elrendezésről vagy illusztrációs technikákról olvasni, mert sokan nem tudják megállni, hogy össze ne dobjanak néhány oldalt, mihelyt megtud­ ják, hogyan kell csinálni. Sajnos azonban ezeknek az ol­ dalaknak a nagy többsége használhatatlan, ha olyan em­ ber készítette, akinek, bár ismeri a HTML-1 vagy az Adobe Photoshopot, fogalma sincs a webes megjelenítésről és a felhasználók igényeiről. Nem szól ez a könyv az internetes üzleti stratégiáról, mint olyanról, bár található a könyvben jó néhány straté­ giai elképzelés is. Lehetetlenség megmondani, hogyan kell egy internetes üzletet vezetni anélkül, hogy alapos isme­ reteink lennének az iparágról és a cégről. E könyv alaptétele, hogy minden webes stratégia köz­ pontjában a vásárlóközpontúságnak kell állnia. A stratégia többi része vállalatonként különbözni fog, de az biztos, hogy egy felhasználóbarát site-tál rendelkező cég komoly előnyre tesz szert a versenytársakkal szemben, függetle­ nül attól, melyik ágazatról van szó.

Miért tervezi mindenki

rosszul a webet? A könyv alapjául olyan felhasználási tesztekről készült megfigyelések szolgálnak, amelyeket az utóbbi hat évben végzett mintegy 400, különböző háttérrel rendelkező, el­ térő website-okat használó személy. Alkalmaztam azt a tízéves tapasztalatomat is, amit még a web előtti sötét kor­ szakban szereztem, a használhatósággal, az online-infor­ mációs rendszerekkel és a hipertexttel kapcsolatban. Mióta 1994-ben elkezdtem a web-designnal foglalkoz­ ni, rengeteg hibát követtem el. Eleinte azt hittem, ezeket saját gyarlóságaimnak köszönhetem (az ember először mindig magát okolja), de miután láttam, hogy sok más vállalat ugyanazt a hibát követi el, amit én 1994-ben és 1995-ben, arra a következtetésre jutottam, hogy az első webes projektnél ezek a melléfogások elkerülhetetlenek,

[ 14 ]

Jákob Nielsen: Web-design

hacsak nem teszünk megelőző lépéseket annak érdeké­ ben, hogy elkerüljük őket. Ennek a könyvnek épp az a célja, hogy segítsen kivédeni ezeket a hibákat, hiszen azok, akik nem ismerik a múltat, arra vannak kárhoztat­ va, hogy megismételjék a melléfogásokat, de akik ismerik, azok jobban csinálhatják. A webes tervezés minden egyes szintjén gyakran talál­ kozhatunk a következő alapvető hibákkal: ■ Üzleti modell: csak Marcom-katalógusként gondolunk a világhálóra ahelyett, hogy felismernénk: alapjaiban változtatja meg az üzletek lebonyolításának módját. ■ Projektvezetés: úgy vezénylőink le egy webes projektet, mintha hagyományos vállalati projekt lenne - ez öncé­ lú designhoz és következetlen felhasználói felülethez vezet. Ehelyett egy website-ot egyetlen vásárlói felület­ projektként ajánlatos kezelni. ■ Információelrendezés: úgy építjük fel a weboldalt, hogy a cég struktúráját tükrözze vissza ahelyett, hogy a fel­ használók feladataira és az információs térről alkotott véleményükre összpontosítana. ■ Oldaltervezés: olyan oldalakat készítünk, amelyek csak a vállalaton belüli bemutató során mutatnak csodálato­ san. Az ilyen belső bemutatók nincsenek tekintettel a válaszidőre, ami pedig a használhatóság legfőbb ismér­ ve. Érdemes inkább igazi felhasználóknak tervezni, valóságos körülmények között, még akkor is, ha a be­ mutató így nem lesz annyira „csicsás". ■ Tartalomtervezés: ugyanabban a stílusban írunk, aho­ gyan megszoktuk, ahelyett, hogy az online- olvasóknak megfelelő stílusban fogalmaznánk, akiknek nagyon rövid oldalakra van szükségük, a kiegészítő informá­ ciókkal másik oldalakon, mert gyakran csak átfutják a szöveget. ■ Hivatkozási stratégia: úgy tekintjük saját site-unkat, mintha az lenne az egyetlen, anélkül, hogy megfelelő linkeket4 helyeznénk fel más oldalakra, vagy jól meg­ tervezett belépési pontokat készítenénk mások hivatko­ zásai számára. Sok cég egyáltalán nem használ megfe­ lelő linkeket, amikor a saját oldalát hirdeti. Ne felejtsük el, hogy a web a hipertexten alapul, és egyik site sem magányos sziget! A fenti esetekben a hiba abból adódik, hogy a webes projekteknél is a nem webes tapasztalatukra alapoznak. A web egy új média, s egy olyan új megközelítést kíván, amellyel e könyvben részletesen foglalkozunk.

Bevezető: Miért éppen a web-ergonómia?

[15]

Sáfárkodás a képernyővel........... 18

í E

atform független egjelenítés........ 25


í ■!................ . www.planetark.org

A frame-ek jól mutatnak egy nagy képernyőn. A gördítősávok kissé giccsesek, de megvan az az előnyük, hogy a cikkek egész listáját végiggördíthetjük úgy, hogy a site navigációs sávja és a gombok végig láthatók maradnak. [88 ]

Jákob Nielsen: Web-design

ltomé

news

download

telovlslon

actJon

exp lóriiig

Í7?fc s.'tí? fTwae posstbfc? by a £ranT ttom

(

email us

liSANITARIUM I

Pfanet Ark

Environment New: om

£

Tuesday June 17.1997 D^'ly Earth No^'í Rcglitei rpf

News and Updates

AU STR ALI A: ÉRA I o d ti ■? ■£. envn om i~i