10 Useful Web site interface design techniques and best practices

More and more software applications are migrating to the Web recently. Because there is no platform limit or installation requirements, the software as a service mode on the Web looks very appealing. The core of Web application interface design is Web page design, but its focus is mainly on function. Compared to desktop applications, Web applications must provide a simpler, more intuitive, and sensitive user interface that allows their users to do things with less effort and time.

In the past, we did not care about the way the Web application, now we should, and it is time to take a closer look at some useful technology and design solutions to make Web applications more user-friendly and more beautiful. This article describes the design patterns and useful design solutions that are widely used in modern web applications, and is the first part. Below you can find 10 useful interface design techniques and best practices on many successful web sites collected by the Web page teaching network.

1. Interface element Requirements

Simplicity is a very important user interface design. The more controls you display on the screen at any time, the longer your users will have to spend figuring out how to use the interface. When fewer choices are made, the available features become more visible and easier to navigate. A simplified interface is best, especially if you don't want to limit the functionality of the program.

When you click on the search Solin to connect to the Kontain box, a drop-down menu appears. So, if you need to narrow your search, you can use menu selections to sort through what you're searching for. Folding These options simplifies the search box.

hiding or masking its advanced features is one way to make things easier. Find the most common features in your interface or other parts, and make it with pop-up menus and controls for the most common desktop software. For example, if your search bar has an advanced filtering function, do not place them at the bottom of the Drop-down menu. If users need these filtering capabilities, they can do so with just a few clicks. Deciding what to keep and what to hide is not a simple matter, but it will depend on the importance of each control and how often it is used.

When you click on the search link collabfinder, you do not have to enter different pages, but in the search box to control the Drop-down, you can directly start your search.

2. Special controls

It is important to choose the right interface control location, different locations have different ways of handling, and some control to complete the expected function better than others do.

Backpack has a compact calendar date and time selector to select a reminder date.

For example, you can use the Drop-down list to select the year, month, and day of a date, but the Drop-down menu is not very effective compared to the calendar selection. In the calendar selection, you can directly click the day you want. Calendar choices can also help you see days, weeks, and months (especially working days and weekends), so calendar selection is easier than a simple drop-down list to make smarter decisions.

The work of the Mybanktracker APY Calculator is easy to use, and you can use the slider control to quickly try out different predictions.

Another good example is the slider. You can manually enter some data at any time, but in some cases, a lot of work using slider control will do better. They are not only easy to use (just click and drag), and you can also see how to choose the right minimum and maximum range of applicability.

3. Disable the Press button

Problems encountered by a Web application-form submission. Very simple form, if you click the "Submit" button two times or more quickly, the form will be submitted two or more times. This is obviously a problem because it creates duplicates of the same items, and it's not difficult to prevent duplicate submissions, but this must be done for most Web applications.

You can take two precautions: on the client and on the server side. Here we do not go through server-side defenses because it will depend on the programming language you use and your backend architecture. Basically what you should do is verify that you do not submit duplicates during the processing phase, and that you want to prevent duplicate submissions.

Yammer disables the Update button when your new message has been submitted .

Client protection is much simpler. All you have to do is make the submit button not always clickable: The easiest way to do this is to add a JavaScript script to the submit button as follows:

1. <input type= "Submit" value= "Submit" onclick= "This.disabled=true"/>

Of course, we also recommend that you implement server-side validation at the same time to ensure that it is not repeated.

4. Shadow around Pattern window

The drop-down pop-up menu and the shadows around the window are not just eye candy (a group of Photoshop's filters, some of the effects we see are like flames, smoke, metal color, and stereoscopic images). They can help the menu or window stand out from the background more prominently. They can also block dim content in the surrounding area of the window.

This technique comes from a traditional desktop application that helps users focus their attention on the windows that appear. Since the primary content of most modal windows is not as easy to differentiate as a desktop application, shadows appear to be closer to the reader because the windows appear in three-dimensional and placed on top of the rest of the page.

Digg's login window has a thick shadow around it to block interference from the content underneath the page.

To achieve this effect, designers often create a container with a transparent PNG picture as a background and a box in which the contents are placed (equidistant from each side). Another option is to use a background picture with a transparent border and a content box to locate using absolute positioning. That's what Digg does-they use (dialog.png) pictures. These are the tags and CSS styles 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 JavaScript light boxes, or use the drop shadows of the CSS3 properties we described earlier, but you must realize that Internet Explorer will not support them.

Basecamp The Project Toggle window has a large soft shadow that helps the menu item to be more prominently displayed.

5. In the idle state, tell people what to do

When you're designing a Web application, it's important to tell people what to do in the idle state, not just to test sample data, but to make sure it looks good and helpful, even if there's nothing there.

When you enter a Web page without any information or queries, it is a useful message to tell people what to do. For example, a Web page for a project management application might list the user's project, but if there are no items, however, you can provide a link to the project creation page. Even if there is already a button on the Web page to do this, an extra bit of help will not cause any harm.

When you start creating an e-mail activity, Campaign Monitor can guide you in the right direction.

This technology actually encourages the user to try out the service and register directly after using the service. Guiding the user through a single step application can help him or her understand what advantage the application offers and whether it is useful or not relative to him or her. It is also important to provide the most important options to users and ensure that they are the most important because it is unwise to give them a multitude of choices. Keep in mind that users usually want you to provide them with more or less specific ideas, but they don't want to go into details because they have neither time nor interest.

Using idle state to motivate users and trigger their actions can greatly reduce "drop out" and help your potential customers better understand how the system works

There are a lot of wufoo form pages, if you don't have one, the friendly message invites you to create a new form.