1. Walkthrough Review of Wireframes
Name of the Presenter: Shiban Sayed
Date: 10 th August 2011
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
16. Clear & Focused
Simplified, Clear and
Content Focused
User Interface
Back to table
More on Cognitive Load >>
17. Back to table
Dedicated space for decision making information and persuasive links, helps
user process information faster and take action accordingly.
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. 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. Logical grouping of information leading to
better findability
Back to table
More on Navigation Structure >>
21. Flexibility for user to jump to related information, leads
to focused and faster decision making
Back to table
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. Consistent use of grid layout helps user discover information
easily and also creates a sense of visual organization.
Back to table
24. Product Specific informative links just two clicks away.
Enhanced performance with just one page load in the transition.
Back to table
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
