Dec 02 2009

Interaction Design Tips for Developers To Improve User Experience

Slider with disabled=Which of the above buttons looks more clickable?

As a developer, you may build interactions that are designed during  the earlier stages of a project when the focus is on the way things look. There may be some discussion of how the user interacts with the design, but this is often overlooked.

The way that your website behaves when a user interacts with it is crucial to good user experience. If a component of your site confuses your users when used, there’s a good chance the user will be distracted.

Sliders
The animation of a slider like the one pictured above or one such as SlideDeck must convey movement or progress. If the slider moves horizontally or vertically, let the user know what’s happening. Changing content without an animation creates an opportunity for a disconnect, and that’s not a good user experience. Captivate your users with animations that make sense and convey motion.

Create Hints for Your Users
When an interaction is presented, users don’t always know what to click on. Help your users by creating different states for the click-able areas elements. Underlining text or making it bold is fine, but changing a button’s appearance as the mouse moves over it is even better; it’s simply begging to be clicked at that stage. Don’t be afraid to give your button a large “hit area” either. With a larger hit area, the button will spring to life as the user’s pointer approaches it, hinting at  the possibilities ahead.

If the user clicks a button that changes something, highlight the changed area to let them know that something happened. This is especially applicable on forms where choosing one option enables/disables other options.

Why is This Important to the User?
A confused user is a user close to giving up. You shouldn’t confuse your users; they’ll become frustrated and may leave your site, potentially costing you business. Users like it when you can predict their needs, but not when you hold their hand and pull them in a certain direction–but fear not, for it is possible to straddle that fine line. Consider a page that displays employees’ photos; the page  has photos of the employees below a switcher that says a bit about each person.

This switcher highlights the smaller image when selected
This switcher highlights the smaller image when selected

Clicking one of the numbers at the base of the switcher will showcase that employee (notice the way these numbers change as you hover over them) and also highlight the employee’s smaller photo; very good. Scrolling to the end of that page, and clicking an employee’s photo, will cause the page to scroll back up, to showcase the newly selected employee. Without this interaction, the user may become confused or consider the interaction “broken”. It does take the control away from the user briefly, but in this case it’s well used.

An Example of Poor Interaction
PayPal
‘s developer site’s spotlight is a horizontal slider with three flaws:

  • The previous and next buttons don’t indicate if they are click-able as your mouse moves over them. They don’t even change when you actually click on them!
  • Clicking the previous or next buttons in rapid succession causes the slider to behave unpredictably and it then appears broken.
  • The indicator at the bottom of the slider isn’t click-able, and has no function other than letting you know that you’ve reached the end, but is too small to drive the point home.

If a user double clicks the previous or next buttons, the slider advances strangely and some of the material is truncated. Repeat this in rapid succession and all hell breaks loose! The slider also loops, so the horizontal motion serves to make the user think that there’s a beginning or an end when in reality there isn’t.

This slider leaves much to be desired and can reduce user confidenceThis slider leaves much to be desired and can reduce user confidence

The broken interaction is unintuitive and takes a few points off the confidence meter. It makes you think, “What else on this page isn’t coded properly? What will break if I click this other button five times rapidly?” For a site like PayPal, that’s a dangerous way for your users to see you.

I’m not about to criticize PayPal without presenting a solution: They need to do one of two things to this slider: either queue your clicks so 5 rapid clicks = 5 slide advancements one after the other, or disable the previous and next buttons while animation is in progress, ignoring the clicks during animation. It wouldn’t hurt to give the previous and next buttons hover, inactive and active states either.

A well Polished Interaction Inspires Confidence in the User
An interaction that fills in the (mental) blanks for the user while they are using a website is good for user experience, and if done right can even get the user excited about participating in the interaction. Generally, excited users not only turn into conversions, but can also be an essential tool in spreading the word about your product/service.

Get the interaction done right and make it solid. Your users will love you for it.

Related Reading:

Reblog this post [with Zemanta]

About the Author:

Jamie is a developer at digital-telepathy, a user experience design studio that specializes in creating products like SlideDeck. He likes creating 3D things in his spare time. You can also follow Jamie on Google+.

Leave a Response