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

Fixed Header
The "header" area of the chrome is now "fixed" or "static". Applying a fixed header solves for several issues:


 * 1) Search is now always available
 * 2) Echo notifications are now always available.  While Echo does not currently poll for updates, in the future it will, which makes this a desireable feature.
 * 3) User tools are now always available.
 * 4) A link back to the Main Page is always available.
 * 5) The table of contents is now always available in the header.
 * 6) Page-context actions (view history, discussion, edit, etc.) are always available (through the table of contents menu).

Larger Search Area
Search is the primary method of navigation throughout the site and 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.

The search box now covers (almost) the full width of the top screen. Additionally, it is static and will follow the user as they scroll the page. Search suggestions are now much larger and easier to read.

In the future, search suggestions will include additional information about their targets (e.g., iconified lead images or other metadata). This work requires changes to the MediaWiki API, however.

User tests have shown that the discoverability of the search box is very high. Most users discover it immediately while a small handful take a moment to adjust.

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. This is a modification of the Compact Personal Bar.

User tests have shown that, when the user name is visible in the tools menu, the menu is universally recognized as being "about me" and "has my stuff".

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

Winter attempts to solve for activity blindness by moving actions from outside of the blue border and into the content area, where they are more closely associated with the article/page at hand.

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. User testing has shown no difficulty with users locating tabs once they have been included within the "context ribbon", directly below the Page title.

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

The Watchlist affordance has been moved to be directly next to the page title.

Language links have been pulled from the sidebar and added to the context ribbon. This is an experimental idea and needs work.

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. These buttons are multi-state pulldowns that attempt to illustrate how additional, section-level actions can be integrated into the interface.

Hovering over the button itself will then highlight the section that is going to be the target of the action. (Currently, this feature does not work within the prototype).

Snowflake Requests
The Winter framework allows for the development of extra modules or extensions called "Snowflakes". This is a list of requested Snowflakes.

Current

 * 1) Dark Footer - changes the visual style of the footer
 * 2) Test Mode - changes the interface by adding/removing elements and forcing fake-ups. Used when doing user tests.
 * 3) Inner Table of Contents - Enables/disables the usage of the interior table of contents.
 * 4) Typography Refresh - turns on/off new typography mode (should become default soon)
 * 5) Hide Sidebar - reduces/eliminates the left sidebar and puts its functionality into a hover menu on the logo.

Pending/Requested

 * 1) Hodor - changes all chrome text to randomized text ("hodor speak") in order to be able to test language selection
 * 2) Right Rail - adds in "right rail" exploration functionality
 * 3) Athena Images - adds large banner images to pages (per older Athena designs)
 * 4) Flowtype.js - integrate responsive type size, measure, and line height with a 90 CPL maximum (source)
 * 5) Up Next - load random or semi-random selection of articles at the bottom of article pages (transition/on scroll)
 * 6) Side of fries - Allow new flow conversations to be started based on sections of article
 * 7) Full screen - Allow fixed header to be hidden on scroll and restored on scrollback or echo events
 * 8) Peek - Display more image information (uploader, author, CC info, etc) on hover
 * 9) Pinned TOC - Allow for the table of contents to be pinned and use left column margin (wikiwand/footnote mockup)

User Tests
User tests and their results have been moved to their own page. See Winter/User tests.

Current

 * Contributions views:
 * Timestamps don't sort correctly
 * Comment fields are not correctly parsed from wikitext to html
 * Size changes are not correctly reflected
 * System does not always handle 404 loads correctly (can fail silently, requiring a reload)
 * Internal hash URLs don't scroll correctly when loaded from external sources (this is a problem with the prototype specifically and will not appear in the production version)
 * Keyboard accelerators do not work. This is a problem of the prototype specifically and will not happen with the production version.
 * Loading from JSON breaks the nice little "section hover" stuff.
 * Categories are not displayed correctly, if at all.
 * Page-footer overlaps with content on very short pages
 * This only affects the prototype; it's part of the way it is constructed.

In Winter 0.4

 * Some buttons don't go away when they should
 * Redlinks do not work
 * 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
 * Button size off-set issue appearing in Firefox (thanks, Sven!)

New Changes
Major:
 * Personal tools section no longer modifies itself upon scroll and remains fully expanded.
 * In-header table of contents now appears to the left of the search box.
 * No longer waits to appear upon scroll.
 * Now includes context actions at the top when opened (Edit/Discuss/History/etc.)
 * (This has bad visual design but it's good enough to test)
 * Moved Language links into the page context ribbon area.
 * Hovering over the affordance will show some languages to better enable discovery
 * Clicking will open the language list. This could be the ULS; could be something else.  But a pulldown list isn't working.
 * This is for testing discoverability.
 * Moved the watchlist star out of the context ribbon and right next to the article title.
 * Some context-ribbon button labels are now automatically updating:
 * Discussions counts the sections in the talk page and changes accordingling (e.g., "35 Discussions")
 * We're aware that there are possible caching issues with live implementation
 * The history link now shows the last updated time in human-readable format.
 * Experimental: Added new toggle, "Hidden Sidebar". This hides all sidebar links until hover over the logo.
 * Toggle off or on from the sidebar.
 * It needs a lot of work, especially around the "non-scrolled" visual state. This is possibly a throw-away experiment.

Minor:
 * Removed the header shadow appearing on scroll
 * Removed shadow from editor toolbar
 * Added option to disable the modification of the header buttons/controls on scroll (requires JS change)
 * Removed "quiet mode" and "thinner" options from the sidebar; these are defaults now.
 * Removed the restricted measure from the Typography toggle (this will probably become a default really soon now)
 * The personal actions toolbar always remains fully expanded now.
 * Added page-context actions to the header's TOC item.
 * Added "Contents" header to the header's TOC menu
 * Removed "overflow: hidden" from h2,h3, etc. (for now) as it prevents the menus from working on the section edit links

Bugfixes

 * Missing icon for data items.
 * Fixed issue with "bunching links" (thanks, theDJ and Sven!)
 * ... and promptly had to undo this change because the edit pulldown menus broke (above overflow thing)
 * Certain icons were appearing in Contributions views that shouldn't have.

Version 0.4, February 07, 2014
Archived prototype:

New Features

 * Added version identifier in sidebar.


 * Significantly upgraded the prototype chassis:
 * Added functionality to pass Page names to the url with ?page=$PAGENAME
 * This allows the prototype to open new tabs and such.
 * Other actions also follow suit (edit=, history=, contribs=)
 * Added "History" functionality
 * Added "Contributions" functionality
 * Added "Edit" functionality
 * Edit-mode controls are placeholders and not implemented. Also incomplete.
 * Always loads source editor
 * Links to article/user and discussion both appear here.
 * Section edits also work
 * DOES NOT SAVE.
 * Changed "Edit Source" to "Edit Visually" in edit button menus because we're not faking up the visual editor (At this time)
 * Search box now works and does basic type-ahead lookups.
 * Not entirely fully functional (e.g., does not auto-select)
 * Some issues with clicking out of the search area not defaulting back to the page title
 * No full search functionality (yet)
 * Additional sidebar toggles:
 * Quiet Mode: (default)
 * This applies several visual changes to the button ribbon (including border removal)
 * Also slots the button ribbon right below the page title
 * Thin Mode: (default)
 * This reduces several borders to 1 pixel instead of 2.
 * Sidebar settings now are remembered between pages.
 * Cookie clears with "clear saved data"
 * Personal bar now collapses when page-context tools pop into the header.
 * Animation could use some work.
 * Changed avatar icon
 * Added link to notifications from user pulldown menu
 * Added small color highlight to internal tabs/buttons to indicate location
 * Attached several "This is not implemented" modal dialogs to various actions.

Bugfixes

 * Clicking on internal hashlinks (like from the TOC) now target correctly given the fixed header.
 * Also smooth scroll animation.
 * Page now scrolls to top when new page is loaded
 * Toolbox sections now open and close correctly
 * Found broken css rule that was applying a ginormous font size to all  tags.
 * Applied a max-height to the header table of contents and gave it scrollbars when the size of the TOC is larger than its content.
 * Page co-ordinates now go to the correct place
 * Language links now list the name of the language, not the name of the article
 * This was a pain. This data needs to be in the API call.
 * "Discussion" link now becomes "article" link on discussion pages.
 * Redlinks now appear red.

Version 0.3, January 20, 2014
Archived prototype:


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

Version 0.2, January 14, 2014
Archived prototype:

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

Version 0.1, November 25, 2013
Archived prototype:


 * Initial release