How do I understand the Mobile information architecture?

A good chance to make the basic knowledge of interaction bad! This foreign series of interactive tutorials is very practical, suitable for including designers, development, products and other learning, today's first part of the summary and comparison of a variety of mainstream design patterns and information architecture, the full text diagram rich, intuitive and easy to understand, the translator also very attentively to the picture into Chinese version, looks effortless , highly recommended Yo!

Lost: 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.

　　What's the difference between moving?

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

The vast majority of 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 frequently. 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 going mobile 2012 study, the user experience design agency foolproof that mobile devices give us a new sense of freedom and control. There are also some users who 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 a user-centric design process. But the problem is that the best traditional practices of the past are not always referred to.

　　How mobile affects designers

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

　　How to implement mobile design

Different from the traditional website, there are four kinds of mainstream 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 (that is, read through a browser), but they also provide an interface similar to the native application.

Each of these implementations 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: Multifunctional tools, each of which has different internal navigation and goals.

Note: This style is not suitable for multitasking by users.

　　set of baby style ( 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 the "forward" or "back", users can strongly perceive where they are located.

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 a common application user. 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 they first open the application.

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.

　　Filter Views ( 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 the same as 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 a smaller screen.

　　Next

It's been almost 20 years since I first saw a big brick mobile phone (and I've been buying a mobile phone for the first time 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 section, I will explain how the variance of mobile content affects the design of the final solution.