Interactive design: UI patterns for interactive web content

Article Description: Web sites and Web applications are becoming more interactive. The advantage of the content on the site is that it is better to have users interact with them if we wish.

Web sites and Web applications are becoming more interactive. The advantage of the content on the site is that it is better to have users interact with them if we wish.

We have discussed the Web navigation model and the popular Web content presentation mode. Now let's explore some UI patterns where we have interactive web content.

In-place editing

In-place editing is a valuable UI for Web applications that allows users to create or edit content. In-place editing means that the user can edit the contents of the current page directly, without having to go to a new page that uses a different interface to edit it.
In-place editing is common in WYSIWYG editors and applications that focus on data items or organizations, such as the Mind-brain map program.

When to use

As long as your Web application is pragmatic, you can use in-place editing as a UI design pattern. It is more straightforward to use and does not cause so much confusion to users.

Example

Here are two examples of in-place editing.
Flickr
In this very popular photo sharing site, users can edit photo titles and other specific information in place.

Lovely charts
This brain map is used with an in-place editing editor, making it super easy to use.

Copy box

A copy box is useful for any situation in which you want to share formatted text or code with your visitors. The Copy box provides users with formatted text that can easily be copied to the Clipboard.
Some sites have an automatic copy feature, so when users click inside the box, the text is copied to the Clipboard. This saves time and makes it easier to use users who are less likely to replicate. In most cases, after a successful replication, a prompt is displayed on the edge of the box telling the user that the text has been automatically copied to the Clipboard.
At other times, a Copy button or keyboard shortcut may be provided.

When to use

Use a copy box wherever you want visitors to copy formatted text or code from your site.

Example

Here are three examples of using a copy box in the Web interface.

snook.ca

This blog uses a copy box where the code snippet is displayed.

Web Designer Wall
This popular web design blog uses a copy box at the code snippet.

Mozilla Ubiquity
The Copy box is a little different in the way the site is used, and the code is parallel to its interpretation rather than below.

Input suggestions and colloquial format input

Search boxes and other input fields that can enter a wide variety of data are becoming more common. For example, the map application allows the user to enter the ZIP code, coordinates, or city in the same input box, suggest an error-correcting input, and let the user enter the wrong content directly and process and correct the input data in the server-side code.
This reduces confusion and makes it easier for visitors to find the information they need. In addition, this approach is more reasonable than providing multiple input boxes, and the layout is more tidy.

When to use

When input boxes may have various inputs, it makes sense to use input suggestions and allow multiple types of colloquial input.

Example

Here are three examples of using input suggestions and colloquial format input.

American Airlines
This Dustin Curtis redesigned prototype uses colloquial format input to book a journey, allowing users to enter search terms the way they want.

Google Calendar
The quick Add feature in the Google Calendar is entered using automatic suggestions and colloquial formats.

Bing Maps
When you look in the direction, the Bing Map provides a colloquial format input.

Multi-Step

When you have a long form to interact with a visitor (such as a checkout, a questionnaire, a registration form, etc.), if you break it down into multiple steps, you may be able to reduce the user's fear.
A common practice for multi-step is to tell the user how many steps they are currently in and how much they have left.
Note that multi-step does not negate the view that your Web form should always be as short as possible.

When to use

When you have more than 6 problems with your form or other processes, it is useful for the user to divide the process into several steps. However, remember that if there are too many steps, it will be bad, so it depends.
Also make sure that the user's information at each step is remembered, in case there is a problem with the user.
In addition, make sure that the user can confirm and return to the previous steps to change the content that is filled in.

Example

Here are 4 examples of multi-step forms

Statement Stacker
This site uses three steps in the registration process.

Livestream
The live site also uses a three-step registration process.

autobutler.dk
This site uses a 5-step registration process, but each step is short.

Onbile
Onbile provides a 4-step process to create a mobile Web site.

Content Hover Control

UI controls for content snippets make it easier to interact. These controls usually appear when you hover over the target content.
Facebook, for example, uses a lot of hover controls in new things. When hovering over a new person's state, you can see the option of masking or removing their updates. Hover over your own Facebook status or comment and you will see the delete option. This is very user-friendly and reduces user interface clutter.

When to use

Hover controls can be a perfect solution when some of your features are easy to access but are not commonly used.

Example

The following is an example of a 2-content hover control.

Facebook
In Facebook, a hover control allows an administrator to edit a Facebook page message.

Twitter
Twitter uses hover controls to display options for replying to tweets, as well as reply options and other controls.

View English Source text