Your SlideShare is downloading. ×
  • Like
WET Rapid Menu Prototyping with Spreadsheets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

WET Rapid Menu Prototyping with Spreadsheets

  • 842 views
Published

 

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
842
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Rapid Test-to-DesignProcess with Excel™SpreadsheetsJuly 10th, WET CodeFestLisa 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 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 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 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. 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 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