Mobile User Experience elements

Translator Note: For mobile user experience practitioners, this article can be said to be a treasure. The article not only kapitalmakes the 12 major elements of mobile user experience and its standard, but also provides detailed and rich references. Nina and I will bring this translation from the previous and next sections, and we hope that our translations will bring systematic thinking and thinking inspiration to practitioners.

The Elements of the Mobile User experience

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

The number of mobile users and the use of mobile phones are increasing every year. As more and more users are using mobile phones to complete tasks (see the Future's mobile), it is a concern to improve the impact factors of the mobile user experience.

A mobile user experience is the perception and feeling of a user using a low-end feature machine to any device in a high-definition tablet computer, before, during, and after interacting with a mobile product (browser or app).

To create a pleasurable experience for mobile users, we must rethink the desktop-side design that has long been taken for granted. The complexity of the mobile user experience stems from the characteristics of mobile devices, including: small screens, huge differences in device characteristics, power and network constraints, difficult to locate and forever changing mobile usage scenarios.

By parsing the important components of the mobile user experience, we can get a conceptual framework to build and evaluate a good mobile experience. These sections are mentioned in the article "User-centric Mobile design Method" (see user-centered approach to designing for mobile). The following figure components determine the mobile user experience, including: features, scenarios, user input, content, marketing, and so on.

The importance of these elements varies depending on the type of device (such as non-smartphone, smartphone, tablet) and interface display (e.g., app and web). This article will briefly describe these elements and explain the relevant important guidelines in detail.

{feature}

Functions are tools and features that help users accomplish their tasks and achieve their goals.

specification

1. Prioritize and showcase the core functions that are highly relevant to the mobile environment on other platforms. For airlines, flight status inquiries and self-service boarding functions should be available. For cosmetic chain Sephora, users can easily access product reviews on mobile devices and then shop in.

2. To provide mobile device-specific functions (such as barcode scanning and image recognition), when necessary to use the hardware capabilities of the device to enhance the functional characteristics, thereby enhancing the user's sense of participation and fun. In the old Navy version, users can get a surprise game or discount after taking a picture of a trademark in a store.

3. Ensure that basic functions and content are optimized for mobile devices. For example, when looking for a store, show the nearest store, and make sure that you click the number to talk to the store.

4. Provide business-related functions. For retail sites and apps, it includes product search, order status, and shopping carts.

5. Provide the key functions that all platforms will have. Registered users should see their personalization settings on any device or platform. If the mobile end does not have certain features, then the user will be directed to the appropriate platform, such as TripIt, to guide users to the web side set up personal network.

Expand Reading

"Sharing App Bump 3.0 slashes Most Features, proves pager really Can be more," Fast Company

{Information Schema}

It refers to the organization of functions and content into a logical structure to help users find information, complete tasks, including: navigation, search and tab bar.

Specification

1. The start page should give priority to the user needs, display the main features of the product and functional links. The Mobile Design Patterns library (see Mobile pattern GALLERY) provides examples of major navigation modes and auxiliary navigation modes in mobile devices, many of which are vertical navigation, not horizontal navigation for desktop-side sites.

2. Allow users to navigate to the most important content and function, the number of clicks required as little as possible. The navigation on the small screen usually should be many, the level is shallow, must not have too deep level. We know that each content module cannot be accessed more than three clicks (see three clicks (or taps) is not the MAGIC number), and users also need to know that each click is helping them complete the task. Because each additional level means: more clicks, More page loads, and bandwidth consumption.

3. To consider both touch screen and non touch screen user's navigation needs. When designing for a touch screen, make sure that the click area of the navigation item is at least 30 pixels wide or high. For non-touchscreen handsets (not smartphones), you need to provide key shortcuts so that users can access them by entering a number in 0-9.

CNN's Shortcuts (left) are very appealing to non-smartphone users. Delta does not do a good job, and users need to press the arrow keys 9 times before they can start using their app (pictured and right).

4. Provide navigation tips to let users know where they are, how to return, and how to jump back to where they started. "Mobile breadcrumbs" are often used to replace the "back" button, which shows where the user comes from, in the form of a label. For mobile sites, especially when there is no duplication of navigation on each screen, use the standard specification, such as the home icon, to link to the homepage.

5. Use concise, clear, consistent and descriptive labels as navigation and links. This is usually a good practice, especially on small mobile devices.

Expand Reading

"CHAPTER 1:navigation," MOBILE design GALLERY, THERESA NEIL

{content}

It's not what Lou Rosenfeld and Peter Morville mentioned in the Web information architecture, "the pile of stuff that's displayed in the website," but a variety of types of content, such as text, pictures, and video, that can provide information to users in different styles.

Specification

1. Provide appropriate and public content to the user (e.g. product information, social content, guidance and support content, marketing content).

2. If the multimedia is helpful to the user's operation in the mobile environment, can add content value or support the goal of the website, then use it. Most of the time, providing multimedia content is the best option when users need entertainment or fun (such as news or interesting clips), or guidance (for example, how to use apps or new features).

3. Let users control multimedia: Do not automatically play video or audio, allow users to skip or stop multimedia content, let users know the bandwidth occupied by multimedia content.

4. Make sure the content applies to the mobile environment. As with the chunking rules used to translate from print to internet articles, articles on mobile devices should be shortened so that users can read them over a shorter period of concentration. Optimizes images and media for mobile devices, that is, to narrow the image and media content in small devices, and to ensure that the image is clear enough on the new ipad (see Sharp enough for the ipad).

5. Ensure that the primary content is the format supported by the target device. Even now, the VW website still lets iOS users download flash.

Expand Reading

"MOBILE content:if in Doubt, LEAVE IT out," JAKOB NIELSEN, Alertbox

"MOBILE CONTENT strategy Link-o-rama," KAREN McGrane

{Design}

This refers to visual presentation and interactive experience, including graphic design, brand packaging and typography.

specification

1. Remember the famous saying "move, not miniaturization" (BARBARA BALLARD) and "Do not shrink, rethink" (Nokia). They all mention that mobile design is not just a complete porting of desktop computers.

2. Designed for preview and quick scan. Preview design refers to how visual design can convey information quickly and easily.

3. Visually maintain the unity of design elements and experiences (cell phones, applications, networks, printing and the real world) through color, typography and personalized design. The following stacked pictures, even if you do not see the brand name, it is still easy to identify Amazon.

4. Guide users to start from the most prominent elements to help them complete the task, which is called the visual flow. A good design includes both visual elements and information structures, content and functions to convey the brand image and guide the user.

5. The design process should take into account both vertical and horizontal design. More and more devices can support multiple orientations and are automatically tuned to fit the physical direction of the user. When the user changes the orientation of the device, make sure that the user's position is in the screen. If there are additional or different functions after the direction change, there is a need for explicit instructions, as shown in the following diagram.

Expand Reading

"Designing glanceable Peripheral Displays" (6 MB, PDF), MATTHEWS, Forlizzi and Rohrbach, UC BERKELEY

UNIVERSAL principles of design, revised and updated:125 methods to enhance ease of use, influence cognition, increase attractiveness, make better decision making, design teaching, WILLIAM Lidwell, Kritina HOLDEN, JILL BUTLER

{User input}

This refers to the difficulty of user input data. You should minimize the difficulty of entering data on your mobile device while avoiding both hands.

Specification

1. Limit the input of required parts. As Luke Wroblewski in his book mobile First, "The forms involved in mobile devices need to be brutally and effectively reduced, reduced, and reduced." "Restricts the registration form so that it contains only the minimum required parts, and may be replaced with shorter content. For example, use zip numbers instead of cities and countries. For this specification, my favorite counter example is the public's test drive booking form, the mobile version of the required field is more than the desktop version (highlighted part of the extra field):

2. Display default values whenever possible. It may be the user's most recent selection (such as an airport or train station), or a regular option (such as a day date when checking flight status):

3. If possible, provide standby input mechanism according to equipment characteristics. Apps can take advantage of the many input mechanisms built into the device, including gestures, cameras, gyroscopes and sounds, but mobile sites are just beginning to use these features, especially the geographic location.

4. Use the appropriate input mechanism and display the appropriate touch keyboard to reduce user Switching. Keep in mind that data entry is more tedious than a smartphone on a digital keypad. For apps that do not need to be overly secretive, users are allowed to keep their login status on their mobile devices and keep information such as e-mail addresses and user names, since mobile phones are often personal devices, unlike tablets, which are often used by many people.

5. Consider providing automatic matching, spell checking and prediction techniques to make data entry easier and reduce errors-data recoverability if necessary. Some inappropriate features, such as input to the validation code, should be disabled.

Expand Reading

"FORMS on MOBILE devices:modern FX," LUKE Wroblewski

{Move Story}

We can use mobile devices at any time, any place, so moving stories refers to the environment and state of the user's use--anything that can affect the user's interaction with the device. This is especially important for mobile devices because of the constant and rapid changes in these contexts. While considering user distractions, multitasking, gesture manipulation, low-power conditions, and poor connectivity, consider extreme good scenarios-assuming a Tablet PC in a fast Wi-Fi environment.

Mobile Interactive Scenario (see: The Context of Mobile Consortium), Nadav Savio

Specification

1. Forecast and support the user's usage situation according to the equipment function and hardware capability. Icookbook applications, users can use voice to view recipes-no longer need to worry about the hands of the paste how to do.

2. Adapt to the change of the situation according to the different time of day or the use process of the user. Navfree GPS applications can be automatically switched during daytime and night mode, with a low glare map at night, which makes driving safer.

3. To determine the user's current position and to show the relevant content and help nearby. Users on mobile devices using Google search movies, you can search the nearby aggressively movies and the day of the film, if there is a ticket, you can also see the link to buy tickets.

4. Weigh the information provided by the user and respect the user's preferences and settings. After completing the first stop on a multi-line flight, TripIt application showed me the next flight, boarding information, and the time it had to take. The United application does not do such a thing, though it knows more. I wondered, since I knew I was a member, why didn't it show me how to get to the next plane from the current plane, and clearly identify the VIP lounge on the way United, so that I could comfortably spend the two hours I waited for?

5. The default is to provide users with the most appropriate experience (for example, a mobile experience for small screens, or a desktop product experience for a tablet), but also provide advanced options. At a recent large seminar on how to present this information to users, Jakob Nielsen recommends separating the mobile Web page from the Web (see Jakob Nielsen recommending a separate mobile website), Josh Clark thinks the adaptive Mobile web design is better (link: Josh Clark arguing instead for a responsive), while others think Nielsen and Clark are all wrong (see believe that Nielsen and Clark are both wrong).

Expand your Reading

1. "The context of Mobile Consortium" (0.2 MB, PDF), Nadav Savio, Jared Braiterman

2. "On the Mobile context," Jason Grigsby

3. "When and Where Are arranges Using Mobile Devices?," Luke Wroblewski

{Availability}

Usability refers to the criteria for comprehensively measuring whether information architecture, design, content, and other elements allow users to perform their tasks well.

Specification

1. Let the user know clearly what is optional, what is clickable or sliding, especially on touch screen devices. The Nielsenoman team found in the ipad usability research (see Nielsen Norman Group's usability studies of the ipad) that users usually don't know what is clickable and sometimes are confused by the gesture of sliding, In particular, sliding gestures have different functions in different areas of the same interface. So, make sure clickable content is clear, such as links, icon, and buttons, to be able to look like a point.

2. On the touch screen, be sure to click on the object's size and position to avoid misoperation. In addition, click on the object in the appropriate area, such as: "Delete" and other destructive objects in the "reach" area shown in the following figure, Luke Wroblewski in mobile first.

Luke Wroblewski, "Move First"

3. Comply with the norms and patterns to reduce user learning costs, but also to make the mobile experience more natural. App design should adhere to specific platform specification standards and guidelines. In breaking's mobile web site, the authors of the Web application Design guide for mobile devices and tablets synthesize a collection of official UI and UX Guide links (see UI Guidelines for Mobile and tablet Web App Design).

4. By designing elements such as contrast, color, typography, and font size to ensure the usability of the product in the context of changing scenarios, including daytime glare in the sun, and changing the physical angle and orientation of the device.

5. Do not rely on technologies that are not widely supported by mobile devices, such as Java, JavaScript, cookies, Flash, frames, pop-up boxes, and automatic refreshes. When you need to open a new window, or jump from an application to a Web page, remind the user to avoid reloading the open page.

Expand your Reading

1. "Usability of the IPad Apps and Websites," Nielsen Norman Group

2. "UI guidelines for Mobile and Tablet Web App," Max Firtman

3. "Mobile usability Update," Jakob Nielsen, Alertbox

{Trust}

Here is a discussion of self-confidence, trust and comfort when users use mobile sites or apps. Privacy and security are two of the biggest concerns for smartphone users, according to a 2011 study by TRUSTe and Harris Interactive two companies.

Specification

1. Do not use personal information (such as geographical location and communication records) in mobile devices without the explicit permission of the user. In the first few months of this year, there have been a number of reports of unauthorized copies of the address Book from mobile phones, watchdogs up in arms and users retaliating.

2. Let users easily control how the app shares personal information, such as asking users before visiting locations, and allowing them to exit the target AD.

3. When appropriate, articulate your company's business practices (including privacy, security, and return on investment) (for example, by informing privacy and security terms on the registration page). These terms should appear as minor elements (for example, they can be placed in the bottom column or in the "more" tab). Enhance user trust by displaying trusted tags, especially when users need to provide personal or financial information.

4. Provide users with appropriate terms on mobile devices, including concise overviews and options for sending to mailboxes. As we all know, privacy and security terms are often lengthy and uninteresting, and users tend to blindly click on the consent to continue, so we try to make this process easier.

5. When providing the terms, do not interrupt the user's task flow. Before being interrupted, let the user return to the previous location (see: Take them back to where tightly were) instead of starting over.

Expand your Reading

1. "Layered Policy Design", TRUSTe Blog

{Feedback}

This refers to how to attract the attention of the user and how to display important information.

Specification

1. Reduce the number of reminders to the minimum, ensuring that each reminder provides important information and useful options. Take a look at Chris Crutchfield's article Videos for too Much information and hints (see: Video on Notification and alert overload).

2. Make sure that reminders are short and clear, explaining why there is such a hint and what the user can do. In addition, the button tag should be clear.

3. The message should be brief and informative, do not interfere with the user's operation, and be easy to operate and leave.

4. The feedback and confirmation information provided in the interface should not disturb the user's operation process.

5. If the app has a message tag or a reminder on the status bar, keep the tag and the message updated. Clear this tag when the user adds a new message. When users visit the message tag to be cleared, even if the user has not found out exactly which account triggered the message reminder, this will also force users to test each account.

Expand your Reading

1. "Mobile notifications," Fred Wilson

2. "The Future of Mobile notifications," True ventures

3. "Chapter 8:feedback and Affordance," Theresa Neil

{Help}

This refers to the relevant options, products, and services that can help users use Web pages or applications.

Specification

1. Allow users to easily access the Help and support options. Users typically look for help options at the bottom of the mobile Web page and in the toolbar or tab bar where they are applied.

2. Help in the form of diversification, as far as possible related to mobile application scenarios, such as self-service FAQ, on-site Help-type Click Calls, near real-time direct message push. American Express (Anglo Express) and Citigroup (Citibank), the two financial services companies, are actively providing support through Twitter.

3. Provide quick introductions and short tutorials when users first enter the application, but also provide options for skipping and viewing later.

4. When new or special features are introduced for the first time (such as the first introduction of how to check checks using mobile applications), it is necessary to provide user with situational help and hints, which is also a review of infrequently used features.

5. Provide video guidance where appropriate, but allow users to start, pause, stop, and control the volume as they wish, and remember the multimedia-related specifications mentioned in "content" above.

Expand your Reading

1. "Chapter 7:invitations" and "Chapter 9:help," Theresa Neil
Chapter 7 is available online at UX Booth.

2. "Top 6 help design Patterns for IPhone Apps," Catriona Cornett, Inspireux

{Social}

This refers to the content and function of social elements that allow users to share and interact on existing social networks.

Specification

1. Create and maintain social networks (such as Facebook) and local services (such as integrated service pages, such as Google Maps, Bing business portals, and Yahoo local). Highlighting them in search results and location-based social networking services, in addition to your business name, includes your home address, phone number, url, and business hours.

2. Integrate social activities and mobile experiences: such as displaying the latest activities online, providing simple ways to focus or enjoy.

3. Integrating the characteristics of social networks with the mobile experience of the Web site allows users to quickly connect to social networks, as simple as using APIs to support community sharing, bookmarks, tagging, liking, and commenting.

4. Invite users to use mobile devices to create content that will showcase your brand, products and services and provide some incentive in return. For example, Red Robin, a hamburger chain, has launched an invitation to a user: just share a picture of a child reading in the store and get a free milkshake.

5. Let the content of the mobile end be shared and viral spread. For example, Anglo Express has recently offered savings and discounts on credit cards, as long as you sync your personal information to Facebook, Twitter and Foursquare.

6. Apps that rely on user-created content should explore a set of ways to make the initial content useful and ultimately maintainable. For example, my TSA app has a user-created feature that shows the time the security station waits, but it often displays outdated information, even though the airport staff has already posted the waiting time.

Expand your Reading

1. "The definitive Guide to adding Social Features to Your Mobile Apps", verious

{Marketing}

This refers to how users can discover a Web site and how to use it, as well as the factors that encourage reuse.

Specification

1. Optimize the search and discovery of the mobile end to ensure product accessibility, such as keeping URLs short. If you have a separate mobile site, follow the URL naming convention (m.site.com or mobile.site.com). In mobile search results, provide a quick access to local content (such as the direction of the current position) and the system's own features (such as Click Speed Dial).

On the left is the mobile end of the UPS search results optimized for the page, the right side is not optimized

2. Two-D code of the advent of mobile devices to make the login is very large optimization, we do not need to the traditional kind of need to enlarge to see clearly the page, even more do not need to go to the home page to find the login portal. In addition, the two-dimensional code attached to the product (see QR codes painted on buildings) should be clearly defined so that mobile devices can be identified and interpreted.

3. Messages sent to users should be in the format supported by mobile devices, and content should contain a link to view product-related information-and not go back to the home page of the device itself.

4. It is possible to sell your app on other platforms, such as television, paper, and store advertising, and to motivate users to download and use it, usually by discounting. If your app has a price tag, you can attract users in an overcrowded market with a timed promotion. In addition, you can attract users by restricting daily market-free.

5. Prompts users who have used your app to rate ratings, or share them with social platforms, but give the option of delaying or stopping hints. Although this is not the only way to generate Word-of-mouth, it gives you insight into what users like and dislike. Smalltech in controlling your comments (see taking control Your reviews) discusses how to evaluate the users who use them well, and how to get users to use email feedback.

Expand your Reading

1. "IPad App Marketing case Study:flickpad," Chad Podoski, Mobile Orchard

2. "The Art of launching a app:a case Study," John Casey, smashing Magazine

3. "How to Harsh Your Mobile creator," Michael Flarup, smashing Magazine

{Summary}

The mobile user experience is a booming field, and there are more and more opportunities to improve. The author of this article has outlined the elements of the mobile user experience and the specification of each element that will help us create a better mobile user experience.

(This article is from the Tencent CDC Blog, reprint, please indicate the source)