Web design Oldalak
Krug első szabálya • Don’t make me think! • Ne kelljen gondolkozni! – Amikor ránézünk egy web oldalra, legyen • Egyértelmű • Evidens • „Önmagyarázó”
– Ha a felhasználónak erőfeszítést jelent egy feladat elvégzése akkor van még mit javítani
Első szabály másképpen • Ha ránézünk egy web oldalra, akkor az jusson eszünkbe, hogy – Aha ez a ... – Itt találhatók a ... – És ott van amit keresek ...
Első szabály másképpen Ajánlatok? Termékek
De … Hol vannak a termékek?
Mi ez a szöveg?
Hová tudunk navigálni Innen?
Gondolkodtatás Ha munkát keresnénk az Interneten… Gondolkodtat
Egyértelmű Munka Click!
Foglalkoztatási lehetőségek Hmm, ja, munka Click!
Éppen lehet munkalehetőség. Keresek tovább?
Másik probléma a gombokkal Melyik látszik gombnak, amire kattinthatunk?
Nem kell messzire menni …
A lényeg • Minden apró részlet mely gondolkodást kíván hozzáadódik a mentális munkánkhoz – Néha nem túl sok, de összeadódnak és egyszer csak elegünk lesz belőle
Könyv keresés. A Quick search valószínűleg ugyanaz mint a keresés. (?)
A legördülő menüből kell valamit választanom? Csak annyit tudok, hogy Tom Clancy írta a Könyvet.
Valószínű a kulcsszó nem lesz jó
Válasszuk azt hogy szerző (author)
Gépeljük be a nevet
Amazon Elsőként vezette be: Keresek… Könyvet …
Csak gépeljük be aminek szerintünk leginkább Értelme van
Mai oldalak
Ami egyértelmű kell legyen • • • • •
Hol vagyunk? Hol kezdjem? Hová tették a …? Mik a legfontosabb részek az oldalon? Miért úgy hívták hogy?
• De igazából lehetőleg minden legyen egyértelmű!
Miért is kell ez? • Az interneten a versenytárs csak egy kattintásnyira van. • A frusztráció miatt sokszor otthagyjuk az oldalakat
Ahogy tervezzük az oldalakat Szeretnénk ha a felhasználók mindent átnéznének
Ahogy a felhasználók használják Csak rápillantanak részekre • A tekintetük ugrál ahogy egy érdekesebb részt meglátnak • Vagy valamilyen keresett dolgot Megtalálnak és rá lehet kattintani
A web élet 1. szabálya • Nem olvasunk el oldalakat, inkább csak átvizsgáljuk, átszaladunk rajta (scan) – Általában sietünk, időt akarunk megtakarítani – Tudjuk hogy nem kell mindent elolvasni, az oldalakon található információnak csak egy része kell nekünk – Így csináljuk már a kezdetektől • Magazinok, újságok olvasása esetén is
Ez a következménye … Amit a kutyának mondunk: Oké Ginger, elegem van. Maradj távol a szeméttől. Megértetted Ginger? Maradj távol a szeméttől vagy! Amit ők ebből megértenek: blah blah Ginger blah blah blah blah blah blah blah blah Ginger blah blah blah blah blah … © Gary Larson, Far Side
Amit a tervező lát
Amit a felhasználó lát
Kifejezésekre, szavakra koncentrálunk amit keresünk vagy Speciális kifejezésekre mint: Free, Ingyenes, Kiárusítás, Sex
A web élet 2. szabálya • Nem hozunk optimális döntéseket, csak megpróbáljuk teljesíteni a kívánságainkat – Első elfogadható opciót el is fogadjuk • Ha találunk egy linket ami odavezet ahova mi szeretnénk eljutni, akkor ki is választjuk
Tanulmány tűzoltókról • Racionális döntés kérdése – Információt összegyűjteni – Azonosítani a lehetséges megoldásokat – A legjobbat választani
• Valóságban – – – –
Nincs opciók összehasonlítása Az első elfogadható megoldást választották Gyors ellenőrzés van-e vele valami probléma, Ha nincs azt választották
Miért az első elfogadható opció • Általában sietünk – Optimalizálás nehéz és sok időt igényel
• Itt nincs büntetés ha mégis rosszul választunk – Back gomb – Feltételezve, hogy gyorsan töltődik az oldal
• Az opciók figyelembe vétele nem biztos hogy javít a helyzeten – Rosszul tervezett oldal esetén
• Találgatni szórakoztató – Ha sikerül akkor gyorsabb és – Véletlen elem is megjelenik
A web élet 3. szabálya • Nem gondoljuk végig hogyan működnek a dolgok, hanem inkább keresztül vergődünk rajta – Technológia esetén soha nem olvassuk el az instrukciókat hanem inkább neki állunk és találgatások alapján kezdjük el használni
Új felhasználók nem tudják eldönteni hová gépeljék be a web címet
Miért van így? • Nem annyira fontos számunkra a dolog… – Sokunkat nem érdekel hogyan működnek a dolgok
• Ha valami egyféleképen már működött akkor legközelebb is ugyanúgy fogjuk használni
Ezek után az 5 legfontosabb szabály • • • • •
Hozzunk létre tiszta vizuális hierarchiát Támaszkodjunk a konvenciókra Osszuk fel az oldalt egyértelmű területekre Tegyük egyértelművé mire lehet kattintani Csökkentsük a „zaj” mértékét
Vizuális hierarchia • A legfontosabb legyen kiemelve
Legfontosabb Kevésbé fontos Annyira nem fontos
Vizuális hierarchia Nincs fókusz pont, Nincs grafikus szerkezet
Vizuális hierarchia • Összetartozó dolgok vizuálisan is alkossanak csoportot Könyv Zene Sport Utazás Hobbik
Vizuális hierarchia Érzékelés az idő múlásával
idő
Vizuális hierarchia • Vizuális egymásba ágyazás mutatja, hogy mi minek a része Számítástechnikai könyvek Programozás könyv Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah
Vizuális hierarchia • Minden újság használta és használja
Támaszkodjunk a konvenciókra • Mindenki megtanulta hogyan érdemes újságot olvasni – Megtanultuk a különböző konvenciókat – Ha külföldön is jártunk, akkor láthattuk hogy ott is ugyanolyanok az újságok
Új konvenciók 50 évig megvoltunk a transzparens logók nélkül Mindenki átvette
Web konvenciók • Hasznosak – Sok web lapon ugyanaz a navigálási lehetőség – „Biztonságot” adnak
• Tervezők gyakran nem akarnak igazodni hozzá – Szeretik újra felfedezni a „kereket” – Mondván valami „új” létrehozására vették fel őket
Osszuk fel az oldalt egyértelmű területekre • Rámutatva különböző területekre meg kell tudni mondani, hogy … – – – – –
Ezt csinálhatom az oldalon Ezek a fő események Ezt árulja a cég Ezt akarják nagyon eladni nekem …
Konzisztencia • Alkalmazzuk ugyanazokat a szabályokat minden oldalra (perzisztens navigáció) • Ebben az esetben az ismétlés nem unalmas
Oldal mérete • Gyakori hiba, hogy túl nagy oldalt tervezünk – A mi monitorunk a „legnagyobb” – De nem mindekié
Oldal mérete • Grafikailag biztonságos terület (safe area) – Minimum képernyő méret – Nyomtatható méret
• Ha mindkét irányba görgetni kell akkor nem tűnik nagyon professzionálisnak az oldal
Oldal hossza • Befolyásoló tényezők: – – – –
Oldal és képernyő méretek közötti viszony A dokumentum tartalma On-line vagy nyomtatott verziónak szántuk Látogató által használható sávszélesség
• Az olvas dezorientáltak lesznek, ha nem látják a címet, oldal azonosítóját (erről később)
Oldal hossza • Mindig csak egy képernyőnyit fog látni a felhasználó
Oldal szerkezet • A probléma – A HTML kitalálói soha nem gondolták, hogy ezt „page layout”-ra (elhelyezésre) fogják használni – Ilyesmire tervezték:
Oldal szerkezet • A web egy flexibilis médium – Nincs úgy rögzítve mint a nyomtatott sajtó – A kinézet függ: • Képernyő mérete és felbontása • Színmélység • A browser ablak mérete, beállításaitól
Oldal szerkezet • Cascading Style Sheet-t gondolták a megoldásnak – Page layout-ra, pozícionálásra, egymásra helyezésre – De a különböző implementációs problémák még ma is okozhatnak gondot
• HTML táblák (TABLE) is használható és használják is
Oldal szerkezet • Sor hossz – A retinának csak 15%-át használjuk olvasásra – Túl hosszú sorok lassítják az olvasást • Ha szemnek nagy utat kell bejárnia eltéveszthetjük a sort
– Kísérletekből • 10-12 szó per sor
• Margó is kell – Elválasztó elem
Oldal szerkezet • Több hasábos szedés (Táblákkal) • Hasábok közötti hely cellával
CELLPADDING
CELLSPACING
Oldal szerkezet • Fix vs flexibilis – Táblákkal is lehet ezt kontrollálni
Táblák egyéb haszna • Különböző igazítású szövegek elhelyezése BORDER=“0”
Táblák egyéb haszna
Tegyük egyértelművé mire lehet kattintani
Tegyük egyértelművé mire lehet kattintani
Search drkoop.com
A kereső gomb nem egyértelmű Ráadásul a nyíl is elfelé mutat
Search drkoop.com
Linkek Használjunk értelmes, könnyen érthető link neveket Többi link sem túl segítőkész
Munkaalkalmat hirdet Cool címkével (?)
Linkek A link és a kapcsolódó oldalt kapcsoljuk össze név alapján
Egy kísérletben az „Elsősegély” linkre lehetett kattintani, ami egy olyan oldalra vezetett ahol másik három link volt. Ezek közül az egyik link ismét az „Elsősegély” volt. Az emberek inkább a másik linkekre kattintottak, mivel már úgy gondolták, hogy elértek az „Elsősegély” oldalra.
Linkek Kerüljük a félrevezető vizuális elemeket, ami esetleg azt sugalja, hogy link
Az aláhúzás szinte mindig ezt sugalja, pedig nem linkek
Linkek Másik félrevezető elem, kék szín és aláhúzás, pedig egyik sem link
Ha linkként használunk vizuális elemeket akkor mindegyik az legyen. A fenti példában két képre nem lehet kattintani.
Linkek A fontosabb linkeket ismételjük meg az oldalon.
Linkek Inkább szöveges linket használjunk mint képi elemeket. Egy kísérletben bizonyították, hogy bizonyos képek esetén nem ismerték fel, hogy azok linkek, csak ha a kurzor rajta volt.
Kapcsolattartó ikonok Ezek elég egyértelműek
Ezek már kevésbé
Linkek Inkább szöveges linket használjunk mint képi elemeket. Egy kísérletben bizonyították, hogy bizonyos képek esetén nem ismerték fel, hogy azok linkek, csak ha a kurzor rajta volt.
Kapcsolattartó ikonok Ezek elég egyértelműek
Ezek már kevésbé
Linkek Jelöljük a már használt linkeket. Rossz választás, konvencióval ellentétes Zöld: a még nem látogatott oldalak Kék: a már látogatott oldalak
Linkek Amikor szövegbe ágyazott linket használunk, a link fejezzi ki hogy hová jutunk. A felhasználók gyakran ignorálják a link környezetében levő szöveget.
Linkek Amikor szövegbe ágyazott linket használunk, a link fejezzi ki hogy hová jutunk. A felhasználók gyakran ignorálják a link környezetében levő szöveget.
Itt a környező szövegből derül csak ki miről van szó
Linkek A rámutat és kattint (point-and-click) elvet használjuk, a „mouse-over” helyett. Mostani tendencia a mouse-over. Kísérlet: A point-and-click 18%-al kevesebb időt igényelt, kevesebb hibával járt, és felhasználók is ezt preferálták.
Linkek A linkek elég hosszúak legyenek hogy érthetőek legyenek, de azért Legyenek rövidek is.
Több soros link túl hosszú
Rövid, világos
Linkek Lehetőség szerint jelöljük mely linkek vezetnek külső oldalakra. Kísérlet: a felhasználók általában feltételezik, hogy a linkel az adott oldal szerkezeten belül maradunk
Közvetlenül jelöljük
Grafikus elemmel
Linkek Tegyük egyértelművé, hogy mire lehet kattintani
Például színnel
Csökkentsük a „zaj” mértékét
Krug második szabálya • Nem számít hányszor kell kattintani, de mindegyiket meg tudjam tenni gondolkodás nélkül és legyen egyértelmű – (Három gondolkodás nélküli kattintás megegyezik egy gondolkodást igénylő kattintással. J )
Krug harmadik szabálya • Minden oldalról „tüntessük el” a szavak felét, majd a felét annak ami maradt – Csökkenti a zajszintet – A hasznos tartalmat jobban láthatóvá teszi – Az oldal rövidebb lesz
Krug harmadik szabálya
