Winter


 * Not to be confused with Extension:Winter for adding new programming-like syntax to MediaWiki.

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.

Open the Winter Prototype

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

January 20, 2014

 * New code name: Winter
 * System now prompts for a user name upon load and will optionally save the value.
 * This sets up the personal bar to be, well, personal.
 * This action DOES NOT log the user into Wikipedia.
 * Saved data can be cleared from the sidebar.


 * Searchbox now drops text on focus and replaces it on blur
 * Searchbox now has a hover state with invitation text.
 * Searchbox icon now turns blue on focus
 * Logo now snaps to white background when in locked position.
 * Sidebar is now white by default, with a grey border that fades out when all items in the sidebar are out of view.
 * The Table of Contents now appears in the header of the page from the beginning
 * (Previous versions of Winter had the ToC only appear there after the in-page Table of Contents rolled off-screen)
 * Article actions now dock in the header when they scroll out of view (iconfied).
 * Added tipsy behaviors.
 * Fixed issue with search box positioning.
 * Added pencil icons to section edit buttons
 * Section edit buttons now are visible at all times but do not have borders.
 * On hover, they turn blue.
 * Changed section edit hover transition from 'linear' to 'ease'
 * Added footer section
 * Added "categories" box in example article
 * Added "Typography" toggle in sidebar. Activating it turns on:
 * An approximation of restricted measure
 * References have returned
 * Built a JSON parser into the demo so that different pages can be loaded via the API.
 * Language links are now slotted into the sidebar.
 * System correctly recognizes when it's looking at User content (User: and User_talk:) and adds icons and functionality as required
 * Handles contributions (sort of - buggy)

Known Issues

 * Contributions views:
 * Timestamps don't sort right
 * Comment fields are not correctly parsed from wikitext to html
 * Size changes are not correctly reflected
 * Redlinks do not work
 * System does not handle 404 loads correctly (fails silently, requires reload)
 * Internal hash URLs don't scroll correctly
 * Some buttons don't go away when they should
 * Loading from JSON breaks the nice little "section hover" stuff.
 * Clicking on a section title in the table of contents forwards to the correct section, but the section header is covered by the search bar

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