Web design Oldalak
Don t make me think! Ne kelljen gondolkozni! Krug első szabálya 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 Munka Click! Egyértelmű Foglalkoztatási lehetőségek Hmm, ja, munka Click! Gondolkodtat É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 Gingerblah blah blah blah blah blah blah blah Gingerblah blah blah blah blah GaryLarson, 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
Nincs fókusz pont, Nincs grafikus szerkezet Vizuális hierarchia
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 blahblah Blah blahblah Blah blahblah Blah blahblah Blah blahblah Blah blahblah Blah blahblah
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
Hasznosak Web konvenciók 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
Befolyásoló tényezők: Oldal hossza 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ó
A probléma Oldal szerkezet 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
Sor hossz Oldal szerkezet 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
Fix vs flexibilis Oldal szerkezet 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 Searchdrkoop.com Searchdrkoop.com A kereső gomb nem egyértelmű Ráadásul a nyíl is elfelé mutat
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. )
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