Web App design details: web App Interactive Design tips

Article Description: A brief talk on Web app design.

HTML5 Technology's strong development, the biggest change for the Internet is: the Web from the "dead" of the prophecy back to native app a heavy greatest second act, the web App became the star of the Stars began to walk in the major companies research and development of the timetable. Google, Microsoft, Apple, the Big three giants in the Web App research and development products in the field of Shegang, and try to build their own-centric "cloud" service platform, in an attempt to the advent of the Web App era as the Overlord.
This article will focus on the design of the Web app and discuss some design techniques with you.

What is Web App?

A web app is an application that is accessed over a network, such as an Internet or intranet, or an application that is hosted in a browser-supported environment or that uses a browser-supported language (such as JavaScript) and relies on a Web browser to render it. The popularity of Web apps is due to the popularity of web browsers and the easy user experience of using this lightweight client. updating and maintaining without having to download the installation, with built-in attributes to support Cross-platform, is a key reason why Web apps are starting to pop. Typical Web App products include Web mailboxes, Web stores, wikis, and so on.

The advantages of Web apps

Implement configuration through compatibility browser without requiring any complex "go out" steps;

The browser application requires little disk space on the client;

New features from the server to automatically pass to the user, users do not need to upgrade the program;

can easily integrate into other service class web programs;

Cross-platform compatibility

It's hard to have a design principle for Web apps at this stage

HTML5 technology is still in development and development is not perfect, web app as the product of this technology is naturally also in the continuous test progress; In addition, web apps rely on the more powerful rendering capabilities of compatibility browsers, as the saying goes, "with Mao", It's hard to predict what a web app needs to be a qualified product before the advent of a powerful browser that everyone expects. In this kind of industry background, web App also has difficulty to have a so-called design principle, at least now does not constitute the condition that summarizes a reasonable design principle.

In fact, the so-called design principles are from the existing, typical design works backwards. For example, the deconstruction design style of the proposed is not before, is a theorist in the analysis and summed up the architect Gary, Eisenman, Testumi and other masters of the typical design works, combined with the design of these masters of the concept of a genre named after the definition. The so-called deconstruction design principle is also summed up from the typical works of the authoritative master, and the design principle appears and then can guide the later design.

Therefore, this article does not talk about the so-called web App design principles, now from the excellent products have been online selection of typical design elements to discuss and share with you, looking for a place to learn from, and to enhance the Web App product design understanding.

8 Practical tips for Web app interface design

Web App user interface design, the core is web design, but compared with the general web design, web App is more focus on functionality. To showcase its advantages in competing with desktop applications, Web apps need to provide a concise, intuitive, and responsive user interface that allows users to save energy and time in task operations.

1. Interface elements Change on demand

To be concise and clear is an important principle of user interface design. The more features you show to users at the same time, the more time users need to find and think. Similarly, the fewer options exist in the interface, the more obvious and easier the available features are. But simplifying the interface is not easy, especially if you don't want to reduce the application functionality.

Take the Kontain search module as an example, in the search box has a drop-down menu to help users refine the search scope. Users can choose what they want to find through the menu. The site simplifies the search box with these options.

Hiding advanced features is an efficient way to simplify them. Figure out what features are most commonly used by users in the interface, and then hide other features. These can be done by Drop-down menus and controls. For example, the Advanced filter in the search bar can be made into a special Drop-down menu style for the tail. When users need these filters, only a few clicks can be used. Deciding which features to keep and what to hide is not a simple task, depending on how important the functional controls are and how frequently they are used.

It's good to deal with Collabfinder, as pictured above. The user clicks on the search link and is not immediately taken to another page; The search box control is pulled down to allow the user to search directly within the current page. This way of design, not only maintain the stability of the user's visual focus, but also make the whole page without using a specific feature of the case simple and refreshing.

2. Add edge shading for modal windows

The pop-up menu and the shadows around the window are not just for visual beauty. Shading increases the size of a menu or window, helps to differentiate a menu or window from the background, and, on the other hand, masks the noise of background content by shading the shaded edges.

This technique is rooted in traditional desktop programs that help users focus their attention on pop-up windows. Because many modal windows are not easy to highlight from the Desktop Program content page, shadows can make them appear to have a stereo effect, as if suspended in other content, so that the modal window and the user's distance.

As pictured above, Digg's login window has a thick shadow that plays an effective role in shielding the visual noise of the content below.

To achieve this effect, designers tend to use transparent PNG background images as containers, and then populate the container with equidistant padding to fill the edges of the pop-up box. Or use a background picture with a transparent border, and position the content box absolutely in it. Alternatively, you can use the Lightboxes command based on JavaScript or the drop shadows command in CSS3, but you need to be aware of whether the browser supports it.

3. Tell the user what to do when they are in a blank state

When designing web apps, not only need to care about the general information display, but also to ensure that the interface in the blank state of good performance, has a guiding role. When no information is generated on the page, you can place a help message in a blank area to tell the user how to start. For example, a project-managed application Home page lists the user's project and, if there is no project information, provides a link for the user to create a project page. Even if such a feature button already exists on this page, an extra help will not be a hindrance.

As pictured above, Campaign Monitor provides a quick entry into the right direction to create new information.

Wufoo's form page has eye-catching, friendly information that encourages users to create new forms.

This technique can effectively encourage users to try out the service and use it immediately after registration. A single step through the application can help users understand the advantages of the application and whether it is useful to them.

In addition, it is critical that only the most important feature options are displayed to the user. It doesn't make sense for a brain to pour a lot of functionality into the user. It should be kept in mind that users often want to get more or less information from their applications, but don't want to jump into the details, and the user has no time and no interest.

Motivating users in a blank state can significantly reduce user churn rates and help potential users better understand how the program system works.

4.Button Status Positive Feedback

Many web apps have custom-styled buttons. The default input button may not be appropriate for some scenarios, and text links sometimes seem too subtle. It should be noted that when the link is made into a button style, they should have a button representation. For example, they should appear to be "pressed" when they click on the button. This is not just a purely visual change. Feedback to the user in a timely manner can make the Web app feel more sensitive and closer to the user experience of the desktop application.

You can use CSS to add buttons to the "pressed" status, to achieve in different states to display different background picture features.

For example, the button in highrise, when the mouse pointer clicks will present a "pressed" state effect, providing users with a sensitive feedback feeling.

5. Using contextual context Navigation

It is important to consider what the user wants to see and what they want in a given situation. You do not need to place the same navigation controls everywhere, because users do not need them in every situation.

One of the best examples of contextual navigation is that in Office 2007, the original default toolbar collection was replaced with a banded control form. Each tab controls a set of associated functions, such as editing graphics, proofreading, or simple writing.

Web apps can benefit from this contextual navigation by showing only what the user needs, not all of the available features, to keep the user interface clean and tidy.

For example, the lighthouse has a very typical tab navigation menu in the previous illustration, however, there is a level two navigation at the bottom of the tab navigation bar, and only the active part of the site is displayed in this level two navigation.

6. More attention to key functions

Not all controls have the same importance. For example, to create a new entry, the page will have "create" "Cancel" two button. The "create" here is more important, because this is what the user is about to do in most cases. In rare cases, users will click Cancel. Although the two controls are placed side-by, do not give the same degree of attention.

To guide our attention to "create," we can try to use the unused style or style. One way is to design the Create button style and Cancel to design the text link style. Another way is to use a different color visually, and to make the button have a slightly convex effect. This facilitates the capture of the user's gaze.

For example, in the window where Google + creates a new circle, creating a button visually has a more visible effect, with a higher level of emphasis on the page.

7. Embed Video

While pictures and text are a great way to introduce the features of an application to a user, the video will be a better solution if resources allow. In recent years, the use of video on the network more and more frequently. Screenshots of web apps are often used in marketing sites to showcase the functionality of a product, but this is not the only way to use video.

Goodbarry uses screenshots to display the product in its home page. It also embeds video in the application to guide users to the beginning.

MailChimp Use tutorial Videos in the admin panel to help new users.

Some web apps use internal embedded video to help users understand the specific features of a product. Video is a great way to quickly demonstrate how a product is used, because video is easier to accept than text, and video allows users to see exactly what needs to be done more clearly.

8. Let the upgrade or downgrade tips concise, not disturbing

In many Internet products will have different permissions of the user account exists, such as mailbox, space, network disk storage, SNS products. After the user has an account, they can upgrade or demote the account. How do you design an interface to prompt the user that they can upgrade without interfering with the user's workflow? Designers will certainly not want to do this outside the application, such hints should be seamless with the app, and it is best to make the user feel convenient. So the tips for upgrading your account are best done in app.

Let's take a few examples to see how the upgrade account is handled.

The FreshBooks upgrade hints are always present and are placed at the bottom of the Web App. As pictured above. Because hints are located outside the client area of the interface, they do not affect the user's workflow.

In the Basecamp upgrade prompts, users can be very clear about what will change after the upgrade. Please see the picture.

In Compversions, a variety of upgrades after the change is very intuitive, the entire page concise and clear. Please see the picture above.

Summary

Web app design details far more than the above mentioned above, this article only counts as holding bricks, I hope you can find in the outstanding products have more thinking of the trigger point. When we are accustomed to skim through other company products, we have become accustomed to too many things, when we start to design the user interface, start to deal with the details, but often there is a sense of uncertainty. If the usual summary of other products (not necessarily adhere to their own product circle) the details of the bright spot, I believe that a lot of things in the actual work can be used for me.