Web App Design: Interactive design of web App

Article Description: Google Web App Development Guide Chapter II: Interactive design.

First grasp the basics

Borrow a legend from the basketball world, before you do anything, you have to "first master the basics." This is Boston Celtic basketball legend Larry Bird, who is also a web app enthusiast. All great web apps must have a clear point of concentration.

Related reading: An excellent example of Web apps: Features of Web Apps

Create a clear description of requirements

The great web apps makes it easy for users to focus. People can focus on only a few things in a certain period of time, and therefore, compared to web apps that provide users with many choices and many features, people prefer apps that have no distractions that allow users to easily do the task at hand.

To ensure that your application has a centralized point, create a short description that describes the purpose of your application and your target user base. Make sure you can describe all this to a completely unknown person in three minutes.

1. Focus on the main scenarios in which people use your application, limiting resources for other scenarios.

2. Splitting orthogonal or unrelated tasks into separate applications may mean that your site offers a variety of applications, but each application helps focus on accomplishing a single task.

Figure 2.1– stay focused, don't force too much in other places!

Let's take a look at some of the best web apps hypothetical goal descriptions:

¨gojee– personalized recipes at hand.

¨astrid– helps individuals and teams effectively organize and complete to-do lists for day-to-day business, and let people enjoy them.

¨wanderfly– helps users find new applications based on their interests and budgets.

¨kindle CLOUD reader– to read your KINDLE book anytime, anywhere.

Self-forming system

Although web apps may import data from other Web sites or applications, they are almost self-contained, enabling users to perform their tasks without navigating to other sites or applications. By this definition, a search engine is not an application because it navigates users to other sites to complete their tasks.

Let users focus on the application

When users open a web app, they expect it to be a single application rather than a collection of pages. A great web app will differentiate itself as a separate entity from the site, rather than burying it in the navigation experience of the site.

Figure 2.2– to keep Self is an advantage!

Functional design

The great web App design eliminates unnecessary components, allowing users to focus on the core components needed to complete the task. It is important to keep the following guidelines in mind when designing your own applications:

1. Minimize functionality-independent web pages. For example, a logo on the top left of the page that is usually used to bring the user back to the home page, or a link at the bottom of the page, brings the user to the terms of service, Privacy policy, Project policy, and your home page.

2. Minimize the number of pages, so that the application as much as possible, do not have to switch from one page to another page, but from one view to another view.

3. Design navigation According to the core scenario of the application, and remove typical Web page navigation. Your page probably doesn't need a home button, or a navigation category menu that takes users to different parts of the site.

4. Keep the basic components visible so that people can easily focus on the right place.

5. Provide a consistent design and application experience in the application regardless of the user's step. For example, whether the user is writing a message, searching for a message, or viewing information, exit the button, return to the Inbox button, and write a new mail button should be in the same position in a different view.

Figure 2.3– maintain the characteristics of the application experience. Hide the traditional elements!

Encourage users to interact, participate, and accomplish tasks

A web app encourages users to interact, participate, and accomplish tasks rather than negative browsing, such as buying movie tickets, writing documents, or sharing photos and videos with friends. Unlike web sites, Web apps give users a sense of ownership that they can interact with content or other people.

Make it easy to finish a task

Many people don't have the time and energy to figure out how to use an application. Your web apps should be very simple, making it easy for users to get information and choose what they should do next. Streamline your interface so that users can instantly grasp how to use it.

Great web apps are instantly available or require little training or help for initial use. In order for people to successfully use your application, you should:

1. Reduce the number of options available to the user, so that the application is as concise as possible, users can easily complete the task at hand.

2. For the control key or information to maintain the appearance and feeling of consistency, to avoid allowing users to spend a few energy to find or understand certain functions.

3. Provide clear and easy to understand tags for all control keys, making it easy for users to know the function of the control key.

Ability to use equipment

Web apps can perceive geography, provide detailed information about device actions, and even store data on a hard disk.

Modern browsers allow developers to make more and more use of device functionality. For example, the Web apps can perceive geographic location, provide details of the movement of the device in motion, and even store data on the hard disk. There will be more features in the future, such as access to cameras, microphones, and many other components.

Here are a few ways you can take advantage of the capabilities of the device itself:

1. When appropriate, provide information about the geographic location of the user, such as a nearby hotel or other venue.

2. Use the device's action as a new input to the game, rather than using a mouse or cursor. Users can move the characters in the game by shaking the device.

3. When processing large amounts of data, it is stored on the user's computer so that there is no need to transmit large amounts of data each time the application starts.

Using multimedia to enhance the user experience and immersion experience (immersiveness)

Rich multimedia experience can only appear in the client application, but now the Web apps can also provide users with a rich multimedia experience. Multimedia is part of the overall experience, such as multimedia in gaming or video chat applications, or a novel way to alert users to meeting times or new messages.

Some of the strategies used for rich multimedia applications include:

1. Provide semantics for events, such as new mail notifications, event reminders.

2. Always allow users to screen sound or other multimedia applications, because for users these multimedia applications may be a distraction.

3. Use the page Visibility API to block multimedia playback when users are not looking at your application.

Figure 2.4– Multimedia lets your web App live!

Follow the following design patterns

Use a design pattern similar to native apps

All visual, visual, and action interfaces should feel like web apps, not the feeling of the site. The interactivity of Web apps makes it a perfect match for the design conventions of native apps.

Some guidelines to help you do this:

1. To other parts of the application, use buttons that trigger various actions instead of navigating to links that apply different parts.

2. The common features needed to access the toolbars and menus throughout the application.

3. Use a dialog box to alert the user or get information from the user, rather than navigating to a new page. Use a CS Schema model.

Developers have to believe that modern browsers can provide the features they need to build great applications. Web Apps applications use these features to peel data and presentation layers to reduce network overhead, provide offline browsing, and do not have to modify the entire application if the presentation layer needs to be modified.

Figure 2.5– uses familiar design patterns to enhance interactivity and immersion experience!

Here's what you need to consider when designing your Web app:

1. Use AJAX to transfer data instead of relying on the request-answer model, because in the request-answer model, the entire page needs to be transmitted back and forth, including all the data and presentation layers.

2. Use the index database (INDEXEDDB) to store data that is generated or used locally by the user. Make sure you don't lose the user's data, write the data locally, and then sync it to your service.

If you revere these guidelines in design, your app will feel faster and be like a native app.

This article is compiled from Ling, the original address.