Mais conteúdo relacionado Semelhante a WET Rapid Menu Prototyping with Spreadsheets (20) WET Rapid Menu Prototyping with Spreadsheets2. 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