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


Воздушные шары

Примечание.

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

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

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

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

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

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

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

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

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

Это правильный элемент управления?

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

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

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

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

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

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

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

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

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

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

Шаблоны использования

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

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

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

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

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

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

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

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

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

Отображение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Значки

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

При правильном использовании воздушные шары повышают доступность. Чтобы воздушные шары были доступны:

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

Текст

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

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

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

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

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

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

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

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

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

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