A Small Study Of Big Blogs: Further Findings

http://www.smashingmagazine.com/2008/07/31/a-small-survey-of-big-blogs-further-findings/

Last week we presented the first results of our study of top blogs. As promised, this week we publish the second part of the survey, including further findings and problem solutions we have found out during the study. In the first part we discussed layout design and typographic settings. What remains to be covered are the navigation design, information architecture, advertisements and functionality (RSS-feeds, tag clouds, pagination etc.).

Reminder: since we wanted to make the survey as objective as possible, we used Technorati Top Blogs and analyzed 50 most popular blogs which appear there. We have identified important design problems and considered solutions for each of the problems separately.

We have posed 30 questions which we wanted to to answer with our blog survey. Below we present further findings of our survey of popular blog designs — the second part of the analysis of 50 popular blogs according to Technorait’s Top 100.

Please notice: the results presented below should not be considered as guidelines for an effective blog design. They are supposed to give you the intuition of which solution may be better than the other one. Still it is useful to know what big players do and, more importantly, what they don’t do.

3. Structure

Information design is usually even more important than visual design. The structure and hierarchy of the content (the way the content is presented), has a tremendous impact on how visitors perceive the presented information and how well they can scan it when looking for some specific information. In the context of the information architecture navigation plays the most important role.

3.1. Navigation menu: top, left or right?

Few years ago, before the wave of blogs has overflooded the Web, it was an unwritten rule to place the navigation menu on the left-hand side of the layout. Today it definitely does not hold for top blogs.

We have found out that

• 58% use right-hand side (vertical) navigation
  (Scobleizer, TPM, CrunchGear, Neatorama, Google Blog, DailyKos, Engadget),
• 52% use a primary horizontal navigation at the top (often combined with a right-hand side secondary navigation)
  (A List Apart, Google Blogoscoped, Dooce, GigaOM, TreeHugger, Smashing Magazine, Mashable, ReadWriteWeb, Ars Technica, TechCrunch, Huffington Post),
• 12% use left-hand side (vertical) navigation,

Actually, visitors do not care whether your navigation menu is placed on the top or in the sidebar. As long as your usability tests confirm that most first-time visitors can easily identify the menu and use available options up front, you are on the right side. So essentially you can use any of the solutions presented above.

ReadWriteWeb uses a primary horizontal navigation at the top of the layout.

In fact, visitors aren’t really confused when the navigation design doesn’t completely follow conventions. However, it is designer’s task to ensure that the navigation is clear and unambiguous — independent of how exactly it is designed.

A number of users prefer the right-hand side navigation, because from the ergonomic point of view it is more pleasant to use. Since 70-95% of people are right-handed, it is sound to assume that the mouse pointer usually reseats on the right half of the window.

Why? The scroll bar is placed to the right of the browser window. Hence, if the mouse doesn’t have a wheel users need to use the scrollbar more often than browser-buttons in the toolbar of the browser. Since scrollbar is necessarily used on most (or at least many) of sites the mouse pointer is likely to be close to the scroll bar. Consequently, the required motion path to the right-hand side navigation is smaller than the path to the left-hand side navigation.

3.2. How many posts on the start page?

From the user’s perspective there is nothing worse than an extreme cognitive load which comes from the information overload on some site. As Smashing Magazine we know exactly how hard it is to find the optimum between extensive article and information overkill.

When too much information is presented to the users, they try to escape the cognitive load — they bookmark the page for future visits (and never visit it again) or simply close the browser window, because they can’t cope with the information presented to them.

Presenting an optimal amount of content is crucial to keep your visitors on your site and, more importantly, make sure that they’ll come back to your site.

• 28% have 14 - 18 posts on their start page
  (Tuaw, Slashfilm, Gizmodo, TMZ, Lifehacker, ArsTechnica),
• 26% have 10 - 12 posts
  (ProBlogger, TechCrunch, Dooce, ReadWriteWeb, CrunchGear),
• 14% have 20-26 posts
  (ValleyWag, Seth Godin, Search Engine Land),
• 10% have 2 - 6 posts
  (A List Apart, Smashing Magazine, CopyBlogger),
• 10% have 27 - 35 posts
  (Kottke, Boing Boing, ThinkProgress, Neatorama),
• 8% have 7 - 9 posts
  (GigaOM, Mashable, TreeHugger),
• 2% have 36+ posts
  (Andre Sullivan, 50 posts).

Ars Technica has excerpts of 18 posts on its start page. 28% of top blogs have 14-18 posts on their start page.

3.3. Are related and popular posts displayed?

We couldn’t identify a trend toward displaying links to the articles related to the post currently viewed by the visitors. 54% of top blogs display related posts (GigaOM, CopyBlogger, ProBlogger, ReadWriteWeb, Mashable, Engadget, TreeHugger), while the rest does not display them (Dooce, TechCrunch, BoingBoing).

Only 48% of top blogs display popular posts. Among them are Zen Habits, CopyBlogger, DailyKos, Mashable, ReadWriteWeb, Smashing Magazine and Huffington Post. Most recent comments are displayed by 16% of the blogs (ReadWriteWeb, BoingBoing, TreeHugger, TMZ, Tuaw). However, the majority of the blogs doesn’t present recent comments on the start page at all.

GigaOM belongs to 54% of top blogs that in each article display a list of related posts. In fact, the blog displays links to related articles twice.

3.4. What information is placed in the footer?

Most web-sites use footers to present rather unspectacular information such as terms of service, W3C-hints, help, copyright and links to the “about us”-page. However, there are more options available (see Footers In Modern Web Design: Creative Examples and Ideas). Interestingly enough, our survey provides some useful ideas for design of a footer as well.

The footers may contain

• copyright, legal, privacy, terms of service, terms of use (90%),
• link to the “about us”-page (40%)
  (GigaOM, TMZ, ProBlogger, ReadWriteWeb, Ars Technica),
• link to advertising-page (38%)
  (Slashfilm, Dooce, GigaOM, ReadWriteWeb, Gizmodo).
• link to the contact information (30%)
  (Kottke, GigaOM, ReadWriteWeb, ProBlogger),
• links to RSS-feeds (22%)
  (Slashfilm, Ars Technica, BoingBoing),

BoingBoing has navigation options as well as links to RSS-feeds and e-mail-subscription in its footer.

• link to FAQ or Help (22%)
  (Gizmodo, ArsTechnica, Andrew Sullivan),
• search box (14%)
  (Dooce, Tuaw, Engadget),
• link to the top of the page (10%)
  (TreeHugger, Zen Habits),
• link to the start page (10%)
  (Kottke, CrunchGear, Joystiq, TPM),
• link to the site map (8%)
  (Andrew Sullivan, Wired, Tecaucus @ NY Times),

Joystiq’s footer is neither beautiful nor effective. Less is sometimes more. The image under the footer is an ad.

44% of the blogs display more than just a simple copyright-disclaimer and few links. For instance, Zenhabits (with some kind of a site map) and Netorama (with further navigation options). Problogger additionally presents a link to the about-page. 58% use a “standard” approach which often is chosen to be rather minimal (e.g. Techcrunch). The rest uses no footer at all.

4. Advertisements

In many cases, particularly when considering top-blogs, advertisements are necessary to keep the site alive, pay bills for traffic, support the editorial team and hence enable the publishers to actually publish the content. And most users are willing to have disturbing and colorful ads next to the content if they get the information they are looking for. But where is the limit and how do big blogs display ads on their sites? And what are users used to? Let’s find out.

4.1. How many ads per page?

Bad news: the blogosphere is heavily infected with ads. Only few sites don’t contain any advertisements at all and in most cases there are more than 2-3 ad blocks per page. Usually blogs combine sponsor ads with text link advertising similar to Google AdSense. Disturbing contextual advertising (underlined links with pop-ups) could be found on 12% of the sites.

The number of advertising blocks on an article page is usually the same as the number of blocks on a start page or even slightly higher. Reason: many publishers tend to use text link advertising such as Google AdSense in the articles or below the posts. Further findings:

• on average 5,84 advertising blocks per start page
  (Mashable has most ads (20), TechCrunch wins the second place (15)),
• on average 5,96 advertising blocks per article page,
• 68% of the blogs use Google AdSense
  (among exceptions: Kottke, Scoble, Joystiq, Tuaw, CopyBlogger, Valleywag, GigaOM),

The award for the widest ad block goes to Kotaku with an 1000px ad block in the middle of the page.

4.2. Are ads displayed in the content area?

In the content area of the layout ads are usually placed directly below the post. We have observed that advertising in the middle of the post is still popular, however it is used (relatively) rarely.

According to our findings,

• 76% had no ads in the articles (but might have ads below or above)
  (Dooce, A List Apart, ReadWriteWeb, Mashable, TechCrunch, BoingBoing),
• 44% had ads below the article and before the comments
  (ProBlogger, Zen Habits, Engadget, Smashing Magazine, Tuaw, CopyBlogger, GigaOM),
• 18% displayed ads within the content (Huffington Post, Yanko, PerezHilton, Slashfilm, Search Engine Land),
• 6% displayed the ads directly below the headline and before the content of the article
  (Smashing Magazine, Neatorama, Yanko),

4.3. Where are ads placed in the layout?

Apart from the content area one usually expects ads… well, everywhere: at the top, on the right-hand side and even at the bottom of the page. Indeed, on 12% of the reviewed blogs ads could be found everywhere — on the top, on the bottom, on the left and on the right of the main content. That’s not good. But, apparently, users got used to it and stubbornly ignore disturbing ads consuming the content offered to them.

Further findings:

• there are ads on the right-hand side (88%)
  (GigaOM, CopyBlogger, Engadget, TechCrunch, Smashing Magazine),
• there are ads on the top (42%),
  (Gizmodo, Talking Points Memo, Autoblog, TreeHugger, TMZ, PerezHilton),
• there are ads on the left-hand side (34%)
  (Lifehacker, Mashable, Gizmodo),
• there are ads on the bottom (24%),
  (Andrew Sulivan, Tuaw, Wired).
• there are no ads (8%),
  (Google Blog, Think Progress, Seth Godin).

5. Functionality

To achieve its primary goals, design needs to be not only user-friendly, but also functional. All important functions should be available and clearly visible and the user must have a simple intuition of what actions are required to actually use them. For instance, new visitors should know up fron where is an RSS-button, where are social buttons, where the search box is placed and how to contact the owner of the blog.

5.1. Are social buttons and icons used?

Social icons have managed to become popular, yet they are far away from becoming a standard. Icons are used slightly more often than simple text links. Web-services such as Addthis which hide a number of popular social buttons behind one single “social” button and display them once this button is hovered are quite popular. Advantage of this approach: content area remains clean and provides a good overview of available option. Disadvantage: some users may not find the way to vote for the story on a social network.

According to our findings,

• 54% of top blogs use social icons below the post
  (GigaOM, ProBlogger, Mashable, Ars Technica, BoingBoing, ReadWriteWeb),
• 38% don’t use social icons
  (Dooce, Google Blogoscoped, Scobleizer, Political Ticker),
• 8% use social icons above the posts (Smashing Magazine, TreeHugger, The Huffington Post).

Netorama uses social buttons embedded in a bubble. RSS-feed and e-mail-subscription are available as well.

5.2. RSS-feeds: position and visual appearance

Since an RSS-button is probably the most important design element which binds visitors to the blog, it should be given a prominent position in the site layout. In fact, there was a good reason behind designing large, glossy RSS-buttons in the Web 2.0-era: these buttons needed to be visible at the first glance.

Therefore it’s not surprising that RSS-buttons still (usually) can be found in the header of blogs. In fact, only 38% of top blogs display an RSS-button in the header, while 28% present it in the top area of the sidebar. The middle area of the sidebar (8%), bottom of the sidebar (14%) and footer (8%) are used as well, but they are not as popular as the upper area of the layout. However, here RSS-buttons often appear additionally to the button at the top of the site.

It’s interesting to notice that only 66% of the sites used a standard RSS-icon to indicate their feed, while the rest used simple text links for the same purpose.

GigaOM has two RSS-feeds and an alternative e-mail-subscription.

Regarding the number of available RSS-feeds: we’ve found out that 64% of top blogs have only 1 main RSS-feed. Often comments-feeds and tags-feeds are available as well; however, it seems that only few blogs actually offer multiple channels (e.g. feeds for some specific topics). In 56% of the cases publishers were offering an e-mail-subscription as an alternative to RSS-feeds.

24% publicly display the number of RSS-readers, usually via Feedburner. Wordpress-users can consider Feedcount as a handy alternative and define their own designs for the button. However, here Feedburner is required as well.

Zenhabits displays the number of site’s RSS-subscribers.

5.3. Tag clouds in use?

Tag clouds provide a good overview of the popular topics covered on a blog and their weight throughout the blog. However, 90% of top blogs don’t have any kind of tag clouds and present standard navigation options instead. According to our intuition there is often just no space for a tag cloud which is why when a tag cloud is used at all then it is rather small and compact.

Among sites who have a tag cloud are The Huffington Post, ReadWriteWeb and Joystiq. You can find more information about tag clouds in our article Tag Clouds Gallery: Examples And Good Practices.

5.4. Pagination in use?

Surprisingly, pagination was used only on 22% of the sites we’ve reviewed (among them are Dooce, GigaOM, Mashable, ReadWriteWeb). In most cases a standard navigation with “next” and “previous”-links is used (60%).

Pagination offers a lot of advantages as it shows to the visitors how much content is available and allows them to quickly jump to older articles. Our article Pagination Gallery: Examples And Good Practices provides creative examples of what can be achieved with pagination.

Some blogs also use calendar navigation (6%, Thecaucus, Andrew Sullivan) or an archive section instead (12%, A List Apart, TPM, The Huffington Post)

Pagination on Gigaom

An unusual navigation on Treehugger. Instead of pagination and usual next-prev-navigation, the site displays articles which appear on the next and on the previous archive page.

The Caucus with an archive instead of pagination and next-prev-navigation.

5.5. Where to place the search box?

Only 62% of top blogs have a search box in the right upper corner of the site layout. Among them in 58% of the cases the search box is placed in the header. The rest of the blogs place it in the top area of the sidebar. Search box in the middle of the sidebar and in the lower part of the sidebar is less popular (16%). Footer as the only place to display the search box is used only once (Dooce) and Kottke doesn’t have a search box at all.

Dooce displays a search box only in the footer of the site.

5.6. Where to place the link to the contact page?

Most top blogs place the link to the contact page in the sidebar. Usually this link is among further navigation options available in the right-hand side navigation menu or in the left-hand side navigation menu. Sometimes icons are also used (particularly the e-mail icon) to indicate the purpose of the link.

• 52% of the blogs place the link to the contact page in the sidebar (Engadget, TMZ, DailyKos, Smashing Magazine),
• 40% place the contact link in the header
  (A List Apart, Dooce, CopyBlogger, ProBlogger, Ars Technica, Tech Crunch),
• 30% have a contact link in the footer
  (ReadWriteWeb, ProBlogger, Mashable, TMZ),
• in 4% of the cases the link to the contact form was hidden in the about-section (TreeHugger).

It’s worth mentioning that most blogs provide readers only with a “contact e-mail” (64%), while only 28% have a contact form which needs to be filled in online. 8% offer both a contact form and the e-mail (Yanko, TechCrunch). And Zen Habits asks its readers to comment on a blog’s entry to get in touch with the blog’s owner.

5.6. Are top blogs standard-conform?

Actually, before conducting the survey we have assumed that the content would be more important than design for most blogs. However, we didn’t expect that only 4% of the top blogs are actually standard-conform.

Apparently,

• 96% of top blogs are not standard-conform,
• 8% of top blogs have over 500 errors
  (Ben Smith’s Blog, Neatorama, Search Engine Land),
• 28% have 200 - 499 errors,
  (BoingBoing, ProBlogger, Google Blog, Engadget),
• 24% have 100 - 199 errors,
  (TreeHugger, Mashable, ReadWriteWeb, Gigazine, TUAW),
• 22% have 50 - 99 errors,
  (TechCrunch, CopyBlogger, Dooce, Ars Technica, Lifehacker),
• 10% have 1 - 49 errors,
  (Kottke, GigaOM, AutoBlog, Google Blogoscoped),
• 4% have 0 errors
  (e.g. A List Apart).

Neatorama is not valid XHTML 1.0 Transitional. That’s no wonder — the page is built with tables.

The awards for most errors goes to Ben Smith’s Blog (2286 errors, no Doctype definition), Neatorama (1428) and Search Engine Land (1116).

There is a simple reason for “invalid” HTML-code: from the perspective of Web standards, ad-servers are nothing but horrible. They almost never produce a valid code which is why most blogs (which need to have advertising to keep them alive) are almost never standard-conform. The publisher often has no choice and needs to compromise the quality of the code with the revenues resulting from “dirty” source code of ad-servers.

Bottom line

Let’s conclude survey results with a brief overview of the main findings. Please keep in mind that the results of the survey should not be considered as guidelines for an effective blog design — this is a topic for another article.

• usually right-hand side vertical (58%) and top horizontal navigation (52%) are used;
• the start page presents excerpts of 10-20 posts (62%),
• related and popular posts are displayed on every second top blog (50%),
• footer contains copyright information (90%), links to about-page (40%) and link to contact information (30%),
• on average popular blogs have 5,84 advertising blocks per start page,
• on average popular blogs have 5,96 advertising blocks per article page,
• articles often contain no ads (76%),
• layouts usually contain ads on the right-hand side (88%),
• social icons are often placed under the post (54%),
• RSS-buttons are displayed in the above area of the layout (66%),
• “standard” RSS-icons are used more often than text links (66%),
• most publishers use one main RSS-feed instead of multiple feeds (64%),
• tag clouds are not used (90%),
• pagination is used rarely (22%),
• search box in the right upper corner of the site layout (62%),
• 96% of top blogs are not standard-conform.

Please stay tuned and subscribe to our RSS-feed , we are going to conduct more design-related surveys in the future.

受欢迎博客的小调查：进一步的发现

    上周我们公开了对博客排行榜调查的第一部分结果。如上周所言，本周我们将发表该调查的第二部分，包括进一步的调查结果和在调查中发现的问题的解决办法。第一部分我们讨论了页面布局和排版设置。接下来要涉及的是导航设计、信息架构、广告和功能性（包括RSS订阅、标签云、分页等等）。

    注意：为了使这个调查尽量客观，我们用的是Technorati网站的博客排行榜（Technorati Top Blogs），并且分析了它所显示的前五十个最受欢迎的博客。我们已证实一些重要的设计问题并分别考虑了每个问题的解决办法。

    我们提出了30个希望在博客调查里得到回答的问题。下面我们将公开我们对受欢迎博客设计调查的进一步发现－根据Technorati网站排行前100的博客中最受欢迎的50个博客的分析结论的第二部分。

    请注意：以下结论不宜被当成一个好的博客设计的指南。它们只是要让你拥有一种直觉，知道哪种解决办法更好。知道好的博客做什么仍然是有用的，更重要的是，知道他们不做什么。

3.结构

    信息设计通常甚至比视觉设计更重要。内容的结构和分级（内容呈现的方式）对访问者如何感知当前信息以及他们在寻找某一特定信息时如何快速浏览当前信息具有非常大的影响。从信息架构的层面上讲，导航的地位最为重要。

3.1 导航菜单：置顶，居左还是居右？

    几年前，在博客的浪潮席卷互联网之前，将导航菜单置于页面左手边是一条不成文的规则。当然到现在这条规则并不为顶尖博客们所采用。

    我们发现：

    • 58%的博客使用居右（垂直）型导航（如Scobleizer, TPM, CrunchGear, Neatorama, Google Blog, DailyKos, Engadget）

    • 52%的博客使用在顶端水平对齐的主导航（辅之以居右的二级导航）（如A List Apart, Google Blogoscoped, Dooce, GigaOM, TreeHugger, Smashing Magazine, Mashable, ReadWriteWeb, Ars Technica, TechCrunch, Huffington Post）

    • 12%的博客使用居左的垂直导航。

    实际上，访问者并不在乎你的导航菜单放在顶端还是边栏。只要你的可用性测试证实大部分新访问者可以轻易地确认菜单栏并使用上面的可选项，你就做对了。因此从根本上来说你可以使用上面提到的任何一种方法。

ReadWriteWeb 使用的是在页面顶端的横向主导航。

    实际上，当导航栏的设计没有完全遵循惯例时，访问者也不会真的感到困惑。但是，确保导航清楚不含糊是设计师的职责所在，这与到底如何设计导航无关。

    有一些用户偏好居右的菜单，因为从人机交互的角度来看，它更便于使用。因此75%至95%的人是右撇子，这也不难推测鼠标的指针通常会回到视窗的右半边。

    为什么？滚动条被置于浏览器窗口的右边。因此，如果鼠标没有滚轮，用户使用滚动条的需要就更甚于使用浏览器工具栏上的浏览按钮。由于在大部分（至少是很多）网站中都需要使用滚动条，所以鼠标的指针更有可能靠近滚动条。因此，去往右边导航栏需要的位移就比去往左边导航的要小。

3.2. 起始页上多少贴子？

    从用户的立场来看，没有什么情况比某个网站给人造成的过度的认知负担更糟糕了。我们Smashing Magazine清楚地知道要找到长篇文章和信息过多之间的平衡是多么地困难。

    当呈现过多的信息给用户时，他们会试着逃避这种认知负担－－他们将该页面加入书签以备将来访问（其实再也不会来了）或是干脆关掉窗口，因为他们无法应付呈现给他们的信息。

    呈现适当数量的内容对留住访问者很重要，更重要的是，要确认他们还会回访。

    • 28%的博客在起始页上有14至18篇贴子。（如Tuaw, Slashfilm, Gizmodo, TMZ, Lifehacker, ArsTechnica）

    • 26%的博客有10到12篇。（如ProBlogger, TechCrunch, Dooce, ReadWriteWeb, CrunchGear）

    • 14%的博客有20到26篇。（如ValleyWag, Seth Godin, Search Engine Land）

    • 10%的博客有2到6篇。（如A List Apart, Smashing Magazine, CopyBlogger）

    • 10%的博客有27到35篇。（如Kottke, Boing Boing, ThinkProgress, Neatorama）

    • 8%的博客有7到9篇。（如GigaOM, Mashable, TreeHugger）

    • 2%的博客有36篇以上的贴子。（如Andre Sullivan有50篇）

Ars Technica在首页上有18篇贴子的摘要。28%的受欢迎博客在首页上有14到18篇贴子。

3.3. 相关贴或受欢迎的贴子要显示出来吗？

    我们无法证实将与用户当前浏览的贴子相关的文章链接显示出来是否是一种趋势。54%的受欢迎博客显示了相关链接（如GigaOM, CopyBlogger, ProBlogger, ReadWriteWeb, Mashable, Engadget, TreeHugger），但其他的没有（如Dooce, TechCrunch, BoingBoing）。

    只有48%的博客显示了受欢迎的贴子。其中有Zen Habits, CopyBlogger, DailyKos, Mashable, ReadWriteWeb, Smashing Magazine and Huffington Post。16%的博客显示了最新的评论（如ReadWriteWeb, BoingBoing, TreeHugger, TMZ, Tuaw）。但是大部分的博客完全没有在首页上显示最新评论。

    GigaOM 是那54%博客之一，每一篇文章都有相关贴的链接列表。事实上，这个博客显示了两次相关文章的链接。

3.4. 页脚放什么信息？

    大部分网站的页脚都用来展示诸如服务条款、互联网联盟协议、帮助、版权和“关于我们”的链接。但其实可以有更多的选择（见现代网络设计中的页脚：创意实例与理念）。非常有意思的是，我们的调查也提供了一些页脚设计的实用方法。  

    页脚可以包括：

    • 版权、合法性、隐私条款、服务条款、用户条款（90%），如GigaOM, TMZ, ProBlogger, ReadWriteWeb, Ars Technica

    • “关于我们”的链接（38%），如Slashfilm, Dooce, GigaOM, ReadWriteWeb, Gizmodo

    • 相关信息的链接（30%），如Kottke, GigaOM, ReadWriteWeb, ProBlogger

    • RSS订阅的链接（22%），如Slashfilm, Ars Technica, BoingBoing

BoingBoing的导航菜单和RSS订阅以及email订阅一起放在页脚。

    • 常见问题或帮助的链接（22%），如Gizmodo, ArsTechnica, Andrew Sullivan

    • 搜索框（14%），如Dooce, Tuaw, Engadget

    • 到页面顶端的链接（10%），如TreeHugger, Zen Habits

    • 到起始页的链接（10%），如Kottke, CrunchGear, Joystiq, TPM

    • 网站地图的链接（8%），如Andrew Sullivan, Wired, Tecaucus @ NY Times

    Joystiq 的页脚既不美观也不实用。有时候少一点更好。页脚下面的图片是一个广告。

    44%的博客展示一个以上的简单的版权声明和少量链接。比如，Zenhabits（有网站地图）和Netorama（有下级导航菜单）。Problogger还显示了“关于”页面的链接。58%的博客用了一种使用得很少的“标准”方法（如Techcrunch）。其余的压根儿就没有页脚。

4. 广告

    很多情况下，尤其是排名前列的博客，要维持其生存、支付流量费用、支持编辑团队从而使作者们真正出版其作品，广告对是必需的。大部分的用户希望将广告放在他找到的信息后面。不过尺度在哪里？并且受欢迎的博客网站上广告是怎么呈现的？用户习惯于什么？让我们一起来找原因。

4.1. 每页多少广告？

    坏消息：博客空间广告泛滥。只有极少数的网站完全没有广告而且大部分情况下每页只有2到3个广告条。通常博客由主打广告和类似google广告链接组成。12%的博客上有扰人的情景广告（突然冒出来的带下划线的链接）。

    一篇文章页面上广告条的数量通常与起始页上的广告数量相同，甚至要稍微多一些。其理由是：很多博主倾向于在文章里或贴子下方使用诸如google广告一样的文字链接广告。更多的发现：

    • 平均每个起始页使用5.84个广告条，如Mashable 广告最多，有20个，TechCrunch位列第二，15个  

    • 平均每篇文章页面使用5.96个广告条

    • 68%的博客使用google广告，只除了Kottke, Scoble, Joystiq, Tuaw, CopyBlogger, Valleywag, GigaOM以外

    最宽的广告条莫过于Kotaku，它在页面中间的广告条有1000像素宽。

4.2.广告要放在正文里吗？

    在页面的内容区域，广告通常被置于贴子的下方。我们观察到文章中间的广告仍然常见，但是使用得相当少。

    根据调查，

    • 76%的文章中没有广告（但文章下方或上方可能会有），如Dooce, A List Apart, ReadWriteWeb, Mashable, TechCrunch, BoingBoing

    • 44%在文章下面和评论前有广告，如ProBlogger, Zen Habits, Engadget, Smashing Magazine, Tuaw, CopyBlogger, GigaOM

    • 18%的博客在正文里有广告，如Huffington Post, Yanko, PerezHilton, Slashfilm, Search Engine Land

    • 6%在标题正下方和文章正文前显示广告，如Smashing Magazine, Neatorama, Yanko

4.3.广告放在页面什么位置？

    除了正文，人们通常希望广告…嗯，到处都是：页面顶端、右边甚至底端。其实，在调查过的博客中只有12%遍地是广告——顶端、底端、主要内容的左右两边。这不好。但是显然，用户已经习以为常了，硬是漠视了与内容一起强加给他们的扰人的广告。

    其他发现：

    • 88%的博客右侧有广告，如GigaOM, CopyBlogger, Engadget, TechCrunch, Smashing Magazine

    • 42%的博客顶端有广告，如Gizmodo, Talking Points Memo, Autoblog, TreeHugger, TMZ, PerezHilton

    • 34%的博客左边有广告，如Lifehacker, Mashable, Gizmodo

    • 24%的博客底部有广告，如Andrew Sulivan, Tuaw, Wired

    • 8%的博客没有广告，如Google Blog, Think Progress, Seth Godin

5.功能性

    为了达到设计的主要目标，要兼顾用户友好性和功能性。所有主要的功能都要有并清晰地呈现，使用者必须有一种简单的直觉，知道使用这些功能需要做什么。比如，新访问者应该知道哪里是RSS按钮，哪里是互动性按钮，哪里是搜索框以及如何与博主联系。

5.1. 使用互动性按钮和图标吗？

    互动性图标正在普及，但还远远不是一种标准。图标比单纯的文本链接使用得要多一些。网络服务商如Addthis将大量的流行互动按钮藏在一个“交互”按钮后面，当这个按钮非常受欢迎时才显示出来。这种办法的好处是：正文区保持整洁，为可选项提供了好的视觉效果。缺点在于：某些用户在一个互动性网站上找不到为文章投票的路径。

    根据调查：

    • 54%的博客在文章下面使用了互动性图标，如GigaOM, ProBlogger, Mashable, Ars Technica, BoingBoing, ReadWriteWeb

    • 38%的博客没有用互动性图标，如Dooce, Google Blogoscoped, Scobleizer, Political Ticker

    • 8%的博客在文章上方使用互动性图标，如Smashing Magazine, TreeHugger, The Huffington Post

Netorama 有很多交互性图标，也有RSS订阅和email订阅。

5.2.RSS订阅：位置和视觉外观

    由于RSS按钮可能是将访问者与博客联系在一起的最重要的设计元素，因此应该在网站布局中给它一个醒目的位置。实际上，在Web 2.3 时代设计大而炫的RSS按钮的一个好理由就是：这些按钮需要第一眼就看得到。

   所以在博客的顶端仍然并且通常看得到RSS按钮并不奇怪。实际上，只有38%的受欢迎博客在顶端有RSS按钮，但有28%的博客将其放在边栏的顶部。8%放在边栏的中间区域，14%放在边栏底部，8%放在页脚，但这些都不如放在页面上方那么常见。然而，这里的RSS按钮常常是对页面上方按钮的补充。

    有意思的是，只有66%的站点使用了标准的RSS图标显示订阅，其余的则使用了简单的文本链接。

    GigaOM 有两个RSS订阅和一个可选的email订阅。

    关于RSS订阅的数量：我们发现64%的博客只有一个主要的RSS订阅。 往往也具备评论的订阅和标签的订阅；但是似乎只有少数博客真正提供了多种渠道（如对某些特定主题的订阅）。56%的博客提供了email订阅，作为RSS订阅的另一选择。

    24%的博客一般借助Feedburner，公开了RSS订阅者的数量。Wordpress的用户可以考虑将Feedcount 作为一种方便的选择来订制自己的RSS图标。不过，在这里也一样需要Feedburner。

 

Zenhabits 显示了站点RSS订阅者的数量。

5.3. 使用标签云？

     标签云为一篇博客所涉及到的流行话题及其在文章中的分量提供了良好的概括。但是，90%的博客并没有任何标签云或是给出标准导航的选项。我们的直觉是只是没有空间，这就是为什么即使标签云被使用，它也是相当的小而紧凑。

    在调查的站点中有一个标签云的是The Huffington Post, ReadWriteWeb and Joystiq。你可以在我们的文章标签云集锦：实例与实践中了解更多相关信息。

5.4.使用分页？

    令人惊讶的是，在我们调查的站点中只有22%使用了分页（其中有Dooce, GigaOM, Mashable, ReadWriteWeb）。大多数情况下（60%）使用的是“下一页”“上一页”这样的标准导航。

    分页有很多好处，因为它告诉访问者有多少内容并能使他们快速跳转到以前的文章去。标签群集锦：实例与实践提供了一些用分页取得成效的创造性例子。

    有些博客也用日历导航（6%，如 Thecaucus, Andrew Sullivan）或是档案文件包（12%，如A List Apart, TPM, The Huffington Post）。

Gigaom的分页

    Treehugger的不寻常的导航。不是分页和常用的下一页/上一页的导航，该站点显示了当前文章的前几篇和后几篇。

The Caucus 用的是档案文件而不是分页或下一页/上一页的导航。

5.5. 搜索框放在哪里？

    只有62%的博客在页面的右上角有搜索框。其中58%的搜索框是放在顶端的。其余的放在边栏的顶部。边栏中间和更低位置的搜索框不多见（占16%）。只有一个站点在页脚位置放搜索框（Dooce），Kottke根本就没有搜索框。

Dooce 只在站点的页脚放了搜索框。

5.6. 联系页面的链接放在哪里？

    大部分博客将联系页面的链接放在边栏。通常这个链接在右侧导航或左侧导航菜单提供的下一级导航选项中。有时候也使用图标（尤其是email图标）来表达该链接的目的。

    • 52%的博客将联系页面的链接放在边栏（如Engadget, TMZ, DailyKos, Smashing Magazine）

    • 40%放在顶端（如A List Apart, Dooce, CopyBlogger, ProBlogger, Ars Technica, Tech Crunch）

    • 30%放在页脚（如ReadWriteWeb, ProBlogger, Mashable, TMZ）

    • 4%藏在“关于”部分里（如TreeHugger）

    值得一提的是大部分博客（64%）都为读者提供了联系邮件，只有28%的博客有需要在线填写的联络单。8%的博客两者皆有（如Yanko, TechCrunch）。Zen Habits请读者在博客首页写评论来与博主取得联系。

5.6. 受欢迎的博客遵循一致的标准吗？

    实际上，在开始这项调查之前我们已经预计到对大部分博客来说内容比设计更为重要。但是我们并没有料到只有4%的博客在实际上遵循了标准。

    显然：

    • 96%的博客没有统一的标准

    • 8%的博客有500个以上的错误，如Ben Smith’s Blog, Neatorama, Search Engine Land

    • 28%的博客有200到499个错误，如BoingBoing, ProBlogger, Google Blog, Engadget

    • 24%的博客有100到199个错误，如TreeHugger, Mashable, ReadWriteWeb, Gigazine, TUAW

    • 22%的博客有50到99个错误，如TechCrunch, CopyBlogger, Dooce, Ars Technica, Lifehacker

    • 10%的博客有1到49个错误，如Kottke, GigaOM, AutoBlog, Google Blogoscoped

    • 4%没有错误，如A List Apart

Neatorama 不支持XHTML1.0转换。毫无疑问，其页面是用表格做的。

    错误最多的非Ben Smith’s Blog莫属，它有2286个错误，没有文本格式定义，其次是Neatorama（1428个错误）和Search Engine Land（1116个错误）。

    导致无效HTML代码的唯一理由是：从网络标准的角度来看，广告服务商太可怕了。他们几乎从不生成有效的代码，这就是为什么大部分的博客几乎都没有遵循统一标准的原因（他们需要广告来生存）。作者们常常别无选择，要为了得自于广告商的“糟糕的”源代码的收入而向代码的质量妥协。

结论

    让我们对主要发现进行简短的回顾，总结调查结果。请记住不要把调查的结果看成是一个好的博客设计的指南，那是另一篇这就是文章的话题。

    • 52%的博客通常使用右边栏（58%）和顶端横向导航

    • 50%的博客起始页显示10到20个贴子的摘要

    • 50%的博客在每篇文章的页面上显示相关贴和最受欢迎的贴子

    • 90%的博客页脚包含版权信息，40%的博客有“关于”页面的链接，30%的博客有联系信息的链接

    • 平均每个起始页上有5.84个广告条

    • 平均每篇文章页面上有5.96个广告条

    • 76%的博客文章通常不包含广告

    • 88%的博客广告常常在右边栏

    • 54%的博客其交互性图标常常在贴子下方

    • 66%的博客的RSS按钮显示在页面的上部

    • 66%的博客使用“标准的”RSS图标，用得比文本链接要多

    • 64%的发布方只用一个主要的RSS订阅而不是多个订阅

    • 90%的博客不使用标签云

    • 分页少见，只有22%的博客使用

    • 62%的搜索框放在页面的右上角

    • 96%的博客都不规范

   请继续关注并订阅我们的RSS，我们将会做更多与设计相关的调查。