The following content is translated and organized by the Mockplus team, and is only for learning and communication. Mockplus is a faster and simpler prototyping tool .
Mobile users surpassed desktop users globally for the first time last year. Looking at statistics from around the world, more than 22% of screens today have a resolution of 640x360.
This trend cannot be ignored, and while responsive and mobile development has been around for a while, interactions in mobile interfaces are very different from those in desktop interfaces. With the rise of React Native and Progressive Web Apps (responsive web applications), mobile UI development will also become an important part of web development in the next few years.
Simplicity is critical to a good user experience when developing mobile user interfaces. The interface should be consistent to avoid cognitive overload and confusion for the user.
In order to meet and weigh the role of user interaction, this paper mentions 5 measurable principles. This post will give a brief summary of each of these principles, with examples to outline what we should consider when creating mobile interfaces.
validity
Effectiveness examines how effective the user is when using the interface. Users have experience gained from other interfaces and the real world. In Human-Computer Interaction (HCI), it is called the mental model that the user is creating in order to understand complex concepts more easily. We can improve the efficiency of users based on the knowledge acquired in real life. The goal of effectiveness is to reduce the number of operations required to complete a task.
To give some examples:
PWAs are an excellent example of using mental models to improve user efficiency. By designing a digital tuner similar to an analog tuner, the user can instantly map this digital version of the tuner to his real-world experience.
Use matching and known icons to reduce cognitive load. Combine them with small labels to reduce misinterpretation.
Another example of a mental model is to think of the transition of things as analogous to the switching of lights in the real world.
(Picture 1)
effectiveness
Efficiency refers to how users can understand the current state of the application and what can be done. It is measured in actions per second and describes how efficiently a user completes a task.
some examples
Provide visual cues of where the user is in the interface. Examples include displaying a title, providing a progress bar in a form, and highlighting the current tab.
If the interface becomes too complex, design simple categories to assign subtasks. Examples include summaries of all user-related data, collections of past saved items, and retrieval of new information.
(Picture 2)
productivity
Productivity refers to the time it takes users to successfully complete tasks and how easily users discover and identify interface features. It is measured in terms of the number of actions required to complete a task relative to time.
some examples
Reduce the need for typing by providing shortcuts to core tasks of the interface.
Avoid misleading labels, such as using the wrong icon.
Provides error messages so that users can quickly recover from errors.
(Picture 3)
feedback error message
Giving user feedback is one of the most important parts of interface design. Proper feedback can significantly reduce our mistakes. We can measure missteps by the number of bugs submitted in each operation for each task.
some examples
Provide appropriate feedback for user actions.
Highlight important/new information.
Provides tutorials or tips that can be viewed when needed.
Displays the name of the current view/task/user.
Provide feedback when a user makes an error or the system is not working as expected. For example, the form is wrong and cannot be uploaded/processed.
(Picture 4)
cognitive load
Reducing the cognitive load on the user is crucial to the friendliness of the interface. We can resolve obscure concepts by using metaphors and keep the interface simple so as not to confuse users. One way to measure cognitive load is to count actions for each view.
some examples
Provide animations between views and content transitions, never harsh clipping and messy tampering with content.
Use familiar and matching symbols to make tasks easy for users.
Use logical flows to let users quickly complete a new task.
(Picture 5)
in conclusion
When we design a user interface, its design focus should be to help the user accomplish the task he wants to accomplish. Here are some questions you should ask yourself during the interface design process:
Does my interface design make it the easiest way for users to accomplish tasks?
Does the interface follow simplicity and leverage mental models to reduce cognitive load?
Does the interface show where the user is to avoid confusion and disorientation?
Are users getting appropriate feedback?
Does the interface consider possible errors and provide feedback on those errors?
Due to the small screen size and the limited mobile interface, it is important to keep the application simple and focus on the tasks the user wants to accomplish. If the interface becomes too complex and confusing, it's probably because it's trying to meet many different conditions and should actually be split into different apps. By maintaining the interface's effectiveness, efficiency, productivity, timely feedback of error messages, and reducing cognitive load, we can avoid designing UIs that look fancy but don't actually support the user's task.
Learning tools, but not limited to a certain tool. Mockplus makes prototyping, faster and easier , download Mockplus now, and experience the smooth prototyping journey for free.
Original link: https://medium.com/swlh/principles-of-mobile-user-interfaces-94661cca7c16
Original author: Lisi Linhart