SENG 310 - Lecture 7

25 January 2015

Contextual Design (Cont'd)

Overview

  • Contextual Inquiry
  • Work modelling
  • Consolidation
  • Work redesign
  • User environment design
  • Mock-up and test with customers
  • Putting into practice

Steps:

Contextual Inquiry

Talk to the customers while they work and observe the work while it happens to gather detailed design data

  • Understand the customers, their needs, desires and approach to their work context
  • Ongoing experience rather than summary experience
  • Concrete data as opposed to abstract data
  • Starts with one-on-one interviews in their workplace (as they work), followed by team interpretation sessions
  • Followed by “The Master/Apprentice Model”
  • Leading to a “partnership” relationship
  • Avoid other relationships, such as expert/novice, interviewer/interviewee, guest/host

The conventional interview:
Approx. 15 mins to do introductions, gain permissions and collect summary data on the domain

The transition:
State the new rules for the contextual interview
30 seconds well spent

The contextual interview:
Customer starts work task, you observe and interpret as an apprentice, asking questions
Copious notes should be taken
May have to tag along
Focus on tasks is crucial

The wrap-up:
Summarize and interpret (don’t repeat verbatim) your understanding, this gives the customer a chance to correct or add to your understanding (allow 15 mins)

Interview Interpretation:

  • Interpretation sessions let every team member experience all interviews
  • Different roles (everyone gets a job to keep them involved):
    • The interviewer
    • Work modellers (write while you listen)
    • The recorder (done online visible to all)
    • Participants (rest of the team, ask questions, listen, share their own insight)
    • The moderator (stage manager, keeps everyone busy and on topic)
    • The rat hole watcher (neutralizes people problems, keeps things on track, everyone can play this role)
  • Interpret interviews within 48 hours!

Work Modeling

Provide a concrete representation of the work of each customer interviewed.

  • Represent people’s work in diagrams
  • Work models provide a concrete representation of the work of each customer interviewed

Flow model:
Defines how work is broken up across people and how people coordinate to ensure the whole job gets done
Provides a bird’s eye view of the organization

Sequence model:
Work tasks are ordered, unfolding over time Need to understand the customer’s intent

Artifact model:
The things people create, use or modify in the course of doing work

Cultural model:
Expectations, desires, policies, values and the whole approach people take to their work

Physical model:
Organization of space, grouping of people, movement

Consolidation

Pull individual diagrams together to see the work of all customers (affinity diagrams)

  • Pull individual diagrams together to see the work of all customers
  • Design for the whole customer population
  • Done using an Affinity Diagram
    • a wall sized hierarchical diagram showing the scope of issues in the work domain
  • And through building Consolidated work models
    • showing the underlying pattern and structure of the work the design will address

Work redesign

Create a corporate response to the customers’ issues (improve work practices rather than provide technical solutions)

  • Team focuses on how to improve work practices rather than simply on deploying a new (or improved) technology
  • This may (and perhaps should) affect organizational structure and procedures, as well as drive system definition
  • Use of storyboards to show how work models are accounted for
User environment design

Shows how each part of the system supports the user’s work, exactly what functions are available in each part, and how they are connected to other parts of the system. But this structure should not be tied to any particular UI.

  • A floor plan which shows the parts of the system and how they are related to each other from the user’s point of view
  • Not tied to any particular UI
Mock-up and test with customers

Use paper based prototypes to support continuous iteration of the new system between the users and designers.

  • Use paper prototypes, supports more continuous iteration
  • Use it to test your ideas and iterate

Putting into practice

Tailor contextual design to your organization

  • CD will probably need to be tailored to each organization
  • Overcoming resistance

Prototyping

Allows team to elicit, clarify, validate, negotiate requirements, and choose between design alternatives. Checks feasibility with users and stakeholders, and allows them to contribute to design. Allows user to test ideas and usefulness of application.

Should prototype:

  • Work flow, task design
  • Screen layouts and information display
  • Difficult, controversial, critical areas

Low fidelity prototypes

paper prototypes, storyboards

  • Brainstorming can be done using cheap mock- ups of the interface (involving a number of common interface items such as icons, menus...)
  • Storyboards, flipbooks and videos are used to provide mock-ups of interactive sequences and actions
  • Design team can perform a cognitive walkthrough (i.e. they can imagine going through the same mental steps as a user would)

Advantages:

  • “quick and cheap” to prepare and modify
  • Can be used to brainstorm competing designs
  • Users can create and modify them

Disadvantages:

  • Tends to focus on high level concepts Hard to envision a dialog’s progression
  • Less compelling
  • Hard to detect errors

Paper-based prototypes

A paper mock-up of the interface look, feel and functionality:

  • Using sketches
  • Cardboard mockups

Storyboarding

  • A series of key frames are used to get the idea of a scene (idea originally from film)
  • Consists of sketched snapshots of the interface at particular points in the interaction
  • Users can evaluate quickly the direction the interface is heading
  • A flipbook can alternatively be created to give the effect of interactions with the interface
  • Card-based
    • Index cards
    • Each card represents one screen or part of a screen
    • Often used in website development

Pictive

"plastic interface for collaborative technology initiatives through video exploration”

  • Design is multiple layers of sticky notes and plastic overlays (can use stickies to represent icons, menus etc)
  • Interaction is demonstrated by manipulating notes
  • Session can be videotaped for later analysis or for showing to the users

Tutorial and Manuals

  • Write them in advance of the system
  • A tutorial provides step by step descriptions of interactions with the interface
  • Manual provides an in-depth technical description of the interface
  • May find errors with the system usability if you can’t easily explain how to do certain operations!

Medium fidelity prototypes

more interactive (may use real data)

Advantages:

  • More engaging for the end user, provides a limited scenario for the user to try out
  • Can test more subtle design issues

Disadvantages:

  • User’s reactions are usually “in the small”; blinds people to major design flaws
  • Management may think it is real
  • Users may be reluctant to challenge the design (as it appears to be so “final”)

Painting/Drawing packages

  • Draw each storyboard scene on a computer, easier to change
  • Very thin horizontal prototype
  • Does not capture the interaction feel
  • e.g., Illustrator

Scripted simulations and slide shows

  • Created with media tools
  • Scene transitions activated by simple user inputs
  • Appears like a real system, but users must follow a set script
  • e.g., HyperCard, Director, Powerpoint, HTML

Interface Builders

  • Tools for letting designers lay out common widgets, requires programming
  • Objects behave as they would under real situations
  • Good for showing look and feel
  • Can create a broader horizontal prototype, vertical functionality added selectively
  • e.g., Balsmiq, invision, UXPin, Frontify

High fidelity prototypes

interactive software prototypes, closer to finished product

  • Getting much closer to the final working system
  • Restricted functionality
  • Broad horizontal prototypes and deep vertical prototypes
  • May have incomplete functionality
  • May be a collection of predefined pages & links

Full prototype: contains complete functionality but with lower performance
Horizontal prototype: displays all or most of the application without going into any depth in any one part (useful for testing overall design concept)
Vertical prototype: carries the user deep into the behaviours of specific parts of the system (useful for testing new design concepts and technology)

Advantages:

  • Shows UI, layout, navigation, look and feel
  • Compelling

Disadvantages:

  • Finished looking product stifles feedback
  • Can’t be used early in design process

Choosing a Prototyping Approach

  • who will create the prototype?
  • how quickly do you want the prototype?
  • do you want to turn the prototype into the final product?
  • what are your software and hardware constraints?

Summary

  • Use rapid prototyping techniques
  • Low fidelity for early iterative design
  • High fidelity for more thorough testing of later designs
  • User testing is possible, even with paper prototypes

Assignments

None