User interface mode to handle interactive content

Web sites and Web applications are becoming increasingly 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 website navigation mode and the popular Web content presentation mode. Now let's explore some UI patterns where we have interactive web content.

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 another 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.

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.

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 Sponsor
This brain map is used with an in-place editing editor, making it super easy to use.

A copy box is useful for any situation where you want to share formatted text or code with your visitors. The Copy box provides users with formatted text that is easily 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.

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

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 a 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.

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 input boxes may have various inputs, it makes sense to use input suggestions and allow multiple types of colloquial input.

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

Anglo 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.

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 your form or other process has more than 6 issues, it is useful for users to divide the process into 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.

Here are 4 examples of multi-step forms

Statement Stacker
This site uses three steps in registration.

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.

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.

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

The following are examples of 2 content hover controls.

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

Source: http://rockux.com