How to improve the user experience of the Enterprise product Web App?

Essentials of Web App Design

1. Color Matching

Color is one of the main elements that a designer conveys emotion. A clear brand color, to trust, the degree of awareness will be greatly improved. In addition to the color for the interface to enhance the aesthetic, but also as a function of auxiliary. In the General page information of large enterprise products, often a color button is very easy to attract the user's visual focus.

Lovely is a web App designed by Dribbble Kerem Suer. Orange Main, blue auxiliary, light gray for background. This color is bright color, faint feeling more let a person long time use also feel tired. The whole feeling is harmonious and comfortable, concise engaging.

Squarespace is a black and white match, can be said to be a black-and-white color of the Jiaojiao. With a large area of white, high-quality pictures, with excellent interaction, so that every time you open a child page there are surprises, is the author's favorite Web page.

Even the icon also shows Squarespace brand style.

2. Space

Often found that many designers in the design of Web apps and mobile apps, will be limited by the size of the screen, only focus on a screen to display all the information. To know the web design and mobile phone interface design of different graphic design is that the first two outside the screen is there is infinite possibility, you can slide through the animation of a new interface to the current screen, you can scroll up and down to see more content. Therefore, when designing a Web app, you can better handle the space between elements. But the point to be reminded is to pay attention to the size of the notebook, the white will be too.

A great example of space processing comes from dribbble.

This idea is more evident in mobile apps with limited screen size. Compare the following two design drafts, the left white space is not more atmospheric.

3. Reduce line

In the flat design, the interval processing, try to use the contrast between the color blocks to replace the line. Reducing the lines can make your interface look more concise. You might want to try it out, but you might have a refreshing feeling when you remove the line in the design.

4. Consider different sizes

Because of the slow popularity of large screens, the Web site, which has been set at 1000px wide, has begun to be unable to be satisfied with the display on a large screen. Therefore, in the design of web app, we need to consider the way of displaying the interface elements under different screen sizes. The most basic requirement is to consider the greatest and smallest scenarios: 1920x1080, 1024x768

This is screen resolution statistics at the beginning of 2014 (source from CNZZ)

MailChimp's handling of the responsive is excellent.

To get a deeper understanding of responsive, you can read the response web design from Isux.

Inspiration to the product design of the enterprise

Simple

Although the logic behind your product is complex, it is simple and efficient to make it appear to the user.

Trello is a multiplayer task collaboration Web App. Its task pad can easily move tasks from one phase to another with only one mouse drag.

MailChimp is a web App for mail making and tracking. The process of making a mail template provides a visual template. Basically, only drag&drop and input values can be used to complete the design and procedural things.

Invision is a web App designed to quickly make interactive shapes for designers. Its management page is very handy for grouping, you can add a split line to any location, and then drag&drop to move the group where the picture is located. The interactive die making process is faster and more efficient, and a key-generation link can be sent to other Invision users to view.

Progressive rendering

Many web apps have a common problem, that is, a lot of features, but also want to give all the features to the user, the result will lead to the first time the user came in, face a huge amount of information interface, and then there is a large round of novice tips bubble. Many times, users will lose the impulse to continue research because they are unprepared or experiencing setbacks. To enhance the product's first impression of the user, you can try to use the idea of progressive presentation to show the interface.

Take Trello as an example, the first time the interface will only render a project box, the user will naturally notice and click on the only eye-catching elements, into the project will display a task version, click on one of the tasks to display the task details.

It is also the first time to use, trello contrast asana's expression is not to make you more relaxed.

This kind of progressive design method can keep the interface concise, enhance the user's first impression, reduce the user's psychological burden. Similar thinking, in fact, often used in web design, for example, Apple's official website at the beginning will only show the entrance of different products, access to specific products can be based on their interest to click to see more in-depth understanding of the page, if a full range of information on all products, this will be another feeling. For more on the step-by-step presentation, you can read the psychology of a designer who is recommended by Isux.

The experience of mobile phone type

The use of the right amount of animation, can be emotionally added to a lot of products. Nowadays HTML5 and CSS develop rapidly, in the Web page often can see some familiar experience on the phone, this design in addition to make people feel particularly cool, but also can extend to the mobile end, as a unity of experience.

Squarespace, drawer-style navigation.

Teambition is the domestic project collaboration Web APP, and its inbox is like a IOS7 notification center. The overall design is also very simple and easy to use.

Conclusion

The purpose of the enterprise product is to serve the enterprise and to serve the people.

Always believe that Apple and Google's minimalist concept is to give designers a good point of reflection. It is challenging to design complex enterprise products simply and interestingly. The face of simplicity, behind the need for strong technical support, as well as designers to improve the details of human life care and perseverance, can be truly simple and not simple.