Interactive mode Applications (1): InPlace replacement

InPlace replacement is a universal interaction pattern that is commonly used to represent more information for the user in a finite space that represents a large amount of data. Sunny classmate has previously mentioned in the design of the presentation, also known as "Details on Demand", and in the development eye, that is, "Row Expander." This is called InPlace replacement, meaning a generalized range of specific content rendering patterns that are not rigidly tied to the interaction of form content extensions, or even "retractable menu." Whatever it is called, let's explore how to apply this interaction pattern.

Use premises

Users need more detailed information about what is currently being given, but because of the limitations of space and the difficulty of arranging too many elements, we will hide some additional details so that we can keep the interface clean and clear, and show details without destroying the body level.

Software often shows users a number of graphical forms or pages, and as a result of space constraints, and in order to make it easier for most users to browse critical data, each item typically displays only a few key attributes for each item. However, the user may need more information than the original display object properties, at which point we will add additional details to facilitate their viewing on demand.

Interaction methods

There is an interactive action before show detail.

Because it is on demand, the extra content is displayed only when the user interacts with the item. I can't imagine how to locate a specific entry in the data forest that contains all the detailed attributes, which is a great challenge to the workload of the information architect or to the user's ability to search. Give them what they want is the key to solving the problem, so we need to trigger the display of additional content based on user input (click, stroke, or mouse stop).

Forms of Expression

details on Demand

When an entry is selected, a certain control is created to show additional information.

Overview by Detail

Displays a preview of all objects and a detailed display of the selected objects.

Retractable Menu

When the navigation bar or the information organization panel takes up too much screen space, create a parallel menu that can be easily repeatedly clicked and hidden when not in use.

Attention matters

• This interaction pattern should be visually suggestive in visual design, such as adding an expansion node before the structure tree, and selecting the object to be prompted to select the state.

• Ensure that this visual control, with additional information, gradually forms the user's mental model, and the user will be able to understand the interactive approach when they first see it.

• Ensure that visual effects in the switch between the two states are significantly different, with further information items and the normal state of the entries should be distinguished, easy to locate.

In a counter example, the selected picture in Wifi-photo does not have a specific visual distinction.

• Show only single layer extra detail to avoid details nesting details.

InPlace replacement is only suitable for single layer additional details and does not fit into the additional information included in the list or tabular content. That would result in an excessive level of information that is not conducive to further viewing.