Usability review

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 sample wireframe addressing the highlighted concerns

• Demo of interaction with the wireframe.

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.

Click icons to view specific information

Areas of improvement User pain areas Suggestions to improve

Cognitive Load

Navigation Structure

Lack of sense of place

Task Optimization

Inconsistent Layout

Jump to specific information

Our Recommendations

Overview : High level observations on existing wireframe.

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.

Cognitive Load

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

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.

High

More on cognitive load >>

Back to table

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.

Medium

Duplicate Navigational Links

Back to table

Navigation and Structure

User high-level task is not organized and prioritized by considering any of the below usability criteria for organizing information:

1) By Alphabetically2) By Chronological order3) By frequently used task4) By Product?

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.

High

What is the relationship between the navigational link group 1/2/3

Is ‘Philosophy’ a part of a ‘Motorcycles’?

Consider revisiting information grouping and their connectedness.

1

3

2

Back to table

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.

Medium

Lack of sense of place

Back to table

People remember things by spatial location. Therefore, strive to maintain the consistent placement of objects across pages.

Utilization of inconsistent layout structures, information groupingCreating 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.

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

Two columnar grid with right align section panel

High

Inconsistent Layout Structure

Back to table

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

Lengthy User Task Flow

Back to table

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-Affordance-Scrolling-Accessibility

Areas to be Improved

Back to table

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.

Sample Design Concept

Back to table

Honda Racing I Honda Worldwide I Sign Up for Enews I Contact us HONDA LOGO

Search

Home | Cars | Motorcycles | All Terrain Vehicles | Marine | Lawn & Garden | Industry | About Honda Buying and Selling | Locate Dealers | Test Drive | Offers

Copyright Statement Terms and Conditions | privacy policy | Site map | Careers

Offer Banner 1 Offer Banner 2 Offer Banner 3

Honda TV`

More…

Cars – Honda Civic

Honda Civic

Honda CR-V

Honda Accord

Honda Jazz

Go

Advance Search

More… More…

Flash Animation Screen/Video Content Area

Face Book, TwitterHonda JazzTest Drive

OffersFuture Launches

Sample Wireframe

Back to table

More

After UX Enhancement

Back to table

Simplified, Clear and Content Focused User Interface

Clear & Focused

Back to tableMore on Cognitive Load >>

Dedicated space for decision making information and persuasive links, helps user process information faster and take action accordingly.

Back to table

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

Upfront , Consistent Navigation

More on Navigation Structure >>

Back to table

Proper organization of informational link and decision making links so as to avoid content clutter and better ease of access

Simplified Navigation Structure

More on Navigation Structure >>

Back to table

Logical grouping of information leading to better findability

More on Navigation Structure >>Back to table

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 states.- User understands their location in the website space and doesn’t feel lost

Back to table

Consistent use of grid layout helps user discover information easily and also creates a sense of visual organization. Consistent use of grid layout helps user discover information easily and also creates a sense of visual organization.

Back to table

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

Back to table

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

Our Recommendations

Back to table

Thank You