What is the best practice for visual presentation (formatting) of input fields in read-only mode?

11 Aug 2011 - 11:48am
3 years ago
3 replies
1106 reads
Oleh Kovalchuke
2006

I understand that the words 'input' and 'read-only' are contradictory, and the best practice is to present the data as a plain text. However due to limited development resources, we have to apply read-only mode to display some of the forms in the application -- it is significantly easier to implement/test/document.

Common practice of displaying read-only controls as disabled (gray text over gray background) is bad for two reasons: 1. the purpose of these two modes is different, 2. low text legibility.

I think using black text over light gray background of the input, and hiding the input border (making the border white on the white screen will do that trick) is a good approach. * Hiding the border removes the affordancy of the input. * Black text over light gray background has good legibility.

Opinions? Different approaches?

Thanks, Oleh Kovalchuke Interaction Designer, Human Factors Professional DST Systems (816) 808-6177

Comments

11 Aug 2011 - 7:05pm
RossSclafani
2009

I wonder why you need to present the text as a read-only field rather than plain text.

if its a matter of technology, i cannot think of many display systems that will not allow both the border and the field background to be eliminated.

if you take the edibility, border, and "box" away from a text input, you get plain text. if you need to reflect that it has an editable state, coloring the box sounds reasonable.

> I understand that the words 'input' and 'read-only' are contradictory, > and the best practice is to present the data as a plain text. However > due to limited development resources, we have to apply read-only mode > to display some of the forms in the application -- it is significantly > easier to implement/test/document. > > Common practice of displaying read-only controls as disabled (gray > text over gray background) is bad for two reasons: 1. the purpose of > these two modes is different, 2. low text legibility. > > I think using black text over light gray background of the input, and > hiding the input border (making the border white on the white screen > will do that trick) is a good approach. > * Hiding the border removes the affordancy of the input. > * Black text over light gray background has good legibility. > > Opinions? Different approaches? > > Thanks, > Oleh Kovalchuke > Interaction Designer, Human Factors Professional > DST Systems > (816) 808-6177 > >

12 Aug 2011 - 8:06am
martinsz
2011

It seems semi-relevant to share with you this post by luke wroblewski on bringing input and output together:http://bagcheck.com/blog/61-input-becomes-output-in-a-new-way-to-bag
Martín.

12 Aug 2011 - 10:06am
Oleh Kovalchuke
2006

You are right, Ross, stripping all input formatting and thus presenting the data as plain text would solve the problem as I have described it.

I have forgotten to mention that input fields are placed underneath the labels in this application (per Luke's scanning recommendation), while read-only data are displayed to the right of the label. Removing all indicators of input field would contradict the standard placement for read-only data. Hm, perhaps the standard should be changed to double-standard? Either that, or the "remove the border, color the background" approach (the approach also helps to retain visual alignment for numeric data -- the gray box is aligned with the left edge of the label).

Thanks, Oleh

Syndicate content Get the feed