Дизайн-гайд

Диалоговое окно Диалоговое окно открывается для вопроса или предупреждения пользователю. Это блокирующее сообщение, которое требует обязательного внимания пользователя. Обычно выводится для необратимых действий, например, очистка табличной части или установка особого режима работы. Вот несколько правил, которые помогут сделать хорошее диалоговое окно: 1️⃣ Сообщение диалога должно быть понятным (спасибо, Кэп!). Важно рассказать, что планируется сделать и что требуется от пользователя. Сам вопрос лучше начинать с новой строки, чтобы явно выделить действие. 2️⃣ Описания действий на кнопках должны быть четкие. В утвердительной кнопке лучше повторить действие из вопроса, которое запрашивается у пользователя. Стоит обратить внимание на действия со словом Отмена, чтобы избежать ситуаций, когда будет две кнопки «Да, отменить» и «Отменить». 3️⃣ У пользователя должна быть возможность закрыть диалог без выбора действия. Обычно пользователь для этого закрывает диалог по крестику в правом верхнем углу. Но если нет кнопки с КодВозвратаДиалога.Отмена, то иконка будет доступна. Стоит такую кнопку добавлять самостоятельно, например, вместо негативного действия. Пример на оповещениях: ТекстВопроса = "Для отключения уведомлений и комфортной работы рекомендуем использовать режим тишины. |В этом режиме будут приходить только важные уведомления | |Установить режим тишины?"; Кнопки = Новый СписокЗначений; Кнопки.Добавить(КодВозвратаДиалога.Да, "Установить режим тишины"); Кнопки.Добавить(КодВозвратаДиалога.Отмена, "Нет, оставить как есть); ОписаниеОповещения = Новый ОписаниеОповещения("УстановитьРежимТишиныЗавершение", ЭтотОбъект); ПоказатьВопрос(ОписаниеОповещения, ТекстВопроса, Кнопки); Пример на Асинх: &НаКлиенте Асинх Процедура ЗадатьВопрос() ТекстВопроса = "Для отключения уведомлений и комфортной работы рекомендуем использовать режим тишины. |В этом режиме будут приходить только важные уведомления | |Установить режим тишины?"; Кнопки = Новый СписокЗначений; Кнопки.Добавить(КодВозвратаДиалога.Да, "Установить режим тишины"); Кнопки.Добавить(КодВозвратаДиалога.Отмена, "Нет, оставить как есть"); Результат = Ждать ВопросАсинх(ТекстВопроса, Кнопки); Если Результат = КодВозвратаДиалога.Да Тогда Сообщить("Режим тишины установлен"); КонецЕсли; КонецПроцедуры #Design

Как правильно сообщить пользователю об ошибке Для сообщения об ошибке есть 5 основных правил: 1️⃣ Расскажите пользователю, что он сделал или что произошло 2️⃣ Объясните проблему 3️⃣ Объясните как исправить ошибку 4️⃣ Используйте активный, а не пассивный залог 5️⃣ Приведите пример Об этом рассказывает Сьюзан Уэйншенк в своей книге «100 главных принципов дизайна» 🎯 В 1С:Бухгалтерии одной из ключевых операций является Закрытие месяца. В этом месте пользователь чаще всего сталкивается с ошибками. Причем порой они могут и не знать, почему это неправильно. Важно именно в этом месте рассказать не только об ошибке, но и о том что нужно знать и как это исправить. 💡 На скриншоте часть кода формирующего описание и объяснение ошибки, и он чуть ли не больше, чем код выполняющий эту операцию. Полное описание кода можно посмотреть в КонтрольЗатрат.ОписатьРасходыНеУдалосьРаспределить() ❗ Понятно, что такое описание ошибок не везде. Порой возникает малоинформативное «К сожалению, возникла непредвиденная ошибка». С этим, к сожалению, ничего не поделаешь - так сейчас выводит ошибка платформа. И есть вот инструкции от партнеров как быть в этом случае пользователю. Но если есть возможность обработать ошибки, то лучше придерживаться правил. 📖 Еще полезное видео и его расширфровка про то как сообщать пользовать, если что-то пошло не так

Подсказка и расширенная подсказка 💡 У большинства элементов есть свойство Подсказка, которая выводится рядом с элементом в зависимости от свойства Отображение подсказки. По умолчанию подсказка - это обычная строка, но можно включить Расширенную подсказку, чтобы использовать форматированную строку. Для этого на элементе формы следует нажать на правую кнопку мыши и выбрать пункт Показать расширенную подсказку. В форматированной строке уже можно указывать ссылки и менять шрифт текста. 1️⃣ Для разовых подсказок хорошо подходит отображение через кнопку. Например, если пользователь видит новый ему элемент и сомневается, что с ним делать. В этом случае ему достаточно один раз посмотреть подсказку по кнопке, чтобы понять, что делать. Позже он сможет вернуться к этой подсказке, если потребуется 2️⃣ Если форма используется не часто, то можно расположить подсказку сверху о всей форме, чтобы у пользователя она всегда была перед глазами. Например, если это форма с настройками каких-то правил. В этом случае пользователь при открытии формы сразу видит, что нужно сделать 3️⃣ Для некоторых сложных элементов стоит сделать подсказку снизу, чтобы объяснить, что этот реквизит означает и для чего используется. Важно давать подсказки на важные элементы формы, чтобы подчеркнуть их важность 4️⃣ Для акцентирования внимания на конкретный реквизит допустимо использовать различные средства выделения, например, желтый фон или картинки 5️⃣ Подсказок много не бывает, но они не должны быть навязчивыми. #Design

Флажок Флажок используем для включения или выключения какой-либо опции (у него два состояния) 1️⃣ У Флажка следует установить заголовок справа. Следут отойти от умолчания платформы 2️⃣ Зона действия флажка, с точки зрения интерфейса, небольшая или отсутствует. Например, при включении флажка можно включить доступность соседнего реквизита или гиперссылки. В случае если требуется влиять на форму сильнее, то лучше использовать Выключатель или Переключатель 3️⃣ Флажок следует использовать для простой опции, в которой понятно, что означают оба состояния. Если из названия сложно понять действие флажка, то можно добавить подсказку снизу 4️⃣ Не следует использовать флажок для сложных опций, в которых не понятны оба состояния. В этом случае лучше использовать Переключатель, чтобы явно описать включенное и выключенное состояние 5️⃣Не следует в заголовке флажка использовать отрицательные формулировки, потому что потребуется дополнительное усилие, чтобы понять выключенный флажок, например, «Не Не проводить документ при записи» Больше в Дизайн гайде по 1С

Переключатель В других языках этот элемент называется Радиокнопки (radiobutton). Он получил название от кнопок старых радиоприемников: при нажатии на кнопку включалась определенная частота, остальные кнопки отскакивали вверх. Визуально, такие кнопки больше похожи на переключатель, но среди дизайнеров название не прижилось, а вот в 1С используем именно его - для пользователя понятнее «переключатель», а не «радиокнопка» Переключатель используется для выбора одного значения из нескольких перечисленных 1️⃣ Переключатель лучше использовать когда значений немного - от 2 до 5 Если значений больше, то используется Поле ввода со списком значений 2️⃣ Переключатель действует на то, что находится справа и под ним Не следует по переключателю менять форму выше этого элемента 3️⃣ Выбранное значение по умолчанию должно идти первым в списке Например: 🔘Все ⚪ С ошибками ⚪ Без ошибок 4️⃣ Для сложных опций рекомендуется добавлять подсказки к значениям переключателя Чтобы это сделать следует использовать два элемента формы с путем к одному реквизиту. В этом случае для каждого элемента можно добавить свою подсказку 5️⃣ Не следует в значениях переключателя делать повторяющийся текст, его лучше вынести в заголовок Больше в Дизайн гайде по 1С #Design

Выключатель (Тогл, Свитчер) Выключатель переключает состояние формы, реквизита или настройки. Например, включает или выключает опцию. Выключатель заимствован из мобильных операционных систем, где он используется для включения и выключения настроек 1️⃣ Используйте выключатель, если при переключении состояния действие происходит сразу и не нужны дополнительные подтверждения 2️⃣ Выключатель ассоциируется с большим влиянием, чем флажок. При изменении состояния действие на форму может быть более обширным 3️⃣ Не используйте на одной странице больше 2-3 выключателей В Бухгалтерии предприятия есть форма Функциональность программы, которая как раз и включает/выключает настройки. Сейчас они сделаны с помощью обычных флажков. Корректнее было бы использовать выключатели для этого. В этом случае форма выглядела бы как на скриншоте Больше в Дизайн гайде по 1С #Design