I have pre-filled available displayed in tables data such as:

1   [80.00]   [Input design here: Select whole row (default) or part of part of 80.90]

2   [4.65]    [Input design here: Select whole row (default) or part of part of 4.65]

3   [13.00]   [Input design here: Select whole row (default) or part of part of 13.00]

4   [13.00]   [Input design here: Select whole row (default) or part of part of 13.00]

5   [14.60]   [Input design here: Select whole row (default) or part of part of 14.60]

(...up to tens of rows)

              [Auto-sum calculation at the end of the rows]

From this row-presented data I wish end user to select whole row (i.e. max) to be used or a custom value such as [30.50] / [80.00] (example).

How would you implement this in UI design? What considerations should I make from the interaction perspective?


How to get user input for partial numerical selection where max is default.

Here's what I am considering (MVP design with existing components):

enter image description here

  • Sorry, but I don't understand your question. People see a list of numbers and should select the row containing the maximum? Do you mean to indicate a two-column table? What exactly is contained in the second column? – virtualnobi Mar 4 at 7:47
  • It's a partial selection of the maximum per row (where by default the selection is max – thevangelist Mar 4 at 7:50
  • So you have a list of numbers, and for each number the user has to decide on a number smaller-or-equal to it? – virtualnobi Mar 4 at 8:14
  • Yes, that is the case. – thevangelist Mar 4 at 8:15

I assume that you will show all available information to make this decision "somewhere near" (in a table, in columns prior to the number column), and concentrate on the number field.

  • The maximum changes, so it must be displayed all the time. From your question, the minimum seems to be 0 for all cases - if that's not the case, display the minimum as well.

  • From the number range given and the required precision (two digits after decimal), I conclude a graphical display and interaction (e.g., a slider) is not appropriate and would stick to a regular number input field, as you already show.

  • As to the sequence of number input and maximum display, I'm not decided: You could argue that the max should be first, as the user needs to read it before she can make the decision. You could also argue that the two numbers should be in regular (ascending) sequence, which would put the maximum after the input field.

  • Prepopulate the field with the most frequent value. You already say you use the maximum - but consider whether this really is the most frequently used number. Getting this right will save your users work.

  • Make it as keyboard-usable as you can. I.e, ENTER, TAB and SHIFT-TAB, arrows, for moving between fields.

  • I think I would restrict input to valid numbers (i.e., no letters or special chars accepted into the field).

  • Add immediate validation, i.e., visualize an error in the field when the cursor leaves the field. Depending on how familiar the users are with the task and validations, you should add an explanation of what's wrong.

  • Add some instrumentation to the program to track the erroneous inputs (together with their final correct value). Explore the error cases to find frequent errors and try to avoid them.

Good luck, and happy users!

| improve this answer | |
  • Thanks! You made correct assumptions. This is actually where I wish to focus the most: You could argue that.. In my current design the columns are "Max", "Selected areas", "Select row to be included". Max values are always read-only displayed fields. Selected areas are by default 0.00 and Disabled fields. Once the user clicks on a row, the "Selected areas", row will turn into a text-editable field, and the default-populated value is the max (maybe add some slight animation here). User can then edit the value or keep it the same as max. Total of selected is at bottom – thevangelist Mar 4 at 9:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.