On Visual Design and Interaction Design

<br />In the entire product design process, the "processes" of visual design and interaction design are very close, and the relationship between the two is complementary and mutually influential. As the most direct level of communication with users, how to present the interactive design to users in a good form? Here we mainly focus on the role of vision in improving the usability of interaction:

Improve browsability.

Deliver information and tasks accurately and efficiently.

Fit the user's mental model.

Make the interaction emotional.

1. Improve browsing:
1) Good performance of information structure. In helping interaction, visual design must first satisfy the display of product and interactive information structure, the clarity and readability of information, and then the communication of brand and emotion. Visual language can process product concepts and information through stratification, classification, comparison and other language means.
example:

pic.01

pic.02
Comparing the two pictures above, both of which are article detail pages, I believe that not many users can quickly and accurately know what information the website wants to give them, or what they want them to do, when browsing pic01. The distribution of information, hierarchy, and color are not done effectively, leaving users confused and lost. Pic02 divides the content into important and unimportant sections, so that the most important article details are clearly visible, and the structure is orderly and clear.
We can feel the effective intervention of visual language, which can greatly help in the presentation of information structure.

Previous Page 1 2 3 4 Next Page Read Full Article

<<: Differences and usage examples of for, for...in, for...of and forEach in JS

>>: Detailed code examples of seven methods for vertical centering with CSS