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

2. 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

3. 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
© Copyright 2012 Neo Insight Inc. Neo Insight Report - 3

4. 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
© Copyright 2012 Neo Insight Inc. Neo Insight Report - 4

5. 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
© Copyright 2012 Neo Insight Inc. Neo Insight Report - 5

6. 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.
© Copyright 2012 Neo Insight Inc. Neo Insight Report - 6

7. 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
© Copyright 2012 Neo Insight Inc. Neo Insight Report - 7

8. 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
© Copyright 2012 Neo Insight Inc. Neo Insight Report - 8

9. 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
© Copyright 2012 Neo Insight Inc. Neo Insight Report - 9

10. Demo: Live Update
of menus and hub
pages of WET Site
• Steve Hume, Neo Insight
• Discussion of potential improvements
© Copyright 2012 Neo Insight Inc. Neo Insight Report - 10

11. 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