How to use visual elements to convey information effectively?

In the final section of the Elaine McVicar Mobile End Design Series, we will explore the visual elements that designers should use to communicate messages effectively in mobile applications.

In order to take advantage of the platform features, the first mobile sites in history have to make concessions in many ways, so far from the "excellent" level. Now, more sophisticated devices give us the opportunity to create more visually appealing designs that will not only stimulate and attract users, but also improve the usability of the user experience. However, opportunities are also accompanied by challenges.

First, let's look at how to design the physical constraints of mobile devices (including best practices), and then talk about the design of messaging (that is, using visual design to support the content of mobile sites and applications).

　Design for physical constraints of mobile devices

The physical form and touch screen interface of mobile phones and tablets limit several basic considerations in their use. For computers, users can scroll in a wide range of content space or hover through the mouse to view the details, but mobile users face more limited space, so must take a different way of interaction. To create an intuitive user experience, we have to keep in mind the specific constraints on mobile layout and mobile interaction.

The limited space on the mobile screen presents some interesting limitations on the effective rendering of content and interaction. Specifically, the layout is to streamline and focus.

　　Layout structure

To provide a strong foundation for design, we need to consider how to use the limited screen space most effectively. In this respect grid system can give designers a lot of help: evenly distributed vertical line structure can play a role in guiding and positioning content. The grid can define whether the space is even, making it easier for designers to determine the best place to place a button, caption, or image. Placing elements along the grid on the one hand can give users a sense of the journey, but also can bring refreshing, beautiful visual effects.

　Space for scrolling and sliding

When users browse content or scroll the screen, make sure they don't accidentally perform unexpected actions or activate unwanted objects. In other words, the spacing between the elements on the screen must be large enough to allow users to navigate between them easily.

　　User-friendly interaction

The use of touch screens in mobile devices also means that visual design must enhance interaction; in other words, the arrangement of visual element size and position should be convenient to use, and highlight the importance of different operations and the relationship between each other.

button click Area

As discussed in section 2nd, the adequacy of the button size and spacing determines whether the interaction can be easily implemented. Ideally, the button size on the standard screen should be 44px to 57px, and the high density screen (retina screen) would be 88px to 114px. This size ensures that the normal fingertip can easily activate the button.

　　The ability to get visible controls

The related interactive objects should be able to easily use their fingers to make it easier for the user to transition between each other more quickly. This helps to reduce the user's confusion about the interaction between interactions, thereby increasing the speed of the complex interaction process.

　Message Delivery Design

Physical constraints are just one of the challenges we face when moving the design of the mobile end. Another challenge is how to deliver messages. The idea of "move first" teaches us that the value that mobile users get through mobile devices and computers should be the same. With this in mind, we will find that the design of the mobile-end messaging will affect the content of the message that designers are sending.

In order to improve the efficiency of messaging, we need to make good use of the way we understand and construct information. The human brain can interpret visual information much faster than text information, which means that the use of visual elements and images is more effective in improving message delivery efficiency. Excellent visual styles can improve value, support content or interactive purposes, and improve the overall user experience (both for mobile and computer).

　　Vertical Rhythm

The first way to improve the efficiency of messaging is to take advantage of vertical rhythms. The information architecture can create a reasonable flow of content, and through visual design we can further achieve greater clarity within the visual level of the content. Reasonable use of different content plate size and the spacing between each other can create excellent vertical rhythm, so as to provide support for content-level message delivery.

In addition to the vertical grid system mentioned earlier, it is possible to create a proper vertical rhythm with the baseline grid, making it easier to read and understand content. Specifically, baseline grids can create structures by standardizing the thickness of lines. This provides a clear horizontal ruler for the definition of text direction and dimensions, and can also determine the spacing between different content groups. Using these rulers ensures that the copy is legible and readable, and that users are able to distinguish between different plates and functional groups. Baseline grids can be difficult to manipulate in HTML and CSS, but they do provide guidance for sizing and spacing settings in the design process.

Color use

Color is another powerful tool for message delivery that supports content and interaction in many different ways.

To perform a tone or style.

The color of the design is a very subjective, and heavily dependent on personal feelings and cultural background of things. However, the use of special shades and shades helps to show the overall impression the designer is trying to give to people. Bright bold colors can give people a sense of fun, darker tones can create an elegant atmosphere, and soft tones can bring a classical feeling. A thorough study of color theory can help us choose the most suitable color according to the framing target.

　Distinguish between different plates

Colors can be used to differentiate between different content objects, display objects, or support content structures, such as the separation of performance content from one another.

Distinguishing between static objects and interactive features

Using a strong contrast helps to convey the difference between what you want to show or the connection between different content and function. Mixing neutral and bright colors or contrasting strong colors can make a particular object appear more prominent in the user's eyes. Consistent use of color in design (for example, the use of the same hue for all static objects, and the use of different tones for active and inactive objects) gives a clearer distinction between content and functionality.

　　Communicate state Change

Colors can also be used to subtly represent information, notifications, and error states after a user interacts with an element. For example, many Web sites use green to indicate a successful operation, a red error message, rather than a lengthy and cumbersome text. The use of a consistent color to quickly convey new information can help improve the usability of the overall design.

　Use symbol

Finally, the symbol. Symbol is a very powerful solution in the information transmission of visual design. By means of symbolism, the user can think of the elements or visual objects that they are familiar with, so as to achieve the goal of fast understanding of content and function. Materialization is the acme of using visual symbols in digital space. Quasi-materialization refers to the design of interface elements in the real world and the corresponding objects height similar. In addition, although WINDOWS8 and IOS7 's rejection of materialization has brought a bad reputation to the genre, they and many other applications have largely used the minimalist design of the object in the interface. For example, use the trash to indicate the deletion, the camera represents the camera, the envelope represents the mail, etc.

A symbol can support the performance of a message or subject in a variety of ways.

Support for potential themes

Symbolism can be used to extend a single design element to make it a key theme of design or function. In Flipboard this application, the rollover effect is an integral part of user interaction, and the smoothness of this effect is the key factor for the success of this application. The use of this symbolic method can quickly convey the concept of products to users, while laying the unique positioning of products.

Buttons and interactions

Use simple materialization to simulate real-life interactive elements in the design of buttons to make the function more explicit. But there's one thing that needs to come to our attention: if the brand or style guide requires a simpler style, then the color and style can be significantly different from the static object, making the method a better result. Wunderlist's button is to simulate real-life style.

　　Icon

Given the limited screen space required for fast delivery of complex concepts, icons are important for the design of mobile terminals. The use of visual symbolism for icons (especially those that have become standard on the web, such as deletions, cameras, and email icons) means that users can read them even if they are not accompanied by a description tag. Designing a simple but unambiguous icon is a difficult task, so be sure to understand how the icons affect the clarity of the design.

　Moving the future

A clear understanding of the constraints and standards of mobile devices (as described in this article series) is critical for mobile designers. But only by really mastering the content can we break the rules, break the stereotypes, and bring ideas to the more unique and colorful things. In addition, we have to constantly think about the needs of users, and strive to achieve the balance between function and beauty.

The design of the mobile end is both a challenge and an opportunity. The rapid development of technology and changing user backgrounds mean that today's constraints may disappear in the next few years. Innovative thinking and creativity can help us discover new ways to look at these challenges, and let us consistently discover new, beautiful, and useful solutions to design problems.