At work I was assigned the task of evaluating the major libraries and selecting one for our web applications. I spent some time reviewing the major players and decided to switch from script.aculo.us to Jquery for the following reasons:

1. CSS syntax - Jquery uses the same syntax as CSS to identify elements within the DOM

2. Unobtrusiveness - Because the function identifies the object using the css selectors, there is no need to add any JavaScript in the markup.

3. Microsoft - It seems more and more apparent that Microsoft is hooking their cart to Jquery. Since we’re a .Net shop it was an easier sell than the others.

4. Support - There is a thriving community with examples, tutorials and forums for answering questions.

I’m here at the UIE 13 Conference here in Cambridge MA. Day one is all day sessions. I’ve chosen the Bulletproof Ajax: Designing Interactive and usable Ajax solutions by Jeremy Keith.

Jeremy went over the building blocks of Ajax and some of the history. I’m really enjoying the high level building block discussion. I always find it easier to embrace a new concept if someone explains the “why”. Jeremy has done a great job keeping the technical stuff light while balancing the need to understand the fundamentals. I’ll update later after we put some of the fundamentals into practice. Stay tuned.

I’m feeling a little left out of the iphone, ipod, idog phenomenon going on. So I decided to take a look at some common items and see if I can add “i” to it and see how they would look/interact. The first design is a simple thermostat. I’ll take a look at it’s UI and basic functions and see if I can make it into an ithermostat. The first time experience is below. I’ll create some of the additional screens later. Let me know what you think.

Default Interface

Unlocked

According to several sources the mirror has been around since the 13th century (give or take). Just about everyone is familiar with it. You know, that shinny thing that looks back at you in the bathroom.

But leave it to the product designers at LG to turn it into a “feature”. I think we’ve officially run out of new features for the phone.

See commercial below:

Now if you’re really into cutting edge check out the Jitterbug:

Imagine that. All it does is make calls and keep track of your contacts! No games, no facebook, oh yea and no mirror.

If you use browser tabs as much as I do you’ll love this tip. Clicking the scroll wheel on your mouse will open a link in a new tab. I’ve been right-clicking > Open in new tab for years. This is a single action that does the same thing. Works in FireFox and IE7. Enjoy!

Give it a try!

Sliders are a common way for users to adjust elements with fine granularity. They can offer more choice with a smaller footprint than a drop down menu. They also offer absolute variables so the user never enters into an error state. The problem with sliders is their accessibility. They require decent dexterity since the target for the mouse is ofter small but recently I found this new method that has full keyboard support.

This method offer full keyboard capabilities as using unobtrusive JavaScript which is a method that separates the JavaScript behavior from the page markup.

Here are some other examples of unobtrusive Javascript

• Lightbox
• Calendar pop-up
• Star Rating
• Image Reflections
• Slide Show

If you’re like me, you’ve got some version of iTunes running on your computer. And if you’re like me, you see a prompt to download a newer version of the software just about every time you launch the application.

I guess since all the other upgrades were pretty seamless, I pretty much just agree to upgrade. I click on the “Yes” button on go on my merry way.

But not so fast… I recently noticed a new icon on my desktop

Hmmm. I don’t remember installing Safari. I did a little searching and it turns out my latest agreement to install iTunes came with an addendum (Safari). I guess I missed the news on this but I found it a bit intrusive.

I’m going to keep Safari installed (I like to check my webapps in several browsers). But, I’ll be sure to read the Terms of Use a little more carefully before clicking “Yes” in the future.

How can you design an interface which is both easy to understand the first time you use it and efficient once you’ve learned it?

This is a dilemma which designers wrestle with because it’s difficult to understand what domain knowledge the user has with your product and how easily they can execute certain actions. One common mechanism used in the first time experience is a wizard. The wizard is useful when guiding the user through a complex set of inputs. It breaks the series down into small manageable chunks of questions so the user isn’t overwhelmed.

But what happens after the user has gone through the wizard and now has a reference? Understand what inputs are needed and can easily complete the task with little effort? Why force them through the same series of screens and ask the same questions?

Adobe Dreamweaver has an interesting method to allow both user’s the ability to interact with their site properties based on their level of expertise and familiarity with the process.

Basic View

Advanced View

This method allows the user to become more efficient with each subsequent task once they have learned what each property means.

Good user experience design allows the product to adapt based on the user’s knowledge of the product. Here is another example of how the design should remember what the user wants.

Your application should account for all these user decisions and serve only what the user needs to successfully accomplish their goals.

Documenting interaction design can be a little tricky. What the designer is trying to convey is form(visual) and function(behavior). Often what needs to be articulated is the movement and actions of the user. Movement isn’t easily translated into static documents. Showing screen to screen interaction is usually done with a flow diagram:

There are some established tools for creating these (Visio, OmniGraffle, Illustrator) and a few libraries that make it easy. I prefer Jesse James Garrett’s IA Visual Vocabulary

But when it comes to on screen events the practice of documentation and it’s intended benefit aren’t as established. Some examples are:

Callouts: A document with boxes of text which describe the interaction on the screen. e.x “User clicks “submit button” - open JavaScript Alert box “confirm all changes”

Behavior tables: Similar to above but instead of cluttering the document with boxes the designer uses indicators to denote interaction and uses a legend to fully describe the function.

Animated Gifs/Flash: These are a bit more labor intensive but they can be very useful to show the exact interaction (blind open 1.2seconds after click). Creating these artifacts is also a good exercise for the designer so they can explore different options and see the interaction before it has been coded.

Prototyping: This is probably the most time intensive but usually yields the best results. If done well the up front design work can be integrated into the product. There are some great new tools (WPF and Flex) being developed to make this process easier with less “throw away” work.

As interfaces become more complex and the user experience becomes more of a differentiator in the marketplace, designers will need to adapt to more robust and integrated design tools to remain competitive and relevant.

I just installed Fire Fox 3 (beta).The first thing I noticed was the change to the forward and back buttons.

All browser buttons are not created equal. The back button gets much more use than the forward button. From Nielsen:

The Back button is the lifeline of the Web user and the second-most used navigation feature (after following hypertext links). Users happily know that they can try anything on the Web and always be saved by a click or two on Back to return them to familiar territory.

Since the back button gets much more use, the designers at Mozilla have grown it in size in comparison to it’s brother the forward button. Allowing for a larger target makes it faster for the user to accomplish their task. (see Fitz Law)