Interface technology of B/s architecture system

More and more applications are migrating to the Web platform today. With no platform limitations and installation requirements, the SaaS model looks very appealing. Web application interface design, the core of which is web design, but its focus is mainly on functional aspects. To go beyond desktop applications, Web applications must provide a simple, intuitive, and responsive user interface that allows their users to spend less time and energy accomplishing things.

Previously, we didn't notice the Web application this way, but now it's time to take a closer look at some practical techniques and design solutions to make web apps friendlier and prettier. This article focuses on the first part of a large number of research and results on design patterns and effective design solutions in modern Web applications, where you can find 10 of the useful interface design techniques that you've collected and the best practices you've found in many successful Web applications.

You can make further comments and the second chapter will be published as soon as possible. You can also read the following related articles:

5 Useful Job FX for designers and Developers10 useful techniques to improve Your User Interface DESIGNS10 Principles of effective designfive principle of effective designgetting Creative with transparency into WEB design

1, interface element requirements

In user interface design, simple principle is very important. The more control you display on the screen at any time, your users will have to spend more time figuring out how to use the interface. When the choice becomes smaller, the available features become more visible and easier to discover. A simplified interface is not easy, especially if you don't want to limit the functionality of your application.

When you click on the search link in the Kontain search box, a layer similar to the Drop-down menu appears. So, if you need to narrow your search, you can select the type of menu you want. The aggregation of these options simplifies the search box.

Hiding or masking advanced functionality is a way to make things simpler. Find the most common features and hide the rest. You can do this with pop-up menus and operations, which is common in desktop software. For example, if your search bar has advanced filters, put them in a special drop-down menu on the tail. If users need to use these filters, they can turn on these features in just a few clicks. Deciding what to keep and what to hide is not a simple task, depending on the importance and frequency of the operation.

2. Specialized operation

It is important to choose the right interface control as appropriate. Different situations can be handled in different ways, and some controls can better accomplish their goals than other controls.

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

For example, you can choose the month/year by a drop-down list, but the Drop-down list is not very efficient compared to the calendar selector, where you can select the day you want directly by clicking on the calendar. Calendar selectors also make it easier to see dates, periods, and months (especially working days and rest days), so you can make smarter choices faster than simple drop-down lists.

Mybanktracker's APY Calculator functions to quickly try different speculative results by using easily controlled sliders.

Another good example is the slider. Yes, you can enter a number manually 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-and you can see how to make the right choice between the smallest and largest range.

3. Disable Press button

One of the problems with a Web application's form is the submission process, a very simple form, and if you quickly click two or more "submit" buttons, this form will be submitted multiple times. This is a problem because it creates the same project repeatedly. It is not difficult to prevent duplicate submissions, and this is necessary for most Web applications.

It has two tiers of maintenance: client and server side. We do not use server-side maintenance because it will depend on the programming language you are using and your backend architecture. Basically all you have to do is add a detection mechanism to the submission process to check that the content being submitted is duplicated and that you need to block the submission.

On Yammer, when your new message is submitted, the "Update" button will be banned.

The client is much simpler. All you have to do is disable the Submit button after clicking. The easiest way to do this is to add a piece of JavaScript to the Submit button, as follows:

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

Of course, we recommend that you also check the server side to make sure that the repetition is not passed.

4, simulate the shadow of the window

The shadows under the pop-up menus and windows are not just as simple as looking beautiful. They help menus or windows to stand out from the background by emphasizing them. They also block the noise of background content by surrounding dark tonal areas.

This technology comes from traditional desktop software that helps users focus their attention on the windows that appear. Because most scenario windows are not easy to identify from a desktop program, shadows help them get closer to the reader because it feels like the window is floating three-dimensional on other pages.

Digg's login window has a thick shadow around it to mask the noise of the Web page.

To achieve this, designers often create a transparent container with a PNG image as a backdrop, putting content into a container--plus an isometric border around the sides of the box. Another option is to use a background image with a transparent border and to control the position of the box's contents by absolute positioning. That's what Digg does--it's the picture they're using (dialog.png). This 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;

}http://www.jojobox.cn/blog/blogedit.asp?id=151
. dialog. Body {
Background:url (/img/dialog.png) 0 0; /* semi-transparent. png image/*
padding:40px 13px 10px 40px;
}

Alternatively, you can use JavaScript-based Lightbox effects libraries, or simulate shadows by using the CSS3 attributes we've introduced, but you have to realize that current IE browsers will not support it.

Basecamp's Project switching window has a large light shadow that helps the menu area stand out.

5, blank state tell you what to do

When you design a Web application, you not only need to test the program with sample data, but the most important thing is to make sure that it looks good and helpful when there is no content.

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 Web page for a project management application might list the user's project, but if there are no projects, you can provide a link to create the project. Even if there is already a button to create a project on the page, a little extra help will not be lost.

Campaign Monitor will guide you in the right direction when you start creating an email AD.

This technology actually encourages the user to try out the service and use it directly after registration. A step-by-Step guide to the application can help him or her understand the advantages of the program and whether it is useful. It is also important to present the most important operations to the user and only that--it does not make sense to render all the features. Keep in mind that users often want specific ideas that are more or less available to them, but they do not want to skip to detailed instructions-they have neither time nor interest.

By using a blank state to motivate users and behaviors, you can dramatically reduce "drop out" and help your potential customers better understand how the system works.

There are a lot of wufoo form pages, and when nothing exists, it invites you to create a new form with a friendly message.

6, Button pressed state

Many Web applications have custom button styles. These are used as anchor points or input buttons for their backgrounds using custom pictures. The default input button may not be appropriate in some cases, and text links are sometimes too small. The challenge now is that when you make your links look like buttons, they should work like buttons--which includes the "push" effect when the user clicks on them.

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

You can add a pressed effect to the button by using CSS.

The highrise button actually shows a pressed effect when you click, giving the user a very comfortable feedback feeling.

7, on the landing page to provide registered connection

Some users who are not registered with your application will inevitably be parked on your landing page. They want to use your app, but they can't find the registration page right away. Perhaps they have tried to access a specific page that is available only to registered users.

No delicious account? No problem, a registered connection is provided on the delicious login page.

Goplan's Landing page has a beautiful color button pointing to the registration page.

Putting a registered connection on your landing page makes it a lot easier. If they don't have an account, they shouldn't be looking for a registration page. Our research confirms that there are 18% of sites with login forms or links to landing pages on the registration page. (For example: YouTube, Reddit, Digg, Lulu, Metacafe)

8, context-related navigation

It is important to think about what the user expects to see and what they need in each given scenario. You don't need to display the same navigation controls everywhere because they may not be needed in every environment.

One of the best examples of context-related controls is the most recent interface in Microsoft Office 2007, where the default toolbar is replaced with a loaded control. Each label has specific operations related to different controls, whether graphic editing, proofreading, or simple written form. Web applications can also benefit from such context-sensitive controls because they help clean the interface by displaying only what the user wants, not all of the content.

Lighthouse provides a familiar label navigation menu, but it has a level two menu just below the label. This level displays only the part of the current project-related activity.

9. Pay more attention to main function

Not all controls have the same importance. For example, to create a new item 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 spends most of the time. Only a few will cancel. So if these controls are next to emissions, you may not want to give the same attention.

This lighhouse "Create task" button. You can see the "Cancel" link next to the plain text format. This button not only has more important operations but also has a larger click area and is easy to click.

In order for the user's focus to shift to the "create" link, we can simply take advantage of different styles or control forms. Some of the application's form input buttons are used as the creation action, and the cancel operation is connected as a literal. This not only gives more clicks to create buttons, but also helps those who are searching for content to get a better focus.

10, embedded video

When pictures and text are a great way to communicate with your users and educate your users about the characteristics of your program, if you have the resources to invest, video can even be a better choice. Video has become more and more popular in recent years in Web applications. For Web applications, videos are often used as demonstration videos to showcase product features in a marketing site. But that's not the only way to use video.

Goodbarry features a demo video on the front page to showcase the product, and it also uses demonstration videos to educate users on how to start using.

MailChimp the tutorial video to guide new user actions in the admin panel.

Some Web applications use video embedding in the program itself to teach users if certain features are used. Video is a great way to quickly show how your product is used, because it makes it easier to describe more than one page of text, and it's much clearer, because viewers can see exactly what to do.

Source: http://hi.baidu.com/%CA%AE%C5%C6/blog/item/f2af6e0bba0a148ed0581bbe.html