Élményarchitektúra J.J. Garrett nyomán
- 1. Élményarchitektúra J.J.Garrett nyomán Minkó Mihály SZTE
- 2. Közelítés • J.J.Garrett: TheElements of User Experience, 2002, Aiga, New Riders • A felhasználó (i élmény) helye a szoftver- és weblaptervezésben • Fogalmi zavarok és okaik
- 4. A stratégia meghatározása •Mint cég mit várunk weboldalunktól? -> Stratégiai cél(ok) • Mi az, amit felhasználóink várnak weboldalunktól? -> Felhasználók igényei
- 5. Üzleti célok =?Weboldal céljai • Se túl konkrét se túl általános • Fontos a „hogyan” megfogalmazása és a következetesség átlátása • Kulcsszó: explicit. Minél egyértelműbb, annál hatékonyabb.
- 6. Brand • Üzleti márkaimplementálása, márkaidentitás konzisztens megjelenítése • Nem elsősorban a logó, színek stb használata a fontos, hanem a márka koncepciójának megvalósítása
- 7. Hatékonyság • Metrikák kijelölése,definiálása és elfogadása • Weboldallal összefüggő és nem összefüggő metrikák szétválasztása és értékelése
- 8. Felhasználók igényei -szegmentálás • Kik a felhasználók? Kik fogják használni a weboldalt? • Szegmentálás (demografikus, pszichografikus) • Elkülönült csoportok létrehozása
- 9. Használhatóság, felhasználók elemzése •ISO9241: usability: 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. NOTE- See Annex D for other approaches to usability • Hatékony, hatásos, megfelelő. Felhasználó, cél, kontextus.
- 10. Adatgyűjtés a felhasználókról •Piackutatás módszerei (felmérések, fókuszcsoportos vizsgálatok) • Kontextuális vizsgálatok (mindennapi életben megfigyelve gyűjt adatokat a felhasználóról) • Feladatelemzés (nagyon alapos, adott esetben tizedmásodperceket is feljegyző módszer) • Felhasználói tesztelése (nem a felhasználók tesztelése, hanem a termék tesztelése felhasználók által) • Hasznos kiegészítések: Kártyarendezés, Perszónák
- 11. Csapatmunka • Stratégák ésstakeholderek együttműködése • Stratégiai dokumentum – VÍZIÓ – kulcsmondatok, elemzések összefoglalása
- 13. Hatókör • A hatókörazt határozza meg, hogy mik legyenek azok az összetevők (funkcionális és tartalmi), amelyek a legjobban valósítják meg a stratégiát. • Érv#1: Tudd, hogy mit építesz • Érv#2: Tudd, hogy mit NEM építesz
- 14.
- 15.
- 16. Hatókör – tartalmikövetelmények • Milyen CMS, saját fejlesztés vagy dobozos? • Információ gyűjtése a tartalom előállításával kapcsolatos kérdésekről (szerzői jogi egyeztetések, tartalomfejlesztés stb) • Előzetes adatgyűjtésnek megfelelően tartalmi stratégia meghatározása
- 17. Hatókör – funkcionálisspecifikáció • Mit tud tenni a felhasználó, milyen aktivitásokat tud végezni? • CRUD (Create – Retrieve – Update – Delete) • Új típusú funkciók, új típusú interakciók (WIMP – NUI) • Legyen pozitív, specifikus, objektív nyelvezetet használó • Priorizálj!
- 19. Struktúra • Interakciótervezés • Konceptuális modellek (flickr), konzekvens, hibakezelés, célközpontú, nem implementáció- központú • Információépítészet • Top-down v. Bottom-up megközelítés • Architekturális megközelítések
- 20. Struktúra • Interakciótervezés • Konceptuális modellek (flickr), konzekvens, hibakezelés, célközpontú, nem implementáció- központú • Információépítészet • Top-down v. Bottom-up megközelítés • Architekturális megközelítések • Szervezőelvek (audience oriented, geographic origin) • Nyelvhasználat és metaadatok (irányított szótár, thesaurus, metaadatok)
- 21. Diagramok • Interakciótervezés • Aktivitás-diagram, UIML • Információépítészet • Top-down v. Bottom-up megközelítés • Architekturális megközelítések • Szervezőelvek (audience oriented, geographic origin) • Nyelvhasználat és metaadatok (irányított szótár, thesaurus, metaadatok)
- 22.
- 23.
- 25. A weblap rétegei– a csontváz • A struktúra felett találjuk azt a réteget, amely meghatározza, hogy mely gombok, képek, szöveghasábok hol helyezkednek el az oldalon, mely funkciót hol tudjuk elérni. • Interfész tervezés, navigáció tervezés + információ tervezés
- 26. Interfész tervezés • Preattentív eszközök használata • Intuitív interfész • Megfelelő interfész elemek használata • Jennifer Tidwell: Designing user interfaces, O’Reilly
- 27. Navigációtervezés • Segítségével a felhasználó A pontból eljut B pontba • Megmutatja az egyes elemek közötti viszonyokat • Megmutatja a felhasználó helyét és helyzetét • Típusai: • Globális navigáció • Lokális navigáció • Kiegészítő navigáció • Kontextuális vagy inline navigáció • Oldaltérkép • A-Z index
- 28. Információtervezés • Az információ inherens struktúrája • Hasonló a hasonlóval • Elkülönítés módszerei • Wayfinding módszerei • Drótvázak mint az információtervezés komplex eszközei
- 29.
- 31. A weblap rétegei– a felszín • Vizuális tervezési eszközök és módszerek alkalmazása • Szemkövetéses vizsgálatok használata • Flow felállítása • Fold fölött és alatt • Kontraszt és uniformitás (formák, elemméretek, irányok és színek) • Grid alapú elrendezés kialakítása
- 32. A weblap rétegei– a felszín • Színek: sémák használata – colorist alkalmazása, generátorok használata • Egységes tipográfiai rendszer alkalmazása – tipográfus alkalmazása • Stílusdefiníciók meghatározása a későbbi bővíthetőség és átadhatóság érdekében
- 34.
- 36. • Köszönöm afigyelmet!