Number Input (mobile enhancement)

carbon-design-system / carbon-contribution

Documentation on how to contribute back to Carbon

https://www.carbondesignsystem.com/contributing/designers

7 stars 4 forks source link

Number Input (mobile enhancement) #3

Closed JordanWSmith15 closed 5 years ago

JordanWSmith15 commented 6 years ago

Hello! We are proposing an alternate to the current Number Input component. The step inputs on the current component are below industry standards for mobile tap targets at 20X10px, making them difficult to interact with on a mobile device: issue

Our proposal is to split the step inputs to opposite sides of the control (down on the left, up on the right) in order to increase the tap target to 40px, the standard height of a Carbon input component. This is a fairly common UI convention for this type of control, available in Bootstrap and may other standard UIs. number input mobile variant We opted to use the Carbon chevron that is used in the current Number Input, rather than + / - symbols, as it appears more cohesive with the rest of the Carbon inputs. We are very open to suggestions for improvement.

Sketch file available here.

Thank you for your consideration, Jordan Smith (JordanWSmith15) smithjor@us.ibm.com

joshblack commented 6 years ago

cc @carbon-design-system/design

joshblack commented 5 years ago

bump @carbon-design-system/design

shixiedesign commented 5 years ago

Hi @JordanWSmith15 Sorry for the extremely late reply. Thanks @joshblack for the reminder. This is definitely an important consideration! Looks like the sketchfile link doesn't work. We might have to tweak this design a bit to make it work for V10 styling. But either way, this is a good catch and we should remove the tiny carets to avoid confusion. Another possible solution could be using mobile platform's native number input drawers? Eg. in iOS:

JordanWSmith15 commented 5 years ago

@shixiedesign No worries! Yes, we should definitely use the native keyboard on mobile! I think the one on the right allows for more flexibility (like decimals, which my product uses a lot for numeric inputs). Also, we should consider a step range when hitting + or - (For instance, if you are entering a temperature, a step of 1 unit, but for voltage, 5 units). In some instances, my product even need a fractional step (.10 per +/- tap), but this may be too specific for the general carbon component.

Here are updates for V10, and a sketch file.

Numeric Spinner.sketch.zip

screen shot 2019-02-15 at 10 48 11 am

shixiedesign commented 5 years ago

@JordanWSmith15 thanks!! This could work. I made a few small tweak to the spec image, and there's now an issue for this fix. We try to use 8px (or it's multiples) for any measurements including spacing, sizing of icon, etc. Your image is accurate, just labeled wrong.

I will still run this design by Mike later on so maybe expect a few more tweaks. I think we gotta think about if the error state really needs an icon here. We have the strong red border as a secondary visual indicator already.

JordanWSmith15 commented 5 years ago

@shixiedesign Sounds good! Agree about the error state icon may not be necessary. Other inputs in V10 all seem to have it, so the main reason I included it was for consistency. There can also be error text below that I did not include in my design.

shixiedesign commented 5 years ago

@JordanWSmith15 Thank you for your contribution! The new mobile variant is merged 🎉