+1 to everybody's feedback on the article-specific actions (and user testing – yay to data!)

This is feeling a bit too top-heavy to me. When you first load the page, you're presented with three different drop-down action menus, sidebar navigation, and the article ToC – but when you scroll down, you've only got user stuff + edit on hover. Have you explored breaking these elements apart and utilizing the space lower down in the page for progressive disclosure of less important navigation elements (maybe a quick ToC-like "navigate-to-section-Foo" affordance?), or repeating important actions from the top menus (history, watch) again? Also, to echo Brion, the sidebar feels very empty and gray when you're down in the depths of the article; it would be nice if it didn't get in the way of reading and preserved all the useful links and tools no matter where you were on the page...

Finally, call me someone who's drunk the Koolaid ;) but the article text feels really, really wide. Upon inspection, it looks like you've made the sidebar a bit narrower, which in turns makes the article text flow even wider than it currently is on talk pages. This makes it hard to read/scan the short 2-line long subsections and causes the open personal bar & edit menus to obscure article content. I know it's not really part of what you're try demonstrate with this prototype, but enforcing tighter margins would give the righthand stuff a bit more room to breathe and shine :)


On Tue, Jan 14, 2014 at 10:25 AM, Brion Vibber <bvibber@wikimedia.org> wrote:
Looks pretty cool! A couple quick notes:

The section edit + dropdown menu only appear on hover; this feels very odd on a tablet as you have to actively tap to make it appear (on iPad) or it may not work at all (on Windows 8.1). I like the idea of 'edit' being in the fixed header that's consistently visible instead...

On small screens like phones I've been seriously considering suggesting we show a fixed section header -- this sample article has relatively short sections but many are ....lllloooonnnngggg.... especially in really big articles. In a small window or on a smaller-screen tablet, those are going to easily spill larger than a screen height and it may feel odd to scroll up to find the current section-edit button.

Once you scroll past the menu items, the sidebar seems to be wasted space especially on a small window. Any plans to have it collapse if the window/screen size is smaller? Snapping a browser window to half the screen is *really easy* to do on current Windows and Linux versions, and seems like something I'd expect people doing research to do.

-- brion



On Mon, Jan 13, 2014 at 8:46 PM, Brandon Harris <bharris@wikimedia.org> wrote:

        I’ve made some fairly significant changes to the Static Header/Nav Mod prototype.  You can play with it here:

                http://unicorn.wmflabs.org/navmod/

        Changes below. Note that most icons are placeholders.

        === 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 link buttons 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


---
Brandon Harris, Senior Designer, Wikimedia Foundation

Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate


_______________________________________________
Design mailing list
Design@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design


_______________________________________________
Design mailing list
Design@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design




--
Maryana Pinchuk
Product Manager, Wikimedia Foundation
wikimediafoundation.org