+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.orgwrote:
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.orgwrote:
I’ve made some fairly significant changes to the StaticHeader/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 solidborder 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 (setbackground 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