The document provides design solutions for the Rediff Zarabol case study. It identifies several areas for improvement, such as the logo placement creating confusion, inconsistent visual styling, and issues with the information architecture and interaction patterns. Solutions proposed include reorganizing content hierarchies, improving labeling, and introducing auto-refresh indicators for visibility of system status. Ad design concepts like hidden ad strips and fixed navigation bars are also presented to better leverage Rediff's user base and products.
4. Visual Design
Logo Design Area
• The logo area of rediff zarabol has rediff homepage
link at the top which takes away the identity of the
logo and confuses user as 2 links at a proximity.
• Chance of misclick is higher : Fitt’s Law
Alignment & frame of Buzzing Now section
• The Buzzing Now section looks in a hanging state and a separate section.
• User has higher probability of confusion of Refresh to be linked as the
section refresh of Buzzing now or the Refresh to be linked as the page
refresh.
• Clear section/frame of Buzzing now to be designed regards to its function.
5. Visual Design
Hot Topic Box
• Image talks 1000 words. Big images can highlight
better recognition and recall of the trending topics.
• Hashtag can be a small part for linking the Follow up.
Icon and Type Face : Style Guide
• The webpage losses the essence of Style Guide at many places, Font, Font
type, Highlighted/Disabled format, doesn’t set to distinguish better, can be
redesigned with a palette.
• The icon size must fit the font size and the icon color and contrast should
fit the page style guide, rather being images on CSS
6. Visual Design
a b
5
Page Divider : Grid
• The Page divider (vertical line between content area) divides the page in a
Grid that doesn’t suits a better visual angle.
• The Grid should be designed for an aesthetic look, so that page/pane
content fits the Grid identity. Most widely used Grid ratio is 1.62:1, the
Golden ratio for Grid design and Content frame.
7. Information Design (IA)
Zarabol Menu S
• The menu placement is too near to the site Logo, it
displaces the information hierarchy.
• This menu should be in level to Search as it is Global
navigation (Top level hierarchy) feature of the page.
Proximity Issue : Refresh
If refresh is link to Buzzing Now part.
• The Buzzing now section of the website comprises of latest trending
hashtags, at a time there can be 2-4 hastags displayed on the webpage, so
the nearness of button varies and at times, when nothing is trending,
button looks unfamiliar specially for novice users.
• The Buzz now section should be displaced just above the Hot topics
section, with Global header : Topics or Stories… (Categoration )
8. Information Design (IA)
Hot Topics Area
• Hot topics area needs to be categorized
with Hashtags. Follow links are repeated…
• Image size should be big with follow
feature as embedded on click.
• On mouse hover, image changes to modal
link/button of “Follow”, thus repetition of
follow can be avoided.
Placement Issue : Post
• Post lies just next to the
Input area.
• User visual movement to reach Add (image/video) is from R-L passing by
area
“Post” button, thus losing task hierarchy. Post should be at bottom right.
9. Information Design (IA)
List Entity
• The problem lies in defining the hierarchy of Information.
• Name, Message, Hashtag should go before the Time stamp. The name
succeeded by the @user hashtag takes prominence at the top with the
user’ photo.
• The message displays below this, succeeded by conversation hash tag in
the next line.
• Date can taken to the top-right corner to separate it from the linked
content as it links only to the list entity and not the message.
• Action links can follow further at the bottom of the list entity.
10. Interaction Design
Login Area : Modality
• Login area becomes modal when two
comparative links are provided upfront.
• Sign In is redesigned to be non-modal.
Buttons >> Action
Links >> Direction
Search Box : Placement
• Search box is linked at a distant place with respect to the results display
area, which causes a frequent mouse travel from L-R & vice versa.
• Search box needs to be placed in a reference frame of the results,
somewhere on the top section of the results page for task efficiency.
• It needs to be redesigned from the purview of Global Search v/s
Contextual Search w/ or w/o Advanced Filters.
12. Interaction Design
Visibility of System Status : Refresh !
• Do users really require Refresh?
Taking away the control from user
ensures that page will refresh at
the data connection speed at
user’ end, eliminating hang state.
• Providing Auto Refresh indicators (here: indeterminate) helps user
understand the visibility of system status.
Input Area : Width
• The input area has longer width than required for a normal 60-65 char
line entry. It should be shortened & should have a fixed width as per the
page requirement.
• Currently the whole input area is extensive both in width and height.
13. Interaction Design
(Me + I) : Label Issue
• The Label Me + I follow is misleading & grammatically incorrect. Its actual
meaning to the user should be messages that user sends + messages that
user follows i.e. all messages that user is linked to.
• Correct label in the given header Messages: All | My messages
• Tabbing can help user identify the section much effectively than link.
• Me + I Follow somewhere links up to My Updates…
14. > Content Repetition
? Time based threading is possible
for the repeated content.
? Read More displays nothing
Not even required for 140 char.
15. Expert Review (Heuristic Evaluation)
• A detail Expert Review on the Zarabol website will be
presented after doing a thorough heuristic checklist
and analysis of the Website.
• Aid for Heuristic Evaluation >
http://www.stcsig.org/usability/topics/articles/he-
checklist.html
16. Feature Design | Rediff Ad base
Rediff has a large user group in Indian market.
Rediffmail is one of the earliest mail service which links up users to
Rediff.com and its other portals.
Less addiction for the sub-website like Zarabol from Advertising
perspective.
Use of proper Form factor and Ads placements across Rediff Websites can
leverage new products and offerings.
17.
18. Proposed Ad base |Hidden Ad strips
Text only Ad Expanded Visual Ad
19. Proposed Ad base | Fixed strips
Example for Fixed
Point Navigation
and its utility for
Ad base on
websites.
20. Proposed Ad base | Ad Grid
lorem ipsum dolor sit
a b AD Visual amet, consectetur
adipisicing elit, sed do
eiusmod tempor Ad text
incididunt ut labore et area
Clickable Owner Tag dolore magna
area
a b {a:b :: 1:1.6}
Thank You !
Notas do Editor
>ability to follow a buzzing topic>conversations are displayed like threads together>posts from Rediff
>ability to follow a buzzing topic>conversations are displayed like threads together>posts from Rediff
>ability to follow a buzzing topic>conversations are displayed like threads together>posts from Rediff
For 140 Characters there should be a maximum of 2-3 lines, Line should not go beyond 3 </n should be avoided to display space..>Multimedia objects like Images, Slides, Videos can be expanded in a suitable area. A consistent frame should move for all entities in the Zarabol homepage.
Visibility of system statusThe system should always keep users informed about what is going on, through appropriate feedback within reasonable time.Match between system and the real worldThe 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.User control and freedomUsers 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.Consistency and standardsUsers should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.Error preventionEven 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.Recognition rather than recallMinimize 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.Flexibility and efficiency of useAccelerators -- 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.Aesthetic and minimalist designDialogues 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.Help users recognize, diagnose, and recover from errorsError messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.Help and documentationEven 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.