Bryan Landers

Toymaker + Shapeshifter

Form Design: Text Field Specimens

Forms are everywhere. They’re how we humans share information with computers and are baked into the essence of web products. There’s the form you type in to search for something on Google, the form where you type your tweets on Twitter, the form where you enter your credit card information to buy something on Amazon.

BJ Fogg’s Behavior Model applies to forms - you need to want the offered reward enough to trade personal information or ideas plus the time and effort needed to fill out and submit a form. If the form is hard to complete (poor UX, too many fields…) and your motivation is low (the reward isn’t enticing enough), you will abandon it. But, a form’s design can encourage you to use it. The best designed forms make you want to complete them.

I recreationally went through 50 pages of search results on Dribbble for “forms” and made a bucket of my favorite modern text input field design. Below are examples of patterns that emerged. You can see the sources here on Dribbble.

Bordered on Same-Color Background

I’m a fan of minimalism. The simplest design for a text field is a simple bordered input field where the input background matches the form background. There’s plenty of room for character and vibe using color, border thickness, icons, labels, and placeholder text.

Light Gray on White

Another minimalist approach is to forego borders (or reserve them for focus states) and use a light gray field background with just enough contrast to stand out on a white form background.

White on Darker Background

A white text field set on a darker background feels safe and traditional. A modern spin is to skip the border, giving a flat look. You get bonus hipster points if you float it atop a trendy, photographic background.

Dark on Dark

One pattern that can still look exciting and very well-suited for the mobile world is a dark form background color with text field backgrounds of the same shade, but lighter or darker to create enough contrast to be discernible as an input field. There’s something mysterious about it, yet done well, it can be perfectly usable.

Skeuomorphic

I’m not generally a fan of skeuomorphism, but I have a soft spot for forms that mimic real world objects. Fill-in-the-blank-style inputs can make you feel like a kid filling out Mad Libs, like you’re writing a physical letter, or like you’re filling out a name tag. There’s something charming about the experience and the usability is excellent because it leverages known behaviors taught to us as early as kindergarten.

Underlined

Taking the simple bordered text field even further is the single bottom border look. Having no contrasting background color or border creates two UX issues with this pattern: they might not be recognized as form fields and labels are either difficult to position well or require using placeholders for labels, which will disappear once any text is typed. For very well-known forms (login, sign up…), this pattern can work and be interesting.

Structural (wtf?)

The last pattern I was intrigued by, but am not yet sold on, is one I’m not sure how to classify. In this pattern, the form fields have no margins between them, forming a grid layout similar to those you see on paper DMV or rental forms. They are more compact than other form designs, so they will work best in modals or on phones, but they make labels awkward and sacrifice usability for information density.

See larger versions of the above forms here on Dribbble.

Most Advice Is Useless

Why I’ve stopped reading most content about entrepreneurship

Bloggers are obsessed with giving advice. “10 things you should…”, “What I learned by…” Some advice is anecdotal; some is data-driven. The trend is generally well-intentioned, or at least mutually beneficial. Authors try to offer value with their content marketing in hopes to gain attention in exchange for educational information.

The problem is:

90% of the advice I read is not actionable to me now.

Read More

Look Beyond The Medium

Photo Sharing Is Message Sharing

Recently I found myself thinking, “I can’t believe I’m exploring ideas that could be considered ‘photo sharing’ app territory.” The way I arrived there was circuitous, so the observation snuck up on me.

This simple fact freed me from worrying about it:

Photos are a communication medium.

Read More

Apple’s New iPhone Marketing Language


Apple’s new product pages are up for the iPhone 5s and 5c. The marketing copy and narration in the promotional videos is so emphatic it’s almost comical. This is what it sounds like to speak in italics. It’s very important to them that you know that they’ve considered every detail in manufacturing, design, and experience. I think it’s going needlessly overboard, since the finished products themselves communicate that message clearly.

Read More

Here, a young Jimmy Page shares that he wanted to be a cancer research biologist when he grew up. He was one my first guitar heroes that inspired me to play music. I’m glad he didn’t realize those particular early dreams.

For some reason this video makes me recall this exchange from Harry Potter:

"Did you know—then?" asked Harry.

"Did I know that I had just met the most dangerous Dark wizard of all time?" said Dumbledore. "No, I had no idea that he was to grow up to be what he is. However, I was certainly intrigued by him."

Check out this amazing HTML email from Airbnb. It’s incredibly compelling because it manages to tell a story without any real details, which lets you fill in the blanks with your own imagination. The design creates a momentum that all leads toward one singular outcome: you clicking the “enter” button.

Check out this amazing HTML email from Airbnb. It’s incredibly compelling because it manages to tell a story without any real details, which lets you fill in the blanks with your own imagination. The design creates a momentum that all leads toward one singular outcome: you clicking the “enter” button.

Dear Artists, Make Me

Earn money and attention for your Kickstarter or Indiegogo project

Dear artists,

Make me. Make me want your art. Make me want to give you my money. Make me want to tell everyone about your crowd-funded project. This is an opportunity.

It’s time to stop asking for donations. You are not a 501(c)(3) organization. You are not helpless. You are not a charity. “We just need your help,” is no longer valid. What you need is to earn my money and attention.

Read More

Showing Progress

Designing and Developing

Yesterday I spent the morning designing some website mockups for a client. Within an hour, I had six fairly high-fidelity screens to show her that I was quite proud of and that already told an engaging story about her as an artist and implied some exciting interaction and responsive design ideas. I took a lunch break after emailing my client a Dropbox folder with the new mockups and I noticed something - I felt great! After a fun design session, I felt charged up and inspired to work more. It’s not an unknown feeling to me, but I realized I haven’t been experiencing it much lately. Why?

Read More

How To Be A Content Monster

image

"C" is for content, that’s good enough for me

I’ve been working with the team at Zapier to help them refine their brand identity. As I work my way through the sprawling expanse of the pages and screens on their destination site and pitch in on marketing ideas, I’ve witnessed an incredible discipline they have as a company for generating new content that finds its way to numerous outlets including social media networks, multiple company and personal blogs, guest posts, and community sites like Hacker News and Reddit.

While it makes me incredibly jealous as a solo founder to see the power of having co-founders and employees, I’ve been learning a lot about how combining forces to generate content can keep a company visible, relevant, and growing. Here are 3 ideas you can use to become a content monster like Zapier.

Read More

Being new to biking in a city, I try to look on Google Maps street view to see where I might lock up my bike when I go places. What I find doesn’t always reassure me.