DEV Community

Alexey Boyko
Alexey Boyko

Posted on

UI. The interface should not be distracting

Dgrm.net

Editing a figure in dgrm. Minimum buttons. Display settings next to the shape.Editing a figure in dgrm. Minimum buttons. Display settings next to the shape.

Task

Make it convenient.

Convenient - means not to distract the user

The analyst thinks through the business process, he needs to focus. The schema editor should not be distracting. The editor should take as little attention as possible.

Max 7 buttons at the same time

We can simultaneously keep 7 elements in memory: 7 numbers, 7 words. If the menu has 7 items - it's convenient. If more - you need to break into blocks. This is done in all programs.

Notepad program. The large menu is divided into blocks.<br>
No more than 7 elements per block.Notepad program. The large menu is divided into blocks.
No more than 7 elements per block.


There are 2 blocks on the main screen. Each has no more than 7 buttons.There are 2 blocks on the main screen. Each has no more than 7 buttons.

Operations with a group of figures. 4 buttonsOperations with a group of figures. 4 buttons

Don't shift focus

In dgrm, the controls are neutral, blending into the canvas. All focus on the diagram.

The settings appear next to the shape. No need to jump between the settings panel and the shape with your eyes.

The settings appear next to the shape. You don't need to look away.The settings appear next to the shape. You don't need to look away.

Fewer steps to complete an operation

Drag and drop a file, faster than uploading through the menu.

Image descriptionYou can open the diagram by dragging.

Ctrl C, Ctrl V is faster than "Save Image" -> "Paste in Word".

Copying between diagrams and Google Docs.Copying between diagrams and Google Docs.

Eliminate the need to choose

Choosing styles and patterns is fun, but it's distracting. Our ability to concentrate is limited, the working tool should not take away our resources.

For a working scheme, 6 colors are enough. No palette needed.

In dgrm, you can upload an image in only one format, in png. The same picture is the “project file”. You can open it for editing.

Another example. Stroke is always in the background. It doesn't need to be configured.

The order of the shapes can be edited, but the stroke is always in the background.<br>
It doesn't need to be configured.<br>
The order of the shapes can be edited, but the stroke is always in the background.
It doesn't need to be configured.

Don't force aim

When we aim a thread at a needle, listen carefully, look at the fine print - we cannot do anything else at the same time. These actions occupy all our attention. Listening carefully, we stop and even partially turn off our vision.

In dgrm, you draw by cells. You don't need to aim. All figures always fit into cells. It is easier for you to make figures of the same size, and to place them evenly.

Cell drawing. All figures are always symmetrical and fit into the cells.Cell drawing. All figures are always symmetrical and fit into the cells.

Editor is developing

Editor: https://dgrm.net/
Announcements on Twitter: https://twitter.com/boyko_tech

Top comments (0)