CS 8532: Adv. Software Eng. – Spring 2007 Dr. Hisham Haddad Chapter 12 Class will start momentarily. Please Stand By … CS 8532: Advanced Software Engineering

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


User Interface Design

Highlights of user (human) interface design concepts and principles

Chapter 12


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)


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.


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 …


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…).


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).


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 )


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.


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).


Design Process

Iterative spiral process with four activities.

4

3 2

1


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.


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?


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…


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…)


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)


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)


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)


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.


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…


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)


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


Design Evaluation Cycle

preliminarydesign

buildprototype #1

interface

evaluationis studied by

designer

designmodifications

are made

buildprototype # n

interface

userevaluate'sinterface

Interface designis complete


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.


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!

Documents

CS 8532: Adv. Software Eng. – Spring 2007 Dr. Hisham Haddad Chapter 12 Class will start momentarily. Please Stand By … CS 8532: Advanced Software Engineering