User Interface Design & Analysis
•
Resources
–
Chapter 7, main text
•
Some general principles and advice
–
Shneiderman, B. (1998). Designing the User Interface: Strategies
for Effective Human
-
Computer Interaction. Third Edition. Addison
Wesley Longman, Inc.
–
Web site usability
•
http://www.d.umn.edu/itss/support/Training/Online/usability/
•
Topics
–
Human
-
Computer Interaction (HCI) styles
–
Number of fonts & colors
–
User interface design process
–
Analysis examples
Some Human
-
Computer Interaction
(HCI) Styles
•
Menu Selection
•
Direct manipulation
•
Form fill
-
in
•
Command language
•
Natural language
(pp. 414
-
415 of main text)
Menu Selection
Direct Manipulation
•
Event oriented user interfaces often used for ‘direct
-
manipulation’ graphical user interfaces (GUI’s)
–
Visual metaphor objects (e.g., folders, trash can)
–
User manipulates those objects through I/O devices such as
mouse/screen
•
Example manipulations
–
Close window by clicking on close box
–
Move window by dragging on title bar
Form
Fill
-
in
Linux/UNIX:
Shell Command Language
Windows XP “DOS” Shell
Command Language
Natural Language
•
Language understanding
•
Speech to text
–
E.g., Dragon Naturally Speaking
–
http://www.dragontalk.com/
•
Text to speech
–
E.g., http://www.scansoft.com/realspeak/
•
Example: from
http://www.scansoft.com/realspeak/demo
Text & Colors
•
What materials to present as spoken vs. text?
–
“less text is normally more effective” (p. 422)
•
Text presentation
–
Number of fonts
–
one or two
•
E.g., stick with Times New Roman, or stick with
New Century Schoolbook
–
Don’t overuse bold, italics, underline etc.
–
Spell check & proof read!
•
Colors
–
Background
–
pale colors
–
Foreground
–
brighter colors
–
Use a small number of colors
Example: One Font
Example: Two Fonts
Example: Three Fonts
Example: Four Fonts
HTML Font Style
<html>
<head>
<title>Epigenetic Robotics</title>
<style type = "text/css">
<!
--
Using class names, defined in the STYLE header,
--
>
<!
--
to define font styles for P, the paragraph
--
>
P.Hel { font : 14 pt Helvetica }
P.Cou { font : 16 pt Courier }
P.New { font : 14 pt 'Letter Gothic' }
</style>
</head>
<h1>The Third International Workshop on Epigenetic Robotics: <i>Modeling Cognitive
Development in Robotic Systems</i> </h1>
<p class="New">
August 4
-
5, 2003<br>
Boston, MA, USA
<p class="New"> <i>Important Dates: </i>
<p class="Hel"> <!
--
note, need both font size & type to specify type
--
>
March 14, 2003: Deadline for submission of papers and posters<br>
May 1, 2003: Notification of acceptance for papers and posters<br>
May 26, 2003: Deadline for camera ready
-
papers & posters<br>
August 4
-
5, 2003: Workshop
<p>
<p class="Cou">
<a href="http://www.epigenetic
-
robotics.org/2003/cfp
-
03">Call for papers</a><br>
<p class="Cou">This workshop is being held immediately following the 2003 meeting of the Cognitive
Science Society.
<p class="Cou">For information about past workshops, see <a href="http://www.lucs.lu.se/epigenetic
-
robotics/">
Epigenetic Robotics 2001</a> and <a href="http://www.epigenetic
-
robotics.org/2002">Epigenetic
Robotics 2002</a>.
</html>
HTML Font Style
<html>
<head>
<title>Epigenetic Robotics</title>
<style type = "text/css">
<!
--
Using class names, defined in the STYLE header,
--
>
<!
--
to define font styles for P, the paragraph
--
>
P.Hel { font : 14 pt Helvetica }
P.Cou { font : 16 pt Courier }
P.New { font : 14 pt 'Letter Gothic' }
</style>
</head>
<h1>The Third International Workshop on Epigenetic Robotics: <i>Modeling Cognitive
Development in Robotic Systems</i> </h1>
<p class="New">
August 4
-
5, 2003<br>
Boston, MA, USA
<p class="New"> <i>Important Dates: </i>
<p class="Hel"> <!
--
note, need both font size & type to specify type
--
>
March 14, 2003: Deadline for submission of papers and posters<br>
May 1, 2003: Notification of acceptance for papers and posters<br>
May 26, 2003: Deadline for camera ready
-
papers & posters<br>
August 4
-
5, 2003: Workshop
<p>
<p class="Cou">
<a href="http://www.epigenetic
-
robotics.org/2003/cfp
-
03">Call for papers</a><br>
<p class="Cou">This workshop is being held immediately following the 2003 meeting of the Cognitive
Science Society.
<p class="Cou">For information about past workshops, see <a href="http://www.lucs.lu.se/epigenetic
-
robotics/">
Epigenetic Robotics 2001</a> and <a href="http://www.epigenetic
-
robotics.org/2002">Epigenetic
Robotics 2002</a>.
</html>
Example: One Color
Example: Two Colors
Example: Three Colors
Example: Four Colors
HTML Font Color
<html>
<head>
<title>Epigenetic Robotics</title>
<style type = "text/css">
<!
--
Using class names, defined in the STYLE header,
--
>
<!
--
to define font colors for P, the paragraph
--
>
P.Color3 { color : Blue }
P.Color4 { color : Red }
</style>
</head>
<h1>The Third International Workshop on Epigenetic Robotics: <i>Modeling Cognitive
Development in Robotic Systems</i> </h1>
<p>August 4
-
5, 2003<br>Boston, MA, USA
<p><i>Important Dates: </i>
<p class="Color3"> <!
--
note, need both font size & type to specify type
--
>
March 14, 2003: Deadline for submission of papers and posters<br>
May 1, 2003: Notification of acceptance for papers and posters<br>
May 26, 2003: Deadline for camera ready
-
papers & posters<br>
August 4
-
5, 2003: Workshop
<p>
<p class="Color4">
<a href="http://www.epigenetic
-
robotics.org/2003/cfp
-
03">Call for papers</a><br>
<p class="Color4">This workshop is being held immediately following the 2003 meeting of the Cognitive
Science Society.
<p class="Color4">For information about past workshops, see <a href="http://www.lucs.lu.se/epigenetic
-
robotics/">
Epigenetic Robotics 2001</a> and <a href="http://www.epigenetic
-
robotics.org/2002">Epigenetic
Robotics 2002</a>.
</html>
•
What design process should we use?
How Should We Design User
Interfaces for Multimedia?
How Should We Design User
Interfaces for Multimedia?
•
Based on client requirements
–
Often clients don’t know what they want
–
For example, they may not be familiar with various kinds of user
interface techniques, or they may have too high of expectations
•
Create interface & evaluate with users
–
Get feedback from users from working system (may be a
prototype)
–
Types of feedback
•
verbal opinions
•
performance of users accomplishing tasks using software; I.e.,
usability testing
•
Create interface & give to external reviewers
–
E.g., other software professionals
–
External reviewers may see issues more objectively
•
“if the interface is too difficult to learn or use, all of its
power isn’t very effective, because the users can’t apply it.
A simpler interface offering fewer but more appropriate
features is usually perceived by users as being more
powerful. And if the simpler interface makes users more
effective, then it really
is
more powerful, in practical
effect” (Cooper, 1997, p. 249; Cited from main text, p.
418
-
419)
Shneiderman (1998): Three
Pillars of User Interface Design
•
Guidelines documents and processes
•
User interface software tools
•
Expert reviews & usability testing
Guidelines documents and
processes
•
“One component of Apple’s success with the
Macintosh was that [system’s] early and readable
guidelines document that provided a clear set of
principles for the many application developers to
follow and thus ensured a harmony in design
across products” (p. 100)
•
Controversial guidelines
–
Should be reviewed by colleagues or tested for usability
User
-
interface Software Tools
•
“customers and users may not have a clear idea of
what the system will look like when it is done” (p.
102)
•
Prototyping
–
Printed (paper) version of displays
–
Onscreen prototypes with active keyboard & mouse
•
Multimedia may be particularly well
-
suited to
prototyping
–
Display images, but not video or sound
–
Links, but no navigation
Expert Reviews & Usability
Testing
•
Pilot testing of system components before release
to customers/users
•
Expert reviews
•
Tests with intended users
•
Surveys
•
Ethnographic methods
–
Unobtrusively watching users at their work site
•
“designers learn about the complexities of an
organization firsthand by visits to the workplace”
(p. 109)
Evaluation Criteria
•
What criteria should we use for evaluation?
Some Evaluation Criteria
•
Focus of attention
•
Selection of images
•
User control over media
•
Number of choices
Based in part on Najjar (1992)
Focus of attention
•
What is intended (by the designer, creator
of the interface) as the focus of attention or
the main message for a particular context
(e.g., a screen)?
•
Has the focus been achieved?
•
E.g., see p. 420, Main text; Figure 7.12
Selection of images
•
Images should have no more detail than
essential to make the point; See Figure 7.16,
p. 423, Main text
•
Also necessary here that we identify what
the main message is
--
images need to
support the main message
User Control Over Media
•
Can sound be stopped?
•
Can video be controlled? Does user have to
watch entire video sequence?
Number of Choices
•
How many choices is the user given in each
context of the presentation?
•
Subjectively, is this too many?
Font Example
http://www.cprince.com/courses/cs3121/fonts/fonts
-
serif.html
http://www.cprince.com/courses/cs3121/fonts/fonts
-
serif.html
<html>
<title>Serif and Sans
-
Serif Fonts</title>
<font size=20 face="Times New Roman, Times, serif">
Eau Claire</font> (serif)<br>
<font size=20 face="Georgia, Times New Roman, Times, serif">
Eau Claire</font> (serif)<br>
<font size=20 face="Arial, Helvetica, sans
-
serif">
Eau Claire</font> (sans
-
serif)<br>
<font size=20 face="Verdana, Arial, Helvetica, sans
-
serif">
Eau Claire</font> (sans
-
serif)
</html>
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Σχόλια 0
Συνδεθείτε για να κοινοποιήσετε σχόλιο