Nice example of good usability. It uses a Microsoft Surface to display a social media stream.

As more and more touch-enabled devices enter our daily lives, some attention should be given to the usability aspect of the interface as well.
Guifx has a nice 4-rule article on how to label touchscreen interfaces.

A great video from Punchcut, entitled Considerations for Designing Touch UI.

Their 5 considerations:

• Design for immediate access
• Keep gestures smart and simple
• Leverage clear mental models
• Design for real hand sizes
• Touch feedback is key

One of the best applications of usability principles applied to a social network.

Nowadays, usability is a hot-topic. But a site, program or product needs more than just be usable. The whole user experience needs to be considered.
Therefore one should keep the user experience honeycomb in mind:

Each of these topics should be addressed when designing or updating how people experience your product.
(more…)

If you’re a webdesigner or an operating system developer, all those systems have users. Most of the users that will be utilising your software, won’t be as technically experienced as you. Yet we keep blaming the user when something is wrong. Here are some truths about those users:

• Users aren’t stupid. The system or application you designed just isn’t easy enough to use. This means that you need less complexity (preforable without losing functionality), simpler layout and better explain the user how to use it.
• Users aren’t lazy. Only very few users want to master the application they are using. Most of them just want to get their things done. So don’t expect them to know the system in and out. When they need an option that’s hidden away, why not point them in the right direction with some friendly text or a link?
• Users aren’t incompetent. As said before, most users aren’t technically experienced, so why not use ordinary understandable language? Words and phrases everyone can understand. The amount of errors that occurs (and frustrations that occur because of those errors) will also shrink when the user understands better what you expect from them. Why not even give them a hint? For example the format you expect a date to be in.
• Users aren’t perfect. There will always be errors that occur, maybe due to user input, maybe not. It’s the task of the developer to handle them and handle them nicely. Don’t be ashamed that something goes wrong and hide it. Tell the user if an error occured, why it happens and how it can be prevented (or when it will be fixed in case of a system being down for example).

So by keeping these 4 truths about users in mind, you’ll develop better software.

Here’s a nice article on the demise of Flash. Like the author, I too love flash sites. But there are also a lot of reasons why not to use it:

1. Annoying Flash Ads
2. Not search engine friendly
3. Bad usability (each flash site has its own way of operating it)
4. Not accessible to people with disabilities
5. Downward compatibility issues
6. Overburdening of the developers
7. No or bad internationalization
8. Not compliant with any open standard.

Two extra reasons I want to add, though: Since you need a plug-in to be able to see a flash site (over 50% of the internet users has one installed), you’re reliable on an extra piece of software which isn’t guaranteed to be available. So people might not be able to view your site at all. So reason number 9, you can’t be 100% sure your message reaches your target audience. And secondly, there is no way to enable tracking as you can with HTML sites.

Conclusion: Flash looks good and tempting but only use it as you would use an image, not as a complete site or for critical parts, like your navigation structure.

I was recently cleaning up my RSS reader when I came across this article by Scrivs on the benifits of removing the www from your url from a few months ago. The idea that the http://no-www.org/ has been arround for a while (since at least 2003), but I don’t totally agree.

According to no-www.org the reason www. is depreciated is the following:

“By default, all popular Web browsers assume the HTTP protocol. In doing so, the software prepends the ‘http://’ onto the requested URL and automatically connect to the HTTP server on port 80. Why then do many servers require their websites to communicate through the www subdomain?”

From a technical point I can see why they are probably right. The http:// prepend already signals that a webserver is addressed. That the webbrowser assumes it by default, is normal, since you use it 99% of the time to visit websites. So yes, when addressing your domain root with the HTTP protocol, you should get the webserver giving you the default website. But I think your server should automatically redirect you to the www. subdomain silently and not the other way arround like the no-www.org suggests. The silent redirect is for seach engine optimization purposes, since search engines see them (the URL with the www. prepend and the one without) as two different domains.

The reason why in my opinion the www. has importance is for usability reasons. When you hand out a business card, or put your website on a flyer or any other offline medium, you don’t normally add the http:// for two reasons. First it has no point on offline media, since you can click on it and be redirected to the site and as already said, the browsers automatically add it anyway. Secondly because it looks too technical. People who aren’t tech-savy, don’t know what it means, except that is has something to do with computers and the internet. But when they see an address www.yourdomain.com they immediately know it’s a website that they can consult when they want more information on the product/service you’re advertising.

No-www.org also states that you don’t use mail.yourdomain.com when you’re using e-mail (which would technically be possible in most cases). But from a usability point of view, you don’t need it. The reason of course is the @ sign that you see in the address. It is then clear we’re dealing with an e-mail address.

So for usability reasons, add the www. in front of your domain name.

When you’re using an image as data and not as just a design part, you should use the (X)HTML image tag. Everyone who has even a little of knowledge of a making a web page knows that. You should also set the alt attribute, that is required in XHTML and which should contain a text alternative of what the image represents.

Nothing exceptional thusfar. But what happens when the image is invalid and can’t be displayed, or when the image isn’t found/accesible (access denied for example)?

The results are different between browsers. Have a look at this invalid image test page in different browsers like Firefox and Internet Explorer.

In Firefox you’ll see nothing, as if nothing is wrong. For the image where the alt attribute is actually containing something, you’ll see that alternate text, but it might as well been normal text, no way to separate it from normal text.
In Internet Explorer on the other hand, you’ll see the all known not available image: . Even when with the alternate attribute containing content, you still see that there is actually an image that is not available.

I’m a big Firefox advocate, but I must admit in this case, Internet Explorer is correct in my opinion. Since the image tag is for content and not for layout, you should see when there is a problem with the content, just as you’ll get an 404 error when your page is not found.

When you surf the web a lot you definitely have come across websites that are so easy to use that you immediately knew how to work it. And you definitely came across websites that you spend 5 minutes and left, because you couldn’t even figure out how to do a simple task as search.

So you see. Not only how many features or how your applications looks, but also how the user experiences it is important. I dare to say even more. The usablility is what makes or breakes your application.

A few things a usable website should be:

• Quick and easy to learn/navigate: people don’t want to spend hours and hours learning yet another tool.
• Easy to use: users want to achieve their goals in a minimum amount of time.
• Good error handling: the application should be very forgiving to user errors and it should be easy to recover from them. Also provide enough explaination and/or even solutions to solve the problem.
• The user interface should be consistent with the operating principles: letting the user see what the function that particular option has, aid in the learning process.
• Make it simple and open: to find something in a crowded interface is timeconsuming and is stressing. Clear pictograms also help with memorizing.
• Enjoyable to use: this one speaks for itself, I think.
• Aestetically pleasing: this is especially important for the first impression. When a sites looks good, it invites the user to explore.

(more…)