7

Do you think there is a difference in perceiving text fields which have round\rectangle corners ?

My goal is to establish a convention that round corners are fields which the user can enter input and rectangle corners are fields for read-only. I know there are other means to achieve that goal, but my question is focused on only these visual elements.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1
  • I associate rounded rectangles with search and square with form fields, but that's just personal experience.
    – kastark
    Commented Dec 6, 2012 at 15:43

5 Answers 5

5

There is a difference in perception between rounded and square corners, but it is not semantic - meaning that it is a design choice and does not carry any explicit meaning. So if you choose to use corner style as something semantic, you are going to confuse a lot of people. Don't do it.

If you need do disable a field or make it uneditable, then use the standard methods for that which work well.


The psychological perception of rounded vs. square corners is dealt with in a question on The psychology of everyday shapes

2

To answer the question, purely in terms of shape alone, I'd connect the rectangle with a textfield (editable or otherwise), and the rounded shape more with an action like a button. Search boxes are indeed often rounded and frequently combine multiple elements - they are like some special case of editable area and action area.

My interpretation is almost perpendicular to your question of whether one shape means editable or not, in that I find neither to be the case and actually observe an alternative meaning instead.

To combine your intended meaning with mine would be very confusing and yours would be likely lost in translation.

However, in a mobile world where the content is the interface and where there should be an increased use of natural user interfaces based on human intuition, I would say that putting a border round read only content is unnecessary and preferably avoided. (I realise that's something of a generalisation.)

Read only content is simply: content.

By asking this question you're almost giving yourself the answer: You're much better off using accepted mechanisms already familiar to others.

1

The convention already exists, disabled="disabled" renders read only input box, also it's semantic HTML. This attribute also changes the colour of of input box background to grey and the text looks a little faded. Similar technique is used to display inactive menu items.

1

As said before, rounded edges are more appealing. According to this article by UXMovement, they are easier on the eyes, and do not pose "sharpiness" danger. Recent psychological research supports this notion, showing negative feelings arise in the brain as a result of seeing sharp edges. If you can afford yourself using only rounded shapes, the better. It will also show better, when people, from users to stakeholders need to judge how successful your design is.

I don't think there is a strong convention separating rounded from cornered text fields. Note that in iOS almost all text fields are half rounded as a standard, so here you have little room to play with (yet another marvel of Apple's design). Also, if most of the time the text field is not editable, then I don't see the reason to keep the text field's frame at all. Just show the content in a simple label.

Implying read-only with shapes is an interesting idea. I would not count on that differentiating dimension alone, as users might take a while to pick it up. If you support it with the conventional markers of read only, as suggested here by others, you might make it easier for the user to determine the read-only attribute with great ease and speed. But that would only happen if the user is regularly and frequently exposed to both groups of controls, or else the convention would not make its way into the user's expectations.

3
  • The situation is more complicated than that, though - squared objects get resolved faster and seem to get more attention, which is appropriate in a web form. There may also be a loss of affordance in rounding UI controls that are usually rectangular. Commented Dec 9, 2012 at 14:15
  • Can you point or refer to the findings that show that? thanks!
    – Dvir Adler
    Commented Dec 10, 2012 at 14:55
  • 1
    Sure - see the chapter on Contour Bias in Universal Principles of Design, specifically "Objects with pointed features, elicited stronger activations in the region of the brain related to associative processing, meaning that although angular objects were less liked they elicited a deeper level of processing than did the contoured objects - they were in effect, more interesting and more thought-provoking to look at" Commented Dec 10, 2012 at 17:13
0

Rounded edges are more natural(~2px), ovals(~30px) are good for landing pages. I wouldn't use ovals as the base shape for text inputs in a data management webapp.

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.