UIEye

Interesting little video posted on MSDN’s channel 9 giving tips and tricks for Microsoft Expression Blend 2, mostly for new users of the application.

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.

Read the rest of this entry »

Data Flow – Visualising Information in Graphic Design features a great range of different types and styles of data visualisation in one beautifully presented book it’s a good resource on how to visualise data.

Check out the previews or buy on amazon.

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

If you are not reading thegridsystem.org then you should be.

Its a great resource on all things grid based, though it can be very web focussed its an excellent resource.

Interesting podcast interview with Jesse James Garrett of Adaptive Path.

http://www.teawithteresa.com/2009/02/what-heck-is-user-experience-design.html

“Its a lot like going on a first date”

Podcast link here: http://www.brazenart.com/podcast_media/TwT_005.mp3

This is another older video from TED, done in 2002 but still relevant and very interesting. I particularly love the 3 second delay on the changing room mirror in Prada’s store so that you can see the twirl that you do after you have done it.

Link

Technorati Tags: DavidKelley, TED, Video, Future of Design

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

Very funny video by David Carson at TED in 2003, though recently posted:

Link.

Technorati Tags: David Carson, TED, Video, Design