Talk:Mobile design/Ribbon navigation

From the side?

I wonder if the "ribbon" should slide out horizontally. Since it holds functionality related to the page itself I find the connection to the search bar really odd. Knocked this up to make it clear what I mean:

I much prefer the slide down from top, because it quickly runs into spacing issues when sliding out horizontally. The horizontal slide for a small menu is not really a common pattern, unless you're doing a hidden navigation like the one we currently have on the left. Steven Walling (WMF) • talk 21:21, 24 September 2012 (UTC)

Behaviour

Bear in mind that in the current behaviour on clicking the 'ribbon arrow' the search box will push the ribbon down and the finger will then be over the search box. There might be issues with this as the user then might accidently trigger a search with their finger in that same position. If the arrow comes from the right of the screen then I think it is acceptable to leave it in the same position leaving a gap for the search box to slot into.

Also bear in mind that sticky elements and animation from my experience do not mix to the point that certain browsers should not use slide down animations - this might be jarring to a user.

Yep, we haven't gotten sticky navigation to work on Opera Mobile, Firefox Mobile, iOS 4.x, or Android 2.x., so the ribbon disappears from view when a user scrolls. Maryana (WMF) (talk) 22:27, 11 October 2012 (UTC)

Table of contents icon

The icon being used to mean "table of contents" is extremely unclear. (I originally assumed that it was just going to be another menu for things that wouldn't fit in the expanding left-side navigation bar, resulting in much confusion as to where which buttons would be. I only figured it out after seeing the same icon in the current beta leading to a table of contents.) Using an icon virtually indistinguishable from standard "menu" icons is probably inadvisable. Anyway, is there any reason for having a table of contents in the first place? The sections are collapsed, so the ToC wouldn't actually be any smaller than the section headers themselves. I don't see how it could be at all useful. --Yair rand (talk) 21:49, 23 September 2012 (UTC)

Eliminating the TOC is actually a discussion that is being had. I used the icons that were pre-existing; I'm not happy with many of them. There should have been a note indicating that what goes in the Ribbon is still being discussed and is really out of scope for the specific design.--Jorm (WMF) (talk) 21:59, 23 September 2012 (UTC)

Touch target size, lack of labeling

I'm a bit leery of putting so many small touch targets next to each other, and I'm also leery of having all these icons with no labeling. Icons tend to be unclear, and there's no opportunity for mouseover tooltips on touch devices.

It's worth experimenting with, but I think I'd feel more comfortable with something that looks more like the left nav menu: clear labels and plenty of space to tap on. --brion (talk) 17:56, 24 September 2012 (UTC)

Icons without labels are not automatically a bad idea to my understanding (see also: picture superiority effect, and the new Gmail default as an example), but IMO the ideal situation is icons plus labels ala the current left nav design for the beta. +1 to the touch targets issue though. Perhaps making the ribbon longer and spacing them out more? Steven Walling (WMF) • talk 21:10, 24 September 2012 (UTC)

Notes from user testing

We modded this feature a bit (horizontal tab rather than vertical ribbon, so as not to obscure page content) and threw it out to to some users to test. Here's the takeaway:

• All users were prompted to perform a language selector task (find an article in English and then switch to the German language version), and all users' first inclination was to scroll to the bottom of the page. (Two of the three testers found a link to Wiktionary and proceeded to try to find a translation, which additionally confused and disoriented them when trying to return to the article they were reading.)
• After scrolling to the bottom and not finding language selection, users' second inclination was to look in the left navigation menu, which all users seemed to immediately recognize and interpret as the main navigation feature.
• Sticky navigation appears to significantly affect the ability of a user to find and use the ribbon nav. Two of our testers had devices/operating systems that didn't support sticky navigation; as a result, the ribbon disappeared once they began scrolling, and they weren't able to discover it at all in the 20-minute test session.
• The third tester was using iOS 6 and did manage, after some searching, to discover the feature, but he pointed out that once he noticed it, it was very visible (maybe too visible) on all pages. Additionally, the language selection icon confused him – he thought it looked like a "change font" icon.

I think this is a pretty strong case for revisiting how we think about this navigation system and maybe decoupling it from language selection entirely. Maryana (WMF) (talk) 22:45, 11 October 2012 (UTC)

Am I reading this right? The vertical layout was never built or tested?--Jorm (WMF) (talk) 01:43, 12 October 2012 (UTC)