hciand$interaction$design - idatddd58/2-hci-ixd.pdf• interaction design and the behaviors of the...
TRANSCRIPT
![Page 1: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/1.jpg)
HCI and Interaction DesignMattias Arvola
![Page 2: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/2.jpg)
Human-‐Computer Interaction (Carroll, 2014)
2
• Early 1980s, a specialty area in computer science embracing cognitive science and human factors engineering.
• Now aggregates a collection of semi-autonomous fields of research and practice in human-centered informatics.
• Computer science, psychology, sociology, anthropology, and design.
![Page 3: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/3.jpg)
A definition from ACM
3
• A discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.
![Page 4: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/4.jpg)
Command Line Interfaces CLI
4
cp merits.txt ~/personal
Copy the file merits.txt to the directory personal in the home directory
![Page 5: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/5.jpg)
Menu interfaces
5
• Stepping through hierarchies of menus or screens
• 1D or 2D
![Page 6: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/6.jpg)
The 90ies
6
• Internet • Cell phones • Digital consumer products • Games • IT for fun and not only for work • Aesthetics, playfullness and social qualities become
more important
![Page 7: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/7.jpg)
7
it no longer makes sense to regard HCI as a specialty of computer science; HCI has grown to be broader, larger and much more diverse than computer science itself. […] There is no unified concept of an HCI professional.
– Carroll (2014)
![Page 8: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/8.jpg)
Graphic User Interfaces GUI
8
• WIMP – Windows, Icons, Menus, Pointers
• WYSIWIG – What you see is what you get
• Direct manipulation • Spatial
representations • Shows actions on the
marker
![Page 9: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/9.jpg)
The Xerox Star 1980
9
![Page 10: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/10.jpg)
Apple Lisa 1983 10
![Page 11: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/11.jpg)
11Windows 10
![Page 12: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/12.jpg)
12Mac OS X El Capitan
![Page 13: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/13.jpg)
13Android Material Design
![Page 14: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/14.jpg)
Mobile and touch
14
• Less screen real estate means tougher prioritization • A mobile context of use is different from a stationary • What do you need to know, do and feel at this
particular moment in this particular context? • Visiting, traveling or local mobility? • What happens when you turn the screen? • Think location-based • Animation • Minimal user help
![Page 15: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/15.jpg)
Mobile Input
15
• Touch screen with one or several points of interaction
• Soft keyboard • Physical keyboard • Microphone • Physical buttons • Sensors
![Page 16: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/16.jpg)
Tangible UIs and Augmented Reality
16
• We are physical beings and interact with the would using our bodies.
• We do not only consist of a couple of eyes and an index finger. Why not make use of that in HCI?
• Reactable: http://www.youtube.com/watch?v=vm_FzLya8y4
![Page 17: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/17.jpg)
Augmented Reality
17
• Head mounted • Mobile • Projector-based
![Page 18: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/18.jpg)
InnehållI detta skede togs allt innehåll till Astrid spår fram i samarbete mellan projektets in-nehållsproducent och deltagare från Astrid Lindgrens Näs. Det inkluderade berättar-röster, talade instruktioner, filmer, 3D-modeller av hus (invändigt och utvändigt), 3D-modell av kikhål in i det ihåliga Uggleträdet med dess fågelbo med ägg, panorama, illustrationer, samt tryckmaterial.
AnvändargränssnittNär användaren kommer i en fördefinierad region spelas berättelser och filmer upp. Om kameran riktas mot markörer på den tryckta kartan eller markörer uppsatta i omgivningen utlöses andra händelser och skatter kan hittas eller så kan 3D-objekt överlagras på markören i kamerabilden. Figur 65 visar hur det ser ut på kartan. När användaren hittar skatter bytts bilderna på kartan ut, och de börjar studsa istället för att vaja.
Figur 65. Den datorförstärkta kartan.
Genom GPS-koordinater och markörer kan information och innehåll kopplas till en specifik plats, därigenom förflyttar sig användare i en informationsrymd genom att röra sig i den fysiska rymden. Detta är en interaktionsteknik som kan kallas platsbase-rad navigation (eng. ‘location-based navigation’).
När användaren närmar sig Uggleträdet så finns där en markör och när användaren riktar markören mot den visas ett hål in i trädet. Det gör det möjligt för användaren
160
Minnesmark
![Page 19: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/19.jpg)
19
Device-‐movement-‐based zoomingatt se vad som döljer sig inne i trädet, vilket illustreras i Figur 66. Genom att gå när-mare zoomar användaren in, detta är en interaktionsteknik som skulle kunna kallas rörelsebaserad zoomning (eng. ’ device-movement-based zooming’).
Figur 66. Hålet i Uggleträdet (i denna bild är hålet i väggen på kontoret istället).
När användaren kommer till Kristins hus (som sedan länge är rivet) så kan han eller hon gå in i huset och där inne se sig omkring hur det kan ha sett ut. För att se sig om i det virtuella huset (modellerat i 3D) så håller användaren sin telefon eller platta framför sig och snurrar på stället. Som visas i Figur 67 kan användaren vrida sig runt horisontellt, men också rikta telefonen eller plattan upp mot taket eller ned mot gol-vet och därmed panorera på den vertikala axeln.
1. The user sees the hole when directing the camera to the marker.
2. He zooms in by moving closer.
3. When moving close enough the user can view the inside of the tree and seethe birds nest and the eggs.
4. As the user move backwards he can againsee the outside view of the hole and zoom out.
161
![Page 20: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/20.jpg)
20
Device-‐movement-‐based panningatt se vad som döljer sig inne i trädet, vilket illustreras i Figur 66. Genom att gå när-mare zoomar användaren in, detta är en interaktionsteknik som skulle kunna kallas rörelsebaserad zoomning (eng. ’ device-movement-based zooming’).
Figur 66. Hålet i Uggleträdet (i denna bild är hålet i väggen på kontoret istället).
När användaren kommer till Kristins hus (som sedan länge är rivet) så kan han eller hon gå in i huset och där inne se sig omkring hur det kan ha sett ut. För att se sig om i det virtuella huset (modellerat i 3D) så håller användaren sin telefon eller platta framför sig och snurrar på stället. Som visas i Figur 67 kan användaren vrida sig runt horisontellt, men också rikta telefonen eller plattan upp mot taket eller ned mot gol-vet och därmed panorera på den vertikala axeln.
1. The user sees the hole when directing the camera to the marker.
2. He zooms in by moving closer.
3. When moving close enough the user can view the inside of the tree and seethe birds nest and the eggs.
4. As the user move backwards he can againsee the outside view of the hole and zoom out.
161
![Page 21: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/21.jpg)
21
Figur 67. Användaren ser sig om i det virtuella huset genom att vända sig och plattan eller telefonen i den riktning han eller hon vill titta.
Det här en interaktionsteknik som kallas tvådimensionell riktningsbaserad panore-ring (eng. ‘two-dimensional device-direction-based panning’). Precis som rörelsebase-rad zoomning faller inom ramen för dynamisk kikhålsnavigation (eng. ‘dynamic peephole navigation’) (Hürst & Bilyalov, 2010).
I panoramat från Astrid Lindgrens tak kan användaren bara panorera horisontellt (Fi-gur 68).
162
Two-‐dimensional device-‐direc1on based panning
![Page 22: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/22.jpg)
Interaction Design – Löwgren (2008)
22
• Interaction Design refers to the shaping of interactive products and services with a specific focus on their use.
• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial design by the design community.
![Page 23: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/23.jpg)
Five Major Characteristics of Design
23
• Design involves changing situations by shaping and deploying artifacts
• Design is about exploring possible futures • Design entails framing the “problem” in parallel with
creating possible “solutions” • Design involves thinking through sketching and other
tangible representations • Design addresses instrumental, technical, aesthetical
and ethical aspects throughout
![Page 24: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/24.jpg)
Design – According to Bruce Archer (1965)
24
1. There has to be a prior formulation of a prescription or model for a finished work in advance of its embodiment
2. The prescribed formula or model must be embodied in/as an artefact
3. There must be a creative step in the process
4. It must have purpose. Intent over exploration.
5. It is intuitive but not spontaneous
6. It must begin with a need 7. It must reconcile 8. It must be holistic and consider
the artefact in a system and not of itself
9. Design problems are complex 10.Design is about the optimisation
of solutions
![Page 25: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/25.jpg)
UX Design (Don Norman)
25
• I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual. Since then the term has spread widely, so much so that it is starting to lose it’s meaning… http://www.adaptivepath.com/ideas/e000862
![Page 26: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/26.jpg)
Neither full, nor complete list of UX titles
26
• Digital Art Director • Project manager • User researcher • Interaction designer • Concept, LoFi, HiFi • Technical writer • Copywriter • Prototype Developer • Visual Designer
• Usability Tester • …
• Business analyst • Branding • Marketing • Front-end developers • …
![Page 27: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/27.jpg)
What Interaction Designers Design
27
• Websites • Mobile apps • Desktop apps • Intranets, and communities • Interactive spaces and exhibitions • Control room displays • UI for interactive consumer products
• Cross-channel user experiences
![Page 28: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/28.jpg)
Interactive Products and Services
28
• Offers people to interact with them, through them or by means of them
• To interact mean that users, products and services cooperate, hopefully in harmony and with playful simplicity
• Users and products or services act jointly in a coordinated manner in concerts towards a shared goal
• Computer-based products and services can respond to or initiate actions which creates a dialogue in the form of a temporal flow
![Page 29: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/29.jpg)
29
By Bill Verplank, whom together with Bill Moggridge invented the term.
![Page 30: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/30.jpg)
30
A Human-‐Centered Design Process (ISO 9241-‐210, 2010)
1. Plan the human-‐centred
process
2. Understand the context of
use
3. Specify user and business
4. Produce design solu1ons
5. Evaluate against
requirements
Meets the requirements
![Page 31: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/31.jpg)
31
concept revisions detailing
![Page 32: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/32.jpg)
Design as reduced uncertainty
32
What should be done?
Known
Unknown
Unknown Known
How should it be done?
![Page 33: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/33.jpg)
The Task-‐Artifact Cycle
33
Task Artifact
Requirements and design ideas
Adoption, appropriation and use
![Page 34: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/34.jpg)
34
concept revisions detailing
design criteria
ideas
concept
prototype
product
fuzzy front end: uncertainty >> pacerns >> insights clarity >> focus
![Page 35: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/35.jpg)
Intertwined processes – Lundequist (1995) 35
• Information management
• Decisions • Managing
appearing problems
• Manifestation of ideas (Swe. ’gestaltning’, Ger. ‘gestaltung’)
![Page 36: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/36.jpg)
Current topics and trends
36
• Sustainability • Systems thinking • Service design • Connectivity • Internet of things • Context awareness
• Augmented and mixed reality
• Communities • Intelligent agents • Robots • Wearables • Sensors
![Page 37: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/37.jpg)
Design Ethics
37
• All design builds on a personal stance on how you want to view the world, what is important, and for whom it is important
• To what world do you want to contribute?
![Page 38: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/38.jpg)
To Conclude
38
• Interaction design is about shaping conditions for people to interact with, through and by means of interactive products and services.
![Page 39: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/39.jpg)
Readings
39
• Arvola, M. (2014). Interaktionsdesign och UX: Om att skapa goda användarupplevelser (Ch. 1). Lund: Studentlitteratur.
• Carroll, J. M. (2014). Human Computer Interaction - brief intro. In M. Soegaard, and R. F. Dam (Eds.), The Encyclopedia of Human-Computer Interaction, 2nd Ed.. Aarhus, Denmark: The Interaction Design Foundation. https://www.interaction-design.org/encyclopedia/human_computer_interaction_hci.html (accessed 2014-06-05).
• Grudin, J. (1990). The computer reaches out: The historical continuity of interface design. Proc. CHI 90, 261-268.
• Grudin, J., & Poltrock, S. (2012). Taxonomy and theory in computer supported cooperative work. In S. W. J. Kozlowski (Ed.), The oxford handbook of organizational psychology (pp. 1323-1348). New York: Oxford University Press. http://research.microsoft.com/en-us/UM/People/jgrudin/publications/surveys/CSCW.pdf
• Löwgren, J. (2008). Interaction Design - brief intro. In M. Soegaard, and R. F. Dam (Eds.), The Encyclopedia of Human-Computer Interaction, 2nd Ed.. Aarhus: The Interaction Design Foundation. http://www.interaction-design.org/encyclopedia/interaction_design.html (accessed 2013-08-12).
• Saffer, D. (2009). Designing for Interaction: Creating Innovative Applications and Devices, 2nd Ed. (Ch. 1-2). Berkeley: New Riders.
![Page 40: HCIand$Interaction$Design - IDATDDD58/2-hci-ixd.pdf• Interaction design and the behaviors of the virtual world were before the mid nineties seen as a specialty within industrial](https://reader035.vdocuments.mx/reader035/viewer/2022070803/5f02f6c57e708231d406e12a/html5/thumbnails/40.jpg)
www.liu.se
@mattiasarvola