Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 14 down vote favorite
3

I have a form showing properties of an entity in a web app: some of the fields in the form are read-only and some are editable. Within the editable fields, some are required to be filled with a value an some are optional.

How would you mark this distinction?

The obvious answer would be to use an asterisk to mark the required fields, yet it seems problematic to me since the read-only fields are also kind of required - they cannot have an empty value, only the user is not the one doing the editing but the application assigns the value automatically...

I thought about doing the reverse - mark the optional editable fields instead with the text 'optional'...Anyone knows an example of this? Or has a better solution?

share|improve this question

6 Answers

up vote 10 down vote accepted

The best way here is to remove all read-only fields from the form. You have to find some other way to show this info. But if there is no way to remove them, so make sure that they don't look like input field.

For fields with default value you just have to put some value in them; with black input font color. (grey color will confuse them, because a lot of forms use it as a label to field)

For required fields just use asterisk symbol near label.

enter image description here

share|improve this answer
2  
+1 Quite right - read-only values should not look like fields :-) – Roger Attrill Jul 20 '11 at 11:48
+1, and one more for the asterix symbol (which, I guess, is the depiction of a small man with big mustaches and a winged hat) ^_^ – Erik Burigo Jul 20 '11 at 15:15
@Erik Burigo Oh, thanks, just edited the post. – Dmitry Semenov Jul 20 '11 at 15:39
@Dmitry Semenov. No offense intended :), it was just amusing (even I if i usually commit much grosser mistakes with the English language). – Erik Burigo Jul 21 '11 at 6:49
I completely agree - read only fields should look like text only - without any input field. What I was concerned about was that this would not be clear enough to the users in terms of whether they whole mandatory/optional distinction even applies to them (it doesn't). From all the answers here it seems like it should be appropriate to use the regular markings for mandatory (asterisk) and optional. If I come across some relevant results on user testing on this I'll post it...Thanks again! – Olgaarsh Jul 24 '11 at 6:47
up vote 24 down vote

IMO read only fields shouldn't be fields at all. This would look something like that:

enter image description here

share|improve this answer
+1 Quite right - I knew something was wrong with mine - thanks for pointing this out. – Roger Attrill Jul 20 '11 at 11:11
Hey, I was first :) – Dmitry Semenov Jul 20 '11 at 11:41
@Dmitry: No you weren't - we probably wrote it at the same time but I published first :P But I'll give you my upvote for compensation ;) – Phil Jul 20 '11 at 12:22
3  
Yes, the "Read only value" in this example could (and perhaps should) be marked up as <input readonly disabled>. Then style it so it looks different from a field. – Bennett McElwee Jul 20 '11 at 22:47
1  
@Bennett: Exactly. Just because ist doesn't look like an input filed doesn't mean it can't be one :) – Phil Jul 21 '11 at 6:43
show 1 more comment
up vote 7 down vote

I agree with Phil, read only should not be fields. It is considered better practice now to say up front 'All fields are required unless stated otherwise' or similar and clearly mark optional fields. If you don't need to ask something then you really shouldn't ask it.

Once again, I refer to you exhaustive research carried out by Luke Wroblewski http://static.lukew.com/webforms_lukew.pdf (this is a link to a PDF). Here is some related reading by Luke W: Marking Required vs. Optional form fields - Luke Wroblewski

share|improve this answer
2  
+1 for rolling Luke out again! – Roger Attrill Jul 20 '11 at 11:48
I always default to Luke, but this is one recommendation that I was surprised that our users disagreed with. We had a lot of comments during testing asking why we didn't mark required fields with an asterisk. Which was silly on some of our forms as all fields were required. ;) – DA01 Jul 20 '11 at 14:25
I also considered using the 'optional' instead of the asterisk for mandatory, but it's also important to be consistent across different forms in the application: for some forms, the optional was the exception and for other it was half-half..so for the sake of consistency (and familiarity), I went with the asterisk approach. Since these are not sign up but property forms, even of some information is optional it should still be there for users who want to fill it. – Olgaarsh Jul 24 '11 at 6:52
I suggested/added a link through an edit to your post to update the outdated link. – Adriaan Jul 10 '12 at 11:50
up vote 5 down vote

Optional values that are going to be assigned a value by the system could usefully show what that default value is going to be.

Something like the following image comes to mind where the top item is read-only, the middle one is editable and shows the default value (in light grey) should it not get changed by the user, and the bottom one is editable, required, and has no default value. As soon as the middle item gets focus or is edited then the grey default value is replaced by whatever the user enters.

[edit] I changed the top field to not looking like a field at all

enter image description here

share|improve this answer
1  
I previously had the top field as a field with grey background but realised that it shouldn't look like a field at all (I knew something was wrong with it... :-) – Roger Attrill Jul 20 '11 at 11:07
1  
Is grey text a good choice for a default value? Why not just auto-fill the field, but let users click and change the data? When I've seen grey text in fields before, it's either been a prescription (like 'password'), or it has meant the data can't be edited. Either way, I'd suggest that grey text hints something cannot be edited. – Jimmy Breck-McKye Jul 20 '11 at 16:22
I considered this & wondered about the following scenario: The middle item looks as above; user clicks in the field, the grey default value is removed; user enters a value which appears in normal black; user then deletes the entry so the field is empty. Once focus goes out (tabbed out or clicked out), the default value is shown again in grey. This could not work if the default value was in normal black - the default value would have to be distinguishable and discrete. Now I've not seen any forms that go this extra mile - does that make it a bad thing? Would be interesting to try it out. – Roger Attrill Jul 21 '11 at 8:05
I'd say that fields which appear to reset themselves look uneditable - as though the value is applied, but unchangeable. And again, I still think grey things look 'un-usable' by default. In your case, I wonder if it'd be better just to rely on the standard practice of mandatory asterisks and on-the-fly validation popups / flags. Not as neat, but I think it would be less ambiguous. Could be worth an A/B test, actually. – Jimmy Breck-McKye Jul 21 '11 at 19:45
up vote 1 down vote

While I agree that the non-editable fields shouldn't LOOK like fields, there are arguments to keep them fields for accessibility purposes. Form fields do have disabled and readOnly attributes you can leverage. Sometimes it makes sense to use these in various situations. The key is that they look different and appear to not be editable by default.

As for marking required vs. optional, I like to mark whichever is the exception. If only a few are required, I add (required) to the label. If only a few are optional, I add (optional) to those. That said, from research I've been a part of, a lot of users comment if they don't see the 'standard' asterisks marking required fields. I find it an example of familiarity trumping best practice (there's a UX term for that that completely escapes my mind...someone help me with that...)

share|improve this answer
Why would keeping them as fields aid accessibility? Also, totally agree on conforming to expectation - even if it's technically worse practice. – Jimmy Breck-McKye Jul 20 '11 at 16:23
If it's a form, a screen reader is likely reading the label then the input as pairs. For really large forms, keeping them form inputs might make it easier for the screen reader. But as always with screen readers, there's an exception to every rule. – DA01 Jul 20 '11 at 16:38
Is there any way to mark that 'pairing' through other ways, though? – Jimmy Breck-McKye Jul 20 '11 at 17:35
@jbreckmckye Why not simply mark them up as disabled readonly fields? How they are marked up has nothing to do with how they look. – Bennett McElwee Jul 20 '11 at 21:58
@Bennett There are some limitations to styling form elements across browsers. Even the newest ones. That said, you can do quite a bit. – DA01 Jul 21 '11 at 2:03
show 2 more comments
up vote 0 down vote

I wouldn't make read-only data part of a field in the first place, but if you really must, there is an existing pattern of greying read-only fields out. This used to be common in Microsoft products, especially Windows 9x. Consider the 'target' field below:

enter image description here

I don't like this pattern. It's frustrating (it appears to offer edit functionality to unfamiliar users, only to fail them), it's harder to read (because of the morass of grey), and it usually hints that the text is editable sometimes (which in your case, it isn't). Still, it is an existing and familiar-ish pattern that does what you need.

Also, I have to ask: why are you showing the read-only data at the same time as asking for edits? Depending on the use case, your workflow might make this unnecessary (especially if the people performing the edits and reading the data aren't actually the same).

share|improve this answer
I'm showing read only as well as editable data because they are all properties of the entity, all related to each other (content-wise), and are all part of the same task flow of problem solving (it's difficult to predict when the users will need which piece of information). Also some of the editable fields are not always edited - sometimes the user will just want to read the information and not necessarily edit it. – Olgaarsh Jul 24 '11 at 6:57

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.