1 / 29

User-Centered Design Process: Creating Better User Interfaces

Learn the essential components of user-centered design process, including iterative design and early focus on users and tasks. Understand requirements analysis and the development of a comprehensive Style Guide. Explore the importance of user profiles, task analysis, and platform capabilities in designing successful user interfaces. Discover the iterative design stages like conceptual modeling, screen design standards, and usability testing to ensure meeting usability goals. Gain insights into reviewing the user's, designer's, and programmer's conceptual models for effective UI development.

susanwoods
Download Presentation

User-Centered Design Process: Creating Better User Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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. User-Centered Design Process Requirements Analysis Design, Testing, & Development

  5. Requirements Analysis General DesignPrinciples Platform Capabilities & Constraints User Profile Task Analysis Usability Goals StyleGuide 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. Iterative Design No Yes Yes Yes No No Requirements Analysis Work Re- engineering Screen Design Standards (SDS) Detailed User Interface Design (DUID) Conceptual Model (CM) Design SDS Prototyping Style Guide Style Guide Iterative DUID Evaluation CM Models Mockups Iterative SDS Evaluation Iterative CM Evaluation Met Usability Goals? Met Usability Goals? No Eliminated Major Flaws? All Functionality Provided?

  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 Review • Recall that the User’s Conceptual Model might differ from: • Designer’s Model • Programmer's Model http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/569

  11. User’s Conceptual Model Review • 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 http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/569

  12. Designer’s Model Review • 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 http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/569

  13. Programmer’s Model Review • 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 http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/569

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

  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. Iterative Design No Yes Yes Yes No No Requirements Analysis Work Re- engineering Screen Design Standards (SDS) Detailed User Interface Design (DUID) Conceptual Model (CM) Design SDS Prototyping Style Guide Style Guide Iterative DUID Evaluation CM Models Mockups Iterative SDS Evaluation Iterative CM Evaluation Met Usability Goals? Met Usability Goals? No Eliminated Major Flaws? All Functionality Provided?

  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 andDocumentation 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 2000-2001, 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 Benefits • 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

  29. Usability • 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 http://www.humanfactors.com/library/usabilityquiz.asp

More Related