Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WET Rapid Menu Prototyping with Spreadsheets


Published on

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

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 © 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) 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 User Experience strategy, design and evaluation Contacts Mike Atyeo Phone (613) 271-3001 Email (613) 599-7470 Web 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: (613) 836-0660 rapid-menu-process.html