NGA.gov Website
Self-Guided Tours Pages Redesign
Yuki Shimano
Virtual Summer Intern, TDE-PE
August 2, 2021
1
2
TDE-PE
August 2, 2021
Agenda
Project
Goals and Scope
Provide helpful recommendations to improve the overall user experience of the NGA Website’s Self-Guided Tours pages by interactively and visually demonstrating how to address current usability issues with design principles and web accessibility guidelines (WCAG).
3
TDE-PE
August 2, 2021
Design Process
Research
- Heuristic Evaluation
- Comparative Analysis
Limitations: no user input
Prototype
- Sketch of Webpages
- Mockups
- Interactive Prototypes
Iterate (In-Progress)
- Review with staff / Reflections
- Future Directions
- Edit Prototypes
4
TDE-PE
August 2, 2021
Heuristic Evaluation Methodology
5
Heuristic Evaluation
Summary of
Scenario & Tasks
Findings & Recommendations
• A usability expert (me) refers to Nielson’s 10 general principles for interaction design to identify issues
• Less expensive and time-consuming
• Applicable to broad range of usability fields
• Limitations: doesn’t involve user opinion or many usability experts in the testing (just me)
• To learn more about objects in the gallery:
• 9 unique issues found
• Top severe issues:
TDE-PE
August 2, 2021
Comparative Analysis Methodology
6
Comparative Analysis
Comparison Criteria
Findings & Recommendations
• Observe and compare 6 similar museum audio tour webpages by criteria that have a crucial impact on the user interface
• Find new distinctive features
• Limitation: cannot pinpoint where innovation is needed
• Introductory Experience
• Accessibility
• Customization Features
• Landing Page
• Navigation
• Search & Filters
• Visual Appearance
• Content Description
• Content Organization
• Current Self-Guided Tours pages lack:
TDE-PE
August 2, 2021
Overall Research Findings - Positive
Landing page can be accessed in 2 clicks from the homepage.
There are instructions on how the audio stops should be listened to and searched for on each audio tour page.
Plenty of language options available for each tour.
7
1
2
3
TDE-PE
August 2, 2021
Overall Research Findings - Areas to Improve
Invisibility of the audio stop search tool’s system status
Unorganized content (eg. unclear hierarchy of tours on the homepage, repeating links, unsorted audio stop list)
Small audio player controls and images
Useful links at the right places (eg. language options, other tours)
8
1
2
3
TDE-PE
August 2, 2021
4
Ideating the Solution
9
TDE-PE
August 2, 2021
Prototyping
and Validation
10
*View on Chrome for a better experience.
TDE-PE
August 2, 2021
11
!
PROBLEM
There’s no response when an incorrect stop number is searched.
Validation 1: Visibility of system status and Error Recovery
DESIGN SOLUTION
Add an error message that appears when no results are found
CHANGES
Added a pop-up notification that a search was unsuccessful.
09 Usability Heuristic
01 Usability Heuristic
TDE-PE
August 2, 2021
12
!
PROBLEMS
• Pages are long due to repeated content (language tours & return to top links) and white space (esp. for desktop)
• Indistinct audio controls, images, and content hierarchy
Validation 2: Aesthetic and minimalist design
DESIGN SOLUTION
Reduce unnecessary elements to simplify navigation and minimize the design. Ensure elements that showcase the audio tours/stops stand out.
CHANGES
• Removed landing page’s language tour links
• Separated groups of content with color backgrounds and carousel layout
• Enlarged soundcloud button/track & images
• Changed the layout of audio stops
• Replaced back to top links with a sticky icon
08 Usability Heuristic
TDE-PE
August 2, 2021
Landing Page layout
Audio Tour Page layout
13
!
PROBLEM
Non-English speaking visitors cannot navigate the self-guided tours landing page (& website in general)
Validation 3: Error Prevention
DESIGN SOLUTION
Offer language options from the landing page
CHANGES
• Added language translation options on the landing page
• Changed the display of language options on tour pages
05 Usability Heuristic
TDE-PE
August 2, 2021
14
!
PROBLEM
Audio stops are unorganized and difficult to recall/keep track of
Validation 4: Recognition rather than recall
DESIGN SOLUTION
Sort audio stops and keep a track of the number of stops or duration, and user’s favorite stops
CHANGES
• Listed stops by stop number
• Provided number of stops at the beginning of the tour
• Added saved stops list capability
06 Usability Heuristic
TDE-PE
August 2, 2021
15
!
PROBLEM
Relevant links are not readily available: cannot quickly change between tours or find the landing with the search tool
Validation 5: Flexibility and efficiency of use
DESIGN SOLUTION
Include relevant links on tour pages and sort search results by relevance
CHANGES
• Added links to other tours on each tour page
• List landing page link at the top of the search results for “audio tours”
07 Usability Heuristic
TDE-PE
August 2, 2021
Other Minor Validations
16
Minimized stop number keypad (in mobile)
Fixed minor spelling errors for consistency and accuracy
TDE-PE
August 2, 2021
Feedback & Questions?
17
TDE-PE
August 2, 2021
Thank you
18
TDE-PE
August 2, 2021
References
19
Self Guided Tours. (n.d.). Retrieved 7/26/2021, from https://www.nga.gov/visit/tours-and-guides/self-guided-tours.html
Nielsen, J. (n.d.). Nielsen Norman Group. 10 Heuristics for User Interface Design: Article by Jakob Nielsen. Retrieved 7/26/2021, from http://www.nngroup.com/articles/ten-usability-heuristics/
Nielsen, J. (n.d.). Nielsen Norman Group. How to Conduct a Heuristic Evaluation: Article by Jakob Nielsen. Retrieved 7/26/2021, from https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
Nielsen, J. (n.d.). Nielsen Norman Group. Severity Ratings for Usability Problems: Article by Jakob Nielsen. Retrieved 7/26/2021, from https://www.nngroup.com/articles/how-to-rate-the-severity-of-usability-problems/
Embedded players. (2021). SoundCloud Help Center. Retrieved 7/26/2021, from https://help.soundcloud.com/hc/en-us/sections/115001107667-Embedded-players
TDE-PE
August 2, 2021
Appendix
20
Appendix
21
Appendix
22
Appendix
23
Questions and Criteria
List of Competitors
24
West Building Audio Tours Page Redesign Version Comparison
Version A
Version B
1
Pros + Cons
Can view everything on one page
Page is long.
Page is condensed thanks to popup with audio and transcript.
Feasibility of sticky soundcloud player at the bottom is unknown.
2
1
3
Pros + Cons
Can only view the details of an audio stop that you want.
2