UX / UI - ?· UX / UI 2018.04.18 Vona Márton. Mi az a UX? (UX szemlélet)Első téma. A felhasználók…

Download UX / UI - ?· UX / UI 2018.04.18 Vona Márton. Mi az a UX? (UX szemlélet)Első téma. A felhasználók…

Post on 15-Feb-2019

212 views

Category:

Documents

0 download

TRANSCRIPT

<p>UX / UI2018.04.18</p> <p>Vona Mrton</p> <p>Mi az a UX?(UX szemllet)</p> <p>Els tma</p> <p>A felhasznlkfeltrkpezse</p> <p>Msodik tma</p> <p>A felhasznlktjai</p> <p>Harmadik tma</p> <p>A felhasznli fellet(UI)</p> <p>Negyedik tma</p> <p>Kutats selemzs</p> <p>tdik tma</p> <p>Agilistervezs</p> <p>Hatodik tma</p> <p>Mi az a UX?(UX szemllet)</p> <p>Els tma</p> <p>A varzs sz A varzs szA jghegy cscsa</p> <p>Mit jelent, hogy UX / UI?</p> <p> UX: user experience - felhasznli lmny</p> <p> UI: user interface - felhasznli fellet</p> <p>A varzs sz A varzs szA jghegy cscsa</p> <p>A varzs sz A varzs szA jghegy cscsa</p> <p>A jghegy cscsa A varzs szA jghegy cscsa</p> <p>A felhasznlkfeltrkpezse</p> <p>Msodik tma</p> <p>Kik a cl csoportunk? Hogyan elemezzk ket?</p> <p> Nem, kor, lakhely? Vgzettsg s szakma? Mit tud a termkrl? Milyen mdia fogyasztsi szoksai vannak? Milyen eszkzket hasznl? Mikor s hol hasznlja a termket? Mennyi idt tlt online? Mennyire trend kvet? Mik a motivcii? ...</p> <p>Mi alapjn lltsunk fel persznt:</p> <p>Persznk</p> <p>Interj</p> <p>Terepkutats</p> <p>Kik a cl csoportunk? Hogyan elemezzk ket? PersznkInterj</p> <p>Terepkutats</p> <p> Nem, kor, lakhely? Vgzettsg s szakma? Mit tud a termkrl? Milyen mdia fogyasztsi szoksai vannak? Milyen eszkzket hasznl? Mikor s hol hasznlja a termket? Mennyi idt tlt online? Mennyire trend kvet? Mik a motivcii? ...</p> <p>Mi alapjn lltsunk fel persznt:</p> <p>MOTIVCI</p> <p>+</p> <p>KONTEXTUS</p> <p>Ki a clcsoportunk? Hogyan elemezzk ket?</p> <p> Versengs msokkal jutalom megszerzse vgy ez elismers utn flelem kontroll utni vgy gyjtgets tartozni akarok valahova</p> <p>Leggyakoribb bels motivcik</p> <p>Persznk</p> <p>Interj</p> <p>Terepkutats</p> <p>Ki a clcsoportunk? Hogyan elemezzk ket? PersznkInterj</p> <p>Terepkutats</p> <p>Ki a clcsoportunk? Hogyan elemezzk ket? PersznkInterj</p> <p>Terepkutats</p> <p>Interj</p> <p>Cl</p> <p>Fjdalom pontok felkutatsa</p> <p>Arany szably</p> <p>Csak nyitott krdseket tegynk fel</p> <p>Persznk</p> <p>Interj</p> <p>Terepkutats</p> <p>Interj</p> <p>Problmk megtallst elsegt krdsek</p> <p> Mi a legnagyobb problmja az adott tmval kapcsolatban?</p> <p> Mondja el a 3 legidegestbb dolgot a tmval kapcsolatban?</p> <p> Mi okozza a legtbb fejfjst a tmval kapcsolatban?</p> <p>Persznk</p> <p>Interj</p> <p>Terepkutats</p> <p>Interj</p> <p>Problmk priorizlsa</p> <p> Mivel tlti a legtbb idt?</p> <p> Mire a legbszkbb a tmval kapcsolatban?</p> <p> Mi fontos szmra a tmval kapcsolatban?</p> <p> ...</p> <p>Persznk</p> <p>Interj</p> <p>Terepkutats</p> <p>Interj</p> <p>A megolds megtallst segt krdsek</p> <p> Meslje el a legutbbi konkrt esetet amikor a problma elfordult</p> <p> Hogyan oldja meg jelenleg a problmt?</p> <p> Mennyi pnzt/idt/erforrst vesz ignybe a jelenlegi megolds?</p> <p> ...</p> <p>Persznk</p> <p>Interj</p> <p>Terepkutats</p> <p>Interj</p> <p>TILTOTT krdsek</p> <p> Hasznlnd-e?</p> <p> Tetszik-e?</p> <p> Szksged van-e r?</p> <p> Fizetnl-e rte?</p> <p> ...</p> <p>Persznk</p> <p>Interj</p> <p>Terepkutats</p> <p>Terepkutats</p> <p>A terepkutats lnyege, hogy a felhasznlt sajt krnyezetben figyeljk meg. gy </p> <p>sok olyan dolgot vehetnk szre amire interjzs kzben nem gondoltunk (se mi, </p> <p>sem az interj alanya).</p> <p>Persznk</p> <p>Interj</p> <p>Terepkutats</p> <p>A felhasznlktjai</p> <p>Harmadik tma</p> <p>User journey</p> <p> Elszr a legfontosabb clokhoz vezet utakat kell megtervezni</p> <p> Nem technikai oldalrl kell megtervezni (nem oldalak s kpernyk)</p> <p> A motivcik alapjn a legfontosabb 2-3 cl meghatrozsa, amit az </p> <p>alkalmazssal el szeretnnk rni.</p> <p>User journey</p> <p>Experience map</p> <p>Onboarding</p> <p>Hooked-modell</p> <p>User journey</p> <p>PLDA: Webshop vsrls</p> <p> Rkerestem a cipre</p> <p> Kivlasztom ami tetszik</p> <p> Megnzem az rt s a mrett</p> <p> Leadom a rendelst</p> <p>User journey</p> <p>Experience map</p> <p>Onboarding</p> <p>Hooked-modell</p> <p>Experience map User journeyExperience map</p> <p>Onboarding</p> <p>Hooked-modell</p> <p>Experience map User journeyExperience map</p> <p>Onboarding</p> <p>Hooked-modell</p> <p>Experience map User journeyExperience map</p> <p>Onboarding</p> <p>Hooked-modell</p> <p>Experience map</p> <p>Az lmny trkp alapvet elemei</p> <p> A felhasznli ignyek</p> <p> A hangulat</p> <p> A kivltott rzsek</p> <p> A perszna </p> <p> rintkezsi pontok (touchpoints), Interakcik, fjdalom pontok</p> <p> Az tvonal</p> <p>User journey</p> <p>Experience map</p> <p>Onboarding</p> <p>Hooked-modell</p> <p>Onboarding</p> <p>Mi az az onboarding?</p> <p>Az onboarding az a folyamat amikor az j felhasznl elszr tallkozik a </p> <p>felhasznli fellettel, elszr rkezik meg a weboldalra, hasznlja az alkalmazst.</p> <p>User journey</p> <p>Experience map</p> <p>Onboarding</p> <p>Hooked-modell</p> <p>Onboarding User journeyExperience map</p> <p>Onboarding</p> <p>Hooked-modell</p> <p>Onboarding</p> <p>Kulcspontok</p> <p> Elzetes tuds</p> <p> Tutoril </p> <p> res kperenyk</p> <p> Az igazsg pillanata</p> <p>User journey</p> <p>Experience map</p> <p>Onboarding</p> <p>Hooked-modell</p> <p>Onboarding User journeyExperience map</p> <p>Onboarding</p> <p>Hooked-modell</p> <p>Onboarding User journeyExperience map</p> <p>Onboarding</p> <p>Hooked-modell</p> <p>Hooked-modell</p> <p>Mi az a hooked-modell?</p> <p>Nir Eyal ltal felismert pszicholgiai modell, mely azt vzolja fel, hogyan tehetjk </p> <p>fggv az alkalmazsunk felhasznlit.</p> <p>User journey</p> <p>Experience map</p> <p>Onboarding</p> <p>Hooked-modell</p> <p>Hooked-modell User journeyExperience map</p> <p>Onboarding</p> <p>Hooked-modell</p> <p>A felhasznli fellet(UI)</p> <p>Negyedik tma</p> <p>7 alap szably</p> <p>A kpernyk tervezsnek 7 alapszablya</p> <p>1. 3 krds, amit mindig meg kell vlaszolni</p> <p>2. A vizulis hierarchia</p> <p>3. A szveg a design rsze</p> <p>4. A konvencik</p> <p>5. A mobil</p> <p>6. Hasznos terletek arnya</p> <p>7. Egyszersg s tlthatsg</p> <p>7 alap szably</p> <p>A megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>7 alap szably</p> <p>1. 3 krds, amit mindig meg kell vlaszolni</p> <p> Hol vagyunk?</p> <p> Mit lehet itt csinlni?</p> <p> Hogyan lphetek tovbb?</p> <p>7 alap szably</p> <p>A megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>7 alap szably 7 alap szablyA megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>7 alap szably 7 alap szablyA megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>7 alap szably</p> <p>2. A vizulis hierarchia</p> <p>Lnyege, hogy a felhasznli fellet elemeit rangsorolni tudjuk az alapjn, hogy </p> <p>mennyire feltnek, milyen hangslyosak, milyen hamar vesszk szre ket.</p> <p>7 alap szably</p> <p>A megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>7 alap szably</p> <p>2. A vizulis hierarchia</p> <p>7 alap szably</p> <p>A megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>7 alap szably</p> <p>2. A vizulis hierarchia</p> <p>7 alap szably</p> <p>A megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>7 alap szably</p> <p>3. A szveg a design rsze</p> <p> NE feledkezznk meg rla</p> <p> Kerljk a tlsgosan szakmai szvegeket</p> <p> Gondolkodjunk a persznnk fejvel</p> <p>7 alap szably</p> <p>A megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>7 alap szably</p> <p>4. A konvencik</p> <p> Hasznljuk ket btran</p> <p> Sokat segtenek a felleten val eligazodsban</p> <p> Segt elkerlni a bizonytalansgot</p> <p>7 alap szably</p> <p>A megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>7 alap szably</p> <p>5. A mobil (a keznknek is terveznk)</p> <p> Kerljk a tl apr kattintsi felleteket ( optimlisan egy sorban 4 darab)</p> <p> Figyeljnk az elrhetsgre</p> <p>7 alap szably</p> <p>A megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>7 alap szably</p> <p>5. A mobil (a keznknek is terveznk)</p> <p>7 alap szably</p> <p>A megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>7 alap szably</p> <p>6. Hasznos terletek arnya</p> <p>7 alap szably</p> <p>A megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>7 alap szably</p> <p>7. Egyszersg s tlthatsg</p> <p> Az zleti clokat tartsuk mindig magunk eltt s az alapjn vlasszunk a </p> <p>designok tervek kzl, ez alapjn mdostsuk ket.</p> <p>7 alap szably</p> <p>A megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>A megfelel design</p> <p>Prbljunk ki tbb tervet!</p> <p>Ne ragaszkodjunk makacsul az els elkpzelsnkhz.</p> <p>Ne csak egy tervet mdostsunk amg gy nem gondoljuk, hogy mr gy j lesz, mert </p> <p>akkor knnyen elmehetnk a legjobb vagy akr az igazi megolds mellett.</p> <p>7 alap szably</p> <p>A megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>Drtvz 7 alap szablyA megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>Papron</p> <p>Drtvz 7 alap szablyA megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>Alacsony s magas kidolgozottsg drtvz</p> <p>Look &amp; Feel 7 alap szablyA megfelel design</p> <p>Drtvz</p> <p>Look &amp; feel</p> <p>Mi az a Look &amp; Feel?</p> <p>A Look &amp; Feel maga az oldal hangulata, az igazi megjelens a sznekkel s formkkal. </p> <p>Ez adja meg az oldal stlust.</p> <p>Kutats selemzs</p> <p>tdik tma</p> <p>Kutats s elemzs</p> <p>Kutats nlkl nincs design</p> <p>A kutats elengedhetetlen rsze a j designnak. Ha nem elemezzk ki az elkszlt </p> <p>designt, akkor csak a sajt elkpzelseinket ltjuk magunk eltt nem pedig a </p> <p>felhasznlk ltal validlt designt.</p> <p>A kutats lehet:</p> <p> kvantitatv (eredmnye szmmal mrhet)</p> <p> kvalitatv (eredmnye szubjektv)</p> <p>Kutats s elemzs</p> <p>Nhny kutatsi eszkzk</p> <p> User teszt</p> <p> 5 msodperces teszt</p> <p> Analitika</p> <p> AARRRR modell</p> <p> Visszatr ltogatk arnya</p> <p> A/B tesztels</p> <p> Fake Door tesztels</p> <p> (Interj, terepkutats)</p> <p>User teszt User teszt5 msodperces teszt</p> <p>Analitika</p> <p>AARRR modell</p> <p>Visszatr ltogatk </p> <p>arnya</p> <p>A/B tesztels</p> <p>Fake Door tesztels</p> <p>Mire figyeljnk, miket csinljunk</p> <p> Olyanokkal teszteljnk, akik mg nem hasznltk az alkalmazst</p> <p> Adjunk feladatokat, amiket el kell vgeznik</p> <p> Figyeljk meg, hogyan boldogulnak az adott feladattal (hol akadtak, hol </p> <p>lepdtek meg, hol krdeztek, hol rtettek flre valamit, ...)</p> <p> Kvalitatv teszt (A mirtekre ad vlaszt)</p> <p> Leszrhetjk mit rt meg az j felhasznl s mit nem </p> <p>User teszt User teszt5 msodperces teszt</p> <p>Analitika</p> <p>AARRR modell</p> <p>Visszatr ltogatk </p> <p>arnya</p> <p>A/B tesztels</p> <p>Fake Door tesztels</p> <p>Feladattpusok</p> <p> tfog feladatok: Pl.: Prbld ki az alkalmazst!</p> <p> Feladatok clok alapjn: Pl.: Regisztrlj be!, Mdostsd a lakcmed!</p> <p> UI feladatok: Hogyan csinlnd meg ezen a felleten ezt vagy azt?</p> <p>5 msodperces teszt User teszt5 msodperces teszt</p> <p>Analitika</p> <p>AARRR modell</p> <p>Visszatr ltogatk </p> <p>arnya</p> <p>A/B tesztels</p> <p>Fake Door tesztels</p> <p>Mire figyeljnk, miket csinljunk</p> <p> Clja az els benyoms kirtkelse</p> <p> 15-30 emberrel rdemes elvgezni a tesztet a megfelel eredmnyrt</p> <p> Tegynk fel nhny krdst a teszt utn. Pl.: Mit forgalmaz a weboldal? Mit </p> <p>lehet a weboldalon csinlni?</p> <p> Kvalitatv teszt</p> <p> Hasznos eszkz: https://fivesecondtest.com/</p> <p>Analitika User teszt5 msodperces teszt</p> <p>Analitika</p> <p>AARRR modell</p> <p>Visszatr ltogatk </p> <p>arnya</p> <p>A/B tesztels</p> <p>Fake Door tesztels</p> <p>Tpusai</p> <p> Oldal betltsen alapul eszkzk (Pl.: Google Analytics)</p> <p> Felhasznlnknti elemzsek (Mixpanel)</p> <p> Htrkpek, kurzor kvet eszkzk (MouseFlow)</p> <p>AARRR modell User teszt5 msodperces teszt</p> <p>Analitika</p> <p>AARRR modell</p> <p>Visszatr ltogatk </p> <p>arnya</p> <p>A/B tesztels</p> <p>Fake Door tesztels</p> <p> A: Acquisition (gyflszerzs): Hnyan prbljk ki az alkalmazst? Hnyan </p> <p>rkeznek az oldalra?</p> <p> A: Activation (Aktivls): Hnyak kezdik el tnylegesen hasznlni az </p> <p>alkamazst/ltogatjk az oldalt rendszeresen </p> <p> R: Retention (Megtarts): Visszatr felhasznlk arnya</p> <p> R: Revenue (Vsrls): Hny szzalka fizet a felhasznlknak?</p> <p> R: Referral (Ajnls): A felhasznlk hny szzalka ajnlja az </p> <p>alkalmazst/weboldalt ismerseinek?</p> <p>AARRR modell User teszt5 msodperces teszt</p> <p>Analitika</p> <p>AARRR modell</p> <p>Visszatr ltogatk </p> <p>arnya</p> <p>A/B tesztels</p> <p>Fake Door tesztels</p> <p>Visszatr ltogatk arnya (Retention) User teszt5 msodperces teszt</p> <p>Analitika</p> <p>AARRR modell</p> <p>Visszatr ltogatk </p> <p>arnya</p> <p>A/B tesztels</p> <p>Fake Door tesztels</p> <p>A/B tesztels User teszt5 msodperces teszt</p> <p>Analitika</p> <p>AARRR modell</p> <p>Visszatr ltogatk </p> <p>arnya</p> <p>A/B tesztels</p> <p>Fake Door tesztels</p> <p>Mire figyeljnk</p> <p> Mindig egy idben fussanak a klnbz verzik, mert gy elkerlhetek a kls </p> <p>befolysol tnyezk (Egyik nap van egy sportesemny, ami miatt kevesebben </p> <p>hasznljk az alkalmazsunkat)</p> <p> Egyszerre csak egy klnbsg legyen a vltozatok kztt</p> <p> Sok emberrel teszteljk (minimum 1000+)</p> <p> Figyeljnk a mrs cljra (Pl.: Egy webshop rendels 2. lpsn mdostunk, </p> <p>akkor nem azt figyeljk, hogy hnyan lptek a 3. lpsre, hanem azt, hogy </p> <p>tbben vsroltak-e)</p> <p>Fake door tesztels User teszt5 msodperces teszt</p> <p>Analitika</p> <p>AARRR modell</p> <p>Visszatr ltogatk </p> <p>arnya</p> <p>A/B tesztels</p> <p>Fake Door tesztels</p> <p>Lnyege</p> <p>Nem fejlesztjk le elre az adott funkcit, hanem csak elhelyeznk egy design elemet </p> <p>(csalit) s a korbban trgyalt eszkzkkel megfigyeljk, hogy hnyan klikkelnek r. </p> <p>Ha sokan, akkor ez azt jelentheti, hogy rdekli ket a funkci, gy rdemes a </p> <p>fejlesztsbe energit s pnzt fektetni.</p> <p>FONTOS: miutn r klikkel a felhasznl tudassuk vele, hogy ez egy felmrs nem </p> <p>pedig hibs mkds, nehogy ellenttes hatst rjnk el vele.</p> <p>Agilistervezs</p> <p>Hatodik tma</p> <p>A UX tervezs folyamata A UX tervezs folyamata</p> <p>Agilis kiltvny</p> <p>UX beptse az agilis </p> <p>elvekbe</p> <p>Agilis kiltvny</p> <p>Vzess modell vs Agilis mdszerek</p> <p>A UX tervezs </p> <p>folyamata</p> <p>Agilis kiltvny</p> <p>UX beptse az agilis </p> <p>elvekbe</p> <p>UX beptse az agilis elvekbe</p> <p> A legfontosabb: A design nem egy els lps a fejleszts eltt, hanem </p> <p>vgigksri azt.</p> <p> Sprintekben megosztva dolgozik egyszerre programoz s designer. (DE nem </p> <p>ugyanazon a funkcin)</p> <p> Alapos tervezssel idt s pnzt sprolunk (Rajzolni gyorsabb mint </p> <p>programozni)</p> <p> A design sszekt szerep (zlet, Technolgia, Felhasznlk)</p> <p>A UX tervezs </p> <p>folyamata</p> <p>Agilis kiltvny</p> <p>UX beptse az agilis </p> <p>elvekbe</p> <p>UX beptse az agilis elvekbe A UX tervezs folyamata</p> <p>Agilis kiltvny</p> <p>UX beptse az agilis </p> <p>elvekbe</p> <p>UX beptse az agilis elvekbe A UX tervezs folyamata</p> <p>Agilis kiltvny</p> <p>UX beptse az agilis </p> <p>elvekbe</p> <p>Ajnlott irodalom</p> <p>Ksznm szpen a figyelmet</p>