WET Rapid Menu Prototyping with Spreadsheets


Published on

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

WET Rapid Menu Prototyping with Spreadsheets

  1. 1. Rapid Test-to-DesignProcess with Excel™SpreadsheetsJuly 10th, WET CodeFestLisa Fast, Steve Hume
  2. 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. 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. 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. 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 thesystems usability.” –Bob Baily, The Value of Iterative Design at Usability.gov © Copyright 2012 Neo Insight Inc. Neo Insight Report - 5
  6. 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. 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. 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. 9. Iterative Process gets Top Task Rates into theTarget 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. 10. Demo: Live Updateof menus and hubpages of WET Site • Steve Hume, Neo Insight • Discussion of potential improvements © Copyright 2012 Neo Insight Inc. Neo Insight Report - 10
  11. 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.comMega-menu articles & more on how to Gord Hopkinsrun this process at: http://www.neoinsight.com/services/ (613) 836-0660 rapid-menu-process.html gord@neoinsight.com