user interface software projectsdjp3/classes/2012_01_inf134/lectures/...•where users instruct a...

User Interface Software Projects

The author of this work license copyright to it according to theCreative Commons Attribution-Noncommercial-Share Alike 3.0 United States Licensehttp://creativecommons.org/licenses/by-nc-sa/3.0/us/

Assoc. Professor Donald J. PattersonINF 134 Winter 2012

Monday, February 6, 12

http://creativecommons.org/licenses/by-nc-sa/3.0/us/

http://creativecommons.org/licenses/by-nc-sa/3.0/us/

Understanding and

Conceptualizing Interaction

Content derived from Rogers, Sharp and Preece http://www.id-book.com/


http://www.hcibook.com

http://www.hcibook.com

• 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

Interaction types


• 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

Instructing


Which is easier and why?


• 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

Conversing


Conversing


http://www.ikea.com/us/en/



• 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

• User doesn’t know what the system is capable of

Pros and cons of conversational model


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

Manipulating


• 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

Direct Manipulation


• 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

• Users gain confidence and mastery and feel in control

Why are DM interfaces so enjoyable?


• 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

What are the disadvantages with DM?


• Involves users moving through virtual or physical

environments

• Physical environments with embedded sensor technologies

• Context aware

Exploring


• 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

Which conceptual model is best?


• 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

Conceptual models: interaction and interface


• Command

• Speech

• Data-entry

• Form fill-in

• Query

• Graphical

• Web

• Pen

• Augmented reality

• Gesture

• (for more see chapter 6)

Many kinds of interface types available…


• Important to have a good understanding of the problem

space

• Fundamental aspect of interaction design is to develop a

conceptual model

• Interaction modes and interface metaphors provide a

structure for thinking about which kind of conceptual model

to develop

• Interaction styles are specific kinds of interfaces that are

instantiated as part of the conceptual model

• Paradigms, theories, models and frameworks can also

shape a conceptual model

Summary


Interactive Paper Interfaces

Content derived from Buxton, Sketching User Experiences/


http://www.elsevierdirect.com/product.jsp?isbn=9780123740373

http://www.elsevierdirect.com/product.jsp?isbn=9780123740373

• It is a part of a participatory design process

• General Goal:

• Use rapid prototyping to explore the design space

• Works well with brainstorming

• Important that it be sketched

• Sketched is not just about drawing, it’s also an attitude



Design Process

What is wanted?

Implement and Deploy

Analysis

Design

Prototyping

Evaluation


• Fail fast

Rapid Prototyping


http://www.youtube.com/watch?feature=player_embedded&v=tkqqPGXMXRc

http://www.youtube.com/watch?feature=player_embedded&v=tkqqPGXMXRc

What is paper prototyping anyway?


• Why sketching?

• Quick

• Timely

• Inexpensive

• Disposable

• Plentiful

• Clear Vocabulary

• Distinct Gesture

• Minimal Detail

• Appropriate degree of refinement

• Suggest and explore, not confirm

• Ambiguity


Quick to make (at least

after some practice)


• Why sketching?

• Quick

• Timely

• Inexpensive

• Disposable

• Plentiful



• Minimal Detail



• Ambiguity


Can be provided when

needed


• Why sketching?

• Quick

• Timely

• Inexpensive

• Disposable

• Plentiful



• Minimal Detail



• Ambiguity


A sketch is cheap. High

cost inhibits design (early

in the process)


• Why sketching?

• Quick

• Timely

• Inexpensive

• Disposable

• Plentiful



• Minimal Detail



• Ambiguity


If you can’t afford to throw it

away it probably isn’t a sketch.

The investment is in the

concept, not the art. It’s value

depends on its disposability.


• Why sketching?

• Quick

• Timely

• Inexpensive

• Disposable

• Plentiful



• Minimal Detail



• Ambiguity


Sketched interfaces tend to

work best as a series, in context

with many other sketches.


• Why sketching?

• Quick

• Timely

• Inexpensive

• Disposable

• Plentiful



• Minimal Detail



• Ambiguity


The way a sketch is drawn

distinguishes it from other ways

of rendering. The style signifies

to it’s viewers that it’s “just a

sketch”


• Why sketching?

• Quick

• Timely

• Inexpensive

• Disposable

• Plentiful



• Minimal Detail



• Ambiguity


There is a fluidity to sketches

that gives them a sense of

openness and freedom. They

are not precise like a blueprint

or engineering drawing.


• Why sketching?

• Quick

• Timely

• Inexpensive

• Disposable

• Plentiful



• Minimal Detail



• Ambiguity


They include only what is

necessary to communicate the

concept. Extra detail is

distracting. Going beyond

“good enough” is a bad thing

with sketching.


• Why sketching?

• Quick

• Timely

• Inexpensive

• Disposable

• Plentiful



• Minimal Detail



• Ambiguity


a sketch is helpful because it

suggests only a level of

precision that corresponds to

the level of certainty in the

designer’s minds at the time.


• Why sketching?

• Quick

• Timely

• Inexpensive

• Disposable

• Plentiful



• Minimal Detail



• Ambiguity


Sketches don’t “tell” they

“suggest”. Their value lies not

in the drawing, but in its ability

to provide a catalyst to the

desired and appropriate

behavior, conversations, and

interactions.


• Why sketching?

• Quick

• Timely

• Inexpensive

• Disposable

• Plentiful



• Minimal Detail



• Ambiguity


Sketches are intentionally

ambiguous. They can be

interpreted in different ways.

Unexpected relationships

emerge from viewing them,

even for the sketcher.


user interface software projectsdjp3/classes/2012_01_inf134/lectures/...•where users instruct a...

Documents