How data improved Google’s text fields - Deepstash

How data improved Google’s text fields

Material Design is continually evolving. The style of the Material text fields changed in 2017 for the following reasons:

  • Users didn't know that they could interact and click on the text field (the most common way users enter and edit text in forms and dialogues).
  • The line under the old text fields was confused with a divider.
  • The label and input were confused with body text.

STASHED IN:

6

MORE IDEAS FROM The Evolution of Material Design’s Text Fields

Main findings

The results of the two studies showed that these elements of text fields were of most value: 

  • Enclosed text fields with a rectangular shape performed better than those with a line affordance. 
  • The text field box should be represented with a semi-transparent fill and a bottom line. Or it should be a fully transparent fill and an opaque stroke. 
  • The Colour contrast of the text field’s lines or strokes met the minimum 3:1 contrast ratios with the background. 
  • Label text should be placed within the bounds of the text field box. 
  • Text fields should have rounded corners. 

STASHED IN:

5

Two studies were conducted to improve the usability of text fields and to find out which text field variable to change.

  • The first study aimed to get a sense of the design styles that worked best instead of finding a single best individual text field.
  • The second study aimed to determine what the new Material text field should look like, such as the "box style", label location, contrast, and border styles.

STASHED IN:

5

Deepstash helps you become inspired, wiser and productive, through bite-sized ideas from the best articles, books and videos out there.

GET THE APP:

RELATED IDEA

The Most Common UX Deliverables

The UX design process typically follows an approach similar to a design thinking, which consists of five basic phases:

  • Empathize with the users (learning about the audience)
  • Define the problem (identifying users’ needs)
  • Ideate (generating ideas for design)
  • Prototype (turning ideas into concrete examples)
  • Test (evaluating design)

The Neilsen Group reported for a UX designer wireframes and prototypes are the most commonly produced artefacts in this process, followed by flowcharts, site maps, and usability/analytics reports. This shouldn't discredit however the need for empathy tools like personas etc

2

STASHED IN:

5

What is emotional design?

Emotional design is the concept of how to create designs that evoke emotions which result in positive user experiences. Designers aim to reach users on three cognitive levels—visceral, behavioral and reflective—so users develop only positive associations (sometimes including negative emotions) with products, brands, etc.

15

STASHED IN:

83

It is a scam by which an internet user is deceived into revealing personal or confidential information which can be used illicitly.

At least 3.4 billion phishing emails are sent out worldwide every day.

Phishing scams account for half of all fraud attacks.

2

STASHED IN:

52