Embed Size (px)
Citation preview
COMP5008 The Human Computer Interface
Week 7Multimedia and Web
Usability
2
Today's TopicsClassification of different types of computer systems:– multimodal– multisensory– multimedia, hypermedia
HCI issues in these varied systems:– design issues (similarities and differences)– particular strengths that can be used to
enhance usability – issues for different types of interfaces
3
InterfacesMany applications are GUI-based and use:– Input: keyboard presses and mouse movement– Output: graphics and text on a monitor, almost
entirely visual Need to consider a broader scope, e.g. – Non-standard computerized interfaces e.g. pen,
wearable– Accessibility concerns – Computing on new devices e.g. mobiles, tablets
4
Different types of systemMultimedia systems use more than one type of media.What common types of media are there?
text, sound, graphics, animation, videoMultisensory systems use more than one sense channel in the interaction. Human senses:
visual, auditory, touch, smell, taste
Multimodal systems use more than one mode • either different media, or senses• or different communication channels
5
MultiMedia/Modal/Sensory Systems and Good Design
The issues are still:– Users want good usability– Users come in all varieties
Use the same usability engineering methods.Focus on users and tasksDo user-centred design Also:
– choose the best media/mode for usability– consider HCI issues specific to the system
6
Example: Telephone Answering SystemThe caller is routed through a call using pre-recorded speech messages. User input can be given through– a speech driven menu system, or– tone signals from a touch keypad, e.g. ¯
Hello. Welcome to ElectriGas. If you want a HomeCare brochure, please press 1. For enquiries about your latest bill, please press 2. For servicing and repairs, please press 3.For all other enquiries, please hold.
*2*For enquiries about your gas bill, please press 1.For enquiries about your electricity bill, please press 2.
*1* *ring ring*
7
Is the system...– multimodal? – Yes, it uses speech to inform the user, and the
user uses the touchpad to provide input
– multisensory? – Yes, hearing/speaking and touch input
– multimedia? – No, information is only represented by sound
Touch-driven Telephone Answering System
8
Some voicemail systems are speech-driven. Is such a system ...
multimodal?– No, uses speech onlymultisensory? – No, only auditory sense usedmultimedia? – No, information is only represented by sound
A small vocabulary of words is used. The system must cope with different accents.
Speech-driven Telephone Answering Systems
9
Dialogue Design for Telephone Answering Systems
Action
Action
Action
Menu
Menu
YES
NOYES
YES NO
NO
LeaveMessage
Get HumanOperator
Get Message
Menu
10
Usability Issues: Telephone Answering Systems
The dialogue must be usable by a novice i.e. it has to be self explanatory. System relies on the caller being aware of usual human-human phone dialogue. Options are sequential - users must listen to all the options before the one they want ⇨?
choose option order carefullyThere are not many possibilities for unforeseen user requirements - the interaction must follow the dialogue design. ⇨?
Systems should have a default choice – e.g. "For all other options please hold"
11
Speech Driven Systems (1)Speech can occur either as input or output.Speech input
– continuous speech input, or restricted format– can be speaker dependent or speaker independent
Speech input (continuous)– Computationally easier if user is known to the
computer; accuracy is 98% correct for continuous speech
– Difficult for Natural Language Processing to figure out where one word ends and another begins
– Example: Siri
12
Speech Driven Systems (2)Speech input (restricted format)
– Use a restricted vocabulary, in a particular sentence format, then the system can parse key words, e.g.Please deposit £100 in account number
123645– System uses a grammar on the structure of
the spoken sentence– Example: W3C Speech Recognition
Grammar Specification– http://www.w3.org/TR/speech-grammar/
13
Speech OutputTwo kinds of speech output
– pre-recorded speech messages– synthetic speech
Speech synthesis is the creation of recognisable speech from text. It is typically used in systems with audio output. Such a system is equipped with a range of sounds and
(according to certain rules of phonetics) canreplace textual words with their phonetic counterpart.
Synthetic speech can sound monotonice.g. http://www.hawking.org.uk/
14
Multimedia SystemsThere are usability issues with each type of media,
e.g. text, sound, graphics, animation, video.For best usability, choose the most suitable media
– Designers should not choose media because "it looks cool" or the technology is new and exciting, this does nothing for the usability of the system (and often makes it less usable!)
• Particular plus points of multimedia systems:– Interaction– Animation– Information visualisation
15
Usability Issues: Text
Text...– typically has high information content, especially
high compared to the bandwidth it consumes– is static, so can be perused at leisure– is useful for annotation of other media– is good at providing verbal explanations (useful for
educational materials)– is accessible. Screen readers can access text if it
is presented as text. This can help improve the accessibility (and usability) of visual displays.
16
Usability Issues: SoundSound...• useful for improving access to visual displays for the
visually-impaired, e.g.– audio commentary for video– an audio help facility
• provides a channel for information which is separate from the rest, this allows additional information to be presented without cluttering up the main display– warning beeps– characteristic sounds providing feedback for an
action (this can provide closure)– ambient mood setting (e.g. music)
17
Usability Issues: Video (1)Video...is dynamic. Video can be useful for showing changes over time, but it is not so helpful if the user wants to choose the timing of the changes, or browse all the information at once e.g.
18
Usability Issues: Video (2)– can have problems with bandwidth– can have accessibility problems– a commentary can help
There are captioning(http://www.webaim.org/techniques/captions/) systems which convert spoken text to a scrolling display in real time with a short delay.
Examples of use:– Clips/previews of longer video media (TV, films)– Archiving footage of real events / video media– Demonstrating how something works
19
Usability Issues: AnimationAnimation:
– is very noticeable, particular in human peripheral vision
– What design guideline should we think of?– Awareness of Human Strengths and Weaknesses– can be very distracting if that's not what the user
wants to concentrate onGood for?:
– showing a transition between two states– illustrating change over time – visualising 3D structures (the view can rotate)– attracting attention
20
Usability Issues: GraphicsAdvantages:
– can add decoration – can add understanding to data, if carefully chosen (this is
information visualisation)Disadvantages
– can be over-done – should be used with care to not obscure text (do not use
repeating images as a background)– are not very accessible, so take care when using to
convey information– can take up considerable bandwidth
21Chart of sleep/wake cycles in babies:Winfree, A.T. (1987) The Timing of Biological Clocks, Scientific American Books
22
Ordinary map of the world, with each country's map area roughly proportional to its land area.
Mark Newman, Images of the social and economic worldhttp://www-personal.umich.edu/~mejn/cartograms/
23
Mark Newman, Images of the social and economic worldhttp://www-personal.umich.edu/~mejn/cartograms/
24
Interaction– Multimedia systems are frequently
interactive– An interactive interface can allow the user
to better explore the information presented– Interactive multimedia can involve displays
of information that are static or dynamice.g. Google Maps
Break25
26
Hypertext SystemsWhat is hypertext?
– Pages/cards/forms/documents linked using hyperlinks, also known as links
– A hypertext system allows navigation between different sections of the system by following links
Why use hypertext?– allows the user to choose which link to follow– gives the user more control – Which design guideline is this? – User Control
27
Hypermedia SystemsMost systems with hyperlinks usually involve graphics and other media too, so systems with hypertext are called hypermedia systems.
Examples of hypermedia systems:– HyperCard (and modern variants)– PDF/Word and other documents with embedded links– The World-Wide Web
28
Structure of Hypermedia Systems
A hypermedia system has a network-like structuree.g. structure of a website may look like:
29
W W W: a hypermedia systemThe World Wide Web consists of a set of protocols running on top of the internet (http, https, ftp etc.). It allows anyone with a viewer for HTML documents (a browser) to view web pages.Usability issues for hypermedia:
Printing documents:– Hypertext doesn't have a notion of "page order"
Navigation:– When a system is non-linear, users can have
difficulties knowing where they are in a system, and how to get to where they want.
– This is a natural consequence of giving navigational control to the user, and the designer must try and avoid the user feeling lost
30
An important usability issue: NavigationAssorted common solutions:– Since the structure of the information is complex, it is
possible for the user to miss seeing some pages so: – the designer should let the user easily tell which pages
have/haven't been visited.– Search box– Some hypertext systems, have a "guided tour" feature,
allowing the user to be certain that they haven't missed anything
– Structuring the information in a hierarchy so that the user can choose which section they want to view
– Some standard interface features exist to help the user see where they are, how to get to what they want, and where they have been to already
31
Navigation by "Guided tour"
32
Providing Navigation: Menus of Links
33
Menus of LinksPoints to Note:• Standard (consistent) positions for navigation menus are
– horizontally across the top of a page– vertically down the left-hand side
• Note where users’ eye gaze* goes and position important content/navigation accordingly
• Left-justified vertically-arranged menus are quicker to read than right-justified ones
• Make the text for the links clearly different • Don't use
– ALL CAPITALS for links: it slows readability
* http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
35
Tabbed NavigationGood things:• Currently-selected tab is highlighted and
visually connected to the content area• Other tabs are still clearly readable• Useful for different views of the same page• There should only be one row of tabs• Labels on the tabs should be shortBad things:• Not suitable if the user will need to swap back
and forth between views
36
Providing Navigation: Drop-down Menus
37
Drop-Down Navigation MenusPoints to Note:• Can fit more links into a smaller space• Generally slower to navigate• Not so accessible by search engines (meaning
users can’t find your content so easily)• Overly long lists can be annoying as well as slow• Large menus can be helpful, because the
options can be structured better– e.g. see foodnetwork.com
38
Where am I?: Navigation by breadcrumb trails
From: http://www.useit.com/alertbox/breadcrumbs.html
39
Breadcrumb NavigationPoints to Note:• Useful for secondary navigation information• A breadcrumb trail takes up very little space• Easy to use; users rarely get confused by
them• Shows the user where they are in the site's
page structure• Gives easy access to pages further up the
hierarchy – important if users "jumped" direct to that page from a search engine
40
Navigating large linear structures
Useful for search resultsSome variations on a standard way of doing this:
41
Not Missing Out: Site Maps
42
How not to do it: Hiding the Navigation
From: Vincent Flanders' http://www.webpagesthatsuck.com/
43
How not to do it: More "Mystery Meat" Navigation
44
Some Other Web-specific Design Guidelines1. Keep pages short, concise and dedicated to one topic
(users are not keen on scrolling)2. Every page should contain information to identify itself,
and link back to the home page (typically by a linked logo in the top-left corner)
3. Pages should link to related pages4. Be consistent and provide a common interface and
method for navigation5. Longer pages: consider using a table of contents at the
top of the page.6. Use whitespace effectively
45
Further Reading
• Chapter 14: Graphics, Images, and Multimedia of Research-Based Web Design & Usability Guidelines http://usability.gov/pdfs/chapter14.pdf
• Yale Style Guide http://webstyleguide.com/wsg2/ Jakob Nielsen’s Alertbox column
• Vincent Flanders’Web Sites That Suck site• A List Apart - in-depth articles about technical
and usability aspects of the web http://alistapart.com/
