The Web browser, which originated in 1993, still maintains the interactive mechanism of request-response today. When the user intends to browse the Web page, the user enters the link, the browser sends the user's request to the server, the server receives the request, processes it, and responds to the browser. The request-response mechanism is satisfactory considering that the Internet is intended to be used to view documents. However, with the development of the Times, users of the Internet demand and expectations have changed. Ajax technology is the first step in this evolution. It improves the Web experience and allows users to load new content without having to refresh the page, but it is limited by the fact that loading new content still requires the user to make a request in order to get a response. It's nice to have a single user browsing the static document experience with this technology, but it's not tenable in a multiuser environment. Not only is web browsing facing such problems. Nowadays, when we develop the app, we also need to consider the problem of multi-user browsing.We want data connectivity and loading to be felt by the user as an entity, which is where real-time dynamic loading technology is.
challengesUser-friendly asynchronous frameworks such as node. JS and meteor have begun to use this real-time network technology extensively. Before this technology was implemented on a large scale, the user's operation was very clear. These actions can be clearly placed on the user's head, and the links, refreshes, and page loads are clear and unambiguous. Click on the link, the page jumps, the content is biu in front of you to show. When new users are added to the entire system, they face the same data content in the system before the page refreshes, and the interface is passive, and it will react with the action. Imagine the whole system to connect the pressure and difficulty of different users reasonably and effectively. In real-time dynamic systems, we are confronted not only by the creation of addictive features, but also by the processing of large amounts of data and the complex causal relationships between them. We need to present the app in a natural and easy-to-understand way before the user. In practice, apps can only resonate with users by making them easy to understand, allowing them to register and interact with them. Control the causal relationship between data and interface, and the interaction between different levels of data and interfaces to make apps better.
rulesDevelopers can leverage real-time dynamic design to create the next generation of Web user experiences. We have also summed up a series of design rules for designing user experiences in real time.
1. State of DeclarationThe user should know the state of the system, and the system should also confirm and feedback the user operation. The application should properly strengthen the interface structure, or the overall architecture of the system will not be clear enough. When the real-time interface changes, such as the page refresh, the top of the dropdown after the refresh control can be timely to communicate the list of the connection refresh status.
instance: Connection StatusIs your connection in a connected state? The connection failure is naturally unavoidable. Many external factors can cause data exchange to fail to meet the expected results, resulting in a failure of the connection. style= "Float:left" Figure 1 before modification: The user was not told that the connection was lost, which could affect their expectations of the app. Figure 2 After modification: The data exchange is prompted, connectivity disconnects, and the system tries to repair.
Example: LoadingWhen you load a lot of content with limited speed, it's easy for users to get stuck in a long wait. As an excellent designer, it is necessary to tell the user how much time to load. Figure 3: Before the modification: After being interrupted, the user will not know the time to load when the app loads the user content. Figure 4: After modification: The process indicator shows how much time is waiting for the loaded content.
Example: ConfirmResponses to user behavior can show that the system is listening and caring for the user. Figure 5: Before the modification: After the deletion is complete, the user does not get feedback Figure 6: After the modification: when the user completes the deletion to reach the new interface, it will be deleted confirmation.
2. Predict ChangesThe user needs to know what happens next after the action. When a user behavior occurs, the product should tell the user what will happen next. In a strict logic system, accidents are often not easy to accept. For example, to transport passengers to their destination, cars need to maintain mechanical accuracy and ensure proper operation, and in this system the accident is a puncture and engine failure. Similar to cars, an application needs to do its best to help users achieve their goals in a user-friendly way. Unlike cars, mobile applications enable us to anticipate and inform users of upcoming changes.
Example: Rendering resultsWhen there is a noticeable change in the state of the interface, it is necessary to inform the user of the change, give the user the opportunity to handle it, and prevent the unexpected from happening. Figure 7: Before the change: When the new interface appears, there is no hint or feedback in the field of view. Figure 8: After modification: When the new interface is ready to load, the system responds, but does not interfere with the process through automatic response.
Example: Frame templateThe display layout framework indicates that you are going to jump to a new interface and switch layouts early to fill in gaps. There is also a benefit, which can make the program look more "responsive" features. Figure 9: Before the change: before the screen loads a new interface, the user waits for all content to be loaded and the interface suddenly switches over. Figure 10: Post-Modification: page loading uses placeholders to indicate which content is about to appear.
3. Keep the contextUsers should know where the content comes from and where it belongs. Because users cannot monitor real-time changes in the application, it is important to build and enhance the sense of application space. Here, the sense of space refers to the relative spatial position of each interface and each button and other parts. To do this, we need to create some trustworthy flags to strengthen their presence.
Example: Consistent locationThe new content should appear in a predictable location. Let the user get used to the path of the in-app feature navigation, and don't do the same thing by providing multiple paths. Figure 11: Pre-modification: New controls and elements appear in unexpected locations. Figure 12: After modification: The content always appears in a consistent position. At this point, the user does not visually feel the new content is abrupt.
Example: The process of changeMake the change in the state clearer, and don't let the entry appear in unforeseen positions. Animations can be a great way to ensure that the newly loaded content is in harmony with the surrounding environment. Figure 13: Before modification: A flash of a new entry will cause the adjacent content to move down without transition. Figure 14: After modification: There is an animated transition between the new project and the adjacent items, and their positions change over time, giving the user a period of time to accept their changes.
Example: Holding positionWhen items move back and forth between different screens, make sure that the user returns to the same place they were before they entered. Figure 15: Pre-modification: The scroll bit resets. Users have to spend more time looking for their previous location, which is a bad user experience. Figure 16: After the modification: the previous position is stored in the system, and when the user returns, they can return to the initial entry position.
ConclusionThese theories can be used as a starting point for us when we draft a real-time experience. I encourage all creators to discover the scope of these principles, but the most important thing is to understand the state, anticipate the changes, and present the content.
UI real-time dynamic design tips
