WET Rapid Menu Prototyping with Spreadsheets

Rapid Test-to-Design
Process with Excel™
Spreadsheets
July 10th, WET CodeFest
Lisa Fast, Steve Hume

Context: Standard on Web Usability
 All GC sites must move towards usable sites in new template
“Web usability can be measured through the
effectiveness and efficiency with which users
can complete defined tasks online.”
 User-centred design approach outlined here follows the guidance
for the new Standard for Web Usability
 Focus on Users & Tasks
 Measure ease of use empirically
 Conduct iterative test cycles during the design process
 Modify websites based on empirical measurements
 Final design reflects data not opinion

© Copyright 2012 Neo Insight Inc. Neo Insight Report - 2

Mega-Menu Design is Key to Success
 Good mega-menus can improve top task success rates by 30%
 2 GC studies in March 2012: rates up 15% to 30% across 300+ trials
 Menu names need to be carefully selected & tested
 Reflect a task-based IA (not your org chart!)
 Names must be clearly differentiated
 Task-based research process
 tests & tunes menu designs
 Proven menu designs within 6 weeks
 WET makes it possible


Using WET for Rapid Test-to-Design
 Start with a WET development site that front-ends existing site
 Just the home page and menus
 Link to pages on the existing site

 Seeing the menus live helps the design process
 Many many tweaks & changes are needed during design process
 Hard-coding the menu designs makes iterative changes difficult
 Solution: drive the WET menus with spreadsheets


Benefits of Spreadsheet-Driven Test Process
 Starts from spreadsheet of mega-menu links and labels
 Design directly into this single spreadsheet
 Benefits:
 Enables iterative design process fundamental to new usability standard
 Quickly respond to stakeholder input with working site
 Highly efficient
 Small: Can quickly make menu changes between research participants
 To Large: entire user-centred design process completed in a few months
 Design French simultaneously instead of tacking it on at the end
 Involve translators during the iterations – learn the IA and tasks
 Working site focuses design team on solutions

“The more "test, make changes, retest" cycles, the better will be the
system's usability.” –Bob Baily, The Value of Iterative Design at Usability.gov


Spreadsheet Rows Represent Menu Items
 Identify mega-menu titles, headings and items
 Accommodate menu sizes – identify start of each column
 Easily modify spreadsheet to use in TreeJack Usability Tests
 Example below is from Version 12 for Fisheries & Oceans Canada

Each column identifies a particular level Copy/paste entire rows of English and
of the menu. Subsection = heading in French to move menu items around
this example. between headings, columns and menus.


Refine Menus with Data from 300+ Site Visitors
 User-Centred Design Example: Fisheries and Oceans Canada
 Start with analytics & background to design tasks and menus
 Run TreeJack study – import spreadsheet into TreeJack
 200+ site visitors perform task on new IA and on existing site IA as baseline
 Revise site, share results with stakeholders – seek input, revise again
 Run live usability sessions (14) on working site to gain further understanding
 Participants perform full range of tasks on site, revise
 Run final TreeJack study to validate improvements (129 visitors)

TreeJack Task Example


Using TreeJack to Improve Task Success
 Try out the DFO Final Study (demo version)
https://customercarewords.optimalworkshop.com/treejack/dfo3demo

 First exercise – start with smaller number of top tasks
 spread tasks across tree structure to cover all menus
 use Excel spreadsheet to input the ‘tree’ into the TreeJack study
 Display invitation on site inviting input
 randomly assign participants to existing or new structure
 Results pour in!
 Stop when at least 40 trials for each task
 Analyze results and revise menus – look for:
 distractors – vague categories that pull clicks from other top tasks
 blur – categories that are too similar, pull incorrect clicks to each other
 order –early unspecific categories pull clicks from specific categories that
appear later in the list


Iterative Process gets Top Task Rates into the
Target Zone of 80% - 90% Successful
Final Treejack Study
Existing Site

90%

80%

70%

60%

50%
By the end of the process, WET home page
40%
of site with menus is mostly complete.
30%

20%

10%

0%
Exis ng Site 1st Revised IA 2nd Revised IA Live Sessions


Demo: Live Update
of menus and hub
pages of WET Site

• Steve Hume, Neo Insight
• Discussion of potential improvements


Lisa Fast

(613) 686-6672
lisa@neoinsight.com
User Experience strategy, design and evaluation

Contacts Mike Atyeo

Phone (613) 271-3001
Email info@neoinsight.com (613) 599-7470
Web www.neoinsight.com mike@neoinsight.com
Mail Suite 374
300 Earl Grey Drive
Ottawa, Ontario Scott Smith
Canada K2T 1C1
(613) 271-3004
scott@neoinsight.com

Mega-menu articles & more on how to Gord Hopkins
run this process at:
http://www.neoinsight.com/services/ (613) 836-0660
rapid-menu-process.html gord@neoinsight.com

WET Rapid Menu Prototyping with Spreadsheets

More Related Content

Similar to WET Rapid Menu Prototyping with Spreadsheets (20)

Recently uploaded (20)

WET Rapid Menu Prototyping with Spreadsheets