Walkthrough Review of Wireframes

Name of the Presenter: Shiban Sayed

Date: 10 th August 2011
Agenda

• Highlighting User Experience related concerns in the existing
wireframe along with recommendations
• Walkthrough...
Approach

• The wireframe designed by Elvis were evaluated considering
UI standards and User interaction patterns. We also...
Jump to specific information
Areas of improvement

User pain areas

Suggestions to improve

Cognitive Load
Navigation Stru...
Overview - High Level Observations & improvement areas
Users/Visitors expects a smooth experience when visiting a informat...
Cognitive Load

Contextual Navigational
Links are hidden which is
adding unnecessary
cognitive load on user and
additional...
Duplicate Navigational Links

The local navigation has
duplication of links which might
confuse users for making
decisions...
Navigation and Structure
1

User high-level task is not
organized and prioritized by
considering any of the below
usabilit...
Lack of sense of place

The local navigation does not
provide any evidence to the
user about their location
within the sit...
Inconsistent Layout Structure
Single column with
4 sub columns at bottom

Two columnar grid with
right align section panel...
Lengthy User Task Flow
Unnecessary steps in user task flows to
discover preferred information: e.g
Specific Car Model.
The...
Areas to be Improved
There are a number of common design practices that could be improved to create
“Unified User Experien...
Sample Design Concept

The following is a rough navigational container sketch. It reflects the
functions in the current pr...
Sample Wireframe
Honda Racing I Honda Worldwide I Sign Up for Enews I Contact us
HONDA LOGO

Search

Go
Advance Search

Ho...
After UX Enhancement

Back to table
Clear & Focused

Simplified, Clear and
Content Focused
User Interface

Back to table
More on Cognitive Load >>
Back to table

Dedicated space for decision making information and persuasive links, helps
user process information faster...
Upfront , Consistent Navigation

Persistent & Simplified Global Navigations providing sense of place
in the application hi...
Simplified Navigation Structure

Proper organization of informational link
and decision making links so as to avoid
conten...
Logical grouping of information leading to
better findability

Back to table

More on Navigation Structure >>
Flexibility for user to jump to related information, leads
to focused and faster decision making

Back to table
- Path followed to reach the current state gives a sense of direction which
helps the user to navigate to the previous sta...
Consistent use of grid layout helps user discover information
easily and also creates a sense of visual organization.

Bac...
Product Specific informative links just two clicks away.
Enhanced performance with just one page load in the transition.

...
Our Recommendations
A true user-centered design process requires data
gathering with users and a more systematic design.
•...
Thank You
Upcoming SlideShare
Loading in …5
×

Usability review

183
-1

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
183
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Usability review

  1. 1. Walkthrough Review of Wireframes Name of the Presenter: Shiban Sayed Date: 10 th August 2011
  2. 2. Agenda • Highlighting User Experience related concerns in the existing wireframe along with recommendations • Walkthrough sample wireframe addressing the highlighted concerns • Demo of interaction with the wireframe.
  3. 3. Approach • The wireframe designed by Elvis were evaluated considering UI standards and User interaction patterns. We also analyzed certain task flows to understand how optimally users can finish a task. • The existing wireframe were tested with sample users for specific task flows. • The proposed sample wireframe addresses the identified UX issues, study of the competitors’ website. The sample users inputs are considered while developing proposed wireframe.
  4. 4. Jump to specific information Areas of improvement User pain areas Suggestions to improve Cognitive Load Navigation Structure Lack of sense of place Task Optimization Inconsistent Layout Click icons to view specific information Overview : High level observations on existing wireframe. Our Recommendations
  5. 5. Overview - High Level Observations & improvement areas Users/Visitors expects a smooth experience when visiting a informative website, and if they come across confusion, motor work or are annoyed by usability troubles, then many will abandon their purchases and shop elsewhere. The key observations are listed below: • The current design is not “persuasive” & do not support the user mental schema of buying products /making decisions online. This is mainly due to lack of consideration of target users & their needs from digital warehouse. • Inadequate user interactions sense that lacks trustworthiness and do not have feel of “reliability”. • The navigational structure of the site is bit “painful” and “unclear”. It is important to systematically develop an improved navigational container for the entire site.
  6. 6. Cognitive Load Contextual Navigational Links are hidden which is adding unnecessary cognitive load on user and additional clicks Back to table Hig h There are multiple number of items to be attended by the user at the same time, at a location where they are expecting the desired information. More on cognitive load >>
  7. 7. Duplicate Navigational Links The local navigation has duplication of links which might confuse users for making decisions. This might lead slow down the user performance and sometimes distract user focus. Back to table Mediu m
  8. 8. Navigation and Structure 1 User high-level task is not organized and prioritized by considering any of the below usability criteria for organizing information: 2 1) By Alphabetically 2) By Chronological order 3) By frequently used task 4) By Product? 3 What is the relationship between the navigational link group 1/2/3 Is ‘Philosophy’ a part of a ‘Motorcycles’? Back to table Hig h Consider revisiting information grouping and their connectedness. Experience shows that 80% of usability is a function of good site structure. Good site structure means that the site user can easily determine how to get to a preferred information destination, given their current location.
  9. 9. Lack of sense of place The local navigation does not provide any evidence to the user about their location within the site hierarchy Please provide valuable navigational feedback/context to the user by highlighting their selection of navigation menus. Back to table Mediu m
  10. 10. Inconsistent Layout Structure Single column with 4 sub columns at bottom Two columnar grid with right align section panel Two columnar grid with left align section panel with 4 sub columns People remember things by spatial location. Therefore, strive to maintain the consistent placement of objects across pages. Utilization of inconsistent layout structures, information grouping Creating confusion for the users while discovering information on the site and consistent behavior of user interfaces Using a grid provides an overall sense of visual organization and order by providing clear horizontal and vertical alignment points. High Back to table Two columnar grid with right align section panel
  11. 11. Lengthy User Task Flow Unnecessary steps in user task flows to discover preferred information: e.g Specific Car Model. There is no obvious way to find a “Buy Online” things. User had to go through 3 different screens to find out specific car model; user may expects this to be offered upfront on the home page itself. This may lead to user impatience's. Recommendations: Revise the user task flow. High Back to table
  12. 12. Areas to be Improved There are a number of common design practices that could be improved to create “Unified User Experience” User Interface Structure: •Information Architecture -Navigation Structure -Information Grouping, Structure & flow -Search Systems •Detailed Design: -Layout Back to table -Affordance -Scrolling -Accessibility
  13. 13. Sample Design Concept The following is a rough navigational container sketch. It reflects the functions in the current prototype and makes them more accessible. It does NOT reflect an evaluation of the needs of intended site users. We have graphically treated the sample design. This is provided as a sample of the type of look that users would expect at a minimum for this type of site. We would recommend developing some alternative designs and testing them systematically. Back to table
  14. 14. Sample Wireframe Honda Racing I Honda Worldwide I Sign Up for Enews I Contact us HONDA LOGO Search Go Advance Search Home | Cars | Motorcycles | All Terrain Vehicles | Marine | Lawn & Garden | Industry | About Honda Buying and Selling | Locate Dealers | Test Drive | Offers Honda TV` Honda Civic Flash Animation Screen/Video Content Area Honda CR-V Honda Accord Honda Jazz Cars – Honda Civic Offer Banner 1 Back to table Copyright Statement Offer Banner 2 More… Offer Banner 3 More… More… Face Book, Twitter Honda Jazz Test Drive Offers Future Launches Terms and Conditions | privacy policy | Site map | Careers More
  15. 15. After UX Enhancement Back to table
  16. 16. Clear & Focused Simplified, Clear and Content Focused User Interface Back to table More on Cognitive Load >>
  17. 17. Back to table Dedicated space for decision making information and persuasive links, helps user process information faster and take action accordingly.
  18. 18. Upfront , Consistent Navigation Persistent & Simplified Global Navigations providing sense of place in the application hierarchy to the users with improved affordance. Provides site-wide access to universal content or functions Back to table More on Navigation Structure >>
  19. 19. Simplified Navigation Structure Proper organization of informational link and decision making links so as to avoid content clutter and better ease of access Back to table More on Navigation Structure >>
  20. 20. Logical grouping of information leading to better findability Back to table More on Navigation Structure >>
  21. 21. Flexibility for user to jump to related information, leads to focused and faster decision making Back to table
  22. 22. - Path followed to reach the current state gives a sense of direction which helps the user to navigate to the previous states. - User understands their location in the website space and doesn’t feel lost Back to table
  23. 23. Consistent use of grid layout helps user discover information easily and also creates a sense of visual organization. Back to table
  24. 24. Product Specific informative links just two clicks away. Enhanced performance with just one page load in the transition. Back to table
  25. 25. Our Recommendations A true user-centered design process requires data gathering with users and a more systematic design. • Create a single coherent UI structure to support users & business unique needs • Create UI standards to ensure consistency between pages • Detail design, usability evaluation, and implement the potential design solution Back to table
  26. 26. Thank You
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×