1

I need some help on placing usercontrols for a financial app I'm working on (It's WPF but it's not relevant)

I've created this wireframe

enter image description here

I thinks this approach is an old style... and I need some help on better representing those informations

Any suggestions?

UPDATE #1

I've a usercontrol that allow the user to insert a new deal (fiancial environment). I wish not to leave all that blank page on the right since I think that as they're placed is a really old style . About the Insert/Clear button I think they're ok as they're placed...

  • 1
    Can you elaborate a bit on this? It's a bit low on details - when you say 'controls' I assume you mean the Insert / Clear buttons? and what is it about them that you don't think is working? – JonW Jul 2 '15 at 13:19
1

In order to make the controls more usable I recommend having as few free entry fields as possible. Go for combo boxes, date/hour pickers, prefill the values where possible, offer partially filled templates and so on. This makes data entry take less time and decreases the mental load by using recognition over recall.

As for the layout, you can spatially group the fields by their meaning. This lowers the chances of making an error and provides a more aesthetically pleasing layout.

0

There is some evidence that suggests labels above their relevant inputs is preferable to labels on the left of the inputs (http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php)

You should also add more space between the fields to make them easier to recognize as individual units. It looks like you may have some grouped fields there so (as @OvidiuBerdila says) you might want to try arranging them into logical groups - A call with the product owner might help you to understand the relationships between the fields and how they are likely to be utilized by the end user and therefore help you to find their natural grouping.

And, if you have the screen space, you may want to try a 2-column layout so that the form uses less vertical space and doesn't feel so crushed

0

If the app is a web app, I suggest you look at some css framework (bootstrap). Or even better a Material style, Google Polymer or Materialize.

As far the placement goes, all the controls should go in the middle of the page with equal white space on both sides.

Programming part:

Put you form within a container.
.container { width: 70%; margin-left: auto; margin-right: auto; }

<section class="container"><form> ... </form></section>

You can further enhance it if you want a sleek looking form, with .container { width: 40%;}

Labels should go above the input fields and any error or status message should go below the input fields. This way you will have a decent looking form. Further enhancements can be done keeping the UX in mind. But I will leave it to you.

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.