Tinklapių dizainas, 2 paskaita. Vartotojo patirtis ir informacijos architektūra.

Lecture for web design course in Vilnius College of Design.

Transcript

1. I I PA S K A I TA Vartotojo patirtis ir informacijos architektūra Tinklapių dizainas Jonas Lekevičius, 2014
2. Šiandien matysite!
3. Šiandien matysite! • Praeitų namų darbų pavyzdžiai!
4. Šiandien matysite! • Praeitų namų darbų pavyzdžiai! • Skaitmeninių produktų dizainas
5. Šiandien matysite! • Praeitų namų darbų pavyzdžiai! • Skaitmeninių produktų dizainas • 42 patarimai apie vartotojo patirtį
6. Šiandien matysite! • Praeitų namų darbų pavyzdžiai! • Skaitmeninių produktų dizainas • 42 patarimai apie vartotojo patirtį • Informacijos architektūra
7. Šiandien matysite! • Praeitų namų darbų pavyzdžiai! • Skaitmeninių produktų dizainas • 42 patarimai apie vartotojo patirtį • Informacijos architektūra • Namų darbai. Ir vėl.
8. Interneto pataršymai
9. ಠ_ಠ
10. Karolina Vaiksnytė
11. Ignas Janulis
12. Skaitmeninių produktų dizainas
13. Motyvacija
14. Grafinis dizaineris Skaitmeninių daiktų dizaineris
17. “Empty your mind, be formless, shapeless - like water. Now you put water into a cup, it becomes the cup, you put water into a bottle, it becomes the bottle, you put it in a teapot, it becomes the teapot. Now water can flow or it can crash. Be water, my friend.”
18. Google Drawings
21. Vartotojo partirtis
22. Gera vartotojo patirtis Tikslų pasiekimas
23. Viskas Rinkodara Grafinis dizainas Interakcijų dizainas Informacijos architektūra Testavimas Vartotojų tyrimas Copywriting Techninis įgyvendinimas
24. Ką kurti? Kaip kurti?
25. Tyrimas Dizainas Įgyvendinimas
26. 42patarimai, kaip kurti gerą vartotojo patirtį
27. 1VARTOTOJŲ TYRIMAS IR USER-CENTRIC DESIGN Sistemos dizaino kūrimas atsižvelgiant į vartotojus ir jų poreikius. Dizaino pritaikymas žmonių poreikiams.
29. 2DARBO STEBĖJIMAS Stebėjimas (gyvai arba nuotoliniu būdu) kaip tikslinis vartotojas atlieka savo darbą, su tikslu pagerinti darbo sąlygas.
30. 3PERSONOS Susikurti įsivaizduojamų žmonių aprašymai, kurie personifikuoja rinkos segmentus.
32. 4ACTIVITY-CENTRIC DESIGN Sistemos dizainas analizuojant patį tikslą, o ne dabartinius žmonių įgūdžius.
33. 5TEKSTAS YRA DALIS DIZAINO Tikro teksto naudojimas padeda greičiau ir anksčiau pastebėti problemas.
34. http://hipsum.co/
35. 6TEKSTO SUPRANTAMUMAS: KLOZĖS TESTAS Išmesk kas 5 žodį. Duok žmonėms juos spėti. Matuok, kiek atspėja. Jei mažiau nei 0.4, tekstą reikia paprastinti.
36. Skaitomas tekstas turėtų būti ___ __ _ ir aiškus. Net jei ______ praleidžia kelis žodžius, teksto ___ __ _ vis tiek galima nuspėti. ___ __ _ testui atlikti reikia vidutinio _ _ _ _ _ _ pastraipos, neužtenka kelių sakinių.
37. 7SKENUOJAMAS TEKSTAS Tekstas išskaidytas į punktus, su paryškinta informacija, apibendrinimu pradžioje ir pabaigoje.
39. 8PAVEIKSLĖLIAI VIETOJE TEKSTO Kartais pamatyti yra tikrai geriau nei 100 kartų išgirsti.
41. 9IKONOS VIETOJE TEKSTO Žmonės neskaito, bet labai nesunkiai išmoksta ir vėliau atpažįsta grafinius simbolius.
42. Take a picture
43. 10 SIMBOLIŲ ABSTRAKTUMO BALANSAS Per paprastas simbolis gali būti nesuprantamas ir neatpažįstamas. Per realistiškas simbolis gali nurodyti neakivaizdžią funkciją.
48. 11 HIERARCHIJA Loginis informacijos erdvių suskirstymas, leidžiantis lengviau suprasti, kaip veikia dizainas.
50. 12 KATEGORIZAVIMAS IR GRUPAVIMAS Visų pavienių funkcijų ar turinio sudėliojimas į medį, palengvinantį navigaciją.
52. 13 ERDVINIS SUVOKIMAS Verta išnaudoti žmogaus natūralų gebėjimą gaudytis erdvėje geriau nei abstrakčioje informacijoje.
55. 14 LAIKO SUVOKIMAS Laikas gali būti labai patogi dimensija organizuoti turnį.
56. 15 SUPRATIMO MODELIAI Žmonių galvose susikurti supaprastiniti įsivaizdavimai, kaip veikia sistemos.
57. Supratimo modelis Dizaino modelis Įgyvendinimo modelis
58. 16 LEAKY ABSTRACTIONS Sistema, kurios dizaino ir supratimo modeliai per paprasti įgyvendinimo modeliui. Tokioje sistemoje lengvai sugriūna lūkesčiai.
59. 17 DIAGRAMOS Aukščiausias sistemos vaizdas, kuriame apibrėžiamas bendras funkcionalumas.
61. 18 USER FLOWS Sustemos funkcionalumo pavertimas žingsnių serija.
63. 19 WIREFRAMES (KARKASAI) Kokie elementai turi būti kiekviename žingsnyje, jog patenkintų visus user flows.
65. 20 MOCK-UPS Grafinis karkasų įgyvendinimas ir affordances sukūrimas.
67. 21 TINKAMAS ATGALINIS RYŠYS TINKAMU METU Lengviau duoti, bet sunkiau priimti kritinę nuomonę apie neišbaigtą dizainą. Sunku keisti išbaigtą dizainą.
69. Reklama!
70. Spalio 10-11 d. railsgirls.com
71. 22 REALISTIŠKOS VS GRYNOSIOS VARTOTOJO SĄSAJOS Realistiška sąsaja išnaudoja išorinius gebėjimus, bet gali pavirsti į leaky abstraction. Grynoji sąsaja gali būti nenuspėjama.
75. 23 GESTŲ MAGIJA Vengti vartotojo sąsajos paremtos įsimenamais ir sunkiai atrandamais gestais ar bendrai nestandartiniais HCI sprendimais.
77. 24 KOPIJUOK IŠORINIUS ĮPROČIUS Kartais verta remtis įgūdžiais, kuriuos žmogus turi už sistemos ribų.
79. 25 KOPIJUOK KITŲ SPRENDIMUS Verta remtis įpročiais, kuriuos vartotojai jau gali būti įgyję iš kitų programų.
81. 2ATPAŽĮSTAMŲ ELEMENTŲ IŠNAUDOJIMAS Jei sistema turi standartinį dizainą, jo naudojimas palengvins sistemos supratimą (jei naudojamas teisingai).
83. 2ANIMACIJOS PAAIŠKINA POKYTĮ Animacija yra labai naudinga norint išvengti “pala, kas čia įvyko” klausimų.
84. 2ANIMACIJOS ATKREIPIA DĖMESĮ Žmonės nevalingai atkreipia dėmesį į judesį periferijoje. Tai gali būti tikslingai išnaudota.
85. 2ANIMACIJOS FORMUOJA SUPRATIMO MODELIUS Elementų judėjimas gali paaiškinti sistemos informacijos architektūrą, hierarchiją, navigaciją.
86. 30 ANIMACIJOS KURIA CHARAKTERĮ Grynajame dizaine animacija gali būti vienas efektyviausių nuotaiką sukuriančių bruožų. Ypač gerai veikia tiesioginio kontakto metu.
87. http://tympanus.net/Development/OffCanvasMenuEffects/bubble.html
88. 31 FITTS’ LAW Elementas bus greičiau paspaustas jei jis bus arčiau, didesnis, ištęstas pagal judėjimo kryptį arba ant plokštumos ribų.
93. 32 MILLER’S LAW Žmogaus darbinė atmintis geba išlaikyti 7±2 informacijos vienetus.
94. 33 HICK-HAYMAN LAW Pasirinkimų kiekis logaritmiškai lemia pasirinkimo greitį.
95. 34 PASPAUDIMŲ KIEKIS Dizaino strategija, skatinanti kurti funkcijų pasiekiemą taip, jog viskam reikėtų kuo mažiau paspaudimų.
97. 3NUSTATYMŲ MAŽINIMAS Dažnai verta nesuteikti vartotojams per daug laisvės keisti įrankio veikimą.
98. 3FLOW Būsena, kurioje vartotojas pasiekia optimalų iššūkio / gebėjimo balansą per nepertraukiamą darbą.
99. 3REŽIMAI (MODES) Programos būsena, kurioje vartotojo sąsaja yra apribota vienam veiksmui atlikti.
101. 3KVAZI-REŽIMAI Laikinai sukuriami režimai, į kuriuos greitai įeinama ir taip pat paprastai ir greitai išeinama.
102. 39 GREITIS IR GREIČIO ILIUZIJA Veiksmai, kurie trunka iki 0.1 yra laikomi įvykstantys iškart. Ilgesniems reikia atgalinio ryšio. Indikacija su progresu yra geriau nei be.
104. 40 PER DIDELIS GREITIS Kartais vartotojai tikisi, kad kažkas užtruks laiko, ir jei viskas įvyksta per greitai įtaria programos klaidą.
105. 41 TESTAVIMAS Stebėjimas, kaip žmonės naudoja sukurtą sistemą, kaip ir kiek tyrimo ir dizaino rezultatai sutampa su vartotojų naudojimu.
106. 42 A/B TESTAVIMAS Geresnio dizaino ieškojimas analizuojant kuris iš n variantų geriausiai išpildo tikslus.
113. Tyrimas Dizainas Įgyvendinimas
114. Tyrimas Dizainas Įgyvendinimas
115. Informacijos architektūra
117. 1933, Harry Beck
118. Informacijos architektūros erdvės
119. Informacijos architektūros erdvės • Hierarchijos kūrimas remiantis supratimo modeliais
120. Informacijos architektūros erdvės • Hierarchijos kūrimas remiantis supratimo modeliais • Funkcijų ir turinio kategorizavimas, skirstymas į grupes
121. Informacijos architektūros erdvės • Hierarchijos kūrimas remiantis supratimo modeliais • Funkcijų ir turinio kategorizavimas, skirstymas į grupes • Navigacijos tarp funkcijų, erdvių kūrimas
122. Informacijos architektūros erdvės • Hierarchijos kūrimas remiantis supratimo modeliais • Funkcijų ir turinio kategorizavimas, skirstymas į grupes • Navigacijos tarp funkcijų, erdvių kūrimas • Dėmesio valdymas per informacijos hierarchiją
123. Sprendimai Profiliai Navigacijos meniu Karuselė Prisijungimo langai Footer 404 Nerasta Tooltip Breadcrumbs Naujienų srautai Modaliniai langai
124. http://patterntap.com
125. Rekomenduojama literatūra!
126. STEVE KRUG Don't Make Me Think
127. LUKAS MATHIS Designed for Use
128. PETER MORVILLE, LOUIS ROSENFELD Information Architecture for the World Wide Web
129. ALAN COOPER About Face 3: The Essentials of Interaction Design
130. http://www.uxbooth.com
131. http://52weeksofux.com
132. Užduotys
133. UŽDUOTIS Panaršyti po interneto dizaino galerijas įkvėpimui, ir sukurti savo tinklapio vartotojo patirties planą.
134. http://bestwebgallery.com
135. http://www.siteinspire.com
136. http://www.awwwards.com
137. Ką kurti? Kaip kurti?
138. Iki!