+ All Categories
Home > Design > Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of...

Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of...

Date post: 26-May-2015
Category:
Upload: pallavi-vyas
View: 456 times
Download: 0 times
Share this document with a friend
Description:
Case study on usability analysis done on product vertical and how we measured those changes and what result we were able to derive by making those changes.
Popular Tags:
22
Overview of Key Learnings Case I: Fabrics Manufactures (UI, Look n Feel & Call For Action) Case II: Industrial gas plants.com (Call for Action) Case III: Auto Guide (Ad Placement)
Transcript
Page 1: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

Overview of Key Learnings

Case I: Fabrics Manufactures (UI, Look n Feel & Call For Action)

Case II: Industrial gas plants.com (Call for Action)

Case III: Auto Guide (Ad Placement)

Page 2: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

Easy Navigation Architecture- Easy for user to move within the information space and hence increase click through.

Huge Images draw more visitors to your site.

Placement of Buy leads – If you place your buy leads on top or above the fold they tend to yield better results.Also clear message with big font sizes and action button improves clicks

Google Ad Placements-

Placing your ad on top above or near rich content performs better than those below the fold.

Ads placed directly below the end of the article where user typically focused on reading tend to perform well.

Ads with font size not less than14px and increased line height and main text in normal font size as rest of the body content results in better CTR.

Don’t place link units above the ad unit as it decrease the CTR

Page 3: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

Overview Fabrics Manufacturers is an information

vertical on all types of fabrics. The vertical provides information on

different types of fabrics, fabrics supplier directory, fabrics trade leads, trade events, product catalog, etc.

Also it features useful articles and interesting photo galleries to attract visitors to the vertical and draw indirect traffic to our category pages.

Page 4: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

SCOPE OF IMPROVEMENT Cluttered display of information and our 2nd

level categories were getting very less CTR (will explain with site overlay)

Difficulty to navigate a large information space (will explain with site overlay)

Fluid width template Less buy leads Sections like articles and photo galleries had

less CTR Proper flow of traffic was missing

Page 5: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

40% 20%

25% 15%

• Upper left corner gets most of the attention and the lower right least• Also, that two thirds of the attention go to left left half of a page or screen.

Source: SAP DESIGN GUILD

Page 6: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

I W W I I W I

Portals for larger screens:

Complex screens (triptych design):

15% 75% 15%

Contd..

Many portals, especially those designed for larger screens, have a layout, where the work area is accompanied by narrow areas for indices, navigation links, news. Below Figure shows some of the possible layout variants:

For complex layouts, the work area still gets most of the attention, but the areas to the left and/or right also get some, probably the one to the left more than the one to the right. Therefore, a so-called "triptych" design could place the more important infos to the left and the secondary info's to the right of the work area.

Page 7: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)
Page 8: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)
Page 9: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

Content was organized & product navigation introduced on top

Use of white space & good-sized margins Soft, neutral background colours Navigation hierarchy

Offered a two-level index where the second level is only displayed for the active top-level category.

Further hierarchy levels are offered - if needed - if a respective second level node is being accessed.

Experimented with typography Nice big text Centered orientation

Huge screens (32% browsing with resolution over 1440px) Studies have shown that readability on screen will drop off as you go

over 960px. So we adopted a 1003px fixed width format for all our latest

templates.

Page 10: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)
Page 11: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)
Page 12: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

Changes made in UI (The changes were done in week 29th jun-13th Jul)

Comparison Chart Jun 29th-Jul 13th vs. Jul 14th –Jul 28th

%Change observed over the week, changes were made +16.04% Pageviews  +6.95% Average Pageviews  +19.03% Time on Site  -4.33%) Bounce Rate

Page 13: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

Weekly Comparison Chart before & after the changes were done

Page 14: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

  May 2010 June 2010 July 2010

Pageviews 73018 66222 70768

Visits 35667 31067 29376

Page/Visit 2.05 2.13 2.41

Adsense CTR 10.12% 8.66% 4.03%

Adsense 1498.52 1244.03 1071.81

Buy Leads 35 50 80

Page 15: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

1) Improvements in Buy Leads Eg: Fabric Manufacturers: Increased buy leads by 135%

Contd..

Page 16: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

• Huge Images: Create visual impact, draw visitors to your site. High in impact which visitors don’t forget soon

From May-July, 228 pages were viewed a total of 30,138 timesUnique Page views : 23,056 7.89% of site total page views vs. articles is 14.62%

Page 17: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)
Page 18: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

> After implementation buy lead on top After implementing buy lead on top of every page there was 45% growth in enquiries. > On an average there were 22 enquiries but after implementation the enquiries grew at an average of 32%

Page 19: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

Google’s Heat Map

According to Google’s Heat Map

> The colors fade from dark orange (strongest performance) to light yellow (weakest performance). > Ads located above the fold tend to perform better than those below the fold. > Ads placed near rich content and navigational aids usually do well because users are focused on those areas of a page. > In articles where users are typically focused on reading an article, ads placed directly below the end of the editorial content tend to perform very well. > Font size does matter. I tried decreasing the font size from 14px to 12px and saw a major drop of 50% in revenue. Then increased the font size and there was increase in revenue.> Line-height is imp. Increase in line height increased the CTR (explained in Auto Guide Example)

Page 20: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

Before Change

Page 21: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

• Google adsense revenue avg of 20 days before implementation: 122 • Google adsense revenue avg of 20 days after implementation: 149

By increasing line height there was Growth of 22% in adsense revenue

Page 22: Web! a alternate life of Human Need ( How to plan : UI / Ad Placement / Form Placement / Call of Action)

Recommended