Your SlideShare is downloading. ×
0
Gmail Landing Page Re-designed
Gmail Landing Page Re-designed
Gmail Landing Page Re-designed
Gmail Landing Page Re-designed
Gmail Landing Page Re-designed
Gmail Landing Page Re-designed
Gmail Landing Page Re-designed
Gmail Landing Page Re-designed
Gmail Landing Page Re-designed
Gmail Landing Page Re-designed
Gmail Landing Page Re-designed
Gmail Landing Page Re-designed
Gmail Landing Page Re-designed
Gmail Landing Page Re-designed
Gmail Landing Page Re-designed
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Gmail Landing Page Re-designed

2,862

Published on

SapientNitro India's Rishi Sinha explains why re-designing Gmail landing page is a good exercise to polish user experience knowledge and keep creative juice running. …

SapientNitro India's Rishi Sinha explains why re-designing Gmail landing page is a good exercise to polish user experience knowledge and keep creative juice running.

Published in: Business, Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,862
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 19.10.10| - Rishi Sinha Gmail landing page re-designed
  • 2. Index
    • Introduction
    • Current Gmail – Details
    • Redesigning and placement of the modules
    • External links (Other Google services): Relocation and resizing
    • Ads: Re-formatting and relocation
    • Inbox action buttons: Redesign
    • Internal links and inbox action buttons: Redesign and relocation
    • Chat: Relocation and redesign
    • Mail and mail action buttons: Placement on the landing page
    • Redesigned Gmail: Preview
    • Navigation
    • End slide
  • 3. Introduction
    • Gmail is one of the widely used web application which is known to be the most efficient and favorite email service.
    • Re-designing Gmail landing page is a good exercise to keep creative juice running and polishing user experience knowledge. So in next few slides I will explain how I have re-designed the Gmail. I have taken measures to fairly change the way people use Gmail by providing some more features in the landing page and a new layout. I am doing only landing page this time.
  • 4. Detail of the components
    • Current Gmail – Details
  • 5. Current Gmail Internal links External links Chat module Search Login module Ad space Mail action buttons Mails Inbox action button Inbox action button Footer items
  • 6. New layout and comparison with current one
    • Redesigning and placement of the modules
  • 7. External links (Other Google services): Relocation and resizing External links Login module Purpose: To minimize the clutter caused by the external links. Action: In my design, I have put all the external links inside the ‘More v’ dropdown. Reasoning: User is familiar with the ‘More’ dropdown for the external links like Google Reader, Groups, Maps, etc. So it is reasonable to put rest of the visible links together inside the ‘More’ dropdown. Purpose: To reduce the wastage of real estate above logo band. Action: I have moved the ‘More’ dropdown of the external links in the admin section. Reasoning: The ‘More’ link remains the only item above logo, so clubbing it together with the admin links.
  • 8. Ads: Re-formatting and relocation Search Ad space Search– Remains as it is. Purpose: To reduce the wastage of real estate caused by access allocation of space to the ads and format of ads (shorter text ads leave the blank space). Action: IN my design I have put a different size of the ad and placed inside the Inbox action button bar. Reasoning: We have a blank space in the inbox action bar and the new shape of ad looks more attractive without consuming too much of space.
  • 9. Inbox action buttons: Redesign Mail action objects Inbox action button Inbox action buttons– Purpose: Want to show connection between the left menu and the display panel. And to reduce clutter caused by the button look. Action: Inbox and same level links is shown above the bar. Tab manner is used to show connection of the action button bar with the Inbox. Refresh link is used as an icon. Reasoning: If the link style dropdown display can solve the purpose in a bar, the use of buttons are not necessary. Purpose: add more information about a mail on the inbox screen. Action: IN my design I have added indication of replied, replied all, forwarded calendar (Item type) and attachment. Reasoning: User want to gain most of the necessary information on the main screen. So if I can provide the history and current status of the mails in icons, that would be value add.
  • 10. Internal links and inbox action buttons: Redesign and relocation Internal links Purpose: To give prime location and more space to the mail, Want to start inbox from the extreme left, not from somewhere between the page. Want to show connection between this menu and the action item of the selection which is displayed separately currently. Action: In my design Inbox and same level links is shown above the bar. Tab manner is used to show connection of the action button bar with the Inbox. Reasoning: The links on the left menu are actually connected to the action bar, so close placement and tab view show connection and location of the section user is browsing.
  • 11. Chat: Relocation and redesign Chat module Purpose: As said earlier, I am placing inbox in the extreme left so the chat section has to go somewhere else. Action: I have put the chat section on the right bottom section, below the mail preview pane, yes I have introduced a MS like mail preview pane in my design. Reasoning: In Gmail user actually chat on the right bottom side, why don’t we move the whole chat section there and merge it with the chat windows to give better access to the user for quick selection
  • 12. Mail and mail action buttons: Placement on the landing page Purpose: Display the mail preview and individual mail related action items right on the landing page. Action: I have put the action buttons on the mail itself which will appear on roll-over. I have put preview pane on the landing page in the extreme right side of the inbox, just like in MS Outlook. Reasoning: In Gmail user have to go to the mail page to actually read it fully and perform any action. Accessing these without going to the mail page will be a better experience. Mail Mail action buttons
  • 13. Redesigned Gmail: Preview
  • 14. Navigation User can resize different panes according to their need. Mail preview pane can me minimized along with Chat module. Only Chat module can be minimized Instead of text for the action buttons, I have given icons, reason is that user is familiar with these icons which are part of mail services since last 10-15 years. Tool tip is added for more information.
  • 15. Thank you
    • Thanks for your time and if you want to share your ideas I would be delighted.
    • Rishi Ranjan Sinha
    • Art Director | SapientNitro
    • Green Boulevard (Tower C)
    • 3rd & 4th Floor
    • Plot No. B-9A, Sector 62
    • Noida 201 301
    • Uttar Pradesh, India
    • Tel: +91 120 479 5000
    • Mobile: +91 9818433573
    • Fax: +91 120 479 5001
    • Extn: 5323
    • Email: [email_address]
    • www.sapientnitro.com

×