Ux Tanfolyam Manuscript

Nemeth AdamFehrti u. 10

Budapest

[email protected]

(Your agents name)(Your agents address)

10,400 words

UX tanfolyam programozknak

by Nemeth Adam

UX tanfolyam programozknak/Nemeth 2

Contents

Chapter One - Stratgiai UX 7

bevezet 7

Az ra clja

Az ra clja

Az ra clja 7

Az UCD 8

A felhasznl szmra a UI a rendszer 9

bibliogrfia 10

Az els nap bibliogrfija 10

A felhasznlk 11

Kik azok a felhasznlk 11


A felhasznlk csoportostsa 12

A felhasznlk tovbbi csoportostsa 13

A persznk 14

A felhasznlkutats 18

A felhasznli interjk 18

Az gyfl nem a felhasznl 18

A field study-k fontossga 19

Az n gyakorlatom 21

A vrt eredmny 24

Problmamodellezs 24

A szmtgp interaktv 24

Problmk s clok 25

Problmkbl kvetelmnyek 25

Use Case modellezs 26

Skiccek (Sketches) 26

A trtnetek ereje 29

Folyamattervek 32

Skicc, terv s prototpus 33

Absztrakt folyamattrkp 33


Kpernyfolyamat 34

Wireframe-ek, drtvzak 37

Prototpizls 39

Tesztels 41

Heurisztikus tesztels (Nielsen) 41

Automata vs felhasznli tesztels 43

Tesztels s trtnetek 44

Kikkel teszteljnk? 45

Mit teszteljnk? 47

A tesztels szablyai 47

A tesztels krlmnyei 48

Krug-fle tesztszkript 50

Chapter Two - Mikro UX 53

A msodik nap bibliogrfija 53

Az ember kpessgei 54

A figyelem 55

Az agy mkdse 56

Mentlis modellek, Norman-fle mentlis modell 60

A sebessg 62


A lts 64

Tervezsi mintk 69

Gyakorlati hasznuk 70

Tervezsi mintk formtuma 71

Tipikus buktatk 71

Quince plda 72

Untitled 82

Tipogrfia 82

CRAP 82

Vizulis hierarchia 83

Gridek 86

Betklnbsgek 95

Bettkzs 96


Foreword


Chapter One: Stratgiai UX

bevezet

Az ra clja

Az ra clja

Az ra clja

Az ra clja az, hogy j szoftvert ptsnk. Ez mindig egy j cl egy fejlesztcg letben. Na de mi a j szoftver?

A j szoftver az, amelyik kpes a felhasznlkat sikerrel segteni abban, hogy elrjk vals letbeli cljaikat.

Kvetkez nhny krds merl fel:

Kik azok a felhasznlk?


Mik a cljaik, s ezt honnan tudjuk meg?

Mi az a vals let?

Hogyan rik el?

Honnan tudjuk, hogy sikerl-e?

Ezeket mind fogjuk boncolgatni a nap folyamn.

Az ra tovbbi clja hogy kpesek legynk egyfajta stratgiai dokumentumot, ha gy tetszik magas szint specifikcit kszteni.

Ez lesz az a dolog, ami alapjn az gyfelekkel t tudjuk beszlni, hogy milyen feladatokat kell a rendszernek elltnia.

Az UCD

Az itt rszletezett mdszer neve user-centered design.

Mint a neve is mutatja, ezek a mdszertanok arrl szlnak, hogy (wikipedia) a felhasznl szksgletei, ignyei s korltai hatrozzk meg a tervezett termk tulajdonsgait.

A felhasznl-kzpont tervezsnek kt fontos szempontja van:

1. Nem talljuk ki hogy mi a j a felhasznlnak, se bizottsgilag, se karosszkbl, ergo folyamatos interakci kell felhasznlkkal

2. A felhasznl szmra az interfsz maga a rendszer.


A felhasznl szmra a UI a rendszer

Vegynk egy egyszer pldt.

Van egy ASP.NET site, aminek egy rsze flashben van rva, de bels szoftver, a flash fel van teleptve, frissl, stb.

Egyik nap j mszaki vezets jn.

k a java-ra esksznek meg a HTML5-re.

Szpen csendben megbznak egy kls fejlesztcget, hogy minden flash komponenst rjanak jra HTML5-ben, s az egsz szervert gy ahogy van toljk t java-ra, a windowsos szervereket pedig cserljk le linuxosra. Mg hrom krsk van:

A rendszer viselkedsben ne vltozzon

A rendszer kinzetben ne vltozzon

A rendszer egyik rszmvelete se legyen lassabb

Sikerl. Mit szlel ebbl a felhasznl?

Semmit.

Anekdota: TwitterA twitter vekig a Ruby on Rails zszlshajja volt. Egyetlen baj volt vele, nagyobb esemnyeknl a mikroblogging szolgltats, dollrmillik ide, dollrmillik oda, sszeomlott. Ez megszokott jelensg volt, ilyenkor kiraktak egy blnt, amit gy hvtak, a Fail Whale. A twitter, nagy esemny, sszeomls, ezek sszetartoztak.


Egyszercsak feltnt az embereknek, hogy az amerikai kzbls vlasztson nem omlott ssze a rendszer. Kiderlt, hogy mr fl ve tllt az egsz backend scala-ra, amivel jobban brtk a terhelst.

Ez itt nem a scala reklmja. Ez itt annak a reklmja, hogy a felhasznl szre se fogja venni a vltozst amg annak nincs kihatsa a felhasznli felletre. A felhasznl szmra a felhasznli fellet A rendszer.

bibliogrfia

Az els nap bibliogrfija

Goodwin: Designing for the Digital Age

Ginsberg: Designing the iPhone User Experience

Cooper: About Face 3

Brown: Communicating Design

Aki egyetemi jegyzetet akar, annak a DfDA Goodwintl. 700 oldal, minden benne van szinte, olyan, mint a Norvig knyv Mestersges Intelligencibl.

Aki ennl rvidebbet akar, hasonl tartalommal, annak a Ginsberg-fle iPhone-os knyvet ajnlom. Meg kell jegyezni, nem az iPhone-rl szl.


A Cooper knyv mindazoknak ajnlott, akik vllalati szoftvereket terveznek.

A diagramok kzl azokat, amiket nem tantanak informatikbl, vagy nem n talltam ki knomban, azokat a Dan Brown knyv tartalmazza. Hozz kell tenni, azok a diagrammok, amikkel mi ma fogunk foglalkozni, letlthetek a knyv honlapjrl ingyen - www.communicatingdesign.com

A felhasznlk

Kik azok a felhasznlk

Felhasznlnak nevezzk mindazokat, akik kapcsolatba kerlnek magval a rendszerrel annak mkdse sorn, illetve inputot biztostanak szmra, vagy az output hatssal van az letkre.

Rendszer

Elsdleges felhasznl aki kzvetlen kapcsolatba kerl a rendszerrel, azaz valamilyen interaktv felleten hasznlja azt a sajt cljaira.


Msodlagos felhasznl, aki valamilyen inputot biztost (pl. elllt egy excel tblt), vagy felhasznlja az outputot (villanyszmla)

UX esetn felhasznl alatt mindig szntzels felhasznlt, rendszerint embert rtnk, de a megoldsok egy rsze valsznleg kutyaetet-automata ksztsre is alkalmas (br az interjtechnikinkon valsznleg finomtani kne - tudsz bernthegyil?)

A felhasznlk csoportostsa

A felhasznlkat elssorban cljaik szerint csoportostjuk.

A felhasznl clja soha nem a rendszerrel kapcsolatosak, hanem az ket krlvev vilggal.

Plda: a felhasznl nem photoshoppol, a felhasznl fott retusl. Mi gyerekkorunkban nem gpeztnk, hanem Lara Croftot prbltuk meg eljuttatni a plya egyik vgbl a msikba, esetleg cseteltnk a bartainkkal, vagy valamirl olvastunk.

Az elsdleges felhasznl a rendszerhez valamilyen clbl kzeledik. Nem fogjuk bekapcsolni a szmtgpet csak gy, hanem pl. Ha

meg akarom nzni az indexen a hreket,

el akarom olvasni a leveleimet,

el akarok intzni egy beszlltst

Ki akarom a fizetni rezsiszmlkat

Rendelni akarok egy pizzt


A felhasznlk tovbbi csoportostsa

A felhasznlkat csoportostjuk valamilyen, a rendszer hasznlatval kapcsolatos tulajdonsgaik alapjn.

Ilyen lehet pldul a demogrfia. Az regedssel prhuzamosan egyre kevesebb fotocella van a szemnkben, radsul az egsz szem tunyul, nem kpes mr a kis betket kezelni.

Ilyen lehet pldul valamilyen kpessg. A frfiak 8%-a sznvak vagy szntveszt. Van itt a teremben szntveszt?

Ilyen szokott lenni, hogy a felhasznlk mennyire jrtasak az adott szakterleten, ill. a szmtgphasznlatban. Ez utbbival vatosan kell bnni.

Fontos lehet mg, hogy a felhasznlk milyen gyakran kerlnek kapcsolatba a rendszerrel. Nem mindegy ugyanis, hogy egy rendszert napi szinten, legfeljebb nhny naponta hasznlunk, vagy egyhavonta egyszer, akr csak vente kapcsoljuk be.

Gondoljunk a karcsonyfa-lltsra. Szmomra minden vben meglepets, hogy a j bds pikulba fogom n azt a fenyt belelltani a talpba. Ehhez hozz kell tenni, hogy mfenynk van, vek ta vltozatlan. De mgis, minden egyes vben jra kell tanulnom a rendszer hasznlatt, minden egyes alkalommal n tulajdonkppen j felhasznl vagyok.

Nem engedhet meg, hogy olyan rendszerekben, amelynek hasznlata nem napi jelleg, az oktatsra hagyatkozzunk. Nincs az a


trninganyag, amit valaki minden egyes vben hajland vgignzni, mr csak bszkesgbl sem.

A persznk

A persznk kitallt karakterek, amelyek archeotipusknt jellemeznek egy-egy homognnek tekinthet felhasznli csoportot.

Fogjuk azokat az embereket akik valamilyen szempontokbl azonosak,

trstunk hozzjuk egy kpet (n rajzolni szoktam, de a hivatalos megolds, hogy olyan fnykpet kell tallni, ahol egy hasonl szerepben - munkakr, stb - pp dolgoz ember van brzolva),

trstunk hozzjuk (let)cl(oka)t

Trstunk hozzjuk kpessgeket (tipikusan amolyan fekete-fehr, esetleg valamifle 1-5 ig sklzs mdon)

Opcionlisan tesznk hozzjuk valamifle httrtrtnetet

Felmerl a krds, nem lehetne-e ehelyett role-okrl beszlni. De. Csakhogy az emberi agy sokkal inkbb feldolgozni trtneteket,mint absztrakt fogalmakat. Amikor a csoportokat persznkkal reprezentljuk, akkor az gyfelek szmra egy sokkal kzzelfoghatbb lnyt hozunk ltre. Teht a perszna clja az, hogy megfoghatv tegye a felhasznlt, megszntessen egy absztrakcit. Ebbl a szempontbl a perszna egy prezentcis, kommunikcis technika.

A persznk elsdleges clja azonban az elvonatkoztats magunktl, mind a fejlesztk, tervezk, mind az gyfelek rszrl. n rtem, hogy te gy szeretnd, de Carol a recepcis kptelen lenne ezt gy


kezelni.

gyeljnk arra, hogy konzisztensen a persznkat hasznljuk, nevk, kpk folyamatosan jelenjen meg a hozzjuk kapcsold feladat-folyamatokat brzol dokumentcikban.

Fontos, hogy a perszna nem egy ltez szemly, s ebbl kvetkezen nem lehet az egyik interjalanyunk kpt felhasznlni, plne nem nevt. Sz szerinti idzetet viszont gyakran rdemes hasznlni az rvels altmasztsra.

A perszna ly mdon olyan, mint a grg szobor, akinek a combjt a vros legjobb focistjrl, fejt viszont a vros orvosrl mintztk.


A felhasznlkutats

A felhasznlkutats (User Research) clja, hogy megrtsk a felhasznlkat.

A felhasznlkutats tbb fzison keresztl kisri a felhasznl-orientlt tervezst. Felhasznlk nlkl a felhasznl-orientlt tervezs elkpzelhetetlen.

A felhasznlkutatsnak tbb mdja van, mi itt a megfigyelst s a felhasznli interjkat ismertetjk (ill. Ksbb a tesztelst). Meggyzdsnk (s a szakmban ezt tbb jegyzet osztja) hogy ezek nlkl nem beszlhetnk igazn felhasznlkutatsrl.

A felhasznli interjk

Az gyfl nem a felhasznl

Jellemz, hogy azok az emberek, akik megrendelik, netaln felgyelik a rendszer fejlesztst, soha nem fogjk hasznlni azt. Megteszik ezt helyettk

Beosztottjaik

Partnereik


gyfeleik

Neknk ezekkel az emberekkel kell beszlnnk. Az elsdleges felhasznlkat keressk elssorban.

Ehhez ragaszkodjunk. Semmi rtelme pldul egy 10 ve projektmenedzsmenttel foglalkoz, de informatikus vgzettsg embert megkrdeznnk arrl, hogy mik legyenek az j Visual Studio kpessgei.

Mg akkor is, ha valaki gy gondolja, hogy ehhez mg mindig rt, de a napi letben szksgszeren eltvolodott tle, nem alkalmas felhasznli interjra.

Senki ne gondolja magt olyan okosnak, fleg biznisz szoftvernl, hogy majd jobban tudja gyis. Mg egy takartn is tud meglepetsekkel szolglni a takarits mibenltrl.

Egy kicsit olyan ez, mint egy nagy meglepi, amit valaki olyan ksztett el, aki mg nem igazn ismer minket.

A field study-k fontossga

Amikor csak lehet, a felhasznlt abban a krnyezetben interjzzuk, amelyben a rendszer hasznlva lesz.

Ennek egyfell pozcis memria okai vannak. Ha most megkrdezlek, hogy mi van a htdben, felteheten nem tudnl r vlaszolni. Ha viszont odamegynk a htdhz, s eltte llva krdezlek meg,


valsznleg tbb vlaszt kapnk. Ha pedig kinyithatnd a htt, egsz rszletesen el tudnd mondani.

Fontos aztn a komfortrzet. Elviszel valakit egy laborba, detektvveg van, fehr falak, kevs, esetleg mszaki jelleg berendezs, frusztrlt lesz.

Fontos, hogy minl inkbb elkerljk a self-reporting hibit. Az emberek egy csom dolgot kifelejtenek, vagy pp termszetesnek vesznek. Ezt a legegyszerbben gy tudjuk elkerlni, hogy figyeljk ket mikzben dolgoznak. Ehhez be lehet jelentkezni amolyan furcsa juniornak egy adott cghez, vagy meg lehet krni nhny leth plda hasznlatra az illetket. rdemes megjegyezni, hogy nmagban a statisztikk s kzvetett adatok nem elgsgesek.

A mobileszkzknl klnsen fontos, hogy megrtsk a hasznlat kontextust.

Mobiltelefon biciklire erstve (Ginsberg knyvbl, fotzta: Marcus Kwan)

Lttam n mr lnyt okostelefont hasznlni lovon lve. Taln pp tjkozdni prblt, merre menjenek. Mit hasznlnnk mi erre? Google Maps-ot. Gondoljuk meg:


FejlesztLny a lovon

Laptop Mobil

Nagy kperny Kicsi kperny

Vezetkes internet Edge

Stabil fellet L

ll Mozog

A laptopra figyel csak Minden msra is figyel

Szablyozott fnyviszonyok Tz napsts

Azrt meg kell jegyezni, a mobilokat nagyon gyakran, s a tableteket szinte mindig nyugalmi helyzetben hasznljk.

Az n gyakorlatom

n gy interjzok, hogy

1. Megkrdem a felhasznlt, szerinte kik a felhasznli a rendszernek

2. Szerinte milyen cljaik vannak a rendszerrel

3. Milyen hasonl rendszereket hasznlt mr

4. Mondja el egy tlagos munkanapjt


5. Mondja el (ha lehet, mutassa meg a jelenlegi rendszeren), hogyan ri el a cljait (talljunk ki egy hihet clt eltte), krdezzk meg minl tbbszr, hogy az adott dolgot mirt csinlja, mirt van r szksg (az sszersg hatrain bell)

6. Mondja el, mi zavarja

7. Mondja el, mit hasznl jelenleg az j modul helyett

8. Mondja el, milyen, az j modulhoz hasonl szoftvereket ismer, hasznlt mr

9. Mondja el, az j modulban mit csinlna

10. Kezdjnk el rajzolni fellet-vzlatokat, s krdezgessk,

hogyan jnnnek az egyes lpsek

Milyen informcikra lenne szksg az egyes lpsek megttelhez

Honnan szerezhetek be ezek az informcik

Milyen lehetsges hibk lpnnek fel

Ezekkel mit kell kezdeni

A hivatalos megolds szerint az a felhasznl akivel interjzunk, nem lehet az, akivel a klnbz fzisokban tesztelnk. Ettl azonban n naponta hasznland szoftver esetn eltekintek, helyette a folyamatos egyttmkdsre helyezem a hangslyt, s vgig, a munkafolyamat minden egyes fzisban ugyanazt a nhny felhasznlt krdezem meg, nha-nha vletlenszeren bevonva msokat is.


Anekdota: ramszolgltat honlapjaAz egyik ramszolgltatnl honlap-ksztsbe kapcsoldtunk be online marketingesknt. A honlapot mindenfle bizottsgi meetingeken beszltk t, ahol leltek, s tbbek kzt megegyeztek, hogy az olyan dolgokat, amelyek az ramvsrlssal kapcsolatosak (fogalmak, folyamatok, stb) egy n. Tudstr menpontban helyezik el, a letlthet dolgokat pedig egy Dokumentumtr menpontban. Ezt 2-3 meetingen megegyeztk, s ht ez gy milyen j.

Mentesztelseket vgeztnk, a mentesztels rviden olyan dolog, hogy adunk egy vals letbeli feladatot, meg egy kinyithat-becsukhat faszerkezetet, s megkrnk jelen esetben 100 embert, hogy keressk meg a szerintk a feladat megoldshoz vezet menpontot. Tartalom nincs, nem mondjuk meg hogy a megolds j volt-e vagy sem, csak megksznjk az egyttmkdst.

Voltak feladataink a Tudstrral s a Dokumentumtrral kapcsolatban is, pl. Szolgltatt szeretne vltani. Keresse meg a szerzdssablont, amit ki kell ehhez tltenie. Ezek a feladatok rendszerint csfos bukssal vgzdtek, 20%, vagy mg annyi se tallta meg ezeket a menpontokat.

A felhasznlk ugyanis nem voltak ennek a kzmegegyezsnek rszei. Hiba logikus, miutn megrtettk ezt a megegyezst, azoknak, akik nem voltak ott, vagy elfelejtettk, komoly fejtrst okoz.


A vrt eredmny

A felhasznlkutats eredmnye, hogy a felhasznlkat fel tudjuk osztani felhasznli csoportokra, ezeket a csoportokat pedig egy-egy persznval tudjuk reprezentlni.

A felhasznlkutats msik eredmnye, hogy tisztban vagyunk azzal, mire fogjk hasznlni a szoftvert, s hogy gondolkoznak ezekrl a folyamatokrl. Hogy ezt hogyan kezeljk le, az a kvetkez lps problmakre.

A felhasznlkutats trivilis eredmnye a felhasznli interj jegyzet. Ezekben rdemes az alkalmazst meghatroz gondolatokat alhzni, kijegyzetelni, s a persznkhoz felhasznlni, szjukba adni. Termszetesen rdemes eltenni, s egy ksbbi fzisban tolvasni, hogy mg mindig megfelelnk-e az azokban elmondott gondolatoknak.

Problmamodellezs

A szmtgp interaktv

Az elsdleges felhasznl az, aki a rendszerrel kzvetlen kapcsolatba lp, mghozz azrt, mert a rendszerrel clja van.

Vegyk szre: itt egy klcsnhats trtnik. Megtrtnik valami esemny, amely utn a rendszer vagy a felhasznl nem lesz ugyanolyan.


Ebbl kvetkezen ez egy folyamat, s elssorban idvonal mentn rtelmezhet.

Problmk s clok

Az letclokat amiket a persznknl definiltunk, szt kell bontani. A cl olyan, amely segti a nagy cl megoldst, ugyanakkor nem szmtgp-specifikus. A fjl mentse pl. szmtgp-specifikus, de a minden projekt dokumentumai egy helyen legyenek mr nem az.

Problmkbl kvetelmnyek

Milyen mdszert alkalmazzunk a kvetelmnyek ltrehozsra?

A vlasz egyszer: majdnem mindegy, a lnyeg, hogy az elemek egymsra pljenek, s a fa (matematikusoknak: erd) cscsn a felhasznlk cljai s kpessgei lljanak

Mindezt pedig interjkkal, (felhasznli) tesztekkel (s esetekben tudomnyos eredmnyekkel) tmogatva.

Azt mr korbban szrevettk msok (az ptszetben Alexander, az informatikban pl. Conway) hogy egy szoftver minsge elssorban a ltrehozsi folyamattl fgg.

Teht ha a ltrehozsi folyamat felhasznlcentrikus, s a ltrehozs a felhasznlk bevonsval trtnik, a szoftvert sokkal jobban fogjk szeretni a felhasznlk, mintha valaki megmondan, hogy mi legyen nekik a j, anlkl, hogy ezt az elmlett legalbb teszteln velk.

Ha a ltrehozsi folyamatba nem engednk felesleges elemeket - pl. a


megrendelk laikussgbl add kvnsgait, vagy a programozk sajt mniit - akkor a szoftver sokkal kevesebb bottleneck-kel fog rendelkezni.

Mindegy, milyen kvetelmnyrendszert hasznlunk, a lnyeg az, hogy a kvetelmnyek generljk a rendszert. A konzisztencit az biztostja, ha valamifle DNS-kdknt mkdnek.

Use Case modellezs

Cockburn klasszikus informatikai knyve - Writing Effective Use Cases - nagyon jl lefedi a Use Case modellezst, s nagyon hasznos is.

Mindaz, amit ler a use case-ekrl igaz, s hasznland.

Egyetlen egy baj van vele: nehezen ttekinthet s olvashat egy use case az gyfelek szmra. Ha csak s kizrlag magunknak rnnk a dokumentcit, use case is the way to go.

Minden tervnket validltatnunk kell a felhasznlkkal s az gyfelekkel. Az gyfelekkel azrt, hogy elhiggyk, hogy dolgozunk, a felhasznlkkal pedig azrt, hogy olyan rendszert csinljunk, amit k aztn ksbb hasznlni fognak.

Ezrt aztn mshogy fogjuk prezentlni ugyanazt az informcit.

Skiccek (Sketches)

A felhasznli interjknl utaltam mr r, hogy az interj sorn


vzlatokat (nevezzk gy: skiccek, angolul: sketches) ksztek.

Egy skicc klnbzik a prototpustl vagy a dizjntl. Elszr is olcsbb, sokkal.

Msodszor, kevsb kidolgozott. Gyakran magyarzott.

A mdium majdnem mindegy. Egy skicc lehet rajzolt, lehet szveges, lehet legbl sszerakott, lehet hogy photoshopban dobjuk ssze, a lnyeg a gyorsasga s a kidolgozatlansga.

Fontos megjegyeznnk, hogy skiccet csak s kizrlag olyan emberrel kommunikljunk, akivel pp folyamatos kommunikcis kapcsolatban vagyunk. Az els krdse egy olyan embernek, akivel nem vagyunk ilyen kapcsolatban, hogy mirt nincs ez rendesen kidolgozva? Mirt szrke? Mirt grbk a vonalak? Mirt van az ott? Ilyen lesz a vgleges is?

Helyszni szemln dlutn, msnap mg vissza lehet menni egy vzlattal, de utna mr semmikpp.

Egy skiccet nem tmeges bemutatsra sznunk, sokkal inkbb beszlgetsekhez, segdanyagnak. Ha prezentlni akarunk, ahhoz mr terv - dizjn - kell.

Buxton: Sketching User Experiences - Getting the right design and getting the design right

To help guide us, here is my best attempt to go meta and capture their relevant attributes of conventional sketches. Sketches are:


Quick: A sketch is quick to make, or at least gives the impression that that is so.

Timely: A sketch can be provided when needed.

Inexpensive: A sketch is cheap. Cost must not inhibit the ability to explore a concept, especially early in the design process.

Disposable: Sketches are disposable. If you cant afford to throw it away when done, it is probably not a sketch. The investment with a sketch is in the concept, not the execution.

Plentiful: Sketches tend to not exist in isolation. Their meaning or relevance is generally in the context of a collection or series, not as an isolated rendering.

Clear vocabulary: The style in which a sketch is rendered follows certain conventions that distinguish it from other types of renderings. The style, or form, signals that it is a sketch. The way that lines extend through endpoints is an example of such a convention, or style.

Distinct Gesture: Not tight. Open. Free.

Constrained Resolution: Sketches are not rendered at a resolution higher than is required to capture their intended purpose or concept. Going beyond good enough is a negative, not positive. (Which is why I take marks off students work if it is too good.)

Appropriate Degree of Refinement: The resolution or style of a sketchs rendering should not suggest a degree of refinement of the concept depicted that exceeds the actual state of development, or thinking, of that concept.


Ambiguity: Sketches are intentionally ambiguous, and much of their value derives from their being able to be interpreted in different ways, and new relationships seen within them, even by the person who drew them.

Suggest & explore rather than confirm: More on this later, but sketches dont tell, they suggest. Their value lies not in the artifact of the sketch itself, but its ability to provide a catalyst to the desired and appropriate behaviours, conversations, and interactions.

A trtnetek ereje

Az emberi agy kt dolgot tud nagyon jl feldolgozni: ms embereket, s velk kapcsolatos trtneteket. Igaz ez az gyfeleinkre, felhasznlinkra, s rnk is.

A j trtnet ismrvei:

A trtnetnek van fhse (aki az egyik persznnk)

A fhsnek van clja, ami sszhangban van az letcljval

Ezt a clt (pozitv trtnet esetn) elri

A trtnet hihet, teht nem tartalmaz az adott univerzumba nem ill elemeket (Mtys kirly idejben a kocsijba szllt, s Budrl kt ra alatt Bcsben volt nem szmthatott hihet trtnetnek, de mi is elhisszk Gandalfrl, hogy tud varzsolni)

A trtnetnek narratvja van, azaz, brmilyen sorrendbe is tesszk az egyes elemeit a meslsben, ezek idben skbarajzolhatak (mg a 22-es Csapdjnak is volt narratvja!)


A trtnetben konkrt adatok vannak (nem kivlasztja a fjlt amivel szeretne valamit kezdeni hanem elveszi a mlt heti projekt aktjt)

A trtnet a fhs kpessgeivel, bels mozgatrugival magtl megtrtnik - pl. elre tudja, hogy a menpontot hogy fogjk hvni, vagy melyik gombot kell megnyomni.

Ha a terveinket vesszk, grfelmleti szempontbl a trtnet nem ms, mint egy bejrs a belpsi pontoktl valamely befejezsig.

Minden folyamat-modellnek egy vagy tbb trtnettel kell rendelkeznie.

Ezeken a trtneteken keresztl mutatjuk be ket, ezeken a trtneteken keresztl teszteljk ket.

Trninget csak s kizrlag olyan trtnetekhez kszthetnk, amelyek napi rendszeressggel, konzisztensen fordulnak el minden felhasznlnl. Minden ms esetben feltteleznnk kell, hogy a fhs nem rendelkezik plusz informcival, ami elbbre vinn. Errl rszletesen a holnapi napon lesz sz.

Anekdota: Az Airbus hallaAz Air France tragikus sors 447-es jrata egy AirBus 337-es gppel kzlekedett.

Az AirBusrl tudni kell, hogy elsdleges tervezsi elvk a PEBKAC, azaz a hibk elsdleges oka az emberi mulaszts, s ennek megfelelen igyekeznek minden lehetsges dolgot


automatizlni a replkben.

Trtnt pedig, hogy kikapcsolt a robotpilta. Ez nmagban nem problma, a robotpilta azrt kapcsolt ki, mert inkonzisztencikat vlt felfedezni a klnbz szenzorok rtkei kztt, azok ugyanis pillanatnyilag befagytak.Egy manulisan reptetett gpen ez teljesen rutinhelyzet lett volna, s termszetesen megvolt r a megfelel procedra. Azonban annyira ritkn fordult el ez a helyzet, hogy a piltk pnikszeren reagltak ,mikzben a gp sllyedni kezdett.

Az Airbus kzvetett irnyts gp, a botkormnyok csak szmtgpes joystickok tulajdonkpp. A kt botkormny mkdse radsul fggetlen. A kevsb tapasztalt harmadpilta pnikszeren elkezdte hzni maga fel a botkormnyt, hogy feljebbkerljenek. A tapasztalt kapitny hiba vezette szablyosan a gpet, a kt joystick kzl a msik hatsa volt elbbreval.

tforduls veszlye llt fent, ennek megfelelen a gp vszszirnja felvijjogott. A szirna 48 msodpercen keresztl szlt. A 48 msodperc tbbsgben a hiba megelzhet lett volna, azonban, mivel nem volt hova tenni a dolgot, nem rtettk, mi trtnik figyelmen kvl hagytk.

A felhasznlk is ugyangy jrnak, ha nem napi esemny trtnik velk, s valamirt nem szlelik tetteik s a rendszer viselkedse kzti sszefggst. Csak remlni tudjuk, a hats kevsb lesz katasztroflis.


Folyamattervek

A folyamatterv - ahogy a nevben is benne van - terv, design. Rsznkrl ez azt jelenti, hogy explicit konvencikat kvet. Tovbb azt is jelenti, hogy elvrs vele szemben a sajt keretein belli konzisztencia.

A folyamatterv egy modell abban az rtelemben, hogy a valsg vagy elkpzels bizonyos elemeit kihangslyozza, mg ms elemeit elrejti.

Fontos, hogy a skicceinkbl, vzlatainkbl tudjunk terveket kszteni.

A skicc flrerthet. Lehet, hogy akivel beszltnk, mst rtett a vzlaton, mint mi, vagy mi magunk mst rtnk alatta feldolgozs kzben mint akkor

A skicc nem konzisztens. Teli van hibkkal.

A terv ellenrzi egy elkpzels helyessgt az ltal, hogy konvenciknak felel meg.

rtelemszeren a skicceink alapja a tervstlusok lesznek. Ehhez minl tbb brzolsi mdot kell elsajttani, hogy kpesek legynk minl tbb nzpontbl ltni ugyanazt, kpesek legynk megragadni a fontos rszleteket.

A terveink alapjai pedig termszetesen a vzlataink lesznek.

Egy folyamattervet be lehet mutatni, alkalmas tmegkommunikcira. Lehet pro s kontra rveket felhozni vele szemben, hisz nem flrerthet.


Skicc, terv s prototpus

Skicc Terv Prototpus1:1 kommunikcira Tmegkommunikcira 1:1 kommunikciraFleg felhasznlknak Mindenkinek Fleg felhasznlknakKtrtelm Egyrtelm Egyrtelm, de korltosCsak a kapcsold beszlgetssel egytt rthet

nmagban llllhat nmagban, de korltai elzetes megegyezs trgya

Beszlgets rsze Egybl ttekinthet Nem ttekinthetFelfedezni (elkpzelst gyrtani)

Biztostani a konzisztencit (azaz, hogy az elkpzels helyes)

Validlni a tervet (hogy az elkpzels megfelel a valsgnak)

Absztrakt folyamattrkp


Kpernyfolyamat


Wireframe-ek, drtvzak

A drtvzak kialaktsrl a holnapi nap ismeretei mellett lesz sz.

A drtvz a dizjntl megfosztott dizjn, olyan felletterv, amely szndkosan egy, a vglegesnl egyszerbb dizjnnyelvet beszl. Rendszerint egyetlen bettpust hasznl,

Az elemei - nhny ers kivtellel - fekete-fehrek. ltalban megjegyzs-markereket tartalmaznak.

A drtvzakat nha gy rakjk folyamattervbe, hogy a gombokat ktik ssze a kpernykkel. Ez nem javasolt gyakorlat a folyamatok tervezsre: a felhasznl nem gombot nyom, hanem valamit el akar rni, vlemnyn szerint ez a navigci ms rtegben zajlik.

Nem felttlenl rdemes abban az esetben drtvzazni, ha kisebb mdostsokat hajtunk vgre meglv rendszeren: ekkor inkbb hasznljuk a meglv rendszer vizulis nyelvt.

J, ha a meglv rendszereinkhez komponensknyvtrakat rajzolunk, azaz rajzprogramba ide-oda rakhat elemeket.

A drtvz nagyon ersen fgg a kvetkez nap anyagtl.


Prototpizls

Mirt prototpizlunk?

Elszr is, mert nem szeretnnk rgtn a lovassgot kldeni.


Msodszor, mert ha mr a ksz szoftverrel tallkoznak a felhasznlk, mr az lesz az indok, hogy rossz ,rossz, de ha mr ennyi pnzt beleltnk, pedig korn ki lehetne szrni az ilyen dolgokat.

Ne feledjk: a szmtgp interaktv. Kizrlag interakciban lehet megrteni, hogy a mkds j-e vagy sem.

Ugyanakkor azt se feledjk, a felhasznlkat nem rdekli a backend. Egy res hjat kell prezentlnunk, ami viszont vals adatokon alapszik. Szval szerezznk be vals adatokat, de semmikppen ne kapcsoljuk adatbzishoz a prototpust!

VIgyzzunk a prototpus lethsgvel: ha tl leth, a felhasznl azt hiszi, mr csak nhny nap s ksz a teljes vltozat is. Ha nem elg leth, belekpzeli a kacsalbat meg a forgvzat is.

A prototpust mindenkpp lssk fejlesztk is, akik a rendszeren dolgoznak, nehogy vletlenl mi tegyk bele a kacsalbat, hamis gretet adva ezzel a felhasznlknak.

A prototpus tipikus mdiuma a Powerpoint, az interaktv PDF, a kpvlt megoldsok (akr a fellettervez programon bell), vagy az HTML5-JS.

Anekdota: Alexander s a prototipizlsAlexander nagyon hitt a prototipizlsban. Az Eishin egyetem kampusznak ablakait pl. gy ptette meg, hogy elszr a mhelykben sszeraktak kartonpapr falakat, amikre lyukakat vgtak, azokat pedig pauszpaprral vontk be. Ezutn lmpkat helyeztek a kartonlapok mg, s szimulltk a nap jrst.


Amikor ezzel vgeztek, s mr megplt az a szint az pletben, de mg falak nlkl - csak a tartszerkezet - ahova ezt szntk, odamentek, s a konkrt pletet vgigvontk ezekkel a kartonlapokkal, s gy teszteltk le, az utols kt dizjnbl melyik a megfelel

Forrs: Nature of Order

Tesztels

Minden tervezsi dntst ellenrizni kell.

Lehetnek szp elmleteink, de ezeket a hs-vr emberek gyakran rjk fell.

A UCD mdszertanokban a tesztels a kzponti eljrs. Ezrt fontos, hogy megrtsk mkdst.

Heurisztikus tesztels (Nielsen)Visibility of system statusThe system should always keep users informed about what is going on, through appropriate feedback within reasonable time.Match between system and the real worldThe system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.


User control and freedomUsers often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.Consistency and standardsUsers should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.Error preventionEven better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.Recognition rather than recallMinimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.Flexibility and efficiency of useAccelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.Aesthetic and minimalist designDialogues should not contain information which is irrelevant or rarely


needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.Help users recognize, diagnose, and recover from errorsError messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.Help and documentationEven though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

Automata vs felhasznli tesztels

Robotokkal kivlan lehet tesztelni azt, hogy a rendszer j lesz-e robotoknak.

Az automatikus tesztelssel kt baj van:

1) Az j divat szerint az automatikus tesztet az rja, aki magt a szoftvert. Logikus mdon valamelyest egy rugra jr az agyuk, akrmennyire is prblja ezt szndkosan elrejteni, s egy elg j elkpzelse van arrl, hogyan kne belsleg mkdnie, st, lehet, hogy emlkszik is r

2) Az automata tesztels brokrata: egyflekppen hajtdik vgre, egyflekpp fogadja el a mkdst: az ember nem ilyen. Az ember rengeteg, papron klnbz megoldst tud elfogadni, s minden egyes alkalommal egy picit mskpp csinlja a dolgait. Az automata


tesztels szksgszeren rugalmatlan, mint egy hivatalnok: az emberi gyarlsgot legjobban emberekkel tudjuk bevinni.

Embereknek szl rendszereket embereken is kell tesztelnnk.

Vegynk egy pldt: ttelezzk fel, hogy felkrnek egy vros ptsre: neked kell megtervezned. Megtervezed, megcsinljk, utna viszont a trkpek elvesznek. Te mgis sokkal jobban fogsz tudni kzlekedni a vrosban, hisz a trkp egy rsze beldg.

Ha viszont egy idegen vrosba kerlsz, trkp nlkl, nem igazn tudod, mi merre van: fokozatosan fogod felfedezni az egszet. Adott esetben teljesen ms ismereteid lesznek neked a vrosrl, mint egy msik ott bklsznak, ms keresztezdsek ragadtk meg a figyelmeteket, msra emlkeztek.

Tesztels s trtnetek

Az elz fejezetben sz volt trtnetekrl.

Ezeknek a trtneteknek volt fhsk, akirl feltteleztk, hogy adott cljai, kpessgei s mozgatrugi vannak, a trtnetrl pedig feltteleztk, hogy ezek a clok automatikusan elrhetek a fhs tulajdonsgaival a szoftveren bell.

A teszt bizonyos szempontbl nem ms, mint ennek a trtnetnek az lethsgnek a tesztelse.


Ehhez keresnk olyan embereket, akik kpessgeikben hasonlak az elkpzelt fhseinkhez (pl. azrt, mert rluk mintztuk ket), majd felruhzzuk ket azokkal a clokkal, amikbe kpzelt fhseinket rngattuk, s megfigyeljk, tnyleg automatikusan tljutnak-e az akadlyokon.

Ezzel teszteljk azt is, hogy a fhseinket tnyleg az-e a motivcija amit mi gondoltunk.

A legtbb esetben, hacsak nem valami nagyon szakrti rendszerrl van sz, nem fontos, hogy pontosan illeszkedjen a fhseink s a tesztelink tudsa.

Kikkel teszteljnk?

A tesztalanyok krt a gyakorlatban leginkbb a titoktartsi szerzdsek szktik. Minden alkalmat ragadj meg, amikor ezeket ki lehet kerlni (pl. A program meglv, nyilvnosan letlthet vltozata, konkurens alkalmazsok, stb), ill. Vond bele a tesztalanyokat a titoktartsi krbe.

Innentl kezdve szinte mindenkivel.

Nem rdemes tlzottan tesztelnie az adott modul rjnak: marha jl ismeri az egszet. ltalban az a javaslatom, hogy a programozk sikereit ne vegyk tl komolyan: mindaz a tuds ami egy tlagos llsfelvteli tllshez szksges a munkakrkben tlsgosan elre helyezi ket absztrakci, s modellalkots terletn, radsul sokuk 0-24 gp eltt l.

Ha napi hasznlat, vllalati szoftverrl van sz, akkor teszteljnk nyugodtan azokkal a felhasznlkkal, akikkel interjztunk. Ezeknek a


szoftvereknek ugyanis nem baj, ha van betanulsi idszaka. De ha valamit a msodik-harmadik alkalommal se tallnak meg, krds nlkl cserld!

(Ne krdezd meg, hogy szerintk cserld-e: minden felhasznl gy rzi, hogy a hlye, ha valamit nem tall a programban, de nem, a program rossz.)

Havi, vagy ritkbb hasznlat szoftvernl a betanuls viszont elkpzelhetetlen, csakgy, mint casual szoftvereknl. Egy havi programra minden egyes alkalommal gy fognak tekinteni, mint borj az jkapura. Egy konzumer program (pl. Egy mobilalkalmazs) ha nem hasznlhat a feltelepts utni els alkalommal, az esetek 26%-ban (2011-es adat) nem lesz mg egy alkalma bizonytani. A webapp ennl rosszabb.

Erg az sszes alkalmazst, de fleg a konzumer s ritkn hasznlt bels alkalmazsokat alkalmazs-szzekkel is kell tesztelni

Az, hogy mennyire kell domain ellet az alkalmazs hasznlathoz, vltoz. Ha a Photoshop hasznlathoz grafikusnak kne lenni, az Adobe sokkal szegnyebb lenne. ltalban ha egy szakmban dolgoz sem tallja meg a gombokat egyltaln, mr rgen rossz.

ltalnosan elmondhat, hogy egy tlagos felhasznl, fknt adminisztratv munkakrben nincsen igazn ott, nem rendelkezik annyi specilis tudssal, amelynek hinya komolyan kell, hogy akadlyozza a hasznlatot. Persze jobb, ha a tnyleges clokkal valaki tisztban van, de a felhasznl elssorban ember, s msodsorban szakrt, gy a hibk nagy rsze emberi mivoltbl kvetkezik. Teht ha nem tallunk szakmabeli alanyt, ez nem lehet indok arra, hogy nincs tesztels, vagy nem vesszk komolyan annak eredmnyeit!


Mit teszteljnk?

Ne a legvgn teszteljnk!

Ez a legfontosabb szably. Tesztelni skiccet, drtvzakat, prototpust, vgleges termket, s nem utols sorban konkurencit is lehet. Minl elbb annl jobb.

Vannak specilis tesztek (pl. Mentesztek - a menkkel, s a tervezskhz hasznlt Card Sortinggal itt s most nem foglalkozunk), a legtbb teszt az valamilyen interfszt tesztel.

Ezek kzl vannak benyomstesztek (melyik tetszett jobban, 5 mp-re felmutatva mire emlkszel belle, stb..), vannak kptesztek (ha azt keresnd hogy mire kattintanl), s vannak tbblpses, interaktv tesztek.

Egyltaln nem kell megvrni, amg ksz lesz a vgleges termk: ne feledjk, a tesztelshez alapveten egy hj kell, itt s most nem a mszaki mkdst, a felleteket teszteljk!

Egy plda tesztvide itt: http://www.youtube.com/watch?v=9wQkLthhHKA

A tesztels szablyai1. A programot teszteljk, nem a felhasznlt. Ha a felhasznl nem tall

valamit, a program rossz.2. Kuss - nem magyarz el, nem mutat meg, legfeljebb krdez. 3. Ha nem sikerl, nem sikerl, majd trjuk a programot, hogy legkzelebb

sikerljn4. Nem csak azt teszteljk, amire kivncsiak vagyunk, azt is teszteljk,

mennyire klnbzik a ltsmdunk. A felhasznlnak lehet, tk ms a fontos, s fog a programmal lni, nem mi.


A tesztels krlmnyei

A tesztels zajlhat

A felhasznl sajt letterben (otthonban, munkahelyn)

Tesztlaborban

Kocsmban

Tesztlettrben (Living Lab)

Philips ExperienceLab tesztlettr, Eindhoven

A tesztlettrre valsznleg senkinek nincs pnze, ilyenje van pl. A Philipsnek. Komplett csaldokat kltztetnek egy Val Vilg-szeren bekamerzott laktrbe, ahol fejleszts alatt ll termkeket adnak nekik.

A kezd tesztel bizonyra a tesztlabort tartja megfelelnek, hisz ott csak a feladatra lehet koncentrlni. Tesztlabor ma mr brmi lehet, amibe belefr egy szmtgp (mobiltelefon) s kt ember, rgebben ez egy bekamerzott s detektvtkrs helyisget jelentett. Ma mr egy laptop webcamja s kpernykpe brhova kzvetthet, a


hanggal egytt. A Tobii legjabb szemkamerja pedig kb. egy rd Toblerone mrett jelenti, az esetek tbbsgben azonban egyltaln nincs r szksg

A val letben hasznlat sorn azonban nem csak a feladatra koncentrlunk, folyamatosan krl vagyunk vve zavar tnyezkkel (nylt irodban a munkatrsak, otthon a gyerek vagy a szomszd fnyrja).

Ezrt elsdleges tesztelsi mdszer a felhasznl sajt letterben val tesztels.

A kocsmban tesztels elnye(!), hogy a felhasznlk egyfell egy sok zavar tnyezvel rendelkez trben vannak, msrszt rszegek. A kismrtk alkoholfogyasztssal ugyanis pont azok a kpessgek vltoznak meg - koncentrci cskkense, elkalandozs, helyzetfelismersi hibk - amikre az egsz usability pl.

Azt az alkalmazst, amit egy kocsmban kt sr elfogyasztsa utn mg mindig lehet hasznlni, sznjzanon is menni fog brmikor.

Fontos, hogy ilyen alkalommal ilyenkor inkbb csak a felhasznl igyon, ne mi. Az se rt, ha a tesztelshez hasznlt kszlkek nem kapnak alkoholmrgezst a teszt vgrehajtsa sorn.

A tesztels kimenete minden esetben a kvetkez:

Egy kpernyfelvtel (vagy vll mgli felvtel) a hasznlatrl

Egy hangfelvtel a felhasznl gondolatairl s a lezajlott diskurzusrl, szinkronban az elzvel

Egy (lehetleg idpontos) jegyzet akkor-s-ott figyelemremlt esemnyekrl


Opcionlisan egy videfelvtel a felhasznl arcrl hasznlat kzben

Opcionlisan szemkamers kvetsi grf vagy htrkp

Tesztelni lehet prototpust (paper prototype, informatikusoknak inkbb interaktivizlt powerpoint vagy egyb hotspot-alap megolds) vagy ksz termket is.

Krug-fle tesztszkriptIntroduction


Hi, . My name is Steve Krug, and I'm going to be walking you through this session.

You probably already know, but let me explain why we've asked you to come here today: We're testing a web site that we're working on to see what it's like for actual people to use it.

I want to make it clear right away that we're testing the site, not you. You can't do anything wrong here. In fact, this is probably the one place today where you don't have to worry about making mistakes.

We want to hear exactly what you think, so please don't worry that you're going to hurt our feelings. We want to improve it, so we need to know honestly what you think.

As we go along, I'm going to ask you to think out loud, to tell me what's going through your mind. This will help us.

If you have questions, just ask. I may not be able to answer them right away, since we're interested in how people do when they don't have someone sitting next to them, but I will try to answer any questions you still have when we're done.

We have a lot to do, and I'm going to try to keep us moving, but we'll try to make sure that it's fun, too.

You may have noticed the camera. With your permission, we're going to videotape the computer screen and what you have to say. The video will be used only to help us figure out how to improve the site, and it won't be seen by anyone except the people working on the project. It also helps me, because I don't have to take as many notes. There are also some people watching the video in another room.

If you would, I'm going to ask you to sign something for us. It simply says that we have your permission to tape you, but that it will only be


Background information questionsBefore we look at the site, I'd like to ask you just a few quick questions. First, what's your occupation?

Good. Now, roughly how many hours a week would you say you spend using the Internet, including email?

How do you spend that time? In a typical day, for instance, tell me what you do, at work and at home.

Do you have any favorite Web sites?

Now, finally, have you bought anything on the Internet? How do you feel about buying things on the Internet?

And what have you bought?

OK, great. We're done with the questions, and we can start looking at things.

Usability testFirst, I'm just going to ask you to look at this page and tell me what you think it is, what strikes you about it, and what you think you would click on first.

For now, don't actually click on anything, just tell me what you would click on.

And again, as much as possible, it will help us if you can try to think out loud so we know what you're thinking about.

From this point it's up to you. Ask them to consider the elements of the site and ask for their verbal feedback every step of the way.


Chapter Two: Mikro UX

A msodik nap bibliogrfija

Jeff Johnson: Designing with the Mind in Mind

Weinschenk: 100 dolog amit minden dizjnernek tudnia kell az emberekrl (magyarul is)

Tidwell: Designing Interfaces

Krug: Rocket Surgery Made Easy

Williams: Non-Designers Design Book (magyarul: Tervezz Btran!, Kiskapu)

Vinh: Ordering Disorder - Grid Principles for Web Design

Lupton: Thinking With Type (online elrhet:


www.thinkingwithtype.com)

Weinschenk knyve j, Johnson valamivel mlyebb. Mindkett tudomnyos kutatsokkal tmasztja al mondanivaljt.

Tidwell knyve klasszikus a fellet-tervezsi mintkban, a folytatsai (Designing Web Interfaces, Designing Social Interfaces) sorozatot alkotnak.

Krug knyve a tesztels alapja.

Williams knyve egy nagyon j knyv kezdknek, Vinh knyve nem foglalkozik sajnos a reszponzv dizjnokkal, de taln egyszerbb mint Mller-Brockmann klasszikusa.

Az ember kpessgei

Az informatika legnagyobb korltja az ember. Minden vltozik, de az ember az egyetlen fix pont. Az ember kpessgei, rajele, figyelkszsge nem vltozik, azok ugyanis biolgiailag meghatrozottak.

A ksbbiekben ltni fogjuk, hogy az emberek nem figyelnek, s ahhoz tl gyorsak, hogy a programozk lustk legyenek, ahhoz viszont tl lassak, hogy mindent szrevegyenek.

Egy fontos dolgot szeretnk megjegyezni: a programoz is ember. Ugyanakkor a programozt sokkal jobban kszteti a krnyezete arra, hogy a figyelmt a szmtgpre sszpontostsa, mivel ezrt fizetik. Egy tlagfelhasznl szmra maga a szmtgp nem, de a vele elvgzend feladat nagyonis rdekes.


A figyelem

Elszr is: se a nk, se a frfiak nem kpesek figyelni egyszerre kt mentlis cselekvsre (Weinschenk 46). Kpesek vagyunk figyelni egy begyakorlott fizikai s egy mentlis cselekvsre, gy fordulhat el, hogy tudunk stlva beszlni.

A j hr az, hogy egsz jk vagyunk preemptv multitaszkingban, s ezzel megteremtjk a multitaszk illzijt magunknak.

Kockul: Human, release code Sapiens. Number of CPU Cores: 1.

Figyelemid

Msodszor: a napi tevkenysgeink sorn az esetek 30%-ban nem figyelnk. (Weinschenk 29). Ezek azok a tevkenysgek, amiket klnsebb zavar tnyezk nlkl vgznk, radsul ezrt fizetnek minket. A rossz hr az, hogy ennek nem vagyunk tudatban, s le is fogjuk tagadni, cserbe tervezni kell vele.

Amikor nem a f feladatunk az, amit csinlunk (jelen esetben a szoftver kezelse), akkor ez a szm nem 30%, simn lehet 70% is.

A felhasznl nem hlye, csak sokszor nem figyel. Ez biolgiai mkdsbl kvetkezik, ez egy tervezsi kvetelmny, nem pedig tnevelend viselkedsminta.

Ennek a helyzetnek a tesztelsvel foglalkozni kell.

Van mg egy ezzel kapcsolatos problma: ha nem figyelnk, s hirtelen krdseket tesznek fel, bizonytalanok vagyunk. A bizonytalan


ember pedig makacsul ragaszkodik eredeti elkpzelseihez (Weinschenk 30). Ezt a kvekez pldn lehet egyszeren szemlltetni:

Soha ne tegynk fel utlag krdseket.

A felhasznlrl ltalnosan elmondhat, hogy nem az eszkzre figyel, hanem a clra, amit el akar rni. A legtbb felhasznlt nem a program vagy honlap rdekli, hanem az, amit csinl, gy nem figyel a programra. De ha figyelne, akkor is max az esetek 70%-ban.

Az agy mkdse

Ha 10 msodperced van vlaszolni a kvetkez krdsre:

Egy baseball t s labda egytt 110$-ba kerl. Az t 100 $-ral kerl tbbe mint a labda, mennyibe kerl a labda?

Mit vlaszolsz?

Az emberek tbbsge azt fogja vlaszolni, hogy 10$.

Rvid matematikai szmolssal belthat, valjban a labda csak feleennyibe kerl.

A msik, magyar plda erre ez: http://www.youtube.com/watch?v=9gkxE3s4p1s


De mirt is szmolunk flre?

A kt agy modell szerint az embereknek kt zemmdjuk van: a robotpilta, s az ber zemmd. Az ber zemmd azonban fraszt, ezrt nem hasznljuk annyit, inkbb csak akkor, ha fontos, s szksg van r.

Norml esetben az autpilta vezet, s ha nem rtkeli fontosnak a problmt, nem breszti fel a gondolkozst. Ennek az autpiltnak azonban relatv gyengk a kvetkeztetsi kpessgei, inkbb az arnyokat rzkeli csak.

Lehet, hogy kt agy-zemmdunk van, de jelen kutatsok szerint nincs kt memrink. Egyetlen memria-rendszer van, ami ketts feladatot lt el, mind hossztv, mind rvidtv emlkezetknt funkcionl.

A rvidtv memria flrevezet fogalom. Helyesebb lenne munka memrinak hvni. Az tmeneti trols ideje nhny msodperc, maximum 1 perc, s ezek azok az elemek, amik pp fejben vannak.

Ezek kontextusfggek. Mint ltni fogjuk, a figyelem biztonsgosan kb. 10 msodpercig tarthat fenn, amint feladatot vltunk, a munkamemria elemei trldnek. Tipikusan kontextusfgg:

Odamsz a hthz, hogy egyl egy joghurtot. Elindulsz a konyhba, bersz, kinyitod a htt s gondolkozol, mirt is jttl.

A konyhban ms kontextusba kerltnk, a munkamemria tartlama


trldtt.A trldsre a legjobb plda az a kandikamera-showba ill ksrlet, ahol beptett emberek elveszett tristaknt killtak a vrosba, egy trkppel a kezkben. Az arra jr emberektl segtsget krtek, hogy magyarzzanak el valamit. Az emberek elkezdtek gondolkozni, de kzben kt munks (szintn beptett emberek) egy nagy ajtt cipelt el kettejk kztt. A ksrletalanyok nem vettek szre semmit, s folytattk az tbaigaztst, pedig ezalatt a turistt kicserltk egy msikra, aki adott esetben ms ruhban volt, vagy pp szakllas.

A munkamemria nem kpes 7 klnbz elem kezelsre. A vals szm 4-5 krl van, amit telefonszmokkal lehet leginkbb illusztrlni:

1-345-4544

Ha 7-elem lenne a memrink, lennnek 5 elem rszek a telefonszmokban. A problma nyitja az, hogy az eredeti ksrletekben 2-3 elemet mindig csoportokba lehetett fzni amelyek gy mr egyetlen elemet alkottak.

A munkamemria egyenes kvetkezmnye, hogy a kontextusnak, rendszerllapotnak mindig jelen kell lennie: a felhasznlnak vlaszolnia kell tudnia a hol is vagyok? krdsre.

Plda:

Ha az alkalmazs mdot vlt (pl. Egy digitlis fnykpezgp vide- vagy fnykpmdja, egy rajzolprogram eszkzkszlete), ez a md legyen nagyon vilgos (kurzor, keretszn, bazi nagy piros pont vagy kzpen villog ikon..)


keress esetn a keresett kifejezs mindig maradjon lthat

Navigci esetn minden helynek legyen neve, s lehessen oda-vissza kzlekedni.

Ha valamilyen recept van, lpsrl-lpsre, az legyen lthat, de legalbbis knnyen elhozhat a lpsek kztt

A hossztv memrirl azt kell tudni, hogy a j program arrl ismerkszik meg, hogy nem hasznltatja. A hossztv memria felbontsa nagyon vltoz (figyelemtl fgg), a tartalma cserlhet (ha eleget sulykolnak egy esemnyt, el fogod hinni, hogy megtrtnt),

A sulykolst azonban elnynkre is hasznlhatjuk: ha eleget sulykolunk valamit, ntudatlanul is megtanuljk az emberek, ezrt kell az interfsznek konzisztensnek lennie, s konzisztens mintkat kvetnie.

Krds (Johnson): melyik a kvetkez szekvencik kzl a leginkbb tanulhat?

Kivg-beszr A B C

Szveg Ctrl-X, Ctrl-V Ctrl-X, Ctrl-V Ctrl-X, Ctrl-V

Vide Ctrl-X, Ctrl-V Ctrl-C, Ctrl-P Ctrl-X, Ctrl-V

Kp Ctrl-X, Ctrl-V Ctrl-Z, Ctrl-Y Ctrl-X, Ctrl-V

Rajz Ctrl-X, Ctrl-V Ctrl-W, Ctrl-N Ctrl-X, Ctrl-V

Tblzat Ctrl-X, Ctrl-V Ctrl-Q, Ctrl-R Ctrl-E, Ctrl-R


Kvetkez krds: melyik tanulhat a legrosszabbul?

Els logikus vlasz: B. Valsznleg tnyleg hossz lenne megtanulni, de id utn megszoknk az emberek, hiszen egy konzisztens struktra

Az igazi vlasz: C. Az emberek rendszeresen hibznnak, hisz mindig ugyangy kell csinlni, kivve, ha tblzat van.

Mentlis modellek, Norman-fle mentlis modell

Az ember egy olyan llny, amely hajlamos mindent megmagyarzni magnak. Nem szeretjk a magyarzat-nlklisget, ezrt mindent igyeksznk sszektni.

Sokszor azzal magyarzzuk meg a dolgokat, hogy hlyk vagyunk. Pl. Ha az elbbi pldban a tblzatot rosszul szrnnk be, mondannk, hogy ja, persze, hlye vagyok, holott a szekvencit, mint megbeszltk, igazbl az letbe nem lehet helyesen megtanulni. Persze senkinek nem kell sokig gondolkozni, hogy misztikus pldkrl tegyen beszmolt

A dolgok mibenltrl s viselkedsrl alkotott sszetett kpeinket mentlis modelleknek hvjuk. Amg a mentlis modell s a valsg szinkronban van, addig nem zavar minket, hogy esetleg kze nincs hozz - gondoljunk csak a kis emberekre a tvben.

Norman hosszan foglalkozik a mentlis modellekkel klasszikus knyvben (Design Of Everyday Things). Ngy alapszablyt fogalmaz meg:

Ksztsnk egy j fogalmi modelt


A fogalmi modell nem rendszermodell. A fogalmi modell lehetleg egyszer, s a felhasznltl jn: az szavait hasznlja, az sszefggseit. A rendszermodell technikai szksgletekbl jn. Plda erre egy htszekrny: a kt potmter kzl az egyik a fagyaszt teljestmnyt szablyozza, a msik hogy ebbl mennyit adjon t a sima ht trbe. A kett kzt nyilvn van egy matematikai sszefggs. Rendszerileg teljesen rthet, de a felhasznl valsznleg ha lt kt kapcsolt, az egyiket fent, a msikat lent, nem erre gondol, benne nincs olyan modell, amely ezt fontoss tenn.

Ismt: trnelni, elmagyarzni lehet, de fleg napi hasznlat programot. Ne akarjuk a felhasznlkat rknyszerteni az implementcis modell megismersre, inkbb az implementcis modellt kzeltsk a felhasznl fogalmi modelljhez pl. Domain-Driven Design mdszerekkel!

Legyen lthat minden, amivel kezdeni lehet valamit

Ha programoztunk mr olyan kszlket, amelyen ehhez nem volt elg gomb, valsznleg rtjk: a nyomja meg dupln, ha ezt, s hosszan, ha azt nem j modell

A lekpzsek legyenek egyrtelmek

A legismertebb esete ennek a villanykapcsolk: br ugyanannyi villanykapcsol van, mint lmpa, melyik-melyik? A msik tipikus eset a tzhely: sose tudni, melyik lngot melyik kapcsolja.

Ha valamit nem szabad csinlni az adott helyzetben, azt ne lehessen csinlni

Persze egyrtelmnek kell lennie, mirt nem lehet valamivel pp azt csinlni, klnben a felhasznl sszezavarodik.


Mindennek legyen ltszatja, legyen visszajelzs

Ha egy gombot megnyomnak, az nyomdjon be. Ha egy e-mailt elkldnk, az klddjn el. Ha egy mveletet megkezdnk, az kezddjn el. Nem kell mindenrl tbboldalas jelentst s hangjelzst adni (az autnk se jelenti be a GPS hangjn minden egyes foknl, hogy sikerlt mginkbb elfordtani a kormnyt), de akkor vagyunk biztosak abban, hogy valami mkdik ha visszajelzst kapunk (kln tudomnya van az autajtk becsapdsi hangjnak - a csendes autajt csfos kudarc volt)

Mindenen ltszdjon, mire val (affordance)

Ha valami gomb, akkor emelkedjen ki. Ha valami link, legyen kk. Ha valami hzhat, legyen recs. Ha lehet mg lefele scrollozni, lgjon bele a tartalom az aljba.

A sebessg

A 90-es vekben az internet meglehetsen lass volt. Ez gondolom mindenkinek feltnt, aki ebben az idben internetezett. Jtt Nielsen, s 99-es knyvben bejelentette, hogy egy weboldalnak 1 msodpercen bell be kell tltdnie vagy a felhasznl ideges lesz.

Nyilvn felmerlt a krds: ez az illet hlye?

Az az igazsg, hogy a trelemfaktorunk velnk szletett.

A szmtgpek sebessgnek elsdleges fels s als korltja az ember. Vrhatan ez egy olyan komponens, amit nem fogunk kicserlni sohase mindenhol.


Als korlt azrt, mert ha valami tl lass, az emberek trelmket vesztik, vagy fejben msik feladatra vltanak.

Fels korlt azrt, mert bizonyos sebessg felett tkmindegy, milyen gyors az alkalmazs, st, ha egy vltozs tl gyorsan trtnik, fel se tnik. Ezt persze elnynkre is fordthatjuk, pl. Gyorsan, lopakodva betlthetnk mg elemeket, mert az emberi reakciid lass.

De mik is ezek a reakciidk? (Johnson knyve nyomn)

Animcik

Ltstl tudatosodsig, avagy framerate sapiens

100 msec

Ok-okozati sszefggsek maximlis ablaka

140 msec

sszeszmols sebessge 4-5 elemig

200 msec

Egyszerre kezelt elemek idablaka 200 msec

Figyelemkihagys felismers utn

500 msec

Vratlan esemnyre adott vizulis reakci (hirtelen odanzs)

700 msec

Knos csend bellta 1 000 msec = 1sec


Sznet nlkli max figyelem egy feladatra

10 sec

Minimlis felismerhet sznet hangban

1 msec

Ismers dolgok ismersnek kategorizlsa tudatalatt

10 msec

Ok-okozati sszefggsek 100 msec Kattints feedback

Knos csend s tudatos reakci id 1 sec

Ennyi idd van kirakni egy ablakotMegjelents utn ennyi idd van csendben betlteni dolgokat (1 mp amg feldolgoz egy j kpernyt)Ennyi idd van automata folyamatokat (pl. Automata ments) vgrehajtani hogy ne zavarjonEnnyi idt kell kihagyni kt figyelmeztets kzt minimum

Sznet nlkli figyelem 10 sec

Ennyi id alatt kell tudni befejezni egy egysgnyi feladatotEnnyi id alatt fog a felhasznl, s ennyi idt hajland rd is vrni ha hosszabb a feladat

Kritikus helyzetben dnts 1.5 perc Ennyi id alatt mindennek ott kell lennie ami a dntshez szksges

Egy dologra figyels maximlis idtartama

10 perc (max 20), gyereknl 2 perc

A lts


Az els dolog, amivel foglalkozni kell, a sznvakok.

A frfiak 8%-a sznvak vagy szntveszt. A nknl ez az arny kevesebb mint fele ennek, de gy is jelents.

Ha valaki egyszer egy zldeskk kszlket tervez majd, eszbe ne jusson nagy piros nmegsemmist gombot rakni r.


Protanpis teszt (piros sznvak) http://aspnetresources.com/tools/colorBlindness oldalon ksztve.

A google trkpei pedig nem azrt szrkssrgk mert ez a szn volt a kedvence a dizjnereknek.

Ltsfkusz

Iskolban megtanultuk, hogy ktfle ltrendszer van, az egyik a


csapok, a msik a plcikk rendszere. A rossz hr az, hogy a csapokat olyan j szz ve nem hasznljuk, az ugyanis a sttben ltshoz val. A plcikknak viszont vltoz a felbontsa a lttren bell:

A szem felbontsaJeff Johnson knyvbl


Foveated Imaging - wikipedia

Nzzk meg ezt a videt: http://www.youtube.com/watch?v=Ahg6qcgoay4

Persze mindig azt hisszk, mi mindent lesen ltunk, ez nem igaz: az emberi lts ugyanis cache-bl dolgozik: brmilyen j terleten elszr feldolgozzuk a krnyezetet gyors, ntudatlan szemmozgsokkal, majd az agyunk ezt gy eltrolja. Hasznljuk a perifris ltst is, de csak a kontextus feldolgozsra, arra, hogy szrevegyk, ha valami vltozik, meg hogy tisztban legynk a krnyezetnkkel.


Teht a felhasznl nem ltja a dolgokat a kpernyn, ha gy gondolja, hogy valamit azon a rszen kell keresni, akkor majd keresni fogja.

Ez az elsdleges oka annak, hogy platform-konvencikat hasznlunk, s ez az elsdleges oka annak, hogy fontosabb elemeket soha, semmi esetre sem mozgatunk arrbb a kpernyn.

Tervezsi mintk

A tervezsi mintk eredete az ptszethez vezethetek vissza.

1977-ben Christopher Alexander kiadta A Pattern Language cm knyvt. rdemes visszatrni ezekhez a gykerekhez, amikor a felhasznli interfszek tervezsi mintirl beszlnk.

Mg az informatika tervezsi minti elssorban egy bels szaknyelv ltrehozsnak ignyvel kszlnek, a felhasznli interfszek sokkal inkbb rejtett nyelvknt mkdnek: attl mg, hogy nem tudja egy felhasznl a combobox nevt, fogja tudni hasznlni, ha konzisztensen ugyangy mkdik, inkbb csak rzi, semmint megfelel neki.

A tervezsi mintk konstellcik, elemeket ktnek ssze, az elemek szabadon behelyettesthetek.

A fellet-tervezsi minta legfontosabb rsze a problmadefinci. Tulajdonkpp egy tervezsi mintt a kvetkezkpp lehet lerni:

HA az a baj hogy s fennll, hogy , akkor hasznld azt hogy , gy hogy


Gyakorlati hasznuk

A tervezsi mintk egy kvetelmnyrendszer-elllt megolds. Ennek ellenre legtbbszr nem ezrt hasznljuk ket, hanem hogy:

Olyan megoldsokat hasznljunk, amiket a felhasznlk mr ismernek

Platformok kztti vltst knnytsk meg

Azonban egyik sem csodaszer: mg ha olyan mintaknyvtrat hasznlunk is, ami elvileg tesztelt, kzel sem biztos, hogy a mi felhasznlinkon. Ezrt az ltaluk hasznlt rendszerek konkurrenciatesztjt rdemes elvgezni, s ezek alapjn sszerni azok mintit. Nagyon sok kzssgi mintagyjtemny (s sajnos nhny knyv is) nem felttlenl tesztelt, mint inkbb ltvnyos megoldsokon alapszik. Egy minta gyakorisga rvidtvon nem felttlen van sszefggsben annak hasznlhatsgval!

Platformok kztti vltst is akkor knnyt meg, ha konzisztensen hasznljuk: egyfell a platformnak is vannak sajt minti (ez az Android, vagy pl. A Blackberry 10 esetn radsul ebben a formban szerepelnek a hivatalos dokumentciban is), msfell fel kell trkpezni a rendszerben hasznlt mintkat s hogy melyiknl nem rvnyes az j platformon a kontextus.


Tervezsi mintk formtuma

Ha vlasztani kell, az ltalunk ismertetett forma a quince-formtum (br hasznlhat a patternry vagy a ui-patterns formtuma is:

Problma (max 2 SMS-nyi szveg) - a problma defincija

Megolds (max 2 SMS-nyi szveg) - a megolds defincija (NEM hasznld ezt, hanem egy summs lers)

Kontextus (felttelek felsorolsa) - azok a felttelek, ahol a problma alkalmazhat

Indokls (rationale) (rszletes szveg) - annak indoklsa, a megolds mirt oldja meg a problmt

Megvalsts mdja (rszletes szveg) - lers, mire kell figyelni

Kapcsold mintk (linklista)

Szakirodalmi hivatkozsok (linklista, knyv)

Pldk (kpek, videk) - megvalsts ms rendszerekben

Tipikus buktatk

Az valsznleg nem tervezsi minta, ami egyetlen rendszerben egyszer lett hasznlva valamire. Widget lehet, tervezsi minta nem.


Az se tervezsi minta, ami pixelpontosan ugyangy nz ki: egy tervezsi mintnak rengeteg megvalstsa lehet.

Az se tervezsi minta, amely nem ad problmadefincit: az maszturbls, dizjnerkeds, de nem tervezsi minta.

A problmnak s a megoldsnak kapcsolatban kell lenni egymssal.

Quince plda

ProblemIt may not be obvious what people can or should do when starting an application or visiting a site.

SolutionGive people a set of clear entry points into the application or Web site based on their most common tasks or destinations.

Context

You can identify or already have a known set of top tasks or destinations that apply to most people.

A significant number of users will be first time users or infrequent users.


RationaleWithout clear entry points, new or infrequent users can feel lost immediately upon opening an application or site. By guiding people with clear entry points, you take the mental burden off of them to figure out what they can or should do.

This pattern only works if you have or can discover a set of the most common tasks or destinations for a large segment of your target audience. If you cant do this, the pattern actually causes more trouble because it gets in the way and doesnt really guide people to what they want to do.

Its important that most of your users be new or infrequent because, unless these are the only relevant tasks, regular users may find that clear entry points get in the way. This is an extension of the last issueif the clear entry points arent actually guiding most people to the tasks or destinations they need, they just get in the way and even add confusion.

Dont be deceived into thinking that its obvious what people should do. Many Web sites, especially, throw everything they have at people on their home pagesthe main entry point for a lot of sites. Homepages often end up being a smorgasbord of everything the organization behind it has to offer, and people are left confused and not knowing what to do or where to go. Clear entry points can help almost any Web site by hiding the internal complexities and driving them to the main destinations.

ImplementationThe trick with this pattern is successfully identifying the top tasks or destinations. If you used user-centric design, you should have already identified these as the tasks that address the key goals for your users. Use that information to design your clear entry


points.

If you didnt use user-centric design, you need to do some research, probably both internally and externally, to determine the key tasks and destinations. If your app or site already exists, looking at usage logs is a great source. You can also usually distill key tasks even from functional specs, but you should try to validate those with users or at least business stakeholders to ensure that the tasks youre selecting are in line with the key goals that the application or site serves.

Once youve nailed down your key tasks, you should consider how they need to be presented. If you have more than a handful, you should think about how you might group them visually, but remember, this should not be a replica of your main navigationit really needs to be key tasks.

Display the tasks very clearly and centrally on the starting view of your app or site. Be sure to phrase them in terms of what the user is trying to accomplish, not in terms of any fancy or branded terminology like tool names. If you can communicate the task in a few words, that is ideal, but you probably should supplement names with helpful descriptions that make it abundantly clear what people can accomplish by choosing that task or destination.

It is best not to just make these be like trap doors, where suddenly people are dropped into the middle of your solution structure. The destination they reach by choosing the task should be clearly connected to the task; this is a good start to a Wizard, but it doesnt have to be wizard-basedjust make the connection between the selected task and the view they reach by selecting the task.

If there are sub-tasks that people can jump directly into, you can consider having those be revealed when the main task is selected, but remember, this should not be a full menu or navigational scheme.


Its good practice to visually emphasize the most common tasks over the less common ones. This way most people are drawn to the most common tasks, but you can still have less common ones there for those who need them.

This main entry point view should not be surrounded by the usual navigational structure or ancillary tools/information. Hide those away to keep the focus on the entry points.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.ASP.NET

You could use the WebDialogWindow to overlay a clear entry points dialog if your solution is more application-like than informational/navigational.JavaServer Faces

You can easily implement this pattern using NetAdvantage for JSFs link component combined with the corepanel grid component. You can also use NetAdvantages themes to help with styling. See an example here.

ExamplesThis is another example from Adobe Fireworks CS4. They offer a few clear entry points--open recent, create new PNG, extend, and info/help links. Note they also let you indicate not to show that again, and of course you can just get busy in other ways, if you prefer that.

http://quince.infragistics.com/10ys


The primary example for this pattern is Live.com. Keyword searching is their users number one task, so they make it front and center with a big box. You note that they still serve other interests through less prominent links.

http://quince.infragistics.com/11fr


ING Direct uses clear entry points very effectively to drive users to their primary tasks on the site, and they also provide minimal secondary navigation for other options. Note the use of the exit chute "Learn more," which drives to a much more in depth navigation structure; this can be an option to cover those users who won't be hit by the majority scenarios you've identified.

http://quince.infragistics.com/1116


This is the starting screen for Microsoft Expression Blend. It assumes that most users, most of the time will want to start a new project, open a project, or open a site, and it also lists recent projects as the most likely destination. It uses Tab Dialogsgs to organize the top-three high-level destinationsProjects, Help, & Samples. Note also that it provides users with the option to not stop here on their way to their destination (when they open Blend) and the ability to close and instead use the main, menu-driven navigation.

http://quince.infragistics.com/11el


Infragistics sample application faceOut applies this pattern, showing a list of customers and describing what the user should do to get startedselect a customer.

http://quince.infragistics.com/10xk


Another example from music site Grooveshark. Offer clear entry points to most common usages: Music Search, My Music, Favorites.


http://quince.infragistics.com/112f

SourcesJennifer Tidwell, Clear Entry Points


TagsUsability, Navigation, Search, Information Architecture, Page Layout, Browse.

Untitled

Tipogrfia

CRAP

Robin Williams (dizjner) egyszerstse. Elszr a Non-Designers Design Book-ban jelent meg.

Proximity (kzelsg) - tmban kzel lev elemek legyenek trben is kzel, tmban tvoli elemek legyenek trben is tvol

Alignment (igazts) - minden elemnek az oldalon igazodnia kell valami mshoz

Repetition (ismtls) - az azonos dolgokat jelljk azonosan

Contrast (kontraszt) - valami legyen vagy azonos, vagy nagyon klnbz

Elmondhat, hogy jobb, ha szveget mindig csak balra igaztunk. A kzpre igaztsnak van egy csom tipogrfiai felttele amibe nem rdemes belemenni.


Vizulis hierarchia

A vizulis hierarchia azt jelenti, egyes elemeket kihangslyozunk, msokat szndkosan elnyomunk.

A vizulis hierarchia kialaktsakor azt kell figyelembe vennnk, hogy az emberek nem olvassk el a szvegeket, amiket eljk tesznk: pusztn olyan szavakat, adatokat keresnek benne, amelyek szmukra az adott helyzetben fontosnak tnnek. gy azt kell elssorban megllaptanunk, ki, mirt olvassa az adott fellet szvegeit, mire van szksge.

A vizulis hierarchinak nem lehet nagyon sok szintje, meg kell vlogatnunk, mi az az informci, amit mindenkpp meg akarunk klnbztetni a tbbitl.


Forrs: Thinking with type


Gridek

A grid egy egyszersts.

Segt betartani a vizulis hierarchit azltal, hogy gymond egy ngyzetrcsos fzetre helyezi az elemeket. Persze ez a ngyzetrcs nem is mindig ngyzetrcs:


Karl Gerstner: A Capital magazin gridje.

A gyakorlati grideknek kt(!) komponensk van:

A fggleges ritmust meghatroz baseline grid

A vzszintes ritmust meghatroz oszlopgrid

A fggleges ritmus megtartsnak alapja, hogy akrmi trtnik, egy


folyszveg mindig pontosan rilleszkedik:


Mller-Brockmann: modulris grid. A Grid-Systems in Graphic Design c. Munkjbl

A fggleges ritmus elrsre hrom mdunk van:

1. Nem piszkljuk a betmretet s -tpust, ha nem muszj

2. A sortvolsgot s az elemtvolsgot gy lltjuk be, hogy azok ne bortsk fel a gridet

3. A mreteket gy lltjuk be (a sortvolsgokkal egytt), hogy azok ne bortsk fel a gridet.

A kpekre is figyelni kell, azokat is gy kell vgni, hogy ne bortsk fel a ritmust. Erre weben lteznek knyvtrak.

Termszetesen a ritmus ignyt fellrhatjk lnyegesebb dolgok (pl. Egy kpszerkeszt programban nem vgunk a kpbl azrt, hogy ritmuson legynk, ott manapsg leginkbb brickflow megoldsokat alkalmaznak), de a sajt tartalmainkat igyekezznk ritmusban tartani fgglegesen.

A horizontlis ritmus hasbokbl ll. Az hasbok kzt csatornt (guttert) kpznk. Egy elem lehet tbb hasb szles, azonban a szlei (szveg esetn nha csak a bal szle, kp esetn mindkett) hasbszlre illeszkedjenek A webes tipogrfia sokszor megklnbztet szveg s margcsatornt:


A gridpak tervezfellete

Ebbl aztn klnfle illeszkedsek szletnek:


A vzszintes ritmust sokkal knnyebb betartani, mint a fgglegest, gy lehetleg tartsuk is be mindig.

Betklnbsgek

Betk klnbzhetnek:

Tpusban (typeface, font, bettpus) s stlusban

Mretben

Slyban (vastagsgban)

Sznben

Az alapszably: minl kevesebb vltozatot!!!


Egy oldalon 1 3 bettpus legyen.

Sznben is 2-3 szn.

rdemes megjegyezni:

A sima (regular) s a dlt (italic) bet valjban kt kln tpus azonos csaldbl

A kisbet - s nagybet is kln tpus, fejlceket, gombokat lehet nagybetkkel szedni

Bettkzs

A betkre is rvnyes a kontraszt-szably.

Betk 3 kapcsolatban llhatnak egymssal (CCC):

Contrast- egyrtelm klnbzs

Concord - egyes tulajdonsgaiban egyezs, msokban egyrtelm klnbzs (pl. Ugyanannak a betnek a dlt s ll vltozata ilyen, de van olyan bettpus, ahol csak kis, vagy csak nagybet hasznlhat, mert nem ll fenn ez a relci (Eurostile)

Conflict - ha kt bettpus tkzik.

Tipikus tkzsproblma, ha az x-magassgok nem stimmelnek. Az x-magassg a kisbetk (pl. kis x) s a nagybetk (pl. nagy I) s magas betk (kis l) magassgnak arnya.


Endnotes

Ux Tanfolyam Manuscript

Documents

Transcript of Ux Tanfolyam Manuscript