Диалоговые окна Windows 7 (основы проектирования)

Примечание.

Это руководство по проектированию было создано для Windows 7 и не было обновлено для более новых версий Windows. Большая часть рекомендаций по-прежнему применяется в принципе, но презентация и примеры не отражают наше текущее руководство по проектированию.

Диалоговое окно — это дополнительное окно, позволяющее пользователям выполнять команду, задавать пользователям вопрос или предоставить пользователям информацию или отзывы о ходе выполнения.

screen shot identifying dialog box elements

Обычное диалоговое окно.

Диалоговые окна состоят из строки заголовка (для идентификации команды, функции или программы, из которой поступило диалоговое окно), необязательной основной инструкции (чтобы объяснить цель пользователя с помощью диалогового окна), различные элементы управления в области содержимого (для представления параметров) и кнопки фиксации (чтобы указать, как пользователь хочет зафиксировать задачу).

Диалоговые окна имеют два основных типа:

  • Модальные диалоговые окна требуют завершения и закрытия пользователей, прежде чем продолжить работу с окном владельца. Эти диалоговые окна лучше всего использовать для критических или редких задач, которые требуют завершения, прежде чем продолжить.
  • Диалоговые окна без режима позволяют пользователям переключаться между диалоговым окном и окном владельца по мере необходимости. Эти диалоговые окна лучше всего использовать для часто повторяющихся задач.

Диалоговое окно задачи — это диалоговое окно, реализованное с помощью интерфейса программирования приложения диалогового окна задач (API). Они состоят из следующих частей, которые можно собрать в различных сочетаниях:

  • Строка заголовка для идентификации функции приложения или системы, из которой поступило диалоговое окно.
  • Основная инструкция с необязательным значком, чтобы определить цель пользователя с помощью диалогового окна.
  • Область содержимого для описательных сведений и элементов управления.
  • Область команд для кнопок фиксации, включая кнопку "Отмена", а также дополнительные параметры и не отображайте элементы управления этим <элементом> снова.
  • Область сносок для необязательных дополнительных объяснений и справки, обычно предназначенная для менее опытных пользователей.

screen shot of a typical task dialog box

Обычное диалоговое окно задачи.

Диалоги задач рекомендуется каждый раз, так как они легко создавать, и они обеспечивают согласованный внешний вид. Диалоги задач требуют Windows Vista или более поздней версии, поэтому они не подходят для более ранних версий Microsoft Windows.

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

screen shot of a typical task pane

Типичная область задач.

Окна свойств — это специализированный тип диалогового окна, используемого для просмотра и изменения свойств объекта, коллекции объектов или программы. Кроме того, окна свойств обычно поддерживают несколько задач, тогда как диалоговые окна обычно поддерживают одну задачу или шаг в задаче. Так как их использование специализировано, окна свойств рассматриваются в другом наборе рекомендаций.

Диалоговые окна могут иметь вкладки и, если они называются диалоговым окнами с вкладками. Окна свойств определяются их представлением свойств, а не использованием вкладок.

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

Это правильный пользовательский интерфейс?

Чтобы решить, рассмотрите следующие вопросы:

  • Предназначено ли предоставление пользователям сведений, задавать пользователям вопрос или разрешать пользователям выбирать параметры выполнения команды или задачи? В противном случае используйте другой пользовательский интерфейс.
  • Предназначено ли для просмотра и изменения свойств объекта, коллекции объектов или программы? Если да, используйте вместо этого окно свойства или панель инструментов .
  • Предназначено ли представление коллекции команд или средств? В этом случае используйте панель инструментов или окно палитры.
  • Цель проверки того, что пользователь хочет продолжить действие? Есть ли четкая причина не продолжать и разумный шанс, что иногда пользователи не будут? В этом случае используйте подтверждение.
  • Назначение предоставления сообщения об ошибке или предупреждении? В этом случае используйте сообщение об ошибке или предупреждение.
  • Цель:
    • Открытие файлов
    • Сохранение файлов
    • Открытие папок
    • Поиск или замена текста
    • Печать документа
    • Выбор атрибутов печатной страницы
    • Выбор шрифта
    • Выбор цвета
    • Поиск файла, папки, компьютера или принтера
    • Поиск пользователей, компьютеров или групп в Microsoft Active Directory
    • Запрос имени пользователя и пароля?

В этом случае используйте вместо этого соответствующий общий диалог . Многие из этих распространенных диалогов расширяемы.

  • Предназначено ли выполнение многофакторной задачи, требующей более одного окна? В этом случае используйте поток задач или мастер .
  • Предназначено ли информирование пользователей о событии системы или программы, которое не связано с текущим действием пользователя, которое не требует немедленного действия пользователя, и пользователи могут свободно игнорировать? Если да, используйте вместо этого уведомление .
  • Предназначено ли отображение состояния программы? Если да, используйте вместо этого строку состояния.
  • Предпочтительнее ли использовать пользовательский интерфейс на месте? Диалоговые окна могут нарушить поток пользователя, требуя внимания. Иногда это оправдано, например, когда пользователь должен выполнить действие, которое находится за пределами текущего контекста. В других случаях лучше представить пользовательский интерфейс в контексте либо непосредственно с пользовательским интерфейсом на месте (например, областью задач), либо по требованию с помощью прогрессивного раскрытия информации.
  • Предназначено ли отображение некритических проблем ввода пользователей или особых условий? Если да, используйте вместо этого воздушный шар .
  • Для потоков задач предпочтительнее использовать другую страницу? Как правило, задача будет выполняться с страницы на страницу в одном окне. Используйте диалоговые окна для подтверждения команд на месте, получения входных данных для команд на месте и выполнения дополнительных автономных задач, которые лучше всего выполняются независимо и вне основного потока задач.
  • Для выбора параметров пользователи, скорее всего, изменят параметры? Если нет, рассмотрите варианты, например:
    • Использование параметров по умолчанию без запроса, но позволяет пользователям вносить изменения позже.
    • Предоставление версии с параметрами (например, печать... в меню), а также версия без параметров (например, печать на панели инструментов). Как правило, команды панели инструментов должны быть немедленно и не отображать диалоговые окна.
  • Для выбора параметров существует более простой, более прямой способ представления параметров? Если да, рассмотрите альтернативные варианты, например:
    • С помощью кнопки разделения для выбора вариантов команды.
    • Использование подменю для команд, проверка прямоугольников, переключателей и простых списков.

Screenshot that shows a menu and sub-menu.

screen shot of a menu and submenu

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

Принципы проектирования

При правильном использовании диалоговые окна — отличный способ дать возможность и гибкость вашей программе. При неправильном использовании диалоговые окна — это простой способ раздражать пользователей, прерывать их поток и делать программу непрямой и мученной для использования. Модальные диалоговые окна требуют внимания пользователей. Диалоговые окна часто проще реализовать, чем альтернативные пользовательские интерфейсы, поэтому они, как правило, переиспользуются.

Диалоговое окно наиболее эффективно, если его характеристики дизайна соответствуют его использованию. Дизайн диалогового окна в значительной степени определяется его целью (предлагать варианты, задавать вопросы, предоставлять информацию или отзыв), тип (модальное или безрежимное) и взаимодействие с пользователем (обязательное, необязательное реагирование или подтверждение), а его использование в значительной степени определяется его контекстом (инициированным пользователем или программой), вероятностью действия пользователя и частоты отображения.

Чтобы создать эффективные диалоговые окна, используйте следующие элементы:

  • Текст диалогового окна
  • Основные инструкции
  • Не показывать этот <элемент> снова

Если вы делаете только одну вещь...

Убедитесь, что конструктор диалогового окна (определяется его назначением, типом и взаимодействием с пользователем) соответствует его использованию (определяется его контекстом, вероятностью действия пользователя и частотой отображения).

Варианты использования

Диалоговые окна имеют несколько шаблонов использования:

  • Диалоговые окна вопросов (с помощью кнопок) задают пользователям один вопрос или подтвердить команду и используют простые ответы в горизонтально упорядоченных кнопках команд.
  • Диалоговые окна вопросов (с помощью командных ссылок) задают пользователям один вопрос или выбрать задачу для выполнения и использовать подробные ответы в вертикальных упорядоченных ссылках на команды.
  • Диалоговые окна выбора представляют пользователей набором вариантов, как правило, чтобы указать команду более полно. В отличие от диалогов вопросов, диалоги выбора могут задавать несколько вопросов.
  • Диалоговые окна хода выполнения отображают пользователей с отзывом о ходе выполнения во время длительной операции (более пяти секунд), а также команду, чтобы отменить или остановить операцию.
  • Информационные диалоги отображают сведения, запрашиваемые пользователем.

Рекомендации

Общие

  • Не используйте прокручиваемые диалоговые окна. Не используйте диалоговые окна, требующие полного просмотра полосы прокрутки во время обычного использования. Измените диалоговое окно. Рассмотрите возможность использования прогрессивного раскрытия иливкладок.

  • У вас нет строки меню или строки состояния. Вместо этого предоставьте доступ к командам и состоянию непосредственно в самом диалоговом окне или с помощью контекстных меню в соответствующих элементах управления.

    • Исключение: панели меню допустимы, если диалоговое окно используется для реализации первичного окна (например, служебной программы).

    Неправильно:

    screen shot of a dialog box with a menu bar

    В этом примере поиск сертификатов — это диалоговое окно без режима с строкой меню.

  • Если диалоговое окно требует немедленного внимания и программа не активна, нажмите кнопку панели задач три раза, чтобы привлечь внимание и оставить ее выделенной. Не делайте ничего другого: не восстанавливайте или не активируйте окно и не воспроизводите звуковые эффекты. Вместо этого соблюдайте выбор состояния окна пользователя и позвольте пользователю активировать окно, когда он будет готов.

  • Дополнительные рекомендации и примеры см. на панели задач.

  • Используйте для критически важных или редких одноуровневых задач, требующих завершения перед продолжением.
  • Используйте модель отложенной фиксации, чтобы изменения не вступили в силу до явного фиксации.
  • Реализуйте диалоговое окно задачи при необходимости для обеспечения согласованного внешнего вида. Диалоговые окна задач требуют Windows Vista или более поздней версии, поэтому они не подходят для более ранних версий Windows.

Диалоговые окна без режима

  • Используйте для часто повторяющихся задач.
  • Используйте модель немедленной фиксации, чтобы изменения вступили в силу немедленно.
  • Для диалоговых окон без режима используйте явную кнопку закрытия в диалоговом окне, чтобы закрыть окно. Для обоих используйте кнопку "Закрыть" в строке заголовка, чтобы закрыть окно.
  • Рассмотрите возможность создания бессерверных диалоговых окон, которые можно закрепить. Диалоговые окна без закрепления позволяют более гибко размещать.

screen shot of a dockable, modeless dialog box

Некоторые диалоговые окна без режима, используемые в Microsoft Office, можно закрепить.

Несколько диалоговых окон

  • Не отображайте несколько диалоговых окон выбора из диалогового окна выбора владельца. Отображение нескольких кнопок фиксации затрудняет понимание пользователями. При необходимости можно отобразить другие типы диалоговых окон (такие диалоги вопросов).
  • Для последовательности связанных диалогов рекомендуется использовать многостраничные диалоги, если это возможно. Используйте отдельные диалоги, если они не связаны четко.

Диалоговые окна с несколькими страницами

  • Используйте диалоговое окно с несколькими страницами вместо отдельных диалоговых окон при наличии следующей последовательности связанных страниц:
    • Одна входная страница (необязательно)
    • Страница хода выполнения
    • Одна страница результатов

Входная страница необязательна, так как возможно, задача была инициирована в другом месте. Это дает результирующий опыт стабильного, простого, упрощенного чувства.

screen shot of a progress bar

screen shot of 'no problems found' message

В этом примере диагностика сети Windows состоит из страниц хода выполнения и результатов.

  • Не используйте диалоговое окно с несколькими страницами, если входная страница является стандартным диалогом. В этом случае согласованность использования стандартного диалога является более важной.
  • Не используйте кнопки "Далее" или "Назад" и не имеют более трех страниц. Диалоговые окна с несколькими страницами предназначены для однофакторных задач с отзывом. Они не являются мастерами, которые используются для многофакторных задач. Мастера имеют сильное, косвенное чувство по сравнению с диалоговым окнами с несколькими страницами.
  • На входной странице используйте определенные кнопки команд или ссылки команд для запуска задачи.
  • Нажмите кнопку "Отмена" на страницах ввода и хода выполнения и кнопку "Закрыть" на странице результатов.

Разработчики: с помощью сообщения TDM_NAVIGATE_PAGE можно создавать диалоговые окна задач с несколькими страницами.

Презентация

Чтобы сделать диалоговые окна простыми для поиска и доступа, четко свяжите диалоговое окно с его источником и хорошо работает с несколькими мониторами:

  • Изначально отображаются диалоговые окна в центре окна владельца. Для последующего отображения рекомендуется отобразить его в последнем расположении (относительно окна владельца), если это, скорее всего, будет удобнее.

diagram of dialog box centered on window behind it

Первоначально центровые диалоги в верхней части окна владельца.

  • Если диалоговое окно является контекстным, отобразите его рядом с объектом, из которого он был запущен. Однако поместите его из пути (предпочтительно смещение вниз и справа), чтобы объект не охватывал диалоговое окно.

diagram of dialog box offset down and to the right

Свойства объекта отображаются рядом с объектом.

  • Для диалоговых окон без режима сначала отображается в верхней части окна владельца, чтобы упростить поиск. Если пользователь активирует окно владельца, это может скрыть диалоговое окно без режима.
  • При необходимости настройте исходное расположение, чтобы весь диалог был виден в целевом мониторе. Если размер окна с изменением размера превышает целевой монитор, уменьшите его, чтобы оно соответствовало.
  • При повторном воспроизведении диалогового окна рекомендуется отобразить его в том же состоянии, что и последний доступ. При закрытии сохраните используемый монитор, размер окна, расположение и состояние (развернутое и восстановление). В redisplay восстановите сохраненный размер диалогового окна, расположение и состояние с помощью соответствующего монитора. Кроме того, рассмотрите возможность сохранения этих атрибутов в разных экземплярах программы на основе каждого пользователя.
  • Для окна с изменением размера задайте минимальный размер окна, если ниже размер содержимого больше недоступен. Рассмотрите возможность изменения презентации, чтобы сделать содержимое пригодным для использования на меньших размерах.

screen shot of centered media player buttons

В этом примере Медиаплеер Windows изменяет формат, если окно становится слишком небольшим для стандартного формата.

  • Не используйте атрибут Always On Top.
    • Исключение. Используйте только в том случае, если диалоговое окно реализует по существу модальную операцию, но она должна быть приостановлена кратко для доступа к окну владельца. Например, при проверка орфографии в документе пользователи иногда могут покидать диалоговое окно проверка орфографии и получать доступ к документу для исправления ошибок.

Дополнительные сведения и примеры см. в разделе "Управление окнами".

Заголовки окна

  • В диалоговых окнах нет значков строк заголовка. Значки панели заголовков используются в качестве визуального различия между основными окнами и дополнительными окнами.
    • Исключение. Если диалоговое окно используется для реализации первичного окна (например, служебной программы) и поэтому отображается на панели задач, он имеет значок заголовка. В этом случае оптимизируйте заголовок для отображения на панели задач путем краткого размещения различающейся информации.
  • Диалоговые окна всегда имеют кнопку "Закрыть". Диалоговые окна без режима также могут иметь кнопку "Свернуть". В диалоговых окнах, доступных для изменения размера, может быть кнопка "Развернуть".
  • Не отключайте кнопку "Закрыть". Кнопка "Закрыть" помогает пользователям оставаться под контролем, позволяя им закрывать окна, которые они не хотят.
    • Исключение. Для диалоговых окон хода выполнения можно отключить кнопку "Закрыть", если задача должна выполниться до завершения, чтобы достичь допустимого состояния или предотвратить потерю данных.
  • Кнопка "Закрыть" в строке заголовка должна иметь тот же эффект, что и кнопка "Отмена" или "Закрыть" в диалоговом окне. Никогда не давать ему тот же эффект, что и ОК.
  • Если строка заголовка подпись и значок уже отображаются в видном виде в верхней части окна, можно скрыть строку заголовка подпись и значок, чтобы избежать избыточности. Однако вам по-прежнему необходимо задать подходящее название для использования Windows.

Взаимодействие

  • При отображении диалоговые окна, инициированные пользователем, всегда должны принимать фокус ввода. Диалоговые окна, инициированные программой, не должны принимать фокус ввода, так как пользователь может взаимодействовать с другим окном. Такое взаимодействие, неправильно направленное в диалоговом окне, может иметь непредвиденные последствия.

  • Назначьте начальный фокус ввода элементу управления, с которым пользователи, скорее всего, будут взаимодействовать с первым, что обычно (но не всегда) первым интерактивным элементом управления. Избегайте назначения начального фокуса ввода ссылке справки.

  • Для навигации по клавиатуре порядок вкладок должен выполняться в логическом порядке, как правило, слева направо, сверху вниз. Обычно порядок табуляции следует за порядком чтения, но рассмотрите возможность создания этих исключений:

    • Поместите наиболее часто используемые элементы управления ранее в порядок вкладок.
    • Поместите ссылки справки в нижней части диалогового окна после кнопок фиксации в порядке табуляции.

    При назначении заказа предположим, что пользователи отображают диалоговые окна для их предполагаемой цели; Таким образом, например, пользователи отображают диалоговые окна выбора, чтобы сделать выбор, а не проверять и нажимать кнопку "Отмена".

  • Нажатие клавиши ESC всегда закрывает активное диалоговое окно. Это верно для диалоговых окон с отменой или закрытием, и даже если отмена была переименована в Close, так как результаты больше не могут быть отменены.

Ключи доступа

  • По возможности назначьте уникальные ключи доступа всем интерактивным элементам управления или их меткам.Текстовые поля только для чтения — это интерактивные элементы управления (так как пользователи могут прокручивать их и копировать текст), чтобы они могли воспользоваться ключами доступа. Не назначайте ключи доступа:

    • Кнопки "ОК", "Отмена" и "Закрыть". Ввод и esc используются для ключей доступа. Однако всегда назначьте ключ доступа элементу управления, который означает "ОК" или "Отмена", но имеет другую метку.

      screen shot of delete file dialog box

      В этом примере кнопка положительной фиксации имеет назначенный ключ доступа.

    • Метки групп. Как правило, отдельные элементы управления в группе назначаются ключи доступа, поэтому метка группы не требуется. Однако при нехватке ключей доступа назначьте ключ доступа метку группы, а не отдельные элементы управления.

    • Универсальные кнопки справки, к которым обращается F1.

    • Связывание меток. Часто существует слишком много ссылок для назначения уникальных ключей доступа, и символы подчеркивания часто используются для обозначения ссылок скрытия подчеркивания ключа доступа. Вместо этого перейдите по ссылкам с помощью клавиши TAB.

    • Имена вкладок. Вкладки циклируются с помощью клавиш CTRL+TAB и CTRL+SHIFT+TAB.

    • Обзор кнопок с меткой "...". Эти кнопки обзора не могут быть назначены ключами доступа уникально.

    • Неназначенные элементы управления, такие как элементы управления спином, кнопки графических команд и неназначенные элементы управления прогрессивным раскрытием.

    • Статический текст или метки без меток для элементов управления, которые не являются интерактивными, например индикаторами хода выполнения.

  • По возможности назначьте ключи доступа для часто используемых команд в соответствии со стандартными назначениями ключей доступа. Хотя согласованные назначения ключей доступа не всегда возможны, они, безусловно, предпочтительнее для часто используемых диалоговых окон.

  • Сначала назначьте ключи доступа к кнопке фиксации, чтобы убедиться, что они имеют стандартные назначения ключей. Если нет стандартного назначения ключей, используйте первую букву первого слова. Например, ключ доступа для кнопок фиксации "Да" и "Нет" всегда должен быть "Y" и "N", независимо от других элементов управления в диалоговом окне.

  • Чтобы упростить поиск ключей доступа, назначьте ключи доступа символу, который отображается на ранней стадии метки, в идеале первый символ, даже если в метке отображается ключевое слово.

  • Предпочитайте символы с широкими ширинами, такими как w, m и буквы с заглавными буквами.

  • Предпочитайте отличительный консонант или гласный, например "x" в exit.

  • Избегайте использования символов, которые затрудняют просмотр подчеркивания, например (от наиболее проблемных до наименее проблемных):

    • Буквы, которые имеют ширину только одного пикселя, например i и l.
    • Буквы с нисходящими значениями, такими как g, j, p, q и y.
    • Буквы рядом с буквой с нисходящим.

Дополнительные рекомендации и примеры см. в разделе "Клавиатура".

Диалоговые окна хода выполнения

Для длительных задач предполагается, что пользователи будут делать что-то еще во время выполнения задачи. Создайте задачу для автоматического выполнения.

  • Диалоговое окно "Представление пользователей с отзывом о ходе выполнения", если операция занимает более пяти секунд, а также команда для отмены или остановки операции.
    • Исключение: для мастеров и потоков задач используйте модальное диалоговое окно для выполнения, только если задача остается на той же странице (в отличие от перехода на другую страницу), и пользователи не могут ничего делать во время ожидания. В противном случае используйте страницу хода выполнения или ход выполнения.
  • Если операция является длительной задачей (более 30 секунд) и может выполняться в фоновом режиме, используйте бессерверное диалоговое окно хода выполнения, чтобы пользователи могли продолжать использовать программу во время ожидания.
  • Диалоговые окна выполнения без режима:
    • Нажмите кнопку "Свернуть" в строке заголовка.
    • Отображаются на панели задач.
  • Реализуйте диалоговые окна выполнения без режима, чтобы они продолжали работать, даже если окно владельца закрыто.

screen shot of copy dialog box with progress bar

В этом примере копирование файла продолжается, даже если окно владельца закрыто.

  • Укажите кнопку команды, чтобы остановить операцию, если она занимает более нескольких секунд или может никогда не завершиться. Пометка кнопки "Отмена", если отмена возвращает среду в предыдущее состояние (не оставляя побочных эффектов); в противном случае примечайте кнопку Stop, чтобы указать, что она оставляет частично завершенную операцию нетронутой. Вы можете изменить метку кнопки с "Отмена" на "Остановить" в середине операции, если в какой-то момент невозможно вернуть среду в предыдущее состояние.

screen shot of dialog box with cancel button

В этом примере остановка диагностики проблемы не имеет побочных эффектов.

  • Укажите кнопку командной строки, чтобы приостановить операцию, если выполнение операции занимает более нескольких минут, и это усложняет работу пользователей. Это не заставляет пользователя выбирать между выполнением задачи и выполнением своей работы.
  • Соберите столько информации, сколько можно, прежде чем запускать задачу.
  • При обнаружении проблем, которые можно восстановить, пользователи могут столкнуться со всеми проблемами, обнаруженными в конце задачи. Если это не так, пользователи имеют дело с проблемами, как это происходит.
  • Не отказывайтесь от задач в результате восстанавливаемых ошибок.

screen shot of dialog box with try again button

В этом примере Windows Обозреватель позволяет пользователям продолжать работу с задачей после ошибки, допускаемой для восстановления.

  • Укажите проблемы, переключив индикатор выполнения красным цветом.

screen shot of progress bar and try again button

В этом примере съемный диск был удален во время копирования файла.

  • Если результаты явно очевидны для пользователей, закройте диалоговое окно хода выполнения автоматически при успешном завершении. В противном случае используйте обратную связь только для сообщения о проблемах:
    • Чтобы отобразить простую обратную связь, отобразите отзыв в диалоговом окне выполнения и измените кнопку "Отмена" на "Закрыть".
    • Чтобы отобразить подробные отзывы, закройте диалоговое окно хода выполнения и отобразите информационное диалоговое окно.

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

Оставшееся время

  • Используйте следующие форматы времени. Начните с первого из следующих форматов, где наибольший единица времени не равен нулю, а затем измените следующий формат после того, как самая большая единица времени станет нулевой.

Для индикаторов выполнения:

Если связанные сведения отображаются в формате двоеточия:

Оставшееся время: ч ч, минуты

Оставшееся время: м минуты, секунды

Оставшееся время: секунды

Если пространство экрана находится на уровне "Премиум":

h hrs, m mins осталось

m mins, s с оставшихся

оставшиеся секунды

Иначе:

h hours, m minutes осталось

м минуты, секунды оставшихся

оставшиеся секунды

Для строк заголовка:

чч:мм оставшихся

mm:ss осталось

Оставшиеся 0:ss

Этот компактный формат отображает наиболее важные сведения, чтобы она не усечена на панели задач.

  • Сделайте оценки точными, но не дайте ложной точности. Если самая большая единица — часы, предоставьте минуты (если значимые) но не секунды.

Неправильно:

чч часов, мм минуты, секунды ss

  • Следите за актуальной оценкой. Время обновления, оставшееся по крайней мере каждые 5 секунд.
  • Сосредоточьтесь на оставшемся времени, потому что это информация, которую пользователи заботятся больше всего. Предоставьте общее время, прошедшее только в тех случаях, когда истекшее время полезно (например, когда задача, скорее всего, будет повторяться). Если оставшаяся оценка времени связана с индикатором хода выполнения, не имеет процента полного текста, так как эта информация передается самой индикатором выполнения.
  • Быть грамматически правильным. Используйте единицы сингулярности, если число равно одному.

Неправильно:

1 минуты, 1 секунды

  • Используйте прописную букву в стиле предложений.

Дополнительные сведения и примеры см. в разделе "Индикаторы хода выполнения".

Значки и графики

Графика

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

Неправильно:

screen shot of dialog box with a large graphic

В этом примере большой графический элемент не служит ни для какой цели.

Значки строки заголовка

  • В диалоговых окнах нет значков строк заголовка.
    • Исключение. Если диалоговое окно используется для реализации первичного окна (например, служебной программы) и поэтому отображается на панели задач, он имеет значок заголовка.

Значки текста

  • Выберите значок текста на основе шаблона конструктора:
Расписание Значок тела
Диалоги вопросов
Программа, функция, объект, значок предупреждения (если возможные потери данных или доступа к системе), предупреждение системы или нет.
Диалоговые окна выбора
Нет.
Диалоговые окна хода выполнения
Нет (но может иметь анимацию).
Информационные диалоги
Нет.
  • Неправильно:

screen shot of dialog box with warning icon

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

  • Рекомендуется использовать значки, чтобы пользователи визуально распознали функции вашей программы. Этот метод наиболее эффективен, когда значки легко распознаются и используются в нескольких местах в программе.

screen shot of favorites dialog box with star icon

В этом примере желтый значок звезды представляет избранное. Значок легко распознается и постоянно используется в Windows для представления избранного.

  • Используйте значки, чтобы помочь пользователям распознать объект в вопросе.

screen shot of dialog box with powerpoint icon

В этом примере значок объекта помогает пользователям распознавать тип открываемого или сохраненного файла.

  • Рекомендуется использовать значки, чтобы сделать функции самообъяснительными.

images of arrows showing how to position monitor

В этом примере эти значки помогают пользователям визуализировать эффект их функций.

  • Используйте значок в диалоговых окнах About Box для фирменной символики приложения.

screen shot of about dialog box with windows logo

В этом примере в поле About Box используется растровое изображение для идентификации и фирменной символики приложения.

Значки сносок

  • Если у вас есть сноска, рассмотрите возможность использования значка сноски для сводки темы сноски.

screen shot of dialog box with footnote icon

В этом примере значок сноски указывает, что вопрос имеет последствия для безопасности.

  • Не используйте значок сноски, повторяющий значок текста.
  • Не используйте стандартные значки ошибок или сведений. Условия ошибки должны быть переданы с помощью значка текста и сносок всегда предназначены для информации, что делает значок информации избыточным. Однако можно использовать стандартный значок предупреждения и желтый щит безопасности для оповещения пользователей о рискованных последствиях.

Дополнительные сведения и примеры см. в разделе "Значки".

Кнопки фиксации

Примечания.

  • Эти рекомендации не применяются к диалоговым окнам вопросов с помощью командных ссылок, так как этот шаблон использует ссылки команд вместо кнопок.
  • [Делать это] и [Не делать это] являются положительными и отрицательными ответами соответственно к главной инструкции.

Общие сведения

  • Выберите кнопки фиксации на основе шаблона конструктора:
Ярлык Значение
Шаблон
Кнопки фиксации
Диалоговые окна вопросов (с помощью кнопок)
Один из следующих наборов кратких команд: Да/Нет, Да/Нет/Отмена, [Do it]/Cancel, [Do it]/[Do it]/[Do't do it], [Do it]/[Do it]/[Do't do it]/Cancel.
Диалоговые окна вопросов (с помощью ссылок)
Отмена.
Диалоговые окна выбора
  • Модальные диалоги: ОК/Отмена или [Сделать это]/Отмена
  • Диалоговые окна без режима: кнопка "Закрыть" в диалоговом окне и строке заголовка
  • Область задач: кнопка "Закрыть" в строке заголовка
Диалоговые окна хода выполнения
Используйте отмену, если среда возвращается в предыдущее состояние (не оставляя побочных эффектов); в противном случае используйте stop.
Информационные диалоги
Близко.
  • Все кнопки фиксации, кроме "Применить", закрывают диалоговое окно.

  • Не подтвердите кнопки фиксации. Делать это ненужно может быть очень раздражает. Исключения.

    • Это действие потенциально катастрофично.
    • Действие явно не соответствует другим действиям.
    • Если это неправильно, действие может привести к значительной потере данных, времени или усилий от имени пользователя.

    Дополнительные рекомендации и примеры см. в разделе "Подтверждение".

  • Не отключать кнопки фиксации. Исключения:

  • Кнопки фиксации по правому краю в одной строке в нижней части диалогового окна, но над областью сноски. Это делается даже при наличии одной кнопки фиксации (например, OK).

    Неправильно:

    screen shot of message with centered ok button

    В этом примере кнопка "ОК" неправильно сцентрирована.

  • Укажите кнопки фиксации в следующем порядке:

    1. ОК/[Выполнить]/Да
    2. [Не выполнять]/Нет
    3. Отменить
    4. Применить (если присутствует)
    5. Справка (при наличии)
  • Если у вас есть множество связанных кнопок фиксации, консолидируйте их с помощью разбиения кнопок.

  • У вас есть четкое разделение от кнопок фиксации (которые закрывают окно) и всех других кнопок команд (например, advanced).

Реагирование на основные инструкции

  • Используйте кнопки положительной фиксации, которые являются конкретными ответами на основную инструкцию, а не универсальные метки, такие как OK или Да/Нет. Пользователи должны иметь возможность понять параметры, прочитав текст кнопки только. Исключения.

    • Используйте close для диалоговых окон, которые не имеют параметров, например информационных диалогов. Никогда не используйте close для диалоговых окон с параметрами.

    • Используйте ОК, если ответы "конкретных" по-прежнему универсальны, например "Сохранить", "Выбрать" или "Выбрать". Используйте ОК при изменении определенного параметра или коллекции параметров.

    • Для устаревших диалоговых окон без основной инструкции можно использовать универсальные метки, такие как OK. Часто такие диалоговые окна не предназначены для выполнения конкретной задачи, предотвращая более конкретные ответы.

    • Некоторые задачи требуют более тщательного чтения для пользователей, чтобы принимать обоснованные решения. Это обычно происходит с подтверждением. В таких случаях можно использовать универсальные метки кнопки фиксации, чтобы пользователи могли читать основные инструкции и предотвращать худостоверений.

      Правильное.

      screen shot of message with yes and no buttons

      В этом примере с помощью кнопок фиксации "Да/нет" пользователи могут по крайней мере читать основную инструкцию.

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

    Правильное.

    screen shot of message and uninstall anyway button

    В этом примере "в любом случае" добавляется в метку кнопки фиксации, чтобы указать, что пользователи должны тщательно продолжать работу.

  • Используйте кнопки отмены или закрытия для кнопок отрицательной фиксации вместо конкретных ответов на главную инструкцию. Довольно часто пользователи понимают, что они не хотят выполнять задачу после того, как они видят диалоговое окно. Если отмена или закрытие были перемечены для определенных ответов, пользователям придется тщательно читать все кнопки фиксации, чтобы определить, как отменить. Отмена и закрытие меток позволяет легко находить их. Исключения:

    • Не используйте да или отмену. Всегда используйте да/нет в качестве пары.
    • Используйте конкретный ответ, если отмена неоднозначна.
  • Не сопоставляйте универсальные метки с их конкретным значением с текстом в области содержимого. Вместо этого используйте определенные метки кнопки фиксации или диалоговое окно вопроса с помощью ссылок, если метки длинны.

    Неправильно:

    screen shot of message with unclear use of buttons

    В этом примере ОК сопоставляется с "Продолжить", отмена сопоставляется с "Остаться на странице".

Кнопки "Да" и "Нет"

  • Предпочитайте определенные ответы на кнопки "Да" и "Нет". Хотя нет ничего плохого в использовании да и нет, конкретные ответы можно понять быстрее, что приводит к эффективному принятию решений. Однако подтверждения обычно имеют кнопки "Да" и "Нет", чтобы пользователи могли дать подтверждение , прежде чем отвечать.

  • Используйте кнопки "Да" и "Нет", чтобы отвечать только на да или нет вопросов. Основная инструкция должна быть естественно выражена как да или нет вопроса. Никогда не используйте "ОК" и "Отмена" для да или нет вопросов.

    Неправильно:

    Screenshot that shows a message with an 'OK' for a yes-no question.

    Правильное.

    screen shot of message with yes for same question

    Лучше:

    screen shot of message with run for same question

    В этих примерах , да и нет хорошие ответы на да и нет вопросов, но конкретные ответы еще лучше.

  • Рассмотрим основную инструкцию как да или нет вопроса, если кнопки фиксации с определенным выражением оказываются длинными или неловкими. Кроме того, можно использовать ссылки команд для более длинных ответов (пять слов или более) в основную инструкцию.

    Неправильно:

    screen shot of message with wordy button labels

    Правильное.

    screen shot of message with yes/no button labels

    Определенное выражение в неправильном примере слишком длинное, поэтому правильный пример использует да и нет.

  • Не используйте кнопки "Да" и "Нет", если значение ответа "Нет" неясно. Если да, используйте вместо этого конкретные ответы.

Кнопки OK

  • В модальных диалогах нажатие кнопки "ОК" означает применение значений, выполнение задачи и закрытие окна.

  • Не используйте кнопки OK для ответа на вопросы.

  • Не назначайте ключи доступа ОК, так как ВВОД является ключом доступа для кнопки по умолчанию. Это упрощает назначение других ключей доступа.

  • Правильно пометить кнопки OK. Кнопка "ОК" должна быть помечена как "ОК", а не "ОК" или "ОК".

  • Не используйте кнопки OK для ошибок или предупреждений. Проблемы никогда не ОК. Вместо этого используйте close.

    Неправильно:

    screen shot of message with ok button

    В этом примере следует использовать close вместо OK.

  • Не используйте кнопки OK в диалоговых окнах без режима. Скорее, бессерверные диалоги должны использовать кнопки фиксации для конкретной задачи (например, Find). Однако для некоторых диалоговых окон без режима требуется только кнопка "Закрыть".

Кнопки отмены

  • Нажатие кнопки "Отмена" означает отказаться от всех изменений, отменить задачу, закрыть окно и вернуть среду в предыдущее состояние, не оставляя побочных эффектов. Для вложенных диалоговых окон выбора нажатие кнопки "Отмена" в диалоговом окне выбора владельца означает, что любые изменения, внесенные в диалоговые окна выбора, также отказались.

  • Укажите кнопку "Отмена", чтобы пользователи явно отказались от изменений. Диалоговые окна требуют четкой точки выхода. Не зависят от пользователей, найдя кнопку "Закрыть" в строке заголовка.

    • Исключение. Не указывайте кнопку "Отмена" для диалоговых окон без параметров. Кнопки "ОК" и "Закрыть" имеют тот же эффект, что и "Отмена".

    Неправильно:

    screen shot of message with ok button only

    В этом примере кнопка "Закрыть" в строке заголовка отображается так, как будто у пользователей нет выбора.

  • Не используйте кнопки "Отмена" для ответа на вопросы.

    Неправильно:

    screen shot of message with ok for yes-no question

    В этом примере ОК и отмена неправильно используются для ответа на вопрос "Да" или "Нет".

  • Не присваивайте ключи доступа отмене, так как ESC — это ключ доступа. Это упрощает назначение других ключей доступа.

  • Не используйте кнопки "Отмена" в диалоговых окнах без режима. Вместо этого используйте Close.

  • Не отключите кнопку "Отмена". Пользователи всегда должны иметь возможность отмены диалоговых окон.

    • Исключение. Вы можете отключить кнопку "Отмена" в диалоговом окне выполнения, если есть период, в течение которого операция не может быть отменена. Однако лучшее решение заключается в разработке таких операций, чтобы всегда быть отмененными.

Кнопки закрытия

  • Используйте кнопки закрытия для диалоговых окон без режима, а также модальные диалоги, которые не могут быть отменены.
  • Нажатие кнопки "Закрыть" означает закрытие диалогового окна, оставляя существующие побочные эффекты. Не используйте Готово, так как это не обязательное строительство. Для вложенных диалоговых окон выбора нажмите кнопку "Закрыть" в диалоговом окне выбора владельца означает, что сохраняются любые изменения, внесенные в диалоговые окна выбора.
  • Введите явную кнопку "Закрыть" в тексте диалогового окна. Диалоговые окна требуют четкой точки выхода. Не зависят от пользователей, найдя кнопку "Закрыть" в строке заголовка.
  • Убедитесь, что кнопка "Закрыть" в строке заголовка имеет тот же эффект, что и "Отмена" или "Закрыть".
  • Не назначайте ключи доступа close, так как ESC — это ключ доступа. Это упрощает назначение других ключей доступа.

Применить кнопки

  • Не используйте кнопки "Применить" в диалоговых окнах, которые не являются листами свойств или панелями управления. Кнопка "Применить" означает применение ожидающих изменений, но оставьте окно открытым. Это позволяет пользователям оценивать изменения перед закрытием окна. Однако это необходимо только для листов свойств и панелей управления.

    Неправильно:

    screen shot of dialog box with apply button

    В этом примере диалоговое окно выбора без необходимости имеет кнопку "Применить".

Кнопки фиксации для непрямых диалоговых окон

Примечание. Непрямые диалоговые окна отображаются вне контекста либо в виде косвенного результата задачи, либо в результате проблемы с системой или фоновым процессом. Для непрямых диалогов кнопка "Отмена" является неоднозначной, так как она может означать отмену диалогового окна или отмену всей задачи.

  • Если пользователям нужно отменить диалоговое окно и задачу, присвойте кнопки фиксации для выполнения обоих действий. Пометка кнопки, которая отменяет диалоговое окно с отрицательным ответом на главную инструкцию. Пометка кнопки, которая отменяет всю задачу с помощью "Отмена". Использование отмены позволяет использовать диалоговое окно во многих контекстах.

    Правильное.

    screen shot of dialog box with save/don't save

    В этом примере это диалоговое окно отображается Windows Paint в результате команды "Создать" или "Выйти", когда рисунок не был сохранен. Не закрывайте диалоговое окно без сохранения, а отмена отмены команды "Создать" или "Выход".

    Неправильно:

    screen shot of dialog box with yes/no buttons

    В этом примере невозможно отменить задачу (закрывающую панель ярлыков Office), которая привела к отображению этого диалогового окна. Для этого диалогового окна требуется кнопка "Отмена".

  • Если пользователям просто нужно отменить диалоговое окно, но не задачу, используйте кнопку с определенным, отрицательным ответом на главную инструкцию и не имеет кнопку "Отмена".

    screen shot of dialog box with run/don't run

    В этом примере это диалоговое окно отображается косвенно в результате перехода на веб-страницу, которая устанавливает элемент activeX. Использование отмены будет неоднозначным здесь, поэтому вместо этого не используется запуск.

Дополнительные сведения и примеры см. в разделе "Кнопки команд".

  • Представляет набор длинных команд с помощью командных ссылок, а не кнопок команд или сочетания переключателей и кнопки ОК. Это позволяет пользователям реагировать одним щелчком мыши. Однако этот подход подходит только для одного вопроса.
  • Сначала представлены наиболее часто используемые ссылки на команды. Результирующий порядок должен примерно соответствовать вероятности использования, но также иметь логический поток.
    • Исключение: ссылки на команды, которые приводят к тому, что все должно быть помещено в первую очередь.
  • Если для ссылки команды требуется дополнительное объяснение, предоставьте дополнительное объяснение. Дополнительные объяснения описывают, почему пользователи могут выбрать команду или что произойдет, если выбрана команда.
  • Не используйте дополнительные пояснения, которые являются переборами слов в командной ссылке. Используйте дополнительное объяснение только в том случае, если вы не можете сделать ссылку команды самостоятельно объясняющей. Предоставление дополнительного объяснения для одной ссылки команды не означает, что вам нужно предоставить их для всех команд.

screen shot of dialog box with text noting options

В этом примере дополнительное объяснение описывает последствия одного из вариантов.

  • Используйте фразы, начинающиеся с глагола, без окончания пунктуации.
  • Если команда настоятельно рекомендуется, попробуйте добавить "(рекомендуется)" в метку. Не забудьте добавить в метку ссылки, а не дополнительное объяснение.
  • Если команда предназначена только для расширенных пользователей, попробуйте добавить "(advanced)" в метку. Не забудьте добавить в метку ссылки, а не дополнительное объяснение.
  • Всегда предоставьте явную кнопку "Отмена". Не используйте ссылку на команду для этой цели.

Неправильно:

screen shot of dialog box with don't exit link

В этом примере диалоговое окно использует ссылку на команду вместо кнопки "Отмена".

Дополнительные сведения и примеры см. в разделе "Ссылки команд".

Не показывать этот <элемент> снова

  • Попробуйте использовать параметр "Не показывать этот <элемент> снова", чтобы разрешить пользователям подавлять повторяющееся диалоговое окно, только если нет лучшей альтернативы. Лучше всегда показывать диалоговое окно, если пользователи действительно нуждаются в нем, или просто исключить его, если они этого не делают.
  • Используйте этот конкретный фразы, заменив <элемент> определенным элементом. Например, не показывать это напоминание снова. При обращении к диалоговому окну в целом используйте не показывать это сообщение снова.
  • Четко укажите, когда входные данные пользователя будут использоваться для будущих значений по умолчанию, добавив в параметр следующее предложение: выбранные значения будут использоваться по умолчанию в будущем.
  • Не выбирайте параметр по умолчанию. Если диалоговое окно действительно должно отображаться только один раз, сделайте это без запроса. Не используйте этот параметр в качестве оправданий для раздражительных пользователей, убедитесь, что поведение по умолчанию не раздражает.

Неправильно:

screen shot of message asking unnecessary question

В этом примере сообщение должно отображаться только один раз. Не нужно спрашивать.

  • Сохраните параметр на основе каждого пользователя.
  • Если пользователи выбирают параметр и нажмите кнопку "Отмена", этот параметр действует. Этот параметр является мета-параметром, поэтому он не соответствует стандартному поведению отмены выхода без побочных эффектов. Обратите внимание, что если пользователи не хотят видеть диалоговое окно в будущем, скорее всего, они хотят отменить его.
  • Если пользователям может потребоваться восстановить эти диалоговые окна, предоставьте команду "Восстановить сообщения " в диалоговом окне "Параметры программы".

Спросить позже

  • Укажите этот параметр, чтобы закрыть диалоговое окно только в том случае, если:
    • Диалоговое окно является косвенным, поэтому пользователи, скорее всего, будут сосредоточены на другой задаче.
    • Пользователи должны реагировать, но не сразу, чтобы они могли продолжать работу.
    • Вопрос требует достаточной мысли или усилий , чтобы пользователи могли принимать лучшие решения, если дать больше времени.
    • Диалоговое окно или параметр будут отображаться автоматически позже (так что пользователи действительно спрашивают позже).
  • Неправильно:
  • screen shot of message with ask me later option
  • В этом примере вопрос достаточно простой, что добавление варианта "Задать мне позже" только усложняет его.
  • В противном случае пользователи будут отвечать сейчас, но разрешить им закрыть диалоговое окно обычно с помощью отмены или закрытия. При правильном использовании этот параметр должен быть редким.

Больше или меньше

  • Используйте кнопки дополнительного или меньшего числа прогрессивных кнопок раскрытия, чтобы показать или скрыть расширенные или редко используемые параметры, команды или сведения, которые целевые пользователи обычно не нуждаются. Это упрощает диалоговое окно для типичного использования. Не скрывайте часто используемые параметры, команды или сведения, так как пользователи не могут их найти.

screen shot of dialog box with more options button

В этом примере редко используемые параметры скрыты по умолчанию.

  • Не используйте элементы управления "Больше и меньше", если на самом деле нет дополнительных сведений для отображения. Не просто переформатируйте одну и ту же информацию в другом формате.
  • Не используйте элементы управления "Больше" или "Меньше" для отображения справки. Вместо этого используйте ссылки справки или сноски.
  • При использовании диалоговых окон задач избегайте объединения элементов управления "Больше"/"Меньше" с не отображать этот <элемент> снова. Эта комбинация имеет неловкий внешний вид.
  • Рекомендации по маркировке см. в разделе "Прогрессивное раскрытие информации".

Сноски

  • Используйте сноски для сведений, которые не являются важными для назначения диалогового окна, но пользователи могут оказаться полезными при принятии решений. Большинство пользователей должны иметь возможность пропускать сноски и принимать обоснованные решения в ответ на диалоговое окно.

screen shot of dialog box with clarifying footnote

В этом примере сведения о сноске являются дополнительными, а не важными.

Отключение или удаление элементов управления и предоставление сообщений об ошибках

  • Если элемент управления не применяется в текущем контексте, рассмотрите следующие параметры:
    • Удалите элемент управления, если для пользователей нет способа его включения, или пользователи не ожидают, что он будет применяться, и его состояние не изменяется часто. Это упрощает диалоговое окно, и пользователи не пропустит его. Наличие элемента управления и часто исчезает раздражает.
    • Отключите элемент управления, когда пользователи ожидают, что он будет применять или изменять его состояние часто, и пользователи могут легко выводить, почему элемент управления отключен. Пример простого вычета — отключение кнопки фиксации при наличии одного пустого текстового поля, требующего ввода. Вы можете использовать воздушные шары для отображения некритических проблем ввода пользователей с текстовыми полями и редактируемыми раскрывающимся списками. Однако если проблема не может быть объяснено с воздушным шаром или включает несколько элементов управления, вычет больше не будет легким.
    • В противном случае оставьте элемент управления включенным, но предоставьте сообщение об ошибке при неправильном использовании. Отключение в этом случае затрудняет пользователям понять, почему элемент управления отключен. Пользователи будут вынуждены определить проблему с помощью экспериментирования и вычитающей логики. Лучше просто предоставить полезное сообщение об ошибке, чтобы объяснить проблему явным образом.
  • Совет. Если вы не уверены, следует ли отключить элемент управления или дать сообщение об ошибке, начните с создания сообщения об ошибке, которое можно дать. Если сообщение об ошибке содержит полезные сведения, которые целевые пользователи, скорее всего, не будут быстро выводиться, оставьте элемент управления включено и предоставьте ошибку. В противном случае отключите элемент управления.
  • При отключении элемента управления также отключите все связанные элементы управления, такие как метка, дополнительные объяснения или кнопки команд. Однако не отключать их поля группы, метки группы или объяснения группы, если есть.

screen shot of dialog box with dimmed controls

В этом примере отключенные текстовые метки также отключены, но их метка группы и объяснение группы не являются.

Требуемые входные данные

  • Чтобы указать, что пользователи должны предоставлять сведения в элементе управления, рассмотрите следующие параметры:

    • Не указывайте ничего, но обрабатывайте отсутствующие необходимые входные данные с сообщениями об ошибках. Этот подход снижает нагрузку и работает хорошо, если большинство входных данных является необязательным или пользователи, скорее всего, не пропускают элементы управления, что позволяет снизить количество сообщений об ошибках.

    • Укажите необходимые входные данные с помощью звездочки в начале метки. Объясните звездочку с помощью следующего:

      • Сноска в нижней части области содержимого, которая говорит * Обязательные входные данные.
      • Подсказка на звездочку, которая говорит обязательные входные данные.

      Этот подход работает хорошо, если не существует большого количества обязательных элементов управления, но плохо, если большинство элементов управления требуются.

      screen shot of text box labels with asterisks

      В этом примере звездочки используются для указания необходимых входных данных.

    • Если все элементы управления требуют входных данных, состояние "Все необходимые входные данные" в соответствующем месте в верхней части области содержимого. Этот подход уменьшает беспорядок для этого конкретного случая.

    • Укажите необязательные входные данные с "(необязательно)" после метки. Этот подход работает хорошо, если требуется большинство входных данных, но плохо в противном случае.

  • Чтобы обеспечить согласованность, попробуйте использовать тот же метод, чтобы указать необходимые входные данные во всей программе. В частности, укажите необходимые или необязательные входные данные, но избегайте использования обоих в одной программе.

Обработка ошибок

  • Предотвращение ошибок с помощью элементов управления, которые ограничены допустимыми входными данными пользователей. Кроме того, можно уменьшить количество ошибок, предоставив разумные значения по умолчанию.

  • Проверьте входные данные пользователей как можно скорее и покажите ошибки как можно ближе к точке ввода.

  • Используйте безрежимную обработку ошибок (ошибки на месте или воздушные шары) для проблем ввода пользователем.

    • Используйте воздушные шары для некритических проблем ввода одноточечных пользователей, обнаруженных в текстовом поле или сразу после того, как текстовое поле теряет фокус. Воздушные шары не требуют свободного места на экране или динамического макета, необходимого для отображения сообщений на месте. Отображать только один воздушный шар за раз. Так как проблема не является критической, значок ошибки не требуется. Воздушные шары удаляются при щелчке, когда проблема устранена или после истечения времени ожидания.

      screen shot of 'incorrect character' message

      В этом примере воздушный шар указывает на проблему ввода в элементе управления.

  • Используйте ошибки на месте для отложенного обнаружения ошибок, как правило, ошибки, обнаруженные путем нажатия кнопки фиксации. (Не используйте ошибки на месте для параметров, которые немедленно зафиксированы.) За раз может возникать несколько ошибок на месте. Используйте обычный текст и значок ошибки пикселя 16x16, размещая их непосредственно рядом с проблемой по возможности. Ошибки на месте не удаляются, если пользователь не фиксирует и не обнаруживает других ошибок.

    screen shot of dialog box with two error messages

    В этом примере ошибка на месте используется для ошибки, найденной путем нажатия кнопки фиксации.

  • Используйте модальную обработку ошибок (диалоговые окна задач или поля сообщений) для всех других проблем, включая ошибки, связанные с несколькими элементами управления, или не контекстные или неинтервные ошибки, обнаруженные путем нажатия кнопки фиксации.

  • Когда обнаружена и сообщаемая проблема ввода, задайте фокус ввода первым элементом управления с неправильными данными. При необходимости прокрутите элемент управления в представление.

Дополнительные сведения и примеры см. в разделе "Сообщения об ошибках" и "Воздушные шары".

Справка

  • При предоставлении помощи пользователям рассмотрите следующие варианты (перечисленные в порядке предпочтения):

    • Предоставьте интерактивным элементам управления самообъяснительные метки. Пользователи чаще считывают метки на интерактивных элементах управления, чем любой другой текст.
    • Укажите объяснения в контексте с помощью статических текстовых меток.
    • Укажите конкретную ссылку справки на соответствующий раздел справки.
  • Найдите ссылки справки в нижней части области содержимого диалогового окна. Если в диалоговом окне есть сноска и ссылка справки связана с ней, поместите ссылку справки в сноску.

    screen shot of dialog box with help link

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

    • Исключение. Если в диалоговом окне есть несколько отдельных групп параметров с отдельными разделами справки (возможно, в полях группы), найдите ссылки справки в нижней части групп.
  • Не используйте общие или расплывчатые ссылки справки или универсальные кнопки справки. Пользователи часто игнорируют универсальную справку.

Дополнительные сведения и примеры см . в справке.

Значения по умолчанию

  • Включите кнопку фиксации по умолчанию в каждом диалоговом окне.
  • Диалоги вопросов:
    • Выберите самый безопасный (чтобы предотвратить потерю данных или системного доступа), наиболее безопасный ответ будет по умолчанию. Если безопасность и безопасность не являются факторами, выберите наиболее вероятный или удобный ответ.
      • Исключение. Не делайте разрушительный ответ по умолчанию, если не существует простого, очевидного способа отмены команды.
  • Диалоговые окна выбора:
    • Для начальных значений по умолчанию выберите самый безопасный (чтобы предотвратить потерю данных или системного доступа) и наиболее безопасные значения для каждого элемента управления. Если безопасность и безопасность не являются факторами, выберите наиболее вероятные или удобные варианты.
    • Для последующих значений по умолчанию повторно выберите выбранные ранее параметры, если эти значения, скорее всего, будут повторяться, и сделать это безопасно и безопасно. В противном случае выберите начальные значения по умолчанию.

screen shot of print dialog box

В этом примере пользователи, скорее всего, выбирают те же параметры печати, что и в последний раз. Однако число требуемых копий, скорее всего, изменится, поэтому этот параметр не выбран повторно.

  • Поддерживает минимальное разрешение экрана Windows Vista 800 x 600 пикселей. Макеты могут быть оптимизированы для измененных окон с разрешением экрана 1024 x 768 пикселей.
  • Используйте изменяемые окна всякий раз, чтобы избежать полос прокрутки и усеченных данных. Windows с динамическим содержимым и списками извлекают выгоду из наиболее доступных для изменения размеров окон.
  • Окна фиксированного размера должны быть полностью видимыми и размерами для размещения в рабочей области.
  • Можно оптимизировать изменения размера окон для более высоких разрешений, но размер по мере необходимости при отображении до фактического разрешения экрана.
  • Выберите размер окна по умолчанию, соответствующий его содержимому. Не бойтесь использовать более крупные начальные размеры окон, если вы можете эффективно использовать пространство.

Текст

Общие

  • Удалите избыточный текст. Найдите избыточный текст в заголовках, основные инструкции, дополнительные инструкции, области содержимого, ссылки команд и кнопки фиксации. Как правило, оставьте полный текст в инструкциях и интерактивных элементах управления и удалите все избыточность из других мест.
  • Используйте положительное выражение. Положительное выражение проще для пользователей.

Правильное.

Вы хотите включить общий доступ к файлам и принтерам?

Неправильно:

Отключить общий доступ к файлам и принтерам?

Однако фраза должна соответствовать связанной команде, даже если команда отрицательно выражена; Например, используйте отключение для подтверждения команды Disable.

  • При необходимости используйте слово "окно", чтобы обратиться к самому диалоговому окну.
  • Используйте второго пользователя ("you/your") для того, чтобы сообщить пользователям, что делать в основной области инструкции и содержимого. Часто второй человек подразумевается.

Примеры:

Выберите рисунки, которые вы хотите распечатать

Выбор учетной записи

  • Используйте первого пользователя ("I/me/my") для того, чтобы пользователи рассказали программе, что делать в элементах управления в области содержимого, которая отвечает на главную инструкцию.

Пример: печать фотографий на моей камере.

Заголовки диалогового окна

  • Используйте заголовок, чтобы определить команду, функцию или программу, из которой поступило диалоговое окно.
    • Если диалоговое окно инициируется пользователем, определите его с помощью команды или имени функции. Исключения.
      • Если диалоговое окно отображается различными командами, рекомендуется использовать имя программы.
      • Если этот заголовок будет избыточным с основной инструкцией, используйте вместо этого имя программы.
    • Если она инициируется программой или системой (и поэтому вне контекста), определите ее с помощью программы или имени функции для предоставления контекста.
    • Не используйте заголовок, чтобы объяснить, что делать в диалоговом окне, это цель основной инструкции.
  • Используйте точное имя команды для имен на основе команд, но не включайте многоточие при наличии. При необходимости можно включить название меню команды, чтобы создать хороший заголовок. Пример: для объекта... команда в меню "Вставка" используйте заголовок Insert Object.
  • Если диалоговое окно без режима отображается на панели задач, оптимизируйте заголовок для отображения на панели задач путем краткого размещения различающейся информации. Примеры: "66% завершено" и "3 напоминания".
  • Не включайте слова "диалоговое окно" или "ход выполнения" в заголовок. Это подразумевается, и его отключение упрощает сканирование пользователей.
  • Используйте заглавную букву без окончания пунктуации.

Основные инструкции

  • Используйте основную инструкцию, чтобы кратко объяснить, что делать в диалоговом окне. Инструкция должна быть определенной инструкцией, императивным направлением или вопросом. Хорошие инструкции связывают цель пользователя с диалогом, а не сосредоточиться исключительно на механике управления им.
  • Опустить основную инструкцию, когда единственное, что можно сказать, очевидно. В таких случаях содержимое диалогового окна является самообязательным. Например, общие диалоговые окна "Открыть файл" и "Сохранить файл" не требуют основной инструкции, так как их контекст и дизайн делают их цель очевидной.
  • Опустить метки элементов управления, которые перенастраивает основную инструкцию. В этом случае основная инструкция принимает ключ доступа.

Хорошо:

screen shot of text box with redundant label

В этом примере метка текстового поля — это просто перезапись основной инструкции.

Лучше:

screen shot of same text box with one label

В этом примере удалена избыточность метки, поэтому основная инструкция принимает ключ доступа.

  • Будьте краткими используйте только одно, полное предложение. Анализ основной инструкции вплоть до важных сведений. Если вам нужно объяснить что-нибудь больше, используйте дополнительную инструкцию.
  • По возможности используйте определенные команды. Конкретные команды (примеры: подключение, сохранение, установка) более значимы для пользователей, чем универсальные (примеры: настройка, управление, установка).
  • Используйте прописную букву в стиле предложений.
  • Не включайте окончательные периоды, если инструкция является инструкцией. Если инструкция является вопросом, добавьте окончательный вопросительный знак.
  • Для диалогов хода выполнения используйте фразу gerund, кратко объясняющую операцию, заканчивая многоточием. Пример: печать рисунков...
  • Совет: Вы можете оценить основную инструкцию, воображая то, что вы сказали другу. Если ответить на главную инструкцию будет неестественным, неисправным или неловким, переработать инструкцию.

Дополнительные инструкции

  • При необходимости используйте необязательную дополнительную инструкцию, чтобы представить дополнительные сведения, полезные для понимания или использования страницы. Вы можете предоставить более подробную информацию и определить терминологию.
  • Если внешний вид диалогового окна является программой или системой, инициированной (и поэтому вне контекста), используйте дополнительную инструкцию, чтобы объяснить, почему появится диалоговое окно. Для таких диалогов контекст обычно не очевиден.
  • Не повторяйте основную инструкцию с немного другим словом. Вместо этого опустите дополнительную инструкцию, если нет дополнительных возможностей для добавления.
  • Используйте полные предложения, прописную букву в стиле предложения и конец препинания.
  • Выберите краткий текст ссылки, который четко взаимодействует и отличается от того, что делает команда. Он должен быть самообъяснительным и соответствовать главной инструкции. Пользователям не нужно выяснить, что такое ссылка действительно означает или как она отличается от других ссылок.
  • Всегда запускайте ссылки на команды с помощью команды.
  • Прописные буквы следует использовать как в предложениях.
  • Не используйте конечные знаки препинания.
  • При необходимости предоставьте любое дополнительное объяснение с использованием полных предложений и окончания пунктуации. Однако добавьте такие объяснения только в том случае, если это необходимо, не добавляйте объяснения ко всем ссылкам команд только потому, что для одной команды требуется одна.

Дополнительные сведения и примеры см . в рекомендациях по командной ссылке .

Кнопки фиксации

  • Используйте определенные метки кнопки фиксации, которые имеют смысл самостоятельно и отвечают на главную инструкцию. В идеале пользователям не нужно читать ничего другого, чтобы понять метку. Пользователи гораздо чаще считывают метки кнопок команд, чем статический текст.
  • Запуск меток кнопки фиксации с помощью команды. Исключения: "ОК", "Да" и "Нет".
  • Прописные буквы следует использовать как в предложениях.
  • Не используйте конечные знаки препинания.
  • Назначьте уникальный ключ доступа.
    • Исключение. Не назначайте ключи доступа кнопкам "ОК" и "Отмена", так как ВВОД и ESC являются их ключами доступа. Это упрощает назначение других ключей доступа.

Документация

При обращении к диалоговым окнам:

  • В программировании и другой технической документации см. диалоговые окна в виде диалоговых окон. Во всем другом месте обратитесь к диалоговым окнам по их названию. Если заголовок скрыт, обратитесь к диалогу с помощью основной инструкции.
  • Если вы должны ссылаться на диалоговое окно в целом, используйте окно в пользовательской документации. Вы можете ссылаться на простой диалог вопросов или подтверждение как сообщение.
  • Используйте точный заголовок или основной текст инструкции, включая его заглавную букву.
  • По возможности отформатируйте заголовок с помощью полужирного текста. В противном случае поместите заголовок в кавычки, только если это необходимо, чтобы предотвратить путаницу.

Пример. В Безопасность Windows нажмите кнопку "Дополнительные параметры".