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

568c90462309bc3d01a32cb42d2c6b06?s=47 Jonas Lekevicius
September 24, 2014

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

Lecture for web design course in Vilnius College of Design.

568c90462309bc3d01a32cb42d2c6b06?s=128

Jonas Lekevicius

September 24, 2014
Tweet

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

  15. None
  16. None
  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

  19. None
  20. None
  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.
  28. None
  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.

  31. None
  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.
  38. None
  39. 8PAVEIKSLĖLIAI VIETOJE TEKSTO Kartais pamatyti yra tikrai geriau nei 100

    kartų išgirsti.
  40. None
  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ą.
  44. None
  45. None
  46. None
  47. None
  48. 11 HIERARCHIJA Loginis informacijos erdvių suskirstymas, leidžiantis lengviau suprasti, kaip

    veikia dizainas.
  49. None
  50. 12 KATEGORIZAVIMAS IR GRUPAVIMAS Visų pavienių funkcijų ar turinio sudėliojimas

    į medį, palengvinantį navigaciją.
  51. None
  52. 13 ERDVINIS SUVOKIMAS Verta išnaudoti žmogaus natūralų gebėjimą gaudytis erdvėje

    geriau nei abstrakčioje informacijoje.
  53. None
  54. None
  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.

  60. None
  61. 18 USER FLOWS Sustemos funkcionalumo pavertimas žingsnių serija.

  62. None
  63. 19 WIREFRAMES (KARKASAI) Kokie elementai turi būti kiekviename žingsnyje, jog

    patenkintų visus user flows.
  64. None
  65. 20 MOCK-UPS Grafinis karkasų įgyvendinimas ir affordances sukūrimas.

  66. None
  67. 21 TINKAMAS ATGALINIS RYŠYS TINKAMU METU Lengviau duoti, bet sunkiau

    priimti kritinę nuomonę apie neišbaigtą dizainą. Sunku keisti išbaigtą dizainą.
  68. None
  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.
  72. None
  73. None
  74. None
  75. 23 GESTŲ MAGIJA Vengti vartotojo sąsajos paremtos įsimenamais ir sunkiai

    atrandamais gestais ar bendrai nestandartiniais HCI sprendimais.
  76. None
  77. 24 KOPIJUOK IŠORINIUS ĮPROČIUS Kartais verta remtis įgūdžiais, kuriuos žmogus

    turi už sistemos ribų.
  78. None
  79. 25 KOPIJUOK KITŲ SPRENDIMUS Verta remtis įpročiais, kuriuos vartotojai jau

    gali būti įgyję iš kitų programų.
  80. None
  81. 2ATPAŽĮSTAMŲ ELEMENTŲ IŠNAUDOJIMAS Jei sistema turi standartinį dizainą, jo naudojimas

    palengvins sistemos supratimą (jei naudojamas teisingai).
  82. None
  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ų.
  89. None
  90. None
  91. None
  92. None
  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ų.
  96. None
  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.
  100. None
  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.
  103. None
  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.
  107. None
  108. None
  109. None
  110. None
  111. None
  112. None
  113. Tyrimas Dizainas Įgyvendinimas

  114. Tyrimas Dizainas Įgyvendinimas

  115. Informacijos architektūra

  116. 1932

  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!