Winter

From MediaWiki.org
Jump to: navigation, search
Not to be confused with Extension:Winter for adding new programming-like syntax to MediaWiki.
The main page of Wikipedia using the Winter vector as of 1 January 2014.

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

Changes[edit | edit source]

Larger Search Area[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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

User Tests[edit | edit source]

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[edit | edit source]

  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)
    1. Second test with edit button as mw-ui-constructive at outset rather than on hover.
  4. Can the user discover how to find their contributions? (Test collapsed user menu)

Set Up[edit | edit source]

  • 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[edit | edit source]

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[edit | edit source]

  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[edit | edit source]

  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[edit | edit source]

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

  1. misterbeauds
    • Immediately notices the static header and thinks this is a good idea.
    • Discovers page context icons in the static header easily (though we were not testing this).
    • Discovers existence of Messages and Talk and thinks this is a a new feature for Wikipedia.
    • Quickly discovers page-context action ribbon. The fact that there are discussions about articles is completely new to him.
    • Instantly finds search box and expresses bafflement that anyone could not find it.
    • Figures out talk pages, but was expecting something more forum-like (speaks to Flow).
    • Instantly understands article-context navigation. "Easy-peasy".
    • No problems with edit or cancel.
    • Easily finds "Contributions" in the user menu.
    • Expressed that he really likes the search bar and the "new format". "It just feels more modern."
  2. kayaker
    • User actually reads the introductory text on the login screen and opens the MediaWiki page. Oops. Time to remove that text.
    • User knew that tabs existed, but is pleased that they have moved.
    • Instantly finds search. "I like how it's big! It's nice!"
    • Finds the edit button and the discussion link easily.
    • User has looked at talk pages before but only "kind of" understands them. Has confusion about "posts" (sections).
    • User finds the edit button easily enough, and also explores other options in the edit button drop down.
      • She says, "I don't really want to edit visually, do I?" which speaks to a possible verbiage/branding problem with VE.
    • User cannot easily find the "cancel" button in the editor.
    • 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.
    • Is slightly confused by the way the buttons in the header change, but expresses a bit of joy shortly thereafter.
    • Definintely likes the bigger font.
  3. blairsmama
    • Easily finds Search.
    • Initially thinks that "Discussion" may be in the table of contents, but then quickly notices its location at the top of the screen.
    • Does not understand talk page templates.
    • 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.
    • Easily finds out how to edit the page.
    • No problems finding the editor's "Cancel" button.
    • 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.
  4. Emilymae
    • Easily finds Search and Discussion.
    • Does not understand talk page templates.
    • Easily finds edit button.
    • No problems locating the editor's "Cancel" button.
    • First looks for "Contributions" under the Table of Contents icon but then quickly finds them in the user menu.
  5. Srap33
    • Easily finds Search and Discussion.
    • "It's pretty basic. Easy to read, easy to access information."
    • User understands purpose of talk pages but not necessarily how to use them.
    • "Edit was easy to find".
    • No problems locating the editor's "Cancel" button.
    • User has IE, and runs afoul of broken menu bug (see below). Ends up finding "Contributions" through the in-page context action ribbon.

Takeaways[edit | edit source]

  • 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[edit | edit source]

  • 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[edit | edit source]

  1. After scrolling, can users identify the search box? (test adjusted search box identification)
  2. After scrolling, can users find the discussion? (test in-header discussion 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[edit | edit source]

  • 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[edit | edit source]

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.

Notes[edit | edit source]

  1. This version of Harness Two has a confusing situation where people would find themselves on their own talk page rather than an article talk page and get lost. This is corrected in a later version of the test.
  2. Users were also a bit confused by not seeing the user name they provided in the contributions page. This was corrected in a later version of the test.
  3. There was internal concern about the article talk icons not matching from within the action ribbon and the header. This is corrected in a later version of the test.

Tasks[edit | edit source]

  1. Please move the Usertesting instruction panel (this panel) to the lower left of your screen so that it does not cover the upper area of your browser.
  2. Navigate to the starting URL (http://unicorn.wmflabs.org/t/848). 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.
  3. Once you've "logged in", take a quick moment to look at this page and talk through what you're seeing.
  4. Navigate to the section of the page called "Festivals". Did you have any difficulty doing so?
  5. 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".
  6. 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).
  7. 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.
  8. 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.
  9. Now that you're back on the "Autumn" article, go to the section about "Tourism".
  10. 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.
  11. 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[edit | edit source]

  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[edit | edit source]

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

  1. asher
    • Instantly finds search after scrolling.
    • Did not know Wikipedia had discussions.
    • Confusion with double icons for talk page.
    • User assocatied icons in upper-right with "my stuff"; did not think that any page-context actions would appear there.
    • User had definite icon confusion.
    • Liked the in-header version of the Table of Contents
    • User found contributions but only by going to their user page first and then finding the Contributions in the in-page context ribbon.
    • Finds the edit button easily, once he's looking for it.
  2. limitlessappz - User did not give permission to share their test video.
    • User likes how the search box scrolls with the page; has no difficulty with it.
    • Immediately discovers Echo.
    • User is blind to the existence of the table of contents and does not use it until the very end.
    • User finds way to article talk, but through a link in a page template, not through navigation.
    • User finds Contributions but only by going to user page first and then using the context action menu.
  3. bablador
    • User scrolls to the top of the page to use search box. Does not notice the header being sticky.
    • User does not know that there are discussions.
    • User goes to discussion page using the context action ribbon, not the header icons.
    • Takes VERY little time to find Contributions link in the user menu pull down, but scrolls to the top of the page first.
  4. eatglitter
    • User is super happy that Wikipedia has added a table of contents.
    • Scrolls to the top to use the search box but finds it easily.
    • Goes to discussion through the action ribbon.
    • User correctly identifies the personal tools section.
    • User finds contributions but does so by going to their talk page and then clicking "contributions" in the page context ribbon.
  5. reneeineastbay
    • User easily finds search box. Does not scroll up. "Just look for the little magnifying glass."
    • User scrolls to the top of the page to use the action ribbon to get to the discussion page.
    • While on the user page, user does not see the contributions link inside the context ribbon.
    • Does not recognize pull-down menu icon in personal tools.
    • Never finds contributions.

Takeaways[edit | edit source]

  • Search is very easy to find.
  • Users are almost hard-wired to return to the top of the page to look for actions.
  • No users correctly discovered the contextual header icons.
  • Everyone is baffled by talk page templates.

Harness Two: Electric Boogaloo[edit | edit source]

  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.

Notes[edit | edit source]

  • This is a slightly modified version of Harness Two to account for questions that users tended to get lost in.
  • Several modifications were made to the prototype to eliminate areas of confusion. Icons between the context ribbon and the header were synchronized. Opening dialog text was modified to be less "inside baseball."

Set Up[edit | edit source]

  • 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[edit | edit source]

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[edit | edit source]

  1. Please move the Usertesting instruction panel (this panel) to the lower left of your screen so that it does not cover the upper area of your browser.
  2. Navigate to the starting URL (http://unicorn.wmflabs.org/t/849). 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.
  3. Once you've "logged in", take a quick moment to look at this page and talk through what you're seeing.
  4. Navigate to the section of the page called "Festivals". Did you have any difficulty doing so?
  5. 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".
  6. 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).
  7. If you haven't found the discussion, scroll back to the top of the page and click the "Discussion" link, just below the article title. Talk through what you think you see.
  8. Can you find your way back to the "Autumn" page from the discussion? If you can't find it after a few minutes, it's okay - just move on to the next task.
  9. If you haven't found your way back to the article, scroll back to the top of the page and click the "Article" link, just below the title.
  10. Now that you're back on the "Autumn" article, go to the section about "Tourism".
  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. 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[edit | edit source]

  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[edit | edit source]

  1. bryanfm
    • This tester is extremely literal minded. Only clicks on things when directed to.
    • User quickly discovers their personal bar (and identifies Echo)
    • User correctly finds search but scrolls to the top of the page first.
    • Finds the discussion link in the action ribbon. It takes a while, though.
    • Completely, utterly baffled by the article talk page.
    • No problems finding the "back to article" link now that he knows what the context ribbon is. Does not use header icons.
    • User scrolls to the top to access his personal toolbar. He does NOT associate the person icon in the static header to him.
    • User likes to zoom in a bit because he has "less than perfect eyesight"
    • Did not discover the in-header TOC until the very end.
  2. LuckyMe
    • User scrolls to the top to get to the search box but has no trouble finding it there.
    • User scrolls to the top of the screen and quickly locates the Discussion link in the article context ribbon.
    • User correctly identifies talk page topics, but isn't sure she is allowed to edit them. Cannot identify the authors of comments (doesn't recognize signatures).
    • User is absolutely not associating the person icon with "her stuff". Eventually she finds it, but only after her username is next to it.
  3. ddsurfer
    • Instantly finds search box. Does not scroll back up.
    • Finds the discussion link in the context action ribbon, but it takes a little time.
    • Navigates back to the article using the context ribbon.
    • She discovers the top bar icons, but she's looking for her contributions now, and doesn't think to open the user menu.
    • When looking for her contributions, the user clicks on the article history icon in the header. This is the first time I've seen anyone use those icons, and it's done incorrectly.
    • Does NOT find contributions and gives up looking. . .BUT she finds them at the very end (once the user name is visible again).
  4. HyruleHero57
    • User *immediately* recognizes that he has a "personal tools" area though he doesn't associate Wikipedia with having accounts.
    • User is fairly familiar with Wikipedia's interface. Finds the search box change and calls it out.
    • Finds the in-page context action ribbon fairly easily.
    • User scrolls to the top to use the search box.
    • Wonders a bit about how hard the search is to see (even though he found it instantly). Expresses delight at the auto-complete feature, but we've had that forever.
    • Scrolls to the top to use the context action ribbon to find the Discussion.
    • Does NOT see talk pages as "discussions". "It's just people writing stuff." ABSOLUTELY expects the talk page to behave like a modern discussion system.
    • Re: Contributions: "I assume it's going to be in this top-right corner." Scrolls to the top of the page.
    • Goes to the user page and ignores the pull down menu. Finds Contributions in the context ribbon.
  5. sav7
    • This tester is the only tester in both versions of this test to correctly find and use the header action icons. He also appears more technically savvy than the others.
      • However, he does suffer from icon confusion. It's possible he thinks the icons are shuffled.
    • Immediately discovers the personal tools section and points out that he can see his username there.
    • Finds search without scrolling to the top.
    • Navigates to article talk by using the header icon. Is the only one to do so.
    • User understands talk pages but thinks they are confusing.
    • Navigates back to the article using the context ribbon.
    • Correctly finds the contributions page by using the personal tools pull down. Does not scroll to the top of the page (again, only user to do so).
    • Very happy with the personal tools bar and header icons.

Takeaways[edit | edit source]

  • Most testers do NOT associate the personal tools with "my stuff" unless the username is visible. If the username is there, they can find it easily.
  • With one exception, users do not notice the header icons changing in a meaningful way.
  • At this point, with 10 testers and a 10% success rate, I'd say that the benefits of putting page icons in the header are outweighed by the negatives of losing the username for discoverability.

Harness Three: Winter: No Header Icons[edit | edit source]

  1. After scrolling, can users identify the search box? (test adjusted search box identification)
  2. After scrolling, can users find the Discussion? (test location of context ribbon)
  3. After scrolling, can users find their own contributions? (test secondarily collapsed user menu)

Notes[edit | edit source]

This test is functionally identical to Harness Two: Electric Boogaloo (same set up, background, questions, and tasks). However, in this version of the prototype, the following changes were made:

  • No page-context actions are loaded into the fixed header.
  • The user tools section does not shrink/collapse.

Test Videos[edit | edit source]

  1. ragelle72
    • User instantly recognizes the personal tools area.
    • Easily finds search box; does not scroll to the top.
    • Goes to talk page through a link in an internal template. Does not understand what talk pages are.
    • When she discovers the action ribbon, indicates that she didn't see it at first (suggested a different color). However, uses it easily from that point on and says she likes it.
    • Quickly finds contributions in the user tools menu, but scrolls to the top of the page.
    • "It's very easy to navigate through and figure it out." She *loves* the personal tools area.
  2. ThatDuckGuy
    • This is a highlight test. The user is very chatty. It is a 100% success.
    • Immediately notices the personal tools area and notes that he is logged in (discoverability of username).
    • Immediately finds the context action ribbon.
    • Notices that the page scrolled for him.
    • Immediately goes to the sticky search box; does not scroll.
    • Immediately scrolls to the top to find the discussion link.
    • Instantaneously goes to the user tools pulldown menu to find his contributions.
    • Likes the interface, thinks it is clean and modern. Loves the scrolling behavior.
    • Likes the context action ribbon. Thinks its easy to switch back and forth between pages.
    • Likes the search at the top, and likes that it is sticky. Likes the auto-complete.
  3. kittypurry
    • Tester's set up has a lot of microphone buzz, so be warned.
    • Instantly grasps their personal tools section by pointing out their user name.
    • Scrolls to the top to find search. Likes the size of the search bar.
    • User expects a link to the discussion in the Table of Contents. As with many others, also scrolls to the bottom of the page (expecting blog/news story like comments area).
    • Finds the discussion link in the action ribbon but it takes a little while.
    • Quickly goes to and uses the context action ribbon to return to the article.
    • Easily finds contributions in the user pull down menu. Has scrolled to the top, though. Does not understand what the contributions are.
  4. alonb1977
    • Instantly notes that he is logged in by recognizing that his username is visible in the personal tools section. Examines each icon.
    • Notices the context action ribbon. Correctly grasps what the watch link does and associates it with his watchlist.
    • Instantly goes to the search box. Does not scroll up.
    • Immediately scrolls to the top to use the context action ribbon to go to the talk page. Has NEVER seen the discussions before.
    • Immediately and unconsciously uses the action ribbon to return to the article. He continues to use it to navigate for the rest of the session without hesitation.
    • Instantly goes to his user pull down menu to find contributions. No hesitation.
    • He has some good words for the help documentation.
  5. wldrlb
    • Notes that she is "logged in" by the presence of her name in the user tools section.
    • Scrolls to the top for the search box. Expects it in the upper right; finds it easily enough but thinks it's weird. However, states later "Now that I know the search is here, I like it."
    • Scrolls to the top of the page and easily finds the Discussion link in the action ribbon.
    • Immediately goes to the "Article" link in the context ribbon to return to "Autumn"
    • Quickly and easily goes to her pull down menu in the user tools area to find her contributions.

Takeaways[edit | edit source]

  • All testers completed all tasks.
  • Most users quickly pointed out that they knew they were "logged in" because of their username appearing in the corner and noted that they have a set of personal or profile tools there. More than one tester referred to this area as "their profile". No users had difficulty finding their contributions because of this.
  • With one exception, all users found the context action ribbon quickly. The one who did not later was observed using it with proficiency.
  • Many users unconsciously navigated with the context action ribbon afterwards.
  • The search box remains mostly discoverable. Several testers unconsciously used it in the sticky format without scrolling to the top.
  • No one used the table of contents in the header.

Harness Four: Winter: Only Header Actions[edit | edit source]

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

Notes[edit | edit source]

For this test, the page context action ribbon (the links under the title) was removed. The only pointers to discussion/history/etc. are within the sticky header icons. These icons are always present. Further, the personal tools menu always remains at it's fully uncollapsed state.

The tasks were modified to avoid ever calling out the existence of the icons in the menu (since once a user was sent there, they would know to go there, spoiling the discoverability of the test).

This test was an expected "train wreck" but needed to be done for completeness' sake.

The test set up, questions, and introduction were the same.

Tasks[edit | edit source]

  1. Please move the Usertesting instruction panel (this panel) to the lower left of your screen so that it does not cover the upper area of your browser.
  2. Navigate to the starting URL (http://unicorn.wmflabs.org/t/851). 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.
  3. Once you've "logged in", take a quick moment to look at this page and talk through what you're seeing.
  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).
  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 your found the discussion, great! Go ahead and go back to the "Autumn" article by clicking the browser back button or using _this link_.
  7. 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.
  8. If you weren't able to find out how to edit the article, that's okay. Go ahead and move on to the next step. If you were able to do so, take a few moments to describe what you see and then click "cancel" to return to the main article.
  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. Take a few moments to scroll around and describe your general impressions of this interface. After that, we're done.

Test Videos[edit | edit source]

  1. andreanicole
    • Quickly finds the search box. Likes it.
    • Takes a very long time to find the header icons. However, she does not distinguish between the article talk icon and her user talk icon, and ends up on her user talk page.
    • User cannot find the article discussion and gives up. However, she later finds the link during a different task. Expresses that it took way too long to find and that having two similar icons is confusing.
    • Does not find the full page edit control (in the header); only for a section.
    • She is unable to complete the contributions test because, contrary to instructions, she is doing the test with Internet Explorer. IE has a bug where the pull down menus are not working correctly.
    • She suffered a great deal from icon confusion and let us all know about it.
  2. pedagogue
    • Tester discovers page action icons while exploring the interface. Takes a moment to find the search box.
    • Quickly finds the discussion link now that he's been here, but points out the only reason he found it is because he was looking for the search bar.
    • Quickly finds the edit icon now that he knows where to look.
    • Has difficulty finding the user drop down menu; ends up on his user page while looking for his contributions. Does not find them.
    • Has icon confusion and cannot distinguish between his watchlist and the "watch this page" action.
    • Eventually finds contributions in the pull down.
  3. mflnamore
    • Instantly finds the search box.
    • Tries to find "discussion" using CTRL-F. Eventually finds the talk page but only through a link in a page template.
    • Takes a while to find the edit icon in the header. Relies heavily on the tooltips.
    • Goes to his user page to find contributions. Does not actually succeed; assumes that text on the user page is his contributions.
  4. jefflou
    • User cannot find the search box and gives up, using the link. The link actually opens a new instance of the site in a differnt browser (Opera).
    • Looks for the discussion at the bottom of the page before eventually finding the icon in the header.
    • Correctly finds the edit icon, now that he's been exposed to the header icons.
    • No trouble with the cancel button.
    • Interestingly, he finds the article actions pull down, but does not associate the same symbol (v) next to his own username with a pull down at first.
    • He finds the contributions link but runs into an Opera bug.
    • He wants labels on the icons.
  5. blazed75
    • This tester is a fast talker.
    • Instantly finds the search box and notes that it has changed. Really likes the changes.
    • Cannot find the discussion and moves on.
    • Ends up in the editor, but from a section edit link. Likes the editor over all.
    • Correctly grasps that their contributions will be associated with their account. Did not know that you can create an account.

Takeaways[edit | edit source]

  • As usual, the search box is fairly easy to find and is somewhat of a hit.
  • Most users encountered signficant icon confusion. In some cases, the confusion was enough to prevent them from accomplishing a task. In other cases, the confusion will obviously be problematic as cental editing themes are confused.
  • The discoverability of the user tools section, when the username is present, is very high and remains so.
  • The discoverability of the page action icons is almost non-existent. Several users expressed a desire for action labels. Many users failed to accomplish tasks that required these icons, or assumed they had achieved success when they did not. It is my belief that at least two testers assumed that the page action icons were just parts of their personal tools, and never looked there for page actions.
  • No one has ever used the in-header Table of Contents.

Harness: Vector[edit | edit source]

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

Known Issues[edit | edit source]

Current[edit | edit source]

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

Fixed/Addressed[edit | edit source]

In Winter 0.4[edit | edit source]

  • 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!)

Changelog[edit | edit source]

Version 0.4, February 07, 2014[edit | edit source]

New Features[edit | edit source]

  • 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[edit | edit source]

  • 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 <a> 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[edit | edit source]

  • 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[edit | edit source]

New Changes[edit | edit source]

  • 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[edit | edit source]

  • 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