Žmogaus ir kompiuterio sąveika Kristina Lapin

ANTBOX

Turinys

• Maketavimo tikslai

• Naudojimo scenarijų maketai:

– Produkto vizijos vizualizavimas

• Interfeisų maketai

• Maketavimo būdai

3

Articulate: •who users are •their key tasks

User and task descriptions

Goals:

Methods:

Products:

Brainstorm designs

Task centered system design

Participatory design

User-centered design

Evaluate

Psychology of everyday things

User involvement

Representation & metaphors

low fidelity prototyping methods

Throw-away paper prototypes

Participatory interaction

Task scenario walk- through

Refined designs

Graphical screen design

Interface guidelines

Style guides

high fidelity prototyping methods

Testable prototypes

Usability testing

Heuristic evaluation

Completed designs

Alpha/beta systems or complete specification

Field testing

Panaudojamumo inžinerijos procesas (Soul Greenberg)

MAKETAVIMAS

Kam reikalingas maketas?

• Aptarti produkto viziją su kolegomis, užsakovais ir naudotojais

• Vertinti panaudojamumo tikslus

– Našumą

– Efektyvumą

• Išmokstamumą, įsimenamumą, naudingumą, saugumą

– Lankstumą

– Vertinimo metodikas nagrinėsime atskirai

5

Produkto tikslai

Maketai

Projektiniai sprendimai

Naudotojo poreikiai

Pradedama nuo užduočių analizės

Maketavimas gyvavimo cikle

Maketo išbaigtumas

Projekto etapai

Kadruotės (angl. storyboarding)

Scot Klemmer, www.hci-class.org

Maketas popieriuje

Interaktyvusis maketas

Detalusis prototipas

Kas yra maketas?

• Ribotas pavaizdavimas

• Leidžiantis naudotojams sąveikauti, nagrinėti jo atitikimą poreikiams.

• Skiriasi resursų sąnaudomis ir detalumu

– maketai ir detalieji prototipai

9

Maketavimo tipai • Maketai

– Sąveikos maketai • Kadruotės

• scenarijai

– Interfeiso maketai • Greiti interkatyvūs maketai

• Wizard of Oz eksperimentai

• Kompiuterinė animacija

• Detalieji prototipai – Dalinai veikianti sistema

• Tikslas: išbandyti pasirinktą sąveikos rūšį

• Svarbu: PIGU ir GREITA!

10

low-fidelity prototype

Storyboards

Rapid prototype

high-fidelity prototype

Maketas – ribota realizacija

• Padeda išbandyti

– Dizainą: kaip tai galėtų atrodyti?

– Realizaciją: kaip tai galėtų veikti?

– Jausmus: ar malonu naudoti?

• Esmė

– dalykinės srities pažinimas

– dalykiškas bendravimas su naudotojais

– pigus kūrimas ir modifikavimas

– poreikių ir reikalavimų formulavimas

Maketas – tai klausimas

Prototipas prijungtas prie kompiuterio. Išbandomas projektuojamas interfeisas. Išvestis rodoma kompiuteryje. (Björn Hartmann, 2009)

suinteresuotiems asmenims, projektuotojams, testuotojams

Maketavimas

IDEO: kairėje - pirmojo skaitmeninio aparato maketas, valdomas kompiuterio; dešinėje – galutinis produktas, Kodak DC-210 skaitmeninė kamera (Buchenau, Suri, 2000)

• PalmPilot pirmasis maketas - medžio kaladėlė,

• Projektuotojas nešiojosi su savimi ir užrašinėjo ant klijojamų lapelių, kokios informacijos jam konkrečiu momentu reikia.

PalmPilot kūrėjai Jeff Hawkins, Donna Dubinsky, and Ed Colligan (Palm Computing) http://en.wikipedia.org/wiki/Palm_(PDA)

“The best way to have a good idea is to have lots of ideas.” Linus Pauling

IDEO pelių prototipai

Maketavimo tikslas - kokybiškas sprendimas

Funkcinė fiksacija: kaip pritvirtinti degančią žvakę prie sienos?

Duncker, 1945

http://purplecowideas.wordpress.com/2013/06/25/functional-fixedness-in-the-workplace/

Žmonės iš pirmo žvilgsnio nepastebi, kad smeigtukų dežutė gali būti panaudota kitam tikslui. Tik ilgiau pagalvojus po kurio laiko atsiranda sprendimas:

Interaktyvieji maketai

• Maketas su veikiančiais mygtukais

• Esminių užduočių rodiniai

• Pavyzdys

Maketų tipai

• Naudojimo scenarijų maketai

– Kadruotės

– Sąveikos imitacija

• angl. Wizards of Oz experiment

– Video maketai

• Interfeisų maketai

– Popieriniai maketai

– Interaktyvieji maketai

Interfeisų maketai

• Popierinis

– Greita ir pigu

• Elektroniniai

– Kūrimas užtrunka ilgiau

– Mažiau dialogo su naudotoju galimybių

• Procesas

– Eskizas > prototipas > vertinimas > perprojektavimas

– Galima simuliuoti prototipą

– Leidžia neinformatikams dalyvauti projektavime

19

Pagrindinės medžiagos

• Didesnio formato baltas popierius

• Katalogo rodyklių kortelės

– 5x8 colių

• Lipni juosta, klijai, korektorius

• Tušinukai ir markeriai

• Skaidrės

• Žirklės, ir t.t.

20

21

Maketai

• Pirmieji eskizai

• Kas turi būti matoma?

– Interfeiso struktūra, metaforos

22

Maketai

23

Popieriniai scenarijai

24

Interfeiso maketai

25

Interfeiso maketai

26

ESP

Popierinis maketavimas • Laikyti maketą vienoje vietoje, pvz. dėžutėje

– taip nepasimes smulkūs maketo elementai

• Sąveiką imituoti aiškinant žodžiu

• Rodyti esminius elementus

• Nauda

– Pagalbinė priemonė kalbant su naudotojais

– Leidžia palyginti kelias alternatyvas

27

Greitieji interaktyvūs maketai

• Kuriami greitojo maketavimo priemonėmis

• Atrodo kaip piešti ranka

• Skatina sprendimų aptarimą

• Pavyzdžiai

Rapid prototyping tools

Tikslas: neformali nuomonė

• Parodyti maketą naudotojams

– Pavyzdžiui, http://www.youtube.com/watch?v=_5FGeSQ7DBU

• Stebėti naudotojo vargą su pateiktu prototipu

• Geranoriškai priimti pastabas

• Neprisirišti prie pirmos idėjos

• Nesivaržyti dėl to, kieno idėja laimės 29

Kartoti projektavimą

• Perprojektuoti interfeisą

– Atsižvelgiant į maketų vertinimus

• Be gailesčio atmesti naudotojo kritikuojamus sprendimus

– Nepriimti kritikos asmeniškai

• Ir vėl

– derinti su naudotojais

30

Perprojektuoti maketą

• Atmesti naudotojo kritikuojamus sprendinius

31

Greitojo kūrimo priemonės • Balsamiq Mockups

– Nemokamas nekomerciniams taikymams

32 http://www.balsamiq.com/products/mockups

33

• Firefox maketavimo įskiepis - nemokamas

https://addons.mozilla.org/en-US/firefox/addon/pencil/

Prototype Composer

• Tik Windows, nemokamas – Gal kiek sudėtingas, reikia kažkiek laiko skirti pasimokyti

http://www.serena.com/products/prototype-composer/index.html

Mockingbird • Internetinė prototipavimo priemonė

35 https://gomockingbird.com/

iPlotz

• Interneto svetainių ir taikymų prorotipavimas

– Nemokama – apribota versija,

http://iplotz.com/

WireframeSketcher

• Eclipse plug-in

– Nemokamas nekomerciniams taikymams

http://wireframesketcher.com/

Kitos maketavimo priemonės

• Mišraus poperinio/skaitmeninio maketavimo priemonės leidžia nufotografuoti popierinį eskizą ir jį animuoti: – Pop - https://popapp.in/

– Flinto - https://www.flinto.com/

– Apple Keynote ar MS PowerPoint ar Google presentation - http://keynotopia.com/guides/

– Balsamiq -http://balsamiq.com/

• Priemonės nemokantiems programuoti, HTML5 prototypai: – Tumult Hype -http://tumult.com/hype/

Adobe Edge Animate - http://html.adobe.com/edge/animate/ Google’s Web Designer - https://www.google.com/webdesigner

• Kitos priemonės – http://www.mockflow.com/

– http://www.lumzy.com/

Wizard-of-Oz eksperimentai • Tikslas – imituoti sistemą, turint tik interfeiso vaizdus.

• Prototipas – paveikslų rinkinys

• Interaktyvumą imituoja sėdinti prie kito kompiuterio žmogus

– Naudotojas nežino, kad sistema netikra

>Blurb blurb

>Do this

>Why?

Naudotojas

Sistemą imituojantis projektuotojas

AR GALIMA MAKETUOTI JAUSMUS?

Kaip suprasti naudotojo potyrius?

• Ką jaučia pagyvenęs žmogus?

Third Age Suit ICE, Loughborough University

http://www.lboro.ac.uk/research/theview/archive/ss10/articles/restricted-mobility/page2.html

Kas geriau: kokybė ar kiekybė?

www.hci-class.org , Bayles and Orland, 2001

Kuris maketavimo būdas?

Lygiagretus Nuoseklus

Maketas Maketas

Maketas

Atsakas Atsakas

Maketas

Maketas

Maketas

Atsakas

Atsakas

(Dow, Fortuna, Schwartz, Altringer, Schwartz, Klemmer, 2011)

Apžvelgėme

• Maketavimo tikslus • Kadruotes (angl. Storyboarding) • Popierinius maketus • Interaktyvius maketus • Maketavimas

– Naudotojui palankaus projektavimo proceso dalis – Komunikacijos su kolegomis ir naudotojais priemonė – Pigus ir greitas sprendimų išbandymas

• Detalusis prototipas kuriamas pasimokius iš maketo

Šaltiniai

• Scot Klemmer, Lecture 3.1, Paper prototypes and mockups, www.hci-class.org • Björn Hartmann , PhD thesis, 2009

http://hci.stanford.edu/publications/2009/hartmann-diss.pdf • Marion Buchenau, Jane Fulton Suri (2000). Experience Prototyping. Proceedings of the

3rd conference on Designing Interactive Systems: Processes, Practices, Methods, and Techniques, DIS ’00, ACM, New York, pp. 424-433 http://dl.acm.org/citation.cfm?id=347802

• Bill Buxton, Sketching User Experiences: Getting the Design Right and the Right Design, Amsterdam : Elsevier/ Morgan Kaufmann, 2008. (yra MIF bibliotekoje)

• Prototyping Dynamics: Sharing Multiple Designs Improves Exploration, Group Rapport, and Results, Steven P. Dow, Julie Fortuna, Dan Schwartz, Beth Altringer, Daniel L Schwartz, and Scott R Klemmer. CHI: ACM Conference on Human Factors in Computing Systems, 2011.

• Parallel Prototyping Leads to Better Design Results, More Divergence, and Increased Self-Efficacy, Steven P Dow, Alana Glassco, Jonathan Kass, Melissa Schwarz, Daniel Schwartz, Scott R Klemmer. ACM Transactions on Computer- Human Interaction, 2010

• The Efficacy of Prototyping Under Time Constraints, Steven P. Dow, Kate Heddleston, Scott R Klemmer. Creativity & Cognition, 2009

• Functional Fixedness in the Workplace

Klausimai egzaminui

• Naudojimo scenarijaus (naudotojo sąveikos su kuriama sistema) maketavimas: tikslai, būdai, vieta projekto gyvavimo cikle

• Naudotojo interfeiso maketavimas: tikslai, būdai, vieta projekto gyvavimo cikle

• Paanalizuokite lygiagretaus ir nuoseklaus maketavimo privalumus ir trūkumus.

• Kaip funkcinė fiksacija riboja kūrybiškumą maketavimo procese?