Interaction Desing Inspiration

Two blog links for interaction design inspiration:

1. no ideas but in things:

2. History of the Button:

Wet Floor Interfaces and user confusion

Nero is a well known CD/DVD burning application. It allows users to create various CD/DVD formats fairly easily.

I've noticed an annoyance in Nero almost instantly when I started using it: It's burning dialog has the Stop button highlighted (focused) by default.

When a user clicks the Burn button in Nero, the dialog above opens and the burning process is started. But Nero makes it far too easy for the user to cancel the process by mistake.

This is what one might call a Wet Floor Interface, it invites user errors when it actually intents to create a clean one-task interface. The burning process is Nero's epicentre but it's interface makes it too easy for users to accidentally slip on the floor and break something.

User interface design is often about making the right thing easy and the wrong thing hard. Interfaces like Nero's burning dialog are not too hard, but someone should go over them with a towel and wipe the water off the floor.

Goldmine: no fat clips!

no fat clips is a wonderful, wonderful blog. It contains daily direct-download links to music videos, short movies, motion graphics and other kinds of visual entertainment.

My favourites: psyopp Anthem, Best of August 2006, The Tale of How, Elephants Dream (the open source 3d movie).

How to score on a date with your users (or: Setting realistic expectations)

Some episodes of MADtv included a returning sketch called Lowered Expectations. The sketch featured weird candidates appearing in a video dating service for those who have 'low expectations'. In a similar way, developers often need to lower their expectations in order to enable successful user/software interactions.

Application developers often expect their users to perform unrealistic tasks. They require users to recall many details, click miniature links with their mice or precisely type long URLs:

In order to define a blog's timezone in Blogger, a user must scroll through a huge list which is sorted by the [UTC+X] offset values. Each item in the list includes the UTC offset of the timezone, continent name and a major city in the area.

Blogger is setting unrealistic expectations. It actually expects the user to know his UTC offset in order to find his location on the list. After a 3-4 minutes of scrolling back and forth, I remembered Israel is either UTC+2 or UTC+3. But defining my blog timezone should not take 4 minutes.

Realistic expectations take user abilities into consideration. It's reasonable to assume that the user can define his location with no problem, but it's completely unreasonable to assume that he knows his UTC offset value.

So how do you score on a date with your users? You make it dead-easy for them to achieve their goals and make it hard for them to get confused and make mistakes.

Weekend Visuals: Design and Illustration

Some quick links for the weekend:


Tim Gough has a unique illustration style and strong color work.


dqbooks is an interesting collaborative design project.


Sven Kils is an insanely great graphic designer.

Shmentura is online

Shmentura:
A new group blog about design and bakery reviews, ran by me and some fellow graphic design students at Shenkar.

Some of the posts will be written in Hebrew, some in English. Lots of visual for everyone.

url: http://shmentura.blogspot.com

Stressed out message boxes and design alternatives

A while ago I was using blogger's spell checking feature (the old version in blogger's pre-beta). During spellcheck, blogger found an error in my spelling and displayed a list of suggestions. I wasn't very happy with the suggestions so I entered my own text in the 'replace with' box and hit Enter.

Blogger then displayed the message box above, telling me that I chose to replace the erroneous text with my own input that was 'NOT VALIDATED' and recommended that I run spell check again.

Aside from being way too stressful, this message text is also way too long. users don't read message boxes. In fact, users dont read.

Sometimes a developer/designer realizes that a message might not be very clear to the user and decides he/she has to do something about that, but usually, decorating the text with ALL CAPS or adding more text just doesn't cut it. Message copy has to be simple and get out of the way quickly. Sometimes, using other design elements (such as a dialog that suggests, "run spellcheck again?") can help solve such issues instead of just wrestling with more text & effects.

If you're interested, Humanized has an interesting article about silly message boxes and some alternative solutions.

MSN Video "Simplicity": Install 3 applications and we'll let you right in

It's no secret that online Microsoft websites often have problem with non IE browsers. But I was really surprised to see MSN Video Israel demanding so much from me when I first entered the site to watch a flick.

The Israeli MSN Video version requires the user to: (free translation from Hebrew) "verify" that his computer "complies with the requirements" and then click the "activate MSN Video link. The problem is, in my opinion, that if the user actually installs those applications, he'll be forced to reboot his computer and won't be able to click this link. Not to mention the fact that the video he originally came to see will be forgotten, surely it's URL will be lost.

MSN Video in English has a different screen, but I'm not sure which is worse. This version suggest 3 simple steps. If this is Microsoft's idea for simplicity, someone clearly has a problem. The site even goes further by suggesting a tour! they're trying to convince me it just might be worth it to download and install this stuff.

The whole point of services like YouTube is leveraging software users already have installed and making it dead-easy to share media on the web. MSN Video clearly demands too much from new users.

This is clearly not the way to compete in the online video space.

Wrong indication and scaring users off

When a new user visits bloggerforum, he sees an image similar to the one above. bloggerforum makes an exceptional effor to inform the user what he can and cannot do. It seems, however, that the user can hardly do anything.

One can assume that the bloggerforum people dont want to scare people off deliberately. The problem is that they're displaying unfiltered information. Someone thought that it's really important to tell the user exactly what he can and cannot do, instead of just placing a reply button for the thread and asking the user to sign up (or sign in) on the next page.

The register to post links are the most important ones on the entire page. They're the door for the most important interaction any user can have with a forum system - post in the forum. These links are not well placed and unlike some other links on the page (previous post, next post, etc.) have no images next to them.

Good design is often about creating clear hierarchy. Communicating to the user visually what is important and what isn't. bloggerforum clearly needs a hierarchy make over.

Quick links round 6: Logo / Identity design

Some great logo / identity design links:

first of all, the great logopond, the flickr of logos. (the logopond resource page contains interesting articles and links).

A massive, one-page logo design portfolio: misipile.

the great logolog blog covers logo design. lots and lots of brilliant logos and articles there. (one of my favourites is: sit).

logolog's author, Denis Radenkovic designs great logos - see the logo portfolio.

identityworks - "goal: to promote management understanding of identity as a leadership tool" (great resource).

LeaLea's the art of self branding (3 part guide).

The Logos of Web 2.0 from the fontfeed blog. reviews web2.0 logos and typography.

The Little Mermaid's syntax colors - creating a themed palette

Graphic design students often learn that color palettes can be extracted from any visual source. Photographs, Illustrations and any visual reference can be used to sample colors. We will use this technique here to create a visually-compelling and coherent syntax-highlighting color palette.

A few days ago, after I wrote about syntax color palettes, a friend reminded me that we used to have a syntax-color palette at work that I always referred to as being the little mermaid palette. I will try to recreate that palette in this tutorial.

During the tutorial, we'll extract a color pallete from a source image using Illustrator and then use Visual Studio 2003 to create a syntax highlighting pallete that matches the one we extracted. Let's get started.

Step 1: find a source image on the net and place it inside an illustrator document. draw a few matching rectangles and place them next to each other.


Step 2: Choose the rectangles one by one and use the eyedropper tool to pick up colors from the source image. Try to create a pallete that represents the primary colors of the source image.


Step 3: Open Illustrator's Color palette (Window Menu->Color) and set its color mode to RGB.


Step 4: The Color palette displays colors of the selected shape. We will use this window in the next steps to copy the RGB values of our colors into Visual Studio.


Step 5: After we've created a palette in Illustrator, we're ready to start applying this palette to actual code syntax in Visual Studio. Open Visual Studio and place the Illustrator and Studio windows next to each other (see image above). This placement will make it easier for us to copy the color values to Visual Studio. As a first step, we'll choose the text font. I use Tahoma Bold for all my syntax palettes.


Step 6: In order to apply the palette to the syntax colors in Visual Studio, we have to select each syntax element and assign the RGB values from the palette rectangles. We will start with the Text element because it determines the background of the entire palette. The Text colors are kind-of hard to get right, and you might need a few attempts to get those to work. When you think you can move on, start setting colors for the Identifier, Keyword and Comment elements. then click Ok. after settings those basic elements you could probably see if your palette is heading in a good direction. Continue on to define the Strings, Numbers, XML Doc & Tags and Collapsible Text.


Step 7: This is a screen-capture of the palette I created after quite a lot of playing around. I was trying to preserve the feel of the illustration, although I did not use the exact color proportion. The result is a coherent syntax coloring palette that would be very hard to accomplish without a visual reference.

Visual Studio 2003 does not have a palette export feature, but you can use regedit to export the FontsAndColors group to back up your syntax palette.

My Little Mermaid palette is available for download: here.

Update: a massive emacs syntax highlighting gallery: Link