Web interface Evaluation
Website : 99 Acres.com Report by : Pradnya- Team UXD 99acres
0
Contents 1. Interface evaluation method- Heuristic Evaluation 2. Heuristic Principles 3. Severity scale 4. Pages examined 5. Heuristic Analysis - Documentation 6. Conclusion
1
Heuristic evaluation Heuristic evaluation (Nielsen and Molich, 1990; Nielsen 1994) is a usability engineering method for finding the usability problems in a user interface design so that they can be attended to as part of an iterative design process. Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the "heuristics"). During the evaluation session, the evaluator goes through the interface several times and inspects the various dialogue elements and compares them with a list of recognized usability principles (the heuristics). These heuristics are general rules that seem to describe common properties of usable interfaces.
2
The Principles
1. Visibility of system status : The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. e.g. Dynamic breadcrumbs, Pagination, active menu item, progress bar, etc 2. Match between system and the real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. e.g. Icons like Save and Trash, Tabs, etc 3. User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. e.g. Create, Cancel, Go back, Skip intro etc
4. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. e.g. Hyperlink underline, Navigation standards, UI kit as a toolbox, etc 5. Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. e.g. Confirmation validation, Previews, etc 6. Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. e.g. Legend vs visual or both, Maps with lists
7. Flexibility and efficiency of use Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. e.g Shortcut keys, one click buy, Keyboard to navigation, etc 8. Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. e.g. reduce unnecessary elements 9. Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. e.g. error tips, Offer solution on 404 page, mature & empathetic error messages etc 10. Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. e.g. FAQ, Resources, Customer services, etc
3
Severity scale Severity of the usability issue is classified as Cosmetic, Minor, Moderate and Severe.
Cosmetic
Cosmetic is classified for visual of UI related issue- Color, Alignments, Layouts, etc which may cause some hesitation and slight irritation to use the interface.
Minor
Minor is classified if the problems have a minor effect on usability
Moderate
Moderate is classified if the issue creates significant delay and frustration
Severe
Severe is classified if the issue hinders product usability and prevents Task Completion
4
Pages examined 1. Home Page 2. PDP 3. XID 4. SRP
Heuristic evaluation of
Home page
Heuristic principle : Flexibility and efficiency of use Aesthetic and minimalistic design
Issue:
Home page is not user friendly as page length of 28 folds leads to frustration of a user. The visual below 1st fold is too monotonous to generate any interest.
Recommendation:
The length of the page can be reduced to 4-5 folds to make it accessible for users. The page can be visually improved to give overview of the site in first glance.
Severity Level : Severe
Scroll heat map
Home Page – 26 Folds
Home Page Heuristic principle
Issue
Recommendation
Aesthetics & Minimalism
Search widget overlaps the beauty of background images. Leads to user dissatisfaction.
A slight transparency can be applied to the widget or its placement can be rethought.
Severity level Cosmetic
a
b
Home Page Heuristic principle
Issue
Recommendation
Severity level
a
Error prevention
Difference between ‘Map search’ and ‘Search’ is not obvious. It takes time while proceeding
Text can be rephrased
Moderate
b
Error prevention
After input of advance search options, ‘Search’ button is not aligned. User gets confused.
Action buttons can move downward when advance options open
Moderate
a
b
Home Page Heuristic principle
Issue
Recommendation
Severity level
a
Recognition rather than recall
This 'more' icon can be undiscoverable. User has to remember information. Increases memory load.
It would be better if the display icon can have supporting text for recognition.
Cosmetic
b
Aesthetic & minimalist design
Overlapping content boxes. Difficulty in focusing the content
Background can be hidden by blurring or layering it.
Cosmetic
Home Page Heuristic principle
Issue
Recommendation
Consistency and standards
‘Deals’ tab : User has to wonder why its been highlighted and looks different than other tabs. It also gives look of ‘selected’ state. Poor color contrast.
Visual to be rethought
Severity level Cosmetic
a
b
Home Page No.
Heuristic principle
Issue
Recommendation
Severity level
a
User control and freedom
‘View all’ link once clicked, loads on the same page/ tab. User loses home page.
It should open in new tab
Minor
b
Aesthetic & minimalist design
BHK boxes are more highlighted than location
Setting visual hierarchy of the content
Cosmetic
Home Page Heuristic principle
Issue
Recommendation
Aesthetic & minimalist design
Advertisement and ‘search widget’ look equally prominent. It leads to visual disturbance.
Ads can be made subtler in look.
Severity level Minor
a
b
Home Page - Hamburger
a
b
Heuristic principle
Issue
Recommendation
Error prevention
Duplication of the functionality confuses user
Duplication to be avoided
Recognition rather than recall
Ask and Answer, one of the important feature used often by users is hidden
The feature can be brought upfront
Severity level Minor
Home Page Heuristic principle
Issue
Recommendation
Recognition rather than recall, Consistency and standards
Filters look visually disconnected from the projects listings below.
It would be better if the hidden content can be shown up-front or the display icon can have supporting text for recognition.
Severity level Moderate
Home Page Heuristic principle
Issue
Recommendation
Aesthetic and minimalist design
Monotonous, no sequence and hierarchy, no value proposition. Hence difficult to find/ choose required information. User loses his interest to browse.
A systematic clustering with adding some value proposition element would help users to grasp the information.
Severity level Severe
Home Page Heuristic principle
Issue
Recommendation
Aesthetic and minimalist design
Ads inventory flowing on both sides of the content distracts and discourages user to read the information
Ads inventory and content should have separate dedicated space.
Severity level Severe
a b
Home Page Heuristic principle
Issue
Recommendation
Severity level
a
Consistency and standards
Dealers listings gets missed between property lists.
There should be a visual difference in the content
Moderate
b
Consistency and standards
Inconsistent font sizes
Hierarchy and font sizes to be maintained.
Minor
Home Page Heuristic principle
Issue
Recommendation
Consistency and standards, Aesthetic and minimalist design
Inconsistent white space formed due to absence of listings on home page lacks aesthetic balance.
Content clustering has to be rethought considering modularity so that the white space is balanced and consistent.
Severity level Severe
Home Page Heuristic principle
Issue
Recommendation
User control and freedom, Aesthetics and minimalism
Overlapping content after mouse hover leads to irritation
Tooltip of the project name can be removed. Project details box can be optimized with content and size.
Severity level Moderate
Home Page Heuristic principle
Issue
Recommendation
Flexibility and efficiency of use
Bottom links and ‘Ask and Answer’ widget which are important are inaccessible because of the long page.
The placement of the links has to be rethought.
Severity level Severe
Heuristic evaluation of
PDP
PDP Heuristic principle
Issue
Recommendation
Flexibility and efficiency of use, Aesthetics and minimalism
Too many links for ‘Photos’ and ‘Videos’ which creates confusion, delay and hesitation to click.
Only single link for photos and videos can simplify the interaction.
Severity level Severe
PDP Heuristic principle
Issue
Recommendation
Consistency and standards
Scrollable horizontal tabs in the listing header contains ‘photos and videos’ tab which doesn’t get active while scrolling
Either the tab should be removed or the page should contain photos and videos upfront.
Severity level Moderate
PDP Heuristic principle
Issue
Recommendation
Consistency and standards
Icons are missing for some of the property features.
Icons to be provided at missing areas to make it look consistent.
Severity level Cosmetic
PDP Heuristic principle
Issue
Recommendation
Consistency and standards, Aesthetics and minimalism
Duplication of ‘Contact dealer’ and ‘Shortlist’ buttons while scrolling down. Also they are not put in same order.
It is a technical fix to make the buttons appear on sticky header only when it disappears from page below after scrolling.
Severity level Minor
PDP Heuristic principle
Issue
Recommendation
Flexibility and efficiency of use, Aesthetics and minimalism
‘Report a problem’ form looks like out of context and obtrusive on the page.
A simple button to ‘Report’ a property would be more efficient for use as well as minimal.
Severity level Moderate
PDP Heuristic principle
Issue
Recommendation
Flexibility and efficiency of use
Furnishing information gets missed because of poor layout.
Layout to be redesigned to make the information more discoverable
Severity level Moderate
PDP Heuristic principle
Issue
Recommendation
Flexibility and efficiency of use
Property description which is important information for the user gets missed because of poor layout.
Property description can be made more prominent or discoverable by redesigning the layout
Severity level Moderate
PDP Heuristic principle
Issue
Recommendation
Flexibility and efficiency of use, User control and freedom
One needs to click to view map. Also once the map popup opens, there is one pop up which hides the map visibility. So user needs to click once more to get clear view of map.
Map can be shown upfront rather than showing it under a click.
Severity level Severe
PDP Heuristic principle
Issue
Recommendation
Flexibility and efficiency of use, Aesthetics and minimalism
User misses the Dealer information and his associated company details because of poor layout design. Also the text on button ‘view phone number’ is misleading user as it opens up registration form.
Layout to be redesigned. Either text on button has to be rephrased or the pop up form should be redesigned to make it more contextual and appealing.
Severity level Cosmetic
PDP Heuristic principle
Issue
Recommendation
User control and freedom, Aesthetics and minimalism
Property alert form is large and too complex to understand. Also it doesn’t create any interest for user to set the alerts.
Form to be redesigned to make it minimal.
Severity level Severe
PDP Heuristic principle
Issue
Recommendation
Flexibility and efficiency of use
Ask and answer widget is undiscoverable and inaccessible as it is placed at the bottom of the page.
Widget can be made minimal and more prominent.
Severity level Moderate
PDP Heuristic principle
Issue
Recommendation
Flexibility and efficiency of use, Aesthetics and minimalism
The titles and link content/ text is too long to read. It takes a lot of patience to read and understand value of it. The section is too monotonous.
Interlinking / suggested links list can be designed for more efficient use. Minimal text would increase its click rate. Also some elements can be added to add a value proposition to the section.
Severity level Moderate
PDP Heuristic principle
Issue
Recommendation
User control and freedom, Aesthetics and minimalism
Price trends are not prominent. The Share, Embed, Feedback, Disclaimer links are not visible and doesn’t give clear idea whether it belongs to entire page or just price trends section
Price trends to be made more prominent and aesthetically better.
Severity level Minor
PDP Heuristic principle
Issue
Recommendation
Consistency and standards, Aesthetics and minimalism
‘View more similar properties’ link / button is not distinct and intuitive.
The link or button to be made more intuitive and prominent as per the standards.
Severity level Minor
Heuristic evaluation of
XID
XID Heuristic principle
Issue
Recommendation
User control and freedom, Aesthetics and minimalism
Developer logo and ‘View slideshow’ button hides the cover photo on the project page.
To rethink the logo placement. The Slideshow button and project title can be made less intrusive.
Severity level Severe
XID Heuristic principle
Issue
Recommendation
Consistency and standards
Font size of Project header is smaller than the content.
Font sizes to be kept consistent according to the defined UI standards.
Severity level Moderate
Part 2
Part 1
Part 3
Part 4
XID
Heuristic principle
Issue
Recommendation
Consistency and standards, Visibility of system status, Flexibility & efficiency of use
Sections/parts of the page are difficult to identify as they are not properly distinguished. Proportions, grid are missing in the layout
Page layout should be redesigned. Sections should be properly marked for user’s understanding.
Severity level Severe
Heuristic evaluation of
SRP- List view
SRP Heuristic principle
Issue
Recommendation
User control and freedom, Visibility of system status
Tabs undiscoverable, Tabs not intuitive
Location of the tab can be rethought, or made prominent. The numbers prefix to the tab title leads to hesitation to read the title
Severity level Severe
SRP Heuristic principle
Issue
Recommendation
Visibility of system status, Flexibility and efficiency of use
Breadcrumbs are confusing. They include filters selection as well as dropdown. It causes delay in action and frustration.
Breadcrumbs to be simplified
Severity level Severe
SRP Heuristic principle
Issue
Recommendation
Visibility of system status, Flexibility and efficiency of use, User control and freedom
No breadcrumbs. User feels lost.
Breadcrumb to be incorporated
Severity level Severe
SRP Heuristic principle
Issue
Recommendation
Visibility of system status
Sort by is undiscoverable as it is not distinct. Also Sort by selection is not shown upfront, user has to click and check what is selected by default or by him.
Sort by to be made distinct from filters. Default selection/ user selection option should be shown upfront.
Severity level Moderate
SRP Heuristic principle
Issue
Recommendation
Visibility of system status; Help users recognize, diagnose & recover from errors
Filters selection is not reflected in the filters itself but the tags. So user gets confused whether he has selected anything under filters or not. Also filters disappear when there are zero results. This prevents user from task completion
User should be informed to get what he has selected under what filter tabs.
Severity Severe
SRP Heuristic principle
Issue
Recommendation
Aesthetics and minimalism, Error prevention
List-Map toggle switch is not intuitive. It causes delay while selecting.
Visual improvement is required.
Severity level Cosmetic
SRP Heuristic principle
Issue
Recommendation
Visibility of system status
Selected budget doesn’t get highlighted. Though selected budget gets updated at the top, it doesn’t get noticed.
Selected budget number should look like a selection.
Severity level Minor
SRP Heuristic principle
Issue
Recommendation
Flexibility and efficiency of use, Visibility of system status, Consistency and standards
Locality name list text is too small to make selection. There is no feedback on hover. Scroll is too small to hold and drag.
Text sizes to be checked for efficient use. Locality name can be highlighted in background in hover state. Scroll size to be provided as per standards.
Severity level Cosmetic
SRP Heuristic principle Visibility of system status, Flexibility and efficiency of use
Issue When there are no societies, Society tab and search box still appears and looks active. Area unit dropdown is not entitled, also its default unit is not displayed. User has to wonder what is the dropdown for.
Recommendation Society tab to be either removed or made completely disabled when not available. Area unit to be displayed upfront in dropdown.
Severity level Cosmetic
SRP Heuristic principle
Issue
Recommendation
Consistency and standards, Aesthetics and minimalism
The icon style and buttons are not consistent and doesn’t follow any guideline.
Icons to be redesigned to bring consistency
Severity level Minor
SRP Heuristic principle
Issue
Recommendation
Flexibility and efficiency of use
3 links for photos confuses user and causes delay for action.
Photo links to be minimal in content and in number
Severity level Minor
SRP Heuristic principle
Issue
Recommendation
Consistency and standards, Aesthetics and Minimalism
Text sizes and text format is not consistent. It is randomly highlighted. Tuple looks text heavy due to ‘Description’.
Text sizes to be imparted as per the defined standards. Call to be taken whether description is needed on SRP or not
Severity level Moderate
Conclusion
6
Page
Total issues
Cosmetic
Minor
Moderate
Severe
Home page
19
5
4
5
5
PDP
14
2
3
6
3
XID
3
-
-
1
2
SRP
12
3
3
2
4
Total
48
10
10
14
14
Sr.
Heuristic Principle
Percentage of issues
1
Visibility of system status
19 %
2
Match between system and the real world
0 %
3
User control and freedom
4
Consistency and standards
17 %
29 % 8%
5
Error prevention
6
Recognition rather than recall
6%
7
Flexibility and efficiency of use
33 %
8
Aesthetics and minimalist design
44 %
9
Help users recognize, diagnose and recover from errors
10
Help and documentation
2% 0 %
Thank you
Team UXD 99acres