User Interface Patterns for Dealing with Interactive Content

Mar 8 2011 by Cameron Chapman | 9 Comments

User Interface Patterns for Dealing with Interactive Content

Websites and web applications are getting more and more interactive each day. Content on websites have the advantage over their printed counterparts in that, if we wanted to, we can let our users interact with them.

We have already discussed site navigation patterns and popular web content presentation patterns. Now, let us explore some UI patterns for our interactive website content.

Edit-in-place

Edit-in-place is a valuable UI for web applications that either allows users to create or edit content. Edit-in-place means that users can edit values right where they appear within the page instead of going to a new page with another interface.

Edit-in-place is often seen in WYSIWYG editors and apps that focus on data entry or organization (like mind-mapping apps, for example).

When to Use

Use edit-in-place as a UI design pattern wherever practical within your web apps. It’s more intuitive to use and causes less confusion among users.

Examples

Here are two examples of edit-in-place.

Flickr

In this wildly popular photo-sharing site, users can edit photo titles and certain other information in place.

Flickr

Lovely Charts

This mind-mapping app has an edit-in-place editor, making it super easy to use.

Lovely Charts

Copy Box

Copy boxes are useful anytime you’re sharing formatted text or code with your visitors. A copy box provides formatted text that can be easily copied to a user’s clipboard.

Some sites have an auto-copy feature, so that text is copied as soon as the user clicks inside the box. This saves time and makes it easier for less tech-savvy users to copy the text they need. In most cases, a note indicating that text is automatically copied is displayed next to the box.

Other times, a button is provided to copy text or keyboard shortcuts are provided.

When to Use

Use a copy box any time you want your visitors to copy formatted text or code from your website.

Examples

Below are three examples of copy boxes used on website interfaces.

Snook.ca

This blog uses copy boxes wherever code snippets are displayed.

Snook.ca

Web Designer Wall

This popular web design blog uses copy boxes for code snippets.

Mozilla Ubiquity

The copy box used on this site is formatted a bit differently, with code showing up parallel to the descriptions rather than underneath.

Mozilla Ubiquity

Input Suggestion and Forgiving Format

Search boxes and other input fields that allow for a variety of inputs are becoming more popular. For example, a mapping app might allow users to enter a zip code, coordinates, or a city and state all within the same input box, and either suggesting a correction of the input or allowing the user to enter it as-is and making the server-side code parse and correct the entered data.

This reduces confusion and makes it quicker and easier for visitors to supply the information they want to. It also lends itself nicely to a more streamlined and cleaner layout versus multiple input boxes.

When to Use

Any time there is a variety of possible inputs for a box, it makes sense to use input suggestion and a forgiving format that allows multiple types of inputs.

Examples

Here are three examples of input suggestion and forgiving format.

American Airlines

This redesign mockup by Dustin Curtis would use a forgiving format for booking travel, allowing users to enter their search terms the way they want to.

American Airlines

Google Calendar

The Quick Add function in Google Calendar uses an auto-suggestion and a forgiving format for input.

Google Calendar

Bing Maps

Bing Maps offers forgiving search inputs when you are looking for directions.

Bing Maps

Multi-Step

Any time you have a lengthy web form for your visitors to interact with (e.g. checkout forms, questionnaires, and signup forms) it can be made less daunting if you split it up into multiple steps.

A common practice for multi-steps is to show the user which step of the process they’re on and how many steps they have left.

Note that multi-steps do not negate the fact that your web forms should always be as short as possible.

When to Use

Any time you have a form or other process that takes more than half a dozen questions, it can be helpful to users if you break it up into multiple steps. Remember, though, that having too many steps can be just as frustrating, so make sure you account for that situation.

Also, make sure that answers are saved between each step, in case the user runs into any problems.

In addition, make sure that users can review and go back to change or edit their answers in previous steps.

Examples

Here are four examples of multi-step web forms.

Statement Stacker

This site uses a three-step web form for their signup process.

Statement Stacker

Livestream

This live streaming platform has a three-step signup process.

Livestream

Autobutler.dk

This website uses a five-step signup process, but each step is short.

Autobutler.dk

Onbile

Onbile has a four-step process for creating a mobile website.

Onbile

Hover Controls for Content

UI controls for pieces of content can make it easier to interact with. These controls often appear when you hover over the target content.

Facebook, for example, makes great use of hover controls in the newsfeed. Hover over someone’s status in your newsfeed, and you get the option to block them or remove their updates from your feed. Hover over your own Facebook status or comment, and you get the option to delete it. It’s user-friendly and de-clutters the user interface.

When to Use

Any time you need functions that are easily accessed but aren’t used often, hover controls can be the perfect solution.

Examples

Here are a couple of examples of hover controls for content.

Facebook

On Facebook, hover controls allow admins to edit a Facebook Page’s information.

Facebook

Twitter

Twitter uses hover controls to show options for replying to a tweet, along with retweet options and other controls.

Twitter

Related Content

About the Author

Cameron Chapman is a professional web and graphic designer with over 6 years of experience in the industry. She’s also written for numerous blogs such as Smashing Magazine and Mashable. You can find her personal web presence at Cameron Chapman On Writing. If you’d like to connect with her, check her out on Twitter.

9 Comments

SL

March 8th, 2011

Excellent content, I would like to see more info out there about User Interaction. There’s a lot about User Interface such as colors, placement of calls-to-action, etc. but not much on error messages, communicating with the user, etc.

Thanks much,

Ankur Oberoi

March 8th, 2011

Really great round-up. Can’t wait to use some of these in my projects

David

March 8th, 2011

I would also enjoy more articles about user interaction, maybe even an Ajax tutorial would be nice.

Steve Upton

March 8th, 2011

Nice article, thanks.

Don’t forget that iOS and other touch devices make hover controls and tips impossible. UI designers need to remember to supply hover alternatives for touch platforms or re-evaluate their use overall.

regards,

Steve Upton

bunk

March 10th, 2011

very nice article
would like to see another article about user interaction,i will implement to my project

Frederik

March 26th, 2011

nice article. One comment tho, always make sure there is a way to reach hover options actions without using the mouse, so that people with different accessibilit needs can also use them.

Carl

March 27th, 2011

Moveable Elements:
The best exmaple is in WordPress when you can drag and drop elements arround the screen. These are very useful when the user wants to cutomise the UI to his/her preference.

When To Use:
When you have a UI that is often visited by the same person such as an admin section.

Examples:
We use it on our site http://www.webcoursesbangkok.com in the backend as our site is based on WordPress. I often move things around having our Google Analytics for our main Web Design Courses at the top then stats about the site to the right and our Social interactions below. So I took away all the wordpress news and stuff and put my own stats.

Eric Bieller

April 11th, 2011

Well said.

One thing I would add is using default input text as the input labels i.e. you have a field with grayed out text within it that says “Username” which disappears after you fill it in. Now you are left with an input field with no label. Can be very confusing in some scenarios.

Thanks for sharing!

AJ

September 6th, 2011

Cameron,

Great article, thanks for sharing. I’m still a little confused though. What would I need if I wanted to allow users to upload their photos on to something like a brochure and then print the brochure and their photo from their own computer. I’m more of a graphic designer and I’m having trouble making my designs usable for free from the internet. Thanks in advance for your help.

Leave a Comment

Subscribe to the comments on this article.