2

I'm sure those concerned with good UX come across such situations all the time, and here's my situation.

We're working on modernising an old, internal business application at work. Here's a section of the UI for it.

old UI

My concern is with the list of Expenditures. In the new web based UI that we're building, should I:

  1. Keep all those entries listed?
  2. Allow the user to only add stuff he/she needs?

If I go with option 1, then filling in is easier, you just tab across the fields, but it means some will be left blank, and some users might feel obliged or pressured to put something in the fields, even if they don't apply to them

If I go with option two, then we'll have something like this:

drop down selection

The plus with this, is that the user will only fill in stuff he/she needs, but the down side is, more clicks are required.

Which is best in terms of UX?

3
  • In your example, the unfilled fields are not blank, they are zero which is the absolutely correct monetary amount of something that does not apply. There is no 'pressure' to supply a value - where did you get that idea from? My major suggestion is to pre-select the most likely "Per:" value - Monthly for Rent would be true in about 99% of cases, saving lots of needless hassle.
    – user67695
    Apr 21, 2017 at 13:39
  • Pre-selecting the most likely value is a good idea - but the correct choice varies from location to location - here in New Zealand, residential rentals are almost universally quoted per week.
    – Bevan
    Apr 22, 2017 at 22:07
  • 1
    The Alan Cooper book About Face has some really useful thinking for this kind of context. He talks about the "posture" of an application. A sovereign application takes over the screen, is designed for users who spend a lot of time using it (think: Outlook, Word, Visual Studio) and should be optimized for power and speed. This is Option #1 from the question. A transient application appears over other things, is designed for users who use it rarely (think: scanners, print dialogs, settings) and should be optimized for clarity and guidance. This is Option #2.
    – Bevan
    Apr 22, 2017 at 22:13

3 Answers 3

0

If space is not an issue and the the items are limited and fixed, then the first option is much more easy to use and also more clear to understand. To address your concerns for optional you may add a checkbox in front of each item. The default value must be unchecked and the amount item disbabled. When the user checks an item then enable the amount item.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

A second solution is to just add some hint on the title i.e.

7. Expenditure (fill only amounts that apply to you)

2
  • @Ciwan when the user clicks on a checkbox automatically move the cursor to the amount field, to save users a mouse click. Apr 21, 2017 at 10:16
  • Unfilled values have zero in them, which is what they should have. Not having the checkbox means that they simply tab out of the amount field when they are done entering it, either with the existing value, or a new value they put in. This requires no thought whatsoever, and no additional clicks either way.
    – user67695
    Apr 21, 2017 at 13:43
2

I'd go for option one because all options are visible from the start.

I agree with you that option two will only require the user to fill out what he/she needs but the options are hidden in a drop down menu. This is more difficult to do because users do not know what all the options are without clicking. Users have to think more often.

Option two looks better, but I'd pick a lower cognitive load over looks in UI any day.

Thinking of some other options here:

Maybe you can put them together in a third option where the user only has to fill out what he/she needs but without the dropdown. How about a 'tool box' where the user can pick the fields he/she needs?

Edit

The user sees a list of items and can activate them from his 'toolbox' if he needs to do so.

You can make required fields active from the start and show other fields as optional based on the user's needs.

enter image description here

--- end of edit ---

Another option could be option two without the dropdown but with auto-suggest based on the first thing users enter. If they don't know what to pick they can use the dropdown as a final way to find what they need.

3
  • can you elaborate on the tool box idea please? How will the picking be happening?
    – J86
    Apr 21, 2017 at 8:52
  • @Ciwan see my edit. :) Apr 21, 2017 at 9:02
  • 2
    thanks @NGAFD, I like the way @DesignerAnalyst has done it, but your point about picking a lower cognitive load over looks in UI was worthy of a solid up-vote :)
    – J86
    Apr 21, 2017 at 9:32
1

Solution also depends on a frequency that the expenditures should get filled in.

For example: If user fills the form very rarely, e.g. once a year, and its result is some important decision (e.g. can I get a loan?), you can consider a wizard with the steps - user can carefully complete the form and focus on couple elements at the time. Steps could reflect logical groups of expenditures

If it's daily - show everything at once and make optimizations for smart defaults

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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