Compact Personal Bar

Goal
The personal tools bar is long, and getting longer. Let's start 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 notifications
 * Top level access to your watchlist
 * Create solution that works with touch interfaces and mouse based ones
 * Create consistency with Mobile roadmap of "personal drawer" on right side of web app for editor and contributory features

Code
Extension which this is a part of:
 * https://git.wikimedia.org/tree/mediawiki%2Fextensions%2FVectorBeta.git/HEAD/resources%2FcompactPersonalBar
 * https://www.mediawiki.org/wiki/Extension:VectorBeta

Landscape Audit

 * 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)
 * Instagram user flyout menu (image) nice animation too

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?
 * Instrument current personal bar in a way that we can compare the Beta Feature numbers to the current version

Design
Proposed List order

Outside of flyout

Echo (icon) (not in core)

Talk Notification (icon) (not in core)

Watchlist (icon)

Inside flyout

User Name

–––––––––––––––––––

Contributions

Echo (count) (not in core)

Talk Notification (count) (not in core)

Watchlist (count )

–––––––––––––––––––

Other items added by extensions & gadgets

–––––––––––––––––––

Preferences

Beta (not in core)

Language (not in core)

–––––––––––––––––––

Privacy (WMF specific)

Help (not available in core)

–––––––––––––––––––

Log out

Want to give feedback?
We'd love to hear your feedback on the design, just leave a message on the Talk Page.