16

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?

Improve this question
4
  • Can you provide a screenshot? – Mervin Mar 27 '12 at 19:29
  • If you want to edit your post or add more information, just click the edit link under your question. – Ben Brocka Mar 27 '12 at 21:53
  • Place a search icon in the field area, annd when the user clicks on the search icon it should focus the text-field and change the border color. Make the search icon a magnifying glass. – meWantToLearn Mar 27 '12 at 22:59
  • It does not at all concern to the search icon, 'cause it's not a search box it just confuse the user more. – Alireza Apr 3 '12 at 1:35
16

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.

Improve this answer
4

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

The "New Project" form in Basecamp

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

The top corner of the project screen in Basecamp

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

The same interface made interactive by clicking on it

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.
Improve this answer
2
  • Though, just because they do it doesn't mean it's easy to use. Personally, I'd find these fields to look uneditable and then feel dense when I finally realize that they are. – KOVIKO Apr 15 '12 at 20:15
  • 1
    @Koviko: I would have thought so too, but in use that hasn't been a problem at all for anyone in our company (across many skill groups). The main indicator of the fields' affordance to accept text is my second bullet point: by highlighting the text, you get a clear visual indication that it's editable. – Kit Grose Apr 15 '12 at 23:25
1

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.

Improve this answer
0

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.

Improve this answer
0

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.

Improve this answer
2
  • 3
    You still aren't solving the problem of affordance: a user doesn't know where the input field is until it's focused. – dnbrv Mar 28 '12 at 1:09
  • I think doing it in the reverse manner might work... That is, look like normal until click, then switch to minimalist mode while the user is typing. – aslum Apr 3 '12 at 18:54
0

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.

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.