Text Input Fields Redesign

While Designing the Activity Wizard, We Discovered An Issue With Our Text Input Fields

Another designer from my team had designed these text input fields for the Question Wizard she built. White integrating her Question Wizard with our Activity Wizard, I realized that the current text input fields we had were not accessible, nor following best practices.

Originally, the idea was that our user would double click on the light grey placeholder text, get a text bar, and start typing.

There were several problems with this design:

1. It does not meet Accessibility guidelines set by the WCAG for the following reasons:

   • The light grey does not meet text contrast ratio requirements

   • Placeholders are highly discouraged because they often replace labels. Labels are no longer visible once the user starts typing, and this can be an issue for anyone with cognitive/memory issues.

2. It’s difficult to recognize as a text input area

3. It’s not particularly intuitive (feedback we received upon showing this iteration to coworkers)

Text Input Field Version 2

My first attempt at redesigning the text input fields is what you see above. This version was better but still had issues. Mainly because we were trying to use it for small text inputs and keep the larger text input fields as they appear in version 1.

1. It broke the heuristic of consistency and standards

2. When attempting to use it for larger amounts of text, we realized it did not follow conventions for large text input fields

3. In order to rectify this issue, we tried using a dotted line text field with light grey placeholder text for large text fields. This lacked consistency.

4. Our decision to use the dotted line text input fields was still violating W3 Accessibility Guidelines because

   1. the placeholder text contrast ratio with the background did not meet standards

   2. It was still using the discouraged Placeholder text

It had to go.

The Final Version

Our Current, Newly Redesigned Text Input Fields

I redesigned the input fields again. We now use these across t.ux.

Why they are superior to the former versions:

1. The label is always in view for large or small text fields, it just shrinks up to the top left corner when the input box is active

2. The text fields are consistently designed.

   • They look the same in large, medium, and small sizes.

   • They behave the same in all sizes (except for the ability to edit text in medium and large text fields)

3. The contrast ratio of all labels, text, and even the outline of the text fields meets/exceeds WCAG AA color contrast guidelines. They are Accessible.