2

i am currently developing a prototype for a piece of software. One of the most important things is to show the client, how the UI will look like, so I am making real wpf windows with no real data logic behind instead of using wireframes. There are a lot of forms and I am trying very hard on not getting something like this in the end. It went quite good. But then we showed it to the client. They liked it a lot with one exception - they had hard time finding the textbox they had to be filling next. As I said before, there are a lot of forms with a lot of textboxes and other fill-out controls. And user doesn't always start filling out the form from the top.

The previous software they used, used to highlight the focused control with color. Tried that (yellow, blue-ish, even gray), it does not look pretty at all. I have a very sleek, grey-ish design and contrasting colors (i tried blinking too) just don't look good at all.

As it seems, blinking cursor in the focused control isn't enough. Dashed or dotted border doesn't satisfy them either.

Restructuring the forms so that they are filled out from top to bottom is out of the question.

So, my question is: how do you catch users attention on focused control without making your ui look ugly? any ideas?

Improve this question

3 Answers 3

Reset to default
9

You are giving them too many choices.

Give them a clear path and they won't be confused anymore.

For example grey out1, disable or hide2 all the "textboxes" except the first one. When they start typing in it show/enable the second one and so on. They will naturally click (they won't tab obviously) on the only field available to them. Don't make them think.

Offering no alternatives is easier than trying to manipulate the users and doesn't require testing whether it's producing the desired result. So my answer is: Do not give focus to the selected input instead blur the other ones.

1 opacity 2 visibility

Improve this answer
1
  • 1
    Another example of this principle is the classic push/pull conundrum. Owners of shops, restaurants, etc found that when installing a door with a simple flat plate on one side (instead of a handle) then it becomes obvious that the door must be pushed from that side.
    – Steve Wortham
    Commented Jun 13, 2011 at 14:46
4

"Restructuring the forms so that they are filled out from top to bottom is out of the question."

That is a shame because that is the easiest way. You can then highlight a field by a color band across the whole width - the problem with colored divs around a single control is at the corners.

Can you post a screenshot of the gray-ish design? I'd go for a gray-green or gray-blue and slightly rounded corners, but I can't say more definitely until I see what you are modifying.

Improve this answer
1
1

What about changing the colour of the label for the element, and giving in the input a box-shadow? Assuming your client is ok with css3.

Or maybe have all the input fields display in a colour like #ddd, but have the bacground for the element with focus be #fff.

Plain white is good for catching the eye.

Improve this answer

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.