HCI  and  Interaction  DesignMattias  Arvola

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.

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.

Command  Line  Interfaces  CLI

4

cp  merits.txt  ~/personal  

Copy the file merits.txt to the directory personal in the home directory

Menu  interfaces

5

• Stepping through hierarchies of menus or screens

• 1D or 2D

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

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)

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

The  Xerox  Star    1980

9

Apple  Lisa  1983 10

11Windows  10

12Mac  OS  X  El  Capitan

13Android  Material  Design

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

Mobile  Input

15

• Touch screen with one or several points of interaction

• Soft keyboard • Physical keyboard • Microphone • Physical buttons • Sensors

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

Augmented  Reality

17

• Head mounted • Mobile • Projector-based

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

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

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

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

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.

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

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

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

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 • …

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

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

29

By Bill Verplank, whom together with Bill Moggridge invented the term.

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

31

concept revisions detailing

Design  as  reduced  uncertainty

32

What  should  be  done?  

Known

Unknown

Unknown Known

How  should  it  be  done?

The  Task-­‐Artifact  Cycle

33

Task Artifact

Requirements  and  design  ideas

Adoption,  appropriation  and  use

34

concept revisions detailing

design  criteria

ideas

concept

prototype

product

fuzzy  front  end:   uncertainty  >>  pacerns  >>  insights clarity  >>  focus

Intertwined  processes  –  Lundequist  (1995) 35

• Information management

• Decisions • Managing

appearing problems

• Manifestation of ideas (Swe. ’gestaltning’, Ger. ‘gestaltung’)

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

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?

To  Conclude

38

• Interaction design is about shaping conditions for people to interact with, through and by means of interactive products and services.

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.

www.liu.se

@mattiasarvola