Most people think that the expectations of enterprise products may be as long as the function is strong, information security, and can help enterprises improve efficiency. But now and the past has been different, people slowly began to pay more attention to product user experience. So, in the enterprise product design, how can enhance the user experience?
Next, let's take a look at the some good cases at home and abroad, and some of the thinking directions when designing web apps.
Essentials of Web App Design
1. Color Matching
Color is one of the main elements that designers convey emotions. 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 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 page.
Even icon also show 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 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 enterprise product design
Simple
Although the logic behind your product is complex, it is simple and efficient to make it appear to the user.
Trello is a collaborative web App for multitasking. Its task pad can easily move tasks from one phase to another by simply dragging the mouse.
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 of pictures. 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.
Mobile Experience
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 navigation.
Teambition is a 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 enterprise products is to serve the enterprise and 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.