Making the AppBar more discoverable with PeekBar

    General discussion

  • The AppBar was introduced in Windows 8 as the solution for app commanding.  One of the key principles of the Windows 8 design language was that of “content over chrome”.  Therefore, the AppBar was designed such that it was only visible when you choose for it to be by either using the Edge gesture (swiping from the bottom edge of the screen) or using one of the other mechanisms such as right-click or Windows + Z keys.

    As new users started using Windows 8 apps, the AppBar was not necessarily discoverable.  Since the AppBar was not initially visible, users did not always know it was there and were unsure how to perform application commands.  This not only led to frustrated users, but frustrated app developers as well.

    Over time, some app developers began addressing this issue by creating new custom chrome representations for the AppBar.  The most common approach is that of a PeekBar which provides a number of different UI artifacts to make the AppBar more visible.

    Since there is no official PeekBar control offered by Microsoft, I thought I would post an implementation of a PeekBar so that it may provide a consistent model for those who wish to have a more discoverable AppBar.

    Let’s talk about the design of PeekBar.  This is a custom (Templated) control that provides two types of chrome bits that are used to indicate the presense of an AppBar:

    Stripe chrome:

    Stripe chrome

    Tab chrome:

    Tab chrome

    How and when the PeekBar and its chrome are shown depend on the Mode of the PeekBar.  The Modes are described as follows:

    • None – This mode will never show the PeekBar and the AppBar will appear and function as it normally does.
    • Stripe (default) – This mode indicates that the stripe chrome should always be shown.  The user can tap on the “…” to show/hide the AppBar.
    • Tab – This mode will always show the tab chrome.  The user can tap on the “…” to show/hide the AppBar.
    • Auto – This mode indicates that the stripe chrome should be initially shown.  However, when the user moves the mouse, the stripe chrome will be hidden and the tab chrome will show.  If the user does not move the mouse again or does not tap the screen, the tab chrome will fade out after 3 seconds.  If the user taps on the screen, the stripe chrome will reappear.

    The complete source project for the PeekBar can be found here.

    Friday, April 11, 2014 4:53 PM