Date post: | 26-Mar-2015 |
Category: |
Documents |
Upload: | tyler-patton |
View: | 213 times |
Download: | 0 times |
1 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
User-Interface DesignIS301 – Software Engineering
Lecture #20 – 2004-10-15M. E. Kabay, PhD, CISSP
Dept of Computer Information SystemsNorwich University
2 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Topics
IntroductionUser-Interface Design PrinciplesUser Interaction Information PresentationUser Support
3 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
User Interface (UI)
UI critically important aspect of software engineeringSystem users often judge system by
interface rather than its functionalityWhy?
Poorly-designed interface can cause users to make catastrophic errors
How?Poor UI design discourages use of software
4 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Graphical UIs (GUIs)
Some old systems still use command-line or text-based UIs
Most systems today use GUIsWindows: simultaneous viewsIcons: data, functionsMenus: choice of options, memory aidsPointing: trackball, touchpad, mouse, eyeGraphics: charts, tables, diagrams
Static or dynamic
5 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Examples of GUIs (1)The First Commercial GUI:
“Xerox’s Star workstation was the first commercial implementation of the graphical user interface. The Star was introduced in 1981 and was the inspiration for the Mac and all the other GUIs that followed.”
This and following screen shots are from the Computer Desktop Encyclopedia.
Used with permission.
http://www.computerlanguage.com
6 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Examples of GUIs (2)
Macintosh GUI
7 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Examples of GUIs (3)
8 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
GUI Advantages
Easy to learn and useSave time in trainingApply skills to new programs
Fast task-switchingUse different applications concurrentlyInformation can remain visible in its own
windowFast, full-screen interaction possible
Immediate access to anywhere on screenMake full use of available “real-estate”Supports multi-screen capabilities
9 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Topics
IntroductionUser-Interface Design PrinciplesUser Interaction Information PresentationUser Support
10 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
User-Centered Design
This chapter / lecture focus:Design philosophy and issuesNot on implementation of UIs
User-centered designNeeds of user are paramountUsers involved in design process
Design UI through prototypes
11 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
UI Design Process
Executableprototype
Designprototype
Produce paper-based design
prototype
Producedynamic design
prototype
Evaluate designwith end-users
Implementfinal userinterface
Evaluate designwith end-users
Analyse andunderstand user
activities
12 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
UI Design Principles
Determinants: learn about system users’NeedsExperienceCapabilities
Constraints: physical and mental limitationsLimited short-term memory
7±2 concepts in mind at one timeMistakes are normal and expectedPeople fall into habits
13 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Design Principles: Overview
User familiarityConsistencyMinimal surpriseRecoverabilityUser guidanceUser diversity
14 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
User Familiarity
Interface should be based on user-oriented terms and concepts
Avoid using computer conceptsE.g., office system:
Use “letters, documents, folders” etc.Don’t use “directories, file identifiers” etc.
15 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Consistency
Display appropriate level of consistencyCommands and menus should have same
Format / appearanceCommand punctuationLayoutAbbreviations / keyboard shortcuts
Error-messagesSame styles / formats from place to placeSame location on screen when they appear
16 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Minimal Surprise
Extend consistency to commands or actionsIf one command operates in known way,
User should be able to predict operation of comparable commands
Put the default choice in the same place or sequence on the screen
E.g.,Make either YES or NO the default for all
commandsIf keeping a previous file version is default,
then don’t make one command delete previous version by default
17 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Recoverability
Resilience to user errorsAllow user to recover from errors
Confirmation of destructive actions‘Soft' deletes . . . .Undo / redo facility
18 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
User Guidance (1)
Help in same place(s) on all screensContext-sensitiveIndexTopicalSmart questions
On-line manualsTutorials . . . .
19 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
User Guidance (2)
20 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
User Diversity
Plan for different types of userExperience
Casual/novice vs experiencedEase-of-use vs efficiency & speed
Physical disabilitiesPoor eyesight
Configurable font sizesBlindness
Automated reading programsUS: Americans with Disabilities Act
21 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
US ADA & GUI Design
Americans with Disabilities Act of 1992Widespread implications for employment,
architectural design and servicesApplies to private employers with >15
employees, state and local governments, employment agencies & labor unions
Web designers have been grappling with requirements
Resourceshttp://consumerlawpage.com/brochure/disab.shtmlhttp://academic.evergreen.edu/g/grovesr/acc_class/resources.html
22 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Topics
IntroductionUser-Interface Design PrinciplesUser Interaction Information PresentationUser Support
23 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
User-System Interaction
Key issues Info from user to computer system? Info from computer system to user?UI metaphor helps to make sense of functions
“Desktop” for operating system“Space invaders game” for typing tutor“3D universe” for dataspace (e.g., TRON,
Matrix, other sci-fi movies)
24 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Interaction Styles
Direct manipulationMenu selectionForm fill-inCommand languageNatural language
Advantages & Disadvantages
Interactionstyle
Main advantages Main disadvantages Applicationexamples
Directmanipulation
Fast and intuitiveinteractionEasy to learn
May be hard toimplementOnly suitable wherethere is a visualmetaphor for tasksand objects
Video gamesCAD systems
Menuselection
Avoids user errorLittle typingrequired
Slow for experiencedusersCan become complexif many menu options
Most general-purpose systems
Form fill-in Simple data entryEasy to learn
Takes up a lot ofscreen space
Stock control,Personal loanprocessing
Commandlanguage
Powerful andflexible
Hard to learnPoor errormanagement
Operating systems,Library informationretrieval systems
Naturallanguage
Accessible tocasual usersEasily extended
Requires more typingNatural languageunderstandingsystems are unreliable
Timetable systemsWWW informationretrieval systems
26 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Direct Manipulation: Example – PowerPoint
Open PowerPoint and study how objects can be GrownShrunkFlippedRotatedCopiedColored. . . .
Through direct manipulation using “tools”
27 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Menu Systems
Select from lists of possibilitiesPoint and click with mouseUse cursor keysType name of selectionTouchscreens
Usually integrate automated help facilitiesHelp cursorPop-ups ?
Pop-uptext
28 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Control Panel Interface
Title
Method
Type
Selection
NODE LINKS FONT LABEL EDIT
JSD. example
JSD
Network
Process
Units
Reduce
cm
Full
OUIT
Grid Busy
29 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Menu Systems: Benefits
Easy to learn – no memorizationReduced typing – faster data entryUser errors trapped by interfaceContext-dependent help
30 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Menu Systems: Problems
Best for small # of choicesMay have to provide sub-menus for
complex situationsAND and OR relations hard to representSlower than command language or keyboard
shortcutsSo provide those as options
31 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Form-Based Interface
Title
Author
Publisher
Edition
Classification
Date ofpurchase
ISBN
Price
Publicationdate
Number ofcopies
Loanstatus
Orderstatus
NEW BOOK
32 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Command Interfaces
User types commands to give instructions to system e.g. UNIX
May be implemented using cheap terminals.Easy to process using compiler techniquesCommands of arbitrary complexity can be
created by command combinationConcise interfaces requiring minimal typing
can be created
33 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Command Interfaces: Problems
Users have to learn and remember command language. Unsuitable for occasional/casual users
Need to be able to typeUsers make errors in commands
Need good error detection and recovery
34 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Natural Language Interfaces
User types command in natural language. Vocabulary usually limitedConfined to specific application domains;
e.g.,Timetable enquiriesMedical systems
Experienced users: too much typingSee ASK JEEVES
35 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Ask Jeeves
36 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Multiple UIs
Operating system
GUImanager
Graphical userinterface
Commandlanguage
interpreter
Commandlanguageinterface
37 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Topics
IntroductionUser-Interface Design PrinciplesUser Interaction Information PresentationUser Support
38 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Information Presentation
Information tobe displayed
Presentationsoftware
Display
{numeric, textual} X {static, dynamic}Information may be
39 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Information Display Factors
Questions to consider in designing interfaceIs user interested in precise information or
data relationships?How quickly do information values
change?Must change be indicated immediately?Must user take some action in response to
change?Is there a direct manipulation interface?Is information textual or numeric? Are relative values important?
40 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Data VisualizationConcerned with techniques for displaying large
amounts of informationVisualization can reveal relationships between
entities and trends in dataExamples of data visualization applications:
Weather information collected from number of sources
State of telephone network as linked set of nodes
Chemical plant visualized by showing pressures and temperatures in linked set of tanks and pipes
Model of molecule displayed in 3 dimensionsWeb pages displayed as hyperbolic tree
41 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Color Displays
Color adds extra dimension to interface and can help user understand complex information structures
Can be used to highlight exceptional eventsCommon mistakes in use of color in
interface design include:Use of color to communicate non-obvious
specific meaningE.g., red may mean “hot” to a chemist
but “forbidden” to a driverOver-use of color in display – confusing
42 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Guidelines for Effective Use of Color in DisplaysDon't use too many colors (max 4-5 in
window)Don’t use colors as simply as decorationChange of color must imply change of stateUse color coding to support tasksAllow users to control color codingDesign for monochrome then add colorUse color coding consistentlyAvoid color pairings which clashUse color change to show status changeBe aware that color displays usually lower
resolutionDon’t make large areas of screen BLINK
Can cause
seizures
43 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Topics
IntroductionUser-Interface Design PrinciplesUser Interaction Information PresentationUser Support
44 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
User Support
User guidance includesOn-line helpError messagesManualsTutorials
Integrate help with interface: context-sensitive
Integrate help and error messagesEasy to get explanation, tips, suggestions
Advanced help keeps user profile
45 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Help and Message System
Messagepresentation
system
Error messagetexts
Helpframes
Error messagesystem
Helpinterface
Application
46 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Error MessagesBad error messages can lead users to
reject entire systemConsider background and experience of users in
designing messagesMessages should be
PoliteConciseConsistentConstructive
Avoid classic errorsNever be rudeDon’t try to be funnyDon’t condescend to your users
47 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Design Factors in Message Wording
Context-sensitiveExperience – offer verbose / terse modesSkill level – offer beginners / expert modesStyle – positive, active (never rude, not funny)Culture – apply localization to avoid offending
people in different cultures
48 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
System and User-Oriented Error Messages
System-oriented messageUseful for technical staffDetail internal states of systemGood for diagnostics and repairUsually complete gibberish for users
User-oriented messageUseful for user to fix a problemReassuringGive instructions on whom to contact if
appropriate
49 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
A Friendly, Helpful Message System
Encourages more positive attitude towards the operating system, the computer and operations:
ENTER USER PASSWORD:vs
Please enter user password:
UNKNOWN SYNTAXvs
Pardon?
CAN'T INITIATE NEW SESSIONS NOWvs
System Alpha not yet available--try again later
50 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
A Friendly, Helpful Message System (cont'd)
If possible, show what can be done to fix problem Explain WHO can do WHAT to help user in trouble Include telephone numbers
OUT OF DISC SPACE (FSERR 46).vs
OUT OF DISC SPACE (FSERR 46).Check :FREE for free space
Verify :BUILD or :FILE commands for typing error;use 32 extents if possible; check device class;call Ramesh @ (514) 234-5678 X.216 for help
51 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Gives operators critical information fastEspecially important when user gets system
information
DCU LOGGING IN PROGRESS (THIS IS NORMAL)
MAKE LDEV 3 ONLINE RIGHT NOW: PRESS UNLOAD/LOAD
STREAMS FACILITY NOT ENABLED
Call operations for :STREAMS 10
A Friendly, Helpful Message System (cont'd)
52 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
Help System Design
Help? means ‘Help, I want information”Help! means “HELP. I'm in trouble”Both of these requirements have to be taken
into account in help system designDifferent facilities in help system may be
required
53 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
HOMEWORK
REQUIRED:By Friday 22 Oct 2004For 24 points,
16.3, 16.6, 16.7, 16.11 (@6)OPTIONAL:
By Monday 1 Nov 2004For up to 10 extra points, answer any or all
of the following questions:16.1 (@4), 16.2 (@2), 16.5 (@4)
54 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.
DISCUSSION