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

2. CS 8532: Adv. Software Eng. – Spring 2007 Dr. Hisham Haddad User Interface Design Highlights of user (human) interface design concepts and principles Chapter 12

3. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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)

4. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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.

5. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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 …

6. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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…).

7. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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).

8. CS 8532: Adv. Software Eng. – Spring 2007 Dr. Hisham Haddad 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 )

9. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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.

10. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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).

11. CS 8532: Adv. Software Eng. – Spring 2007 Dr. Hisham Haddad Design Process Iterative spiral process with four activities. 4 3 2 1

12. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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.

13. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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?

14. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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…

15. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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…)

16. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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)

17. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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)

18. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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)

19. CS 8532: Adv. Software Eng. – Spring 2007 Dr. Hisham Haddad 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.

20. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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…

21. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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)

22. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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

23. CS 8532: Adv. Software Eng. – Spring 2007 Dr. Hisham Haddad Design Evaluation Cycle

24. CS 8532: Adv. Software Eng. – Spring 2007 Dr. 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.

25. CS 8532: Adv. Software Eng. – Spring 2007 Dr. Hisham Haddad 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!