Web interfaces

• Early websites were largely text-based,

providing hyperlinks
• Concern was with how best to structure
information at the interface to enable
users to navigate and access it easily
and quickly
• Nowadays, more emphasis on making
pages distinctive, striking, and
pleasurable
Useit.com
Swim
 Usability versus
attractiveness debate
• Vanilla or multi-flavor design?
– Ease of finding something versus aesthetic
and enjoyable experience
• Web designers are:
– “thinking great literature”
• Users read the web like a:
– “billboard going by at 60 miles an hour”
(Krug, 2000)
• Need to determine how to brand a web
page to catch and keep ‘eyeballs’
 Research and design issues
• Web interfaces are getting more like
GUIs
• Need to consider how best to design,
present, and structure information and
system behavior
• But also content and navigation are
central
• Veen’s design principles
(1)Where am I?
(2)Where can I go?
(3) What’s here?
 Activity
• Look at the Nike.com website
• What kind of website is it?
• How does it contravene the design
principles outlined by Veen?
• Does it matter?
• What kind of user experience is it
providing for?
• What was your experience of engaging
with it?
Nike.com
 Speech interfaces
• Where a person talks with a system
that has a spoken language application,
e.g., timetable, travel planner
• 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
Have speech interfaces come
of age?
 Get me a human operator!
• Most popular use of speech interfaces
currently is for call routing
• Caller-led speech where users state
their needs in their own words
– e.g., “I’m having problems with my voice
mail”
• Idea is they are automatically
forwarded to the appropriate service
• What is your experience of such
systems?
 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?”
 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)
– Do people prefer to listen to and are more
patient with a female or male voice, a
northern or southern accent?
 Mobile interfaces
• Handheld devices intended to be used
while on the move, e.g., PDAs, cell
phones
• 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
 Mobile challenges
• Small screens, small number of keys
and restricted number of controls
• Innovative designs including:
– roller wheels, rocker dials, up/down ‘lips’ on
the face of phones, 2-way and 4-way
directional keypads, softkeys, silk-screened
buttons
• Usability and preference for these
control devices varies
– depends on the dexterity and commitment
of the user
Mobile devices for special
needs
Simple or complex phone for
you and your grandmother?
 Research and design issues
• Despite many advances mobile
interfaces can be tricky and
cumbersome to use, c.f.GUIs
• Especially for those with poor
manual dexterity or ‘fat’ fingers
• Key concern is designing for small
screen real estate and limited
control space
 Shareable interfaces
• 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, e.g., Mitsubishi’s DiamondTouch
and Sony’s Smartskin
A smartboard
DiamondTouch Tabletop
 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
The Drift Table
 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
• Providing larger-sized tabletops does not
improve group working but encourages more
division of labor
 Tangible interfaces
• 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
 Examples
• Chromarium cubes
– when turned over digital animations of color are
mixed on an adjacent wall
– faciliates creativity and collaborative exploration
• Flow Blocks
– depict changing numbers and lights embedded in the
blocks
– vary depending on how they are connected together
• Urp
– physical models of buildings moved around on
tabletop
– used in combination with tokens for wind and
shadows -> digital shadows surrounding them to
change over time
Chromarium cubes
Flow blocks
Urp
 Benefits
• Can be held in both hands and combined and
manipulated in ways not possible using other
interfaces
– allows for more than one person to explore the
interface together
– objects can be placed on top of each other, beside
each other, and inside each other
– encourages different ways of representing and
exploring a problem space
• People are able to see and understand
situations differently
– can lead to greater insight, learning, and problem-
solving than with other kinds of interfaces
– can facilitate creativity and reflection
 Research and design issues
• 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
 Wearable interfaces
• First developments was head- and eyewear-
mounted cameras that enabled user to record
what seen and to access digital information
• Since, jewelery, 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 and
tour guides
Steve Mann - pioneer of
wearables
 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 clothing 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?
 Robotic interfaces
• Four types
– 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
 Advantages
• Pet robots have therapeutic qualities,
being able to reduce stress and
loneliness
• Remote robots can be controlled to
investigate bombs and other dangerous
materials
 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)?
 Which interface?
• Is multimedia better than tangible interfaces for
learning?
• Is speech as effective as a command-based interface?
• Is a multimodal interface more effective than a
monomodal interface?
• Will wearable interfaces be better than mobile interfaces
for helping people find information in foreign cities?
• Are virtual environments the ultimate interface for
playing games?
• Will shareable interfaces be better at supporting
communication and collaboration compared with using
networked desktop PCs?
 Which interface?
• Will depend on task, users, context, cost,
robustness, etc.
• Much system development will continue for
the PC platform, using advanced GUIs, in the
form of multimedia, web-based interfaces, and
virtual 3D environments
– Mobile interfaces have come of age
– Increasing number of applications and software
toolkits available
– Speech interfaces also being used much more for a
variety of commercial services
– Appliance and vehicle interfaces becoming more
important
– Shareable and tangible interfaces entering our
homes, schools, public places, and workplaces
 Summary
• Many innovative interfaces have emerged post
the WIMP/GUI era, including speech,
wearable, mobile, and tangible
• Many new design and research questions need
to be considered to decide which one to use
• Web interfaces are becoming more like
multimedia-based interfaces
• 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