What is the best practice for visual presentation (formatting) of input fields in read-only mode?
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
Get the feed
Comments
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 > >
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.
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