Download - Bringing Your Wireframe to Life
Bringing Your Wireframe to LifeA case study using a high-fidelity wireframe to test a
mobile website
Brandon Kopp
User Focus 2014October 17th, 2014
The Consumer Expenditure Diary Survey
Captures all expenditures made by a household, with an emphasis on hard-to-remember expenses (e.g., groceries)
Requires a high level of detail
Currently done at the household level for two, 1-week periods
BLS is exploring the possibility of each household member (15+) entering their own expenditures for one week
2
The Consumer Expenditure Survey Mobile Diary
Already paper and prototype, desktop Internet versions of the diary
Allow respondents to enter information about their purchases on-the-go
Set out to create:
A mobile-optimized website, Not an App
Works across OS’s and devices
Simple and user-friendly
3
Timeline
4
Draft Design Complete
Test Version Release
Outline
I will focus on the wireframe testing
The range of options for early stage usability testing
How the high-fidelity wireframe was constructed
The testing procedures
The results and recommendations
Problems we did not discover with the wireframe (Test Version usability results)
Strengths/Weaknesses of the high-fidelity wireframe approach
5
Initial Design Concept
6
Low-Fidelity Wireframes
7
CE Diary
Username
Password
Login
Burden Accessibility
Privacy Security
A Range of Options
8
CE Diary
Usernam
ePassword
Login
Burden
Accessibility
Privacy
Security
CE Diary
Login
Burden Statement Accessibility
Privacy Security
OMB ID Number : 1220-01412/28/2015
Data usage rates may apply
Username:
Password:
CE Diary
Login
Burden Statement Accessibility
Privacy Security
OMB ID Number : 1220-0141
2/28/2015
Data usage rates may apply
Username:
Password:
PrototypeLow-Fidelity Wireframes High-Fidelity Wireframes
Allow participant to enter data and navigate through the diary without paper shuffling
Used Microsoft Powerpoint, Excel, and Visual Basic for Applications (VBA)
BUILDING THE HIGH-FIDELITY WIREFRAME
9
Visual Basic for ApplicationsTools & Functions
Text Fields
Drop-Down Menus
Radio Buttons (Select One)
Check Boxes (Select All That Apply)
Action Buttons
10
Reset
Option 1 Option 2 Option 3
Option A Option B Option C
Enter Description
Select Category
Option 3Option 1 Option 2
Option COption A Option B
Visual Basic for Applications In the Background
11
Private Sub Option1_Click()
Option2.BackColor = &H8000000F
Option2.ForeColor = &H0&
Option3.BackColor = &H8000000F
Option3.ForeColor = &H0&
Option1.BackColor = &HFF0000
Option1.ForeColor = &HFFFFFF
End Sub
Turn Option 2 & 3 “Off”
Turn Option 1 “On”
Store DataReformat Numbers/TextPassword Authentication
Data EntryDisplay Data
Test
Option 1
Option 2
Option 3
$0.00
CE Diary
Login
Burden Statement Accessibility
Privacy Security
OMB ID Number : 1220-01412/28/2015
Data usage rates may apply
12
Username:
Password:
CE Diary
Login
Burden Statement Accessibility
Privacy Security
OMB ID Number : 1220-01412/28/2015
Data usage rates may apply
Username:
Password:
respond.census.gov/ced 1
13
Username:
Password:
Login
14
High-Fidelity WireframeScreenshots
Login Home ScreenInitial Setup
15
High-Fidelity Wireframe Data Entry Screens
General Data EntryFood and Drink
Away From HomeFood and Drink For Home Consumption
Clothing, Shoes Jewelry, & Accessories
All Other Products & Services
WIREFRAME TESTING
16
Methods
10 Participants
3 with “A Moderate Amount” of smartphone experience
7 with “A Lot” of experience
13 tasks that covered the basic operations a respondent would be expected to perform
Logging in and performing setup
Entering expenditure data
Editing/deleting data
17
Example Tasks
Self-Directed Tasks (X 2)
“Think back to the last food purchase you made. Please add that item to the diary as if the purchase was made on [DATE].”
Scenario-Based Tasks (X 8)
“Now, imagine that today is [DATE]… You’re at the mall shopping and buy a pair of jeans for yourself for $61.95. Please add that item to the diary.”
Receipt-Based Tasks (X 3)
“You just went to the grocery store to pick up a few items – enter the items you purchased using this receipt.”
18
Results
There were only a few navigation issues
Returning to the Expense Summary Screen
Finding the Help/Information Menu
Most issues involved data requirements and not data entry
Entry of vendor name for item description
Entering multiple expenses together
Misclassification of items
19
Recommendations
Provide more instructions in future testing
Change some of the navigation buttons
Allow users to sort items on Home Screen
20
Old New
Information Screen
Summary Screen
i INFO
PROTOTYPE TESTING
21
Methods
22
Took place five months after wireframe testing
Used functional prototype instrument
29 participants used their own smartphone
Used methodology similar to wireframe testing
Results
Problems not discovered in wireframe testing
Several participants had difficulty just navigating to the site
Logging into the site was also a problem
Virtual keyboard issues
Similar to wireframe testing
Even with instructions, participants had difficulty entering data in a way that meets diary requirements
– This is also a problem in the paper and web diaries
23
CONCLUSIONS
24
High-Fidelity WireframesStrengths & Weaknesses
Strengths
More true-to-life than paper
Simulates actual functions of the Diary
Gives stakeholders something concrete to react to
Better appreciate what developers have to contend with
Weaknesses
There is a learning curve
You are limited (at first) by what you know is possible
Took about a week’s worth of time
P’s used the keyboard and mouse
You have to program ways for people to screw up
25
High-Fidelity WireframesConclusions
Overall, it was worth the time and effort
The testing did not detect some important usability issues, but these would have been missed on paper as well
The wireframe helped stakeholders visualize the final product and make more informed design choices
We developed the capability for using high-fidelity wireframes in future tests
We are exploring other tools that might improve on this process (speed & flexibility)
26
High-Fidelity Wireframes Other Projects
27
Contact Information
Brandon KoppResearch Psychologist
Office of Survey Methods Researchwww.bls.gov/osmr