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

Slide 1

Slide 1 text

I I PA S K A I TA Vartotojo patirtis ir informacijos architektūra Tinklapių dizainas Jonas Lekevičius, 2014

Slide 2

Slide 2 text

Šiandien matysite!

Slide 3

Slide 3 text

Šiandien matysite! • Praeitų namų darbų pavyzdžiai!

Slide 4

Slide 4 text

Šiandien matysite! • Praeitų namų darbų pavyzdžiai! • Skaitmeninių produktų dizainas

Slide 5

Slide 5 text

Šiandien matysite! • Praeitų namų darbų pavyzdžiai! • Skaitmeninių produktų dizainas • 42 patarimai apie vartotojo patirtį

Slide 6

Slide 6 text

Šiandien matysite! • Praeitų namų darbų pavyzdžiai! • Skaitmeninių produktų dizainas • 42 patarimai apie vartotojo patirtį • Informacijos architektūra

Slide 7

Slide 7 text

Šiandien matysite! • Praeitų namų darbų pavyzdžiai! • Skaitmeninių produktų dizainas • 42 patarimai apie vartotojo patirtį • Informacijos architektūra • Namų darbai. Ir vėl.

Slide 8

Slide 8 text

Interneto pataršymai

Slide 9

Slide 9 text

ಠ_ಠ

Slide 10

Slide 10 text

Karolina Vaiksnytė

Slide 11

Slide 11 text

Ignas Janulis

Slide 12

Slide 12 text

Skaitmeninių produktų dizainas

Slide 13

Slide 13 text

Motyvacija

Slide 14

Slide 14 text

Graﬁnis dizaineris Skaitmeninių daiktų dizaineris

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

“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 ﬂow or it can crash. Be water, my friend.”

Slide 18

Slide 18 text

Google Drawings

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Vartotojo partirtis

Slide 22

Slide 22 text

Gera vartotojo patirtis Tikslų pasiekimas

Slide 23

Slide 23 text

Viskas Rinkodara Graﬁnis dizainas Interakcijų dizainas Informacijos architektūra Testavimas Vartotojų tyrimas Copywriting Techninis įgyvendinimas

Slide 24

Slide 24 text

Ką kurti? Kaip kurti?

Slide 25

Slide 25 text

Tyrimas Dizainas Įgyvendinimas

Slide 26

Slide 26 text

42patarimai, kaip kurti gerą vartotojo patirtį

Slide 27

Slide 27 text

1VARTOTOJŲ TYRIMAS IR USER-CENTRIC DESIGN Sistemos dizaino kūrimas atsižvelgiant į vartotojus ir jų poreikius. Dizaino pritaikymas žmonių poreikiams.

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

2DARBO STEBĖJIMAS Stebėjimas (gyvai arba nuotoliniu būdu) kaip tikslinis vartotojas atlieka savo darbą, su tikslu pagerinti darbo sąlygas.

Slide 30

Slide 30 text

3PERSONOS Susikurti įsivaizduojamų žmonių aprašymai, kurie personiﬁkuoja rinkos segmentus.

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

4ACTIVITY-CENTRIC DESIGN Sistemos dizainas analizuojant patį tikslą, o ne dabartinius žmonių įgūdžius.

Slide 33

Slide 33 text

5TEKSTAS YRA DALIS DIZAINO Tikro teksto naudojimas padeda greičiau ir anksčiau pastebėti problemas.

Slide 34

Slide 34 text

http://hipsum.co/

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

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ų.

Slide 37

Slide 37 text

7SKENUOJAMAS TEKSTAS Tekstas išskaidytas į punktus, su paryškinta informacija, apibendrinimu pradžioje ir pabaigoje.

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

8PAVEIKSLĖLIAI VIETOJE TEKSTO Kartais pamatyti yra tikrai geriau nei 100 kartų išgirsti.

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

9IKONOS VIETOJE TEKSTO Žmonės neskaito, bet labai nesunkiai išmoksta ir vėliau atpažįsta graﬁnius simbolius.

Slide 42

Slide 42 text

Take a picture

Slide 43

Slide 43 text

10 SIMBOLIŲ ABSTRAKTUMO BALANSAS Per paprastas simbolis gali būti nesuprantamas ir neatpažįstamas. Per realistiškas simbolis gali nurodyti neakivaizdžią funkciją.

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

11 HIERARCHIJA Loginis informacijos erdvių suskirstymas, leidžiantis lengviau suprasti, kaip veikia dizainas.

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

12 KATEGORIZAVIMAS IR GRUPAVIMAS Visų pavienių funkcijų ar turinio sudėliojimas į medį, palengvinantį navigaciją.

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

13 ERDVINIS SUVOKIMAS Verta išnaudoti žmogaus natūralų gebėjimą gaudytis erdvėje geriau nei abstrakčioje informacijoje.

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

14 LAIKO SUVOKIMAS Laikas gali būti labai patogi dimensija organizuoti turnį.

Slide 56

Slide 56 text

15 SUPRATIMO MODELIAI Žmonių galvose susikurti supaprastiniti įsivaizdavimai, kaip veikia sistemos.

Slide 57

Slide 57 text

Supratimo modelis Dizaino modelis Įgyvendinimo modelis

Slide 58

Slide 58 text

16 LEAKY ABSTRACTIONS Sistema, kurios dizaino ir supratimo modeliai per paprasti įgyvendinimo modeliui. Tokioje sistemoje lengvai sugriūna lūkesčiai.

Slide 59

Slide 59 text

17 DIAGRAMOS Aukščiausias sistemos vaizdas, kuriame apibrėžiamas bendras funkcionalumas.

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

18 USER FLOWS Sustemos funkcionalumo pavertimas žingsnių serija.

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

19 WIREFRAMES (KARKASAI) Kokie elementai turi būti kiekviename žingsnyje, jog patenkintų visus user ﬂows.

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

20 MOCK-UPS Graﬁnis karkasų įgyvendinimas ir aﬀordances sukūrimas.

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

21 TINKAMAS ATGALINIS RYŠYS TINKAMU METU Lengviau duoti, bet sunkiau priimti kritinę nuomonę apie neišbaigtą dizainą. Sunku keisti išbaigtą dizainą.

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

Reklama!

Slide 70

Slide 70 text

Spalio 10-11 d. railsgirls.com

Slide 71

Slide 71 text

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.

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

23 GESTŲ MAGIJA Vengti vartotojo sąsajos paremtos įsimenamais ir sunkiai atrandamais gestais ar bendrai nestandartiniais HCI sprendimais.

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

24 KOPIJUOK IŠORINIUS ĮPROČIUS Kartais verta remtis įgūdžiais, kuriuos žmogus turi už sistemos ribų.

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

25 KOPIJUOK KITŲ SPRENDIMUS Verta remtis įpročiais, kuriuos vartotojai jau gali būti įgyję iš kitų programų.

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

2ATPAŽĮSTAMŲ ELEMENTŲ IŠNAUDOJIMAS Jei sistema turi standartinį dizainą, jo naudojimas palengvins sistemos supratimą (jei naudojamas teisingai).

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

2ANIMACIJOS PAAIŠKINA POKYTĮ Animacija yra labai naudinga norint išvengti “pala, kas čia įvyko” klausimų.

Slide 84

Slide 84 text

2ANIMACIJOS ATKREIPIA DĖMESĮ Žmonės nevalingai atkreipia dėmesį į judesį periferijoje. Tai gali būti tikslingai išnaudota.

Slide 85

Slide 85 text

2ANIMACIJOS FORMUOJA SUPRATIMO MODELIUS Elementų judėjimas gali paaiškinti sistemos informacijos architektūrą, hierarchiją, navigaciją.

Slide 86

Slide 86 text

30 ANIMACIJOS KURIA CHARAKTERĮ Grynajame dizaine animacija gali būti vienas efektyviausių nuotaiką sukuriančių bruožų. Ypač gerai veikia tiesioginio kontakto metu.

Slide 87

Slide 87 text

http://tympanus.net/Development/OﬀCanvasMenuEﬀects/bubble.html

Slide 88

Slide 88 text

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ų.

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

32 MILLER’S LAW Žmogaus darbinė atmintis geba išlaikyti 7±2 informacijos vienetus.

Slide 94

Slide 94 text

33 HICK-HAYMAN LAW Pasirinkimų kiekis logaritmiškai lemia pasirinkimo greitį.

Slide 95

Slide 95 text

34 PASPAUDIMŲ KIEKIS Dizaino strategija, skatinanti kurti funkcijų pasiekiemą taip, jog viskam reikėtų kuo mažiau paspaudimų.

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

3NUSTATYMŲ MAŽINIMAS Dažnai verta nesuteikti vartotojams per daug laisvės keisti įrankio veikimą.

Slide 98

Slide 98 text

3FLOW Būsena, kurioje vartotojas pasiekia optimalų iššūkio / gebėjimo balansą per nepertraukiamą darbą.

Slide 99

Slide 99 text

3REŽIMAI (MODES) Programos būsena, kurioje vartotojo sąsaja yra apribota vienam veiksmui atlikti.

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

3KVAZI-REŽIMAI Laikinai sukuriami režimai, į kuriuos greitai įeinama ir taip pat paprastai ir greitai išeinama.

Slide 102

Slide 102 text

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.

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

40 PER DIDELIS GREITIS Kartais vartotojai tikisi, kad kažkas užtruks laiko, ir jei viskas įvyksta per greitai įtaria programos klaidą.

Slide 105

Slide 105 text

41 TESTAVIMAS Stebėjimas, kaip žmonės naudoja sukurtą sistemą, kaip ir kiek tyrimo ir dizaino rezultatai sutampa su vartotojų naudojimu.

Slide 106

Slide 106 text

42 A/B TESTAVIMAS Geresnio dizaino ieškojimas analizuojant kuris iš n variantų geriausiai išpildo tikslus.

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

Tyrimas Dizainas Įgyvendinimas

Slide 114

Slide 114 text

Tyrimas Dizainas Įgyvendinimas

Slide 115

Slide 115 text

Informacijos architektūra

Slide 116

Slide 116 text

1932

Slide 117

Slide 117 text

1933, Harry Beck

Slide 118

Slide 118 text

Informacijos architektūros erdvės

Slide 119

Slide 119 text

Informacijos architektūros erdvės • Hierarchijos kūrimas remiantis supratimo modeliais

Slide 120

Slide 120 text

Informacijos architektūros erdvės • Hierarchijos kūrimas remiantis supratimo modeliais • Funkcijų ir turinio kategorizavimas, skirstymas į grupes

Slide 121

Slide 121 text

Informacijos architektūros erdvės • Hierarchijos kūrimas remiantis supratimo modeliais • Funkcijų ir turinio kategorizavimas, skirstymas į grupes • Navigacijos tarp funkcijų, erdvių kūrimas

Slide 122

Slide 122 text

Slide 123

Slide 123 text

Sprendimai Proﬁliai Navigacijos meniu Karuselė Prisijungimo langai Footer 404 Nerasta Tooltip Breadcrumbs Naujienų srautai Modaliniai langai

Slide 124

Slide 124 text

http://patterntap.com

Slide 125

Slide 125 text

Rekomenduojama literatūra!

Slide 126

Slide 126 text

STEVE KRUG Don't Make Me Think

Slide 127

Slide 127 text

LUKAS MATHIS Designed for Use

Slide 128

Slide 128 text

PETER MORVILLE, LOUIS ROSENFELD Information Architecture for the World Wide Web

Slide 129

Slide 129 text

ALAN COOPER About Face 3: The Essentials of Interaction Design

Slide 130

Slide 130 text

http://www.uxbooth.com

Slide 131

Slide 131 text

http://52weeksofux.com

Slide 132

Slide 132 text

Užduotys

Slide 133

Slide 133 text

UŽDUOTIS Panaršyti po interneto dizaino galerijas įkvėpimui, ir sukurti savo tinklapio vartotojo patirties planą.