5 lessons in UX design

UXPin's Jerry Cao outlines five best practices when it comes to creating online interactions.

The art of interaction design is the art of communication itself. It incorporates psychology, aesthetics, written composition, and business tactics – not to mention the technical and design-specific skillsets necessary to build a site or app.

The free, downloadable ebook Interaction Design Best Practices: Mastering the Tangibles explains how the specialities interweave to create the singular practice we know as interaction design.

The first book explores the first three tangible dimensions of interaction design – words, visuals, and space – while the second ebook looks at the intangibles of time, responsiveness, and behavior. We go in depth on how they affect IxD, and the best practices for each.

Since both books combined make up close to 200 pages, these 5 below are just scratching the surface.

01. How Fitts's Law applies to design

In 1954, psychologist Paul Fitts released the findings of his studies on human movement and how it relates to target areas. While web design was still a few decades away, his research has, in modern times, made an enormous impact on the industry.

Image courtesy of Danny Hope, www.flickr.com/photos/yandle

We can see his law applied directly to screen layouts in various ways:

  • Clickable areas of buttons – The applications of this are two-fold: first, that higher priority buttons be presented bigger than others, and second, that the clickable area of all buttons is as large as possible (meaning not just the word within the button graphic is clickable).
  • Place key functions in easy-to-reach areas – In order to minimize the amount of thought involved in moving the cursor, the most popular functions should be placed in the optimum areas of the screen – namely the borders and corners, as little mechanical skill is needed to move the cursor there.
  • Optimize proximity – If two or more functions are frequently used in tandem, place them as close to each other as possible. This helps the user notice where the next step is, and minimizes the amount they must move the cursor.

As you'll notice, the heart of Fitts's Law is that users should move the cursor as little as possible. By paying closer attention to elements' location on the screen, designers can improve their UX and create a more streamlined interface.

02. Don't neglect microcopy

You're already aware of how important your written content is, but do you know just how much weight individual words carry? A line of instruction, the phrasing of a call-to-action, or even changing the word 'proceed' to 'go!' can all have game-changing effects on your interface – sometimes to the sum of $300 million.

Image courtesy of UXPin

Microcopy is best used to explain a potentially confusing part of the interface, alleviate some fears or concerns the user might have, or advertise small features.

For avoiding confusion, user testing can reveal where most people get confused, so you know where to add additional instructions. You don't want to overload the user by explaining every little function, so research will show you if and when it's necessary.

For alleviating concerns, a small reminder that you won't spam, or that your newsletters are infrequent can make or break a conversion. This kind of feedback is welcome when the user is about to make that step anyway. In that vein, mentioning there's the option of a “free trial” or limited time promotion is just good business.

03. Lean on patterns for support

UI Patterns are familiar elements that exist on a lot of different sites. For example, if you see a right-facing triangle over an image, you know that it's a play button and that the image is really a video.

While there's something to be said for individuality and standing apart from your competition, using tried-and-true patterns can spare your users the hassle of having to relearn new systems for every new site they go to. In the play button example above, that one tiny graphic relieves the necessity of including a line of instruction or a confusing new icon representing “play.”

Image courtesy of UXPin

In a nutshell, patterns are shortcuts that save your user from extra cognitive load – in other words, thinking too much.

They give your interface an intuitive and familiar feel, which puts the user at ease and frees up their attention to focus on what's important, for example, the content of the video.

Next page: more quick lessons in UX design