Mobil felhasználói élmény tervezés

833 views
799 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
833
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mobil felhasználói élmény tervezés

  1. 1. Mobil felhasználói élmény<br />Web és eSzolgáltatások<br />2011. Április 18.<br />Lajtha András Balázs<br />BME TMIT<br />lajtha.balazs@tmit.bme.hu<br />
  2. 2. Tartalom<br />Ergonómia és használhatóság<br />Használhatatlanság<br />Felhasználói élmény meghatározása<br />Okostelefon-élmény<br />Élmény tervezése okostelefonra<br />Felhasználók bevonása<br />
  3. 3. ?<br />Mi a felhasználói élmény<br />Miért fontos a felhasználói élmény<br />Hogyan készítünk felhasználói élményt<br />
  4. 4. Előzmények: ergonómia és használhatóság<br />
  5. 5. Ergonómia<br />Ergonomics is the study of designingequipment and devices that fit the human body,its movements, and its cognitive abilities.<br />1950: fogantyúk és skálák<br />1960: rendszerek<br />1970: termékek<br />1980: szoftverek<br />Ergos – ember<br />Nomos – törvény<br />Három fő faktor:<br />Biztonság<br />Hatékonyság<br />Komfort<br />
  6. 6. Emberi információ-feldolgozás<br />Érzékelés: nyers adat<br />Észlelés: testek, formák, szöveg<br />Figyelem: http://www.youtube.com/watch?v=Ahg6qcgoay4<br />Emlékezés: kategóriák, hierarchiák, asszociációk<br />Gondolkodás: következtetések, előrelátás<br />Beavatkozás<br />
  7. 7. Emberi információ-feldolgozás hibái<br />Érzékelés: nem oda nézünk<br />Észlelés: nem ismerjük fel<br />Figyelem: nem tulajdonítunk neki jelentőséget<br />Emlékezés: nem követjük<br />Gondolkodás: …<br />Beavatkozás: elmarad/sikertelen a cselekvés<br />
  8. 8. Ergonómiai feladata<br />Az emberi hibák megakadályozása<br />Hátfájástól az atomerőmű-katasztrófáig<br />Autók holttere<br />Műszerek elhelyezése<br />Címkék …<br />
  9. 9. Használhatóság<br />„The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use.” [ISO 13407]<br />Egy eszköz használhatósága az eszköz segítségével egy adott feladat elvégzésének hatásossága, hatékonysága, és az ebből fakadó felhasználói elégedettség.<br />
  10. 10. Ergonómia és használhatóság<br />Ergonómia<br />Illeszkedés az emberhez<br />Biztonság<br />Hatékonyság<br />Konfort<br />Használhatóság<br />Illeszkedés az emberhez és a feladathoz<br />Hatékonyság<br />Elégedettség<br />
  11. 11. Használhatóság négy fő lépése<br />A használat kontextusának meghatározása<br />A felhasználó és a munkafolyamat meghatározása<br />Tervezés<br />Terv értékelése a feltételek alapján<br />
  12. 12. Labdák és dobozok<br />Használhatóság nem mindig jó<br />InternalizálásvsExternalizálás<br />A játék szabályai elérhetőek a felületen<br />A játék vezérlése tükrözi a szabályokat<br />Kezdeti sikertelenség után az internalizált felhasználók jobban teljesítettek a játékokban<br />A usability célja nem az, hogy a gép elvégezze a feladatot, hanem hogy az embert a gép a legjobban segítse<br />
  13. 13. Használhatatlanság – visszaélés a használhatósággal 1.<br />http://wiki.darkpatterns.org/<br />Roach Motel<br />Privacy Zuckering<br />Bait and Switch<br />Sneak into Basket<br />Forced Continuity<br />Trick questions<br />Hidden costs<br />Price Comparison Prevention<br />Disguised Ads<br />Friend Spam<br />Forced Disclosure<br />Misdirection<br />Faraway bill<br />Láthatatlan reklámok<br />Bezárhatatlan popupok<br />Letöltő letöltése<br />
  14. 14. Használhatatlanság – visszaélés a használhatósággal, Norton<br />
  15. 15. Használhatatlanság – visszaélés a használhatósággal, Ryanair<br />
  16. 16. Használhatatlanság – visszaélés a használhatósággal 4.<br />Célok<br />Látogatottság növelése<br />Felhasználói bázis növelése<br />Eladások növelése<br />Személyes adatok megszerzése<br />Még rosszabb dolgok…<br />Eszközök<br />Nem ergonómikus gombok<br />Irányított kérdések<br />Szándékosan bonyolult wizzard<br />Rosszul fogalmazott oldal<br />Ágas bogas menü, súgó hiánya<br />Eredmény<br />Gyors, látványos eredmények<br />Hosszú távon negatív felhasználói visszhang<br />
  17. 17. Használhatatlanság – következmények<br />
  18. 18. Felhasználói élmény<br />http://erstebank.hu/hu/index.html<br />http://www.axabank.hu/<br />http://www.zuno.eu/<br />
  19. 19. Felhasználói élmény 1.<br />„A person's perceptions and responses that result from the use or anticipated use of a product, system or service.” [ISO 9241-210] <br />A felhasználó véleménye a használt, vagy használni vágyott termékről, szolgáltatásról.<br />
  20. 20. Felhasználói élmény 2.<br />Felhasználói élmény<br />Interdiszciplináris<br />Homályos célok<br />Szubjektív megítélés<br />Kísérleti eszközök<br />Hiányzó szabványok<br />Alakuló módszertan<br />Használhatóság<br />Mérnöki terület<br />Definiált célok<br />Metrikák<br />Ismert eszközök<br />Szabványok<br />Módszertan<br />
  21. 21. Felhasználói élmény 3.<br />Összkép a reklámtól a kukáig<br />Marketing<br />Közvélemény<br />Értékesítés<br />Csomagolás<br />Termék<br />Szolgáltatások<br />Ügyfélszolgálat<br />Csere/kidobás<br />
  22. 22. Felhasználói élmény 4.<br />Az élmény a termék!<br />
  23. 23. Mi a mobil felhasználói élmény?<br />
  24. 24. Történeti áttekintés 1.<br />1970 1980 1990 2000 2010<br />
  25. 25. Történeti áttekintés 2.<br />
  26. 26. Történeti áttekintés 3.<br />Android<br />iPhone<br />
  27. 27. Mobil felhasználói élmény<br />~1975 Tudok telefonálni!<br />~1985 Tudok a buszon telefonálni!<br />~1995 SMS, kígyó, kék háttérvilágítás<br />~2000 Olyan telefonom van, mint Neonak!<br />~2005 Polifónikus (később MP3) csengőhang, színes Java játékok, QWERTY SMS-ezés, fényképezőgép, WAP, MS!<br />2010 Okostelefonom van?<br />
  28. 28. Okostelefon élmény<br />Telefon?<br />Eszköz?<br />Játék?<br />Divatcikk?<br />Önkifejezés?<br />Ruházati kiegészítő?<br />Testrész?<br />
  29. 29. iPhone élmény<br />Apple élmény<br />Kerek telefon<br />Kivéve a dobozból tökéletesen használható<br />Már kézben tartani is élmény<br />Kifinomult ergonómiai, használhatósági megoldások<br />Gördülékeny, akadásmentesélmény<br />(Windows Phone élmény)<br />
  30. 30. Android élmény<br />Google élmény<br />Kockatelefon<br />Magas testreszabhatóság<br />Allwayson hálózati modell<br />Nem annyira a „hogyan”, hanem a „mit” a fontos<br />Mindent meg lehet vele csinálni<br />
  31. 31. (Két iPhone vásárló)<br />http://www.youtube.com/watch?v=FL7yD-0pqZg<br />http://www.youtube.com/watch?v=qVzm8vVjHGs<br />
  32. 32. Felhasználói élmény készítése<br />
  33. 33. Felhasználói élmény fejlesztés<br />Hagyományos fejlesztés: requirementanalysis<br />Követelmények<br />Fejlesztés<br />Követelmények teljesülésének ellenőrzése<br /><ul><li>Élmény fejlesztés</li></ul>Személyes kommunikáció fejlesztő és megrendelő közt<br />Nagy fokú dekomponálás, inkrementális fejlesztés<br />Iteratív fejlesztés<br />Gyors reagálás a változó körülményekre: agilis fejlesztés<br />
  34. 34. Élmény tervezés 1.<br />Analitikus<br />Ergonómia<br />Esztétika<br />Pszichológia<br />Empirikus<br />Ötletek, próbálkozások<br />Gondolatkísérletek (Mi lenne ha?)<br />Felhasználók bevonása<br />
  35. 35. Élmény tervezés 2.<br />Célok<br />Inger kiváltása<br />Érzelem, érzés kiváltása<br />Vágy<br />Birtoklás<br />Biztonság<br />Bizalom<br />Izgalom<br />Elégedettség<br />Sikerélmény<br />Függőség<br />Undor http://www.youtube.com/watch?v=bLROmGMSJlY<br />Eszközök<br />Interakció<br />Felület<br />Nyelv, metaforák, asszociációk<br />Mozgás<br />
  36. 36. Interakció tervezés 1.<br />Definesthe structure and behavior of interactive systems. Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond.<br />Ember és gép kapcsolatának tervezése, elkészítése.<br />
  37. 37. Interakció tervezés 2.<br />Akció végrehajtás értékelési kör<br />Ki irányít?<br />Az interakció során a felhasználó a céljai elérésére használja a rendszert<br />A felhasználó a rendszer eseményeire reagál<br />A szereplők különböző nyelveket beszélnek, másként gondolkodnak<br />Nyelvek megfeleltetése<br />Mentális modell: a felhasználó képe a rendszerről<br />Értelmezési távolság: a feladat és a lehetőségek közt<br />Jelzési távolság: látszat és valóság közt<br />
  38. 38. Interakció tervezés 3.<br />Affordancia<br />A felületi elem azon tulajdonsága, melynek segítségével művelet végezhető rajta<br />A művelet várt kimenete<br />Interakciós stílusok<br />Kérdés-felelet<br />Űrlap kitöltés<br />Menü alapú<br />Parancssoros<br />Szabad szavas<br />Grafikus<br />Egyedi kezelőszervek<br />Webes (linkek, keresés)<br />
  39. 39. Mobil felületek<br />
  40. 40. Mobil felülettervezés – lehetőségek<br />Érintő-felület<br />Több érintési pont<br />Szenzorok - http://www.youtube.com/watch?v=6nKSKA-gsco<br />Hang-parancsok<br />Kamera és AR<br />Eyetracking<br />Rezgés és hang-visszajelzés<br />
  41. 41. Mobil felülettervezés – korlátok<br />Kis kijelző<br />Kis felbontás<br />Nehezen elérhető pontok<br />Érintőtelefonoknál a felhasználó is takar<br />Pontatlan érintés<br />Nincs mouse-over, nincs jobb-kattintás, nincs Shift, nincs Ctrl…<br />Többpontos érintés bizonytalan, nehezen lehet „megtalálni”<br />
  42. 42. Mozgás<br />
  43. 43. Metaforák, szimbólumok<br />„Drag & Drop”<br />
  44. 44. Köret<br />Márka integritása<br />Marketing<br />Értékesítés<br />Csomagolás - http://www.youtube.com/watch?v=EUXnJraKM3k<br />Üzleti modell<br />Terméktámogatás<br />Csatolt szolgáltatások<br />
  45. 45. Hab a tortán<br />Státusz<br />Közösség<br />
  46. 46. Felhasználók a fejlesztésben<br />
  47. 47. Kik a felhasználók?<br />Fontos a felhasználók meghatározása<br />Releváns csoportok<br />A felhasználókat nem a koruk, nemük, végzettségük osztja meg, hanem az alkalmazás<br />Csoportonként 5 felhasználó már releváns<br />A bűvös szám a 12<br />
  48. 48. Okostelefonok Magyarországon 1.<br />(<br />Akiknek nincs okostelefonja<br />47% szeretne, 22% tervezi hogy vesz<br />53% nem is szeretne<br />Aki szeretne okostelefont<br />25% a funkciók miatt<br />23% az újabb technológia<br />16% kíváncsiság<br />15% nagyobb kijelző<br />
  49. 49. Okostelefonok Magyarországon 2.<br />1.3-2 millió okostelefon<br />Ezek közül 400.000 tényleg „okos” (iPhone, Android)<br />1.35 millió mobil internet előfizetés<br />900.000 aktív előfizetés, ebben benne vannak az USB modemek is<br />1.3GByte/fő<br />Mobiltelefonról bonyolított forgalom 2%-a a teljes internetnek<br />
  50. 50. )<br />Okostelefonok Magyarországon 3.<br />Az okostelefon tulajdonosok 36% nem tudja, milyen operációs rendszert futtat<br />A felmérésben résztvevők 38%-a tudja mi az az Android<br />Az iPhone felhasználók fele nem töltött még le alkalmazást<br />
  51. 51. Felhasználók bevonása a fejlesztésbe<br />A felhasználói élmény a felhasználón mérhető<br />A felhasználó nem racionális<br />A felhasználó nem tudja, mire vágyik<br />A felhasználó nem tudja megfogalmazni az élményt<br />A felhasználó nem mérnök, nem designer<br />Nem tudja, hogyan kell megcsinálni az alkalmazást<br />Nem tud felületet tervezni<br />
  52. 52. Tervezés a felhasználóval<br />A felhasználó nem fog alkalmazást tervezni<br />Igényfelmérés, interview-k, kérdőívek<br />Walmart (2009, 1 milliárd dolláros veszteség)<br />Alkotmány<br />Előzetes tesztelés<br />Papír prototípus http://www.youtube.com/watch?v=5KTiuA2FNbU<br />Wireframe<br />Flash, flex – nem csak prototípus, hanem v0.5<br />
  53. 53. Tesztelés felhasználóval<br />Kvalitatív/kvantitatív<br />Összegző/formáló<br />Analitikus/empirikus<br />Módszerek<br />Inthewild tesztelés, antropológiai vizsgálat<br />Felügyelt tesztelés<br />Remote tesztelés<br />Analitika, névtelen statisztikák<br />
  54. 54. Experiencefromexperience!<br />A felhasználó nem terméket szeretne, hanem élményt!<br />A felhasználói élmény előállításához gyakorlat kell<br />Felhasználói<br />Fejlesztői<br />A mérnök nem átlagos felhasználó!<br />
  55. 55. Köszönöm a figyelmet!<br />

×