Post on 02-Jan-2016
CS 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
Chapter 12
Class will
start momentarily.
Please Stand By …
CS 8532: Advanced Software Engineering
Dr. Hisham Haddad
CS 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
User Interface Design
Highlights of user (human) interface design concepts and principles
Chapter 12
CS 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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 graphical-based interfaces). (the focus of this chapter)
CS 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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 with studying potential users of the system.
Note 2: User interface design is part of the design phase, but also can be part of the requirements phase.
CS 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
The Golden Rules - 33. 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 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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. - remember the key elements to design - User Model (profile),
System Perception (end-user’s mental image), and System Image (presentation and support).
CS 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
Design Process
Iterative spiral process with four activities.
4
3 2
1
CS 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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 that is presented as part of the interface; and
- the environment in which these tasks will be conducted.
CS 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
User Analysis (1)
• 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 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
Task Analysis (1)
Answers the following 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 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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 figure 12.2, page 339, prescription refill work flow)
CS 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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 groups needs to have on the interface to do their
jobs)
CS 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
Interface Design Activity - 2Design 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 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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…
CS 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
Design Evaluation Cycle
preliminarydesign
buildprototype #1
interface
evaluationis studied by
designer
designmodifications
are made
buildprototype # n
interface
userevaluate'sinterface
Interface designis complete
CS 8532: Adv. Software Eng. – Spring 2007Dr. Hisham Haddad
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.