search

wet-boew / GCWeb

Canada.ca theme - A reference implementation of the Canada.ca Content and Information Architecture Specification, the Canada.ca Content Style Guide and the Canada.ca Design System
https://wet-boew.github.io/GCWeb/
Other
94 stars 130 forks source link

Design intent for next previous buttons in mobile view? #970

Closed neoinsight closed 9 years ago

neoinsight commented 9 years ago

In the mobile view of the Advanced Service Initiation template, the Next and Previous buttons end up odd-looking - not in the same row, as in image below. Is that the design intent? If not, perhaps the size could be reduced a bit so they fit on the same line in mobile view. If so, close this issue I guess.

previous next

shawnthompson commented 9 years ago

This was done to match what gov.uk did with their buttons in mobile. I can share the link tomorrow when I get to work.

pcwsmith commented 9 years ago

The value of these over the standard prev/next is that they include the snippet, giving a hint as to what is at the other end of the link.

But I don't think the intent was for them to stagger them like that in small screen views, as it would not align (pun intended!) with user expectations for this pattern.

So, does adding the hint give enough value to offset the cost of misalignment?

Related: we seem to have a couple of different patterns going on for prev/next, wondering if we need to look at rationalizing them...

thomasgohard commented 9 years ago

You can make them align by limiting their width. When the hint text exceeds the width it would simply wrap.

neoinsight commented 9 years ago

@thomasgohard Thanks - maybe we could build that into the template?

@pcwsmith I'm actually creating an inverted version of the Advanced Service Initiation page with Next Previous at the top (and yes, messing with Next and Previous by removing the Next and Previous labels for brevity, just using the hint and the glypicon). The block with all of the sequences moves to the bottom of the page. The intent is to create a Mobile First design for content pages that have a sequence and are mobile hotspots - they get as much mobile use as desktop or more. So this unaligned Next Previous is messing up the intent of the design, which is to squish things up to the top instead of pushing them down. Limiting their width will help.

neoinsight commented 9 years ago

@pcwsmith - the hint is valuable in many situations but I would suggest that it should not be required, since it takes up so much space on mobile. Would also like to recommend that the limited width be built into the template, as per @thomasgohard recommendation.

pcwsmith commented 9 years ago

All good!

hsrudnicki commented 9 years ago

https://github.com/wet-boew/GCWeb/issues/958 - the both issues refers to styling practices

hsrudnicki commented 9 years ago

@neoinsight @shawnthompson @pcwsmith @thomasgohard : are you ready to close the isssue(s)?

thomasgohard commented 9 years ago

Not yet. The fix still hasn't been implemented.

pcwsmith commented 9 years ago

As discussed yesterday with @thomasgohard @lucas-hay @LaurentGoderre @nrustand92 @neoinsight @dk-tbs, we will adjust the Advanced service initiation template to simply use WET standard prev/next buttons, given recent usability results. The was some evidence that the current design of these may look too ad-like.

Proposed timeline: v4.0.17?

zachfalsetto commented 9 years ago

1006 fixes this

neoinsight commented 9 years ago

@pcwsmith, @thomasgohard @dk-tbs #997 added a horizontal rule to try and make it clearer that the Next button is the bottom of the form. It isn't working as well as we hoped – mobile participant yesterday paused, looked at features for a long time, finally decided they weren’t relevant and clicked Next (not a ‘Don’t make me think’ moment). This also happened last round for one of the participants.

All those features just below the form are just as distracting now that they look real as they were when they were black and white boxes. Need a better solution to signal the bottom of the form content.

https://www.youtube.com/watch?v=xx0-LJTsCNk

neoinsight commented 9 years ago

Closing this issue as the Next/Previous buttons have been changed in #1006 . Still a problem with Features below the buttons, but will open that as a separate issue later.