Design/Whiteboards/Infobar

From The Document Foundation Wiki
Jump to: navigation, search

Summary

Design an infobar UI element for VCL.

Status

Call for Proposals Analyzing Proposals Shaping Tentative Design Implementation in Progress Implemented

Scope

In Scope Out of Scope
  • Specification of infobar elements
  • Default design
  • Ability to theme the widget based on the native toolkit if possible
  • Scalability

Discussion

Proposals

Proposal by Mirek2

Mockups

Infobar offering solutions: Font1.png

Infobar just informing: Font0.png

Stacked infobars: I-stacked.png

Description

Usage

The infobar should be used to offer possible remedies to problems related to the current document, or at least to give information about them so that the user can remedy them himself. The actions found in the infobar must be accomplishable in another part of the user interface.

When a problem prevents basic interaction with the document, use a dialog instead.

Examples

Valid applications:

  • The user doesn't have spell-checking support for the used language installed.
  • There's no hyphenation support for some text due to the language used.
  • Pictures linked to external webpages render slowly or not at all based on the internet connection.

Invalid applications:

  • A new version of LibreOffice is available. Not document-related, would violate ux-natural-mapping and ux-interruption.
  • User surveys are available. Same problem.
  • Document is being saved in a lossy file format. This could lead to data loss, so a dialog should be used instead.
Contents

Every infobar should contain the following:

  • 22x22 icon: This icon should represent the context of the infobar and should indicate where else in the UI the user can find the presented actions.
  • Terse description
  • If LibreOffice can offer problem solutions, then include:
    • Action question
    • Actions
    • A "More info..." button if necessary
  • If LibreOffice can't solve the problem itself, offer a "More info..." button
  • A "Dismiss" button to leave the document as is
Layout

The infobar should stretch across the entire width of the window, below the top toolbars and above the document area. It should be organized into rows with the height of a standard button size and a 6px margin. Contents would be organized into three columns, with the first column reserved for the icon in the top left corner, the second for the text and buttons, and the third for the "Dismiss" button in the top right corner. Multiple infobars would stack.

"Old stuff"

Here some pointers to "the past" by Christoph Noack [1]:

Already rather complete description by the OOo UX Team (2010): [2]

... including some more drafty mockups here: [3]

Contextual Information Bar (designed for dialogs, from 2010): [4]

... directly to the example mockup for the printing dialog: [5]

Direct Manipulation Snippets (idea from 2008 or so) [6]

Relevant Art