F-shape Score (poster 20101112)
1
F-Shaped Score Analysis A content analysis method for website homepage design strategy – with an example analysis for telecom company website homepages Charles Chen (Chen Qi Liang) wwwins Isobar Taiwan Inc., Taipei, Taiwan. Email: [email protected] The homepage is the most important part of a website. But there are few methods for webpage designers or planners to create a valid homepage design strategy. In some cases, designers and planners would only doing some competitors analysis or looking for some visual-design references for inspiration. This may not a good method for homepage design because designers seldom think about business goal but their visual and aesthetic taste. In some another cases, website planners would stand out and conduct a competitor analysis, and develop a website homepage communication idea or content strategy. But the competitor analysis conduct by planners for homepage design is always subjective and arbitrary. The planner’s personal preference about look and feel is too easy to embed in a free-style competitor analysis. This situation forms an even worse tension and contradiction relationship between the clients, planners and designers. Eyetools Inc. (Eyetools, 2006) and Nielsen Nerman Group (Nielsen, 2006) showed that users’ webpage scanning in a called “golden triangle” or “F-shaped” behavior pattern. The research conducted by Eyetools Inc. was mainly with Google.com search result page, and “the implication of this can patterns for marketing purpose is that viewers tend to look at the upper-left portio of search results and ignore sponsors’ links in the right column.” (Duchowski, 2007). Nielsen(2006a) also inquiry other webpage besides search engine result page(SERP), and found that triangle shape is very general phenomenon in different types of webpage scanning behavior. Georg (2009) also conducted an eye-tracking research with different information tasks (information foraging & page recognition). They found the salient regions of people’s visual attention patterns when viewing Webpages is “the three regions center-left, top-left, and center-center seem to be most important for information foraging tasks.” For page recognition tasks “the top- left, top-center, and center-left regions appear to be most important”. F-Shaped Score Table • A: A triangle shape on the left-top area of website. A-area score is 5 because it’s the most important and highest frequency visual attention area. It’s width was determined by the main content on webpage, and the height was determined by the safety “first folder height” of webpage. The safety height was referred to Google Browser Size (Bowden, A. ,2009), the 90% people can view 500px height in their browser first fold without scrolling down. • B: Beside the A-area of website. People may looking for following content beside the F-shape, so this area has more frequency than any other areas. • C: This area this the first fold of webpage with scrolling. According the Google Browser Size statistic, the 60% people can view upto 600px height. • D: This area is the rest area of a webpage. Area D may take long on some webpage. Analysis Process There are 3 steps in F-shaped score analysis: 1. Chucking: Chucking webpage information into categories. One can put a webpage design, mockup or wireframe on to the score table directly. But I recommend one can analyze his webpage design into information chucks categories first. Chucking webpage information into different categories is helping analyzer to compare more webpages. After chucking webpage, one could get a wireframe-like webpage. It’s good to web designer or planner using wireframe in F-shaped score analysis. 2. Scoring: Putting score table on the chucked page. And calculating category scores in webpages. 3. Comparing: Comparing different Webpages, and finding different webpage content strategy patterns. 8 Telecommunication company websites (2009): • AT&T http://www.att.com/ • Verizon http:// www.verizon.com • T-Mobile (US) http:// www.t-mobile.com/ • Telekom http://www.telekom.com/ • Vodafone UK http://vodafone.co.uk • Vodafone Global http://www.vodafone.com/ • KDDI http://www.kddi.com/ • Telstra http://www.telstra.com 6 information chunk categories: PRODUCT Information about its products, goods, and its category navigation system for consumer to find their products. PROMOTE Information about promoting events and advertising banners. TOOLS Information or functional items, like “sign-in”,” sign-up”, “forget password”, “search”, “select language”, etc… BRANDING Information about branding, public relationship, business social responsibility, etc… SERVICE Information about consumer services, faq, online helping center, etc… COMPANY Information about company information, copyright statements, legal statements, address and contact information, stakeholder information, sitemaps or website index, etc… Type A – Promote-driving strategy Homepages that weighting score more than 65% PROMOTE information called promote driving homepage. PROMOTE is the most important information for this type homepage strategy. For attracting more consumer, these PROMOTE information chucks are graphic and with dynamic animation. The AT&T and Verizon homepage fall into this type. Both homepage had the same content priority: the top 3 content category are PROMOTE, PRODUCT, SERVICE and both share over 80% layout weighting. Type B - PR + Promote strategy Homepages that have to contain company information, and divide into two different domain names and websites. One is promote-driving, just the same with Type-A strategy; another one is purely company and public relationship information. This happened if this company was a global foundation holding and many local telecomm marketing brandings. Two websites have different objective and target audience. Type C – Balanced strategy: Homepages that fall into Type C only contain less 45% weighting of promotion information. But the priority of PROMOTE, PRODUCT, SERVICE, COMPANY is the same with Type A strategy, but the sharing rate is different. Because Type C homepages contain more information than Type A & C, the length of Type C homepage is longer that Type A & B (KDDI & Telestra). 744 px 3 point 2 point 1 point 5 point 490 px A B C D 600 px Product site channels Hot services Products Index Services Company Info. Branding Info. Website Info. 3 point 2 point 1 point 5 point Product site channels tools Product catelogy Promoting Info. Promoting Info. Services Company News Services Promoting Info. Promoting Info. Promoting Info. Promoting Info. Promoting Info. LOGO 3 point 2 point 1 point 5 point Compan y Info. LOGO tools Branding Info. Company Info. Company News Company Info. Company News Company PR Branding Info. Company PR Company Info. Product catelogy Company Info. 3 point 2 point 1 point 5 point tools Product catelogy Services Company/Website Info. Promoting Info. LOGO Promoting Info. Product catelogy 3 point 2 point 1 point 5 point Branding Info. LOGO tools tools Company Info. Company Info. Company Info. Company Info. 3 point 2 point 1 point 5 point Product site channels tools Product catelogy Products Index Account Tools Services Company/Website Info. Promoting Info. LOGO tools Promoting Info. Services 3 point 2 point 1 point 5 point Services Product catelogy Website Info. Promoting Info. Promoting Info. LOGO Services tools Company/Website Info. Promoting Info. Product catelogy Services tools Company/Website Info. Promoting Info. Product site channels 3 point 2 point 1 point 5 point Product Product site channels tools Product catelogy Promoting Info. Hot services Services Tools Branding Info. Company/Website Info. Promoting Info. Promoting Info. LOGO Services Company/Website Info. Product site channels Company/Website Info. Services Branding Info. Website Info. 3 point 2 point 1 point 5 point AT&A homepage scoring table Block Score % Product 40 2.5% Product 95 6.0% Promote 780 49.0% Promote 266 16.7% Tools 60 3.8% Tools 33 2.1% Branding 33 2.1% Service 33 2.1% Service 84 5.3% Product 70 4.4% Company 42 2.6% Company 57 3.6% Total 1592 Product 205 12.9% Promote 1046 65.7% Tools 93 5.8% Branding 33 2.1% Service 117 7.3% Company 99 6.2% Example: AT&A homepage analysis AT&T http://www.att.com Product, 13% Promote, 66% Tools, 6% Branding, 2% Service, 7% Company, 6% Verizon http:// www.verizon.com T-Mobile (US) http:// www.t-mobile.com Telekom http://www.telekom.com Vodafone UK http://vodafone.co.uk Vodafone Global http://www.vodafone.com KDDI http://www.kddi.com Telstra http://www.telstra.com Homepage strategies Product, 13% Promote, 66% Tools, 6% Branding, 2% Service, 7% Company, 6% AT&T Product, 8% Promote, 69% Tools, 5% Branding, 0% Service, 12% Company, 6% Verizon Product, 18% Promote, 59% Tools, 7% Branding, 0% Service, 14% Company, 2% vodafone.uk Product, 0.0% Promote, 0.0% Tools, 2.0% Branding, 57.3% Service, 0.0% Company, 40.7% vodafone + Product, 28% Promote, 42% Tools, 7% Branding, 0% Service, 12% Company, 11% Telstra Product, 25% Promote, 33% Tools, 8% Branding, 5% Service, 14% Company, 15% KDDI Introduction F-shaped pattern F-Shaped Score Analysis An analysis for telecommunication company website homepages
-
Upload
charles-chen -
Category
Documents
-
view
796 -
download
4
Transcript of F-shape Score (poster 20101112)
F-Shaped Score Analysis A content analysis method for website homepage design strategy – with an example analysis for telecom company website homepages
Charles Chen (Chen Qi Liang) wwwins Isobar Taiwan Inc., Taipei, Taiwan. Email: [email protected]
The homepage is the most important part of a website. But there are few methods for webpage designers or planners to create a valid homepage design strategy. In some cases, designers and planners would only doing some competitors analysis or looking for some visual-design references for inspiration. This may not a good method for homepage design because designers seldom think about business goal but their visual and aesthetic taste. In some another cases, website planners would stand out and conduct a competitor analysis, and develop a website homepage communication idea or content strategy. But the competitor analysis conduct by planners for homepage design is always subjective and arbitrary. The planner’s personal preference about look and feel is too easy to embed in a free-style competitor analysis. This situation forms an even worse tension and contradiction relationship between the clients, planners and designers.
Eyetools Inc. (Eyetools, 2006) and Nielsen Nerman Group (Nielsen, 2006) showed that users’ webpage scanning in a called “golden triangle” or “F-shaped” behavior pattern. The research conducted by Eyetools Inc. was mainly with Google.com search result page, and “the implication of this can patterns for marketing purpose is that viewers tend to look at the upper-left portio of search results and ignore sponsors’ links in the right column.” (Duchowski, 2007). Nielsen(2006a) also inquiry other webpage besides search engine result page(SERP), and found that triangle shape is very general phenomenon in different types of webpage scanning behavior. Georg (2009) also conducted an eye-tracking research with different information tasks (information foraging & page recognition). They found the salient regions of people’s visual attention patterns when viewing Webpages is “the three regions center-left, top-left, and center-center seem to be most important for information foraging tasks.” For page recognition tasks “the top-left, top-center, and center-left regions appear to be most important”.
F-Shaped Score Table • A: A triangle shape on the left-top area of website. A-area score is 5 because
it’s the most important and highest frequency visual attention area. It’s width was determined by the main content on webpage, and the height was determined by the safety “first folder height” of webpage. The safety height was referred to Google Browser Size (Bowden, A. ,2009), the 90% people can view 500px height in their browser first fold without scrolling down.
• B: Beside the A-area of website. People may looking for following content beside the F-shape, so this area has more frequency than any other areas.
• C: This area this the first fold of webpage with scrolling. According the Google Browser Size statistic, the 60% people can view upto 600px height.
• D: This area is the rest area of a webpage. Area D may take long on some webpage.
Analysis Process There are 3 steps in F-shaped score analysis: 1. Chucking: Chucking webpage information into categories. One can put a
webpage design, mockup or wireframe on to the score table directly. But I recommend one can analyze his webpage design into information chucks categories first. Chucking webpage information into different categories is helping analyzer to compare more webpages. After chucking webpage, one could get a wireframe-like webpage. It’s good to web designer or planner using wireframe in F-shaped score analysis.
2. Scoring: Putting score table on the chucked page. And calculating category scores in webpages.
3. Comparing: Comparing different Webpages, and finding different webpage content strategy patterns.
8 Telecommunication company websites (2009): • AT&T http://www.att.com/
• Verizon http:// www.verizon.com
• T-Mobile (US) http:// www.t-mobile.com/
• Telekom http://www.telekom.com/
• Vodafone UK http://vodafone.co.uk
• Vodafone Global http://www.vodafone.com/
• KDDI http://www.kddi.com/
• Telstra http://www.telstra.com
6 information chunk categories:
PRODUCT Information about its products, goods, and its category navigation system for consumer to find their products.
PROMOTE Information about promoting events and advertising banners.
TOOLS Information or functional items, like “sign-in”,” sign-up”, “forget password”, “search”, “select language”, etc…
BRANDING Information about branding, public relationship, business social responsibility, etc…
SERVICE Information about consumer services, faq, online helping center, etc…
COMPANY Information about company information, copyright statements, legal statements, address and contact information, stakeholder information, sitemaps or website index, etc…
Type A – Promote-driving strategy
Homepages that weighting score more than 65% PROMOTE information called promote driving homepage. PROMOTE is the most important information for this type homepage strategy. For attracting more consumer, these PROMOTE information chucks are graphic and with dynamic animation. The AT&T and Verizon homepage fall into this type. Both homepage had the same content priority: the top 3 content category are PROMOTE, PRODUCT, SERVICE and both share over 80% layout weighting.
Type B - PR + Promote strategy
Homepages that have to contain company information, and divide into two different domain names and websites. One is promote-driving, just the same with Type-A strategy; another one is purely company and public relationship information. This happened if this company was a global foundation holding and many local telecomm marketing brandings. Two websites have different objective and target audience.
Type C – Balanced strategy:
Homepages that fall into Type C only contain less 45% weighting of promotion information. But the priority of PROMOTE, PRODUCT, SERVICE, COMPANY is the same with Type A strategy, but the sharing rate is different. Because Type C homepages contain more information than Type A & C, the length of Type C homepage is longer that Type A & B (KDDI & Telestra).
744 px
3 point
2 point
1 point
5 point
490 p
x
A
B
C
D
600 p
x
Product site channels
tools
Product catelogy
Promoting Info.
Promoting Info.
Hot services Products Index Services Company Info.
Account Tools
Branding Info.
Company/Website Info.
Website Info.
Promoting Info.Promoting Info.
LOGO
3 point
2 point
1 point
5 point
Product site channels
tools
Product catelogy
Promoting Info.
Promoting Info.Hot services Services
Company News
Account Tools
Services
Company/Website Info.
Promoting Info.Promoting Info.
Promoting Info.
Promoting Info.Promoting Info.
LOGO
3 point
2 point
1 point
5 point
Compan
y Info.
LOGO
tools
Branding Info.
Company Info.
Company News
Company Info.
Company News
Company PR
Branding Info.
Company PR
Company Info.Product
catelogy
Company Info.
3 point
2 point
1 point
5 point
tools
Product catelogy Services
Company/Website Info.
Promoting Info.
LOGO
Promoting Info.
Product catelogy
tools
3 point
2 point
1 point
5 point
Branding Info.
LOGO
tools
tools
Company Info.
Company News
Company Info.
Company Info.
Company Info.
3 point
2 point
1 point
5 point
Product site
channels
tools
Product catelogy
Products Index
Services
Account Tools
Services
Company/Website Info.
Promoting Info.
Promoting Info.
LOGO
tools
Promoting Info.
Services
3 point
2 point
1 point
5 point
Services
Product catelogy
Website Info.
Promoting Info.
Promoting Info.
LOGOServices tools
Company/Website
Info.
Promoting Info.
Product catelogy
Services
tools
Company/Website
Info.
tools
Promoting Info.
Product site channels
3 point
2 point
1 point
5 point Product
Product site channels
tools
Product catelogy
Promoting Info.
Hot services
Services
Tools
Branding Info.
Company/Website Info.
Website Info. Promoting Info.
Promoting Info.
LOGO
Services
Company/Website Info.
Product site channels
Company/Website Info.
Services
Branding Info.
Website Info.
3 point
2 point
1 point
5 point
AT&A homepage scoring table
Block Score %
Product 40 2.5%
Product 95 6.0%
Promote 780 49.0%
Promote 266 16.7%
Tools 60 3.8%
Tools 33 2.1%
Branding 33 2.1%
Service 33 2.1%
Service 84 5.3%
Product 70 4.4%
Company 42 2.6%
Company 57 3.6%
Total 1592
Product 205 12.9%
Promote 1046 65.7%
Tools 93 5.8%
Branding 33 2.1%
Service 117 7.3%
Company 99 6.2%
Example: AT&A homepage analysis AT&T http://www.att.com
Product, 13%
Promote, 66%
Tools, 6%
Branding, 2%
Service, 7%
Company, 6%
AT&T
Verizon http:// www.verizon.com
T-Mobile (US) http:// www.t-mobile.com
Telekom http://www.telekom.com
Vodafone UK http://vodafone.co.uk
Vodafone Global http://www.vodafone.com
KDDI http://www.kddi.com
Telstra http://www.telstra.com
Homepage strategies
Product, 13%
Promote, 66%
Tools, 6%
Branding, 2%
Service, 7%
Company, 6%
AT&T
Product, 8%
Promote, 69%
Tools, 5%
Branding, 0%
Service, 12%
Company, 6%
Verizon
Product, 18%
Promote, 59%
Tools, 7%
Branding, 0%
Service, 14%
Company, 2%
vodafone.uk
Product, 0.0%
Promote, 0.0% Tools, 2.0%
Branding, 57.3%
Service, 0.0%
Company, 40.7%
vodafone
+
Product, 28%
Promote, 42%
Tools, 7%
Branding, 0%Service, 12%
Company, 11%
Telstra
Product, 25%
Promote, 33%
Tools,
8%
Branding, 5%
Service, 14%
Company, 15%
KDDI
Introduction
F-shaped pattern
F-Shaped Score Analysis An analysis for telecommunication company website homepages
