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
 * 5) Page-context actions (view history, discussion, edit, etc.) are always available in the header
 * 6) The table of contents is now always available in the header

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.

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. (Currently, this feature does not work within the prototype).

Test Questions
Full user testing of Winter will require multiple test harnesses because:
 * Some questions will spoil the tester for other questions
 * Some questions require comparison between Vector and Winterized Vector
 * Some questions have multiple routes to the same answer

Harness One: Winter

 * 1) Can the user identify the search box? (Test search box identification)
 * 2) Can the user find the article discussion? (Test page-context action ribbon)
 * 3) Can the user find out how to edit the full article? (test page-context edit button)
 * 4) Second test with edit button as mw-ui-constructive at outset rather than on hover.
 * 5) Can the user discover how to find their contributions? (Test collapsed user menu)

Set Up

 * User is "auto-logged in" as User:Accedie under the hood, so that there is dummy data for contributions and the user page.
 * Page is pre-loaded with "Winter".

Introduction
Background: You're helping us test out a prototype of some software changes on Wikipedia, the world's largest free encyclopedia. Don't worry about messing anything up – this is just a prototype, not the real site! Mindset: You have made some edits to the encyclopedia in the past, but today you're researching various seasons on Wikipedia.

This test is best run using Google Chrome but will work well in Mozilla Firefox, too.

Tasks

 * 1) Navigate to the starting URL (http://unicorn.wmflabs.org/t/847). You will be asked to enter a user name; pick any name you like (maybe even use your own name). Don't worry, no data will be saved.
 * 2) Once you've "logged in", take a quick moment to look at this page and talk through what you're seeing.
 * 3) Use the search box to look up "Autumn" and go to that page (If you can't find this after 2-3 minutes, follow _this link_).
 * 4) All articles (and pages) on Wikipedia have an associated discussion. Can you find the discussion about "Autumn"?  (If you're stuck after 2-3 minutes, it's okay - just move on to the next task).
 * 5) If you haven't found the discussion, make sure you've scrolled to the top of the page and look at some links directly underneath the title of the page ("Autumn").  Click on the "Discussion" link and talk through what you think you see.
 * 6) Can you find your way back to the "Autumn" page from the discussion?  If you can't, just go to the next step.
 * 7) If you were unable to find your way back to the "Autumn" page, scroll back to the top of the page and click the "Article" link.  Once you're there, go on to the next step.
 * 8) Now that you're back on the main text of the article, let's say you discover a small typo in the first paragraph of the page "Autumn".  Can you find out how to make the change?  If you can't figure out how to make the change, go ahead and move on to the next step.
 * 9) If you weren't able to discover how to edit the page, scroll back to the top of the page and click on the "Edit" button in the top-right area of the article.  This should bring you to the edit screen.
 * 10) Take a few moments to describe what you see and then click "cancel" to return to the main article.
 * 11) Let's say you're an experienced editor who has made several hundred contributions and edits to the encyclopedia.  Can you find your list of contributions?  Take a few moments to look for them but if you can't find them after a minute or two just move on to the next step.
 * 12) Take a few moments to scroll around and describe your general impressions of this interface.  After that, we're done.

Questions

 * 1) How does this interface match with your expectations of using Wikipedia, what parts were easy to use and behaved as expected?
 * 2) In what ways did this interface not match your expectations of using Wikipedia, what parts were hard to use, or weren't quite clear to you?
 * 3) Are there tasks that you felt you were not successful in completing?
 * 4) Can we show this video to our editor community?

Test Videos
Five videos were made using Test Harness One. Videos are annotated with highlights, but major take-aways from each are included below.


 * 1) misterbeauds
 * 2) * Immediately notices the static header and thinks this is a good idea.
 * 3) * Discovers page context icons in the static header easily (though we were not testing this).
 * 4) * Discovers existence of Messages and Talk and thinks this is a a new feature for Wikipedia.
 * 5) * Quickly discovers page-context action ribbon. The fact that there are discussions about articles is completely new to him.
 * 6) * Instantly finds search box and expresses bafflement that anyone could not find it.
 * 7) * Figures out talk pages, but was expecting something more forum-like (speaks to Flow).
 * 8) * Instantly understands article-context navigation. "Easy-peasy".
 * 9) * No problems with edit or cancel.
 * 10) * Easily finds "Contributions" in the user menu.
 * 11) * Expressed that he really likes the search bar and the "new format". "It just feels more modern."
 * 12) kayaker
 * 13) * User actually reads the introductory text on the login screen and opens the MediaWiki page. Oops.  Time to remove that text.
 * 14) * User knew that tabs existed, but is pleased that they have moved.
 * 15) * Instantly finds search. "I like how it's big!  It's nice!"
 * 16) * Finds the edit button and the discussion link easily.
 * 17) * User has looked at talk pages before but only "kind of" understands them. Has confusion about "posts" (sections).
 * 18) * User finds the edit button easily enough, and also explores other options in the edit button drop down.
 * 19) ** She says, "I don't really want to edit visually, do I?" which speaks to a possible verbiage/branding problem with VE.
 * 20) * User cannot easily find the "cancel" button in the editor.
 * 21) * User correctly finds "Contributions" through the user menu, but encounters a different bug. She ends up back to contributions by going through her user page.
 * 22) * Is slightly confused by the way the buttons in the header change, but expresses a bit of joy shortly thereafter.
 * 23) * Definintely likes the bigger font.
 * 24) blairsmama
 * 25) * Easily finds Search.
 * 26) * Initially thinks that "Discussion" may be in the table of contents, but then quickly notices its location at the top of the screen.
 * 27) * Does not understand talk page templates.
 * 28) * User thinks that "Main page" link in the sidebar goes back to the "main page" for the article at first, but then quickly corrects that mistake.
 * 29) * Easily finds out how to edit the page.
 * 30) * No problems finding the editor's "Cancel" button.
 * 31) * User has IE, and runs afoul of broken menu bug (see below). Ends up finding "Contributions" through the in-page context action ribbon from the user page.
 * 32) Emilymae
 * 33) * Easily finds Search and Discussion.
 * 34) * Does not understand talk page templates.
 * 35) * Easily finds edit button.
 * 36) * No problems locating the editor's "Cancel" button.
 * 37) * First looks for "Contributions" under the Table of Contents icon but then quickly finds them in the user menu.
 * 38) Srap33
 * 39) * Easily finds Search and Discussion.
 * 40) * "It's pretty basic. Easy to read, easy to access information."
 * 41) * User understands purpose of talk pages but not necessarily how to use them.
 * 42) * "Edit was easy to find".
 * 43) * No problems locating the editor's "Cancel" button.
 * 44) * User has IE, and runs afoul of broken menu bug (see below). Ends up finding "Contributions" through the in-page context action ribbon.

Takeaways

 * No tester had difficulty recognizing the search bar.
 * All testers quickly grasped the in-page context action ribbon.
 * Several testers expressed surprise that Wikipedia had discussions, which lends even more credence to the idea that Vector tabs are effectively invisible.
 * The "Cancel" button from the editor may need work.
 * All testers found their way to the contributions page, even when faced with bugs/difficulties. They just did it in other routes.

Other Notes

 * The end of the test needs to be rewritten. Rather than discuss Winter itself, all participants discussed the faked-up "Contributions" view.
 * Several minor display bugs exist in Safari and Internet Explorer
 * The user drop down menu does not appear to work in Internet Explorer, which made for some confusion. The testers did not notice this, however, and completed the tasks anyway using other methods.

Harness Two: Winter

 * 1) After scrolling, can users identify the search box? (test adjusted search box identification)
 * 2) After scrolling, can users find the table of contents? (test in-header table of contents icon)
 * 3) After scrolling, can users find their own contributions? (test secondarily collapsed user menu)


 * It is quite likely that many of these will result in the user scrolling back to the top of the page.

Set Up

 * User is "auto-logged in" as User:Accedie under the hood, so that there is dummy data for contributions and the user page.
 * Page is pre-loaded with "Winter".

Introduction
Background: You're helping us test out a prototype of some software changes on Wikipedia, the world's largest free encyclopedia. Don't worry about messing anything up – this is just a prototype, not the real site! Mindset: You have made some edits to the encyclopedia in the past, but today you're researching various seasons on Wikipedia.

This test is best run using Google Chrome but will work well in Mozilla Firefox, too.

Tasks

 * 1) Navigate to the starting URL (http://unicorn.wmflabs.org/t/847). You will be asked to enter a user name; pick any name you like (maybe even use your own name). Don't worry, no data will be saved.
 * 2) Once you've "logged in", take a quick moment to look at this page and talk through what you're seeing.
 * 3) Navigate to the section of the page called "Festivals".  Did you have any difficulty doing so?
 * 4) Use the search box to look up "Autumn" and go to that page (If you can't find this after 2-3 minutes, follow _this link_).  Navigate to the section entitled "Melancholy association".
 * 5) All articles (and pages) on Wikipedia have an associated discussion. Can you find the discussion about "Autumn"?  (If you're stuck after 2-3 minutes, it's okay - just move on to the next task).
 * 6) If you haven't found the discussion, look in the top right area of the screen and find the icon that looks like two speech bubbles.  Click on this icon and talk through what you think you see.
 * 7) Can you find your way back to the "Autumn" page from the discussion? If you can't, scroll back to the top of the page and click the "Article" link, just below the article title.
 * 8) Now that you're back on the "Autumn" article, go to the section about "Tourism".
 * 9) Let's say you're an experienced editor who has made several hundred contributions and edits to the encyclopedia.  Can you find your list of contributions?  Take a few moments to look for them but if you can't find them after a minute or two just move on to the next step.
 * 10) Search for and go to the article "Summer".  Take a few moments to scroll around and describe your general impressions of this interface.  After that, we're done.

Questions

 * 1) How does this interface match with your expectations of using Wikipedia, what parts were easy to use and behaved as expected?
 * 2) In what ways did this interface not match your expectations of using Wikipedia, what parts were hard to use, or weren't quite clear to you?
 * 3) Are there tasks that you felt you were not successful in completing?
 * 4) Can we show this video to our editor community?

Harness Three: Vector

 * 1) Can the user identify the search box?
 * 2) Can the user find the discussion button?
 * 3) Can the user find the edit button?

Current

 * Contributions views:
 * Timestamps don't sort right
 * 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 accellerators 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 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

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

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