“In 1985, when drawing tools came with Windows 1.0, it was amazing to see that you could draw on your computer using a graphical interface. These design tools are now very powerful, but the most powerful are also accompanied by the most complex interfaces.”

“Which interface style do you prefer?”

In recent years, online design tools have been favored by more and more people for their advantages of cloud storage, lightweight and multi-person collaboration, and the popularity of Wix, G Suite and Graffana has convinced major manufacturers of their value.

Above is an interactive demo of the “Online Dashboard design tool”, using the “floating properties panel”, “collapsible hierarchy panel” and so on. Let’s take a look at what we can learn from it and how we can make it better.

01

–

A wider visual interface

The traditional “toolbar”, “property panel” and other modules fixed in the interface gradually block our view just like the high-rise building in front of the sea view house, and the user experience is naturally greatly reduced. In recent years, mainstream software has begun to try to give users a wider and broader vision without affecting the operating experience, and bring the most essential simplicity and refreshing feeling.

| receive “toolbar”

If your editor “tools” frequently used in the interface, the more categories, too, PS as the toolbar directly listed is a good solution, but if you find that as an online product, the number of “tool” is not so much will not use frequently, can consider to receive it to “menu bar” or other places, The famous prototype design software “Sketch” adopts this design strategy.

 

| floating properties panel”

Similarly, if the “properties panel” is not very large, consider making it hover rather than stick to one area of the page. We know that if the Properties panel is fixed in an area, the less content properties panel has a lot of white space to cover the workspace and feels clunky, while the floating properties panel feels lighter.

| integration “menu bar”

In the client software, the top area is generally composed of “menu bar” and “tool option bar”, while the Web system often does not have so many functions, so it is suggested to merge the processing and give the interface a thin “bangs”.

In addition, many online design tools are subsites of web platforms, and their products often hope to add a common “navigation bar” for the platform, but doing so can be as frustrating as forcing the top half of the window of a beachfront house to be covered. Our advice: consider using the width of the “menu bar” to pack navigation and other features into a single column as much as possible. Of course, it would be nice if you could convince the business side to open a new page with no navigation when the design tool opens on the main site rather than jump to the current page.

02

–

Clearer functional cognition

For every design tool, how to convey complex interface functions is the most difficult problem, which requires designers to carefully consider every detail.

| mark “icon”

The interface of a design tool often contains some functions that need to be expressed by ICONS, such as “preview” and “export”. However, some functions cannot be clearly recognized by graphics. If ICONS and text are used, they can supplement each other to make the meaning more accurate. Of course, if space is an issue, some interface areas can be changed to hover a single icon and then slide over other ICONS to display tag content immediately, rather than hover each icon to calculate the duration of the response independently.

| weakening “interference”

Design tools in the interface visual focus is always “workspace”, so “toolbar”, “properties”, these areas should not be overly expression can be used as the background of pure color, font also advises slender, if there is a button or other special function is weakening, as far as possible let users will not be disturbed by flowers.

| clear “layout”

The use of “borders” and “blocks” is always a problem for layout. “borders” can be very useful for dividing areas, but their complicated lines can also draw attention away from them. A “block” with a background color doesn’t steal the show, but it’s a bit less of a differentiator. For design tools, it is still recommended to use the “block” approach to the interface, because complex functions have higher requirements for the clarity of the interface, and the in-depth design of the “block” in the ability to divide areas and so on will not lag behind the “border” too much.

03

–

Smoother touch

Editing design is often a very long process, and users will be immersed in the production process for a lot of time. Some simple operations may be repeated several times or even hundreds of times, so it is the responsibility of designers to make the operation as smooth and smooth as possible. Here are some suggestions:

| careful “bounced”

In some cases, quick attention is the advantage of the pop-up, but in more cases, the only closing path will bring users a very limited experience, and it is easy to make users mad once misoperation or continuous occurrence. This is especially deadly for heavily manipulated crafting tool interfaces. Generally speaking, we only recommend the use of pop-ups in completely independent processes, such as “export”, “import”, “save as” and so on. In most cases, we recommend that you try inline or slide out methods, which are lightweight and sufficient to attract users’ attention.

| dynamic effect “transition”

The sudden changes of elements do not conform to the natural laws in reality and give people a sense of abruptness. Why not consider using some natural animations to make the transition more smooth and natural? Fade in and out, graphic position movement, window zooming in and out are all good techniques. But be careful not to make the animation too long or have too many complicated animations.

| wisdom “boot”

Online products often have a lot of novice users, how to make these novice users become masters quickly? Guidance is a good idea, but what do we do when we’re fed up with all the information we’re being pushed? Our advice is: first of all, the guide should be made lively and interesting, can be an exaggerated picture or a GIF; Second, spread out the help guides so that if you click on an area, the relevant guides appear automatically, even better.

[1] Reference: Cognition and Design: Understanding UI Design Guidelines (2nd edition) 2014-08

[2] Reference: Good UI Ideas

[3] Reference: User Interface Design: Effective Human-Computer Interaction Strategies (6th edition) 2017-06

Check out more original content