Поделиться через


Объекты Balloon

Примечание

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

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

Снимок экрана: воздушный шар, указывающий, что caps Lock включен.

Типичный воздушный шар.

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

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

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

Уведомление — это определенный тип выноски, отображаемой значком области уведомлений .

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

Выбор правильного элемента управления

Чтобы определиться, ответьте на вопросы:

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

Неправильно:снимок экрана с выноской: вход в систему не удалось

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

Выноски — это альтернатива подсказкам, диалоговым окнам и сообщениям на месте. В отличие от подсказок и информационных подсказок:

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

В отличие от модальных диалоговых окон:

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

В отличие от сообщений на месте:

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

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

Воздушные шары имеют следующие шаблоны использования:

Использование Пример
Проблема ввода Некритическая проблема ввода данных пользователем, исходящая из элемента управления с одним владельцем, обычно это текстовое поле.
Использование выносок для сообщений об ошибках не похищает фокус ввода, но по-прежнему очень заметно, если элемент управления владельца имеет фокус ввода. чтобы устранить проблему, пользователю может потребоваться изменить или повторно ввести входные данные; Но если элемент управления "Владелец" игнорирует неправильные входные данные, пользователю может не потребоваться вносить какие-либо изменения. Так как проблема не является критической, значок ошибки не требуется.
Снимок экрана: всплывающий шар, указывающий на неправильный символ.
Воздушный шар, используемый для сообщения о некритичной проблеме ввода данных пользователем.
Специальное условие Элемент управления -владелец находится в состоянии, которое влияет на входные данные. Это состояние, скорее всего, непреднамеренное, и пользователь может не понять, что это влияет на ввод данных.
используйте воздушные шары, чтобы предотвратить разочарование, предупреждая пользователей о особых условиях сразу после их возникновения (например, превышение максимального размера входных данных или установка ограничения блокировки по ошибке). важно предоставлять такую обратную связь без кражи фокуса ввода или принудительного взаимодействия, так как эти условия могут быть преднамеренными. эти выноски особенно важны для паролей и пин-ящиков, где пользователи в противном случае работают с минимальными отзывами. Эти воздушные шары имеют значок предупреждения.
Снимок экрана: выноски, указывающие, что caps lock включен и введен неправильный символ.
Воздушный шар, используемый для сообщения о специальном состоянии.

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

Когда следует отображать

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

Неправильно:снимок экрана с двумя выносками, указывающими на одно поле

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

Как долго отображаться

  • Удалите выноску, когда:
    • Проблема устранена или специальное условие удалено.
    • Пользователь вводит допустимые данные (для проблем ввода).
    • Время ожидания воздушного шара истекает. По умолчанию выноски удаляются через 10 секунд, хотя пользователи могут изменить это, изменив системный параметр SPI_MESSAGEDURATION.
  • Удалите время ожидания, если пользователи не смогут продолжить работу, пока проблема не будет устранена. Разработчики. В Win32 можно задать время отображения с помощью сообщения TTM_SETDELAYTIME.

Отображение

  • Отображать всплывающие шары под элементом управления владельца. Это позволяет пользователям просматривать контекст, включая элемент управления владельца и его метку. Microsoft Windows автоматически настраивает положения выносок, чтобы они полностью отображались на экране. Поведение по умолчанию — отображение выноски над элементом управления владельцем, как и в случае с уведомлениями.

Правильно:снимок экрана с выноской, отображаемой под его элементом управления

Неправильно:снимок экрана с выноской, отображаемой над его элементом управления

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

Текстовые поля пароля и ПИН-кода

  • Используйте выноску, чтобы указать, что caps Lock включена, используя текст в следующем примере:

Снимок экрана: воздушный шар, указывающий, что крышка блокировки включена

В этом примере всплывающее окно указывает, что в текстовом поле с ПИН-кодом включена блокировка CAPS LOCK.

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

Снимок экрана: выноска с указанием ограничений пин-кода

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

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

Снимок экрана: выноска, указывающая на неправильные входные данные

В этом примере всплывающее сообщение указывает, что ПИН-код требует цифр.

Другие текстовые поля

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

Снимок экрана: воздушный шар, указывающий ограничения символов

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

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

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

Значки

Специальные возможности

При правильном использовании всплывающие шары расширяют специальные возможности. Для доступа к воздушным шарам:

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

Text

Текст заголовка

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

Основной текст

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

Снимок экрана: воздушный шар с заголовком и текстом текста

В этом примере показан стандартный макет выносного текста.

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

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

При обращении к воздушным шарам:

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