Az interaktív design alapelvei Tananyagok motion design, webdesign, interface design témákban:
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
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
3. Tanulhatóság intuitív = könnyen tanulható, felidézhető transzfer (a tanultak alkalmazása a hasonlóra)
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)
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
Kenyérmorzsák
404-es hiba
Rendszerszerű működés Észlelés Gyakorlás Transzfer Tanulás Visszajelzés
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?
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.
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
Motiváció Profil-építés Tagsági programok Tagsági státuszok Állapotsávok
Motiváció
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.
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.
Felhasználóvezetés
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).
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?
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.
első, második, harmadik, fontos, kevésbé fontos, jó, kevésbé jó,
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.
Design sablonok Újrahasznosítható könyvtárak gyakran fellépő interface design problémákra.
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
Harmonika (accordion)
Körhinta (carousel)
Előugró ablak (hop-up, lightbox)
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 http://darkpatterns.org/ 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. )
Design mintakönyvtárak
Szimbólumok, ábrák, ismétlődő minták, stílusok könyvtárai szerkesztőszoftverekben
Hatékony navigáció oldalnavigáció kereső tartalmi linkek
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.
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
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.
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ü
Oldalnavigáció vízszintes: ha a menüpontok állandó láthatósága hasznos
Oldalnavigáció függőleges: nagyszámú menüpont esetén ill. ha a hierarchikus ábrázolásuk hasznos
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
Linkek a tartalomban lapozógombok (előre, hátra ill. lapszámok) ha a tartalmat lapok sorozataként prezentáljuk
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.
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.
Kulcsszavas keresés személyre szabott ill. népszerű javaslatok (AJAX) Natural language search
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)
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
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.
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
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?
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ó.
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.
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 ).
Jelezzük az aktuális helyzetet beszédes URL-ek kartotékfülek színe kenyérmorzsák lap- vagy fejezetcímek
Használhatósági teszt Hol vagy? Hogyan kerültél ide? Hova tudsz innen menni?
Mozgás
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
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ó
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
Kogníció
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
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.
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
Behúzás és csoportosítás Pl. navigáció: oldalstruktúra reprezentálása
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
Bosszantó alertek Kérdezzünk rá: Hogyan fogalmazná meg a felhasználó az egyik ill. a másik esetet?
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)
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ő
Ikonok Absztrakt ikonok esetében fontos, hogy legyen cimkéjük IS.
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
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
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.
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!
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
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.
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
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.
Viselkedés-tervezés
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
Mi az interakció? olvasás nézés beszéd hallgatás megosztás
Honnan tudunk a lehetséges akciókról?
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
Utánzás 3D-hatás színátmenet árnyék perspektíva takarás életlenség textúra
Hogyan lehet beállítani a hangerőt? Jó: - + - + Rossz: 1 2 3 4 5 6 7 8 9 10
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.
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.
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.
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ő.
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.
Timing Kis késés megóvja a felhasználót az akaratlan interakciótól. 150-200 ms redukálja a véletlen interakciókat és még nem tűnik fel.
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 ( )
Visszajelzés
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.
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
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
Visszajelzés navigálásra
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.
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á!
User Experience Design Felhasználói-élmény tervezés
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.
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)
User Experience Usability Információs architektúra Kogníciótudomány Reklámpszichológia Marketing Grafikus design Informatika Szövegírás
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
#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
#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.
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.
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
Card sorting: szoftver / weboldal területei Firka (scribble)
Drótháló (wireframe) Mockup: konkrét, de sztatikus
Prototípusok: papírból vagy interaktív (Fireworks, Axure) 5 mp-es teszt
#3 Megvalósítás Felhasználói teszt (usability-test) Laborban Guerilla testing Remote Usability reviews szakértői vélemény
#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
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.
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 ++ +++ +