If there is no browse state

For a user can modify the page, the most traditional and most reliable way: Browse State + Edit state

Click on the "Modify" button on the Browse State page to enter the edit status.

This allows you to clearly tell the user what the content of the form is currently saved with the Browse state. After the edit state is modified, save and return to the browsing state.

This way has its own problem: if the original only to modify a certain content, but also need to click the "Modify" button, into the editing state, and then find the item, modify. Content a lot of time, in the Edit State page to find again, find just watch to change that item, still very laborious.

In practical applications, there are often only editing states.

Many profile pages, settings pages are usually only edit states. Only the benefits of the edit state are visible and can be modified. See a certain content, want to modify, directly can change. Input box, radio, check ... These table cells can be both displayed and modified.

There are also problems with the way the editor is being edited: "Are there any changes in the current page?" Do you need to save? "" I have forgotten that the changes have been saved, and then click Save again? " Did you save it? Exactly the same as before the save button?

The design pattern of "Browse State + Edit State" is original and is the product of technology limitation.

"What you see is what you get" is widely used as a design principle, designers can not use it, as long as they are willing to rely on a little bit of this principle.

The type of editing that is described earlier is not a good example of what is "WYSIWYG". Let's look at MS Word:

The current look is the actual appearance of this document, ready to edit.

What is the time to write a blog? Publishing, editing is an interface, the actual browsing time is another interface, two interface differences or not small. Yes, blog is the "browse State + Edit state" design pattern.

Obviously word is better. Blog display has a high demand, typesetting layout, picture location, font style, line spacing ... If you can do the same as word, the estimated page will not open.

Is there a better plan?

Not all pages that allow users to modify content have so high a demand for the display, the previous mention of those settings page, personal data and so on page user changes only content, then, this kind of product design is not possible to break through just edit state of confusion, and avoid browsing State + edit state bring trouble?

"Edit state + browse State" Flaw is: see can not directly change.

The "only edit" flaw is whether the changes are currently made, and the explanations are not clear enough.

Let's try an optimization program without browsing state:

The solution is to add a status note based on the edit state and always prompt for changes. Avoids the problem that the original only edit state is not clear. Because it is in the editing state of the basis of optimization, so obviously "browse State + Edit State" mode of the defect does not exist.

The design of Google Notebook, Google doc, which requires less typography, is actually the solution. Only on the basis of this scheme and then added the function of automatic saving.

Let's go down this plan and think:

If the page of those input boxes, drop-down selection box ... Use a style that is not so eye-catching when not in operation, and use the standard style of the system when the user triggers the operation, so the page usually looks very close to the browsing state. Then, no change of time can also be no longer prompt ...

No changes, just browsing, do not need to be deliberately prompted "content without modification, do not need to save." Instead, it hints to the user that it can be modified with a style similar to the browse state. Although it looks like the browse state, but the user can change at any time ...

When the user modifies the content:

Well, that's the plan. In fact, this scheme is to hide the editing state, the user triggers the edit operation automatically switch to edit state.

"Only edit state" is not clear enough, "edit state + Browse State" is not a panacea.

Reduce pages, reduce cognitive costs, be editable at any time, enough status hints, based on current technology, are these the goals of optimization, are there any other better solutions?

Article Source: Smelly fish Interactive Design reprint Please indicate the source link.