the-evolution-of-material-design’s-text-fields

How user research reshaped the design of Google’s open-source text fields

Susanna Zaraysky

New Material Text Field

New Material Text Field

Designed by David Allin Reese

This article was co-written with Michael Gilbert, Senior User Experience Researcher on the Material Design team.

You might not always notice, but Material Design is constantly evolving and iterating based on research. We recently received an inquiry about why the style of Material text fields changed in 2017, and we’re taking this opportunity to share a behind-the-scenes glimpse into our research process. Here’s the story of how data improved Google’s text fields.

Text fields with normal with hint text, hover, press, focus, normal with input text, error, and disabled states

Text fields with normal with hint text, hover, press, focus, normal with input text, error, and disabled states

Text fields before the 2017 redesign

Why did the text fields need a makeover?

A text field is one of the most common ways for users to enter and edit text in forms and dialogs. However, some users didn’t know that they could interact with and click on the text field. It looked like an empty box. The line affordance under the old text fields was not clear to some users. The line was confused with a divider. The label and input were confused with body text, especially in dense compositions.

Multi-line input text with unclear line affordance

Multi-line input text with unclear line affordance

Unclear line affordance in old text fields

Material Design’s goal was to determine how to improve the text field to make it more distinguishable, easier to read, and more understandable — with a more clear touch target. We wanted users to be able to fill out a form correctly and quickly.

Research

To improve the usability of text fields and to determine which text field variables to alter, our researchers and designers conducted two studies between November 2016 and February 2017, with actual users.

Study One had three tests, plus a preference ranking. There were 158 participants ( 45 pilot participants).

sample filled and empty text fields

sample filled and empty text fields

Participants were asked to find a specific text field, such as “Item L.” They also clicked on both filled and empty text fields.

The goal of this first study was straightforward — we wanted to compare the design of the original text field with three distinct alternatives. In presenting users with this range of options, having them click through simple, complex, and even realistic task-based forms, we were aiming to get a sense of the styles of design that worked best, rather than aiming to find any single best individual text field.

For each of the possible text fields, and for each form type that we had designed, the team timed how long it took participants to find and click the proper text field. To make sure that participants couldn’t learn and predict where text field alternatives might show up during the test, we randomized the order in which we presented those text fields.

At the end of Study One, participants ranked the possible four text field alternatives in order of their visual preference.

Study Two had two tests, plus a preference ranking.There were 400 participants.

Where Study One aimed to determine a broad direction for design to focus, Study Two was intended to zero in on what, exactly, the new Material text field should look like. For this study, instead of looking at 4 individual text field prototypes, we built a custom tool that would allow us to test the individual characteristics of text field design. For instance, with this tool we were able to vary between text field “box style”, label location, contrast, and border styles. In all, we looked at 7 text field characteristics, with over 140 possible text fields that could result from combinations of those characteristics.

Text fields label in the below, embedded and above locations

Text fields label in the below, embedded and above locations

Example illustration for the “Label Location” text field characteristic

After the timed tests, participants ranked their preferred text field style. The participants answered 20 questions.

To determine which text field variations were preferred and the most effective, the researcher and designer team found ways to map user behavior to these three factors:

  1. Identifiability: The number of correct versus incorrect clicks
  2. Find-ability / scan-ability: The time it took a participant to find and click on a requested element
  3. Preference: Participants rank-ordered each text field variation

There wasn’t a maximum time for any of the tasks, participants could ask for help over email if possible (but none did). The team collected data about what participants clicked on via heatmaps.

Main findings

Text field with rounded corner, label inside, box, lines and strokes and semi-transparent fill

Text field with rounded corner, label inside, box, lines and strokes and semi-transparent fill

The new text field has: a text field box, semi-transparent fill, proper color contrast, rounded corners, and a label inside. Designed by David Allin Reese

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

  • Enclosed text fields with a rectangular (box) 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 with a fully transparent fill and an opaque stroke.
  • Color 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

Conclusions:

Text field before the makeover

Text field after makeover

And there you have it. Redesigning the text fields involved around 600 participants, two designers, and one researcher. Today, these new text fields appear across Google products from account sign-in pages to Google forms. Given the approach described above, we were able to do more than simply tackle usability issues of the previous text fields one by one. We were able to test an entire range of possible text fields, to identify the specific design characteristics that performed well or performed poorly, and to provide our designers not just with a single best text field, but a set of options — each of which we could show to be more beautiful, and more usable than the original.



The Prolific Evolution Of The 3M Logo Design, 1978 (above)

We start this logo evolution of the 3M logo with the most recent which was introduced back in 1978.  Possible winner of logo with the most logo updates?

The evolution of the 3M logo looks like a successful exercise in yo-yo backwards-forwards brand logo design. We zip from round contained logo designs (1938) to plain typographic designs (1937), oval contained designs (1952) and frilly leave edged designs (1954).

From this linear display it really does look a little random.

Some of the logos are clearly alternative lock-ups rather than different logo designs which I presume are the ones labeled: I, II, III & IV, as well providing alternative designs for other 3M sub brands? Need to research this more closely.

What’s interesting is to see how close they got to the current logo design back in 1937 & 1952 with a typographic solution.

Some of the middle era designs are just rather odd when you compare to designs previously used as well as the actual technical accuracy of them.

And what the hell happened in 1961?

The Prolific Evolution Of The 3M Logo Design, 1906-2012

Evolution 3M Logo Design 1978

Evolution of the 3M Logo – 1978

Evolution 3M Logo 1961 III

Evolution of the 3M Logo – 1961 II

Evolution 3M Logo 1961 I

Evolution of the 3M Logo – 1961 I

Evolution of the 3M Logo – 1960 II

Evolution of the 3M Logo – 1960 I

Evolution of the 3M Logo – 1958

Evolution of the 3M Logo – 1957

Evolution of the 3M Logo – 1956

Evolution of the 3M Logo - 1955 II

Evolution of the 3M Logo – 1955  II

Evolution of the 3M Logo - 1955 I

Evolution of the 3M Logo – 1955 I

Evolution of the 3M Logo - 1954 IV

Evolution of the 3M Logo Design – 1954 IV

Evolution of the 3M Logo - 1954 III

Evolution of the 3M Logo Design – 1954 III

Evolution of the 3M Logo Design - 1954 II

Evolution of the 3M Logo – 1954 II

Evolution of the 3M Logo Design - 1954 I

Evolution of the 3M Logo – 1954 I

Evolution of the 3M Logo Design - 1953

Evolution of the 3M Logo – 1953

Evolution of the 3M Logo - 1952 IV

Evolution of the 3M Logo – 1952 IV

Evolution of the 3M Logo - 1952 III

Evolution of the 3M Logo – 1952 III

Evolution of the 3M Logo Design - 1952 II

Evolution of the 3M Logo – 1952 II

Evolution of the 3M Logo Design - 1952 I

Evolution of the 3M Logo – 1952 I

Evolution of the 3M Logo Design - 1951

Evolution of the 3M Logo – 1951

Evolution of the 3M Logo Design - 1950

Evolution of the 3M Logo – 1950

Evolution of the 3M Logo Design - 1948

Evolution of the 3M Logo Design – 1948

Evolution of the 3M Logo Design - 1944 II

Evolution of the 3M Logo – 1944 II

Evolution of the 3M Logo Design - 1944 I

Evolution of the 3M Logo – 1944 I

Evolution of the 3M Logo Design - 1942

Evolution of the 3M Logo – 1942

Evolution of the 3M Logo Design - 1938

Evolution of the 3M Logo – 1938

Evolution of the 3M Logo Design - 1937

Evolution of the 3M Logo – 1937

Evolution of the 3M Logo Design - 1926 II

Evolution of the 3M Logo – 1926 II

Evolution of the 3M Logo Design - 1926 I

Evolution of the 3M Logo – 1926 I

Evolution of the 3M Logo Design - 1906

Evolution of the 3M Logo – 1906

Found on Retronaut who provided this selection of 3M logos: Evolution of the 3M Logo

You might also like the Evolution Of The Batman Logo 1941-2007 by Rodrigo Rojas




Hire a Freelance Logo Designer in the UK


Logo & Brand Identity Design by Freelance Logo Designer The Logo Smith.

If you like the Logo & Brand Identity Design work I have done in my Portfolio, and The Gallery and Monomarks, and are looking to hire yourself a Highly Talented, and Super Experienced (27 Years), Freelance Logo & Brand Identity Designer, then look no further. Visit Hire Me, and fill in the Design Brief, or just Contact me.

The Logo Smith has Full Business Idemnity Insurance (FCA Regulated).



stack-evolution:-cancel-those-credit-cards-and-put-a-process-in-place

Over the last five to 10 years, companies have been spending more and more on technology to acquire, engage and retain customers. Increased pressure to achieve revenue and customer lifetime value objectives, a noisy marketing environment, and proliferation of new marketing technology tools, has created a perfect climate for technology experimentation, adoption and spending. In many cases, everyone in the organization – through the power of a credit card – has become a technology purchaser. Without discipline and strategy, this leads to excessive spending, duplicate purchases, redundant functionality and limited technology utilization.

With technology now consuming 29% of the marketing budget, companies are putting the brakes on independent purchasing and tasking marketing with establishing a formal technology evaluation and purchasing process that ensures that the ROI for technology purchases is aligned with business performance and objectives. 

I’m surprised at how recent this process development is for many companies and thought it would be interesting to pull together a group of marketing operations leaders who have been tasked with developing a purchasing process to discuss how they approached this activity, and to learn what’s worked, what hasn’t, and what the challenges were along the way. We’ll be diving into this during our Martech panel, Avoiding Random Acts of Martech on Sept. 18, but here’s a sneak peek at some of the issues they’ve had to grapple with.

Stakeholders

Who are the stakeholders, and what are their responsibilities? How many are too many? How do you avoid being bogged down by naysayers? How do you stop bureaucracy creeping into the system?

One or more processes

Is it possible to create a single process that supports the evaluation and purchasing of an expensive, complex product such as a marketing automation platform and is at the same time flexible enough to handle a $9.99 subscription for a product with limited features?

Distributed versus centralized purchasing

What’s the best organizational approach to technology purchasing – distributed or centralized? What are the advantages and disadvantages of each? I’d vote for distributed purchasing with centralized oversight – it will be interesting to hear what my panelists think.

Best of breed versus single solution versus platform ecosystem

I happen to believe that the best approach to purchasing technology is a combination of best of breed, single solution and platform ecosystem but many organizations are hamstrung by opposing ideological beliefs. How do you work through a fundamental issue such as this?  

Closing the gate after everyone has bolted

It would be nice to start with a clean slate and build a new process on top of that; the reality is that for most of us we are jumping into an environment that has been operating without a process for years. Where do you start? Is it necessary to go back and rationalize all the purchase decisions that have been made to move forward, or do you focus on the future? 

Priority management

It used to be that the number of products that could be purchased was gated by how many the IT department could install in any given period. Today, most products don’t require IT support, so how do you handle competing requests for new products? Is there a limit to the number of new products that can be integrated into the stack in any given year? Is it necessary to retire one product to bring in another? 

Keeping everyone heading in the right direction

Several marketing operations executives have told me that it is an ongoing challenge to keep everyone moving in the right direction and adhering to a process. I’ve heard it described as herding cats or playing an eternal game of Whack-a-Mole. How do you keep everyone engaged in the process? How do you avoid renegade purchasing?

I’m sure there will be a lively discussion among our panelists with input from the audience. These are the nuts-and-bolts issues that are so important to developing and executing a coherent strategy.

I am looking forward to seeing everyone on the 18th!

More about the MarTech Conference


Opinions expressed in this article are those of the guest author and not necessarily Marketing Land. Staff authors are listed here.



About The Author

CabinetM, a marketing technology management platform that helps marketing teams manage the technology they have and find the technology they need. A long-time technology marketer, Anita has led marketing teams from company inception to IPO and acquisition. She is the author of the Attack Your Stack and Merge Your Stacks workbooks that have been written to assist marketing teams in building and managing their technology stacks, a monthly columnist for CMS Wire, speaks frequently about marketing technology, and has been recognized as one of 50 Women You Need to Know in MarTech.




the-evolution-of-visual-design-and-tech?s-designer-renaissance

With a background in visual design, I got my start as an interaction designer working on software that allowed users to professionally print and produce their work via a digital workflow. Most of this was not web-based. This was software running on the OS, the “thick client.” The visual scope of what a designer could do was limited because there already was a design framework established for each operating system. Mac, Windows, and Linux all had their own behaviors and design language. What worked for the lickable glossiness of OSX Aqua may not work for the warm tans and rigid profile of Windows NT or dimensionality of Vista or cool flat grays of Linux. They each had their own styles, behaviors, standards and even user cultures to respect.

Training your eyes to ask why

For a visual designer, the illustrative craft was exhibited in application and toolbar icons, splash screens and the side panels of installation wizards. The principles of visual design were applied to the structuring of content and controls, the affordance of those controls and understanding when to use those controls. The exciting new layer to all this was asking why. Sure, there is no visual hierarchy and the row of controls are not aligned but why are they here in the first place? Is there a more efficient way to access a feature? Do we even need this feature?

The big switch for me as a designer was no longer just thinking about how things looked but about how users felt. This was the entrance to understanding the reality and purpose of a digital product. How users, including customers, feel about your product (which for software is the brand) is directly related to how the interface looks and behaves.

Who are we designing for?

I learned about Cooper because it was the only place that was creating a process for how you design for humans, and they already knew visual design was key to that process. This was before the world fully understood that user-centered design was transformative.

The founder of Cooper, Alan Cooper wrote the books on interaction design that were being consumed by product managers and students taking classes on the subject. Degrees in human computer interaction are common now, and design thinking is a popular concept, seeded by the original design tools centered around people (like personas and scenarios) that Alan invented. 

When visual design met business

Being a designer at a tech company pre-iPhone was strange and rare unless you were in marketing or advertising. So being the first designers for our clients while learning how their business worked (or didn’t) through the lens of their customers and users was powerful. Design was making businesses relevant by forging a better relationship between their services and technology and the humans who experienced them.

Discussions of visual design can make many people uncomfortable; it’s a language that isn’t often deemed worthwhile to learn. There wasn’t trust in the value visual design brings to business or if it could be considered real work. It has taken a while for visual design to gain a voice. 

The world tilts towards the light of the screen

In today’s visually immersive media culture, in which we consume ever more information through the digital products we use, people have become more visually sophisticated. The efficiency of visual communication manifests in emoji, GIFs, and memes.

Apple changed the world radically by bringing design into the spotlight as a differentiator. Clients would tell me, “We want to be the iPod of medical software.” Visual designers showed the world they could make more than pretty pictures, and it wasn’t necessary, appropriate, or fair to expect engineers to take that work on. Apple also introduced a new canvas for visual designers and an ecosystem for a new kind of app development. 

Visual designers are building out the visual language that supports and informs a fully-fledged design system.

The improved experience of software created with the aid of a visual designer became strikingly apparent. Enterprise tools were craving some VisD love, but it was the explosion of mobile that really opened up opportunities for visual designers to help create five-star apps with longevity and brand loyalty.

A matter of visual literacy

Want to boost your organization’s visual literacy? Communicate why everyday products and services are successful. Use the principles of art and design to explain why a product looks and feels the way it does.

Communicating the difference between product and marketing is also important. For mobile startups, the design of the product is the brand, so it’s important to understand why there’s a difference between the two. Visual design for product is meant to support interaction and experience – it’s not there to market the product.

New challenges in the widespread appreciation of visual design

A visual designer’s responsibility is to get into why something is working or not working and move away from subjectivity, communicating clearly. 

The more attuned we are to something the more likely it will be copied. Enter homogeneity and the current flat aesthetic of visual design. To have personality we need illustration, motion, sound, a real focus on voice and tone and a visual strategy that maps it all out. 

It’s hard for companies to take risks in how they present themselves visually, and I don’t see a lot of companies taking risks to stand out. I see a lot of rebrands, and they all feel the same. 

Discernment for the future

Beyond a single touchpoint, visual designers are building out the visual language that supports and informs a fully-fledged design system. Such systems are intentionally built and designed to blueprint the uniqueness of a brand and its products. The breadth and depth of visual design that was once relegated to the operating system can know be seen in UX and visual design-forward companies with robust visual systems, like Airbnb, Atlassian, Lyft and Mailchimp. 

We are in a designer’s market, and technology is experiencing a designer renaissance.

If visual design becomes automated or homogenous onscreen, it’s the experiences outside of that screen that will differentiate, and with that visual designers are well equipped to address this because their eyes and their senses are trained to notice the fine details of creating and communicating an experience. They’re attuned to the fidelity of a micro-interaction and also understand when something becomes a moment. That sensitivity to nuance that was brought to the screen offers unlimited opportunities offscreen.

The final pixel

Today, we are in a designer’s market, and technology is experiencing a designer renaissance. We seem to have learned the most measurable value of all: what differentiates one experience from another is simply achieving one’s goal. Whether the goal is work- or leisure-related, it’s about accomplishing what you’re working toward. Visual design is more than icing; though without the icing, a cupcake is just a dry muffin. And nobody wants your dry muffin. 

custom illustration showing two muffins and one cupcake with sprinkles

For more Journal articles on this topic, read “Three unexpected benefits of learning the core elements of visual design” and “Beyond the pixel: Measuring visual designers’ strategic value.”

Find out how Cooper Professional Education can help your organization become more creative, human-centered, and impactful on our corporate training page.