Winter

This document describes changes and rationale to the Vector interface design.

An interactive prototype (with limited functionality) has been built. You may play with it here. Screenshots to come.

Larger Search Area
Search is the primary method of navigation throughout the site. It should be more prominent and always available. By moving the tabs into the main article space, we are able to free up significant space for its use.

Fixed Header
Applying a fixed header solves for several issues:


 * 1) Search is now always available
 * 2) Echo is now always available (while Echo does not currently poll, in the future it could, which makes this a desireable feature)
 * 3) User tools are now always available
 * 4) A link back to the Main Page is always available

Minimized User Actions Area
User actions take up a great deal of screen real estate - especially as the software gets older and newer features are added. Putting many of the less used actions (e.g., Preferences) into a collapsed menu and iconifying others gives us more space.

Note that this design includes an avatar space. This is illustrative only.

No More Blue Border
The current iteration of Vector includes a powder blue border around the "content" area. This line presented two problems:


 * 1) The color itself was difficult to work with.
 * 2) The starkness of it created a mental space where users were trained only to think about what was "inside" of the blue border.  While this helped to focus the user on the content, it also served as a barrier to discovery for elements not inside of it (such as the various tabs).

Tab Removal
A primary interaction problem has always been that tab actions were housed away from the content of the article itself (as described above). Further, Vector's tab design was less than ideal for affordance notification: the gradients within them, combined with the lack of a top bar, caused them to drop to the back of the user experience.

By bringing the tab actions into the page space, they become more tightly coupled to the article (as actions or views) and are much more discoverable.

Additionally, page-related actions that had been relegated to obscurity within the sidebar "toolbox" will be elevated and connected within the page space as well.

Section Edit Behavior
Originally, section edit links were aligned on the right of the section. While this was good for usability in that they were always in a consistent space, it was not so good for discoverability, and it was sometimes frustrating trying to determine which section was going to be edited.

This version replaces the text link with a button that appears on hover over the section. Hovering over the button itself will then highlight the section that is going to be the target of the action.

The current implementation of this uses blue buttons and is a bit jarring. This is something we hope to experiment with going forward (e.g., different versions and styles of buttons).

New Changes

 * Added "watch" button to button ribbon
 * Shadow only appears on scrolling; disappears and turns to solid border when not moving.
 * Added icons to article action elements
 * Turned "more" action into a single pulldown
 * Edit buttons now have secondary pull down for additional actions (edit source, insert image, etc.)
 * Section edit links are now standard "white" color until hover, where they turn blue.
 * Targeted sections now have a slight border in addition to light color fill
 * Removed border from Table of Contents
 * Left aligned TOC header
 * Search placeholder text is now replaced with article title on scroll
 * All menu items now have icons (placeholders, mostly)

Bugfixes

 * Fixed issue with hoverstate on H2 sections and striping (set background color to transparent rather than white)
 * Fixed border radius issues with internal button ribbon