Krug első szabálya. Don t make me think! Ne kelljen gondolkozni! Amikor ránézünk egy web oldalra, legyen

Átírás

1 Web design Oldalak

2 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

3 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...

4 Első szabály másképpen Ajánlatok? Termékek

5 De Hol vannak a termékek? Mi ez a szöveg? Hová tudunk navigálni Innen?

6 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?

7 Másik probléma a gombokkal Melyik látszik gombnak, amire kattinthatunk?

8 Nem kell messzire menni

9 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

10 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

11 Amazon Elsőként vezette be: Keresek Könyvet Csak gépeljük be aminek szerintünk leginkább Értelme van

12 Mai oldalak

13 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ű!

14 Miért is kell ez? Az interneten a versenytárs csak egy kattintásnyira van. A frusztráció miatt sokszor otthagyjuk az oldalakat

15 Ahogy tervezzük az oldalakat Szeretnénk ha a felhasználók mindent átnéznének

16 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

17 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

18 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

19 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

20

21 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

22 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

23 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

24 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

25 Új felhasználók nem tudják eldönteni hová gépeljék be a web címet

26 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

27 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

28 Vizuális hierarchia A legfontosabb legyen kiemelve Legfontosabb Kevésbé fontos Annyira nem fontos

29 Nincs fókusz pont, Nincs grafikus szerkezet Vizuális hierarchia

30 Vizuális hierarchia Összetartozó dolgok vizuálisan is alkossanak csoportot Könyv Zene Sport Utazás Hobbik

31 Vizuális hierarchia Érzékelés az idő múlásával idő

32 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

33 Vizuális hierarchia Minden újság használta és használja

34 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

35 Új konvenciók 50 évig megvoltunk a transzparens logók nélkül Mindenki átvette

36 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

37 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

38 Konzisztencia Alkalmazzuk ugyanazokat a szabályokat minden oldalra (perzisztens navigáció) Ebben az esetben az ismétlés nem unalmas

39 Oldal mérete Gyakori hiba, hogy túl nagy oldalt tervezünk A mi monitorunk a legnagyobb De nem mindekié

40 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

41 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)

42 Oldal hossza Mindig csak egy képernyőnyit fog látni a felhasználó

43 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:

44 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

45 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

46 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 szó per sor Margó is kell Elválasztó elem

47 Oldal szerkezet Több hasábos szedés (Táblákkal) Hasábok közötti hely cellával CELLPADDING CELLSPACING

48 Fix vs flexibilis Oldal szerkezet Táblákkal is lehet ezt kontrollálni

49 Táblák egyéb haszna Különböző igazítású szövegek elhelyezése BORDER= 0

50 Táblák egyéb haszna

51 Tegyük egyértelművé mire lehet kattintani

52 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

53 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 (?)

54 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.

55 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

56 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.

57 Linkek A fontosabb linkeket ismételjük meg az oldalon.

58 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é

59 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é

60 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

61 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.

62 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ó

63 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.

64 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

65 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

66 Linkek Tegyük egyértelművé, hogy mire lehet kattintani Például színnel

67 Csökkentsük a zaj mértékét

68 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. )

69 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

70 Krug harmadik szabálya