Human Computer
Interaction
Envisioning Solutions
Sadaf Anwar
[email protected]
Department of Software Engineering
IN TODAY’S LECTURE …
• Requirements
• Significance of requirements
• Narratives
• Envisioning solutions
GOAL-DIRECTED DESIGN
PROCESS
Research Modeling Requirements Framework Refinement
User and the Users and Definition of user, Definition of design Of behavior, form&
domain use context business& technical needs structure & flow content
SIGNIFICANCE OF
REQUIREMENTS
CUMULATIVE EFFECT OF
REQUIREMENTS
Missing/deficient
requirement
Missing/deficient
design
Missing/deficient
user interface
implementation
PROGRAMMER’S INSTINCTS
• code first, document later
• First high-level feel for system, then go into interaction
details
NARRATIVE AS DESIGN
TOOL
NARRATIVE
• Glue for holding design processes together
• A.k.a. storytelling
• Good for representing interaction concepts
SCENARIOS
• An “informal narrative description”
• Describes human activities or tasks in a story
• Does not explicitly describe the use of software or
technological support to perform a task
• A method of design problem solving by concretization
• Making use of a specific story to both construct and illustrate
design solutions
PERSONAS-BASED
SCENARIOS
• Concise narrative descriptions of one or more persons
using a product
• Constructed using goals
• Scenario content gathered during research and analyzed
during modeling
• Personas and scenarios test validity of design ideas
• Types of persona-based scenarios
• Context scenarios
• Key path scenarios
• Validation scenarios
ENVISIONING SOLUTIONS WITH
PERSONA-BASED DESIGN
DEFINING REQUIREMENTS
1. Creating problem and vision statements
2. Brainstorming
3. Identifying persona expectations
4. Constructing the context scenario
5. Identifying needs
CREATING PROBLEM AND VISION
STATEMENTS
• Need mandate to move forward
• Help build team consensus
• Should be based on research and user models
2. BRAINSTORMING
• Get design ideas out of head arising during research
phase
• Record them for later use
• Should unconstrained and uncritical
• Few hours
3. IDENTIFYING PERSONA
EXPECTATIONS
• Persona expectations and context of use make up a
persona’s mental model of the product
• Identify for each primary persona:
• General expectations and desires from product
• Behaviors expected from product
• Factors (attitudes, past experiences, aspirations, social,
cultural, environmental, cognitive) influencing these desires
• Also look for:
• What subjects are mentioned?
• Which action words (verbs) do they use?
• Which intermediate steps, tasks, or objects in a process don’t
they mention?
4. CONSTRUCTING CONTEXT
SCENARIOS
• Most story-like of all scenarios
• Describe broad context in which usage patterns are exhibited
• Consist of textual narrative
• Describe behaviors, not form, of system
• ‘day-in-the-life’ scenarios
• Address questions
• What setting will the product be used in?
• Will it be used for extended amounts of time?
• Is persona frequently interrupted?
• What other products is it used with?
• How much complexity is permissible?
• What primary activities does the persona need to accomplish to meet her goals?
• What is the expected end result of using the product?
5. IDENTIFYING NEEDS
• Extract persona’s needs
• Needs consist of objects and actions
• Needs
• Imply objects need to exist, and certain actions must be performed on them by the user in a context
• E.g., Call (action) a person (object) directly from an appointment (context)
• Tasks
• Tasks manually performed by user
• Data needs
• Objects and information to be represented in system
• Functional needs
• Operations that need to be performed on objects of the system
• Contextual needs
• Related objects and controls
• Other requirements
• Business, technical, customer, partner
OUTCOME OF NARRATIVE
a) Storytelling
b) User stories
c) Storyboarding
WHY NARRATIVE IS IMPORTANT?
STORYTELLING AND
STORYBOARDING IN UX DESIGN
YOUR TASK
user stories vs storytelling vs storyboarding
IN TODAY’S LECTURE …
• What is a prototype?
• Prototyping techniques
• Low fidelity
• High fidelity
WHY PROTOTYPE?
• Step 1: creating mockups
• paper and digital low-fidelity prototypes
• high-fidelity prototypes
• Step 2: testing mockups
• Heuristic evaluation (refers to the entire system)
• Cognitive walkthrough (refers to a specific task)
• Thinking aloud (refers to entire systems & specific
task)
VERY LOW-FIDELITY PROTOTYPE …
LOW-FIDELITY PROTOTYPE …
LOW-FIDELITY PROTOTYPES
• very coarse-grained(not a fine structure)
• fuzzy layouts of general system
requirements
• paper-based and digital
• sketching
• screen mockups
• storyboards
• used to gather feedback on the
basic functionality or visual
layout
PAPER
PROTOTYPES
• Sketches and screen mock-ups
• quick to build
• easy to run
• Storyboards
• sequence of screens focusing on a user action
• don’t capture every detail, just systems’ major
functionality
• could be limited in scope, more rigidly linear
• Users love paper prototypes
• opportunity to contribute to the new design
Paper
Prototypes
MEDIUM-FIDELITY PROTOTYPE …
Mockup Review Form (1/2)
Mockup Review Form (2/2)
Advantages and Disadvantages of
Low-Fidelity Prototypes
HIGH-FIDELITY PROTOTYPE …
HIGH-FIDELITY PROTOTYPES
• fine-grained
• highly elaborate and polished digital
versions of the system
• used to gather detailed information on the
processes involved in traversing several
parts of the system, or a subset of tasks
Advantages and Disadvantages
of
High-Fidelity
Prototypes
UI PROTOTYPING TOOLS
• Low Fidelity
• Paper Prototyping
• Balsamic Mockups & iMockups
• High Fidelity
• Axure Pro 6
• Microsoft Expression Blend
• 10 upcoming Google Projects
• https://www.youtube.com/watch?v=oxYhGVHihnA
• Video Link
