+ All Categories
Home > Education > [IxD] Week 03. Understanding and Conceptualizing Interaction Design

[IxD] Week 03. Understanding and Conceptualizing Interaction Design

Date post: 06-Apr-2017
Category:
Upload: dsdlab
View: 430 times
Download: 2 times
Share this document with a friend
62
Lecture 2 Understanding and Conceptualizing Interaction Design Interaction Design / IID 2017 Spring Class hours : Wednesday 2:00 pm – 5:50 pm Lecture room : International Campus Veritas Hall B308 22 nd March
Transcript
Page 1: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Lecture 2

Understanding and Conceptualizing Interaction Design

Interaction Design / IID 2017 Spring Class hours : Wednesday 2:00 pm – 5:50 pm Lecture room : International Campus Veritas Hall B308 22nd March

Page 2: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Augmented City 3D

Lecture #2 IID_Interaction Design 2

- Keiichi Matsuda

https://vimeo.com/14294054

Page 3: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Hyper-Reality

Lecture #2 IID_Interaction Design 3

- Keiichi Matsuda

https://vimeo.com/166807261

Page 4: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Homework

Lecture #2 IID_Interaction Design 4

Video notes in a time capsule

Your Blog Post #3 - Title “Message to myself in the Future(about 10 years later?)” - Edit it in the length of 30 seconds. - Share the vimeo(or youtube) link on your blog

Page 5: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

UNDERSTANDING AND CONCEPTUALIZING INTERACTION DESIGN

Lecture 2

Lecture #2 IID_Interaction Design 5

Page 6: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Recap

• HCI has moved beyond designing interfaces for desktop machines

• About extending and supporting all manner of human activities in all

manner of places

• Facilitating user experiences through designing interactions:

– Make work effective, efficient and safer

– Improve and enhance learning and training

– Provide enjoyable and exciting entertainment

– Enhance communication and understanding

– Support new forms of creativity and expression

Lecture #2 IID_Interaction Design 6

Page 7: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Understanding the problem space

• What do you want to create?

• What are your assumptions?

• Will it achieve what you hope it will?

Lecture #2 IID_Interaction Design 7

Page 8: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

What is an assumption?

• Taking something for granted when it needs further investigation

– e.g. people will want to watch TV while driving

Lecture #2 IID_Interaction Design 8

http://www.ibiblio.org/jlillie/cooltown/lillie.htm

Page 9: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

What is a claim?

• Stating something to be true when it is still open to question

– e.g. a multimodal style of interaction for controlling GPS — one that

involves speaking while driving — is safe

Lecture #2 IID_Interaction Design 9

Page 10: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

A framework for analysing the problem space

• Are there problems with an existing product or user experience? If so,

what are they?

• Why do you think there are problems?

• How do you think your proposed design ideas might overcome these?

• If you are designing for a new user experience how do you think your

proposed design ideas support, change, or extend current ways of doing

things?

Lecture #2 IID_Interaction Design 10

Page 11: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Activity

• What are the assumptions and claims made about 3D TV?

Lecture #2 IID_Interaction Design 11

Figure 2-2 A family watching 3D TV (Source: Andrey Popv/Shutterstock.com)

Page 12: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Assumptions: realistic or wish-list?

• People would not mind wearing the glasses that are needed to see in

3D in their living rooms – reasonable

• People would not mind paying a lot more for a new 3D-enabled TV

screen – not reasonable

• People would really enjoy the enhanced clarity and color detail

provided by 3D – reasonable

• People will be happy carrying around their own special glasses –

reasonable only for a very select bunch of users

Lecture #2 IID_Interaction Design 12

Page 13: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Benefits of conceptualising

• Orientation

– enables design teams to ask specific questions about how the conceptual

model will be understood

• Open-minded

– prevents design teams from becoming narrowly focused early on

• Common ground

– allows design teams to establish a set of commonly agreed terms

Lecture #2 IID_Interaction Design 13

Page 14: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

From problem space to design space

• Having a good understanding of the problem space can help inform

the design space

– e.g. what kind of interface, behavior, functionality to provide

• But before deciding upon these it is important to develop a conceptual

model

Lecture #2 IID_Interaction Design 14

Page 15: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Conceptual model

• A conceptual model is:

– “…a high-level description of how a system is organized and operates”

(Johnson and Henderson, 2002, p26)

• Enables

– “…designers to straighten out their thinking before they start laying out

their widgets”

(Johnson and Henderson, 2002, p28)

Lecture #2 IID_Interaction Design 15

Page 16: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Components

• Metaphors and analogies

– understand what a product is for and how to use it for an activity

• Concepts that people are exposed to through the product

– task–domain objects, their attributes, and operations (e.g. saving,

revisiting, organizing)

• Relationship and mappings between these concepts

Lecture #2 IID_Interaction Design 16

Page 17: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

First steps in formulating a conceptual model

• What will the users be doing when carrying out their tasks?

• How will the system support these?

• What kind of interface metaphor, if any, will be appropriate?

• What kinds of interaction modes and styles to use?

– always keep in mind when making design decisions how the user will

understand the underlying conceptual model

Lecture #2 IID_Interaction Design 17

Page 18: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Conceptual models

• Many kinds and ways of classifying them

• We describe them in terms of core activities and objects

• Also in terms of interface metaphors

Lecture #2 IID_Interaction Design 18

Page 19: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Conceptual models

Lecture #2 IID_Interaction Design 19

Figure 2.3 The first page of a design concept for an ambient display

Design concept (Hazlewood et al, 2010)

Page 20: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Conceptual models

Lecture #2 IID_Interaction Design 20

Figure 2.4 The Xerox Star

Page 21: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Interface metaphors

• Conceptualizing what we are doing, e.g. surfing the web

• A conceptual model instantiated at the interface, e.g. the desktop

metaphor

• Visualizing an operation, e.g. an icon of a shopping cart for placing

items into

Lecture #2 IID_Interaction Design 21

Page 22: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Material Metaphors

• The card is a very popular UI

• Why?: Has familiar form factor

• Material properties are added, giving

appearance and physical behavior, e.g.

surface of paper

Lecture #2 IID_Interaction Design 22

Page 23: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Activity

• Describe the components of the conceptual model underlying most

online shopping websites, e.g.

– Shopping cart

– Proceeding to check-out

– 1-click

– Gift wrapping

– Cash till?

Lecture #2 IID_Interaction Design 23

Page 24: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Interface metaphors

• Interface designed to be similar to a physical entity but also has own properties

– e.g. desktop metaphor, web portals

• Can be based on activity, object or a combination of both

• Exploit user’s familiar knowledge, helping them to understand ‘the unfamiliar’

• Conjures up the essence of the unfamiliar activity, enabling users to leverage of

this to understand more aspects of the unfamiliar functionality

Lecture #2 IID_Interaction Design 24

Page 25: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Benefits of interface metaphors

• Makes learning new systems easier

• Helps users understand the underlying conceptual model

• Can be very innovative and enable the realm of computers and their

applications to be made more accessible to a greater diversity of

users

Lecture #2 IID_Interaction Design 25

Page 26: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Problems with interface metaphors

• Break conventional and cultural rules

– e.g. recycle bin placed on desktop

• Can constrain designers in the way they conceptualize a problem space

• Conflict with design principles

• Forces users to only understand the system in terms of the metaphor

• Designers can inadvertently use bad existing designs and transfer the bad parts over

• Limits designers’ imagination in coming up with new conceptual models

Lecture #2 IID_Interaction Design 26

Page 27: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Interaction types

• Instructing

– issuing commands and selecting options

• Conversing

– interacting with a system as if having a conversation

• Manipulating

– interacting with objects in a virtual or physical space by manipulating

them

• Exploring

– moving through a virtual environment or a physical space

Lecture #2 IID_Interaction Design 27

Page 28: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

1. Instructing

• Where users instruct a system and tell it what to do

– e.g. tell the time, print a file, save a file

• Very common conceptual model, underlying a diversity of devices and

systems

– e.g. word processors, VCRs, vending machines

• Main benefit is that instructing supports quick and efficient interaction

– good for repetitive kinds of actions performed on multiple objects

Lecture #2 IID_Interaction Design 28

Page 29: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Which is easiest and why?

Lecture #2 IID_Interaction Design 29

Figure 2.6 Two different types of vending machine

Page 30: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

2. Conversing

• Underlying model of having a conversation with another human

• Range from simple voice recognition menu-driven systems to more

complex ‘natural language’ dialogs

• Examples include timetables, search engines, advice-giving systems,

help systems

• Also virtual agents, toys and pet robots designed to converse with you

Lecture #2 IID_Interaction Design 30

Page 31: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

2. Conversing

Lecture #2 IID_Interaction Design 31

Page 32: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

2. Conversing

Lecture #2 IID_Interaction Design 32

Page 33: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Pros and cons of conversational model

• Allows users, especially novices and technophobes, to interact with

the system in a way that is familiar

– makes them feel comfortable, at ease and less scared

• Misunderstandings can arise when the system does not know how to

parse what the user says

Lecture #2 IID_Interaction Design 33

Page 34: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

But finally we’re going to find how to collaborate

Lecture #2 IID_Interaction Design 34

Page 35: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

3. Manipulating

• Involves dragging, selecting, opening, closing and zooming actions on virtual

objects

• Exploit’s users’ knowledge of how they move and manipulate in the physical world

• Can involve actions using physical controllers (e.g. Wii) or air gestures (e.g. Kinect)

to control the movements of an on screen avatar

• Tagged physical objects (e.g. balls) that are manipulated in a physical world result

in physical/digital events (e.g. animation)

Lecture #2 IID_Interaction Design 35

Page 36: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Direct Manipulation

• Shneiderman (1983) coined the term DM, came from his fascination

with computer games at the time

– Continuous representation of objects and actions of interest

– Physical actions and button pressing instead of issuing commands with

complex syntax

– Rapid reversible actions with immediate feedback on object of interest

Lecture #2 IID_Interaction Design 36

Page 37: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Why are DM interfaces so enjoyable?

• Novices can learn the basic functionality quickly

• Experienced users can work extremely rapidly to carry out a wide

range of tasks, even defining new functions

• Intermittent users can retain operational concepts over time

• Error messages rarely needed

• Users can immediately see if their actions are furthering their goals

and if not do something else

• Users experience less anxiety

Lecture #2 IID_Interaction Design 37

Page 38: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

What are the disadvantages with DM?

• Some people take the metaphor of direct manipulation too literally

• Not all tasks can be described by objects and not all actions can be

done directly

• Some tasks are better achieved through delegating

– e.g. spell checking

• Can become screen space ‘gobblers’

• Moving a mouse around the screen can be slower than pressing

function keys to do same actions

Lecture #2 IID_Interaction Design 38

Page 39: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

4. Exploring

• Involves users moving through virtual or physical environments

• Physical environments with embedded sensor technologies

Lecture #2 IID_Interaction Design 39

Page 40: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

4. Exploring

Lecture #2 IID_Interaction Design 40

Figure 2.6 (a) A CAVE that enables the user to stand near a huge insect, eg. a beetle, be swallowed, and end up in its abdomen; and (b) NCSA’s CAVE being used by a scientist to move through 3D visualization of the datasets

Page 41: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

4. Exploring

Lecture #2 IID_Interaction Design 41

- Body Swap Experiences

https://vimeo.com/84150219

Page 42: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

4. Exploring

Lecture #2 IID_Interaction Design 42

- In the Eyes of Animals By Marshmallow Laser Feast

https://vimeo.com/140057053

Page 43: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

4. Exploring

Lecture #2 IID_Interaction Design 43

- Palimpsest

https://vimeo.com/184695285

Page 44: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Which conceptual model is best?

• Direct manipulation is good for ‘doing’ types of tasks, e.g. designing, drawing, flying,

driving, sizing windows

• Issuing instructions is good for repetitive tasks, e.g. spell-checking, file

management

• Having a conversation is good for children, computer-phobic, disabled users and

specialised applications (e.g. phone services)

• Hybrid conceptual models are often employed, where different ways of carrying

out the same actions is supported at the interface - but can take longer to learn

Lecture #2 IID_Interaction Design 44

Page 45: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Conceptual models: interaction and interface

• Interaction type:

– what the user is doing when interacting with a system, e.g. instructing,

talking, browsing or other

• Interface type:

– the kind of interface used to support the mode, e.g. speech, menu-based,

gesture

Lecture #2 IID_Interaction Design 45

Page 46: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Many kinds of interface types available including…

• Command

• Speech

• Data-entry

• Form fill-in

• Query

• Graphical

• Web

• Pen

• Augmented reality

• Gesture

Lecture #2 IID_Interaction Design 46

Page 47: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Which interaction type to choose?

• Need to determine requirements and user needs

• Take budget and other constraints into account

• Also will depend on suitability of technology for activity being

supported

• This is covered in course when designing conceptual models

Lecture #2 IID_Interaction Design 47

Page 48: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Paradigm

• Inspiration for a conceptual model

• General approach adopted by a community for carrying out research

– shared assumptions, concepts, values, and practices

– e.g. desktop, ubiquitous computing, in the wild

Lecture #2 IID_Interaction Design 48

Page 49: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Examples of new paradigms

• Ubiquitous computing (mother of them all)

• Pervasive computing

• Wearable computing

• Tangible bits, augmented reality

• Attentive environments

• Transparent computing

– and many more….

Lecture #2 IID_Interaction Design 49

Page 50: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Visions

• A driving force that frames research and development

• Invites people to imagine what life will be like in 10, 15 or 20 years time

– e.g. Apple’s 1987 Knowledge Navigator

– Smart Cities, Smart Health

• Provide concrete scenarios of how society can use the next generation of

imagined technologies

• Also raise many questions concerning privacy and trust

Lecture #2 IID_Interaction Design 50

Page 51: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

The Internet of Things (IBM Watson)

Lecture #2 IID_Interaction Design 51

Page 52: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

The Internet of Things

Lecture #2 IID_Interaction Design 52

- IBM Cognitive Intelligence

https://youtu.be/fuZiZtmkRX4

Page 53: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Met Gala 2016: Karolina Kurkova's dress

Lecture #2 IID_Interaction Design 53

Page 54: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

The Internet of Things

Lecture #2 IID_Interaction Design 54

https://youtu.be/kW9DSYxMR_E

Marchesa and IBM Watson design the cognitive dress

Page 55: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Theory

• Explanation of a phenomenon

– e.g. information processing that explains how the mind, or some aspect of

it, is assumed to work

• Can help identify factors

– e.g. cognitive, social, and affective, relevant to the design and evaluation

of interactive products

Lecture #2 IID_Interaction Design 55

Page 56: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Models

• A simplification of an HCI phenomenon

– intended to make it easier for designers to predict and evaluate

alternative designs

– abstracted from a theory coming from a contributing discipline, e.g.

psychology, e.g. keystroke model

Lecture #2 IID_Interaction Design 56

Page 57: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Framework

• Set of interrelated concepts and/or specific questions for ‘what to look

for’

• Many in interaction design

– e.g. Norman’s conceptual models, Benford’s trajectories

• Provide advice on how to design

– e.g. steps, questions, concepts, challenges, principles, tactics and

dimensions

Lecture #2 IID_Interaction Design 57

Page 58: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Lecture #2 IID_Interaction Design 58

Page 59: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Summary

• Developing a conceptual model involves good understanding of the problem space,

specifying what it is you are doing, why, and how it will support users

• A conceptual model is a high-level description of a product in terms of what users

can do with it and the concepts they need to understand how to interact with it

• Interaction types (e.g. conversing, instructing) provide a way of thinking about how

best to support user’s activities

• Paradigms, visions, theories, models, and frameworks provide different ways of

framing and informing design and research

Lecture #2 IID_Interaction Design 59

Page 60: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Making Game Characters

Lecture #2 IID_Interaction Design 60

Page 61: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Homework

Lecture #2 IID_Interaction Design 61

Open a Pinterest Account

Make a Game Character of Your Own

Write a diary on your journey in the game world

1 2 3

Pinterest - Set up your

account

- Make an initial board, titled “Sketches”

Pinterest - Capture your game character

in the game world you’ve been belonging to

- Or you can use multiplatform character generators such as

- http://www.mixamo.com/ - http://www.autodesk.com/produ

cts/character-generator - https://www.morph3d.com/

- Uploads the images on the

Pinterest “Character” board

Your Blog Post #4 - Title “3 days in

<<Game_Title>>” - Explain your Character - Describe the game story and

context - Capture a convo with other

characters (text capture) - Capture game scenes of the

Journey

Submission Due : 11: 59 pm Sun. 26th March

Page 62: [IxD] Week 03. Understanding and Conceptualizing Interaction Design

Contacts

• Email

[email protected]

• Class Blog

– http://www.designio360.com

Lecture #2 IID_Interaction Design 62


Recommended