tananyag.html

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

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

Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

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

Tanulás

Transzfer


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.” Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

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. Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

• 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.”) Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

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. Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

Taxonómia Példányok kategorizálása; kategóriák hierarchizálása. Ország

Webáruház

Törzs

Lábbeli

Altörzs

Férfi

Osztály

Sport

Rend

Futó

Család Nemzetség Nem Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

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 Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

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  magas kontraszt, nagy méret

 Szín  é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 Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

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. Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

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 Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

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 Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

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! Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

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 Webdesign, és lelassul. interface design tananyagok: timetodesign.hu/tananyag.html

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 Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

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 Webdesign, vmit szabályoznak interface design tananyagok: timetodesign.hu/tananyag.html

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 Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

+



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 automatikus

modell

gombnyomás mikrofon bekapcs

hangfelvétel

HALLGAT

továbbítás

hanghullámelemzés

adatbank átkutatása

GONDOLKO DIK

FELISMER

találat továbbítása

mikrofon kikapcs

találat megjelenítése

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ő. Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

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. 150200 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 (…) Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html


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’ Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

Hang  Értesítő

 Téves beszédfelismerés

 Értesítő

 Hardware be és ki

 „Tada”

 Felhasználó be és ki

 Felkiáltás

 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 Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

#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 Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

#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. Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

• 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 Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

• 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. Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

Erőbedobás / Időköltség

Összetettsé g

Haszon

Felhasználó kérdezése

+

○

++

Perszónák

+

○

++

Kártyák

+

+

++

Firkák

○

+

+++

++

++

++

Felhasználói teszt

+++

+++

+++

Szakértői vélemény

+

+++

++

++

+++

+

Módszer

Dróthálók

A/B-tesztek


tananyag.html

Recommend Documents