Nothing to see a good foreign language, a simple translation of a moment to share them, we want to be useful.
Today more and more applications migrate to web platform. Since there is no platform restrictions and installation requirements, SAAS model looks very attractive. Web application interface design, the core is the web design, but its focus is mainly in the function. To go beyond desktop applications, Web applications must provide simple, intuitive and immediate response to the user interface, so that their users spend less time and energy to get things done.
Previously, we did not notice the way web applications, but it is time to look at a number of practical technologies and design solutions for Web applications more friendly and more beautiful. This paper describes that in the modern Web applications, our design model and a large number of effective design solutions Jin Xing Yan Jiu and Dedaojieguo the first part, You can also find 10 to collect the utility Jiemian design and success in Xuduo Web application of best practices.
You can further view, second part published as soon as possible.
1, the demand for interface elements
In the user interface design, the simple principle is very important. At any time, you are on the screen, the more control, your users will have to spend more time to figure out how to use interface. When the choice variable is low, the available features become more apparent more easily found. Although the simplified interface is not easy, especially if you do not want to limit the time the application functionality.
Figure 1
When you click the search link Kontain search box appears when a layer is similar to the drop-down menu. So, if you need to narrow your search, you can choose the menu type you need. Polymerization of these options simplifies the search box.
Hide or cover up the advanced features that make things more simple way. Identify the most frequently used functions, and the rest of the hide. You can use the pop-up menu and operation to do it, which is common in desktop software. For example, if your search bar with advanced filters, put them on the tail of a special drop-down menu. If users need to use these filters, they are just a few clicks can turn these features. Decide what to retain what is not hiding a simple task, the importance and the operation will depend on the frequency.
Figure 2
When you click the search link CollabFinder you do not need to open a different page, on the contrary, the control of the search box drop-down menu down, allowing you to directly start the search.
2, special operations
To choose the appropriate interface based control is very important. Different situations can be handled differently, and some controls will be better than the other controls to complete their task.
Figure 3
Backpack in a tight calendar and reminder date time picker choice.
For example, you can choose a drop-down list and date the calendar selector, however, and not very efficient compared to the drop-down list, in the calendar where you can choose what you want by clicking on a certain day. Calendar Picker gives you more easily see the date, period and month (in particular days and rest days), so can you with a simple drop-down list than the faster and make more informed choices.
Figure 4
MyBankTracker the APY calculator functions easily controlled by using the slider to quickly try out different to predict the outcome.
Another good example is the slider. Yes, you can always manually enter a number, but in some cases, the slider control to do a better job. Not only because they are easy to use - just click and drag - and you can see clearly how the range of minimum and maximum between the right to choose. 3, press the button to disable
Form in the web application problem with one is the submission process, a very simple form, Ru Guo De hits you quickly two or more times "Submit" button, the form will be submitted several times. This indicates a problem, because it will repeat to create the same project. Prevent duplicate submission is not difficult, but for most Web applications, to do this is very necessary.
It has two maintenance: client and server side. We do not maintain the server side because it will depend on the programming language you use and your back-end architecture. Basically, you should do is In the process of adding a detection mechanism to check whether the content was submitted to repeat, and the need to prevent the submission.
Figure 5
In Yammer, when your new message is submitted, the "Update" button will be disabled.
Client is much simpler. All you need to do is disable after click "Submit" button. The easiest way is to "submit" button to add a JavaScript, as follows:
Of course, we would recommend that you also check on the server side to ensure that duplication will not be passed.
4, simulation window shadow
Pop-up menus and window in the shadow of not only looks pretty simple. They help menu or the window to stand out from the background by stress. They also passed around the dark color background area to shield the noise content.
The technology comes from the traditional desktop software to help users focus their window appears. Since most scenarios window is not easy to identify them from the desktop program, so the shadow is closer to readers to help them, because the window seems to be three-dimensional feel to floating on other pages.
Figure 6
Digg the login window has a thick shadow around it to shield the noise page.
To achieve this effect, designers often create a transparent container with the PNG image as a background, the contents into the container - the box with each side equidistant border. Another option is to use a background image with a transparent border and through absolute positioning to control the location of the box contents. This is the practice of Digg - it is they are using the picture (dialog.png). This is their code and use CSS style:
(X) HTML:
...
CSS:
. Dialog (
position: absolute;
left: 50%;
margin-left:-315px;
width: 630px;
z-index: 100001;
)
. Dialog. Body (
background: url (/ img / dialog.png) 0 0; / bin / boot / dev / etc / home / lib / lost + found / media / misc / mnt / net / opt / proc / root / sbin / selinux / srv / sys / tmp / u01 / usr / var / vmware semi-transparent. png image backup / bin / conf / data / log / maint / svn / tmp /
padding: 40px 13px 10px 40px;
)
Or, you can use the lightbox javascript effects library based, or through the use of the CSS3 between the properties we introduced to simulate shadows, but you must realize that the current IE browser will not support it.
Figure 7
Basecamp project to switch the window to have a light-shadow, the Help menu area stand out.
5, blank tell you what to do
When you design a Web application, you not only need to sample data to test the program, and most importantly, what did not when the case, you want to make sure it looks good and is helpful.
When the query results page or no information to tell you how to handle these blank area is a very helpful information. For example, a project management web application may be listed in the user's project, but without the project, you can create a project to provide a link. Even though the project has been created there is a button on the page, but a little extra help will not have losses.
Figure 8
Campaign Monitor will begin to build a message in your ad to guide you in the right direction.
This technique actually encourage users to try services, and directly use the service after registration. Single-step through the application process guiding the user to help him / her to understand the procedure and whether it is useful to provide advantages. Equally important is the most important operation, and only those presented to the user only - out of all the features are present does not make sense. Remember, users typically want to get some more or less available to their specific ideas, but they do not want to jump directly to detailed to - they have neither the time nor the interest.
To motivate the user through the gaps in state and behavior, can greatly reduce the "drop out" and help your potential customers, to better understand how the system work.
Figure 9
Wufoo form page has a lot of time when there is nothing it will be a friendly message to invite you to create a new form. 6, the button pressed
Many Web applications have a custom button styles. These are used to customize the background image as their anchor or input button. Default input button may not be suitable in some cases, as well as text links are sometimes too small. The challenge now is, when you link your confused look like buttons, they should be and the button operation of the same - this includes when the user clicks on when they will be "pressed" effect.
This is not a purely visual adjustment. Provide immediate feedback to the user will feel more responsive applications, and closer to the user desktop software for the user experience.
You can increase the CSS for the button press results.
Figure 10
Highrise button is actually displayed when you click on the effectiveness of a press, to the user feedback a very comfortable feeling.
7, as registered in the landing page link
Figure 11
Some do not register your application's users will inevitably stop at your login page. They want to use your application, but it can not immediately find the registration page. Maybe they've tried to access is only available to registered users of a specific page.
Figure 12
No Delicious account? No problem, the login page in Delicious provides a registration link.
Figure 13
Goplan landing page has a beautiful color button to point to the registration page.
On your landing page will make all the connections put registration easier. If they do not have accounts, they should not look for the registration page. Our study confirmed: the registration page, 18% of the site has a login form or link to login page link. (Example: YouTube, Reddit, Digg, Lulu, Metacafe)
8 Context Navigation
Think about what the user expect to see, and given the scenario in each what they need is very important. You do not need to show the same in each place the navigation control because the user might not in each environment requires them.
Contextual control is one of the best examples of the recent Microsoft office 2007 in the interface, in its interface with the default toolbar is installed to replace the control. Different controls for each label specific actions related to, whether it is graphics editing, proofreading, or simple writing. web applications also can benefit from this Context's control, as these Kongjiantongguo Zhi Xian Shi user Xu Yao's Neirong Lai Bang Zhu clean Jiemian, Bingfei display all the contents.
Figure 14
Lighthouse provides a familiar label navigation menu, but it is in the bottom two menu labels. This level shows only part of the current project-related activities. 9, more attention to the main function
Not all controls have the same importance. For example, on the screen to create a new project, you can have two buttons: "Create" and "Cancel." The "Create" link is more important, because most of the time will go to the user with the operation. Only a few will go to cancel. So if these controls next to the discharge, you may not want to give the same attention.
Figure 15
. This Lighhouse the "Create task" button. You can see the "Cancel" link on the side in plain text format. This button is not only more important to do and there will be large and easy to click click on the region.
In order for the user's focus to "create" link, we can easily control the use of different styles or forms. Some applications of the form input button used as a create action, and to cancel the operation as a text link. This will not only give more click the Create button region, but also to help users search the contents of the focus of attention better.
10, embedded video
When the pictures and text as a great way to communicate with your users and education of your users about the characteristics of your program, if you have the resources to invest, video and even a better choice. Video web applications in recent years has been increasingly popular. For Web applications, video is usually characterized as a demonstration video display products used for the market site. But this is not the only way to use video.
Figure 16
GoodBarry features a demonstration video in the front page to display products, it also through the use of demonstration videos to educate customers how to get started.
Figure 17
Mailchimp administrator panel embedded in the video tutorial to guide new users to operate.
Some Web applications use the video embedded in the program itself to educate the user if you use some specific features. Video is a very good way to quickly show how your product is being used, because it is more easy to describe more than one page of content, it is much clearer, because the audience can clearly see how to do.