Luyan information interaction design field skills, beginners must know UI!

  Among the classic Nelson's ten heuristics, "system state visibility" can be said to be one of the most important principles in the field of interaction design today.  
  By showing the current state to the user, let the user have control over the system and build the user's trust in the product, which is also one of the most important values ​​of this design heuristic.  
  However, in order to be reliable and easy to use, the skill of system status display is very particular. Here are the 4 most commonly used methods, combined with many practical cases, I hope it will be helpful to you.  
  1. Visual feedback showing the user's location and progress  
  1. Let the user know where they are  
  No one likes to get lost, but this happens all the time, whether in real life or in the digital field.  
  Letting users know where they are is key to creating a good navigation experience. Both apps and websites should highlight current navigation options to help users understand where they are.  
  Google's bottom navigation bar design  
  2. How many steps are needed to complete the task?  
  This is also a very basic operation. By showing the number of steps, it helps users estimate the time required to complete the process.  
  Design of Selecto's questionnaire  
  2. Visual feedback to assist user interaction  
  The digital interface is not a real hardware mechanism in the real world after all. Users can only use the immediate visual feedback during the interaction process to determine whether the operation is completed. Instant visual feedback So it seems very important.  
  Instant visual feedback allows the user's operation to be "recognized" visually, thereby strengthening the "sense of certainty". Click repeatedly.  
  The most common example of this kind of visual feedback design is the micro-interaction animation of clicking a button, which informs the user that "the system has captured the click interaction."  
  The hover click animation designed by AliAli  
  , but in some cases, the visual feedback of the button has many different presentation forms, there are more visible and understandable new forms, and more possibilities can be explored on the original basis ,  
  1. Click the like button  
  2. Switch button  
  This switch button not only has a clicking effect, but also changes the color and button logo accordingly, indicating the status more clearly, and even taking into account the visually impaired users.  
  3. Micro-interaction of the bookmark button  
  This bookmark button presents the state of the bookmark added through the virtual and real changes of the color, which is quite ingenious.  
  3. Presenting the visual feedback of the system status  
  1. What is the system busy with?  
  When the system is loading, executing, and running, use dynamic effects to inform the user that the system has not stopped, but is busy executing something, which is to avoid Means of user misunderstanding.  
  While the user is waiting, the animation of infinite loading is usually used (generally used in the operation of less than 10s):  
  for a longer execution process of more than 10s, the animation of infinite loading will appear frustrating, at this time It would be better to use a progress bar:  
  these visual feedbacks greatly reduce the sense of uncertainty in the system.  
  For mobile applications, whether the startup animation interface used in the initial loading stage is carefully designed or not determines the user's first impression of the entire product. Excellent initial loading animation can free the user's attention from anxious waiting.  
  Logo splash screen,  
  2. Content loading  
  When users need time to load content, it is recommended to use a special container "interface skeleton" to display.  
  This kind of temporary content container can not only help users quickly understand the overall framework of the interface and build user expectations, but also can quickly load data in the background and gradually help users obtain information.  
  This design method is equally applicable to mobile and desktop designs:  
  1. Effective notifications and reminders can help users realize that something new is happening. Most of the time, we recommend designers to use subtle animations for notifications, because animation effects will naturally attract users' attention, and the dynamic vision of human eyes is actually very strong.  
  2. Prompt the user to take action  
  3. In many cases, there will be many places in the user interface that require the user to submit information.  
  For example, the user is required to submit a form, or the user has created a password, but the complexity needs to be corrected, or when filling in the email address to subscribe to the information, the email format is wrong, and so on. Using appropriate visual feedback always informs users of problems more effectively.  
  5. Conclusion  
  Let users have a sense of control, which is to create a better experience for users. In many design schemes, visual feedback is weakened or even ignored for various reasons.  
  But when the user is interacting with the UI, expectations and mobility are actually highly dependent on these animations and micro-interactions, and this is why designers need to design excellent visual feedback effects.