Microsoft SecondLight

SecondLight can project images and detect gestures above the display meaning the UI is no longer bound to the display surface. 

It also supports multitouch gestures on the surface.

More at http://www.research.microsoft.com/sendev

Posted in Microsoft | Tagged , | Comments Off on Microsoft SecondLight

Tips & tricks for Expression Blend 2

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.


Get Microsoft Silverlight

Posted in Microsoft | Tagged | Comments Off on Tips & tricks for Expression Blend 2

Application icon design

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:

adobe-cs3-icons.jpg

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:

xtorrent_sizes.jpg

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

Camino icon by Jasper Hauser

candybar.png

Candybar icon by Panic

coda.png

Coda icon for Panic by Iconfactory

LittleSnapper.png

Little snapper icon by RealMac Software

voodoopad.png

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.

Continue reading

Posted in Application UI, icon design | Tagged , | Comments Off on Application icon design

Book: Data Flow

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.

dataflow.jpg

dataflow2.jpg

dataflow3.jpg

Check out the previews or buy on amazon.

Posted in Books, Links | Comments Off on Book: Data Flow

The details that matter

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

Posted in Application UI | Comments Off on The details that matter

The gridsystem

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.

Posted in UI frameworks | Comments Off on The gridsystem

what the heck is user experience design??!!

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

Posted in Usability | Comments Off on what the heck is user experience design??!!

TED: David Kelley: The future of design is human-centered

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

[tags]DavidKelley, TED, Video, Future of Design[/tags]

Posted in Videos | Tagged , , , | Comments Off on TED: David Kelley: The future of design is human-centered

Hilarious look at Adobe's UI

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:

adobe-logo.jpg

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.

Posted in Application UI | Comments Off on Hilarious look at Adobe's UI

Personality in interfaces

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:

[download#2]

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.

[tags]Personality, Interface, Experience, UAX[/tags]

Posted in Application UI, Usability | Comments Off on Personality in interfaces