September 2007

Chapter Business   |   Presentation   |   Q&A

Chapter Business

Announcements:

  • 10 Minutes talks are next month at MIT, on October 16th.
  • World Usability Day is November 8th - This is the third year that we've done this!
  • We're looking for volunteers to volunteer the day of the event, and volunteer to own an activity.W We're also looking for sponsors. Contact Chris if you're interested!

Presentation

This talk is a continuation of the talk given at mini-UPA. AJAX - Is Asynchronous JavaScript and XML, but now it stands for dynamic sites. The ability to transfer data while the page is still displayed.

There are many examples, but a simple one is this map--tied with homicides from the LA Times. When things are clicked the page is updated, with tooltips, etc. The page just updates the parts that need to be updated. A lot of this stuff isn't new, it's existed for years but what's new is being able to do these actions in a browser.

A lot of sites use Flash but it's gratuitous. It's fun but it doesn't add function. So what's the bottom line? When do these things help you?

Some history: In 1976--we started with dumb clients. You sit in front of them and they connect back to a mainframe. These send green screen instructions back and forth. Really simple, really dumb. The mainframe/mini-computer does the work.

It turns out that this is very similar to the web of 2001. The remote server does all the work and the client is the web-browser. It's a little less dumb but we're still not using the power of the local computer.

Because of the network connection, the latency causes a delay in the experience. Now that connections are getting fast we can start to do smarter things.

Now smart client tools emerge:

  • Java - machine independent but feels out of place
  • ActiveX - belongs in Windows but only Windows
  • JavaScript
  • AJAX
  • Flash - we gain power but we're still learning how to use this.
  • AIR (Cool codename Apallo boring product name)
  • Silverlight (Cool product name, boring code name)
Now we're getting power to do things on the client.

Examples:

  • Google maps - AJAX
  • Yahoo maps - Flash

Smart client spectrum:

  • Amazon embeds small pieces of AJAX in a page.
  • Broadmoor.com - Single page Flash page booking system.

The Usability Spectrum: Traditional usability deals with eliminating frustration. After it's not frustrating you want to create 'delight.'

Rich applications allow us to put computing power toward creating delightful things. The big challenge is that we don't have good metrics of delight. We don't know how to measure where an application is delightful or how to increase, reduce or change delight. Understanding how to do that is really a big challenge.

Fortunately, this has already been done. Games are about making things delightful for years. Games that don't delight are not played. Need to be responsive and interactive.

Games like Tetris, Halo, etc. need to be immersive. Challenging isn't the same as frustrating. You want the interface to be easy and you want the game to be challenging. Games like Myst use exploration to teach the rules of the game.

Things like Flickr use this exploration to add captions and titles. Not always obvious.

Comparison of two stores: Lands End allows you to make changes in the page, and uses AJAX to keep things updated as you change your cart and make product choices. On the GAP web site, they update the page based on inventory and it's confusing to customers because it's from the store's perspective, not the customer's.

NetFlix has a one step checkout for buying a DVD. You click and you're done. They have your address, they have your billing info.

The technology has changed, the principles are the same.

Other examples: NetFlix has a sortable queue, but it didn't show any affordances for drag-drop. At Yahoo Movies, you rate the movies so that you can communicate the range. They use an A B C D F grading scale but the scale isn't meaningful. They updated this so that as you hover, they tell you it's Good, Memorable, etc. Uses progressive disclosure to show additional information as users move around.

Users often don't move the mouse until they made the decision of what they want to do.

Design for appropriate feedback: Give the user some clue on what to expect.

Yahoo mail and photos allows you to do ctrl, drag select, etc. to allow for complex interactions. This is similar to desktop interactions.

Sometimes dynamics can get in the way; on Best Buy the user tries to search but the menu keeps popping up. (Hover menu)

Design for flexibility:

  • Allow user to clearly change their page.
  • Design for Fitt's law - size and distance impact click-ability.
  • Drag and drop is harder then clicking.

Design defensively:

  • Prevent errors
  • Make any required message clear.

Design for recognition: Lots of applications use a carousel for the display of items in a circle. It's novel but difficult to use. Use things for a purpose to make it easier, not just for the fun of it.

Appropriate rrequencies: You use some things every day and others only once in a while. You need to design for the frequency that people use things. So the design should be different if you only expect to do things once in a while.

Additional information and tips are available from UIEtips and blog.
The UIE conference will take place on Nov 5-8 2007 in Cambridge; use the UPA promotion code.

Q&A

Q: What about accessibility?
A: Well actually a lot of the Flash, AJAX and JavaScript can help and enhance accessibility if you know what you're trying to do. With a little effort you can make this stuff accessible.

Q: The more we get dynamic the more it becomes like the desktop. Are there rules of thumb for how to do this?
A: If you're going to do this you want to go pretty far. Watch what people's expectations are and impact the presentation or the interactions to match expectations.

Q: When you research these sites how do you know it's using AJAX or Flash?
A: If you right-click you can tell if it's using Flash, if it's dynamic and not Flash it's AJAX.

Q: How do you measure delight?
A: We're still starting to look at this. You can start to do this with brand engagement. People who are customers of a company will have a different feeling about computers if you own a Dell vs. Apple. Desirable is before you buy it, delight is after you use it. We're still starting to learn.