Apply from web site to mobile client

If you've been working on a relatively traditional web design for interactivity, vision, and so on, and now you're going to expand your horizons, upgrade your skills, and become a mobile internet player ... Then this article is very suitable for you to read. Some of the bulls in the field will give us some real experience in the next few days. The full text is roughly divided into three themes:

What knowledge and skills do

web designers need to learn in order to enter the field of design and development of mobile applications? From a design standpoint, what is the main difference between a mobile client application and a traditional site page? How do I improve the user experience for mobile client applications? What do designers need to pay special attention to?

Get to the point. Nowadays, there are people everywhere talking about mobile applications, from visual appearance to interactive experience, the joy of that. The actual statistics are also quite astonishing. A recent study from flurry shows that users (in the United States) spend about 81 minutes a day using mobile apps, averaging 74 minutes of internet time.

In this world, as a user experience design-related practitioners, whether it has been the main direction of interaction, vision or front-end, may now have begun to explore the relevant areas of mobile applications.

In this article, we will start with three major issues and discuss with several industry experts to see what they think and suggest in terms of "transition".

What knowledge and skills do

web designers need to learn in order to enter the field of design and development of mobile applications? Josh Clark (designer, developer, with the book "Touching the Heart – Designing an iphone application,"

)

When it comes to the design skills of eight, there's not much new stuff to learn in the introductory phase. We can use already familiar HTML, CSS and JavaScript to create a very good user interface client application. Don't get me wrong, I'm not talking about Web app form (what is Web App?) Please refer to our previous article on Web site migration methods. I refer to the so-called "hybrid application (hybrid apps)", which is a way to implement the user interface based on HTML and other front-end technology on the native Client, which is equivalent to putting the native client's cloak on the web app, and put it in the App Store. This approach is a good starting point for traditional web design and developers who want to transform.

With regard to "hybrid applications", Jonathan Stark has written two great books, "Building iphone enterprise Apps-based on HTML, CSS and JavaScript", and "developing Android apps with HTML, CSS, and JavaScript", The book shows how to use open source framework PhoneGap to create this mixed-form client application.

It's good to get started, but mixed applications are too numerous to compare with native client applications. If you want to create in the visual and animation effect, etc. are more authentic, especially the need to play the device hardware itself a variety of functions of the application, Native Client application is still the best choice. This means you need to learn to use object-oriented C language (c) to write iOS apps, or use Java to build Android versions. These are real programming languages, and for web design-related people like us, learning is going to be a lot harder, and often we can work with experienced developers who will design ideas and programs through code.

Even so, we don't need to throw away HTML, CSS, JavaScript, or related web App front-end development frameworks-tools that can help us create rapid prototypes in the process of developing native apps--both visually and interactively--fairly high-fidelity fast prototypes.

When it comes to design work itself, especially in terms of user experience, there are significant differences between mobile apps and traditional Web pages. There are two points that require special attention: man-machine interaction and use of the scene.

For mobile devices, there is a lot of interaction design problems you have to face and solve, and in the past, you are now designing your fingers. One question you must consider is how the page element layout allows the thumb to operate freely and rest fully. In addition, when the user in the operation, part of the interface will be blocked by the thumb, so try to ensure that the layout of the control elements will not interfere with the actual content. There are many more problems like this, most of which can be summed up in both "comfort" and "visibility". This is why most touch-screen smartphones place the main control components or navigation on the bottom of the screen--and these are the opposite of traditional web design habits. You need to know how most users will use client applications in what context. We usually have a misconception that users will be able to use apps when they are too busy to focus. In fact, this is only part of the actual situation, "mobile applications" is not only in the mobile state of use, many times, people will be on the sofa, in the kitchen, in the airport waiting for operation. In these scenarios, the user has enough time to operate, and attention can be concentrated. In addition, mobile devices in many ways than desktop computers, such as GPS, built-in microphone and camera, touch, gyroscope, compass, etc. based on these features to create different types of client applications, their corresponding usage scenarios are different.

Don't assume the user's intent too confidently. Mobile apps do not necessarily represent a simplification of functionality, and you may be wrong when you tell yourself that "users do not need to use this feature in mobile versions." Recall if you have the experience: open a Web site that you're familiar with in a mobile device's browser, but find that the page jumps to the so-called mobile version, not just in the sense of vision and operation, but, worse, perhaps the functionality it simplifies is what you need. Although users are using small screen devices, this does not mean that they need to get information, need to use less functionality.

What I want to say is, I believe that in most cases, both mobile applications and so-called mobile pages should have similar content and functionality to desktop Web sites and products. Of course, as we mentioned earlier, in terms of presentation and interaction, they need to be treated differently based on the characteristics of the device itself, but the content should be as consistent as possible. There are times when mobile apps even need to do more, taking Amazon as an example, their mobile client applications also feature barcode scanning, a typical case of taking advantage of the unique features of mobile devices.

From the point of view of website mobility, as a web design and developer, it is necessary to exercise more flexibility in thinking. For more than 15 years, we've just designed a Web site for desktop browsers. The real web design should not be the same, it should be in the platform of differences, in any device, any size of the screen to ensure accessibility and availability.

Of course, it's really hard to see this before the mass popularity of mobile devices, and now we're beginning to understand that our sites and products are accessed and used by various types of devices. That's not to say that we're going to build a single version for all types of devices – what really needs to be a Web site that is adaptable and responsive.

For response web design, you can refer to our two previous articles: what is a responsive web design? How to proceed? and implement responsive web design via CSS3 Media query.

Robin Nixon (web Developer, author of a technology article, HTML5 for IOS and android:a beginner ' s Guide)

In my opinion, for traditional web design and developers, the best way to get started is to keep the technology advanced, including HTML (5), CSS (3), and JavaScript; Currently, the solution to integrate Web apps into native client applications is becoming increasingly mature , to achieve mobile application of products, we do not necessarily need to spend time learning those complex programming languages, such as object-oriented C language, JAVA,. NET. As long as you have enough solid front-end design and development capabilities, you can easily create Web apps.

Aaron Maxwell (Mobile Web up founder)

From a design standpoint, most concepts and skills still apply. As a designer, you need to be aware of what you want users to do with mobile apps, and what kind of user experience you want your products to offer. Although some retreats, it is a good start to focus on these issues and to continue to think.

A menu is a UI component that can bring efficiencies unless you provide too many menu items. Try to slide the layers into the presentation, organize the menu items in a reasonable inheritance relationship, and make sure that there are not too many menus in each layer. In addition, the Label (tab) Form of navigation is also an important element in mobile applications.

As with traditional Web pages, it is also a matter of learning to keep white in the mobile application interface. How to use white to express the relationship between visual elements and groups, it is necessary to carefully ponder and try. Especially by the mobile device screen size of the visible area, in the control of the distance between the elements, we do not have too many pixels available, so the pixel level of detail to grasp the ability to become more important.

Remember to discard some elements at the right time. For example, in the Setup menu, adding a single menu item increases the complexity of the operation, allowing users to spend more time and attention on the features they may not need. For your products involved in the use of the scene, to do a full understanding, and on this basis to determine the priority of functional elements, make trade-offs.

Sarah Lynn (web Designer, creative Designer)

In the transition to mobile, I personally think the best and most practical way to get started is to study all kinds of mobile apps on the market. Observe them, analyze their functions, learn how they are used to native controls, use them in practice, familiarize and understand how various controls interact, and compare different applications. In addition, many companies and teams have done a wide range of user research, you can learn a lot through their research reports, especially in terms of user experience.

In addition, some good books can also help you get started. One of my most recommended is Suzanne Ginsburg's designing iphone user experience (UX design for iphone apps).

Some work takes time and effort to execute, for example, to learn to get feedback from users, another point is to enter the actual design development process before the full planning work, in the initial stage can make paper prototypes, and early with the user or experienced mobile application design developers to communicate.

from a design standpoint, what is the main difference between a mobile client application and a traditional site page? Sarah Lynn

I think the biggest difference is in interactive design.

There are many different things to consider than traditional web design, such as the screen size of a mobile device, the differences between different system platforms, usage scenarios, and user habits. There are many use scenarios for mobile applications, including the most common use in "move", and a common but often overlooked scenario where users are in a stable environment, but because they are not qualified or lazy to use a desktop or notebook, they use mobile device applications instead of execution. So, be aware of the most appropriate use scenarios for your application, and design for the user habits in these scenarios. To target users as the center, this principle regardless of mobile application design or Web page design, must be implemented.

From the traditional web to mobile applications in the process of transformation, how natural to the design object to the smaller and more flexible, this is not a small challenge. Screen orientation is also an issue that must be considered, and you must make your application work well in both models, and give full play to the advantages of each orientation approach.

In the introductory phase, it is recommended that you first select a platform to thoroughly understand the advantages and disadvantages of the platform's equipment to provide the original functionality. There are many factors to consider when making a choice, including a full planning of the functions that are required for your application, and research into the target user base.

How does

improve the user experience of mobile client applications? What do designers need to pay special attention to? Mike Gualtieri (actuarial analyst, author of report mobile APP design best Practices)

Users have higher expectations for mobile applications than ordinary Web sites. Products such as Apple's iphone have a high prestige for mobile apps, especially in design, and features such as multi-touch and gestures offer a new revolutionary way of interacting with mobile applications. To achieve a good user experience design in mobile applications, you must have a good understanding of the user, even more than they know about themselves. Traditional user research methods can still effectively help us create personas, understand their actual needs, use of applications, and so on.

In general, for mobile applications, designers should try to take into account the following 5 factors to guide the interaction and visual design process:

Location: Users will use mobile apps anywhere. Mobile: Users will use applications in a mobile state, such as walking, jogging, or in vehicles. Instant: Users will be able to take out the device at any time. Preference: Under conditions, users will use different mobile devices according to different requirements, some users will have a sense of digital dependence on the device, and some are based on the actual needs of the occasional use, the situation varies. Equipment: Mobile devices are just a general concept, for some applications, must take into account a variety of devices, such as smartphones, tablets, e-readers and so on.

J.d.biersdorfer (technology product journalist, with best iPhone Apps)

In the process of writing the best iphone apps, I've looked at and tried out 400 to 500 iPhone apps, and I've concluded that most of the things that can bring a good user experience are those that specialize in the visual and interactive aspects of mobile device features. And those who are obviously in the traditional web design ideas, screen size and touch operation of the lack of consideration of the application, whether it is the visual style of elements, or layout of the organization, space control, and so on, most will produce unsatisfactory, or even bad experience.

Source: Source Address: HTTP://BEFORWEB.COM/NODE/14