Information organization of Mobile web design

How to start a mobile design

For many of us, mobile-side design is a new opportunity. But what if you used to be a desktop-side http://www.aliyun.com/zixun/aggregation/7007.html "> Web Designer, how to convert experience to a mobile Web page?" Of course, there are some tools, experiences, and skills that still apply, just start thinking about how to organize and layout on your phone.

Organization structure

When you start organizing the content and operation of the mobile end interface, some reliable information architecture guidelines: For example, clear labels (labeling), balanced width and depth, and appropriate mental models are still important. However, you need to consider the following factors for organizing the mobile-side web design experience:

with the use of the way: people how to apply mobile devices, why this use? Emphasize content over navigation stay clear and focused

Fit the mobile device

It is easy to understand the unique limitations and performance of mobile devices. In short, desktop pages also have a number of unique limitations. So porting desktop products directly to the phone is meaningless. Instead, consider the unique characteristics of the mobile end, and meet the needs of users.

By studying the common points of professional analysis, we will get some inspiration. In the face of how people usually use their mobile devices, why? This question, Josh Clark has talked about three key user behaviors in his book, "Touching the heart-designing an excellent iphone application":

"I have a micro-task to do";

"I want to look around the situation";

"I'm a little bored."

This coincides with Google's research, which divides mobile users into three groups of behaviors: The current is urgent, repetitive, or boring.

Regardless of how it is described, the way the mobile end is used typically includes the following interaction scenarios:

Find/Discover (badly needed information, based on location): I need answers now-mostly tell me where. Discovery/Entertainment (boring, based on location): I want to kill time now, to play some fun and boring. Check-in Check (check-in)/status (repetitive/micro-task Processing): Some important things need to be constantly changed or updated, I want to stay on top. Edit/create (emergency tuning, micro-task processing): I need to finish something right away.

These factors determine why people take out their phones, so these behaviors determine how the mobile experience should be structured and organized to meet people's needs.

For example: Photo sharing Flickr's mobile Web experience has four major operations. The latest activities and latest uploads of your friends in your address book make people want to check whether they have a friend's photo update, and provide some interesting content and photos that people have uploaded in the vicinity of the day to pass the boring time for people who want to browse high quality photos.

Flickr's mobile Web experience meets the reasons why people are pulling out their phones (albeit slightly stiff).

With the mobile environment to use the environment naturally also need to adapt to the real world of your site needs. Because the mobile experience may be used in any location scenario, you need to consider how to make people feel good wherever they are.

This means that you need to consider the real use cases that users really need from your site's organization (uses cases). I have written a "use personas to do information architecture" in fact, through the analysis of the user to complete a task process to do the information structure on the Web page. This is actually more important on the phone side.
By understanding the motivations of the above users to take out their phones, and combining the functionality provided by their own app, minimize the user's operational path on the mobile side.

Content is better than navigation

A conventional theory that the content on the mobile side takes precedence over navigation. Whether people are constantly looking for updated information, such as stocks, news, or scores, they look at local news or search for articles or chat tools, and they want to respond quickly to demand rather than see your site's architecture.

Too many mobile Web experiences (like Flickr before) begin with a whole bunch of navigation lists, not content information. Mobile end user Time is very valuable, download also needs the flow of money consumption, so let them immediately get the information they want is the key.

That's what Youtube ESPN's mobile Web site does. First a simple look up tells you where you are, demote the navigation options to a separate button. The rest of the location is available at any time to view the latest information (ESPN) and the hottest video for recreation.

The ESPN YouTube Mobile Web experience focuses on content information, not navigation.

Positioning and exploration

However, please wait a moment, if the content is always better than navigation.

About return keys

Many iphone native apps have a permanent return button on the navigation. Many apps have a return button on the top title bar because Apple's mobile device does not have a return key on the hardware.

However, in the mobile Internet experience, there is no need to set the return button everywhere. Because many devices, such as andoid, BlackBerry, and Windows Phone7, have the physical key back on the hardware.

Andoidphone generally have physical return keys

Even on Apple's iphone browser, the bottom toolbar contains a permanent return button.
The toolbar at the bottom of the iphone browser contains a return button. The return of the upper-left corner of a webpage is superfluous.

Adding a return button to the mobile Web experience can cause confusion. When people use a Web page, they ask, "Do the two return keys work the same?" ”。 Therefore, in mobile web design, should not occupy a limited space in a redundant "back" button.

"Mobile a" in memory of the translation

Source Address: http://www.zhangyq.com/fi......rminal-scene/