SlideShare ist ein Scribd-Unternehmen logo
1 von 92
IM2044 – Week 3: Lecture
Dr. Andres Baravalle

1

©2011
Interaction design
• The next slides are based on the
companion slides for the textbook
• By the end of this week, you should have
studied all chapters of the textbook up to
chapter 6
• Today we will focus on chapter 6 – you will
have to work on chapters 4-5 as part of
your self study
2

©2011
Overview

3

©2011
Interfaces
• During this lecture, we are going to
describe a number of widespread
interfaces
• The interfaces are loosely categorised,
and devices may have more than one of
the interfaces described

4

©2011
1. Command-based
• Commands such as abbreviations (e.g. ls) typed
in at the prompt to which the system responds
(e.g. listing current files)
• Some are hard wired at keyboard, others can be
assigned to keys
• Efficient, precise, and fast
• Large overhead to learning set of commands

5

©2011
Research and design issues
• Consistency is most important design principle
– e.g. always use one/two letters for command switches

• Command interfaces popular for scripting

6

©2011
2. WIMP and GUI
• Xerox Star first WIMP
• Windows
– Could be scrolled, stretched, overlapped, opened, closed, and
moved around the screen using the mouse

• Icons
– Represented applications, objects, commands, and tools that
were opened when clicked on

• Menus
– Offering lists of options that could be scrolled through and
selected

• Pointing device
– A mouse controlling the cursor as a point of entry to the
windows, menus, and icons on the screen

7

©2011
GUIs
• Graphical uses interfaces have now evolved with
a number of different and new building blocks:
– Color, 3D, sound, animation,
– Many types of menus, icons, windows
– New graphical elements, e.g. toolbars, docks,
rollovers

• Sometimes they also regress – what‟s the most
peculiar characteristic that tablets and Windows
8 share?

8

©2011
Windows
• Windows were invented to overcome physical
constraints of a computer display
– Enable more information to be viewed and tasks to be
performed

• Scroll bars within windows also enable more
information to be viewed
• Multiple windows can make it difficult to find
desired one
– listing, iconising, shrinking are techniques that help

9

©2011
Research and design issues
• Window management
– Enables users to move fluidly between different
windows (and monitors)

• How can you switch attention between windows
without getting distracted?
– Design principles of spacing, grouping, and simplicity
should be used

10

©2011
Menus
• A number of menu interface styles
– Flat lists, drop-down, pop-up, contextual, and expanding ones,
e.g., scrolling and cascading

• Flat menus
– Good at displaying a small number of options at the same time
and where the size of the display is small, e.g. iPods
– But have to nest the lists of options within each other, requiring
several steps to get to the list with the desired option
– Moving through previous screens can be tedious

11

©2011
iPod flat menu structure
A sequence of options selected shown in the 4 windows

www.rainbow.gr/images/ rainbow/news/press/menu.jpg

12

©2011
Expanding menus
• Enables more options to be shown on a single
screen than is possible with a single flat menu
• More flexible navigation, allowing for selection of
options to be done in the same window
• Most popular are cascading ones
– Primary, secondary and even tertiary menus
– Downside is that they require precise mouse control
– Can result in overshooting or selecting wrong options

13

©2011
Cascading menu

14

©2011
Contextual menus
• Provide access to often-used commands
that make sense in the context of a current
task
– e.g., right clicking on a photo in a website
brings a menu with contextual commands

• Helps overcome some of the navigation
problems associated with cascading
menus
15

©2011
Windows Jump List Menu

16

©2011
Research and design issues
• What are best names/labels/phrases to
use?
• Placement in list is critical
– Quit and save need to be far apart

• Many international guidelines exist
emphasizing depth/breadth, structure and
navigation
– e.g. ISO 9241
17

©2011
Icon
• In semiotics, an icon is a sign that
physically resembles what it stands for
(Peirce)
• Examples:
– Your facebook/msn/etc picture
– The words splash or hiccup
– The buttons for cut or print in desktop
applications
– A number of common impolite gestures...
18

©2011
Symbol
• In semiotics, a symbol is a sign that
denotes an object by convention
• Examples:
– The words “dog” or “perro” (Spanish)
– The squatters logo:
– The cross as symbol for christianity

19

©2011
Icons, symbols and computer
interfaces
• In computing, icons and symbols are typically
both included in the term icon
• Icons are assumed to be easier to learn and
remember than commands
• Can be designed to be compact and variably
positioned on a screen
• Now pervasive in every interface
– e.g. represent desktop objects, tools (e.g. paintbrush),
applications (e.g. web browser), and operations (e.g.
cut, paste, next, accept, change)

20

©2011
Evolution
• Icons have changed in their look and feel:
– Xerox Star days: black and white
– Now: color, shadowing, photorealistic images, 3D
rendering, and animation

• Many designed to be very detailed and animated
making them both visually attractive and
informative

21

©2011
Research and design issues
• There is a wealth of resources now so do not
have to draw or invent new icons from scratch
– Guidelines, style guides, icon builders, libraries

• Text labels can be used alongside icons to help
identification for small icon sets
• When developing any application, you have to
make sure that the metaphors that you are using
are understandable to the users
– See the additional readings at the end of these slides

22

©2011
3. Multimedia
• Combines different media within a single
interface with various forms of interactivity
– Graphics, text, video, sound, and animations
– E.g. users click on links in an image or text
and:
• Another part of the program is loaded
• An animation or a video clip is played
• Can return to where they were or move on to
another place

23

©2011
Pros and cons
• Facilitates rapid access to multiple representations of
information
• Can provide better ways of presenting information than
can any media alone
• Can enable easier learning, better understanding, more
engagement, and more pleasure
• Can encourage users to explore different parts of a
game or story
• Tendency to play video clips and animations, while
skimming through accompanying text or diagrams

24

©2011
Research and design issues
• How to design multimedia to help users explore,
keep track of, and integrate the multiple
representations
– Provide hands-on interactivities and simulations that the user
has to complete to solve a task
– Use „dynalinking,‟ where information depicted in one window
explicitly changes in relation to what happens in another (Scaife
and Rogers, 1996).

• Several guidelines that recommend how to
combine multiple media for different kinds of
task

25

©2011
4. Virtual reality
• Computer-generated graphical simulations
providing:
– “the illusion of participation in a synthetic environment
rather than external observation of such an
environment” (Gigante, 1993)

• Provide new kinds of experience, enabling users
to interact with objects and navigate in 3D space
• Create highly engaging user experiences
– Can have a higher level of fidelity with objects they
represent compared to multimedia

26

©2011
Second Life
• Over 21 millions accounts registered in
2010, and 1 million active users in 2011

27

©2011
Research and design issues
• Much research on how to design safe and realistic VRs
to facilitate training
– e.g. flying simulators
– Help people overcome phobias (e.g. spiders, talking in public)

• Design issues
– How best to navigate through them (e.g. first versus third person)
– How to control interactions and movements (e.g. use of head
and body movements)
– How best to interact with information (e.g. use of keypads,
pointing, joystick buttons);
– Level of realism to aim for to engender a sense of presence

28

©2011
Which is the most engaging
game of Snake?

29

©2011
5. Information visualization
• Computer-generated interactive graphics of complex
data
• Amplify human cognition, enabling users to see patterns,
trends, and anomalies in the visualization (Card et al,
1999)
• Aim is to enhance discovery, decision-making, and
explanation of phenomena
• Techniques include:
– 3D interactive maps that can be zoomed in and out of and which
present data via webs, trees, clusters, scatterplot diagrams, and
interconnected nodes

30

©2011
Treemap example

31

©2011
Research and design issues
•
•
•
•
•

Whether to use animation and/or interactivity
What form of coding to use, e.g. colour or text labels
Whether to use a 2D or 3D representational format
What forms of navigation, e.g. zooming or panning,
What kinds and how much additional information to
provide, e.g. rollovers or tables of text
• What navigational metaphor to use

32

©2011
6. Web
• Early websites were largely text-based,
providing hyperlinks
• Concern was with how best to structure
information to enable users to navigate and
access it easily and quickly
• For many years, more emphasis on making
pages distinctive and pleasurable
• Now we are giving again more attention at the
structuring information
33

©2011
Research and design issues
• Need to consider how best to design, present,
and structure information and system behaviour
– But also content and navigation are central

• Veen‟s design principles
(1) Where am I?
(2) Where can I go?
(3) What‟s here?

34

©2011
7. Consumer electronics and
appliances
• Everyday devices in home, public place, or car
– e.g. washing machines, remotes, photocopiers,
printers and navigation systems)

• And personal devices
– e.g. MP3 player, digital clock and digital camera

• Used for short periods
– e.g. putting the washing on, watching a program,
buying a ticket, changing the time, taking a snapshot

• Need to be usable with minimal, if any, learning
35

©2011
Research and design issues
• Need to design as transient interfaces with
short interactions
• Simple interfaces
• Consider trade-off between soft and hard
controls
– e.g. buttons or keys, dials or scrolling

36

©2011
8. Mobile
• Handheld devices intended to be used while on
the move
• Have become pervasive, increasingly used in all
aspects of everyday and working life
• Applications running on handhelds have greatly
expanded, e.g.
–
–
–
–
–

Used in restaurants to take orders
Car rentals to check in car returns
Supermarkets for checking stock
In the streets for multi-user gaming
In education to support life-long learning
37

©2011
The advent of the iPhone app
• A whole new user experience that was
designed primarily for people to enjoy
– Many apps not designed for any need, want or use
but purely for idle moments to have some fun
– e.g. iBeer (see
http://www.youtube.com/watch?v=A3MfQIswl3k)

38

©2011
Mobile challenges
• Small screens, small number of keys and
restricted number of controls
• Many smartphones now use multi-touch surface
displays
• Innovative physical designs including:
– Roller wheels, 2-way and 4-way directional keypads,
softkeys, silk-screened buttons

• Usability and preference varies
– Depends on the dexterity and commitment of the user

39

©2011
Research and design issues
• Mobile interfaces can be tricky and
cumbersome to use for those with poor
manual dexterity or „fat‟ fingers
• Key concern is designing for small screen
and limited control space
– e.g. mobile browsers allow users to view and
navigate the internet, magazines etc., in a
more streamlined way compared with PC web
browsers

40

©2011
9. Speech
• Where a person talks with a system that has a
spoken language application, e.g., timetable,
travel planner or Apple‟s Siri
(http://www.youtube.com/watch?v=SZp3ly_QrW
M)
• Used most for inquiring about very specific
information, e.g. flight times or to perform a
transaction, e.g. buy a ticket
• Also used by people with disabilities
– e.g. speech recognition word processors, page
scanners, web readers, home control systems
41

©2011
Format
• Directed dialogs are where the system is in control of the
conversation
– Ask specific questions and require specific responses

• More flexible systems allow the user to take the initiative:
– e.g. “I‟d like to go to Paris next Monday for two weeks.”
• More chance of error, since caller might assume that the
system is like a human
• Guided prompts can help callers back on track
– e.g. “Sorry I did not get all that. Did you say you wanted to fly
next Monday?”

42

©2011
Research and design issues
• How to design systems that can keep
conversation on track?
– Help people navigate efficiently through a menu
system
– Enable them to easily recover from errors
– Guide those who are vague or ambiguous in their
requests for information or services

• Type of voice actor (e.g. male, female, neutral,
or dialect) may have an effect on the experience
– What voice type should you use in a GPS navigator?

43

©2011
10. Pen
• Enable people to write, draw, select, and move objects at
an interface using lightpens or styluses
– Capitalize on the well-honed drawing skills developed
from childhood

• Digital pens, e.g. Anoto, use a combination of
ordinary ink pen with digital camera that digitally
records everything written with the pen on
special paper
• Passive “stylus” interfaces are also common for
tablets/mobiles (see next section)
44

©2011
Pros and cons
• Allows users to quickly and easily
annotate existing documents
• Can be difficult to see options on the
screen because a user‟s hand can occlude
part of it when writing
• Can have lag, feel clunky and have low
fidelity – e.g. the pens used by mail
service providers
45

©2011
11. Touch
• Touch screens, such as walk-up kiosks, detect the
presence and location of a person‟s touch on the display
• Multi-touch support a range of more dynamic finger tip
actions, e.g. swiping, flicking, pinching, pushing and
tapping
• Now used for many kinds of displays, such as
smartphones, iPods, tablets and GPS navigation devices

46

©2011
Research and design issues
• More fluid and direct styles of interaction involving
freehand and pen-based gestures
• Core design concerns include whether size, orientation,
and shape of touch displays effect collaboration
• Much faster to scroll through wheels, carousels and bars
of thumbnail images or lists of options by finger flicking
• More cumbersome, error-prone and slower to type using
a virtual keyboard on a touch display than using a
physical keyboard

47

©2011
Research and design issues (2)
• Will finger-flicking, stroking and touching a
screen result in new ways of consuming,
reading, creating and searching digital
content?

48

©2011
12. Air-based gestures
• Uses camera recognition, sensor and computer
vision techniques
– Can recognize people‟s body, arm and hand gestures
in a room
– Systems include Kinect and EyeToy

• Movements are mapped onto a variety of
gaming motions, such as swinging, bowling,
hitting and punching
• Players represented on the screen as avatars
doing same actions
49

©2011
Home entertainment
• Universal appeal
– Young children, grandparents, professional
gamers, technophobes

50

©2011
Research and design issues
• How can we identify start and end of a
movement?
• How can we distinguish deliberate from
involuntary movements?

51

©2011
13. Haptic
• Tactile feedback
– Applying vibration and forces to a person‟s body,
using actuators that are embedded in their clothing or
a device they are carrying, such as a cell phone

• Can enrich user experience or nudge them to
correct error
• Can also be used to simulate the sense of touch
between remote people who want to
communicate

52

©2011
Realtime vibrotactile feedback
• Provides nudges when
playing incorrectly
• Uses motion capture
• Nudges are vibrations
on arms and hands

53

©2011
Research and design issues
• Where best to place actuators on body?
• Whether to use single or sequence of
„touches‟
• When to buzz and how intense?
• How does the wearer feel it in different
contexts?

54

©2011
14. Multi-modal
• Meant to provide enriched and complex
user experiences
– Multiplying how information is experienced using
different modalities, i.e. touch, sight, sound, speech
– Support more flexible, efficient, and expressive
means of human–computer interaction
– Most common is speech and vision

55

©2011
Research and design issues
• Need to recognize and analyse speech,
gesture, and eye gaze
– What is gained from combining different input
and outputs?
– Is talking and gesturing, as humans do with
other humans, a natural way of interacting
with a computer?

56

©2011
15. Shareable
• Shareable interfaces are designed for
more than one person to use
– Provide multiple inputs and sometimes allow
simultaneous input by co-located groups
– Large wall displays where people use their
own pens or gestures
– Interactive tabletops where small groups
interact with information using their fingertips

57

©2011
A smartboard

58

©2011
Advantages
• Provide a large interactional space that can
support flexible group working
• Can be used by multiple users
– Can point to and touch information being displayed
– Simultaneously view the interactions and have same
shared point of reference as others

• Can support more equitable participation
compared with groups using single PC

59

©2011
Research and design issues
• More fluid and direct styles of interaction
involving freehand and pen-based
gestures
• Core design concerns include whether
size, orientation, and shape of the display
have an effect on collaboration
– Horizontal surfaces compared with vertical
ones support more turn-taking and
collaborative working in co-located groups
60

©2011
16. Tangible
• Type of sensor-based interaction, where
physical objects, e.g., bricks, are coupled with
digital representations
• When a person manipulates the physical
object/s it causes a digital effect to occur, e.g. an
animation
• Digital effects can take place in a number of
media and places or can be embedded in the
physical object
61

©2011
Research and design issues
• Not widely used in market appliances – mostly used for
research purposes
• Develop new conceptual frameworks that identify novel
and specific features
• The kind of coupling to use between the physical action
and digital effect
– If it is to support learning then an explicit mapping between
action and effect is critical
– If it is for entertainment then can be better to design it to be more
implicit and unexpected

• What kind of physical artifact to use
– Bricks, cubes, and other component sets are most commonly
used because of flexibility and simplicity
– Stickies and cardboard tokens can also be used for placing
material onto a surface

62

©2011
17. Augmented and mixed
reality
• Augmented reality - virtual representations are
superimposed on physical devices and objects
• Mixed reality - views of the real world are
combined with views of a virtual environment
• Many applications including medicine, games,
flying, and everyday exploring

63

©2011
Examples
• In medicine
– Virtual objects, e.g. X-rays and scans, are overlaid on
part of a patient‟s body
– Aid the physician‟s understanding of what is being
examined or operated

• In air traffic control
– Dynamic information about aircraft overlaid on a video
screen showing the real planes, etc. landing, taking
off, and taxiing
– Helps identify planes difficult to make out
64

©2011
An augmented map

65

©2011
„Smart‟ augmented reality?
• Smartphone apps intended to guide
people walking in a city
– Arrows and local information (e.g. nearest
McDonalds) are overlaid on a picture of the street the
person is walking in
– Will this mean people spending most of their time
glued to their smartphone rather than looking at the
sites?

66

©2011
Research and design issues
• What kind of digital augmentation?
– When and where in physical environent?
– Needs to stand out but not distract from ongoing task
– Need to be able to align with real world objects

• What kind of device?
– Smartphone, head up display or other?

67

©2011
18.Wearables
• First developments were head- and eyewear-mounted
cameras that enabled user to record what was seen and
to access digital information
• Since, jewellery, head-mounted caps, smart fabrics,
glasses, shoes, and jackets have all been used
– Provide the user with a means of interacting with digital
information while on the move

• Applications include automatic diaries, tour guides, cycle
indicators and fashion clothing

68

©2011
Steve Mann - pioneer of
wearables

69

©2011
Research and design issues
• Comfort
– Needs to be light, small, not get in the way, fashionable, and
preferably hidden in the clothing

• Hygiene
– Is it possible to wash or clean the devices once worn?

• Ease of wear
– How easy is it to remove the electronic gadgetry and replace it?

• Usability
– How does the user control the devices that are embedded in the
clothing?

70

©2011
19. Robots
• Examples include:
– Remote robots used in hazardous settings
– Domestic robots helping around the house
– Pet robots as human companions
– Sociable robots that work collaboratively with
humans, and communicate and socialize with
them – as if they were our peers

71

©2011
Advantages
• Pet robots are assumed to have therapeutic qualities,
being able to reduce stress and loneliness
• Remote robots can be controlled to investigate bombs
and other dangerous materials

72

©2011
Research and design issues
• How do humans react to physical robots designed to
exhibit behaviors (e.g. making facial expressions)
compared with virtual ones?
• Should robots be designed to be human-like or look like
and behave like robots that serve a clearly defined
purpose?
• Should the interaction be designed to enable people to
interact with the robot as if it was another human being
or more human-computer-like (e.g. pressing buttons to
issue commands)?

73

©2011
20. Brain-computer
• Brain–computer interfaces (BCI) provide a
communication pathway between a person‟s
brain waves and an external device, such as a
cursor on a screen
• Person is trained to concentrate on the task, e.g.
moving the cursor
• BCIs work through detecting changes in the
neural functioning in the brain

74

©2011
Summary
• Many innovative interfaces have emerged post
the WIMP/GUI era, including speech, wearable,
mobile, brain and tangible
• Many design and research questions need to be
considered to decide which to use
• An important concern that underlies the design
of any kind of interface is how information is
represented to the user so they can carry out
ongoing activity or task

75

©2011
Emotional Interaction

76

©2011
Emotions and the user
experience
• HCI has traditionally been about designing efficient and
effective systems
• Now more about how to design interactive systems that
make people respond in certain ways
– e.g. to be happy, to be trusting, to learn, to be motivated

• Emotional interaction is concerned with how we feel and
react when interacting with technologies

77

©2011
Emotional interaction
• What makes us happy, sad, annoyed, anxious,
frustrated, motivated, delirious and so on
– translating this into different aspects of the user experience

• Why people become emotionally attached to certain
products (e.g. virtual pets)
• Can social robots help reduce loneliness and improve
wellbeing?
• How to change human behavior through the use of
emotive feedback

78

©2011
Expressive interfaces
• Provide reassuring feedback that can be both
informative and fun
• But can also be intrusive, causing people to get annoyed
and even angry
• Color, icons, sounds, graphical elements and animations
are used to make the „look and feel‟ of an interface
appealing
– conveys an emotional state

• In turn this can affect the usability of an interface
– people are prepared to put up with certain aspects of an interface (e.g.
slow download rate) if the end result is appealing and aesthetic

79

©2011
Friendly interfaces
• Microsoft pioneered friendly interfaces for
technophobes - „At home with Bob‟ software
• 3D metaphors based on familiar places (e.g.
living rooms)
• Agents in the guise of pets (e.g. bunny, dog)
were included to talk to the user
– Make users feel more at ease and comfortable

80

©2011
Frustrating interfaces
• Many causes:
–
–
–
–

When an application doesn‟t work properly or crashes
When a system doesn‟t do what the user wants it to do
When a user‟s expectations are not met
When a system does not provide sufficient information to
enable the user to know what to do
– When error messages pop up that are vague, obtuse or
condemning
– When the appearance of an interface is garish, noisy,
gimmicky or patronizing
– When a system requires users to carry out too many steps to
perform a task, only to discover a mistake was made earlier
and they need to start all over again

81

©2011
Gimmicks
• Amusing to the designer but not the user,
e.g.
– Clicking on a link to a website only to discover
that it is still „under construction‟

82

©2011
Error messages
• “The application Word Wonder has
unexpectedly quit due to a type 2 error.”
• Shneiderman‟s guidelines for error
messages include:
•
•
•
•
•

Avoid using terms like FATAL, INVALID, BAD
Audio warnings
Avoid UPPERCASE and long code numbers
Messages should be precise rather than vague
Provide context-sensitive help
83

©2011
Anthropomorphism
• Attributing human-like qualities to
inanimate objects (e.g. cars, computers)
• Well known phenomenon in advertising
– Dancing butter, drinks, breakfast cereals

• Much exploited in human-computer
interaction
– Make user experience more enjoyable, more
motivating, make people feel at ease, reduce
anxiety
84

©2011
Which do you prefer?
• 1. As a welcome message:
– “Hello Chris! Nice to see you again. Welcome
back. Now what were we doing last time? Oh
yes, exercise 5. Let‟s start again.”
– “User 24, commence exercise 5.”

85

©2011
Which do you prefer?
• 2. Feedback when get something
wrong:
– “Now Chris, that‟s not right. You can do
better than that.Try again.”
– “Incorrect. Try again.”

• Is there a difference as to what you
prefer depending on type of
message? Why?
86

©2011
Evidence to support
anthropomorphism
• Reeves and Naas (1996) found that
computers that flatter and praise users in
education software programs -> positive
impact on them
– “Your question makes an important and useful
distinction. Great job!”

• Students were more willing to continue
with exercises with this kind of feedback
87

©2011
Criticism of anthropomorphism
• Deceptive, make people feel anxious, inferior or stupid
• People tend not to like screen characters that wave their
fingers at the user and say:
– Now Chris, that‟s not right. You can do better than that.Try
again.”

• Many prefer the more impersonal:
– “Incorrect. Try again.”

• Studies have shown that personalized feedback is
considered to be less honest and makes users feel less
responsible for their actions (e.g. Quintanar, 1982)

88

©2011
Virtual characters
• Appearing on our screens in the form of:
– Sales agents, characters in videogames, learning
companions, wizards, pets, newsreaders

• Provides a persona that is welcoming, has
personality and makes user feel involved with
them

89

©2011
Virtual agents
•
•
•
•
•
•
•

What do the virtual agents do?
Do they elicit an emotional response in you?
Do you trust them?
What is the style of interaction?
What facial expression do they have?
Are they believable, pushy, helpful?
Would it be different if they were male? If so,
how?

90

©2011
What makes a virtual agent
believable?
• Believability refers to the extent to which users come to
believe an agent‟s intentions and personality
• Appearance is very important
– Are simple cartoon-like characters or more realistic characters,
resembling the human form more believable?

• Behavior is very important
– How an agent moves, gestures and refers to objects on the
screen
– Exaggeration of facial expressions and gestures to show
underlying emotions (c.f. animation industry)

91

©2011
Suggested readings
• Apart from your core text book, suggested
readings for this week include:
– Kourtunov, D. (2008) 10 Mistakes in Icon Design
[online]. Available from
http://turbomilk.com/blog/cookbook/icon_design/10_m
istakes_in_icon_design/ (Accessed: 18/02/2013)
– Hobbs, T. (2012) Can We Please Move Past Apple‟s
Silly, Faux-Real UIs? [online]. Available from
http://www.fastcodesign.com/1669879/can-weplease-move-past-apples-silly-faux-real-uis
(Accessed: 18/02/2013)
92

©2011

Weitere ähnliche Inhalte

Was ist angesagt?

USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPT
vicci4041
 
Human Computer Interaction Unit III Part 2
Human Computer Interaction Unit III Part 2Human Computer Interaction Unit III Part 2
Human Computer Interaction Unit III Part 2
ashodhiyavipin
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15
koolkampus
 

Was ist angesagt? (20)

Hypertext, multimedia and www
Hypertext, multimedia and wwwHypertext, multimedia and www
Hypertext, multimedia and www
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPT
 
Mobile 2.0
Mobile 2.0Mobile 2.0
Mobile 2.0
 
Usability Testing 101 - an introduction
Usability Testing 101 - an introductionUsability Testing 101 - an introduction
Usability Testing 101 - an introduction
 
User Interface Design - Module 1 Introduction
User Interface Design - Module 1 IntroductionUser Interface Design - Module 1 Introduction
User Interface Design - Module 1 Introduction
 
The interaction HCI
The interaction HCIThe interaction HCI
The interaction HCI
 
Engineering Software Products: 8. Reliable programming
Engineering Software Products: 8. Reliable programmingEngineering Software Products: 8. Reliable programming
Engineering Software Products: 8. Reliable programming
 
User Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid ProcessUser Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid Process
 
Achieving quality contraints
Achieving quality contraintsAchieving quality contraints
Achieving quality contraints
 
Unit2 hci
Unit2 hciUnit2 hci
Unit2 hci
 
Chapter 2
Chapter 2Chapter 2
Chapter 2
 
Direct manipulation - ppt
Direct manipulation - pptDirect manipulation - ppt
Direct manipulation - ppt
 
Human Computer Interaction Evaluation
Human Computer Interaction EvaluationHuman Computer Interaction Evaluation
Human Computer Interaction Evaluation
 
HCI 3e - Ch 4: Paradigms
HCI 3e - Ch 4:  ParadigmsHCI 3e - Ch 4:  Paradigms
HCI 3e - Ch 4: Paradigms
 
Human Computer Interaction Unit III Part 2
Human Computer Interaction Unit III Part 2Human Computer Interaction Unit III Part 2
Human Computer Interaction Unit III Part 2
 
E3 chap-08
E3 chap-08E3 chap-08
E3 chap-08
 
Human computer interaction -Input output channel
Human computer interaction -Input output channelHuman computer interaction -Input output channel
Human computer interaction -Input output channel
 
Chapter five HCI
Chapter five HCIChapter five HCI
Chapter five HCI
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15
 
WEB INTERFACE DESIGN
WEB INTERFACE DESIGNWEB INTERFACE DESIGN
WEB INTERFACE DESIGN
 

Andere mochten auch

Andere mochten auch (20)

Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Designing and prototyping
Designing and prototypingDesigning and prototyping
Designing and prototyping
 
Other metrics
Other metricsOther metrics
Other metrics
 
Social, professional, ethical and legal issues
Social, professional, ethical and legal issuesSocial, professional, ethical and legal issues
Social, professional, ethical and legal issues
 
Accessibility introduction
Accessibility introductionAccessibility introduction
Accessibility introduction
 
Background on Usability Engineering
Background on Usability EngineeringBackground on Usability Engineering
Background on Usability Engineering
 
Issue-based metrics
Issue-based metricsIssue-based metrics
Issue-based metrics
 
Usability evaluations (part 2)
Usability evaluations (part 2) Usability evaluations (part 2)
Usability evaluations (part 2)
 
Accessibility: introduction
Accessibility: introduction  Accessibility: introduction
Accessibility: introduction
 
Usability evaluations (part 3)
Usability evaluations (part 3) Usability evaluations (part 3)
Usability evaluations (part 3)
 
Measuring the user experience
Measuring the user experienceMeasuring the user experience
Measuring the user experience
 
Usability evaluation methods (part 2) and performance metrics
Usability evaluation methods (part 2) and performance metricsUsability evaluation methods (part 2) and performance metrics
Usability evaluation methods (part 2) and performance metrics
 
SPEL (Social, professional, ethical and legal) issues in Usability
SPEL (Social, professional, ethical and legal) issues in UsabilitySPEL (Social, professional, ethical and legal) issues in Usability
SPEL (Social, professional, ethical and legal) issues in Usability
 
Design rules and usability requirements
Design rules and usability requirementsDesign rules and usability requirements
Design rules and usability requirements
 
Planning and usability evaluation methods
Planning and usability evaluation methodsPlanning and usability evaluation methods
Planning and usability evaluation methods
 
Don't make me think
Don't make me thinkDon't make me think
Don't make me think
 
Deneyimsel Pazarlama
Deneyimsel PazarlamaDeneyimsel Pazarlama
Deneyimsel Pazarlama
 
Dark web markets: from the silk road to alphabay, trends and developments
Dark web markets: from the silk road to alphabay, trends and developmentsDark web markets: from the silk road to alphabay, trends and developments
Dark web markets: from the silk road to alphabay, trends and developments
 
Layout rules
Layout rulesLayout rules
Layout rules
 
Interaction design and cognitive aspects
Interaction design and cognitive aspects Interaction design and cognitive aspects
Interaction design and cognitive aspects
 

Ähnlich wie Interfaces

Lecturesvddddddddddddddddddddddddddddddddddd 16.pptx
Lecturesvddddddddddddddddddddddddddddddddddd 16.pptxLecturesvddddddddddddddddddddddddddddddddddd 16.pptx
Lecturesvddddddddddddddddddddddddddddddddddd 16.pptx
aliyafatimauwu
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User Exerience
Tanya Zavialova
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
jayyearley
 

Ähnlich wie Interfaces (20)

CIS375 Interaction Designs Chapter6
CIS375 Interaction Designs Chapter6CIS375 Interaction Designs Chapter6
CIS375 Interaction Designs Chapter6
 
Chapter 7- ID - Interfaces.pptx
Chapter 7- ID - Interfaces.pptxChapter 7- ID - Interfaces.pptx
Chapter 7- ID - Interfaces.pptx
 
ch10-Designing and producing multimedia .pdf
ch10-Designing and producing multimedia .pdfch10-Designing and producing multimedia .pdf
ch10-Designing and producing multimedia .pdf
 
Chapter 10 designing and producing Multimedia
Chapter 10 designing and producing MultimediaChapter 10 designing and producing Multimedia
Chapter 10 designing and producing Multimedia
 
CIS375 Interaction Designs Chapter2
CIS375 Interaction Designs Chapter2CIS375 Interaction Designs Chapter2
CIS375 Interaction Designs Chapter2
 
Lecturesvddddddddddddddddddddddddddddddddddd 16.pptx
Lecturesvddddddddddddddddddddddddddddddddddd 16.pptxLecturesvddddddddddddddddddddddddddddddddddd 16.pptx
Lecturesvddddddddddddddddddddddddddddddddddd 16.pptx
 
Designing for Everybody Workshop
Designing for Everybody WorkshopDesigning for Everybody Workshop
Designing for Everybody Workshop
 
Chapter1(hci)
Chapter1(hci)Chapter1(hci)
Chapter1(hci)
 
Lecture 1 _ Introduction to ID and HCI.pptx
Lecture 1 _ Introduction to ID and HCI.pptxLecture 1 _ Introduction to ID and HCI.pptx
Lecture 1 _ Introduction to ID and HCI.pptx
 
What is DITA? And Is It Right for Your Team or Project?
What is DITA? And Is It Right for Your Team or Project?What is DITA? And Is It Right for Your Team or Project?
What is DITA? And Is It Right for Your Team or Project?
 
Lesson 2 HCI 2.pdf
Lesson 2 HCI 2.pdfLesson 2 HCI 2.pdf
Lesson 2 HCI 2.pdf
 
Lesson 2 HCI 2.pptx
Lesson 2 HCI 2.pptxLesson 2 HCI 2.pptx
Lesson 2 HCI 2.pptx
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User Exerience
 
Interaction design: desiging user interfaces for digital products
Interaction design: desiging user interfaces for digital productsInteraction design: desiging user interfaces for digital products
Interaction design: desiging user interfaces for digital products
 
uiux.pptx
uiux.pptxuiux.pptx
uiux.pptx
 
SDA-lecture-F5.pptx
SDA-lecture-F5.pptxSDA-lecture-F5.pptx
SDA-lecture-F5.pptx
 
prototyping-chap-03.ppt
prototyping-chap-03.pptprototyping-chap-03.ppt
prototyping-chap-03.ppt
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 
6 mobile user interface design bb
6   mobile user interface design bb6   mobile user interface design bb
6 mobile user interface design bb
 
Adv. HCI Lecture1 - Introduction
Adv. HCI Lecture1 - IntroductionAdv. HCI Lecture1 - Introduction
Adv. HCI Lecture1 - Introduction
 

Mehr von Andres Baravalle (7)

Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Don’t make me think
Don’t make me thinkDon’t make me think
Don’t make me think
 
Data collection and analysis
Data collection and analysisData collection and analysis
Data collection and analysis
 
Designing and prototyping
Designing and prototypingDesigning and prototyping
Designing and prototyping
 
Usability requirements
Usability requirements Usability requirements
Usability requirements
 
Usability: introduction (Week 1)
Usability: introduction (Week 1)Usability: introduction (Week 1)
Usability: introduction (Week 1)
 
Don’t make me think!
Don’t make me think!Don’t make me think!
Don’t make me think!
 

Kürzlich hochgeladen

Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
negromaestrong
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
PECB
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
kauryashika82
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
heathfieldcps1
 

Kürzlich hochgeladen (20)

microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docx
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 

Interfaces

  • 1. IM2044 – Week 3: Lecture Dr. Andres Baravalle 1 ©2011
  • 2. Interaction design • The next slides are based on the companion slides for the textbook • By the end of this week, you should have studied all chapters of the textbook up to chapter 6 • Today we will focus on chapter 6 – you will have to work on chapters 4-5 as part of your self study 2 ©2011
  • 4. Interfaces • During this lecture, we are going to describe a number of widespread interfaces • The interfaces are loosely categorised, and devices may have more than one of the interfaces described 4 ©2011
  • 5. 1. Command-based • Commands such as abbreviations (e.g. ls) typed in at the prompt to which the system responds (e.g. listing current files) • Some are hard wired at keyboard, others can be assigned to keys • Efficient, precise, and fast • Large overhead to learning set of commands 5 ©2011
  • 6. Research and design issues • Consistency is most important design principle – e.g. always use one/two letters for command switches • Command interfaces popular for scripting 6 ©2011
  • 7. 2. WIMP and GUI • Xerox Star first WIMP • Windows – Could be scrolled, stretched, overlapped, opened, closed, and moved around the screen using the mouse • Icons – Represented applications, objects, commands, and tools that were opened when clicked on • Menus – Offering lists of options that could be scrolled through and selected • Pointing device – A mouse controlling the cursor as a point of entry to the windows, menus, and icons on the screen 7 ©2011
  • 8. GUIs • Graphical uses interfaces have now evolved with a number of different and new building blocks: – Color, 3D, sound, animation, – Many types of menus, icons, windows – New graphical elements, e.g. toolbars, docks, rollovers • Sometimes they also regress – what‟s the most peculiar characteristic that tablets and Windows 8 share? 8 ©2011
  • 9. Windows • Windows were invented to overcome physical constraints of a computer display – Enable more information to be viewed and tasks to be performed • Scroll bars within windows also enable more information to be viewed • Multiple windows can make it difficult to find desired one – listing, iconising, shrinking are techniques that help 9 ©2011
  • 10. Research and design issues • Window management – Enables users to move fluidly between different windows (and monitors) • How can you switch attention between windows without getting distracted? – Design principles of spacing, grouping, and simplicity should be used 10 ©2011
  • 11. Menus • A number of menu interface styles – Flat lists, drop-down, pop-up, contextual, and expanding ones, e.g., scrolling and cascading • Flat menus – Good at displaying a small number of options at the same time and where the size of the display is small, e.g. iPods – But have to nest the lists of options within each other, requiring several steps to get to the list with the desired option – Moving through previous screens can be tedious 11 ©2011
  • 12. iPod flat menu structure A sequence of options selected shown in the 4 windows www.rainbow.gr/images/ rainbow/news/press/menu.jpg 12 ©2011
  • 13. Expanding menus • Enables more options to be shown on a single screen than is possible with a single flat menu • More flexible navigation, allowing for selection of options to be done in the same window • Most popular are cascading ones – Primary, secondary and even tertiary menus – Downside is that they require precise mouse control – Can result in overshooting or selecting wrong options 13 ©2011
  • 15. Contextual menus • Provide access to often-used commands that make sense in the context of a current task – e.g., right clicking on a photo in a website brings a menu with contextual commands • Helps overcome some of the navigation problems associated with cascading menus 15 ©2011
  • 16. Windows Jump List Menu 16 ©2011
  • 17. Research and design issues • What are best names/labels/phrases to use? • Placement in list is critical – Quit and save need to be far apart • Many international guidelines exist emphasizing depth/breadth, structure and navigation – e.g. ISO 9241 17 ©2011
  • 18. Icon • In semiotics, an icon is a sign that physically resembles what it stands for (Peirce) • Examples: – Your facebook/msn/etc picture – The words splash or hiccup – The buttons for cut or print in desktop applications – A number of common impolite gestures... 18 ©2011
  • 19. Symbol • In semiotics, a symbol is a sign that denotes an object by convention • Examples: – The words “dog” or “perro” (Spanish) – The squatters logo: – The cross as symbol for christianity 19 ©2011
  • 20. Icons, symbols and computer interfaces • In computing, icons and symbols are typically both included in the term icon • Icons are assumed to be easier to learn and remember than commands • Can be designed to be compact and variably positioned on a screen • Now pervasive in every interface – e.g. represent desktop objects, tools (e.g. paintbrush), applications (e.g. web browser), and operations (e.g. cut, paste, next, accept, change) 20 ©2011
  • 21. Evolution • Icons have changed in their look and feel: – Xerox Star days: black and white – Now: color, shadowing, photorealistic images, 3D rendering, and animation • Many designed to be very detailed and animated making them both visually attractive and informative 21 ©2011
  • 22. Research and design issues • There is a wealth of resources now so do not have to draw or invent new icons from scratch – Guidelines, style guides, icon builders, libraries • Text labels can be used alongside icons to help identification for small icon sets • When developing any application, you have to make sure that the metaphors that you are using are understandable to the users – See the additional readings at the end of these slides 22 ©2011
  • 23. 3. Multimedia • Combines different media within a single interface with various forms of interactivity – Graphics, text, video, sound, and animations – E.g. users click on links in an image or text and: • Another part of the program is loaded • An animation or a video clip is played • Can return to where they were or move on to another place 23 ©2011
  • 24. Pros and cons • Facilitates rapid access to multiple representations of information • Can provide better ways of presenting information than can any media alone • Can enable easier learning, better understanding, more engagement, and more pleasure • Can encourage users to explore different parts of a game or story • Tendency to play video clips and animations, while skimming through accompanying text or diagrams 24 ©2011
  • 25. Research and design issues • How to design multimedia to help users explore, keep track of, and integrate the multiple representations – Provide hands-on interactivities and simulations that the user has to complete to solve a task – Use „dynalinking,‟ where information depicted in one window explicitly changes in relation to what happens in another (Scaife and Rogers, 1996). • Several guidelines that recommend how to combine multiple media for different kinds of task 25 ©2011
  • 26. 4. Virtual reality • Computer-generated graphical simulations providing: – “the illusion of participation in a synthetic environment rather than external observation of such an environment” (Gigante, 1993) • Provide new kinds of experience, enabling users to interact with objects and navigate in 3D space • Create highly engaging user experiences – Can have a higher level of fidelity with objects they represent compared to multimedia 26 ©2011
  • 27. Second Life • Over 21 millions accounts registered in 2010, and 1 million active users in 2011 27 ©2011
  • 28. Research and design issues • Much research on how to design safe and realistic VRs to facilitate training – e.g. flying simulators – Help people overcome phobias (e.g. spiders, talking in public) • Design issues – How best to navigate through them (e.g. first versus third person) – How to control interactions and movements (e.g. use of head and body movements) – How best to interact with information (e.g. use of keypads, pointing, joystick buttons); – Level of realism to aim for to engender a sense of presence 28 ©2011
  • 29. Which is the most engaging game of Snake? 29 ©2011
  • 30. 5. Information visualization • Computer-generated interactive graphics of complex data • Amplify human cognition, enabling users to see patterns, trends, and anomalies in the visualization (Card et al, 1999) • Aim is to enhance discovery, decision-making, and explanation of phenomena • Techniques include: – 3D interactive maps that can be zoomed in and out of and which present data via webs, trees, clusters, scatterplot diagrams, and interconnected nodes 30 ©2011
  • 32. Research and design issues • • • • • Whether to use animation and/or interactivity What form of coding to use, e.g. colour or text labels Whether to use a 2D or 3D representational format What forms of navigation, e.g. zooming or panning, What kinds and how much additional information to provide, e.g. rollovers or tables of text • What navigational metaphor to use 32 ©2011
  • 33. 6. Web • Early websites were largely text-based, providing hyperlinks • Concern was with how best to structure information to enable users to navigate and access it easily and quickly • For many years, more emphasis on making pages distinctive and pleasurable • Now we are giving again more attention at the structuring information 33 ©2011
  • 34. Research and design issues • Need to consider how best to design, present, and structure information and system behaviour – But also content and navigation are central • Veen‟s design principles (1) Where am I? (2) Where can I go? (3) What‟s here? 34 ©2011
  • 35. 7. Consumer electronics and appliances • Everyday devices in home, public place, or car – e.g. washing machines, remotes, photocopiers, printers and navigation systems) • And personal devices – e.g. MP3 player, digital clock and digital camera • Used for short periods – e.g. putting the washing on, watching a program, buying a ticket, changing the time, taking a snapshot • Need to be usable with minimal, if any, learning 35 ©2011
  • 36. Research and design issues • Need to design as transient interfaces with short interactions • Simple interfaces • Consider trade-off between soft and hard controls – e.g. buttons or keys, dials or scrolling 36 ©2011
  • 37. 8. Mobile • Handheld devices intended to be used while on the move • Have become pervasive, increasingly used in all aspects of everyday and working life • Applications running on handhelds have greatly expanded, e.g. – – – – – Used in restaurants to take orders Car rentals to check in car returns Supermarkets for checking stock In the streets for multi-user gaming In education to support life-long learning 37 ©2011
  • 38. The advent of the iPhone app • A whole new user experience that was designed primarily for people to enjoy – Many apps not designed for any need, want or use but purely for idle moments to have some fun – e.g. iBeer (see http://www.youtube.com/watch?v=A3MfQIswl3k) 38 ©2011
  • 39. Mobile challenges • Small screens, small number of keys and restricted number of controls • Many smartphones now use multi-touch surface displays • Innovative physical designs including: – Roller wheels, 2-way and 4-way directional keypads, softkeys, silk-screened buttons • Usability and preference varies – Depends on the dexterity and commitment of the user 39 ©2011
  • 40. Research and design issues • Mobile interfaces can be tricky and cumbersome to use for those with poor manual dexterity or „fat‟ fingers • Key concern is designing for small screen and limited control space – e.g. mobile browsers allow users to view and navigate the internet, magazines etc., in a more streamlined way compared with PC web browsers 40 ©2011
  • 41. 9. Speech • Where a person talks with a system that has a spoken language application, e.g., timetable, travel planner or Apple‟s Siri (http://www.youtube.com/watch?v=SZp3ly_QrW M) • Used most for inquiring about very specific information, e.g. flight times or to perform a transaction, e.g. buy a ticket • Also used by people with disabilities – e.g. speech recognition word processors, page scanners, web readers, home control systems 41 ©2011
  • 42. Format • Directed dialogs are where the system is in control of the conversation – Ask specific questions and require specific responses • More flexible systems allow the user to take the initiative: – e.g. “I‟d like to go to Paris next Monday for two weeks.” • More chance of error, since caller might assume that the system is like a human • Guided prompts can help callers back on track – e.g. “Sorry I did not get all that. Did you say you wanted to fly next Monday?” 42 ©2011
  • 43. Research and design issues • How to design systems that can keep conversation on track? – Help people navigate efficiently through a menu system – Enable them to easily recover from errors – Guide those who are vague or ambiguous in their requests for information or services • Type of voice actor (e.g. male, female, neutral, or dialect) may have an effect on the experience – What voice type should you use in a GPS navigator? 43 ©2011
  • 44. 10. Pen • Enable people to write, draw, select, and move objects at an interface using lightpens or styluses – Capitalize on the well-honed drawing skills developed from childhood • Digital pens, e.g. Anoto, use a combination of ordinary ink pen with digital camera that digitally records everything written with the pen on special paper • Passive “stylus” interfaces are also common for tablets/mobiles (see next section) 44 ©2011
  • 45. Pros and cons • Allows users to quickly and easily annotate existing documents • Can be difficult to see options on the screen because a user‟s hand can occlude part of it when writing • Can have lag, feel clunky and have low fidelity – e.g. the pens used by mail service providers 45 ©2011
  • 46. 11. Touch • Touch screens, such as walk-up kiosks, detect the presence and location of a person‟s touch on the display • Multi-touch support a range of more dynamic finger tip actions, e.g. swiping, flicking, pinching, pushing and tapping • Now used for many kinds of displays, such as smartphones, iPods, tablets and GPS navigation devices 46 ©2011
  • 47. Research and design issues • More fluid and direct styles of interaction involving freehand and pen-based gestures • Core design concerns include whether size, orientation, and shape of touch displays effect collaboration • Much faster to scroll through wheels, carousels and bars of thumbnail images or lists of options by finger flicking • More cumbersome, error-prone and slower to type using a virtual keyboard on a touch display than using a physical keyboard 47 ©2011
  • 48. Research and design issues (2) • Will finger-flicking, stroking and touching a screen result in new ways of consuming, reading, creating and searching digital content? 48 ©2011
  • 49. 12. Air-based gestures • Uses camera recognition, sensor and computer vision techniques – Can recognize people‟s body, arm and hand gestures in a room – Systems include Kinect and EyeToy • Movements are mapped onto a variety of gaming motions, such as swinging, bowling, hitting and punching • Players represented on the screen as avatars doing same actions 49 ©2011
  • 50. Home entertainment • Universal appeal – Young children, grandparents, professional gamers, technophobes 50 ©2011
  • 51. Research and design issues • How can we identify start and end of a movement? • How can we distinguish deliberate from involuntary movements? 51 ©2011
  • 52. 13. Haptic • Tactile feedback – Applying vibration and forces to a person‟s body, using actuators that are embedded in their clothing or a device they are carrying, such as a cell phone • Can enrich user experience or nudge them to correct error • Can also be used to simulate the sense of touch between remote people who want to communicate 52 ©2011
  • 53. Realtime vibrotactile feedback • Provides nudges when playing incorrectly • Uses motion capture • Nudges are vibrations on arms and hands 53 ©2011
  • 54. Research and design issues • Where best to place actuators on body? • Whether to use single or sequence of „touches‟ • When to buzz and how intense? • How does the wearer feel it in different contexts? 54 ©2011
  • 55. 14. Multi-modal • Meant to provide enriched and complex user experiences – Multiplying how information is experienced using different modalities, i.e. touch, sight, sound, speech – Support more flexible, efficient, and expressive means of human–computer interaction – Most common is speech and vision 55 ©2011
  • 56. Research and design issues • Need to recognize and analyse speech, gesture, and eye gaze – What is gained from combining different input and outputs? – Is talking and gesturing, as humans do with other humans, a natural way of interacting with a computer? 56 ©2011
  • 57. 15. Shareable • Shareable interfaces are designed for more than one person to use – Provide multiple inputs and sometimes allow simultaneous input by co-located groups – Large wall displays where people use their own pens or gestures – Interactive tabletops where small groups interact with information using their fingertips 57 ©2011
  • 59. Advantages • Provide a large interactional space that can support flexible group working • Can be used by multiple users – Can point to and touch information being displayed – Simultaneously view the interactions and have same shared point of reference as others • Can support more equitable participation compared with groups using single PC 59 ©2011
  • 60. Research and design issues • More fluid and direct styles of interaction involving freehand and pen-based gestures • Core design concerns include whether size, orientation, and shape of the display have an effect on collaboration – Horizontal surfaces compared with vertical ones support more turn-taking and collaborative working in co-located groups 60 ©2011
  • 61. 16. Tangible • Type of sensor-based interaction, where physical objects, e.g., bricks, are coupled with digital representations • When a person manipulates the physical object/s it causes a digital effect to occur, e.g. an animation • Digital effects can take place in a number of media and places or can be embedded in the physical object 61 ©2011
  • 62. Research and design issues • Not widely used in market appliances – mostly used for research purposes • Develop new conceptual frameworks that identify novel and specific features • The kind of coupling to use between the physical action and digital effect – If it is to support learning then an explicit mapping between action and effect is critical – If it is for entertainment then can be better to design it to be more implicit and unexpected • What kind of physical artifact to use – Bricks, cubes, and other component sets are most commonly used because of flexibility and simplicity – Stickies and cardboard tokens can also be used for placing material onto a surface 62 ©2011
  • 63. 17. Augmented and mixed reality • Augmented reality - virtual representations are superimposed on physical devices and objects • Mixed reality - views of the real world are combined with views of a virtual environment • Many applications including medicine, games, flying, and everyday exploring 63 ©2011
  • 64. Examples • In medicine – Virtual objects, e.g. X-rays and scans, are overlaid on part of a patient‟s body – Aid the physician‟s understanding of what is being examined or operated • In air traffic control – Dynamic information about aircraft overlaid on a video screen showing the real planes, etc. landing, taking off, and taxiing – Helps identify planes difficult to make out 64 ©2011
  • 66. „Smart‟ augmented reality? • Smartphone apps intended to guide people walking in a city – Arrows and local information (e.g. nearest McDonalds) are overlaid on a picture of the street the person is walking in – Will this mean people spending most of their time glued to their smartphone rather than looking at the sites? 66 ©2011
  • 67. Research and design issues • What kind of digital augmentation? – When and where in physical environent? – Needs to stand out but not distract from ongoing task – Need to be able to align with real world objects • What kind of device? – Smartphone, head up display or other? 67 ©2011
  • 68. 18.Wearables • First developments were head- and eyewear-mounted cameras that enabled user to record what was seen and to access digital information • Since, jewellery, head-mounted caps, smart fabrics, glasses, shoes, and jackets have all been used – Provide the user with a means of interacting with digital information while on the move • Applications include automatic diaries, tour guides, cycle indicators and fashion clothing 68 ©2011
  • 69. Steve Mann - pioneer of wearables 69 ©2011
  • 70. Research and design issues • Comfort – Needs to be light, small, not get in the way, fashionable, and preferably hidden in the clothing • Hygiene – Is it possible to wash or clean the devices once worn? • Ease of wear – How easy is it to remove the electronic gadgetry and replace it? • Usability – How does the user control the devices that are embedded in the clothing? 70 ©2011
  • 71. 19. Robots • Examples include: – Remote robots used in hazardous settings – Domestic robots helping around the house – Pet robots as human companions – Sociable robots that work collaboratively with humans, and communicate and socialize with them – as if they were our peers 71 ©2011
  • 72. Advantages • Pet robots are assumed to have therapeutic qualities, being able to reduce stress and loneliness • Remote robots can be controlled to investigate bombs and other dangerous materials 72 ©2011
  • 73. Research and design issues • How do humans react to physical robots designed to exhibit behaviors (e.g. making facial expressions) compared with virtual ones? • Should robots be designed to be human-like or look like and behave like robots that serve a clearly defined purpose? • Should the interaction be designed to enable people to interact with the robot as if it was another human being or more human-computer-like (e.g. pressing buttons to issue commands)? 73 ©2011
  • 74. 20. Brain-computer • Brain–computer interfaces (BCI) provide a communication pathway between a person‟s brain waves and an external device, such as a cursor on a screen • Person is trained to concentrate on the task, e.g. moving the cursor • BCIs work through detecting changes in the neural functioning in the brain 74 ©2011
  • 75. Summary • Many innovative interfaces have emerged post the WIMP/GUI era, including speech, wearable, mobile, brain and tangible • Many design and research questions need to be considered to decide which to use • An important concern that underlies the design of any kind of interface is how information is represented to the user so they can carry out ongoing activity or task 75 ©2011
  • 77. Emotions and the user experience • HCI has traditionally been about designing efficient and effective systems • Now more about how to design interactive systems that make people respond in certain ways – e.g. to be happy, to be trusting, to learn, to be motivated • Emotional interaction is concerned with how we feel and react when interacting with technologies 77 ©2011
  • 78. Emotional interaction • What makes us happy, sad, annoyed, anxious, frustrated, motivated, delirious and so on – translating this into different aspects of the user experience • Why people become emotionally attached to certain products (e.g. virtual pets) • Can social robots help reduce loneliness and improve wellbeing? • How to change human behavior through the use of emotive feedback 78 ©2011
  • 79. Expressive interfaces • Provide reassuring feedback that can be both informative and fun • But can also be intrusive, causing people to get annoyed and even angry • Color, icons, sounds, graphical elements and animations are used to make the „look and feel‟ of an interface appealing – conveys an emotional state • In turn this can affect the usability of an interface – people are prepared to put up with certain aspects of an interface (e.g. slow download rate) if the end result is appealing and aesthetic 79 ©2011
  • 80. Friendly interfaces • Microsoft pioneered friendly interfaces for technophobes - „At home with Bob‟ software • 3D metaphors based on familiar places (e.g. living rooms) • Agents in the guise of pets (e.g. bunny, dog) were included to talk to the user – Make users feel more at ease and comfortable 80 ©2011
  • 81. Frustrating interfaces • Many causes: – – – – When an application doesn‟t work properly or crashes When a system doesn‟t do what the user wants it to do When a user‟s expectations are not met When a system does not provide sufficient information to enable the user to know what to do – When error messages pop up that are vague, obtuse or condemning – When the appearance of an interface is garish, noisy, gimmicky or patronizing – When a system requires users to carry out too many steps to perform a task, only to discover a mistake was made earlier and they need to start all over again 81 ©2011
  • 82. Gimmicks • Amusing to the designer but not the user, e.g. – Clicking on a link to a website only to discover that it is still „under construction‟ 82 ©2011
  • 83. Error messages • “The application Word Wonder has unexpectedly quit due to a type 2 error.” • Shneiderman‟s guidelines for error messages include: • • • • • Avoid using terms like FATAL, INVALID, BAD Audio warnings Avoid UPPERCASE and long code numbers Messages should be precise rather than vague Provide context-sensitive help 83 ©2011
  • 84. Anthropomorphism • Attributing human-like qualities to inanimate objects (e.g. cars, computers) • Well known phenomenon in advertising – Dancing butter, drinks, breakfast cereals • Much exploited in human-computer interaction – Make user experience more enjoyable, more motivating, make people feel at ease, reduce anxiety 84 ©2011
  • 85. Which do you prefer? • 1. As a welcome message: – “Hello Chris! Nice to see you again. Welcome back. Now what were we doing last time? Oh yes, exercise 5. Let‟s start again.” – “User 24, commence exercise 5.” 85 ©2011
  • 86. Which do you prefer? • 2. Feedback when get something wrong: – “Now Chris, that‟s not right. You can do better than that.Try again.” – “Incorrect. Try again.” • Is there a difference as to what you prefer depending on type of message? Why? 86 ©2011
  • 87. Evidence to support anthropomorphism • Reeves and Naas (1996) found that computers that flatter and praise users in education software programs -> positive impact on them – “Your question makes an important and useful distinction. Great job!” • Students were more willing to continue with exercises with this kind of feedback 87 ©2011
  • 88. Criticism of anthropomorphism • Deceptive, make people feel anxious, inferior or stupid • People tend not to like screen characters that wave their fingers at the user and say: – Now Chris, that‟s not right. You can do better than that.Try again.” • Many prefer the more impersonal: – “Incorrect. Try again.” • Studies have shown that personalized feedback is considered to be less honest and makes users feel less responsible for their actions (e.g. Quintanar, 1982) 88 ©2011
  • 89. Virtual characters • Appearing on our screens in the form of: – Sales agents, characters in videogames, learning companions, wizards, pets, newsreaders • Provides a persona that is welcoming, has personality and makes user feel involved with them 89 ©2011
  • 90. Virtual agents • • • • • • • What do the virtual agents do? Do they elicit an emotional response in you? Do you trust them? What is the style of interaction? What facial expression do they have? Are they believable, pushy, helpful? Would it be different if they were male? If so, how? 90 ©2011
  • 91. What makes a virtual agent believable? • Believability refers to the extent to which users come to believe an agent‟s intentions and personality • Appearance is very important – Are simple cartoon-like characters or more realistic characters, resembling the human form more believable? • Behavior is very important – How an agent moves, gestures and refers to objects on the screen – Exaggeration of facial expressions and gestures to show underlying emotions (c.f. animation industry) 91 ©2011
  • 92. Suggested readings • Apart from your core text book, suggested readings for this week include: – Kourtunov, D. (2008) 10 Mistakes in Icon Design [online]. Available from http://turbomilk.com/blog/cookbook/icon_design/10_m istakes_in_icon_design/ (Accessed: 18/02/2013) – Hobbs, T. (2012) Can We Please Move Past Apple‟s Silly, Faux-Real UIs? [online]. Available from http://www.fastcodesign.com/1669879/can-weplease-move-past-apples-silly-faux-real-uis (Accessed: 18/02/2013) 92 ©2011