Freehand Interactive Design Offline (F.I.D.O.): A New Methodology for Participatory Design

Abstract

A method was developed that elicits users' feedback on an interface by presenting them with a toolbox of magnetic components (representing potential content for the interface) and having them "build" a design physically on a whiteboard. This method allows users to choose preferred content and arrange it in a way that matches their cognitive models and personal preferences.

Full text

Freehand Interactive Design Offline
(FIDO): A New Methodology for
Participatory Design
Donna Tedesco, Ann Chadwick-Dias, & Tom Tullis
Fidelity Investments
The Fidelity Center for Applied Technology
Human Interface Design
Donna Tedesco, Ann Chadwick-Dias, & Tom Tullis
Fidelity Investments
The Fidelity Center for Applied Technology
Human Interface Design

2
Conceptual Design
Logical framework of
categorized content
Info gathered from
contextual inquiries,
focus groups, card
sorts, design sessions,
etc.
Foundation for initial
wire-framing or
prototyping

3
Initial Stages of Prototypes

4
Initial Stages of Prototypes
Content is chosen and designed
Elicit impressions on initial design passes
Begin usability evaluations

5
The User “Gap”
It would be useful to allow users to participate in the
“gap” between conceptual requirements gathering &
prototyping stages
…A way for them to choose and manipulate some of the
product's content before it is a finalized design…
Conceptual Design Prototyping

6
Freehand Interactive Design Offline
Elicits feedback by giving users a specific toolbox of
tangible magnetic components
Users manipulating the components of a product, rather
than evaluating the whole
Can choose, arrange, and create components to design a
product of their personal preference
Concept that is adaptable to your own designing needs

7
The Origins of FIDO
Competitive Analysis
Narrowly focused: financial services homepages
What
elements
do users like, dislike, want, not
want on homepages?
Take all elements from 6 top homepages and
“build” their own ideal financial services page

8
The Origins of FIDO
Challenge of a computer-based exercise
Would be too cumbersome with 100 elements
Possibly anxiety-provoking for older users
The Solution: Magnetic elements
Plenty of space to work with
Fun and interactive, not intimidating
Upright, simulating computer display
Participants could add their own content

9
What We Did…
1. Preparation of Materials
1. Captured & Modified Content
2. Printed, Laminated, & Separated elements
3. Additional Preparations
2. Study Procedure
3. Data Collection
4. Data Analysis

10
Preparation of Materials
Captured and Modified Content
Took screenshots of all homepages
Took away all company name references
Gray-scaled pages

11
Preparation of Materials
Printed, Laminated, & Separated Elements
Sized proportionately
Printed on ink-jet Magnet Sheets
Laminated to prevent wear and smudging
Cut into individual elements– navigational bars,
graphs, logins, bricklets, footers, etc.

12
Preparation of Materials
Additional Preparations
Two magnetic whiteboards for content
One magnetic whiteboard for building homepage
with “simulated browser” window

13

14
Print-out of IE
browser frame
Browser mounted
onto card stock
Card stock
attached to
GBC bindings
Move frame up
and down to
simulate scrolling

15
Study Procedure
Participants told to build
their “ideal financial
services page”
Could use any elements
they wanted– as many or
few as they wanted from
each group
Cautioned away from
visually matching pieces
Debrief discussing why
elements chosen or not
chosen

16
Data Collection

17
Data Analysis
Analysis can vary widely depending on
goals, how FIDO is used
ANOVA conducted on each element to
reveal statistical differences between
groups, as well as on element groupings
Percentage of elements used from each
site (Chi-squared tests)

18
Data Analysis
Percentage of time participants chose
each piece (Chi-squared tests)
Yielded “Most popular elements” chosen
across all demographics
E.g. Homepage Login element chosen by
~71% of participants

19
Validation of Method
Used analysis of the most popular elements (across
all demographics) to create a new design.
New design was rated highest compared to all
other designs.
Overall Subjective Ratings
3.33
3.82
3.27
3.72
3.26
2.30
3.48 3.55 3.60 3.45
3.85 3.69 3.88
1.00
1.50
2.00
2.50
3.00
3.50
4.00
4.50
5.00
Site 1
Site 2
Site 3
Site 4
Site 5
Site 6
Site 7
Site 8
Site 9
Site 10
Site 11
Site 12
New Design
Site
Subjective Rating 1-6 (higher is better)

20
Other Possible Uses of FIDO…
One Website or app
with elements that
are chosen &
allocated across
pages or screens
ElementsScreens Trash

21
Other Possible Uses of FIDO…
One screen or page
as it is currently
designed could be
reworked– elements
moved, added &
subtracted

22
Other Possible Uses of FIDO…
Choose from a set of
different visual or
content
representations of
one type of element

23
Other Possible Uses of FIDO…
Users come up with some content from scratch
Focus groups to change or create a design as a
group
“Card sort” of content elements
Pseudo “Paper” prototyping
How else could it be used?

24
Considerations for Use
FIDO may not be a stand-alone method and
may be better as supplementary to other UCD
methods
Gathering feedback on how elements are
displayed does not imply usability
Be careful with experimental design and how
you instruct participants
Have fun with it!