10 useful Web application interface Technologies

Read the English version of this article (English edition: Smashingmagazine; translation, proofreading: Lucas-li)

In recent years, more and more desktop applications have been ported to the Internet. Software that does not have platform limitations and installation requirements and as a service pattern looks appealing. The core of Web application interface design is Web page design, but its focus is mainly on function. To compete with desktop programs, network applications must provide a simple

, intuitive and responsive user interface, so as to reduce user time and effort to accomplish things.

In the past, we didn't pay attention to web apps in the way we should, and now it's time to look at some useful technologies and designs to make Web applications more friendly and beautiful. This article describes the first part of our extensive research on design patterns and useful design solutions in modern Web applications. Below you will see 10 useful interface design techniques we've collected and successfully applied to many Web applications.

Please feel free to post your comments, methods, and code solutions in the comments. The second part of our study will be served immediately: Please look forward to it.

1. Required interface elements

Simplicity is important in user interface design. The more controls you display at the interface, the more time your users will have to learn how to use your interface. When there are fewer choices, the available features become more visible and more accessible. Simplifying an interface, however, is not easy, especially if you don't want to limit the functionality of your application.

A similar Drop-down box appears when you click the Search link in the Kontain ' s search input box. So, if you need to control the interface space of the search controls, you can use the Pull-down menu to select the category of content you are looking for. You can simplify the search box by collecting these selections.

One way to make your design simpler is to hide advanced feature controls. Put the most commonly used functions in your interface, the rest can be hidden. You can do this by taking a pop-up menu and controls that are very common on desktop software. For example, your search input box has an advanced filter control, so you can hide it in a special Pull-down menu at the end of the input box. If the user needs these filtering controls, then only a few clicks will be required. Although deciding which to keep and which to hide is not a simple task, it can be judged by the importance of each control and the frequency with which it is used.

When you click on the search link on the Collabfinder, the page does not switch to the new page. Instead, the search box control starts at the bottom of the current page and begins your search directly.

2. Specialized controls

It is important to choose the right interface control in different situations. Different situations should be handled in different ways, and it would be better to take specific controls when designing interface tasks.

Backpack provides a concise calendar control for choosing a reminder date.
For example, you can use the Drop-down list to select the date of day and month of the day. However, the dropdown box is not very effective compared to the special calendar control shown in the previous illustration (calendar pickers), and you cannot directly click the date you want. Calendar pickers can also help you see days, weeks, months (especially working days and weekends) and allow you to make a notification decision more quickly than a simple drop-down list control.

The Mybanktracker ' s sliding control APY has a calculator function that can quickly account for the benefits of different projects.

Another good example of this is the sliding control. Yes, you can always manually enter some numbers, but for some special cases, sliding controls can do better. Not only are you easy to use, just click and drag, and you can see if your selection is appropriate at the minimum and maximum range.

3. Non-clickable button

One of the problems that a network application raises in a form is the submission process. For very simple forms, if you click the "Submit" button two or more times, the form will be submitted two or more times. This is obviously problematic because it will produce many duplicate submissions. Blocking the submission of a copy is not difficult, and for most Web applications it is a well-deserved thing.
This security measure should be validated from two ports: client and server. We won't take advantage of the security of the server here, because this is based on the program language you use and the background architecture. What you really should do is validate at the client, which ensures that any content that is being committed is not a copy in the form submission phase and will be blocked if it appears to be a copy.

In Yammer, when your new information is being submitted, the "Upload" button will not be available.
The client's settings will be simpler. The thing you need to do is to make the button unavailable at the moment the "submit" button is clicked. The easiest way to do this is to add a javascrip to the line of code that the Submit button control belongs to, with the following code:

Of course, we would also recommend that you authenticate on the server side to ensure that the copy is not committed.

4. Shaded Corners Modal Dialog window

The tiny shadows around the pop-up menu and the window are not flashy. They highlight the menu and window from the background by strengthening the perimeter. They use shadows to darken the area around the window to reduce the noise caused by the content below the window.
In traditional desktop applications, this technology covers the bottom of the content to help users focus attention on the window that appears. Because most modal windows are not easy to highlight from the main content interface, shadows make them closer to the reader because the window looks like three-dimensional placement on the main interface.

The four sides of Digg's login window have a more generous shaded area to reduce the information noise at the bottom of the page.
In order to achieve this effect, designers often design a transparent PNG image and as a container for the background, in which the container placed content-the container four sides have equidistant distance. Another option is to use a background image with a transparent border and place the content in a box model that uses absolute positioning. This is what Digg does-this is the image they use (dialog.png). This is the markup language and CSS style they use:
(X) HTML:

CSS:

In addition, you can also use a JavaScript based light box or use the css3-attribute of the trace shadow we have introduced earlier, but you need to note that IE browser does not support these.

The Basecamp ' s project toggles the weak shadows around the window to highlight the menu area.

5. Tips tell you what to do

When you are designing a Web application, it is important not only to test with sample data, but also to ensure that it looks good and useful when there is no data. You should design the hint language.
When a page has no information or is in doubt, it is helpful to place a helpful message at the top of the interface to tell the user how to start. For example, the homepage of a project management application may list the user's items, but if there are no items! You should provide a link to create a project page, and additional help is helpful.

When you start building a mail activity, Campaign Monitor guides you in the right direction.

This technology encourages users to actually use the services provided and to start using them directly after registration. Using the simple steps of an application to guide a user can help him or her understand what the benefits of the application offer and whether it is useful. It is also important to provide users with the most important choices, and it is unwise to offer a multitude of options. Remember that users usually want to get more or less specific ideas for what they offer, but they don't want to involve too much detail – they don't have the time or interest.

Using the prompt to stimulate users and encourage users to take action is very meaningful to reduce the number of users who quit the site, and to help potential customers better understand how the system works.

If there is no form, then Wufoo's form page will have a larger, friendly information prompt inviting you to create a new form.

6. Prompted by button

Many Web applications have custom style buttons. These anchors or input buttons use a custom image as the background. The default input button may be inappropriate in some cases, and text links are sometimes not obvious. The challenge is that when the links look like buttons, they behave like buttons--which includes, of course, the "pressed" state after the user clicks on the button, letting the user know clearly that the button is in the clicked State.

This is not purely visual design. Giving users quick feedback will give the application a better response and bring the user experience closer to the desktop application.

You can add a CSS-style button state by defining a link-activated pseudo class. For example, if your anchor has already defined a class name named Add_task_button, you can add add_task_button:active to define its activation status.

When you click, the button in the highrise becomes a pressed state, providing a satisfying response to the user.

7. Link to registration page from login page
Users who have not yet registered your Web application will be able to complete registration directly on the login page. They may want to try your app but can't find the registration page. Maybe they're trying to get a feature that only registered users have.

Still don't have a delicious account? No problem; A registration link is provided on the delocious login page.

Goplan on the login page there is a colored button pointing to the registration page.
For these users, placing a registration link on the login page makes things easier. If you still do not have an account, you also do not need to look for a registration page. Our research shows that: 18% have login form or login form link next to place a registered link (for example, YouTube, Reddit, Digg, Lulu, Metacafe).
8. Contextual Navigation
It is important to consider what the user expects to see and what is needed in the given context. You don't have to show the same navigation controls everywhere, because the user does not need to see it in every context.
One of the best context-related control cases is Microsoft's latest change in the Office 2007 interface, with the default toolbar settings turning into satin-banded controls. Each label on it has a different but behavior-like control, with editing images, proofreading, and writing. Network applications can also benefit from context-sensitive controls, because they can be simple and clean by displaying only what the user needs, rather than displaying all the available.

Lighthouse has a similar tab navigation menu, but there is a level two menu below the series label. This level only shows the action behavior associated with the Web page.

9. More emphasis on key functions

Not all controls are as important. For example, to create a new item on a page, there might be two buttons: Create and Cancel. Because the "create" feature is what users use most of the time, "create" is more important. Only a few cases, the user will cancel the page. So if these controls are put together, you may not want to give them the same emphasis.

The image above is the Lighthouse Create label button. You can see the "Cancel" link next to it in plain text. This not only gives the Create button more clickable area, but also helps the user gain a better view focus during the search for the button.

10. Embed Video

While pictures and text are a good way to convey and teach your application's functionality to users, video will be a better option if you have the resources to make videos. In recent years, video has been popular online. The video is generally used on market websites and is a video show for showing off products. But that's not the only way to use video.

Goodbarry put a video on the home page to show off its product features. The video show tells the user how to start using the product.

MailChimp includes a video tutorial in the admin panel to help new users.

Some Web applications use the video itself in a program to teach users how to use specific features. Video is a great way to tell a user how to use your product quickly, because it allows the viewer to fully understand how to use the product, so it is easier to digest and clear than the whole page of plain text.

Source Address: http://ucdchina.com/post/6225