New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve range slider design #1523

Closed
melchoyce opened this Issue Jun 27, 2017 · 15 comments

Comments

Projects
None yet
10 participants
@melchoyce

melchoyce commented Jun 27, 2017

Chatted a little bit with @jasmussen earlier today about the range slider currently in the Gallery block. It's currently using browser defaults. We discussed introducing a custom design to help improve the overall clarity of the column feature. Here's a bunch of ideas:

cc @afercia to make sure whatever we design and build is accessible :)

@melchoyce melchoyce added the Design label Jun 27, 2017

@jwold

This comment has been minimized.

jwold commented Jun 27, 2017

Nice work! Definitely some great improvements here!

Here is my completely scientific feedback on each ;)

feedback

@brentjett

This comment has been minimized.

brentjett commented Jun 27, 2017

Beautiful sliders! Another thought might be to not display the slider until the user focuses into the value field. This could be helpful when the value needs more description text or a unit value displayed beside it.

screen shot 2017-06-27 at 6 01 15 pm

@afercia

This comment has been minimized.

Contributor

afercia commented Jun 28, 2017

Thanks @melchoyce !
Keeping it native (with some CSS improvements) would be the best option for a11y. To maximize interoperability it could be interesting to explore making the blocks-range-control__hint a styled input field, so users can also directly type the number there.
Modern screen readers work pretty well with native range inputs, not sure about speech recognition software /cc @grahamarmfield

About styling, please don't forget it needs a focus style 🙂 it could be the platform native one (meaning: don't use outline: 0) or a custom one. Screenshot taken on windows Firefox + NVDA

screenshot 115

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Jun 28, 2017

Really love the work ongoing here. From everyone. Thanks Mel, Joshua, Brent and Andrea. 🌟🌟🌟🌟🌟 work.

@grahamarmfield

This comment has been minimized.

grahamarmfield commented Jun 28, 2017

@afercia

This comment has been minimized.

Contributor

afercia commented Jun 28, 2017

In what situations is the slider used?

Just add an image gallery in the post and the right sidebar will show the range input to set the number of columns:

screen shot 2017-06-28 at 10 42 31

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Jun 28, 2017

Though Mel's slider looks great, would Brent's suggestion help address things in case the slider itself still isn't accessible? #1523 (comment)

@afercia

This comment has been minimized.

Contributor

afercia commented Jun 28, 2017

I'd display both at the same time: range and input field: no surprises and maybe also easier?

jasmussen added a commit that referenced this issue Jun 28, 2017

Polish inspector controls generally.
This is pending more improvements happening separately in #1440 and #1523.
@melchoyce

This comment has been minimized.

melchoyce commented Jun 28, 2017

Questions about focus: should there be a focus on the whole element, as well as on the toggle? Or could we just add a focus to the toggle itself, if that's possible?

@afercia

This comment has been minimized.

Contributor

afercia commented Jun 28, 2017

@melchoyce I think users just need to clearly see that something has focus and so that it's actionable. Whether it's the whole "track" or the "thumb" (or whatever it's called :) ) could work.

@StaggerLeee

This comment has been minimized.

StaggerLeee commented Jun 28, 2017

Edit Media Modal does not reflect number of columns, It is allways on default 3.

jasmussen added a commit that referenced this issue Jun 29, 2017

Polish inspector controls generally.
This is pending more improvements happening separately in #1440 and #1523.

mtias added a commit that referenced this issue Jun 29, 2017

Add gallery crop option in Inspector (#1545)
* Crop gallery images by default

This is a work in progress. Pushing so as to test in IE.

* Polish inspector controls generally.

This is pending more improvements happening separately in #1440 and #1523.

* Make the crop actually work.

* Enable crop by default. Props @mtias.

* Move to is-cropped classname.

* Fix for IE11.

* Revert back to object-fit.
@melchoyce

This comment has been minimized.

melchoyce commented Jun 29, 2017

Do we feel okay moving forward with this for now, and enhancing as necessary?

@mtias

This comment has been minimized.

Contributor

mtias commented Jun 29, 2017

Yes, that sounds good.

@folletto

This comment has been minimized.

folletto commented Jul 3, 2017

Do we feel okay moving forward with this for now, and enhancing as necessary?

That is exactly the one I would have preferred from the various mocks for clarity and ability to type. 👍

@jwold

This comment has been minimized.

jwold commented Jul 3, 2017

Do we feel okay moving forward with this for now, and enhancing as necessary?

Yes! Great choice I feel.

jasmussen added a commit that referenced this issue Jul 26, 2017

Style range slider.
This gets us closer, but not fully, to fixing #1523.

jasmussen added a commit that referenced this issue Jul 31, 2017

Style range slider.
This gets us closer, but not fully, to fixing #1523.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment