How to design a simple mobile website

"Good interaction design focuses on what people think, do and feel"-Stephen · P. Anderson

Anderson's sentence applies to the entire field of interactive design, as well as the truth of mobile phone interaction design. Allowing users to quickly find the information they want is a necessary condition for mobile phone interaction design. The most important thing is that users can find the most important things in the easiest way. Since mobile phones are the most personal device, it is important to let users have a very good feeling about what they are doing so that they will be able to visit your site more and more.

I bought N95 last year, and now I check and organize emails on my way to work, watch videos on YouTube on my phone, check Twitter feeds and email messages in real time, and check Facebook friends ' information. The theme is: I often walk in the mobile phone version of these websites to check the latest information.

On a mobile phone, the computer version of these websites is in trouble. Before buying N95, my Nokia and Motorola phones had smaller screens, and the mobile browser was a novelty. As the screen grows and browsers become more advanced, N95 has enough screen space and the entire site experience is reasonable, but all of these apps are not designed according to a Computer browser, even though the iphone, with its excellent web zooming and zooming capabilities, But compared to the iphone's own sites (Facebook, Twitter, Gmail), a full version of the site is much more cumbersome.

As Web sites and Web applications become more advanced, there is an urgent need to provide Web sites and Web references for mobile devices such as mobile phones. An application with a good mobile experience often has an emotional attachment that is difficult to explain. Users of the mobile version of the site feel good, both the simple version and the full version of Twitter can be opened through the mobile browser, but often concise mobile phone version is more attractive, because everything above the screen match, as if the user's mobile phone design.

Next, I introduce some of the mobile apps I use every day, and some of my thoughts.

As I said before, I use Gmail every day, and I check emails on my way to work. I generally check 3 mailboxes, each set bookmark. Generally is to view information, archive, delete, report spam, if you need an urgent reply to a message, you will use the reply and send the message function.

The mobile version of Gmail's main screen does not have too many interface features (pictured), mainly important mail browsing and management functions. I can browse, send, accept, delete, and manage messages. In the most important part, information is prioritized at the top of the interface, and other features such as archiving, reporting spam, and deletion are placed at the bottom of the page. When I use the mobile version of Gmail, 80% of the case does not use these features, just check and read the mail.

Gmail Mobile version of the success of the message first, the other interface features.

The second thing I'm going to use is Twitter, which is mainly about looking at the latest information about the people I'm following, and updating myself.

Twitter's homepage is straightforward (see chart): Status updates, followed by the latest state information, with some simple interface elements.

Twitter is a very simple application, even if the computer version of the function is very small, mobile version of the less. Twitter apps do a very good job with basic system interaction, with a simple interface and two main features: status updates and feed browsing. The difference with Gmail is that I often use the mobile version of Twitter to update information. So, of course, the status update should be at the top of the main screen, and below is the feed. Feed length is generally 20 recently updated information: This is a good content processing strategy, on the phone, click to go to the new page cost is much higher than the cost of scrolling view.

Twitter's success lies in the fact that information updates are quick and easy and show the content of a friend's information.

I log on to Facebook every day to see my friends, to view posts on the wall, and to send a Facebook email.

The mobile version of Facebook first shows some simple features and lists (menu). Like Twitter, Facebook assumes that most mobile users are primarily trying to update information. Then there are 3 newly updated information, friend requests, and news feed items. Further down, only to show the wall in recent days, friends posted posts.

I think Facebook did a good job of positioning and highlighting some of the key features, and some of the more important features were appropriately degraded.

Interestingly, Facebook provides a navigation bar. The navigation bar is a useful, neat way to handle many features while emphasizing important features.

The success of Facebook is that it chooses the features that users need most when they go, and the simple interactive interface provides other minor features.

Summary 1:

All three of these applications have one thing in common: the interface has been streamlined to be streamlined and retains the most important application functionality.

These 3 sites are all using CSS, it seems not common, all at the top of the screen hanging color logo. Gmail effectively uses the separation information such as color, with the color links and background to effectively split the information content, message headers and interface. Twitter is simply dividing information with color and line, while displaying the time for streamlining information. Facebook uses Twitter to separate content from content, content, and interface.

, border

All 3 sites also provide a full version of the site links, which I prefer the point. Advanced Mobile browsers fully support the full version of the Web site, even with JavaScript and interactive behavior. Sometimes, the mobile version is far from enough, provide a full version of the link is necessary, although it will feel superfluous, but it is worth it.

While these are not necessary, they do provide a great sense of use for the user.

• Streamline applications, but retain the most important features

All three of these applications are worth emulating, and the three applications in the mobile version do not provide full functionality.

An important flaw in the Twitter phone version is that there is no "reply" feature, and one of Twitter's most important features is interacting with online friends, and you can't get involved in conversations if you can't see who's responding to you. In my opinion, the omission of "reply" function is redundant. Deletion and retention are all about balance. Google has put up a bunch of personalization settings, and the "Settings" page is completely out of the mobile interface. In fact, it is to think about the user who is in the "Go" state, the most important thing that he needs most is the function that is used all the time, and which is the minor function that is used occasionally. In terms of these minor features, I don't use them when I'm gone.

The last thing to discuss is whether to set the site by default to automatically log on to the mobile version. Both Twitter and Facebook are set to log on to their computer version (full edition) website. Gmail, however, is the default login to the mobile version, but provides the option to go to a full version of the site. The problem is not the default setting of which version of the site to log on, for example, I like to automatically log on to the mobile version, but this is only my preference. As mentioned above, in some cases, users need more interface features, so it is very useful to have a link to the whole class website.

Identify the most important part of your service. If it is news or blog information, let your visitors get the quickest access to information, if it is to update information and other behavior, then let them quickly achieve the goal.
If you have a wide range of functions, cut as much as possible. Eliminate some additional applications to focus on important applications. If a user needs to change settings or make big changes, they can have the option to use the computer version.
Do not save the amount of information on the page. The phone's screen is small, but if the information content is relevant and continuous, scrolling is better than a new page experience.
Provides a way to go to a full version of a Web site. Mobile version of the site will not have all the features set, although the switch to the full version of the site's user costs are high, but this option should be at least.

In my opinion, the design of a successful mobile website adheres to a concise principle: let users quickly get what they want to know, perform their actions most efficiently, and all settings can satisfy them.

Because of the size of the mobile device screen, it is impractical to support each screen size, where I use 240x320 as the target screen size because, according to device Atlas Data Explorer, 240x320 is useful while maintaining You can also ensure that your site will be able to display normal on many mobile devices. Indeed, 240x320 is a little bit smaller than a desktop screen (see chart below), almost one-tenth, which is noteworthy.

First, use the website wireframe to outline what a page needs to have. I'm going to design the 3 pages of the electronics store: The browsing page, the search page, and the Items view page.

The first is browsing the page, which is one of the pages that visitors often click on, usually by the homepage chain, which is usually the secondary content associated with a topic or class. Like the desktop computer site, on the mobile phone site to have an advertising logo is the most script, but the station space not too much, at the top of the page has a simple log can play a very good effect.

The browsing page has a number of functions, such as navigation, designed to tell users where they are and what the next location is. Then the search box, followed by some lists, pictures, and other parts of the link.

The primary navigation is at the lowest end. The most important thing on a mobile site is to prioritize, and the extra navigation elements should be at the bottom of the page. Finally, there is an option to browse the full version of the site, because not everyone must use mobile version of the site, or mobile version of the site's function is not complete, so this option is very useful.

Then there's the sketch of the search results page. One of the most common features of web stores is search, so this page must be able to effectively help users reach the page they are looking for. At the top of the page are some simple messages that tell the user where they are now, and then the search results. Additional navigational information is still at the bottom.

The final item is the view page. The main purpose of this page is to review the product information and add it to the cart. First the item picture, the price and the key "add Shopping cart" option, then is the commodity information full text, these several elements are the most important, is treated preferentially. Search is still relevant and useful, but it is moved to the bottom of the page because it is not the most important.

So now is to further outline the appearance of these three pages, more intuitive and accurate display of what the final site is.

Browse page (pictured above): Just as Twitter puts the information update function in its highest priority, we put the search on the top because search is the most popular feature for users to log on to an online store.

Search page (above): As the sketch design, the most important content is search results, so be placed in the highest position. The main line of design is to tell customers what they are searching for, how many search results they have, and how much we can do to simplify the content as needed.

The above picture is the item browsing page, we have collated the page element. ok! The website frame line diagram design is complete!

Original link: http://mobiforge.com/designing/story/mobile-web-design-getting-point-part-i

Source Address: http://www.socialbeta.cn/......t-part-i.html