My role covers full-stack development: I not only write backend logic in Python, but also build the frontend pages and interactions myself. The programs we develop are deployed on a PaaS platform, and since the developers are not professional frontend engineers, a Dreamweaver-like tool is provided to lower the barrier to entry. It lets developers quickly build pages by dragging and copying, and then move on to writing the backend program. The original intent of this development mechanism was to speed things up, but as applications become more polished, a way of working that only implements functionality and ignores the interaction experience will not last. Hence this optimization write-up. There are no psychological theories of every kind here, only a set of before-and-after optimization cases, which I hope will be helpful to your interaction design.

1. The Thinking

Interaction is the process by which a user completes a series of actions through an interactive medium and finally reaches a goal. Let us start from that small goal the user finally achieves:

1. The user does the thing they 【want to do】
   First, the user should be able to do what they want to do — browse content, add records, modify information, and so on — and complete the task without making mistakes.

2. The user does what they want to do 【efficiently】
   Once the task can be completed, we should lower the user’s learning cost, so that opening the page reveals the functionality and lets them act, rather than leaving them at a loss; and we should cut time cost, reduce waiting, and speed up responses.

3. The user does what they want to do efficiently, 【without anxiety】
   Once the task is completed efficiently, we should also think about strengthening the user’s trust in the application, so that a vague memory afterwards does not produce anxiety.

4. The user thoroughly enjoys using the product, and completes the task along the way
   I only hope that after users finish their business with my product they are not so infatuated that they linger — off they go quickly, since there is so much beauty yet to experience in life

2. Optimization Case Sharing

Red marks the state before optimization, green marks after

2.1 Distinguish Functions by Color

2.2 Focus the Input of Information

2.3 Group Things Sensibly, for a Clearer Structure

2.4 Flatten the Design, Reduce the Levels So All Functions Are Visible at a Glance

2.5 Add Appropriate Hints

2.6 Confirm Sensitive Operations

2.7 Improve Page Response Speed, Reduce Unnecessary Operations

2.8 A Sense of Comfort