10 Common technologies for Web front-end applications

Web front-end application of 10 commonly used technology, with the application of JS and XHTML popularization, more and more Web interface application technology appears on the site, such as our common Calendar control, search Drop-down box, and so on, these web interface application technology greatly enriched the site's performance form, This article will carefully recommend 10 of the most common Web interface applications.

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.

1, the interface element needs

In the Web front-end development, the simple principle is very important. At any time, the more control you display on the screen, 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. Simplifying the 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 you want in the menu. 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, but also depends on importance and how frequently it is manipulated.

When you click on the Collabfinder search link you do not need to open a different page, instead, the search box under the Control menu is pulled down, allowing you to start the search directly.

2. Specialized operation

It is important to choose the right interface control depending on the situation. 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 using a simple drop-down list.

3, disable Press the 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 over and over again. It is not difficult to prevent duplicate submissions, and it is essential for most Web applications to do so.

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 section of JavaScript to the Submit button, as follows:

　　

Of course, we would recommend that you also check the server side to make sure that the repetition does not get 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.

The 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.

　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's also important to present the most important operations to the user and only that--it doesn't make sense to have all the features present. 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.

6, press the button of the state

Many Web applications have custom button styles. These are used as anchor points or input buttons for their backgrounds with 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 users closer to the desktop software user experience.

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.

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

Putting a registered connection on your landing page makes everything 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.

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 are going to 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 the Create button, 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 been gaining popularity in recent years on Web applications. For Web applications, videos are often used as demonstration videos to showcase product features in the marketing Web 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.

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.