Posted by & filed under Forms.

Story Background

We currently do not provide any guidance on how to enter numeric data on forms. There is a Bootstrap Touchspin component in Widgets library for numeric data entry but no guidance on how this should be used.

There are four ways I founded to entering numeric data.

  1. Bootstrap Touchspin (stacked):   Data Input + Number Control
  2. Bootstrap Touchspin:  Data Input + Number Control
  3. Bootstrap Slider:  Number Control
  4. Selection: Number Control

(ps: The experience of input box entering data is included to A & B )

In this issue, I decided to do a small usability testing about

What is your preferred control for entering numeric data?

 

How did I test ?

Test A. Numeric Data Entry

Test link: http://file.rdu.redhat.com/tzhu/Patternfly-demo/tests/form2.html

Testing environment:Web

This test tested 30 participants from 5 departments of Red Hat.

 

Section 1- Observe the operation of users

  1. Invite participants to input the four test forms naturally without telling them too much test detail (To reduce the influence of user operation behavior). Observe the operation of the user behavior and make the records.

Testing Analysis

  1. The participants include 16 male and 14 female.
  2. 66.7% (20) participants use “Tab” button to switch the form field. 33.3% participants use cursor to select the field they need to input. There are 8 participants use mouse and 2 participants user touchpad to control the cursor.

Most participants like use the “Tab” button to switch the form field. They like input the information without too much interrupted.

 

       2.Observe the operation how the users use the BootStrap Touchspin.

Testing Analysis

  1. 96.7% participants enter text directly in the field of Working Years. Just 1 participant use the control buttons on the right.
  2. 86.7% participants enter text directly in the field of Working Years.

Most participants like to enter text in BootStrap Touchspin directly .

4 participants said they didn’t see the control buttons of BootStrap Touchspin (stacked) on the right.

 

Section 2 – Questions to users

  1. After user finished all the forms, asked user the question “What is your preferred control for entering numeric data? Please sorting for them ”

  1. Both test1 (BootStrap Touchspin (stacked) ) and Test4 (selection) get 37.5% votes. Users have a lot of user experience about this two patterns.
  2. During the test1, 2 users try to enter the number not belong to integers like 3.7 \ 1.5… The BootStrap Touchspin (stacked) adjust the number to integer directly. It takes some confuse to user.
  3. Some user said they don’t like the drop down selection when the options is too long especially appears ScrollBar in the selection box.

Both BootStrap Touchspin (stacked) and drop down selection are good choices to design form data entering. They are very familiar with users and don’t take many problems to them. If data greater than ten, we would better choose BootStrap Touchspin (stacked). If less, both patterns are make sense. Drop down selection is more efficient and less mistakes.

 

When will they use the control buttons?

The majority of users said they rarely used control button of BootStrap Touchspin (stacked).

There is a very interesting thing from participants. If the number is certain,such as my years old / my pets number, they would like entering the number directly. If the number is not certain,like he is shopping on website but he is not sure how many potatoes he would buy, he would like the control button to control the number.

  1. In this test, Bootstrap Slider is the least popular. 19 participants don’t like this interaction.

    Reasons:

  1. The users can not control it well;
  2. Some users don’t know how to use it;
  3. After the selection, the slider do not show the number clearly;
  4. Some user like use keyboard think it is very hard to control it with keyboard.

 

  1. Compare BootStrap Touchspin (stacked) and BootStrap Touchspin, Which one is your preferred control.

  • 66.7% (20) participants choose BootStrap Touchspin (stacked).

 

     Reasons:

  1. More than 5 participants said they like to use “tab” button to the input box and enter number directly; BootStrap Touchspin (stacked) just need one step, BootStrap Touchspin needs two steps.
  2. 4 users thought BootStrap Touchspin can not input the number directly, just use “+” and “-” button to control the button, so they didn’t like it.
  3. Many users with the use ability “tab” to switch field don’t know tab two times can go to the input box. When they filed use “tab” to input box, then they user cursor to reselect the box. This experience make them not feels very well.

4.They are familiar with this component.

  1. It is very tired to hover the mouse from left to right.  BootStrap Touchspin (stacked) is easier to control number.
  2.   33.3% (10) participants choose BootStrap Touchspin.

Reasons:

  1. They thought it is very hard to click the number control button of BootStrap Touchspin (stacked) because the control buttons are small. That takes them a lot of misclick problems.

 

  1. Compare the two pages, Which one is your prefer?

Wide one

Narrow one

 

94.7% (29) participants like the narrow one, even hope it can be more narrow. The input information is short, the wide one is too wide to them.

1 participant think the wide one looks more balance in the page.

 

Test B. Button within form

Test link: http://file.rdu.redhat.com/tzhu/Patternfly-demo/tests/form-input.html

 

  1. 73.3% (22) participants like example 2.

Reasons:

1.They looks example 2 is comfortable in visual ;

2.Two participants have the confusion the button is used to copy all the information or just the link. Example 2 is much more clear to him.

  1. 23.3% (7) participants like example 1.

Reasons:

  1. Text field and the button are seen as separate elements. The copy button is more clear to him with the clicking motivation.

2. The button in example 2 not look like a separate function button. Similar with a drop down button.

 

Guidance

  1. The Bootstrap touchspin with stacked buttons seems like the preferred method for entering numeric data on a form, primarily because it is easier to tab into the field using the keyboard, which is the preferred data entry method. However the standard Bootstrap Touchspin might be better for situations where target size is a concern, like mobile.
  2. Using a drop-down seems like a good approach when there are a small number of options.
  3. Using narrower field widths for numeric data entry is preferred.
  4. Looks like participants preferred to have buttons within forms directly associated with the input field (no gutter).

 

More detail test information please check https://docs.google.com/document/d/1kk9TIGW2sow1LZ5CX-zi1huqfdCdANOw2dBxld-JmeI/edit#

6 Responses to “Entering Numeric Data on Forms – Investigation”

  1. Suzanne Hillman

    Hi! Thanks for posting this summary of your research.

    It took me a bit to figure out what ‘stacked’ meant, so I’m glad you did define it at the end.

    I’m curious – I saw that you had people from Red Hat in your test. I cannot see your detailed test information, so maybe it’s in there: did you have variation in how experienced your participants were? I have a strong suspicion that using keyboard navigation (which I also do!) is a higher skill level action. At the same time, of course, keyboard controls support accessibility better. So perhaps it matters less than I think.

    I did like that you pointed out that the non-stacked buttons makes more sense for a smaller target size like mobile phones. Did you do any testing with anyone on phones or tablets, or were all participants on a computer? I’m curious as to if other options are more popular on a smaller screen size.

    I think that sliders are rarely the preferred choice of UI, in part because of the difficulty in selecting things precisely. The Nielsen Group (https://www.nngroup.com/articles/gui-slider-controls/) says that they are better for approximate, rather than precise, values, but to avoid them where possible.

    Reply
    • Hi Suzanne, Thank you for your feedback~
      In this testing, I want to get the information about Whether participants use the increment buttons at all when entering numeric data. Or would they prefer to just enter text. It might be good to know under what circumstances the buttons are useful and do they add value in all cases.

      The first question is about keyboard navigation. Whether he like use keyboard or cursor, it is not very important in this test. The thing we need to know is how they use these patterns more. enter text or button control? His use habits from the sideways might tell us why he like that way.

      The second question is about the test on phone. Sorry, This test is focus on Web design, I didn’t do it on mobile. I think we need one other test on mobile, we will get some different results.

      The third question is about slider. It is a common pattern in our daily life which is better for approximate rather than precise , like we control the music, video, screen brightness. But when we need some precise data such as age, years of working. That is not a very good experience to them. Sorry takes some confusions to you.

      Thank you~

      Reply
  2. Hi Tao,
    Great study here and enjoy reviewing the findings. Useful for other implementations is the button and gutter, this is useful to know. The Spin “Stacked” buttons have been around for a long time, but if as you mention, we are designing with mobile in mind, these would be difficult to used, in a mobile environment, as they are a small target. I like the + and – buttons, but having them placed so far apart is curious and requires traversing the screen and discovering the components, which feel disparate to me. This was a bootstrap component?… If so then the idea of the test was not to try to change these components at all? I was curious about moving the +/- to the right, placed next to one another. Not sure if this was not the goal, and or was already tried?… I guess the stacked spinner, also addresses more than just numbers, so it’s more universal too. Not sure if you were looking for numeric specific solutions or that plus a widget that would address a wider data type?… Great exploration, thanks!

    Reply
    • Sorry, Monica. I just saw your comments. The idea moving the +/- to the right, placed next to one another is great I like it, but I have some worried about the two buttons both on the right side whether the pattern will looks out of balance in visual.
      That’s all the solutions I found in the blog, welcome any other numeric specific solutions. We could add good user experience pattern to PatternFly.

      Reply

Leave a Reply

(will not be published)