User Interface Design & Analysis

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

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

67 εμφανίσεις

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>