Projects/Usability/HIG/Callouts

Purpose

Plasma callouts present salient information to the user in as concise a form as possible. As callouts are easy to trigger, simply by hovering, callouts act in a way that will not distract the user. Consistent design will mold the design to accomplish this goal.

Examples

Example images

Guidelines

Is this the right control

• Use callouts to show detailed information on Plasma applications and to provide additional information.
• Do not use callouts for warnings and notifications.
• Do not use callouts in standard application outside of Plasma, use a tool-tip instead.

Behavior

• Keep tips brief, typically five words or less for tool-tips; whenever appropriate, provide keyboard short-cuts and default values.
• If the control is disabled, add a short explanation about the reason to the tip. If a control already has a tooltip when it’s enabled, write the reason in brackets behind the usual tooltip when it’s disabled. For instance: 'Go to the next unread message' in case of enabled controls and 'Go to the next unread message (No unread messages left)' when disabled.
• Consider to add small info buttons for using tips with a touch screen.

Appearance

• Activation
  • Show the callout after 500 milliseconds mouseover on a Plasma item, or depending on user settings.
  • Hide it automatically after 2 seconds, or depending on user settings.
  • Hide immediately when mouse leaves the spawning plasmoid.
  • Reset callout appearance timer when any callout closes, do not show more than one callout at a time.

• Content
  • Content of Plasma callouts is to be displayed in a consistent manner that conveys what the plasmoid displaying the callout is, and any relevant statutes.
    • The callout title displays the name of of the plasmoid.
    • The callout subtitle displays statuses, or, if plasmoid is static, the second line of the callout will present a succinct description of plasmoid or explanation of what clicking will do.
      • Callouts should not contain any information not present in the main plasmoid, as some users chose to disable callouts in Plasma entirely.
  • Status text for Plasma callouts must be simple and easy to parse by the user. It must be tied to the core service provided by the plasmoid.
    • For example, a battery manager would display the percent of battery left, the calendar would display the current date.

Appearance

• Look
  • Plasma callouts use an arrow to tie the callout to the plasmoid that spawned it. This will tie the content displayed in the callout to the plasmoid spawning it.

• Icon
  • Plasma callouts must not present icons unless the callout is tied to an application outside of plasmashell. For example, a callout spawned by the battery manager ought to lack an icon as the battery manager is tied to Plasma. The task manager on the other hand use icons, as the icons it displays will tie the plasmoid and the application together in the users mind.

• Padding
  • Design Plasma callouts to have consistent padding.
    • Always follow standardised padding settings when designing callouts.

• Size
  • Design Plasma callouts to follow standard height.
  • You may set the width of callouts to fit your needs, but the callout may occupy no more that five percent of the total screen size.

• Text
  • All text within Plasma callout text must be left aligned (for LTR languages) and not indented.
  • No text in any callout should be bold, italicized, or underlined.
  • Set the callout title to title style capitalization and use sentence style capitalization for the subtitle.