Designed for mobility, Part I: Information architecture

Translator Note: From the point of view of designers, this paper puts forward the differences between the design of mobile end and the traditional desktop design, and sums up and compares many kinds of mainstream design patterns and information architecture, which is designed to help the design, product and development related people to think about the mobile end design better. Share to everyone, hope to help and inspire.

Original English: Http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

About 1993, my father brought home a huge, brick-shaped mobile phone. At the time, our whole family was incredibly excited about the rare thing, but no one thought it would have a huge impact on our lives. A few years later, when some of my friends decided to buy it, I still thought of it as a pattern and a gimmick.

Today, there are 6 billion mobile subscribers worldwide, meaning that 87% of the world's people have mobile phones if they have a mobile phone. However, nearly 3 billion people use desktop computers, which vary widely from mobile phone use.

The presence of mobile devices in our lives has also brought a series of new constraints and opportunities for mobile-end design. Let's see how the design approach can be updated.

What's the difference between

The first thing we need to know about mobile design is how different it is, not just the size. The properties and specifications of mobile devices also bring different design inspirations and requirements. As mobile devices are lighter and more portable, we often find them easier to use. By using mobile devices frequently, we have established a unique and emotional relationship with them.

Attributes and Specifications

Most mobile devices are equipped with touch screen, the user mainly through gestures and some simple interface elements to operate. Because of the limited size of the screen, sometimes we want the display content in the screen to be more simple and exquisite. Also due to limited bandwidth and connection speed, the design on the mobile end needs to optimize load time and reduce data requests.

Why, where and when

Because of the need for uninterrupted viewing of mobile phone information, we tend to use mobile phones more often. When you take a bus, walk on the street or watch TV, they are everywhere. Even, we usually "do" some other things are also used. This means that we may use mobile phones in complex visual environments or in a range of disturbing conditions.

How we act and perceive

When using mobile devices, we have different attitudes, behaviors, and priorities. As part of the on mobile 2012 study, the user experience design agency foolproof that mobile devices give us a new sense of freedom and control. Others have a very real emotional impact on their mobile devices. Foolproof points out that 63% of people will be upset when smartphones are not around. They describe these devices as "alive", an extension of their bodies and personalities.

Mobile devices fundamentally change the user's expectations, so it is important for designers to follow user-centric design processes. But the problem is that the best traditional practices of the past are not always referenced.

How mobile affects designers

The differentiation of mobile devices directly affects the whole process of user-centered design: From user research to final development and implementation of the test. The implementation method and information architecture are the most affected by the whole design process.

How to implement mobile design

Unlike traditional websites, there are four main ways to realize mobile design. The content that mobile users most want to browse through browsers, mobile sites (specially optimized for mobile devices) or responsive web sites that rearrange the layout of devices. Those who install applications on devices will choose either native or mixed mode applications. Native applications are independent: Each application interface is defined above the platform layer. Mixed-mode applications provide a more flexible way to get content from the network, which is read through the browser, but also provide an interface similar to the native application.

Each implementation has two sides. Which style you choose depends on the design background of your project. (In the form below, the more stars, the better the effect)

Mobile Information Architecture

Mobile devices also have their own library of information schema styles. Although the structure of a responsive web site may be more compliant with the "standardized" style, such as native applications typically use a tabbed navigation structure. But there is no "right" way to construct a mobile Web site or application. Next we will bring some of the most popular styles: hierarchical, radiant, baby-styled, tagged view, bento box, and filtered view.

Level (Hierarchy):

A hierarchical style is a standard web site structure with an index page and a series of subpages. If you are designing a responsive Web site, you may be limited by this, but the extra styling it brings can help you adjust your experience to fit your mobile device.

Luke Wroblewski helps us focus first on important content in the blog mobile First: the product features and user processes that can help us create a better user experience.

Application: Organize complex sites that need to be consistent with the desktop site.

Note: The multiple-faceted navigation structure can be used on small screens to cause trouble to users.

Radiation type (Hub-spoke):

The radiation style provides the user with a central index to facilitate the jump, which is the default style for the iphone. Users cannot switch between paging and must return to a central jump. This style has always been used primarily for workflow-constrained desktops (usually technical constraints, such as forms or limitations in the purchase process). This style is then increasingly popular on mobile devices because users focus on a single task when using mobile devices, as well as on the external factors of the device itself. The popularity of this style makes global navigation increasingly difficult to use.

Applicable items: Multifunction tools, each with different internal navigation and goals.

Note: This style does not apply to multitasking.

Baby-type (Nested doll):

The doll style uses progressive navigation to guide the user to the more detailed content. This is a quick and easy way to navigate when the user is not working conveniently. By clicking on "Forward" or "back", users can strongly perceive where they are.

Applicable items: Application or the theme of the website is peculiar or the topic is closely related. They also apply to child styles that are built into other parent styles, such as standard-level styles and radiation styles.

Note: Users cannot quickly switch between different content, so it is important to consider whether the style is easy to find and not to be a stumbling block to finding content.

Label view (tabbed view):

This is a familiar style for ordinary users. This form is assembled into a series of contents through the toolbar menu. This allows users to quickly scan and understand the full functionality of the application when it is first opened.

Applicable items: tool items and multitasking situations based on a similar theme.

Note: This style is not suitable for complex class structures and is more suitable for very simple content structures.

Bento Box/instrument panel (Bento box/dashboard)

Bento Box/Dashboard style use a component to show some of the information about the tool or content, and then link the more detailed content to the index interface. Because this style is complex, it is more appropriate to display on the desktop side than on the mobile side. This display is compelling, and users can understand critical information with only one glance, but it relies heavily on a clear design presentation.

Applicable items: Multifunctional tools with similar themes and content-based tablet applications.

Note: Although the tablet screen provides more space to host this style, it is more important to understand how users interact with each piece of content, and we want to make sure that the application is simple, effective, and enjoyable to use.

Filtered view (Filtered view)

Finally, the filtered view style allows the user to navigate through a series of data by selecting a filtered item to toggle the different views. Filtering, like the faceted search method, is a great way to fit the user's query content.

Application: A large number of applications or websites, such as articles, images and videos. It may provide a good basis for magazine-style applications or Web sites, or it can be a child style within another navigation style.

Note: On mobile devices, because of the complexity of filtering and faceted search, it is difficult to display on smaller screens.

Next

It's been almost 20 years since I first saw a big brick mobile phone (and I've been buying the first mobile phone for about 12 years). Today, my father and I know almost all have a smart phone, we are accustomed to frequent use of them to communicate, communicate and manage our lives. Every year there is a leap in technology, so we have to be clear that we need to keep up with the times. Designing a friendly mobile and desktop information architecture is the first step in creating a great mobile experience. In the second part-design considerations, I will explain how the variance of mobile content affects the design of the final solution.

To understand the "CDC turn off", please go to: "CDC turn over" to hit the customer! Fanke is coming! (Link: http://cdc.tencent.com/?p=6518)