User Interface Design & Analysis

bouncerarcheryΤεχνίτη Νοημοσύνη και Ρομποτική

14 Νοε 2013 (πριν από 4 χρόνια και 7 μήνες)

79 εμφανίσεις

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 &amp; 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 &amp; 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 &amp; 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>