Touch screen mobile Web product design experience share of user experience design

Article Description: over the last few months, the company experienced several web page design and development based on the native browser of the touchscreen handset. Touch screen mobile phone user experience design has a further understanding, but also quite want to share some experience.

Over the last few months, the company experienced several web page design and development based on the native browser of the touchscreen handset. Touch screen mobile phone user experience design has a further understanding, but also quite want to share some experience.

The previous article includes some of the following elements:

>> Spirit and Foundation

What is high-end--high-end design spirit

Balance between platforms

Different resolution and proportional transplant

Browser frame

>> Design "Pan" process

User Requirements in Mobile scenarios

Less is more of a design principle

Interface temperament

———————————————————————————————————————————

>> Spirit and Foundation

What is high-end (high-end )--high-end design Spirit

At first, I asked myself a question: what exactly is the "high-end" experience we relish?

I got a little bit ponder from the moment I looked at the iphone. Although it is an excellent representative of industrialized goods, I would prefer to see it as "artwork". Its exquisite elegance transmits in each curved surface and the material, each place craft all harmonizing. The internal software design also inherits this pedigree and temperament, and sublimate it into a pure, instinctive, emotional and exclusive atmosphere. Where the owner is a "my" artwork (the transfer of belonging to the feelings), where the owner, it is the hope of everyone "gift." Designers create a client or Web page like a work of art to produce a high-end experience. There is no compromise or compromise in this process, only exhaustion.

The above is another dimension of thinking about high-end experience, regardless of the high-end market and user needs. Of course, the high-end version of the design of the complement is not the so-called "low-end" version. In the face of low performance handheld terminals, to be bound by many versions of the same "high-end" design spirit, is high.

Balance between platforms

Touch screen design, currently mainly for the iphone and Android platform (Symbian V5 platform experience is not free from the experience of its classic keyboard machine constraints, so temporarily not classified as the design object). The application design of Web pages suitable for different platforms needs to balance the difference between the interaction characteristics and the system habits brought about by the software and hardware differences. For example: The iphone's only home hard button (navigation must be implemented through the software interface), no menu style, single page single task Interaction ideas, pop-up dialog box button inverted, and so on. While the Android platform mostly retains the return, menu, homepage (home), search and so on four system hard key, relies on the context menu and the pop-up menu to handle the complex task, establishes the user long according to the operation Custom.

Touch Screen Web page if need to realize some complex design, android-chrome contrast Iphone-safari performance slightly inferior. For example: A page that slides down a group of things horizontally, scrolling through a list in a limited height, and so on. The Android version is cumbersome and tends to go down to ensure design consistency. In addition, considering the cost, you can balance the differences between different platforms as much as possible and simplify the versions. To achieve extreme experience, the UA (User Agent) identity can be used to match different platforms.

Different resolution and proportional transplant

Resolution problem is the eternal topic of handheld terminals. The designer cannot evade the difference in screen resolution of different models and the Ratio of the ratio (Aspect) to show compatibility.

The IPhone 3GS and ipad screen resolution density is similar (163 PPI and 132 ppi), using the interface background tile can basically solve the adaptation problem.

If the iphone 3GS image resources were reused directly on the iphone 4 Iris screen (326 ppi), the physical area of the interface element would shrink to 1/4, and the screen quality and ease of operation would be lost.

To achieve seamless scaling of the physical dimensions of the interface (resolution Independence), the current method of pre drawing (pre-rendered) is commonly used. Client products need to be customized according to the model of the interface, Web products need to differentiate the version, by identifying the user agent to point to different URLs. To ensure high flexibility and low cost redrawing, in visual design, it is recommended to use the Photoshop vector path tool (turn on Snap pixel mode) and apply Layer style drawing (Quick copy layer style). Notice the details of the pixel blur. Please check out thedesigning for IPhone 4 Retina display:techniques and WorkflowIf this article does not repeat itself.

In order to improve the adaptability of the page, the common interface elements should use less pictures, and use the rule design style supported by CSS3.

Here, I recommend another article on screen size adaptation of the professional article " Client interaction Design Fit--screen size ."

Browser frame

"Web Version" met the "client" version Sheng sigh: "Both the birth of yoga He Senliang ah?" "Client-side product design has many advantages, such as:

• Custom Soft Keyboard
• Self-painting controls
• A rich metaphor graphic interface
• The absolute positioning of the surfaced panel (always the bottom of the toolbar in the end of the page is not easy to implement)
• A rich gesture operation
• Support for more complex animation feedback
• Large capacity Cache
• Background real-time communication
• Call the phone hardware features such as: sound or vibration tips, through GPS or base station to obtain geographical location information, through the camera, microphone transmission multimedia files.

These are the web design of the short board, designers often feel stretched. However, the Web page version of the full product strategy has far-reaching significance. Its advantage is to make up for platform vacancies more quickly, and effectively maintain Cross-platform product experience consistency, more timely response to day-to-day operations and product function promotion, faster response to user needs, save cell phone traffic, more seamless implementation of different products between the business pull (client products are relatively independent, not easy to do integration).

Nine feet from the base of the Earth. Good touch screen mobile phone Web application design, need to "browser" framework has a general understanding. Both the iphone and the Android browser are WebKit cores. Take the Iphone-safari browser for example:

• Flash and Java (including Java applets) are not supported
• Plugin not supported
• Browser-based file downloads are not supported
• Inserting local files is not supported, that is, <input/> is not supported
• Saves caching. iphone only supports cache less than 25kb
• Support Cookies
• The dynamic interaction of the interface can be realized by using JavaScript
• Support for playing HTML5 video

In addition, some features of the WebKit kernel mobile browser affect interactions, such as supporting tables, CSS3 advanced stylesheets, and so on. Among them, the most important feature is the Ajax Dynamic asynchronous request and the local refresh , which will explain the meaning of this feature in detail later.

———————————————————————————————————————————

>> Designing a "pan" process

User Requirements in Mobile scenarios

Mobile scene, the user's mainstream demand is to use debris time reading, search, download, game, communication. In the early stage of design need to think:

• In what state does the user operate (understand the user's core requirements and how to use it)?
• How to display information that is more likely to arouse user interest (filtering for information and information layout for mobile-side presentation)?
• Why choose a mobile browser to access the Web page (Analysis of Web application and client application positioning differences)?

The purpose, operation and potential difficulties of the end user of the handset are much more complicated than the user sitting at the table. Citing a text report published by Harris on the use of mobile phones by Wpzune . You can learn about the interesting behavior of mobile internet users.

There are three main categories of iphone applications: Highly efficient applications, utility applications, and immersive applications (see iphone HIG). Different product positioning will produce a differentiated design strategy, thus affecting the user's interactive mode. The product manager must be clearly defined with product type and general design direction before the design starts.

Less is more of a design principle

Easy-to-use mobile apps should follow less of the design principles, simple interactions, clear prompts or feedback, fewer and precise requests, from simple to elegant, accurate to meet the user.

• Keep the user focused on the page and make it clear how to use your content

Clear definition of application definition for mobile phone use (application definition Statement), screening function, dimensionality reduction information to meet users ' focus on obtaining information and accomplishing current tasks.

Related to specific page design, share a experience: can try to use concise statements to sum up the core functions of each page we designed and the meaning of the user. If it is difficult to generalize accurately and simply, it will mean increasing users ' understanding of costs and memory burdens.

• Avoid noise, useless white, gaudy background

Prevents users from being distracted by visual information other than content.

• Reduce user input as much as possible

Memorize user information and make requests to users strategically.

• Concise expression of necessary information

Concise and explicit hints of guided actions (such as novice tasks, operational guidelines, feature introductions), and disruptive actions (such as prompts, inquiries).

• Avoid unnecessary interaction

Interface temperament

Touch screen version of the Web page design should be fully displayed touch screen interface temperament. The touch interface requires attention to links and control dimensions. Take the iphone 3GS as an example, the size of the control for finger Touch is 44x44pix, and the change of the hand is the same, the iphone controls the response range between 22x22pix ~ 55x55pix.

The apparent temperament of the touch screen interface is:

• Controls and text links with sufficient response range
• Rounded Corners
• Paper flat style with relative stereo buttons
• Common graphics and text in a page