Compact Personal Bar

For the 2020 project, see Reading/Web/Desktop_Improvements/Features#User_menu.

Currently disabled, until at least phab:T85541 is fixed. Per phab:T86831 and m:Tech/News/2015/05.

Compact Personal Bar A clean and organized personal bar with quick access to Watchlist, Notifications, and Talk page. This feature paves the way for a simplified site header with access to contextual tools when you need them, try it out with the Fixed Site Header. Group: Design Start: May 1, 2014 End: 2015-01 Team members: Mun May Tee-Galloway, Jared Zimmerman (acting product manager) Backlog: trello

Tracked in Phabricator
Task T46448
Stalled

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

While the space taken up by the personal bar is not particularly limited on all wikimedia content projects in the present UI, the issue will be much more pronounced with the rollout of the Winter/Fixed Header UI, which aims to reduce navigational elements for an increased focus on article content and primary actions like editing and discussion.

Code

• Git Repository

Extension which this is a part of:

• Extension:VectorBeta

Logging schema:

• m:Schema:PersonalBar

Planning

• Trello - Design card
• Trello - Research card

Landscape Audit

• Facebook user flyout menu (image) (click + click behavior)
• Linkedin user flyout menu (image) (hover+click behavior)
• last.fm user flyout menu (image) (click+click behavior, with split menu)
• twitter user flyout menu (image) (hover+click behavior)
• Quora user flyout menu (image) (hover+click behavior)
• Pinterest user flyout menu (image) (click+click behavior)
• Instagram user flyout menu (image) (click+click behavior)

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

Beta Features - Compact Personal Bar Sketch

Proposed List order:

Inside flyout:

Username

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

Contributions

Watchlist (count)

Messages (count)

Notifications (count)

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

Other items added by extensions & gadgets

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

Preferences

Beta

Language

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

Privacy (WMF specific)

Help

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

Log out

Outside of flyout (icons):

Watchlist

Messages / flyout

Notification / flyout

Design V2

CPB v2 main flyout

Major Feedback:

Issue: Icon ordering and duplication

• Icons outside of flyout order has been revised to reflect order inside of flyout
• Icons have been move to right side of flyout to have consistent placement regardless of user name length
• All Icons now have flyouts (icon = quick access to items, flyout = places on the site to go)

Issue: confusing metaphors for some Icons

• Icon with issues have been replaced
• Consistent icon usage with other site features

• Proposed change to default Echo flyout to not include talk page messages to remove duplicate items within notifications and message flyouts.

Issue: light grey icons could look disabled

• Normal state icons have been darkened
• Icons have hover and click states
• "Constructive" blue (mediawiki.ui) color is used for active state of icons and "Progressive" green for notification counts

CPB flyout icons v2

Alternative designs from community members

Rezonansowy's design from Winter's feedback page

Want to give feedback?

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