CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Chapter 12
User Interface Design
Highlights of user (human) interface design
concepts and principles
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
User Interface Design
Highlights of user (human) interface design
concepts and principles
Chapter 12
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Software Interfaces
Possible Interfaces:
- between the components of the software (collaboration
interfaces).
- between the software and other software systems (integration
interfaces).
- between the software and external entities/devices (data
gathering and data processing devices).
- between the software and the human users (mostly graphicalbased interfaces). (the focus of this chapter)
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Interface Design Goal
Goal: User Interface that facilitates effective system usage and
and help users (human users) perform their jobs efficiently.
How?
- Make it easy to learn
- Make it easy to use (navigate)
- Make it easy to understand
Note 1: User interface has more to do
with studying potential end users.
Note 2: User interface design is part
of the design phase.
Q: Have you experienced a bad interface?
What was wrong with it?
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Common Design Errors
-
Lack of user control
Lack of consistency among parts of the interface
Too much to memorize
Lack of help and guidance
Lack of detailed response from
the system
- Unfriendly and mysterious
(hidden parts)
- Not context sensitive (type of
screen, icons, color theme, etc..)
- Others …
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
The Golden Rules - 1
1. Place the user in control of the system:
Few Principles:
- Define interaction modes (system states) in a way that does not
force a user into unnecessary or undesired actions.
(e.g., spell check example, payment-page example, etc…)
- Provide for flexible interaction alternatives (keyboard, mouse,
touchpad, pen, voice , etc…).
- Allow user interaction to be interruptible and undoable.
- Streamline (recurring) interaction as skill levels advance and allow
the interaction to be customized (macros, options, templates).
- Hide technical internals from the casual user (e.g., OS commands).
- Design for direct interaction with objects on the screen similar to
working with real-world objects. (e.g., re-size an icon, box, etc…).
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
The Golden Rules - 2
2. Reduce the user’s memory load:
Few Principles:
- Reduce demand on short-term memory (the need to remember
past interactions and results).
- Establish meaningful defaults and a “reset” option to restore
original defaults.
- Define intuitive, easy to find, and easy to remember shortcuts
(e.g., alt-Key functions, right-click menu options).
- The visual layout should be based on a real world metaphor
(e.g., checkbook, invoice format, report, etc..).
- Disclose information in a progressive fashion (command
hierarchy and levels of details) (e.g., submenu system).
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
The Golden Rules - 3
3. Make the Interface consistent:
- organization of visual information on screens
- input mechanisms (should be limited to few)
- navigation among users tasks
Few Principles:
- Allow the user to put the current task into a meaningful context.
(Indicators for current context and exit (go back) alternatives)
- Maintain consistency across a family of applications.
(Apply same design rules to related applications)
- Don’t change past interactive models accepted by the user.
(e.g., alt-key commands, input mechanisms, menus and options )
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
User Interface Design Models
Design models are perceptions of the interface:
- User model: Profile of the end-users of the system (age, gender,
abilities, education, background, etc..)
- System perception: The end-user’s mental image of what the
interface is. User experience influences perception accuracy.
- System image: The presentation (look and feel of the interface)
and support (manuals, tapes, help files, etc…)
Goal: Know the users and know their tasks.
Note: The interface designer brings these perceptions together.
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Therefore…
- be aware of the the importance of the Interface of a software
system,
- the goal for designing is a successful user interface,
- know the importance of understanding the end users and their
expectations of the interface,
- be aware of the common errors in interface design,
- remember the golden rules for interface design, and
- remember the key elements to design - User Model (profile),
System Perception (end-user’s mental image), and System
Image (presentation and support).
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Design Process
Iterative spiral process with four activities.
4
3
1
2
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Interface Analysis
Interface analysis means understanding
- the end-user (people) who will interact with the system through
the interface;
- the tasks that end-users must perform to do their work;
- the content (and its format) that is presented as part of the
interface; and
- the work environment (physical factors) in which these tasks will
be conducted.
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
User Analysis (1)
Suggested questions:
• Are users trained professionals, technician, clerical, or
manufacturing workers?
• What level of formal education does the average user have?
• Are the users capable of learning from written materials or have
they expressed a desire for classroom training?
• Are users expert typists or keyboard phobic?
• What is the age range of the user community?
• Will the users be represented predominately by one gender?
• How are users compensated for the work they perform?
• Do users work normal office hours or do they work until the job
is done?
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
User Analysis (2)
• Is the software to be an integral part of the work users do or will
it be used only occasionally?
• What is the primary spoken language among users?
• What are the consequences if a user makes a mistake using
the system?
• Are users experts in the subject matter that is addressed by the
system?
• Do users want to know about the technology that sits behind
the interface?
• Other questions…
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Task Analysis (1)
Suggested questions:
- What work will the user perform in specific circumstances?
- What tasks and subtasks will be performed as the user does the
work?
- What specific problem domain objects will the user manipulate
as work is performed?
- What is the sequence of work tasks - the workflow?
- What is the hierarchy of tasks?
- What environmental “physical” factors to consider? (location,
user position, HW space, light, noise, weather, etc…)
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Task Analysis (2)
Note that
- Use-cases define basic interaction with the software.
- Object elaboration identifies interface objects (classes).
- Workflow analysis defines how a work process is completed
when several people (and roles) are involved.
(see swimlane diagram, figure 12.2, page 339, prescription refill
work flow)
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Therefore,
- Build user profiles (background and skill level)
- Create user groups based on skills and knowledge
(novice, knowledgeable, and expert)
- Understand the tasks of each group (usage scenarios)
(how they will use the system)
- Consider environmental “physical” factors
(location, user position, HW space, light, noise, weather, etc…)
- Define each group’s interface requirements
(what each group needs to have on the interface to do their jobs)
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Interface Design Activity - 1
- For each usage scenario, pars its description and identify
interface objects and their actions (icons needed on the screen
and how they are used - drag/drop, click, slide, etc…).
- Perform object layout on screen (object position, window title,
description text, etc…)
See SafeHome example.
- usage scenario
- user tasks
- objects and actions for each task
- screen layout of objects (figure 12.3, page 344)
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Interface Design Activity - 2
Design issues to be considered:
- Response time: primary concern of end-user.
- Response variability (to establish interaction rhythm).
- User help facilities: integrated (context sensitive) or add-on (on-line
manuals)?
- Error handling: simple, constructive, noticeable, hint-full, and
non-judgmental (see page 347 - error message characteristics)
- Menu and command labeling: meaningful labels, easy to
remember and navigate, and control key (see page 347)
- Application accessibility: address hearing, visual, mobility, and
speech needs.
- Internationalization: Ability to customize the interface for other
languages and countries.
Make a checklist of such issues.
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Interface Design Patterns
Patterns are available for
-
Complete UI
Page layout
Forms and input
Tables
Direct data manipulation
Navigation
Searching
Page elements
e-Commerce
Others…
See information box page 344.
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Interface Construction Activity
- Interface implementation is iterative process.
- Implement initial prototype of the interface for user evaluation
and feedback.
- Refine the prototype based on feedback (evaluation step next)
- Variety of interface design and prototyping tools are available
(User-Interface Toolkits or User-Interface Development
Systems) (see software tools box, page 348)
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Interface Design Evaluation Activity
- Interface design evaluation is iterative process.
- Obtain user feedback. Possible feedback forms include
-
direct comments
questionnaires (qualitative or quantitative data)
rating forms
check lists
observing and noting user interactions
- Refine the design and prototype based on feedback
CS 3610: Software Engineering – Fall 2009
Design
Evaluation
Cycle
Dr. Hisham Haddad – CSIS Dept.
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
In Summary…
- User Interface is important part of the software system. It
makes user’s first impression of the system and possibly its
quality!
- Badly designed interface may cause a well-design software to
fail (poor utilization).
- Apply the golden rules (make the user in control, reduce
memory load, maintain consistency).
- Interface design is iterative process based on user feedback
and good understanding of the user’s expectations and tasks.
- Utilize interface design and prototyping tools.
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Suggested Problems
Consider working the following problems from chapter 12,
page 352:
1, 2, 3, 4, 7, and 12.
NO submission is required. Work them for yourself!
CS 3610: Software Engineering – Fall 2009
Dr. Hisham Haddad – CSIS Dept.
Last Slide
End of Chapter 12