6

I'm working on a website and the client is asking for raised-looking textboxes to match the look of the rest of the site. However, this makes the textboxes look like buttons that could potentially confuse new users. Here's an example from the signup modal.

The signup popup

In my experience, textboxes should have either a sunken look, or just a border or different background color in the case of flat design. This site is mostly-flat, where only modals, buttons, and textboxes look raised using a bottom-shadow. My gut says this is confusing and that textboxes should be flat.

I can't think of a single site that uses raised textboxes. But that's not a strong enough argument. Is there any supporting evidence that this UI is confusing? Or am I looking to much into this?

| improve this question | |
  • It does sound confusing for the reasons you noted. Do you have a screenshot/mockup of what it would look like in context? – Matt Obee Jul 19 '13 at 15:25
  • @MattObee Added. – Joe Jul 19 '13 at 15:41
  • 2
    Given that screenshot I'd eventually figure out Name is a text field, but right now it looks like a button that becomes a text field. The hinting text is floating above the button, which doesn't help things, and there is no indication that it's for typing: as drawn, it doesn't afford typing. – Alex Feinman Jul 19 '13 at 17:40
  • It's pretty late now and while I looked at the image, I wondered where the text boxes were - all I saw were buttons. Perhaps the buttons could change into text fields when you click on them!? Also, the contrast of the two bottom controls isn't high enough. – Danny Varod Oct 7 '13 at 2:15
8

You can use Gestalt principles to argue the textboxes can be confused for the buttons.

Similarity Principle: "elements tend to be integrated into groups if they are similar to each other." The text boxes are the same size as the buttons, the drop shadow is in the same location and is the same size, there are icons on the left, and there is text inside each object.

Proximity Principle: "elements tend to be perceived as aggregated into groups if they are near each other." In this case the text boxes are very close to the buttons.

Past Experience Principle: "elements tend to be grouped together if they were together often in the past experience of the observer." This is evident with this statement:

I can't think of a single site that uses raised textboxes.

http://www.scholarpedia.org/article/Gestalt_principles

| improve this answer | |
  • Can anybody else think of a website or application that uses raised textboxes? This may be my strongest argument. It'd be stronger if other experts chimed saying they haven't either. – Joe Aug 3 '13 at 15:36
1

As you said, your website uses the raised look for modals, buttons and textboxes. You might have darker a background for modals to distinguish them. But, are you distinguishing the buttons from the textboxes in any other way, like maybe visually laid out differently or by colors? Well, if there isn't then there's every chance that the users are going to be confused between the buttons and the textboxes and try clicking the textboxes or miss clicking some buttons.

| improve this answer | |
  • Even with a different color, they still look "raised" and therefore, like buttons instead of textboxes. In both cases I agree that the confusion may lead to missed button clicks since the user may mistake them for textboxes. – Joe Aug 3 '13 at 15:34
1

The reason that textbox looks like button in your case is because of the shadow of the button. If you move the shadow to the top of the textbox instead of at the bottom, it'd look sunken and still conform with the style of the other elements.

| improve this answer | |

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.