UIEye

This article by Anthony Colfelt should be required reading for anyone developing and designing software in the modern world.

Even if you are not following an Agile process it places a fantastic point on how the design of your product can be impacted by the artificial constraints put forth by many practitioners of the process.

I have been there and dealt with the problems too and for the starting phases of a project I can only agree that Agile doesn’t provide the best framework to capture all the successes UCD could bring to a project.

Realism in UI Design:

The thing on the left is a house. The thing on the right means
‘home’. Somewhere between the two, the meaning switches from ‘a
specific house’ to ‘home as a concept’.

http://ignorethecode.net/blog/2010/01/21/realism_in_ui_design/

(Via Daring Fireball.)

Recent U.I. Progress for Firefox 4.0 on Windows: “

Longtime Firefox user interface designer Stephen Horlander offers an update on his continuing work on the browser’s next Windows version. It’s a fascinating peek behind the scenes at how an intensively scrutinized design project balances platform evolution, user feedback, team input and new ideas. It’s well worth a read, as is this wiki page that more formally documents how the user interface is changing with upcoming releases.

(Via Subtraction.)

Some really inspirational and beautiful concept maps for download over at Dubberly Design Office.

Most are about A3 in size, and all are worth looking at!

The work on their site in Application design is also worth some minutes of your time.

Application icon design is more important to the interface than we often first think. It is the representation of the application or interface element that a user first interacts with before the program, and we need to make sure that any use of icons is clear to the end user.

It should clearly distinguish between itself, and other similar programs particularly those from the same family of applications. It is of course more of a branding issue on how to define family and relationships between products and hence icons, for instance here is how Adobe maps out theirs:

but as you can see they do not make any differentiation with shape, just the letters and color. This I feel is a big mistake, using shape means they translate better to black and white, the letters do help but is it clear what “Ic”, “Cp” or “Rh” means? They of course have internal shape but at smaller sizes they suffer.

As display technology become increasingly advanced we start seeing resolutions hitting more than 96ppi and that means even more detail for icons which can only be a good thing if the design allows for this. But 16×16 icons, pretty much standard size for favicons, and icons in tool bars also need to be taken into account. These are the most frequent launchers of applications. Here is an example done well, xTorrent, it clearly shows that the icon hasn’t just been resized, instead detail that we create noise at smaller sizes has been removed, leaving the outline shape and colour with overall detail:

This design was done by Jasper Hauser, and he has some interesting things to say about the process behind the creation of the icon on his blog. From this page he also links to the his post on the obviousness of icon design.

He makes very good points about the obviousness of icons, but I feel that it is perhaps even more important to make clear differences between icons that will be used together such as those in the Adobe Create Suite.

As a taster here are some more examples of well done high resolution icons:

Camino icon by Jasper Hauser

Candybar icon by Panic

Coda icon for Panic by Iconfactory

Little snapper icon by RealMac Software

VoodooPad icon by Flying Meat

So my steps to creating good icons for applications would include:

1. Use color, shape and design to distinguish between icons.
2. Try to make them have some connection with the application.
3. Make sure that the design works at 16px and 256px, particularly for OS X.
4. Do not simply resize an icon down, remove detail, thicken lines, even redraw lines when needed.
5. Make sure that they will work on variety of backgrounds, including cross platform.
6. Do not rely on just text or having text around the icon.
7. Try and get a professional to do the job of the actual design and brief them well.

There are more icons uploading into the extended entry of this post.

(more…)

Excellent article by Kevin Potts on alistapart.com titled The details that matter.

Again although it talks about web gui design it has many great points on what makes a good designer that talks little about the tools of the trade but actually about managing communication with others around.

“In practice, though, there are two types of people when it comes to paying attention to detail: those who say they reviewed their work, and those who actually reviewed their work.”

So what’s wrong with Adobe’s UI: Well this is a very funny tumbl log of plenty of comments of things that could be done better:

http://adobegripes.tumblr.com/

Things that particularly standout are issues with there cross-platform UI. Although praised by many as a good example, it just shows that some of the finer details are missed.

There is a lot of good content in this slideshow by Stephen Anderson, and goes a long way into why we should inject personalities in to the interfaces that we are creating.

The underlying message is “You can’t separate usability from visual design” and that is directly attributed to business reasons of why aesthetics are important.  Namely that cognitive responses to interfaces from attractive  and usable visual design increase the value proposition to a user base. If you care about the function of your product you also should care about the visual design.

If a Application design is attractive and usable, humans response is more passionate and emotional, and the user is more likely to use the interface again and build trust in the application.

Human emotional response to objects and the way we interact with them is that we start injecting and making a personality around that object, and this is often a direct response from the form of the object.

Items shown in the slideshow shows Sony’s Aibo, Volkswagon Beetle and Apple’s iPod shuffle, all items know to produce an emotional bond with people, who like to project their personality on to such products as an extension of their own personality.

As Frank Spillers writes in his paper “Emotion as a cognitive artifact and the Implications for Products that are Perceived as Pleasurable“:

Product design that provides aesthetic appeal, pleasure and satisfaction can greatly influence the success of a product. Traditional cognitive approaches to product usability have tended to underestimate or fragment emotion from an understanding of the user experience. Affect, which is inexplicable linked to attitudes, expectations and motivations, plays a significant role in the cognition of product interaction, and therefore can be usefully treated as a design aid. Emotion influences and mediates specific aspects of interaction before, during and after the use of a product. These affective states regularly impact how a user manipulates and explores a user interface in order to support a desired cognitive state.

Its a very interesting paper, worthy of further reading so I have provided a link for download here:

The value created by working on the usability of an interface can be directly extended by making sure that the aesthetics of the product are suitable and of high quality. It can also differentiate your product from products of a simliar nature. A good example of this is the iPod, it wasn’t the first MP3 player by any means, but it was the first to capture its intended audience and then some.

Technorati Tags: Personality, Interface, Experience, UAX