Tuesday Mar 13, 2012

blogs.oracle.com design patch

The bad thing about being a UX designer is that you recognize poor design all over the place. The good thing is that you take the issues as design challenges, and come up with better solutions.

Several times a week, I visit the Roller home page of blogs.oracle.com. Without summarizing all my usability and design findings, let me simply present my modifications in a way that does not bother me anymore.

Before_

blogs.oracle.com screenshot

After_

better design and usability for blogs.oracle.com

Some of the benefits:

  • less wasted space in the head section – more space for latest blog articles and popular blogs.
  • delicious' and flickr-like design for the tag cloud
  • improved skimming for recent blog articles
  • numbering for popular blogs. This might not be of big interest for the visitor, but it is a very simple and effective way to provide feedback to the blog authors.

The update just involves changes to a cascading style sheet. Firefox / Chrome / Opera users can install the Stylish extension to apply my CSS patch as well.

Then you can get the patch via userstyles.org - oracle-blogs-home.

enjoy

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())
#showNextPrevEntriesControl($pager)

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)
  <ol>
  #foreach ($entry in $entriesList)
    <li>
      <a href="$entry.permalink">$entry.title</a>
      &nbsp;<sub>$utils.formatDate($entry.pubTime, "MMM yyyy")</sub>
    </li>
  #end
  </ol>
#else
  <p class="null">No Entries</p>
#end

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 {
  max-width:100%;
  }

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...

Wednesday May 20, 2009

IA Konferenz 2009

ok, let's see where to start my little report on the Information Architecture Konferenz – with K and Z – because it was mostly the German IA community coming together for it's annual conference. I must start with the lovely venue, the new Riverside Hotel in Hamburg on top of the river Elbe. That was a perfect location for 200 IA folks attending the 2-day conference last weekend.

Should I write for the web and start with the highlights? Or should I keep my fingers crossed and hope that you continue to read (or at least skip) to the end? Anyway. Mr. IA Institute, Louis Rosenfeld, gave the opening keynote on Web Analytics and User Experience (slides) – a call for data driven people to consider the Why – and a call for designers evaluate the What.

"It's not much use to know what is happening if you don’t know why.
You can’t know why things are happening if you don’t know what is happening."

In the afternoon I was skeptical about the talk "Design und praktischer Einsatz von UI Patterns" (slides). And I was not disappointed. I do not want to understand, why information architects follow just the design patterns approach rather then using the much broader notion of Christopher Alexander, BTW_ a real architect of the 1960s and 70s. [Resources on Patterns]

Claudia Urschbach made us shout "eya" when a pig shows up on her slides. I was not first. I did not get the beer. But I got vivid  impressions from web design work at the BBC in London. They are heading towards the semantic web by generating single web pages for each and every actor or singer and band on the radio or TV and each and every episode of their soap operas, or shows or you-name-it. They expect to get a hyperlinked network where e.g. the website for a cooking show can link to the BBC page of their singing celebrity guest.   (slides)

On Sunday we had two presentations on agile software development and information architecture. Oliver Emmler and Wolf Nödinger gave a very good example by applying agile philosophy on the presentation itself. "What do I want to say? How many time units? Hmm, does not fit in 30 minutes, so let's skip the history of extreme programming and have an interactive part with the audience instead." I liked that. Here are the (slides) of the other talk on agile IA.

Persuasive web design and pervasive information architecture. I am just glad that these come from two different talks. Sebastian Deterding talked about the relation between usability and motivation. Poor usability is less of a problem if you are motivated to accomplish a certain goal. (But this is no excuse for bad design.) On the other hand, a website can persuade a user in the sweet instance when the user's attention is focussed on an issue (eg. her CO2 footprint in dopplr) and an action button is offered (here_ donate to plant some trees).

Pervasive Information Architecture impressed by the presentation style. Andrea Resmini used the zooming UI capabilities of prezi.com for his closing keynote. Give it a try and you can imagine the wow-effect it made on the audience.

But the ultimate highlight of the conference was Peter Boersma's invited talk on user experience deliverables. He extended the common view of user stories, wireframes, mood boards!, usability reports etc. by pitch presentations, product launch activities, and management documents like strategy papers, risk and planning documents, and requirements engineering.  You might wonder why this is the highlight! Well, it was quiz time. An incredible show regarding the various deliverables of user experience. Definitely worth my trip from Hamburg to Hamburg ;-)  

> collection of presentations and audio webcasts

Friday Feb 16, 2007

McLuhan was an Information Architect

Q for today: What's the relation between Marshall McLuhan, “The medium is the message”, and Information Architecture?

With my recent posts I've presented a couple of communication channels and “cyberspace dimensions” that need to be filled with life. Each of those channels can be seen as a medium that transforms the message that is transmitted. This means in turn that there are good and bad media channels for certain kinds of messages. I call the choice of well suited spots where communication and collaboration can happen applied McLuhanism. The term Information Architecture is used for the organization of content, functionality, navigation and usability of a web site. The following illustration uses Jesse James Gerrett's visual vocabulary to outline the architecture of the user experience space on ooo.

Top left we have the website at ux.openoffice.org, The message that changes every piece of information is: “This is graved in stone”. Well, more or less. At least it is a space that is not very hospitable because just a few people have full write access to the site. Nonetheless, it is an official site where we will put official information that does not change every other week like our charter and some general How-To guides. Links point the visitors to related projects, e.g. to the specification project and the accessibility project.

The wiki (top right) is by design a collaborative space. And our pages shall be no exception. Working documents and pages where everyone is invited to contribute are here. The stack of guideline documents that seem to be hosted outside the wiki is a nice example that the index page to guidelines can be well done as a wiki page regardless where the actual guidelines are located.

Of course, the details will be filled in over time. But on the way this map provides guidance for informed decisions where pages should go best to foster participation.

Monday Feb 12, 2007

User Experience Cyberspace Has 7 Dimensions, maybe 8

Thanks for the responses to my Friday article on the 4 dimensions of User Experience. Esp. to Sophie, Bernhard, and Frank. (As long as we are a limited sized group, everyone will be greeted by a virtual hand-shake.)

Bernhard indicated that there are some more dimensions to consider. You know what? He is right. Today I present 3 other important communication channels that matter in the user experience cyberspace.

First is IssueTracker (aka IssueZilla). This is the task tracking system used for OpenOffice.org. Lots of our UX contributions happen in IssueTracker. We submit bugs with a special focus on usability. We evaluate and comment on issues. And in cases where we write the specification, we add the URL to the task. To sum it up, IssueTracker provides the infrastructure for the development workflow. No feature, no bug fix goes into the product without an associated issue in IssueTracker. For us it remains an ongoing challenge to keep on top of it; and to gain the big picture of what is changing over all in the product.

We already had some initial conversations over our new IRC channel: irc://freenode/ux.openoffice.org. IRChats are a very synchronous medium. Very fast. High energetic, Very much fun and very prompting. I attended a meeting of the Mac porting group some time ago. So even moderated meetings are possible. We might try this for the User Experience project as well.

Real Life. Remember that? The stuff outside when you leave the Matrix? We hope to meet you in person on many occasions. Of course, OOoCon is the first choice, but other events like the World Usability Day might fill the time in between.

There is more (collaborative) space to explore and to utilize for our purposes. And I keep in mind, that I haven't answered Bernard's question yet; that was: "You should think of a place for graphical contributions." Yes, right. Let's discuss if we have a well suited spot for media files in our user experience universe, or if we need to add an 8 th dimension to our ecosystem of communication channels.

Next: McLuhan was an Information Architect

About

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today