Az interaktív design alapelvei. Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Átírás

1 Az interaktív design alapelvei Tananyagok motion design, webdesign, interface design témákban:

2 1. Következetesség megjelenés, elhelyezkedés és viselkedés hasonlósága ami következetes, az nem kelt feltűnést a különbségek és változások mindig közvetítsenek jelentést

3 2. Észlelhetőség Hol van lehetőség interakcióra? felfedezése nem múlhat a szerencsén jelezzük a fizikai valóságból vett jellemzőkkel többszörös észlelhetőség: láthatóság, hallhatóság, tapinthatóság

4 3. Tanulhatóság intuitív = könnyen tanulható, felidézhető transzfer (a tanultak alkalmazása a hasonlóra)

5 4. Előrejelezhetőség Hol van lehetőség interakcióra? Mi lesz a következménye? demók, tippek, előnézetek feladatorientált interakciók Kerülendő: nem szándékos interakció találgatás (trial-and-error)

6 5. Visszajelzés Helyzetről, lehetőségekről, befejezettségről, hibáról Ne bonyolítsa vagy zavarja a tapasztalatot, egészítse ki. Minden interakció észrevehető és érthető reakciót váltson ki, pl. kiemelés alert / confirm box, eszköztipp hangjelzés

7 Kenyérmorzsák

8 404-es hiba

9 Rendszerszerű működés Észlelés Gyakorlás Transzfer Tanulás Visszajelzés

10 Kontextus Célcsoport Ki / kik használják? Helyzet Nyilvános vagy személyes környezetben használják? Időtartam Mennyi ideig használhatják? Figyelem Előfordulhat, hogy használatát megszakítják? Mekkora figyelem jut rá? Szükségletek Mik a felhasználó céljai fontossági sorrendben? Elvárások Mi az elvárt output vagy következmény? Sürgősség Azonnal teljesítendő az interakció vagy ráérősebb?

11 Need Theory (David McClelland, Ph.D.) teljesítmény iránti szükséglet tanulás és problémamegoldás valahova tartozás szükséglete közösségi kapcsolatok hatalom szükséglete elismertség, státusz, befolyás Expectancy Theory (Victor Vroom, Ph.D.) Várakozás és motiváció Ha megteszem a szükséges erőfeszítéseket, kapok egy eredményt, és motivált leszek a szükséges erőfeszítések megtételéhez.

12 Motiváció Motiváció, ami a viselkedésünket kiváltja, irányítja és fenntartja. külső motiváció: figyelem hírnév pénz belső motiváció: kíváncsiság versenyszellem segítőkészség

13 Motiváció Profil-építés Tagsági programok Tagsági státuszok Állapotsávok

14 Motiváció

15 A felhasználó bevonása Bizalom (szakértelem) Esztétika Hitelesség (szavahihetőség) Tartalom Kontextus-érzékeny design: alkalmazkodás helyzethez és szükségletekhez Kerüljük a túlautomatizálást: néha több interakcióhoz (és hibához) vezet Költséges hibák lehetősége esetén hagyjunk mindent a felhasználóra.

16 Szociális aspektusok Reciprocitás A felhasználók szeretik meghálálni, ha tettek értük valamit. Felelősség Profilazonosságot igénylő oldalakon kevesebb a haszontalan hozzászólás és a flaming. Konformitás A felhasználók követik egymás viselkedését. Autoritás Sokan követnek befolyással bíró felhasználókat (véleményvezéreket), bíznak az ajánlásaikban vagy kritikáikban.

17 Felhasználóvezetés

18 Időbeli strukturálás 1. Jelezzük előre a folyamat időtartamát. 2. A hosszabb, összetett folyamatokat osszuk több lépésre. 3. Adjunk visszajelzést a státuszról (a rész- ill. az egész folyamatból hátralévő időről).

19 Felhasználó-vezetési technikák Hány lépés van összesen / mekkora a teljes időtartam? Melyik az aktuális lépés? Hány lépés / mennyi idő van hátra a célig?

20 Tipográfia A fejezet- és alfejezetcímek, a sorközök, a behúzások és felsorolások segítik megtalálni a kulcspontokat. A betűtípusok gondos megválasztása, a betűstílusok visszafogott használata segít az orientációban.

21 első, második, harmadik, fontos, kevésbé fontos, jó, kevésbé jó,

22 Tapasztalat Minden, amit megtanulunk, segít új interface-ek működésének felderítésében. Hogyan szűkítünk le egy találati listát? Hogyan léptetünk számot egy zenejátszón? Hogyan jelölünk ki egy elemet, pl. áthelyezéshez? Mi történik, ha a felhasználói elvárásoknak nem teszünk eleget? Azaz pl. váratlan hely váratlan időpont hiányos struktúra Nő a gondolkodási idő és a lemorzsolódás.

23 Design sablonok Újrahasznosítható könyvtárak gyakran fellépő interface design problémákra.

24 A design sablonok különböző helyzetekben megfigyelt problémákból erednek megengedik, hogy időnket más design-problémákra szánjuk Evolúció sikeres design megoldások konvenciók szabványok

25 Harmonika (accordion)

26 Körhinta (carousel)

27 Előugró ablak (hop-up, lightbox)

28 Rossz sablonok Jó megoldások szolgai másolásból erednek (nincsenek az új kontextushoz igazítva), és csak akadályozzák a munkát. Pl. Idiot box Megszakítja a munkát, hogy olyasmit közöljön, amit a felhasználó már tud, vagy hogy olyasmire kérdezzen rá, ami már eldöntetett. Félrevezető sablonok Olyan akciót provokálnak ki, amelyet másképpen nem tennénk meg. popup X-gombja (nem bezár, hanem URL-t hív meg) a hordozó weblap részének tűnő banner (pl. download-gomb), ami egy távoli szerverrel való interakciót vált ki hamis figyelmeztetések ( Számítógépe vírust kapott, töltse le ezt meg azt. )

29 Design mintakönyvtárak

30 Szimbólumok, ábrák, ismétlődő minták, stílusok könyvtárai szerkesztőszoftverekben

31 Hatékony navigáció oldalnavigáció kereső tartalmi linkek

32 Sitemap Mélység A site bármelyik lapja ne legyen mélyebben 3 kattintásnál ilyen ökölszabályok helyett figyeljünk a haladásra. Ha minden kattintás után megerősíttetik, hogy közelebb került a célhoz, akkor a site nem túl mély.

33 Taxonómia Példányok kategorizálása; kategóriák hierarchizálása. Ország Törzs Altörzs Osztály Rend Webáruház Lábbeli Férfi Sport Futó Család Nemzetség Nem

34 Metaadatok Körülírják a tartalmat, de nem részei a taxonómia struktúrájának. tagek cimkék leírások attribútumok Segíthetnek leszűkíteni pl. egy találati listát.

35 Oldalnavigáció mindenhonnan elérhető, mindig ugyanott van tudatja a felhasználóval aktuális helyzetét és lehetőségeit pl. állandó oldalsáv vagy vízszintes sáv mobilon gombból legördülő menü, vagy lábléc-menü

36 Oldalnavigáció vízszintes: ha a menüpontok állandó láthatósága hasznos

37 Oldalnavigáció függőleges: nagyszámú menüpont esetén ill. ha a hierarchikus ábrázolásuk hasznos

38 Linkek a tartalomban szöveglinkek használatukat oktatni nem szükséges ( akkor kattintson ide), de színnel és / vagy aláhúzással jelezzük őket Gombok, kartotékok hover és active státuszukat színnel / háttérszínnel / elmozdítással jelezzük

39 Linkek a tartalomban lapozógombok (előre, hátra ill. lapszámok) ha a tartalmat lapok sorozataként prezentáljuk

40 Idő A hírportálok, fórumok és közösségi hálózatok megfordították a hagyományos kronológiai elrendezést.

41 Keresés és szűrés A felhasználónak ne kelljen keresgélnie, és szolgáltassuk azt és ott, amire-ahol szüksége van.

42 Kulcsszavas keresés személyre szabott ill. népszerű javaslatok (AJAX) Natural language search

43 Rendezés és szűrés Rendezés (nem csökkenti a találatok számát) időrendi, ábécés, ár, értékelés alapján Szűrés (csökkenti a találatok számát) pl. csak L méretű, kék, pamut ingek (subtractive filtering) pl. M vagy L méretű, kék, pamut ingek (additive filtering)

44 Találatok prezentálása Felsorolás hír- és információs portálok Rács áruházak, képmegosztók Táblázat légitársaságok, utazási oldalak Hibrid vegyes tartalmat megjelenítő keresőmotorok

45 Infinite scrolling Mielőtt elérném a lap alját, automatikusan újabb tételek töltődnek be, a lap megnyúlik. Takarékos a sávszélességgel, és a felhasználót továbbolvasásra ösztönzi. Alternatíva: a lap alja elérhető, és gombnyomásra tölthető be újabb tartalom.

46 Shortcuts A hiperlink eredeti koncepciója az volt, hogy minden összeköthető legyen minden kapcsolódó tartalommal. Böngészünk így is, de általában tudjuk, mit akarunk, ezért útlevágások kellenek: kontextus-menük dinamikus rétegek

47 Tartalmi rétegek Már nemcsak előre- és hátralépésekben gondolkodunk, hanem felfelé és lefelé irányuló mozgásban is. Az információ rétegzett. Az egész képernyőt lefedje a réteg? Mozgatható legyen? Hogyan lehessen bezárni?

48 Rétegek halmozása A legfelső réteg az alatta lévővel tartalmi és funkcionális kapcsolatban van. Minden réteg bezárható. Esetleg a réteg oldalra mozdítható.

49 Scent of Information (Peter Prirolli, Ph. D.) Az információ ösvényeit követjük. Ha ez valahol megszakad, visszatérünk az elejére, hogy másik csapást találjunk. Mindig megpróbáljuk megtalálni az élelemhez vezető legrövidebb utat.

50 Helyzetérzékelés Ha ritkán használják a vissza-gombot, helyzet-érzékelésük erős. Ha gyakran lapoznak vissza, hogy újraorientálódjanak, vagy ha véletlenszerűen követnek linkeket, helyzet-érzékelésük gyenge. A gyenge helyzet-érzékelés nem a kedvtelésből folytatott böngészés ( surfing ).

51 Jelezzük az aktuális helyzetet beszédes URL-ek kartotékfülek színe kenyérmorzsák lap- vagy fejezetcímek

52 Használhatósági teszt Hol vagy? Hogyan kerültél ide? Hova tudsz innen menni?

53 Mozgás

54 Tipikus esetei Figyelem felhívása forgás, rázkódás, pulzálás, szín- vagy tónusváltozások pl. agresszív bannerek, pop-upok, feltűnő képváltók Információ elrejtése és megjelenítése flyout- és pulldown-menü popup be- és kihajtható oldalsáv accordion caroussel Információ rendezése pl. információ egyik kategóriából a másikba helyezése drag n drop: felhasználó által történő rendezés

55 Videó A mozgókép vonzza a figyelmet. A hírvideó, a film, a felhasználók által generált videó gyakran a legfontosabb tartalom a lapon. kerülendő: automatikus lejátszás javasolt: letöltési / státusz-infó

56 Vizuális hierarchia Kontraszt Szín magas kontraszt, nagy méret érzékenység sárgára és narancsra Fehér területek a sok fehérrel körülvett tartalom kiemelődik Képek, grafikák előbb vonzzák a figyelmet, mint a szövegdobozok Mozgás ha vmi a környezetünkben megmozdul, nehéz nem odapillantani

57

58 Kogníció

59 Kogníció Eredetileg: az információ megszerzésének és feldolgozásának folyamata. Tágabb értelemben: minden olyan művelet összessége, amellyel az egyén a külvilágát értelmileg felfogja. észlelés és figyelem emlékezet nyelvi képességek mentális képalkotás elméletalkotás minta-, szabályfelismerés képzett társítás logika

60 Kognitív előítéletek Hogy ne kelljen mindig dolgozni, az agy sok előfeltételezést használ, ami az esetek egy részében kontraproduktív lehet. Hiába tudunk róluk, nehéz elkerülni. Kiváltói: helyes elmélet alkalmazása rossz példára gyors reagálás (a túlélés érdekében) észlelés torzulása korlátozott kapacitás vagy képességek Ha megismerjük, miért lépnek fel kognitív előítéletek, redukáljuk a rossz választásokat. Az elkülönülő elemre jobban emlékszünk. Amit már ismerünk, szeretjük.

61 Cimkék és ikonok hatékony helykihasználás felfogásukhoz használjuk emlékezetünket, nyelvi képességeinket, alakfelismerésünket és képzett társításokat

62 Behúzás és csoportosítás Pl. navigáció: oldalstruktúra reprezentálása

63 Szövegcimkék legyenek egyértelműek és egy lépésben felfoghatók igék, akár felszólító módban ne változzanak, ha ugyanarról tájékoztatnak vagy ugyanoda vezetnek

64 Bosszantó alertek Kérdezzünk rá: Hogyan fogalmazná meg a felhasználó az egyik ill. a másik esetet?

65 Képek parancsgombokon, navigációban felismerhető, jelentéssel bíró, megtippelhető cimkék vagy eszköztippek tovább könnyíthetik a tanulást (haladó felhasználók hadd kapcsolják le)

66 Ikonok szimbolikus vagy analóg alakjában hasonlít a reprezentált dologra absztrakt alakja asszociációra épít az értés (jobban) kultúrafüggő

67 Ikonok Absztrakt ikonok esetében fontos, hogy legyen cimkéjük IS.

68 Mentális modell Az egyén belső képe a külső valóságról, a dolgok működéséről. Mindannyian tudjuk, hogyan kell használni ezt: kinyitom, lapozok benne, elolvasok egy bejegyzést, vagy beírok egy nevet, + egy címet, + egy vagy több telefonszámot

69 Mentális modellek Digitális címtár tervezésekor ennek hasonlatára készíthetünk olyan interface-t, amelyben lapozhatunk betű szerint kereshetünk tételhez tartozó információkat jeleníthetünk meg és vihetünk fel és ezen kívül képet csatolhatunk a tételhez kategóriákba sorolhatjuk a tételeket rendezhetünk családi, vezetéknév vagy kategória szerint rákereshetünk szövegre

70 Rendszermodell A rendszermodell leírja az adatbázis struktúráját a kereső- és rendező algoritmusokat és az adatátviteli szabványokat A rendszermodellnek a felhasználó számára nem kell látszania.

71 Rendszermodellek Ideális esetben a mentális modell és az interface rendszermodellje hasonló. Ha nem hasonlítanak, gyakran amiatt, mert a tervezője mélyebb ismeretekkel rendelkezik az eszközről, és a felhasználó számára koncepciói kevésbé egyértelműek. KATTINTS IDE!

72 Rendszermodellek Keressük az információk reprezentációit! Ismerjük meg, hol számítanak a felhasználók információra! Azonosítsuk be az események lépéseit, amelyekre számítanak. Szolgáltassunk mindig olyan eredményt, amilyenre szükségük van. Vásárlás lezárásának mentális modellje Belépés (vásárló azonosítása) Szállítási cím megadása Fizetési mód és adatok Összefoglalá s és nyugta

73

74 Kognitív terhelés Az információk megértésébe, döntések meghozatalába és problémák megoldásába fektetett erőfeszítés mértéke. Ha vmit nem a könnyen érthetően adunk át, kognitív terhelést okozunk. Ha túl sok gondolkodnivalót adunk (vagy túl gyorsan), vagy túl sok mindenre kell emlékezni (esetleg túl sokáig), felhasználónk figyelmen kívül hagyhat, elfelejthet vagy félreérthet információkat. Amikor cél nélkül megváltozik vmilyen tartalom vagy funkció, vagy azonosnak tűnik két tartalom vagy funkció, de másképpen működik, akkor agyát erőltetnie kell és lelassul.

75 A figyelem korlátozott erőforrás. Nem lehet mindenre egyszerre figyelni, fókuszálnunk kell. Strukturáljunk, hierarchizáljunk és irányítsuk a figyelmet arra, ami épp a legfontosabb. Az emlékezet korlátozott erőforrás. Adott pillanatban a rövid távú emlékezetünkben tárolt információk száma igen korlátozott. Ha több az információ, mint a kapacitás, valamit elfelejtünk. Recall (információ felhívása) vs. Recognition (újrafelismerés) - könnyebb

76 Az újrafelismerés könnyebb Csak akkor tegyünk elérhetővé információt / funkciót, amikor szükség van rá! Oda tegyük, ahol számítanak rá! A megjelenítésben építsünk meglévő ismereteikre (ikonok)! Okos alapértelmezések Kontextuson és előzményeken alapulnak. Valószínűség esetén lépnek működésbe. Könnyű változtatás, ha szükséges.

77

78

79 Viselkedés-tervezés

80 Mi az interakció? 1. definíció: Mit tesznek? Mérhető akciók: egér-interakciók érintőképernyő-interakciók egyéb gesztusok gépelés

81 Mi az interakció? olvasás nézés beszéd hallgatás megosztás

82 Honnan tudunk a lehetséges akciókról?

83 Elvárások a kiemelkedő dolgok le-/megnyomhatók a hengeres dolgok forgathatók a vájatba helyezettek csúsztathatók a rovátkázott dolgok vmit szabályoznak

84 Utánzás 3D-hatás színátmenet árnyék perspektíva takarás életlenség textúra

85 Hogyan lehet beállítani a hangerőt? Jó: Rossz:

86 Tanulás Korábban a drag n dropot el kellett magyarázni a felületeken. A mai felhasználók tapasztalatukra hagyatkozva kipróbálják.

87 Bevitel Implicit (passzív vagy környezet-érzékelés) Az eszköz szenzorai automatikusan érzékelnek, rögzítenek vagy gyűjtenek információt. Explicit (aktív) A felhasználó aktívan információkat ad meg egy interface-en.

88 Automatikus adatgyűjtés fényszenzor (photometer) GPS és elektronikus iránytű mikrofon gyorsulásérzékelő (accelerometer) RFID, NFC, WiFi, Bluetooth Az eszköz a feladatsor egyes lépéseinek automatizálásával megkönnyíti az interakciót.

89 Automatikus adatgyűjtés kifejezett gombnyomás automatikus mikrofon bekapcs hangfelvétel továbbítás hanghullámelemzés adatbank átkutatása találat továbbítása mikrofon kikapcs találat megjelenítése modell HALLGAT GONDOLKO DIK FELISMER PREZENTÁL Csak akkor kérjünk utasítást a felhasználótól, ha több ésszerű lehetőség van. Csak olyan információkat kérjünk be, ami automatikusan nem megszerezhető.

90 Célok (targetek) helye Fitt és Meyer törvénye: Közeli és nagy célt eltalálni könnyebb, mint távoli és kicsi célt. A legkönnyebb cél az, ami már a kurzor alatt van (a legveszélyesebb is). Szintén gyorsan elérhető: sarkak és élek.

91 Timing Kis késés megóvja a felhasználót az akaratlan interakciótól ms redukálja a véletlen interakciókat és még nem tűnik fel.

92 Hover intent Mérjük a kurzor sebességét és gyorsulását. Ha állandó, vagy gyorsul, akkor a felhasználó csak átutazóban van az elem fölött, hogy máshova jusson. Ha lassul, vagy megállt, akkor a felhasználó szándékosan ide jött; aktiváljuk a hover-viselkedést. Érintőképernyős eszközökön (egér nélkül) NINCS hover. Ezért az érintő interface-eken a kifejezett (explicit) gesztusokra helyeződik a hangsúly. tap, double tap (koppintás) swipe, drag, multi-finger drag (koppintás-húzás) press (nyomvatartás) press and tap, rotate (nyomvatartás-és-koppintás, forgatás) pinch, spread ( )

93

94 Visszajelzés

95 Visszajelzés Hely (Hol vagyok? Merre jártam eddig?) Idő (Mi a státuszom? Várjak még egy kicsit? Kész vagyok? Mi következik?) Jelentés (Mit jelent az output?) Ha az eredmény pozitív, megtanuljuk és ismételgetjük a kiváltóját. Időzítés: rögtön az akciót követően.

96 Visszajelzés formája Vizuális Direkt: pl. üzenet Környezeti: pl. szín Auditív Ticking, beeps, buzzes Vidám és szomorú hangok (hangszín, hangköz) Haptikus pl. vibráció Force feedback

97 Hang Értesítő Értesítő Tada Felkiáltás Téves beszédfelismerés Hardware be és ki Felhasználó be és ki Gyenge telep Kritikus leállás Lomtár

98 Visszajelzés navigálásra

99 Státusz és haladás Minden folyamatról adjunk visszajelzést, és ha lehet, közöljük a hátralévő időt (pl. adatmennyiség és átviteli sebesség alapján). Ha nem lehet előrejelezni a hátralévő időt, legalább arról adjunk visszajelzést, hogy a folyamat halad.

100 Hibaüzenetek 1. Írjuk le, mi történt! 2. Minél előbb adjuk le a hibaüzenetet! 3. Ne hibáztassuk a felhasználót! 4. Tegyünk javaslatot a hiba elhárítására! 5. Validálás: mezőnként vagy laponként. 6. Minden visszavonhatatlan döntésre kérdezzünk rá!

101 User Experience Design Felhasználói-élmény tervezés

102 Tények A mai vásárlók alaposan utánanéznek minden kütyünek, szoftvernek mielőtt pénzt adnak ki. Nem lehet nekik akármit eladni. A UX fontosabb, mint valaha.

103 Fogalmak Ergonómia ('40-es évek) Webergonómia ('90-es évek) HCI (60'-as évek) Interface Design ('80-as évek) User Centered Design, majd User Experience (1995)

104 User Experience Usability Információs architektúra Kogníciótudomány Reklámpszichológia Marketing Grafikus design Informatika Szövegírás

105 Munkamenet Kis ciklusokban dolgozni, sok teszttel (visszacsatolással). Klasszikus webprojekt: Koncepció Design Programozás Élesítés Mai webprojekt: Kutatás Teszt Ötletek Koncepciók Felhasználói teszt Vázlatok Prototípus Design Teszt Prototípus Programozás Teszt Élesítés

106 #1 Ötletelés Kérdőívek, felhasználói naplók, fókuszcsoportok Terepmunka (megfigyelés) Feladat-elemzés Konkurencia elemzése Analytics, Alexa, Statista adatainak kiértékelése

107 #2 Koncepció Perszónák User story: szcenárió arról, hogy mit csinál egy tipikus ügyfél egy átlagos használat során. Mint szerep szeretnék cél, hogy haszon. Szabadidejében sportoló magánszemélyként szeretnék training-szereléseket összehasonlítani, amelyekkel télen a szabadban sportolhatok. Use case: Szeretnék egy terméket vásárolni.

108 User story: Mobilhasználó vonattal közlekedőként szeretnék automatikusan értesülni a késésekről, hogy igazítsam a terveimet. Use case: Szeretnék vasútjegyet vásárolni.

109 Customer Journey: ügyfélút a termékkel (márkával) való első találkozástól a vásárlásig; a teljes élmény. AdWords-hirdetés, banner Ügyfél olvasmányai: cikkek, közösségi oldalak Ajánlás, hírlevél Látogatás / vásárlás utáni élmények: visszaigazolás, küldemény követése, termék kicsomagolása, használatba vétel, terméktámogatás igénybevétele, hosszabb távú használat, az ő vélemény-nyilvánításai

110 Card sorting: szoftver / weboldal területei Firka (scribble)

111 Drótháló (wireframe) Mockup: konkrét, de sztatikus

112 Prototípusok: papírból vagy interaktív (Fireworks, Axure) 5 mp-es teszt

113 #3 Megvalósítás Felhasználói teszt (usability-test) Laborban Guerilla testing Remote Usability reviews szakértői vélemény

114 #4 Élesítés Felhasználói teszt (usability-test) A/B-tesztek Analytics Körkérdések Visszhang a közösségi médiumokban

115 Rossz: leültetni 15 felhasználót egy teremben. Rosszabb: leültetni 5 UX-tervezőt egy teremben. Jó: a UX-tervező terepen figyeli meg a felhasználók viselkedését. 1. A felhasználók nem azt mondják, amit a valóságban csinálnak. 2. A felhasználók ritkán találnak ki új megoldásokat.

116 Módszer Erőbedobás / Időköltség Összetettsé g Haszon Felhasználó kérdezése + ++ Perszónák + ++ Kártyák Firkák Dróthálók Felhasználói teszt Szakértői vélemény A/B-tesztek