May 22, 2007 Mohamad Eid Design Chapter 6
Dec 30, 2015
May 22, 2007 Mohamad Eid
Outline
Technology Myopia Conceptual Design Physical Design Evaluation Physical Design Cont. Interface Design Standards Case Study: Olympic Messaging
System (OMS)
May 22, 2007 Mohamad Eid
Technology Myopia
Interaction designs must be sensitive to: Human-human communication Implicit Knowledge Non-technical aspects of work
Integrate technology and human activities carefully
May 22, 2007 Mohamad Eid
Conceptual Design
Conceptual design involves Structuring the information space Creating of alternative solutions Determining which design concept to pursue
May 22, 2007 Mohamad Eid
Conceptual Design
The tools involved in conceptual design: Brainstorming Card sort Semantic networks Personas Scenarios Flowcharts Cognitive walkthroughs Use cases
May 22, 2007 Mohamad Eid
Conceptual Design - Brainstorming
Team activity Stream-of-consciousness Semantic networks Storyboarding
Brainstorming sessions generate a lot of material that must be filtered and organized
May 22, 2007 Mohamad Eid
Conceptual Design – Card Sort
Card Sorting can be used to discover user-centered groupings
Card sorting can be used to organize the information collected in the discovery phase
Used to define groupings for menus, controls and Web page content
Used to generate labels for menus, buttons and navigation links
May 22, 2007 Mohamad Eid
Conceptual Design – Card Sort
Advantages of card sorting sessions: They are quick and easy to perform. They can be done before any preliminary designs
have been made. They will let you know how people organize
information. They will expose underlying structures.
May 22, 2007 Mohamad Eid
Conceptual Design – Card Sort
Disadvantages of card sorting sessions: They only involve the elements that you have
written on the cards. They suggest solutions that imply structures. They become difficult to navigate with more
categories.
May 22, 2007 Mohamad Eid
Conceptual Design – Semantic Network
A semantic network is a web of concepts that are linked through association.
May 22, 2007 Mohamad Eid
Conceptual Design – Semantic Network
Advantages of semantic networks: They allow an easy way to explore the problem
space. They provide a way to create clusters of related
elements. They provide a graphical view of the problem space. They resonate with the ways in which people process
information.
May 22, 2007 Mohamad Eid
Conceptual Design – Semantic Network
Disadvantages of semantic networks: They require knowledge of the problem space. They can lead beyond the problem space. There is no formal semantics for defining symbol
meaning.
May 22, 2007 Mohamad Eid
Conceptual Design – Personas
Personas are archetypes of actual users, defined by the user’s goals and attributes.
“Personas are derived from patterns observed during interviews with and observations of users and potential user (and sometimes customers) of a product” (Cooper&Reimann, 2003, 67)
May 22, 2007 Mohamad Eid
Conceptual Design – Personas
A persona is created by identifying the primary stakeholder and creating an identity based on the stakeholder profiles and other collection activities such as interviews and surveys.
A persona is a detailed description complete with as many personally identifying attributes as necessary to make it come to life.
May 22, 2007 Mohamad Eid
Conceptual Design – Personas
Personas should be a strict reflection of the information derived from the collection activities.
If you cannot point to a direct one-to-one relation with an observed user behavior, then that particular persona characteristic is either unnecessary or, more important, erroneous and will lead to incorrect design decisions.
May 22, 2007 Mohamad Eid
Conceptual Design – Personas
Advantages of personas: They are quick and easy to create. They provide a consistent model for all team members. They are easy to use with other design methods. They make the user real in the mind of the designer.
Disadvantages of personas: They can be difficult to create if the target audience is
international. Having too many personas will make the work difficult. There is a risk of incorporating unsupported designer
assumptions.
May 22, 2007 Mohamad Eid
Conceptual Design – Scenarios, Flowcharts, and Cognitive Walkthroughs
Scenarios A description of a typical task It describes
The basic goal The conditions that exist at the beginning of the task The activities in which the persona will engage The outcomes of those activities
Scenarios afford a rich picture of the user’s tasks
May 22, 2007 Mohamad Eid
Conceptual Design – Scenarios, Flowcharts, and Cognitive Walkthroughs
Flowcharts can be: Simple network diagrams that identify the pages of a Web
site and the navigational links between them Sophisticated diagrams that capture conditional junctures
and computational processes
May 22, 2007 Mohamad Eid
Conceptual Design – Scenarios, Flowcharts, and Cognitive Walkthroughs
Cognitive walkthrough - the evaluator follows the various scenarios using the flowcharts or the low-fidelity prototypes
The evaluator takes the part of the primary stakeholder and tries to accomplish that stakeholder’s various tasks
May 22, 2007 Mohamad Eid
Physical Design
The physical design involves: What it will look like What components it will require How the screens will be laid out
We use the following tools during this phase: Low-fidelity prototypes Evaluations Wireframes Functional prototypes
May 22, 2007 Mohamad Eid
Physical Design - Low-fidelity prototypes
Nielsen distinguishes between two types of prototypes Horizontal Vertical
May 22, 2007 Mohamad Eid
Physical Design - Low-fidelity prototypes
The three main criteria for low-fidelity prototypes: Easy and inexpensive to make. Flexible enough to be constantly changed and rearranged. Complete enough to yield useful feedback about specific
design questions.
May 22, 2007 Mohamad Eid
Physical Design - Low-fidelity prototypes
People are more comfortable criticizing paper prototypes
You will have to make some decisions before you begin: What feedback do you need at this point in the design process? How much of the design should you prototype? Should you cover all of the areas but without great detail
(breadth vs. depth)? Should you cover one area in great detail?
These questions will help you to define the scope of the prototype and focus on what you want to accomplish
May 22, 2007 Mohamad Eid
Physical Design - Low-fidelity prototypes
Advantages of paper prototypes: They can be used early and often. They are inexpensive and easy to create. They make design ideas visual. No special knowledge is required; all team members can
create them.
Disadvantage of paper prototypes: They are not interactive. They cannot be used to calculate response timings. They do not deal with interface issues such as color or font
size.
May 22, 2007 Mohamad Eid
Physical Design Cont. - Wireframes
Wireframes define: Basic page layout Screen components
Wireframes are developed from flowcharts and paper prototypes
They are basically more evolved paper prototypes
that include detailed information about the interface elements
May 22, 2007 Mohamad Eid
Physical Design Cont. - Wireframes
Wireframes help to create template layouts that can be used to impose a consistent structure throughout the interface
May 22, 2007 Mohamad Eid
Physical Design Cont. – Wireframes
Web Formats Web sites from different domains use layouts
particular to that domain
Use page layouts that are common to the domain
Use flexible design for Web pages
May 22, 2007 Mohamad Eid
Evaluation – Functional Prototypes
Functional prototypes are interactive prototypes that represent various degrees of functionality They can either be horizontal or vertical
Functioning prototypes can be created using RAD environments, such as: Microsoft Visual Studio Adobe
Flash Dreamweaver Director
May 22, 2007 Mohamad Eid
Interface Design Standards
These tools promote standards-based designs that have a consistent look and feel Graphical libraries User interface toolkits Visual interface builders Web development tools
Working in a standardized environment increases efficiency and promotes learning (Cooper & Reimann, 2003)
May 22, 2007 Mohamad Eid
Interface Design Standards
Shneiderman and Plaisant (2005, 185) identified the following benefits from the use of high-level software tools
User Interface Independence They separate interface design from internals. They enable multiple user interface strategies. They enable multiple-platform support. The establish the role of the user interface architect. They enforce standards.
Methodology and Notation They facilitate the development of design procedures. They help in finding ways to talk about design. They create project management.
May 22, 2007 Mohamad Eid
Interface Design Standards
Rapid Prototyping The make it possible to try out ideas very early. They make it possible to test, revise, test, revise, . . . . They engage end users—managers and customers.
Software Support They increase productivity. They offer constraint and consistency checks. They facilitate team approaches. They ease maintenance.
May 22, 2007 Mohamad Eid
Case Study: Olympic Messaging System (OMS)
Developed by Gould for the 1984 Los Angeles Olympics Led to the recognition of the term ‘user-centered design’Objective:
Develop a system to allow communication among thousands of people during the Olympics
Assumptions:Telephones will not work as people are constantly moving
and participating in eventsNon-computer usersTo be used by over 20 000 people from kiosks
May 22, 2007 Mohamad Eid
Case Study: Olympic Messaging System (OMS)
Some of the techniques used:1. Initial analysis, interviewing, site visits etc.2. Usage scenarios prepared
Commented on by many people Result: Changes made and some functions dropped
3. User guide prepared Modified 200 times before final version decided
4. Simulations constructed and evaluated Primary purpose: Designing help messages Result: Discovered need for consistent ‘undo’ and ‘go back’ functionality
5. Prototype constructed Result: Many more iterations
6. ‘Hallway’ method Soliciting opinions of passers-by
7. ‘Try-to-destroy-it’ method Hire hackers to try and break it
May 22, 2007 Mohamad Eid
Case Study: Olympic Messaging System (OMS)
Conclusions:1. Focus on users and their tasks early, and keep them
central
2. Measure reactions using prototype manuals and systems
3. Design iteratively because even highly-skilled designers get it wrong
4. Usability factors must evolve together and be under the control of one group
5. The extra work of user-centered design greatly reduces work later on