UI. The interface should not be distracting
Tags: webdev, design, ui, ux
Published: 2023-07-07 15:18:04

[Dgrm.net](https://dgrm.net/)


![Editing a figure in dgrm. Minimum buttons. Display settings next to the shape.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28hwgbuipazqq0b04w9x.png)_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.
No more than 7 elements per block.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvbzbem9vd2y5bjg5rnv.png)_Notepad program. The large menu is divided into blocks.
No more than 7 elements per block._
<br />

![There are 2 blocks on the main screen. Each has no more than 7 buttons.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8uagy8riu327hc5j4ui.png)_There are 2 blocks on the main screen. Each has no more than 7 buttons._
<br />


![Operations with a group of figures. 4 buttons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rrqqk584awya3xzffre.png)_Operations 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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kptirq5uq0ioh5bkj59d.png)_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 description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvsp2w5qa63ytzpbs9kc.gif)_You can open the diagram by dragging._

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


![Copying between diagrams and Google Docs.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/op1wftj3j03r6jjyq7xn.gif)_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.
It doesn't need to be configured.
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ux07xjo8fpd6c860mqra.png)_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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzjnjf6cdqwzjqiqeqil.png)_Cell drawing. All figures are always symmetrical and fit into the cells._

## Editor is developing
Editor: [https://dgrm.net/](https://dgrm.net/)
Announcements on Twitter: [https://twitter.com/boyko_tech](https://twitter.com/boyko_tech)