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).