Wednesday Sep 01, 2010

Blog Usability Top 7

A blog is a website with a reverse chronological navigation structure for the articles. It implies certain expectations on both sides of the screen, i.e. the blog author and the dear reader. The author commits to provide more or less frequent articles about more or less well defined areas. The reader is invited to browse, read, comment, and subscribe the feed. At best, a conversation emerges, and becomes part of the blogosphere.

Good content and style is key, but even the best content does not fly if the blog's usability is poor. That's why I am continuously improving various aspects of this virtual UX blog. Let me share today the top 7 consideration that drove me to the current design. 

1) This is the end, now what?

No, it is not. It is just a catchy headline for my first point. A few users of the web might find the way to your blog. Some even start reading, but most of them just skim the page. The game is on. Either they hit BACK in a couple of seconds and are gone forever, or they spend a few moments more to skim, scroll, and read. Now ask yourself: What happens when the reader reaches the end of the page. What links do you provide to keep the reader on your pages?

The default themes from Apache Roller and a few additional themes from Sun simply don't care. The reader is left alone in the middle of nowhere, and the chance is high that he clicks BACK because he has obviously reached a dead end.

Simple solution: Provide pagination both on the top and at the bottom of the page. In Roller you can add the following lines to the weblog and permalink templates in order to get a simple "« Previous | Main | Next »" navigation element:

#set($pager = $model.getWeblogEntriesPager())

Related: Persuasives Web-Design. Jenseits von Usability und Konversion von Sebastian Deterding

2) Time Machine

In addition to the pagination you can find an Article Archive at the bottom of each page. This is a comprehensive overview of the 100 most recent articles. The purpose is to present the contents of the blog on one page. The reader can choose any article without being distracted by other content or navigation elements. Although the page is no standard Roller page, it is fairly easy to create a new template page 'index.html' and add the code

#set($numEntries = 500)
#set($entriesList = $model.weblog.getRecentWeblogEntries(nil, $numEntries))
#if($entriesList.size() > 0)
  #foreach ($entry in $entriesList)
      <a href="$entry.permalink">$entry.title</a>
      &nbsp;<sub>$utils.formatDate($entry.pubTime, "MMM yyyy")</sub>
  <p class="null">No Entries</p>

Indeed, this creates a sorted list of linked titles and publishing dates. I’d love to have more than 100, but couldn’t figure out how yet.

Related: Important Feature All Blogs Should Really Have by Jake Rocheleau

3) Good Tags - Bad Tags

It is no secret that I am a fan of tagging. If done right, it has many advantages both for the author, as well as for the reader. On blogs they act like a fingerprint of the content. They provide a fast impression what the blog is about without the need to browse several pages or visit the Article Archive. In addition, they are a second-level navigation. (The first level navigation on blogs is the implicit reverse chronological order of articles.) All this is so convincing to me that I display my tag cloud on a very prominent spot, top in the left column. And BTW without a heading, because it is pretty obvious that these are tags.

Over time you will develop a personal vocabulary of tags. And you also have to do some house-keeping on your tags, e.g. combine tags and retag older articles. Errors become obvious if you use the tag cloud also for yourself to navigate your blog.  If the main tag cloud becomes too large, you should also increase the lower threshold when tags are shown.

I've written before about how to implement a tag cloud for a Roller blog.

Related: my tagged pages on tagging

4) The Look of the Link

This is a question of typography and usability. First of all, links must be recognizable. Why waste the time of the reader by making her hunt for the links? Why minimize the probability that links will be clicked by hiding them among the regular text? Underlining is rather typical for hyperlinks since the early days of the web, but legibility suffers as the line is too thick and too close to the baseline of the text. My current solution uses CSS to apply a thin red dashed bottom border. It changes to a gray dotted line once the link was visited. Red indicates a little bit more something new and hot, while the gray line is calm and less demanding. I use this style for the blog articles. On the other hand, the second level links, like the tag cloud, links in side bar, and action links, have just a blue color without the border to avoid visual clutter.

Media links are treated a bit differently. Whenever a link points to a PDF or ODF document a little icon is added to indicate the type of the link. The good news is that it can also be handled automatically by CSS styles.

Related: The Look of the Link - Concepts for the User Interface of Extended Hyperlinks by Harald Weinreich and Harmut Obendorf

5) Fluid Layout

Although the general page layout is not very spectacular, there are some points to mention compared to the Roller & Sun standard themes. I have a fluid 3-column layout with a resizable main column to fit the width of the browser window. The idea is to adjust the content to the reader's window size, instead of letting him scroll vertically all the time, or wasting so much space as many newspaper sites do. However, there is a minimum width for my content to prevent an ugly rendering, and a maximum width to avoid long lines of text that cannot be read with ease anymore.

Even the images cannot break the layout, because their size is limited to 100% of the main column. BTW_ a nice drop shadow comes almost for free on modern browsers, just by setting the border attribute to 1. Here is the CSS:

div.entry img {

img[border="1"] {
  -webkit-box-shadow: 2px 2px 12px #888;
  -moz-box-shadow:2px 2px 12px #888;

The left column contains the tag cloud, about information, blog-rolls, resources, and author links last. The order of elements corresponds to the relevance for the reader. To the right we have first the search field to meet web browsing expectations. Then a random image from my flickr account to have at least one visual element on the blog to attract people from a different angle.
And finally, a news stream on virtualization. This is an interesting component, because it attracts even myself to come and check what's new on my blog!

Related: Information Plumbing

6) We are open. Be my guest. Let's have a conversation.

One benefit of blogs over classical web 0.9 sites is the ease of commenting. You do not have to change media to pick up the phone or send e-mail to the author. Instead the comments are appended straight to the article, and other readers or the author himself can pick up the ball and continue the conversation.

What I don't like on almost all blogs is the fact that comments are only visible on the article page itself. This makes it difficult to browse content and comments of the blog. So why not display the comments also on the main page? This grands prominent space to the comments and stimulates further participation. Though, it might become too crowded over time – several hundreds of comments on GullFOSS come to mind – but I do not have this challenge on my blog, and can deal with it when things go over any reasonable limit.

I've customized my Roller templates in a way to

  • Invite readers to comment by placing a link "Add Comments" to the end of each blog article
  • Display all comments also on the home page

I've also changed the default period when commenting is allowed to infinite. If a reader wants to comment on an article in the long tail, yes, feel free to do so. There is no reason to shut down the comments as long as the blog is still active.

So let's try it out. Let me know what you think about my usability improvements on this blog?

There are three kinds of mathematicians. The ones who can count. And the others who can't. – To be continued soon... Just one missing...

Friday Aug 13, 2010

SocialChat on Apple

I was asked why I retweet my SocialChats en suite. It clutters the Twitter stream. Well, microblogging imposes a special style on text that cannot be represented properly otherwise. It is a medium of its own with a unique set of rules. Maybe I break expectations as I am not sending haikus every half an hour. Tweets are very condensed statements. Some are poetry. Some are fun. Some are hard facts and bear deeper insights. I try to ignore the rest.

Microblogging is also a special form of hypertext that comes close to (one aspect!) of Doug Engelbart's NLS/Augment, i.e. each sentence can be referenced. In Twitter each tweet gets an URL and you can quote and retweet it easily. This is not possible with any other widely adopted hypertext system. What's missing though, are display clients, that merge and revert the order of tweets that come in flocks. Then the reader does not have to twist her head around to read in sequence.

But hey, instead of talking about hypertext and the good old times, I wanted to post my OraTweets from today’s SocialChat on Apple’s hegemony. Read bottom up:

  • And one for the road: Google & Apple Common Brand Values at slideshare
  • Today you have social media getting more momentum every day. There you have to touch and move other people, to create an avalanche.
  • Apple got the press with the desktop publishing revolution. Hence, most of the news was positive news for Apple. That scales.
  • I guess you have to be "viral" by any means. Otherwise you do not get a big share of the cake.
  • Maybe Apple takes the mobile web. I don’t know. The battle is in full swing.
  • Apple is not web, is not search, is not enterprise computing, database, … what else? What else matters or will matter?
  • And Apple is of course desktop publishing. At least it ruled the 80s.
  • Let’s see. We had personal computing, personal information management, music, phone, video, TV, (it is getting weaker here)…
  • Yes, Apple is a fashion company and a design house.
  • But after that it is a fashion statement to own an iPad for instance.
  • Don’t get me wrong. The technology must be working and well designed. Very well designed!
  • Apple is a fashion company nowadays.
  • Maybe you can target areas where Apple products are not so strong yet.
  • Apple has so many loyal customers and fans. That's the difficult part to get the attention and awareness of the current customer base.
  • Technology must be working, useful and usable. But it is really a matter of brand perception.
  • I guess the question is how to develop such a strong brand like Apple, Google, Coca Cola, Levis, Starbucks, .etc.
  • I am on Apple since 1983; Apple //e, later the Mac. iTunes and iPod of course, but neither an iPhone nor an iPad yet.
  • Some of my SocialChat contributions on today’s subject: Apple…

(image source)

Friday Nov 13, 2009

PDF and ODF links on your blog

"And now to something completely different". This famous line from Monty Python comes to mind whenever you click on a hyperlink that links to a PDF or ODF document. In order to indicate the type of the link I'm using icons by adding some lines to the stylesheet. Here is the code for GullFOSS, that you can copy and paste into your blog's stylesheet or CSS file without any modifications:

/\* add odf icons for those links \*/ a[href$=".odp"] {     padding-left: 17px;     background: transparent url( no-repeat center left; } a[href$=".odt"] {     padding-left: 17px;     background: transparent url( no-repeat center left; } a[href$=".ods"] {     padding-left: 17px;     background: transparent url( no-repeat center left; } a[href$=".odg"] {     padding-left: 17px;     background: transparent url( no-repeat center left; } a[href$=".pdf"] {     padding-left: 16px;     background: transparent url( no-repeat center left; }

Finally an example. The PDF at the bottom of Bill Verplank sketches metaphors gets the PDF icon from the style statement above.

Monday Dec 08, 2008

mother of all demos

Flyer to Doug Engelbart's Presentation 1968

December 9, today, 40 years ago in 1968 Doug Engelbart presented NLS to the public. NLS was a system named after the literal meaning of being on-line with the computer – the oN-Line System – where “on-line” was not used with the sense of today to have a system connected to the Internet. There was no Internet yet. The meaning of on-line in the 1960s was to use the machine interactively! For Engelbart's Augmentation Research Center at the Stanford Research Institute this was made possible by the use of one of the first time-sharing computers.

The presentation at the Fall Joint Computer Conference in San Francisco at December 9, 1968 is often referred to as “the mother of all demos”. Doug Engelbart and his team presented the mouse, windows, interactive text editing, video conferencing and hypertext capabilities of NLS. A kind of magic and religious moment, as Alan Kay recalls.

Here are some excerpts from Vision and Reality of Hypertext and Graphical User Interfaces:

And finally I have some compelling interview clips for you, and of course the original recording from 1968:

Friday Nov 28, 2008

My Roller Tag Cloud

here are some code snippets that show how I implemented the tag cloud on this blog.

Step 1: Log in to Roller, go to Design-Theme and select 'Custom Theme' for your blog.

Step 2: Go to Design-Stylesheet and add to the end of the CSS code:

/\* Tag Cloud -----------------------------------------------\*/
.tagcloud { font-size: 130%; light-height: 90%; word-spacing: 3pt; 
            text-align: center; 
            margin-top: 13px }
a.tag     { border-style: none }
a.tag.s1  { color: #a3b8cb; font-size: 70%; letter-spacing: 1px  }
a.tag.s2  { color: #a3b8cb; font-size: 90% }
a.tag.s3  { color: #5382a1; font-size: 100% }
a.tag.s4  { color: #5382a1; font-size: 120% }
a.tag.s5  { color: #35556b; font-size: 140%; letter-spacing: -1px }

Step 3: Go to Design-Templates, open the 'sidebar' template and add to an appropriate position:

<!-- TAGCLOUD -->
<div class="navsect">
<div class="tagcloud">
  #set($mytags = $model.weblog.getPopularTags(-1, 100))
  #foreach ($tag in $mytags)
    #if ($tag.count > 1)
      <a class="tag s${tag.intensity}"
  <a href="$url.home">(all)</a>

The surrounding navsect-div depends on your general theme. The tagcloud-div is the link to the special font style above.
Tags show up in the tag cloud as soon as they are used twice.

Step 4: The footer for each blog article should also contain the tags. For me this is coded in the '_day' template (3rd line from the bottom):

<div class="entryfooter">
  $utils.formatDate($entry.pubTime, "dd MMM yyyy")
  | <a href="$url.entry($entry.anchor)">Permalink</a>

  #if ($utils.isUserAuthorizedToAuthor($
    | <a href="$url.editEntry($entry.anchor)">$text.get("macro.weblog.entrypermalink.edit")</a>
  #set($commentCount = $entry.commentCount)
  #if($entry.commentsStillAllowed || $commentCount > 0)
    #set($link = "$url.comments($entry.anchor)" )
    | <a href="$link" class="commentsLink">$text.get("macro.weblog.comments")[$commentCount]</a>
  | Tags: #foreach($tag in $entry.tags) <a href="$url.tag($" title="$tag.count">$</a>  #end

Step 5: Tag your articles. Use the Tags field above the edit field when you create an article. All tags are yours. Build your own vocabulary that makes sense to you –– by adding popular tags you can drive some traffic to your site.

Step 6: Enjoy. Let me know if this was useful for you, and share a link to your blog with the new tag cloud.





« August 2016