COSC 3461: Module 6 UI Design in the Workplace

2 What is User-Centered Design? Three major components: –Iterative design –Early focus on users and tasks –Empirical measurement In practice, software development often involves incremental changes rather than the creation of an entirely new product Variety of process models in use, will now show one of them

3 User-Centered Design Process Requirements analysis performed before iterative design Reference: Mayhew, Deborah J. (1999) The Usability Engineering Lifecycle

4 Requirements Analysis Design, Testing, & Development User-Centered Design Process

5 Requirements Analysis User Profile Task Analysis Platform Capabilities & Constraints General Design Principles Usability Goals Style Guide On to Design/Testing/Development

6 Requirements Analysis Goal is to produce Style Guide –Contains full documentation of the analysis of requirements –Will include a specification of the Usability Goals Description of minimal acceptable user performance Definition of the criteria for determining whether the goals have been satisfied

7 Requirements Analysis Relevant Factors: –User User Profile: A description of the specific user characteristics relevant to UI design. –Task Contextual Task Analysis: A study of user’s current tasks, work-flow patterns. –Environment Platform Capabilities & Constraints: The available hardware, operating system, toolkits.

8 No Iterative Design Work Re- engineering Conceptual Model (CM) Design CM Models Mockups Iterative CM Evaluation Eliminated Major Flaws? Screen Design Standards (SDS) SDS Prototyping Iterative SDS Evaluation Met Usability Goals? Detailed User Interface Design (DUID) Met Usability Goals? Iterative DUID Evaluation All Functionality Provided? NoYes Style Guide Style Guide Yes No Requirements Analysis NoYes

9 Design/Testing/Development Work Reengineering : User task redesign, reorganization of functionality, and work-flow design. No user interface design in this step Conceptual Model Design : Based upon previous tasks, high-level design alternatives are generated. Conceptual Model Mockups : Generate low-fidelity mock-ups for selected subsets of product functionality. Iterative Conceptual Model Evaluation : Low-fidelity user testing with redesign & reevaluate iterations.

10 User’s Conceptual Model Recall that the User’s Conceptual Model might differ from: –Designer’s Model –Programmer's Model Review

11 User’s Conceptual Model The user creates a mental model as he or she interacts with the system –hypothesize rules and perceive patterns in order to explain the situation –operation typically understood in terms of roles and relationships they already understand (metaphors) –not necessarily conscious Review

12 Designer’s Model Model of the interface components, behavior and interrelationships –Which components will be visible to users? –How will users make use of them to accomplish their tasks? –Appearance and behaviour of components intended to influence user's conceptual model Designer needs an understanding of user’s conceptual model Review

13 Programmer’s Model Includes internal system components and other implementation details and that implement the designer's model. –E.g., a directory object that consists of people's names, addresses, office numbers, etc Implementation details from the programmer’s model: –should not be evident in the designer's model –transparent to users Review

14 No Iterative Design Work Re- engineering Conceptual Model (CM) Design CM Models Mockups Iterative CM Evaluation Eliminated Major Flaws? Screen Design Standards (SDS) SDS Prototyping Iterative SDS Evaluation Met Usability Goals? Detailed User Interface Design (DUID) Met Usability Goals? Iterative DUID Evaluation All Functionality Provided? NoYes Style Guide Style Guide Yes No Requirements Analysis NoYes

15 Design/Testing/Development Screen Design Standards : Development of a set of product-specific standards and conventions for all aspects of detailed screen design. Screen Design Standards Prototyping : Implement a running prototype for selected subsets of product functionality based on the Screen Design Standards. Iterative Screen Design Standards Evaluation : Formal usability testing with redesign/reevaluate iterations until all major usability bugs are eliminated and usability goals seem within reach.

16 No Iterative Design Work Re- engineering Conceptual Model (CM) Design CM Models Mockups Iterative CM Evaluation Eliminated Major Flaws? Screen Design Standards (SDS) SDS Prototyping Iterative SDS Evaluation Met Usability Goals? Detailed User Interface Design (DUID) Met Usability Goals? Iterative DUID Evaluation All Functionality Provided? NoYes Style Guide Style Guide Yes No Requirements Analysis NoYes

17 Design/Testing/Development Detailed User Interface Design : Detailed design of the complete product user interface based on Conceptual Model and Screen Design Standards detailed in the Style Guide. Iterative Detailed User Interface Design Evaluation : Formal usability testing conducted during product development to include unassessed subsets of functionality and categories of users.

18 Roles in User-Centered Design Graphic Design GUI Programming and Software Development UI Design Usability Testing Technical Writing and Documentation Preparation Marketing Adapted from Johnson, J. (2000) GUI Bloopers, p.419

19 Graphic Design How to make best use of the available display medium? –Visual consistency –Layout Development of graphics, images, symbols, textual elements –recognizablity –intuitiveness –aesthetic appeal

20 GUI Programming Programming, implementation, development of internal architecture Applying knowledge of GUI toolkit Maximizing performance –response time/latency/lag, computational resources Identification of technical constraints on implementation

21 UI Design Task analysis, conceptual design Assessing conformance to usability standards

22 UI Design – Examples Reduce the number of commands in an application Flatten its menu hierarchy Decrease the number of windows Elimination of mouse actions (and input actions, more generally) Enforce consistency –E.g., menu commands Improve feedback –E.g., improve error messages

23 Usability Testing Ability to recruit participants, users Usability evaluation, usability testing Knowledge of “thinking aloud” protocol Conduct surveys, interviews, observational studies

24 Technical Writing Ability to develop customer/market driven documentation Screen readability and organization Strong writing skills, ability to convey highly technical information clearly Variety of presentation methodologies

25 Marketing Knowledge of customer (vs. user!) Economic Trend Analysis Product and Service Analysis Market Potential Analysis Knowledge of Packaging, Pricing, Distribution, Advertising, Promotion, Publicity

26 Application of User-Centered Design For consumer products –previously, little to no user-centered design –value of this paradigm increasingly recognized, but not always E.g., During , Nortel laid off every human factors professional in its organization.

27 Why User-Centered Design is not used… Short-term expense –UI work during the product cycle is often not conducted to cut costs –short-term savings do not translate to overall savings much greater costs in terms of higher customer support slower market acceptance lower consumer satisfaction. Time –Delay in market entry –Emphasis on being first to market E.g., Newton, Palm Pilot Lack of management buy-in

28 Bottom line = profit -- Decreased customer support costs Better product –User-Centered Design results in more competitive products/services –More follow-on due to satisfied customers Bottom-line Benefits

29 Factors that contribute to the development of usable software: –An understanding of user needs –User interface design standards –Early usability testing –Management buy-in to user-centered design Usability