Lecture 8 Evaluation, Physical Design and Standards

architectgroundhogInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

67 εμφανίσεις

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley


Heuristic

evaluation

Nielsen’s

heuristics

Schneiderman’s

rules

Physical

design

(continued)

Interface

design

standards


Heim,

Chapters

5
.
4
-
5
.
6

Lecture 8

Evaluation, Physical Design and Standards

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

Learning objectives


To appreciate evaluation as part of the design
process


To be aware of a range of heuristic evaluation
options appropriate to the design phase


To be able to apply additional prototyping
approach options


Wireframes


Functional prototypes

1
-
2

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

1
-
3

Evaluation


Begin evaluations early in the design process.



Evaluation is an integral part of the development process and
can take the form of an informal walkthrough or a more
structured heuristic evaluation.


Formal usability testing can begin once a prototype has been
developed.


Starting the evaluation process early in the design phase fosters
better design because decisions can be tested before its too
expensive to make changes

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

MacLeamy

curve

1
-
4

MacLeamy

2004

IPD=integrated project delivery

From the
construction
industry, but
fits well to

construction
of software,
too!

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

1
-
5

Evaluation


Heuristic Evaluation


Heuristic evaluations are performed by usability experts using a
predetermined set of criteria designed to measure the usability of a
proposed design.


The evaluator follows a scenario through the design and tests each step
against the heuristic criteria.


The evaluator makes recommendations to the design team either through a
written document or during a team meeting.



Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

1
-
6

Evaluation


Nielsen’s Heuristics


In collaboration with Rolf Molich, Jakob Nielsen
developed a set of 10 heuristics for interface design.



The revised set based on an analysis of 249 usability
problems.


http://www.useit.com/papers/heuristic/heuristic_list.html


Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

Nielsen’s 10 Usability Heuristics


Visibility of system status


Did you ever click on something and nothing happens?


Match between system and the real
world


User control and freedom


Consistency and standards


Error prevention


Recognition rather than recall


Flexibility and efficiency of use


Aesthetic and minimalist design


Every extra item in the UI completes for user’s attention!


Help users recognize, diagnose, and
recover from errors


Help and documentation


7

CECIL

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

Nielsen’s Advice for Heuristic Evaluations


Use multiple independent evaluators


Use observer to record evaluator


Go through interface several times


Compare interaction against list of heuristics


Use heuristics specific to design


List heuristic problems and how the heuristic is
violated



In assignment 1, we have you focus the heuristic
evaluation on key tasks for the application


1
-
8

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

9

Shneiderman’s

8 Golden Rules

1.
Strive
for consistency


E.g. exact same terms for objects, same command syntax throughout

2. Enable frequent users to use shortcuts

3. Offer informative feedback

4. Design dialogs to yield closure

5. Offer error prevention and simple error handling

6. Permit easy reversal of actions

7. Support internal locus of control


Make users initiators rather than responders (e.g. direct manipulation!)

8.
Reduce short
-
term memory
load


What the user needs to know should be readily visible

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

A world of heuristics


Can be devised for more specific domains


For physical format


e.g. web pages
http
://
www.psu.edu/webconference/Web2004/Materials/Heuristic.pdf


Domain specific concepts like good background graphics


‘Housekeeping’ like correct spelling & grammar


May want to evaluate the search function


For task domain


e.g. in health…


Is patient name and date
-
of
-
birth clearly visible at all times?


Does the interaction fit to clinical workflow?


Can be quite long


About 100 heuristics for mobile apps:

www.tmap.net/sites/
tmap
.../
Checklist
_Mobile_App_Testing_0.docx


1
-
10

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

1
-
11

Physical Design Cont.
-

Wireframes


Wireframes define:


Basic page layout


Screen components



Wireframes are developed from flowcharts and paper
prototypes




They are
basically an evolutionary step from paper
prototypes that include detailed information about the
interface
elements, locking down the structure with
more precision

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

1
-
12

Physical Design Cont.
-

Wireframes


Wireframes help to create template layouts that can be used to
impose a consistent structure throughout the interface

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

1
-
13

Physical Design Cont.


Wireframes


Web Formats


Web sites from different domains use layouts particular to
that domain


Use page layouts that are common to the
domain


Review popular websites in the domain for ideas!


Use flexible design for Web
pages


E.g. avoid specifying a precise pixel width where practical


CSS is helpful to give standards based specification to the browser to guide
presentation of the your content and allows you to make format changes that
ripple down consistently through your site


Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

1
-
14

Evaluation


Functional Prototypes


Functional prototypes are interactive prototypes that
represent various degrees of functionality


They can either be horizontal or vertical


Can also be simulated


Wizard of Oz


Functioning prototypes can be created using RAD
environments, such as:


Microsoft


Visual
Studio


Adobe


Flash


Dreamweaver


Director

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

Wizard of Oz prototype evaluation


“Pay no attention to that man behind the curtain”


www.youtube.com/watch?v=YWyCCJ6B2WE


Can make a ‘functional’ prototype where a key
function is performed by a human


This was done for early testing of speech
-
to
-
text interfaces
(a ‘listening typewriter’)


The speech
-
to
-
text function was implemented by a good
[human] typist!


Great for testing usability of systems with an AI before
the AI is implemented


E.g. in some types of video games

1
-
15

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

1
-
16

Interface Design Standards


These tools promote standards
-
based designs
that have a consistent look and
feel


Graphical
libraries (e.g. OpenGL)


User interface
toolkits (e.g.
Qt
)


Visual interface
builders (e.g. Visual Studio)


Web development
tools (e.g. Dreamweaver)


Working in a standardized environment
increases efficiency and promotes learning
(Cooper &
Reimann
, 2003
)


The more you ‘go with the flow’ of widely
-
used tools, the more quickly
you’ll be able to create a familiar
-
feeling product and the larger your
support base will be

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

1
-
17

Interface Design Standards


Shneiderman

and
Plaisant

(2005, 185) identified the
following benefits from the use of high
-
level software
tools



User Interface Independence


They separate interface design from internals.


They enable multiple user interface strategies.


They enable multiple
-
platform support
.


Very important at the moment!


They
establish the role of the user interface architect.


They enforce standards
.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

1
-
18

Interface Design
Standards (cont.)


Rapid Prototyping


They
make it possible to try out ideas very early.


They make it possible to test, revise, test, revise, . . . .


They engage end users

managers and customers.



Software Support


They increase productivity.


They offer constraint and consistency checks.


They facilitate team approaches.


They ease maintenance.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

Standards / community example


Drupal
(
http://drupal.org/
)


Open source content management system (CMS) for
websites and applications


100s of modules contributed to be international online
community


With a wide community using the same modules


Achieve consistency


And a community to consult if things aren’t working


Wide range of modules means you can tack together
functionality pioneered by others very quickly

1
-
19

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

A
drupal

module

1
-
20

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley


Some more
drupal

modules


From the
same search
(filtered on
‘community’)

1
-
21

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison
-
Wesley

What is a ‘standard’ anyway?


Can be ‘informal’ or ‘
defacto



It’s common, so it’s ‘standard’


Sometimes will be antagonistic competing commercial blocks


Can be formal through endorsement by…


A national or international body


ANSI (American National Standards Institute)


ISO (International Standards Organisation)


A community run by a not
-
for
-
profit company (or less formally constituted
but somehow well recognised)


W3C, Health Level 7


Incidentally, just because a vendor says they comply to a
standard, it doesn’t mean they do so fully


Standards compliance testing is an industry of its own!

1
-
22