Is it acceptable to make a text field look like a write in line?

Question

My designer would like to implement a text field that drops down on hover against a white background, and only have a bottom border to define the field. Also, the designer would like to see a flashing cursor immediately visible in the text field as the box drops down - and this would indicate to the user that the field is editable. So essentially the field will look like a write in line.

My thought is that there isn't enough visual separation, or indication that the field is editable. especially against the white background. Am I wrong in thinking this, and should I recommend a different design approach to this box?

Answer 1

It's hard to answer the question without seeing more of the design scheme, but I'll give you the guideline anyway.

Your question is about a problem of affordance. Affordance is a visual cue that implies action. For example: a thin slot in a soda machine indicates the place in which the user should insert their coin, and the pull lever in a car's door implies that the user should pull the door to open it. Removing these visual cues can confuse the user regarding the way the instrument should be used.

In web design, we have some grounded conventions for how elements should look like. In case of a text field, the convention is a grey-bordered box with a white background. Removing one of these or more of these elements decreases the field's affordance. I predict that it will be harder for users to recognize it's a text field, and therefore create confusion and frustration. I believe that your designer knows that as well, and for that reason suggested other added cues (the flashing cursor).

But don't take my word for it. Make a quick-and-cheap usability test. Go to 3 people who weren't involved in the design of this website, show them a screenshot of the current design, and ask them to "perform a search". Don't just notice if they recognize the search field or not. Pay attention to how long it takes them, what they're saying while they're looking for it ("where is that god d*** search field?!") and how they react when they finally find it (or not!). If you get the sense that they're struggling, go back to your designer and ask him to make the field a bit more conventional.

---

*An exception would be if this website is trying to convey a message of innovation and "breaking the rules" (e.g. an interactive studio's website). If that's the case, and other elements are also non-conventional on-purpose, then you should stick to the unconventional text field as well.

Answer 2

I can think of at least one popular tool that uses this method of managing form fields—37signals' Basecamp:

The effect is especially interesting when editing the name of something that you're already viewing. For example when in a given project:

You can click on the project's name or description to make it in-line editable:

This allows the field to share the visual design of the final execution which, in some scenarios may help the user choose the precise words they use in the final execution.

Some important considerations, though:

• On the "new project" screen, they're using placeholder text instead of labels, which helps describe that field's intended purpose and make it clear that the field is a place for text
• They highlight the placeholder text so you know that it's editable
• When they don't put any placeholder text in (e.g. with the email fields), they've had to provide a very explicit instruction for what goes in those fields.

Answer 3

You could hide the textarea by default and increase the "search" button's real estate. When the user wants to search and can't find an obvious search field they will most likely click the "search" button, which serves to display the textarea at which point it resumes it's original purpose of submitting the user's query.

Answer 4

A clear focus on the box is needed when the editing mode is on , As you said there should be a some visual separation for the box. Cause the user might leave the page for few seconds or minutes and come back and should be able to easily get back where he left.

This can also be done with your designers style by highlighting the color of the bottom line of the text box and giving little visual difference for the text area.

Answer 5

My suggestion would be to design a better :focus state for the input field. Many designers forget about these useful selectors.

Thus, without focus you can have just a 1px border-bottom.

Once the element has :focus, add a border and maybe even a light box-shadow around the input element.

Answer 6

This theme actually recommended for android based native applications as user already know how text field will look. Few sites uses but its not user friendly for desktop webpages.