wet rapid menu prototyping with spreadsheets
DESCRIPTION
TRANSCRIPT
- 1. Rapid Test-to-DesignProcess with ExcelSpreadsheetsJuly 10th, WET CodeFestLisa Fast, Steve Hume
2. Context: Standard on Web Usability All GC sites must move towards usable sites in new templateWeb usability can be measured through theeffectiveness and efficiency with which userscan complete defined tasks online. User-centred design approach outlined here follows the guidancefor 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 solutionsThe 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. 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 inFrench 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 theTarget Zone of 80% - 90% Successful Final Treejack StudyExisting 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 Site1st Revised IA 2nd Revised IA Live Sessions Copyright 2012 Neo Insight Inc.Neo Insight Report - 9 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. Lisa Fast (613) 686-6672 [email protected] User Experience strategy, design and evaluation ContactsMike Atyeo Phone (613) 271-3001 Email [email protected] (613) 599-7470 Web [email protected] MailSuite 374 300 Earl Grey Drive Ottawa, Ontario Scott Smith Canada K2T 1C1 (613) 271-3004 [email protected] articles & more on how toGord Hopkinsrun this process at: http://www.neoinsight.com/services/ (613) 836-0660 rapid-menu-process.html [email protected]