Ten common web interface applications

With the popularization of JS and XHTML applications, more and more web interface application technologies are available on websites, such as our common calendar controls and search drop-down boxes, these web interface application technologies greatly enrich the website presentation form. Here we will carefully recommend ten most common web interface application technologies for you.

Today, more and more applications are migrated to web platform. Because there are no platform restrictions and installation requirements, the SAAs model looks very attractive. The core of Web application interface design is web page design, but its focus is mainly on functions. To surpass desktop applications, web applications must provide simple, intuitive, and instant response user interfaces, allowing their users to spend less energy and time doing things.

In the past, we did not notice the web application method, but now it is time to carefully look at some practical technologies and design solutions to make Web applications more friendly and beautiful. This article mainly introduces the first part of the results of a lot of research on the design pattern and effective design solutions in modern web applications, you can find 10 collection of practical interface design technologies and best practices in many successful web applications.

You can make further comments. The second branch will be published as soon as possible.

1. Requirements of interface elements
In user interface design, the simple principle is very important. At any time, the more control you display on the screen, the more time your users will have to spend to figure out how to use the interface. When the selection is small, the available functions become more obvious and easier to discover. The simplified interface is not easy, especially if you do not want to restrict the functions of the application.

 

When you click the search link in the kontain search box, a layer similar to the drop-down menu appears. Therefore, if you need to narrow the search scope, you can select the type you need from the menu. The aggregation of these options simplifies the search box.

Hiding or hiding advanced features is a simpler method. Find the most common functions and hide the rest. You can use pop-up menus and operations to do this, which is common in desktop software. For example, if your search bar has advanced filters, place them in a special drop-down menu at the end. If users need to use these filters, they can enable these functions with just a few clicks. Deciding what to hide is not a simple task, it also depends on the importance and frequency of operations.

 

When you click the search link of collabfinder, you do not need to open different pages. On the contrary, the control menu of the search box is drop-down, allowing you to start searching directly.

2. Special Operations
It is important to select an appropriate interface control as needed. In different cases, you can use different methods, and some controls can better accomplish their target work than other controls.

 

There is a compact calendar and time selector in the backpack to select the reminder date.

For example, you can select year, month, and day from a drop-down list, but the drop-down list is not very efficient compared with the calendar selector. in the calendar, you can click to select the desired day. The calendar selector also makes it easier for you to see dates, cycles, and months (especially work days and rest days), so you can make more informed choices faster than using a simple drop-down list.

 

The apy calculator function of mybanktracker allows you to quickly try different speculative results by using the easily controlled slider.

Another good example is the slider. Yes, you can enter a number at any time, but in some cases, the slider control does a better job. Not only are they easy to use-Just click and drag-but you can also see how to make a proper choice between the minimum and maximum ranges.

3. Disable the press button.
One of the forms in Web applications is the submission process, which is very simple. If you click the submit button twice or more times, this form is submitted multiple times. This is a problem because it will create the same project again. It is not difficult to prevent repeated submissions, and it is necessary for most web applications to do so.

It has two levels of maintenance: client and server. We will not maintain it through the server because it will depend on your programming language and your backend architecture. Basically, you should add a detection mechanism during the submission process to check whether the submitted content is repeated and whether to block the submission.

 

On Yammer, when your new message is submitted, the "Update" button is disabled.

The client is much simpler. All you need to do is to disable the "Submit" button after clicking it. The simplest way is to add a piece of JavaScript For the "Submit" button, as shown below:

<Input type = "submit" value = "submit" onclick = "This. Disabled = true"/>

Of course, we recommend that you check the server at the same time to ensure that the repeat will not pass.

4. Simulate the shadow of a window
The shadow in the pop-up menu and window is not just as simple as it looks pretty. They help menus or windows stand out from the background by emphasizing them. They also mask the noise of background content through the surrounding dark areas.

This technology comes from traditional desktop software and helps users focus on the window that appears. Since most of the scene windows are not easily identified from the desktop program, shadows help them to be closer to the reader, because the window seems to be three-dimensional floating on other pages.

 

The login window of Digg has a thick shadow surrounding it to shield webpage noise.

To achieve this, designers often create a transparent container and PNG image as the background, and put the content into the container-add an equal distance border to each side of the box. Another option is to use a background image with a transparent border and use absolute positioning to control the position of the box content. This is how Digg works. This is the image that they are using (dialog.png ). Here is the code and CSS style they use:

(X) HTML:

<Div id = "Container">

<Div style = "display: block; top: 236px; opacity: 1;" class = "dialog">

<Div class = "body">

<Div class = "content">

...

</Div>

</Div>

</Div>

</Div>

CSS:

. Dialog {

Position: absolute;

Left: 50%;

Margin-left:-315px;

Width: 630px;

Z-index: 100001;

}

. Dialog. Body {

Background: URL (/img/dialog.png) 0 0;/* semi-transparent. PNG Image */

Padding: 40px 13px 10px 40px;

}

Alternatively, you can use the lightbox special effect Library Based on JavaScript, or simulate the shadow by using the css3 attribute introduced between them, but you must realize that the current IE browser will not support it.

 

The Basecamp project switchover window has a large light shadow to help the menu area stand out.

5. the blank status tells you what to do
When designing a web application, you not only need to test the program through sample data, but also, most importantly, when nothing is available, make sure it looks good and helpful.

When there is no information on the page or query results, it is helpful to tell you how to handle these blank areas. For example, a project management application webpage may list users' projects, but if there is no project, you can provide a link to create a project. Even if a button for creating a project already exists on the page, a little extra help is not lost.

 

Campaign monitor will guide you in the right direction when you start to create an email advertisement.

This technology actually encourages users to try out the service and use it directly after registration. The single-step guidance of the application helps the user understand the advantages and usefulness of the application. Similarly, it is important to present the most important operations to the user and only have these operations. It is meaningless to present all the functions. Remember that users usually want to get specific ideas that are more or less provided to them, but they do not want to jump directly to the details-they have no time or interest.

Using the blank status to motivate users and actions can greatly reduce the number of "drop-out" and help your potential customers better understand how the system works.

 

Wufoo has many form pages. When nothing exists, it invites you to create a new form with a friendly message.

6. button press status
Many Web applications have Custom button styles. Custom images are used as the anchor or input buttons for their backgrounds. The default input button may not be suitable in some cases, and the text link is sometimes too small. The challenge is that when you make your link look like a button, their operations should also be the same as those of buttons-this includes the effect of being "pressed" when users click them.

This is not a pure visual adjustment. Providing instant feedback to users will make the application feel more responsive and bring users a user experience closer to the desktop software.

You can use CSS to add the press effect for the button.

 

The highrise button is actually displayed as a press when you click it, giving users a very comfortable feedback.

7. provide registration connection on the login page
Some users who have not registered your application will inevitably stop on your login page. They want to use your application, but they cannot immediately find the registration page. Maybe they have tried to access a specific page provided only to the registered user.

 

No delicious account? No problem. A registration connection is provided on the login page of delicious.

 

On the goplan login page, a beautiful color button points to the registration page.

Putting a registered connection on your login page makes everything much easier. If they do not have an account, they should not go to the registration page. Our research confirms that on the registration page, 18% of websites have login forms or links to the login page. (For example, YouTube, Reddit, Digg, Lulu, metacafe)

8. Context-related navigation
It is important to think about what users expect and what they need in each given scenario. You do not need to display the same navigation controls in every place, because they may not be needed in every environment.

One of the best examples of context-related controls is the recent interface in Microsoft Office 2007, in which the default toolbar is replaced by a widget. Each tag has specific operations related to different controls, whether it is graphic editing, proofreading, or simple writing. Web applications can also benefit from context-related controls that help clean the interface by displaying only the content you need, not all the content.

 

Lighthouse provides a familiar label navigation menu, but it has a level-2 menu at the bottom of the label. This level only shows the activities of the current project.

9. Pay more attention to main functions
Not all controls have the same importance. For example, to create a new project on the screen, you can have two buttons: "CREATE" and "cancel ". This "CREATE" link is more important, because it is the operation that the user will use most of the time. Only a few will cancel the cancellation. Therefore, you may not want to pay the same attention to these controls.

 

The "Create task" button for this lighhouse. You can see that the "cancel" link is in plain text format. This button not only has more important operations, but also has a large click area and is easy to click.

To turn users' focus to "CREATE" links, we can simply use different styles or controls. Some application form input buttons are used as the creation action, and the cancel Operation is used as a text connection. This not only gives the create button more click areas, but also helps users who are searching for content get a better focus.

10. embedded videos
If you have the resources to invest, video can even be a better choice. Video has become increasingly popular in Web applications in recent years. For Web applications, videos are usually used as demonstration films to demonstrate product features on market websites. However, this is not the only method for using videos.

 

Goodbarry is characterized by a demonstration video on the front page to show the product. It also uses demonstration films to teach users how to get started.

 

Mailchimp embeds a tutorial video on the Administrator panel to guide new users.

Some Web applications use video embedding in the program itself to teach users to use certain features. Video is a very good way to quickly show how your product is used, because it is easier to describe more than one page of text, it is much clearer, because the audience can clearly see what to do.

From: http://ww.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/

Discount bear http://www.jojobox.cn/blog/article.asp? Id = 151