Compact Personal Bar

Goal

The personal bar is long, and getting longer. It would be great to start the process of thinking about how we would make this into a collapsed flyout control that takes up less space on screen but is easy to access, organized, and still has high priority things like notifications visible at all times.

Some suggested things to accomplish

• Top level access to Echo notifications
• Top level Access to Watchlist (?)
• Create solution that works with touch interfaces and mouse based ones
• Create consistancy with Mobile roadmap of "personal drawer" on right side of web app for editor and contributory features

Resources

cross browser pure css flyout menu

another one pure css implementation

CSS only animations

Implementation notes for BetaFeatures Extension by Mark Holmquist

Landscape

Facebook user flyout menu (image)

Linkedin user flyout menu (image)

last.fm user flyout menu (image)

twitter user flyout menu (image)

Quora user flyout menu (image)

Pinterest user flyout menu (image)

Analytics & Things to test

• How do we arrive at the best possible order of items in the menu
  • How can we partner with Analytics team to come up with experiments where items are random or semi-random to discover the best arrangement?
  • How do we define "best" arrangement
    • matches current access to each destination in the current personal bar?
    • higher traffic to certain features (which?)
    • equal traffic to each destination?
• Is the current bar instrumented in a way that we can compare the BetaFeature numbers to the current version?

Design

Proposed List order

Outside of flyout

Echo (icon)

Talk Notification (icon)

Watchlist (icon?)

Inside flyout

User Name

Contributions

Echo (count)

Talk Notification (count)

Watchlist (count)

Preferences

Beta

Language

Privacy

Log out

Team

Jared Zimmerman

Mun May Tee-Galloway

…