The following was translated and edited by the Mockplus team, a faster and easier prototyping tool, for learning and communication purposes only.
Last year, mobile users surpassed desktop users worldwide for the first time. Looking at statistics from around the world, over 22% of screens today have 640×360 resolution.
This trend cannot be ignored, and while responsive and mobile development has been around for some time, interactions in mobile interfaces are very different from those in desktop interfaces. With the rise of React Native and Progressive Web Apps, mobile user interface development will also become an important part of Web development in the coming years.
When developing mobile user interfaces, simplicity is critical to a good user experience. The interface should be consistent to avoid cognitive overload and confusion.
In order to satisfy and balance the role of user interaction, this article mentions five measurable principles. This article will provide a brief summary of each of these principles, along with examples that outline the issues we should consider when creating mobile interfaces.
effectiveness
Validity verifies how effective the user is when using the interface. Users have experiences from other interfaces and the real world. In human-computer interaction (HCI), it is called a mental model that the user is creating in order to understand complex concepts more easily. We can improve user productivity based on knowledge gained in real life. The goal of effectiveness is to reduce the number of operations required to complete the task.
Some examples:
PWA is a great example of using mental models to improve user productivity. By designing a digital tuner similar to an analog tuner, a user can instantly map this digital version of the tuner to his real-world experience.
Use matching and known ICONS to reduce cognitive burden. Combine them with small tags to reduce false interpretations.
Another example of a mental model is to think of the switching of things as similar to the switching of lights in the real world.
(picture 1)
The efficiency of
Efficiency refers to how users can understand the current state of the application and what actions can be performed. It is measured in actions per second and describes how efficiently a user can complete a task.
Some examples
Provide a visual indication of the user’s location in the interface. For example, display a title, provide a progress bar in the form, and highlight the current label.
If the interface becomes too complex, design simple categories that can be assigned to subtasks. Examples include a summary of all user-related data, a collection of past saved items, and the retrieval of new information.
(picture 2)
productivity
Productivity refers to how long it takes users to successfully complete tasks and how easy it is for users to discover and recognize 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 the core tasks of the interface.
Avoid misleading labels, such as wrong ICONS.
Provide error messages so that users can quickly recover from errors.
(3)
Feedback error message
Giving users feedback is one of the most important parts of interface design. Proper feedback can significantly reduce our errors. Errors can be measured by the number of errors committed per operation per task.
Some examples
Provide appropriate feedback for user actions.
Highlight important/new information.
Provide tutorials or tips that can be viewed as needed.
Displays the current view/task/user name.
Provide feedback when a user makes an error or the system does not work as expected. For example, the form is wrong and cannot be uploaded/processed.
(picture 4)
The cognitive load
Reducing the user’s cognitive burden is critical to interface friendliness. We can solve obscure concepts by using metaphors and keep the interface simple so that users don’t get confused. One way to measure cognitive load is to calculate the actions of each view.
Some examples
Animate between view and content switching, avoid rough cutting and messy tampering with content.
Using familiar and matching symbols makes it easy for users to complete tasks.
Use logical flow to get users to complete a new task quickly.
(picture 5)
conclusion
When we design a user interface, it should be designed to help the user accomplish what he or she wants to accomplish. There are a few questions you should ask yourself during the interface design process:
Have I designed an interface that allows users to accomplish tasks in the simplest way possible?
Does the interface follow simplicity and use mental models to reduce cognitive load?
Does the interface display the user’s location to avoid confusion and disorientation?
Are users getting proper feedback?
Does the interface consider possible errors and provide feedback on them?
With small screens and limited mobile interfaces, it’s important to keep your application simple and focused on what the user wants to accomplish. If the interface becomes too complex and confusing, it may be because it is trying to satisfy many different conditions and should actually be broken up into different applications. By keeping the interface effective, efficient, productive, responsive to error messages, and reducing cognitive load, we can avoid designing user interfaces that look fancy but don’t actually support the user to get the task done.
Learning tools, but not limited to one tool. Mockplus is faster and easier to prototype. Download Mockplus now and enjoy a fun prototyping experience for free.
The original link: https://medium.com/swlh/principles-of-mobile-user-interfaces-94661cca7c16
Lisi Linhart