3

I'm working on a desktop-based app, where there is quite a large number of inputs the user needs to enter. I'm struggling to present the data to the user in such a way that looks good, whilst still giving the impression to the user that they are supposed to enter their own values.

I've included a picture of what I've got so far. I think the two main problems with it are:

  1. It's ugly.
  2. It's not immediately clear that the user should enter values.

If this isn't a good way to enter data, I'd be grateful if someone could suggest an alternative method of user input. Data input table

Improve this question
6
  • is this a native touch screen application or a desktop based application?
    – Dave Haigh
    Sep 9, 2015 at 15:36
  • It's a desktop based application - I'll edit the question to reflect this.
    – scipiones
    Sep 9, 2015 at 15:38
  • can the user edit the total figure?
    – Dave Haigh
    Sep 9, 2015 at 15:39
  • @Dave No. It should be formatted differently I guess - I was aiming for using a 'box with borders' to indicate a user input.
    – scipiones
    Sep 9, 2015 at 15:44
  • Adding directions (or a help block) for the user would be infinitely helpful until you can establish an editable pattern for your UI that they will recognize. As far as what pattern to select, maybe a dotted bottom border to indicate click to edit? Changing the cursor on mouseover would also help to convey that it's clickable, even if the user is unsure that it's editable at first.
    – Ashley Richards
    Sep 9, 2015 at 15:50

3 Answers 3

Reset to default
8

Use standard controls to begin with before making customisations.

Platforms/operating systems (WPF (Windows Desktop), Apple OS X, Apple iOS, Android, Web browser, etc) all have slight variations in how they render an input box.

If you stick to the standard control for whichever platform or OS you are working in then that should start to eradicate the problem of a user recognising a control as an input box.

Mockup (if a wpf application)

I'm not saying everything should look the same, but you need to start with the basic layout and controls before customisations are made. I have stripped back the styling on your input boxes and rows below to make it more usable. You could take this and build on it to add your creative styling but as soon you see that your styles are being applied at the cost of usability then you should take a step back and approach it differently.

enter image description here

Improve this answer
1
  • Agree totally. Take out all the colors to begin your wireframes.
    – Sarah Leigh
    Sep 9, 2015 at 16:12
2

First, take out all the colors - Wireframe first in black and white (and perhaps even with greyscale at the most).

Next - start to look up the best way to do forms. With that many labels, I would be very careful to make sure it was easy for my users to enter the correct information into each field. When the labels are that far from the input boxes, it can be hard to see what goes with what. I made the labels right aligned and spaced the rows a bit more apart.

enter image description here

Another great idea is the infield text box like so here: http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/

As long as you have a cursor blinking in an input box, the user should be able to figure out that they can type in it.

Good luck!

Improve this answer
3
  • 1
    if there is a blinking cursor then it means they have already recognised it as an input box and have clicked into it
    – Dave Haigh
    Sep 9, 2015 at 16:35
  • also, when scanning a list of data I prefer left aligned text. It's a lot a lot easier to scan and read with ragged right edges than left. But you make a good point with association, in this case I think the column simply needs to be thinner.
    – Dave Haigh
    Sep 9, 2015 at 16:36
  • The blinking cursor can be made automatically by devs - no need to click. And here's an old question as to why right aligned in better: ux.stackexchange.com/questions/8873/… basically people do not scan form labels.
    – Sarah Leigh
    Sep 9, 2015 at 16:39
2

Try to remember that a good UI is not a pretty UI. That's not to say a good UI can't be pretty, but a pretty UI does not make a UI good.

When having to enter data like that, use plan, easy to navigate controls. Pay special attention to Tab Indexes. You said Desktop, if it's .NET use a data grid. Mark the read only columns read only.

A easy to use, ugly, interface will beat out a pretty but complicated interface every single time (except sales demos).

Next start modifying the data grid. Add gray bar, or highlighting on missing values. But Keep it dead simple.

The idea is to first make data entry fast and efficient, then add some lipstick.

Improve this answer
1
  • Remember Excel is Ugly, but it's damn popular for this kind of data entry.
    – coteyr
    Sep 9, 2015 at 20:00

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.