A recent article on feverbee points out that “most online communities are designed for lurkers“. It’s true. A lot of energy is spent on creating great interesting content to attract new people, and with success. But after that, the new user is left on his own. The welcome message is cold (almost rude), and when he arrives at the community he’s lost and doesn’t know where to start. A few brave souls may have the courage to write a few words, but many of them are scared away when the desired reaction just doesn’t come.

In a library people are silent

An accurate metaphor for a content-driven ‘community’ is a library. And what happens when people walk into a library? They whisper, walk slowly and try not to disturb the other people there. Social psychologists have shown that just the association of the concept library is enough to make people speak softer. For the vibrant active community you have in mind, that’s not the behavior you want to stimulate.

If you don’t want to silence your newbies, but get them to connect with your existing community members, look at what you can learn from other real life situations. How do people start talking? What do they say and what do they do? People online are still people, and they tend to follow all the normal rules of social interaction.

it’s not that hard

In a community that I’m involved with, we’ve recently taken a few simple steps to help our newcomers really join. The account confirmation email was replaced by a welcome message offering guidance and a little encouragement. Instead of demanding new members to “introduce yourself! within a week, or else…”, we’re now welcoming them and ask them the kind of questions you would expect to hear at a real life meeting as well (hi, what’s your name? what brought you here? what are you interested in? etc.). We’re paying explicit attention to the first few interactions, where a fast friendly reply can make all the difference between feeling ignored and feeling welcome. And it seems to work. People find their way more easily, and are more comfortable than before.

It helps inform the people who care about you and your work, and with a good online portfolio you can share your work with a large audience, including those who can’t physically come to your expositions due to time constraints (or travel distance). Here are some tips on how to arrive at an effective portfolio:

know what you want to achieve

Ask yourself this question: ‘if my online portfolio was an enormous success, what would I get from it?’ For some people the main goal will be to drive sales of their art work, for others the best thing that can happen is that they get in touch with people who are now unreachable, and for still others the whole point of having a portfolio may be described in terms of building reputation and getting recognition as an artist.

A great portfolio gets the message across. Another question: if you could just say one sentence to your visitors, what would it be? It’s easy to get lost in trying to say too much, to too many people, so be as specific as you can.

who are you talking to?

Who’s your target audience? Who are you trying to reach? Are there different groups of people, with different goals and needs? If you already have an existing portfolio, start with your current visitors: who are they, what is their background, do you know them? If you are starting from scratch, try working from your intended audience, or from your imaginary ideal customer.

Some techniques to get into the head of your audience (but I’m getting a bit technical here… if you need help, just let me know): build personas, write stories, do user research, create empathy maps. The best thing you can do is talk to real people, in the wild (not online) and observe what they are doing.

learn from others

There are so many good and bad examples… simply google for the product/service you will be offering, ask your friends and spend a few hours on just browsing to other people’s websites. It will help you discover what is technically possible, and what you want for your own presentation. Make a list of websites you like, and a list of websites you really don’t like (take notes about what you like/dislike).

In an earlier post I described a prototypical portfolio website from a few years ago. That one was based on mainly web design portfolios, but many of the principles apply to other disciplines too. You really need to provide an opportunity to get in touch with you, you might want to list your clients or the people you’ve worked with, and you might want to tell a little background story on each project you have done.

thoughts, emotion, behavior, tone and style

Time to make some decisions. A portfolio website should not exist in isolation, but be part of your larger business strategy and certainly fit within your marketing plan. What is the desired tone/style for the design? Jot down some keywords (think for example informal/formal, cold/warm, female/male, subtle/bold, informative/inspiring).

What kind of emotions should your visitors feel? What should they be thinking when they first arrive on your site? And, most importantly, what do you want them to do? Even if you’re not directly selling, think of what else you can offer to build a relationship and help them a bit closer to their goals. Do you want them to get in touch with you? They’ll need your contact information, or could use a contact form. Do you want them to subscribe to a newsletter? Tell them about it.

You’re a creative professional, so use your creativity. You really don’t need technical skills, or knowledge of html/css/flash/etc to get started, just pen&paper will do. Draw at least 6 sketches exploring different design directions quickly (shouldn’t take longer than 15 minutes, then you’re getting into too much detail). Take a step back and decide what works on what not. (If you decide to go to a professional web designer and developer later, you can start the conversation from here and get better and more accurate information).

start small, try, test and iterate

If you’re just starting, you probably have a small budget for your website. That’s okay. One of the greatest advantages of the web is that you don’t need to get it perfect the first time. You can start small, with little or no budget, and that will help you find out what works and what doesn’t work for you. When your business grows, your website can grow with you.

(Oh, and don’t forget to have fun and enjoy yourself!)

I just discovered visualcomplexity, a catalogue of over 600 visualizations. There are a couple of really great finds. The best visualizations reveal the underlying structure of the data but without sacrificing the complexity and show artistic beauty and elegance.

Other catalogues are mentioned at the coding horror weblog. It seems the developments in visualizations have gone really fast. Some of the older examples already feel, well … old.

As I said, I am very enthousiastic about this tool. However, I had a small annoyance. The opening screen looks like this (I didn’t capture the screen borders, but imagine a standard title bar and window frame):

Three active buttons in the toolbar. A green horizontal bar with a hint text and a nice picture of a box with tools.

The icons

The active icons are very generic:

1. open something
2. add or increment
3. search or inspect

Strong icons because they are easy to understand; at the same time weak because they are so general they could mean just about everything (see my earlier post about different purposes for an icon). The user needs more information, either in the form of a strong metaphor, good tooltips or explicit hints.

Click ‘+’ to add actions

The hint says “click ‘+’ to add actions”. In a way this reminded me of a “click here” case at buigallery.com. What does the naive user (that’s me!) do? Baby-age-people put everything in their mouth, children-age-people just have to touch the toys in the store and grown-up software users… click. The green bar begs for clicking. And the real perfectionists aim for the ‘+’. In the text, that is. Not the button.

But this doesn’t work. Next screenshot shows what’s really the case. The green ‘bar’ area is not clickable at all! The hint is meant to point the user to the real button. Which has a differently shaped cross and a very different color, but the smart user can probably figure out what he is supposed to do.

This really isn’t bad design. The hint will eventually lead the user to the button he should click. This design with the green bar is better than the same design without it. And after this initial hurdle, things really get better. But there is room for improvement. Or discussion. Or maybe – can I say this out loud? – in the very best case … an exciting journey through design space, leading to the conclusion that the starting point wasn’t so bad after all.

A few quick sketches

Text unaltered. Arrowhead added to the bar. Arrow rotated so it points towards the button.

The explicit ‘+’ in the hint text is not needed because the arrow unambiguously points to the right button.

The “click to”-part is superfluous. What else should you do with that button? (See my earlier post about affordance). So that leaves a very short arrow with only the text ‘add actions’.

Such a short arrow can be positioned everywhere, as long as it keeps pointing to the right button. Keep an eye on legibility though, or choose a different shape if necessray. Example (to the right of the button):

And hey, there’s a nice side-effect. There’s plenty of space now for hints for the other two active buttons. And it’s pretty easy to make the arrows even less clickable. They should not look like buttons, they should look like arrows. Probably thinner, three-dimensional and with an even stronger sense of direction.

Why is this intuitive?

• Reading direction in English (and Dutch, and many other languages) is from left to right. When reading we are trained at starting in the top left corner, then moving to the right and downwards.
• “Next entries” is found at the expected place. In order to advance to the next page, a reader clicks on the link at the bottom right.

So obviously it makes sense to have links at these places pointing to a mysterious “next” and “previous” place. In most cases at least. Weblogs are a little different.

Confusion!

• Weblogs present their most recent content first! Still no problem, this is what weblog readers expect. They don’t want to be bothered with old stories, they want to see what’s new.
• This changes the story and the user expectations. After the newest blog posts, the user wants to navigate to the not-so-new posts: the previous posts. But still the next page. Fortunately, weblog software can disable or hide the link that does not work, so on the landing page the user has only one choice. Still confusing, a simple “read more” would have been better, but okay. Your user clicks and safely gets to the not-most-recent-but-still-very-recent posts.

More confusion

• Assuming that your content is still interesting your reader admires this second page and arrives at the bottom. Now there are two links, as in the picture above. But by now, they have really stopped making sense.
• There is still the notion of clicking in the bottom right corner to move on. This time the next page your user wants to see is the page with a little less recent than the-still-very-recent posts he has just read. But this time there are two real links to choose from. Very confusing.

At this point there are a couple of possible outcomes. 1) Your user suddenly realises he has something else to do and gives up. 2) Your user is feeling lucky and clicks at the correct link. 3) It’s not his lucky day and he clicks on the wrong link.

Even more confusion

Let’s assume it’s not his lucky day and he follows the wrong link. This brings him back to the not-most-recent-but-still-very-recent posts. He quickly realises that this is not what he wanted and he decides to correct his error (yes, he really thinks it’s his fault, it’s surprisingly sad how easily people attribute errors to their own behavior instead of the machine or the interface). At this point your heroic user wants to:

• get back to the previous page he visited
• which from this exact same place was the next page when he was here before
• in order to reach the next unseen content
• which was written earlier in time

At this point your brave user desparately gives up. Wouldn’t you?

In 1956 George Miller wrote The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information. A great paper, but unfortunately often misunderstood and misused. The number 7 is not a limit for the number of items a category on a website should contain for the number of submenus in a menu.

There are a few different types of relationships in hierarchies. Apples and oranges both belong to the category fruit. Horses and dogs are both animals. These relationships have a clear direction: it makes sense to say “every horse is an animal”, but “every animal is a horse” is clearly nonsense. Objects can be classified at different levels of abstraction.

A different type of hierarchy is based on decomposition. A typical family consists of parents and children. A ‘set’ of parents consists of a father and a mother. Fingers are part of a hand. If a list contains items that are each other’s parts, things can quickly get confusing.

There are more types of relationships, e.g. means-ends, specifying goals and subgoals which should be met in order to achieve the goal. Nested TODO-lists frequently use this type.

Back to the category-splitting problem. A good category scheme should avoid mixing different types of relationships, at least at the same level.

Bad:

• fruit
  • apples
  • oranges
• animals
  • meat
  • fur

Secondly, a good category scheme should list items at the same level of abstraction.

Bad:

• fruit
  • apples
  • oranges
• horses
• dogs

And finally, the perfect list contains only items that could be grouped in one big category. WordPress lists “write, manage, design, comments”. The first three are all actions/tasks, “comments” is the odd one out.

A final note: there is some wisdom in the 7-items heuristic. Many lists that are longer are poorly constructed; most well constructed lists are rather short. If a list is longer than 7 items, there is a good chance it is confusing in other respects and should therefore be redesigned.

As long as Evolution is the default mail application in Ubuntu, the current (envelope) icon works better. The icon serves two different purposes:

1. Tell a user what the program does that is run if he clicks on it (in this respect the original evolution icon clearly wins).

2. Help a user find his way to an application that is suited for the task the user wants to do. In this respect any default mail application should be clearly labeled as such, without clutter from other, secondary features.

In this case I think it’s more important that a user can find ‘the’ email application quickly so I wouldn’t change the icon. It would be a whole different case if Evolution wasn’t the default mail software.

In general it’s always a trade-off. An icon serves as a road sign, and should help the user to find the function or program he needs. To achieve this, an icon should be clear, unambiguous, yet give complete information (or at least complete enough). This can be complicated, as icons never work in isolation (and should always be compared to both similar icons and icons for similar functions).

If the system as a whole (user + tools, in environment) should have high quality output, usability criteria should be focused on expert behaviour. The standard values of ease of use, subjective satisfaction and intuitiveness are all less important in this setting. A steep learning curve is not a problem, as long as the investment pays off in the end. In this respect it should be noted that learning processes are often not linear. In many domains early success is followed by a plateau phase or even a temporary decline in performance. Good design should take this into account. It is possible that a product that is moderately useful for beginners and unworkable for intermediate users has the best results in the expert group. Would that be a good product? I would think so.

However, designing for non-experts is easier in some respects. Product designers or usability experts can easily relate to novice users, but cannot easily become experts in the product-specific domain. Their own expectations influence the whole design and testing process. Getting real users for testing is more difficult as well, since experts are few and expensive.

Back to my ATM. The first problem came up when I was asked to which account I wanted to deposit. I was given three options: checkings, savings and visa. Upon selecting ‘savings’ I got an error message: “invalid account”. I tried ‘visa’ and got the same message. Fortunately, the checkings account was not considered invalid.

My second problem was a little different. I put my check in the envelope, sealed it, and found the right slot on the machine. So far, so good. But when I watched my envelope disappearing into the machine I noticed there where 3 little arrows printed on it, not facing the machine’s way but mine. It clearly suggested I had done something wrong! The good thing is that it didn’t come back and I got my money. The bad thing is that the machine gave me wrong expectations, I really expected having to give it another try.

Lessons taught by this green machine:

• Please give your users only valid options to choose from! Invalid options will only cause frustration. (Unless you are absolutely confident they will never choose them, reminding me of the waiter scene in the movie ‘La vita è bella’).
• When multiple actions are allowed, reflect this in your design. Do not suggest they are not allowed.

For software products pay attention to suggestions of clickability, drag-and-drop behavior, and temporarily disabling buttons when their associated actions don’t make sense. Little things to make a user-friendlier product.