cosc 3461: module 6 ui design in the workplace. 2 what is user-centered design? three major...
TRANSCRIPT
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
UserProfile
TaskAnalysis
PlatformCapabilities/Constraints
GeneralDesign
Principles
UsabilityGoals
StyleGuide
WorkRe-
engineering
ConceptualModel (CM)
Design
CMMockups
IterativeCM
Evaluation
EliminatedMajor Flaws?
Screen DesignStandards
(SDS)
SDSPrototyping
IterativeSDS
Evaluation
Met UsabilityGoals?
Detailed UserInterface
Design (DUID)
Met UsabilityGoals?
IterativeDUID
Evaluation
All FunctionalityAddressed?
No Yes
StyleGuide
No
StyleGuide
Yes
No
No
Yes
Requirements Analysis
Design, Testing, & Development
User-Centered Design Process
5
Requirements Analysis
UserProfile
TaskAnalysis
PlatformCapabilities
& Constraints
GeneralDesign
Principles
UsabilityGoals
StyleGuide
On toDesign/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
WorkRe-
engineering
ConceptualModel (CM)
Design
CMModels
Mockups
IterativeCM
Evaluation
EliminatedMajor Flaws?
Screen DesignStandards
(SDS)
SDSPrototyping
IterativeSDS
Evaluation
Met UsabilityGoals?
Detailed UserInterface
Design (DUID)
Met UsabilityGoals?
IterativeDUID
Evaluation
All FunctionalityProvided?
No Yes
StyleGuide
StyleGuide
Yes
No
RequirementsAnalysis
No
Yes
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
http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/569
Review
11
User’s Conceptual Model
http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/569
• 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
http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/569
Review
13http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/569
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
WorkRe-
engineering
ConceptualModel (CM)
Design
CMModels
Mockups
IterativeCM
Evaluation
EliminatedMajor Flaws?
Screen DesignStandards
(SDS)
SDSPrototyping
IterativeSDS
Evaluation
Met UsabilityGoals?
Detailed UserInterface
Design (DUID)
Met UsabilityGoals?
IterativeDUID
Evaluation
All FunctionalityProvided?
No Yes
StyleGuide
StyleGuide
Yes
No
RequirementsAnalysis
No
Yes
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
WorkRe-
engineering
ConceptualModel (CM)
Design
CMModels
Mockups
IterativeCM
Evaluation
EliminatedMajor Flaws?
Screen DesignStandards
(SDS)
SDSPrototyping
IterativeSDS
Evaluation
Met UsabilityGoals?
Detailed UserInterface
Design (DUID)
Met UsabilityGoals?
IterativeDUID
Evaluation
All FunctionalityProvided?
No Yes
StyleGuide
StyleGuide
Yes
No
RequirementsAnalysis
No
Yes
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 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 = 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
http://www.humanfactors.com/library/usabilityquiz.asp
Usability