Как стать автором
Обновить

UI. Интерфейс не должен отвлекать

Уровень сложности Простой
Время на прочтение 2 мин
Количество просмотров 2.1K
Веб-дизайн *Разработка веб-сайтов *Интерфейсы *Дизайн Софт
Мнение

Стараюсь сделать хороший редактор блок-схем. Вот что получается.

Dgrm.net

Редактирование фигуры в dgrm. Минимум кнопок. Настройки отображаются рядом с фигурой.
Редактирование фигуры в dgrm. Минимум кнопок. Настройки отображаются рядом с фигурой.

Задача

Сделать удобно.

Удобно - значит не отвлекать пользователя

Аналитик продумывает бизнес-процесс, ему нужно сосредоточиться. Редактор-схем не должен отвлекать. Редактор должен отнимать как можно меньше внимания.

Максимум 7 кнопок одновременно

Человек может одновременно держать в памяти 7 элементов: 7 цифр, 7 слов. Если в меню 7 пунктов - это удобно. Если больше - нужно разбивать на блоки. Так сделано во всех программах.

Программа блокнот. Большое меню разбито на блоки. Не больше 7 элементов в блоке.
Программа блокнот. Большое меню разбито на блоки.
Не больше 7 элементов в блоке.
На основном экране 2 блока. В каждом не более 7 кнопок.
На основном экране 2 блока. В каждом не более 7 кнопок.
Операции с группой фигур. 4 кнопки.
Операции с группой фигур. 4 кнопки.

Не переводить фокус

В dgrm элементы управления нейтральные, сливаются с полотном. Весь фокус на диаграмме.

Настройки отображаются рядом с фигурой. Не нужно прыгать взглядом между панелью настроек и фигурой.

Настройки отображаются рядом с фигурой. Не нужно переводить взгляд.
Настройки отображаются рядом с фигурой. Не нужно переводить взгляд.

Меньше действий для выполнения операции

Перетащить файл, быстрее чем загрузить через меню.

Можно открыть схему перетаскиванием.
Можно открыть схему перетаскиванием.

Ctrl C, Ctrl V быстрее чем “Сохранить изображение” -> “Вставить в Word”.

Копирование между схемами и Google Docs.
Копирование между схемами и Google Docs.

Избавить от необходимости выбирать

Выбирать стили и шаблоны интересно, но это отвлекает. Наши возможности концентрироваться ограничены, рабочий инструмент не должен забирать наши ресурсы.

Для рабочей схемы хватит 6-ти цветов. Палитра не нужна.

В dgrm можно выгрузить картинку только в одном формате, в png. Эта же картинка “файл проекта”. Вы можете открыть её на редактирование.

Еще пример. “Обводка” всегда находится на заднем плане. Это не нужно настраивать.

Порядок фигур можно редактировать, но обводка всегда на заднем плане. Это не нужно настраивать.
Порядок фигур можно редактировать, но обводка всегда на заднем плане.
Это не нужно настраивать.

Не заставлять целиться

Когда мы целимся ниткой в иголку, прислушиваемся, разглядываем мелкий шрифт - ничего другого одновременно мы делать не можем. Эти действия занимают все наше внимание. Прислушиваясь мы останавливаемся и даже частично выключаем зрение.

В dgrm вы рисуете “по клеточкам”. Не нужно целиться. Все фигуры всегда вписываются в клетки. Вам легче сделать фигуры одинакового размера, и ровно их поставить.

Рисование по клеточкам. Все фигуры всегда симметричны и вписываются в клетки.
Рисование по клеточкам. Все фигуры всегда симметричны и вписываются в клетки.

Редактор развивается

Редактор: https://dgrm.net/

Анонсы обновлений в телеграмм: https://t.me/dgrm_net

Теги:
Хабы:
Всего голосов 15: ↑13 и ↓2 +11
Комментарии 23
Комментарии Комментарии 23

Публикации

Истории

Работа

Веб дизайнер
45 вакансий