1 / 31 cs 425/625 software engineering user interface design based on chapter 15 of the textbook...
Post on 20-Jan-2016
217 views
TRANSCRIPT
1 / 31
CS 425/625 Software Engineering
User Interface Design
Based on Chapter 15 of the textbook [SE-6] Ian Sommerville,Software Engineering, 6th Ed., Addison-Wesley, 2000 and on theCh15 PowerPoint presentation available at the book’s web-site:www.comp.lancs.ac.uk/computing/resources/IanS/SE6/Slides/index.html
November 03, 2003
2 / 31
Outline
Introduction User Interface Design Principles User Interaction Information Presentation User Support User Interface Evaluation
3 / 31
Introduction..
User interface design (UID) is part of the software design process
In many cases software engineers also work as UID specialists
The user interface is critical to the success of the application
The vast majority of current applications have graphical user interfaces (GUI)
GUI advantages: Are relatively easy to understand, learn and use Allow complex interaction, via multiple windows Support full-screen, fast interaction
4 / 31
.Introduction.
Characteristics of graphical user interfaces [Fig. 15.1, Somm00]
Characteristic DescriptionWindows Multiple windows allow different information to be
displayed simultaneously on the user’s screen.Icons Icons different types of information. On some systems,
icons represent files; on others, icons representprocesses.
Menus Commands are selected from a menu rather than typedin a command language.
Pointing A pointing device such as a mouse is used for selectingchoices from a menu or indicating items of interest in awindow.
Graphics Graphical elements can be mixed with text on the samedisplay.
5 / 31
..Introduction
User interface design process [Fig. 15.2, Somm00]
Executableprototype
Designprototype
Produce paper-based design
prototype
Producedynamic design
prototype
Evaluate designwith end-users
Implementfinal userinterface
Evaluate designwith end-users
Analyse andunderstand user
activities
6 / 31
User Interface Design Principles
User interfaces should be designed with the user in mind
Implementation details should be hidden General principles that guide UID:
User familiarity Consistency Minimal surprise Recoverability User guidance User diversity
7 / 31
User Interaction……
Key issues in UID: User interaction (input commands & data from user) Information presentation (output data to the user)
Five styles of user interaction: Direct manipulation
User interacts directly with objects on screen It is fast, intuitive, easy to learn Provides immediate feedback; errors are easy to correct Needs to be supported by a user interface metaphor Requires complex implementation
8 / 31
.User Interaction…..
Menu selection User selects a command (option) from a set of options User errors are reduced Easy to use interfaces such as touch screen terminals
can be used Context-dependent help could be provided The interface may be complex if many options are
available; structuring mechanisms are needed Logical conjunctions and disjunctions in user commands
are difficult to support Learning may not be straightforward Experienced users may find menu selection slower than
command language
9 / 31
..User Interaction….
Command language Text-based interaction, where the user specifies a command
and, possibly, parameters for the command (e.g., “remove file” rm filename in unix)
Powerful set of commands can be designed Concise, fast interaction style Commands can be easily interpreted by software More difficult to learn Typing ability required Errors are dealt with poorly Preferred by experienced users Can be used as an alternative to other styles (e.g., shortcut
combinations of keystrokes in addition to menu selection)
10 / 31
…User Interaction…
Fill-in forms User inputs information in the fields of the form Easy to learn May require complex processing Take significant screen space
Natural language Commands are expressed in natural language sentences,
possibly using voice recognition technology Suitable for casual users Not very reliable
Combinations of UI styles can be used (e.g., Windows)
11 / 31
….User Interaction.. Example of control panel interface [slide from Ch15 presentation,
Somm00]: a combination fill-in form and menu selection
Title
Method
Type
Selection
NODE LINKS FONT LABEL EDIT
JSD. example
JSD
Network
Process
Units
Reduce
cm
Full
OUIT
Grid Busy
12 / 31
…..User Interaction.
Example of fill-in interface [slide from Ch15 presentation, Somm00]
Title
Author
Publisher
Edition
Classification
Date ofpurchase
ISBN
Price
Publicationdate
Number ofcopies
Loanstatus
Orderstatus
NEW BOOK
13 / 31
……User Interaction
Multiple user interfaces [Fig. 15.5, Somm00]
Operating system
GUImanager
Graphical userinterface
Commandlanguage
interpreter
Commandlanguageinterface
14 / 31
Information Presentation….….
Information may be directly presented (e.g., text) or a graphical representation may be used
Data presented should be separated by the presentation software
An approach for multiple presentation of data is Model-Viewer-Controller (MVC). It allows different presentations (“views”) of the same information
15 / 31
.Information Presentation….…
Generic model of presentation [Fig. 15.6, Somm00]
Information tobe displayed
Presentationsoftware
Display
16 / 31
..Information Presentation……
Model-Viewer-Controller approach [Fig. 15.7, Somm00]
Model state
Model methods
Controller state
Controller methods
View state
View methods
User inputsview modification
messages
Model editsModel queriesand updates
17 / 31
…Information Presentation.…. An example of multiple presentation of
information [Fig. 14.13, Somm00]
Subject
A: 40B: 25C: 15D: 20
Observer 1 Observer 2
0
50
25
A B C D
A
B
C
D
18 / 31
….Information Presentation….
Factors to be considered when presenting information: Are precise values or data relationships (“big picture”)
needed? Is data static or dynamic? If dynamic, what is the rate of information change? How
quickly should the user be informed of the change? Are actions/responses required from the user? Is direct manipulation involved? Are absolute or relative values needed? Is textual or numerical format necessary? Is it required to present large amounts of information?
19 / 31
…..Information Presentation…
Alternative presentations [Fig. 15.8, Somm00]
0
1000
2000
3000
4000
Jan Feb Mar April May June
Jan2842
Feb2851
Mar3164
April2789
May1273
June2835
20 / 31
…...Information Presentation..
Presentation of dynamic information [Fig. 15.9 and 15.10, Somm00]
1
3
4 20 10 20
Dial with needle Pie chart Thermometer Horizontal bar
0 100 200 300 400 0 25 50 75 100
Pressure Temperature
21 / 31
….…Information Presentation.
Textual highlighting [Fig. 15.11, SE-6]
The filename you have chosen has beenused. Please choose another name
Ch. 16 User interface design!
OK Cancel
22 / 31
….….Information Presentation
Colours: Can help the users manage the complexity of the
interface Can be used for highlighting items or identifying layers
Several guidelines for using colours: Use colours conservatively (limit the number of colours used) Use colours to indicate changes in system status Use colour coding to support user tasks Use colours in a consistent manner Pay attention to colour pairings
23 / 31
User Support……
User guidance encompasses: Online help system Messages in response to user actions User interface documentation
Online help system: Should provide various entry points for the user and should
allow easy navigation Should be kept compact, clear and concise; it should not
overwhelm the user Should use a well-organized hierarchical structure, with
general help information placed at the top of the hierarchy and details at the bottom
Preferably, should include various levels of help
24 / 31
.User Support…..
Entry points to a help system [Fig. 15.15, Somm00]
Help frame network
Top-levelentry
Entry from errormessage system
Entry fromapplication
25 / 31
..User Support….
Help system windows [Fig. 15.16, SE-6]
Mail redirection
Mail may be redirected to anothernetwork user by pressing theredirect button in the controlpanel. The system asks for thename of the user or users towhom the mail has been sent
next topicsmore
Mail redirection
Mail may be redirected to anothernetwork user by pressing theredirect button in the controlpanel. The system asks for thename of the user or users towhom the mail has been sent
Help frame map
You are here
Help history
1. Mail2. Send mail3. Read mail4. Redirection
26 / 31
…User Support…
Error messages: Should take into consideration the background and
experience of users; should utilize a user-oriented, not a system-oriented language
Should be polite, positive, concise, and consistent Wherever possible, should suggest actions to
correct the error Wherever possible, should be linked with the help
system
27 / 31
….User Support..
Factors considered in wording messages [Fig. 15.12]Context The user guidance system should be aware of what the user is
doing and should adjust the output message to the currentcontext.
Experience As users become familiar with a system they become irritatedby long, ‘meaningful’ messages. However, beginners find itdifficult to understand short terse statements of the problem.The user guidance system should provide both types of messageand allow the user to control message conciseness.
Skill level Messages should be tailored to the user’s skills as well as theirexperience. Messages for the different classes of user may beexpressed in different ways depending on the terminology whichis familiar to the reader.
Style Messages should be positive rather than negative. They shoulduse the active rather than the passive mode of address. Theyshould never be insulting or try to be funny.
Culture Wherever possible, the designer of messages should be familiarwith the culture of the country where the system is sold. Thereare distinct cultural differences between Europe, Asia andAmerica. A suitable message for one culture might beunacceptable in another.
28 / 31
…..User Support.
User documentation: The system manual should be more detailed
than the online help Types of user documentation:
Functional description Installation document Introductory manual Reference manual Administrator’s manual
29 / 31
……User Support
Document types for user support [Fig. 15.17, SE-6]
Description ofservices
Functionaldescription
Systemevaluators
How to installthe system
Installationdocument
Systemadministrators
Gettingstarted
Introductorymanual
Noviceusers
Facilitydescription
Referencemanual
Experiencedusers
Operation andmaintenance
Administrator’sguide
Systemadministrators
30 / 31
Interface Evaluation.
Usability criteria [Fig. 15.18, Somm00]
Attribute DescriptionLearnability How long does it take a new user to
become productive with the system?Speed of operation How well does the system response match
the user’s work practice?Robustness How tolerant is the system of user error?Recoverability How good is the system at recovering from
user errors?Adaptability How closely is the system tied to a single
model of work?
31 / 31
.Interface Evaluation
Evaluation of user interfaces: Comprehensive statistical assessment based on many
experiments and involving users and specialists Less expensive techniques for user interface evaluation:
Questionnaires Observations of users at work Video snapshots of typical uses Software components that gather information on the usage of
the user interface Software components that allow direct feedback from users