Chapter 12 CS 8532: Advanced Software Engineering Dr. Hisham Haddad

1. Chapter 12 CS 8532: Advanced Software Engineering Dr. Hisham Haddad • Class • will • start • momentarily. • Please Stand By …

2. User Interface Design Highlights of user (human) interface design concepts and principles Chapter 12

3. 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. 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. 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. 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. The Golden Rules - 2 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 )

8. The Golden Rules - 3 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).

9. 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. 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. 1 4 2 3 Design Process Iterative spiral process with four activities.

12. 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. 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. 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. 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. 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. 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. Interface Design Activity - 1 - For each usage scenario, pars its description and identify interface objects and their actions. - Select proper GUI 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. Interface Design Activity - 2 Design issues to be considered: • Response time: primary concern of end-user. • 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. 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. 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

22. Design Evaluation Cycle

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

24. 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!