UIEye

Really interesting article about not only the future but the past of wireframes: http://www.madebymany.co.uk/the-future-of-wireframes-00991.

Its talks a lot about website wire framing, but they are such a general resource that it is worth taking the time to take a look at this article.

“Oliver Reichenstein and Aza Raskin, head of user experience at Mozilla, have been thinking about the future of tabs in Firefox, and some of the resulting mockups are quite intriguing.”

Via readwriteweb

Images have been uploaded to flickr from Donna Spencer’s upcoming book “Card Sorting: Designing Usable Categories”:

There is also a very interesting article on Boxes and Arrows, Card sorting – a definitive guide with a much needed explanation of what card sorting is:

“Card sorting is a quick, inexpensive, and reliable method, which serves as input into your information design process. Card sorting generates an overall structure for your information, as well as suggestions for navigation, menus, and possible taxonomies.”

Of course there are alternative methods, such as affinity diagramming.

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

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

When designers first take to the design process one of the most influential decisions they make is whether to use light text on a dark background, or dark text on a lighter background. Often the decision comes from many angles, including branding, personal preference, identity of the site/application and other more subtly reasoning. But the most important factor should always be what is the audience doing and how does that affect readability.

For this site, and for one of the applications that I have been building I too am having to make this choice, and for these two particular problems I have chosen completely different schemes.

As always I am making the decisions based on how the designs are going to be used. One is this website – it will probably feature different images in a post together with quite a lot of text. The other an application (although its built with web technologies it is basically an application front-end). The application primarily deals with organising video and other content, and doesn’t often feature long bodies of text.

When we came to design this application co-workers showed their preference for dark backgrounds, partly due to some problems with their eyes, and also because this works in the environment of broadcasting quite well. We will be featuring large image and video previews and exposing functionality around this, but the number one element was usually a preview. Using a dark background made sense for the majority of the audience as it increases the prominence of the most important visual item, but there was another important demographic in the audience of the application. This demographic of librarians usually dealt with text, tags and other keywords to describe and annotate the content held within.

When dealing with text, a lot of users are accustomed to white background with dark text; books, newspapers (have a look here for more inspiration), magazines have been using this for years and continue to do so and probably will for many years.

So the solution was to give switchable themes for the user. Librarians or others could switch the design to the light background to help them within their role, and others that wanted the standard look and feel could use the other theme. Users are defined by groups and roles and at every level a standard could be applied for them or they may change it themselves.

Coming back to this website, its still in the design phase and initially I thought about going against the flow, but this would have been the wrong decision, and I would be ignoring everything that I have learnt in the past purely to do something slightly more interesting for me.

There are a number of utilities (among them Opera’s users style sheets) available to help those that want to change their browsing experience to change color – these are particularly helpful for those that are having problems with their eyes.

So what should we be doing, well this is a (limited) checklist:

• Contrast is all important. Poor contrast between background and foreground makes it very hard for the brain/eye to distinguish whats important and what isn’t.
• Ambient surroundings of the audience is also important. If your readership is spending most of their time in dark surroundings your light background could be like staring at a lightbulb.
• In almost all situations you should never use 100% white and 100% black, its just to harsh unless your monitor is flawed.
• Fonts, leading and kerning all directly influence readability. More of this will follow in another article.
• It’s inadvisable to mix color at the extremes of the color spectrum. Extreme blue on extreme red would make text extremely hard to read. For more information take a look here at this study by the department of Psychology at Austin Sate University.
• Not everyone has the same vision. Try and cater for your audience as best as possible but you will not solve it for everyone. If design websites, make sure that its as standards compliant as possible so utilities will be able to switch color.

So my design process is in its first phase at the moment, but the readability of the site is also influenced by other factors, so a simple round up should then be taken further with font choices, line spacing, column width and other details.

There are some studies and additional reading here:

• http://www.laurenscharff.com/research/Oxford.html .
• The joy of Visual Perception.
• Graphics and Web Design Based on Edward Tufte’s Principles
• Colour Contrast Check

Technorati Tags: GUI, Readability, UI, Interface Design