Dropdown alternatives for better (mobile) forms

Using dropdown menus in forms might seem a no-brainer: they don’t take much space on the UI, they automatically validate the input, all browsers and platforms support them, they’re easy and cheap to implement, and the users know them well enough.

At the same time, though, dropdown (or select) menus are one of the most frequently misused form patterns and “should be the UI of last resort”, according to Luke Wroblewski and many others.

Let’s look at some of the limitations and concerns:

• In a dropdown, the available options are not visible until you click or tap to open it. Also, the length of the list is hidden at first sight, that is, users can’t predict if a dropdown menu would contain 2 or 50 elements.
• Selecting an option from a dropdown list (especially on mobile) is a multi-step process: you have to tap on the dropdown to open the list of options, then scroll and scan through the items to select one, and then close the dropdown.
• Dropdown menus might make designers lazy: it’s super easy to just add all the possible options to a dropdown list without any prioritization (which makes it really similar to the hamburger menu, by the way).
• Longer dropdowns, such as a country selector can be a nightmare to scan through, especially on mobile where keyboard search is usually not available.
• Scrolling through the options might be painful on some mobile screens where the visible and scrollable area of the list is small:

On iOS, the number of visible options might be surprisingly low at first sight

The good news is that there are plenty of alternative input controls that will work better for you in many cases.

Consider the number of options

For binary (on/off) decisions, the dropdown menu is a really bad choice. What you need is a checkbox or a toggle switch.

If your dropdown only contains Yes/No or On/Off options, use a simpler switch instead

For a small number of mutually exclusive options, radio buttons or segmented controls are recommended so that all available options are visible at once, without having to open the list.

Segmented controls show the selected and the alternative option(s) at once

The number of visible options depend on the screen width and the length of the option labels but having more than 5 items is not recommended

For a large number of well specified options, when users know exactly what they’re looking for, consider a “start typing…” solution where the list of filtered options is displayed after the first one or two letters.

Instead of scrolling through the list, let the users start typing and only show the filtered options

For large and diverse lists, try to use existing user data to prioritize the options and only list the first few most popular choices to the user. This way there’s a chance that 90% of the users will find their preference instantly and only 10% have to select Other and then specify it in the next question.

Although “Other” is not an elegant solution, such prioritization might improve the user experience for the majority of users

Consider the expected input

One of the benefits of a dropdown list is that users don’t have to type much. However, if the expected input is not too long and is frequently asked (such as personal data) it’s usually easier to type in rather than select it from a list:

Entering a birth year on a mobil device is easier with a numeric keyboard than by scrolling through a long list

In general, entering a numeric value on a mobile is usually more efficient with a keyboard.

Even though the sorting order of a numeric dropdown is clear, it might still be easier to type than scroll

If it’s important to validate the user’s input, the “start typing…” approach might be useful where the input field is used to filter down the available options.

When listing the states of the USA, typing only one letter filters down the list well

The ability to search in the list of options is especially helpful when the sorting order of the elements is not clear.

The sorting order for currencies might be unclear to users so make sure they can search in name and currency code, too

The same technique should be applied for the good old country list: instead of listing 200+ items, let users start typing and filter the results as soon as possible.

For discreet values representing quantity (such as the number of passengers or the number of items in a shopping cart), a stepper allows the users to quickly increase or decrease the number with one click or tap.

For non-discreet values or values that are located on a scale, consider using a slider.

Showing the minimum and maximum value of the scale might help the understanding of the context

Picking a date with multiple select menus can be a really painful experience so for entering nearby dates, always use a date picker. (But never use it for entering birth dates!)

Consider designing smarter dropdowns

It goes without saying that dropdown menus should not be always avoided. You’ll find cases when a select menu is the most appropriate input control and that’s fine, just try to make it as user friendly as possible.

• Use a meaningful label: the menu label or description should be clear and available even when the list is open. Inside the select menu, use a descriptive label that tells the users what they’re selecting (that is, “Select type” instead of “Please select”).
• Sort items in a sensible way: based on user data, try putting the most popular choices on top of the list. Or, even pre-select the most popular one by default.
• Use smart defaults: phones and browsers knows the user’s location, the date, and tons of other information. Use that data to pre-select the most probable option for every user.
• Decrease the number of fields and let the computer do the work: if a user enters a ZIP code, the computer could already know the city and state — no need to ask. If a user enters a credit card number, the computer could already know it’s a MasterCard — no need to ask.
• Consider using APIs: signing up with a Facebook Connect button is easier than filling out a registration form. Paying with Paypal is easier than having to type in your credit card data.

If you want to learn more about designing dropdowns, check out the brilliant SXSW Keynote by Golden Krishna and Eric Campbell:

How Branding Tripled My Income in Six Months

After months of development you’re finally ready to launch the product your clients will adore. Your brand new website is beautiful, and at the price you’ve set, no one could turn you down. You go to industry events to promote your work, and traffic to your site is growing everyday.

All of which has amounted to zero customers and you have no idea why.

This was my client’s situation when she approached me for help. She worried her service was shoddy or that the price was too high. I assured her that wasn’t the case.

We tripled her profits in six months without changing her product. She’s won awards for her work, and clients regularly request for her services a year in advance.

How did she go from nonexistent to trend setting? By developing her brand.

Brands get a bad rap as superficial or unimportant, but by neglecting your brand you’re leaving thousands of dollars on the table.

Unfortunately, the above scenario is not unique; many of my clients have struggled to grow their business because they underestimated their brand’s impact. Brand building takes brainpower, not muscle, so putting yours to work is easy when you know what to do.

In this article, I’ll cover what a brand is and how you can use yours to reach the clients and profits your business deserves.

What is a brand

Did you know branding originated from the marks made by ranchers to identify their cattle?

Many businesses end up with poor brands simply because they don’t understand what one is. A brand is what people feel about your company — your customers’ psychological and physical impression of your business. The distinction here is that brands are defined by customers, while businesses can only influence their customers’ impression. The efforts made to influence a customer’s opinion of the business are called branding.

Brand Anatomy

Brands can be broken down into four distinct layers: brand materials, brand traits, brand values, and a brand promise. Each shapes the customer’s experience of your brand and ultimately informs their perception of your business.

Brand Materials — the “What”

Brand materials are the things you say, the things you make, and the things you do. Your materials are the content you put into the world to represent your brand, including:

• Logos
• Websites
• Flyers
• Packaging
• Banners
• Business cards
• Ads

Your materials are the surface-level objects where your customers interact, share, and enjoy your products.

Brand Traits — the “How”

Brand traits are the unique characteristics of your brand. They are the emotional responses felt by customers brand based on your business’s presentation.

Brand traits can be felt across all five senses, though most businesses prioritize the visuals of their brand materials. Grungy textures and hard angles, for example, make products and brands seem masculine and rugged. Softer colors and rounded edges associate brands with user-friendliness or femininity.

Some business try to refine how they taste, feel, and sound, but in most cases it’s not necessary.

Sidebar: many business owners assume they need to know exactly how their products should look and feel, and enlist designers and/or developers only to execute their ideas. While I encourage you to understand your business deeply, designers (like myself) can make immense improvements to your projects when brought on as strategists rather than “pixel pushers”.

Designers are trained specifically to translate ideas and values into the visual language of present-day culture. Approaching designers with a pre-defined solution is a missed opportunity to benefit from all of their training and experience. Instead I encourage business owners to deeply know the “what” and the “why” of their brand, and consider collaborating with creative professionals to best define the “how”.

The design of your materials and the function of your products create a powerful brand experience your customers will remember when comparing your brand against others. For example, Dollar Shave Club offers cheaper razors of similar quality to the Harry’s brand I buy, but the Harry’s brand has an atmosphere of simplicity and friendliness that makes their products worth paying a little extra.

It doesn’t matter that the price is cheaper for essentially the same product. I pay a little more because I want the experience of a premium product. Price clearly isn’t just indicative of quality, it’s also indicative of the overall experience.

Brand Values — “Why”

Brand values are the third and deepest layer of brands. Your brand values are not just what you stand for, they’re the people you care about and the problems you solve. If materials are what you do, and traits how you do it, your brand values are why you set out to do them that way in the first place.

Brand values help determine the audience your product is for, and in turn the design and atmosphere that will resonate best with them. A clear tie between the values and materials of a brand will strengthen your messaging and create clarity amongst the clutter of your competition.

Values are also divisive, and showcasing them is an easy way to split a generalized audience. When Chick-Fil-A President and CEO Dan Cathy spoke out about his disapproval of gay marriage, sales dropped immediately, because many of their customers don’t share his values.

While many businesses offer the same products or services, their reasons for doing so can be completely unique, making them a great tool to stand out.

Customers are very aware of the causes businesses defend. Buying a brand’s products is an indirect way for customers to define themselves by the values associated with that business.

Do you have an Apple or Android phone, own an Xbox or PlayStation console, or take an Uber or Lyft ride? Each offers similar experiences to their competitor, but their values influence the product and the type of customers they have.

The Brand Promise

Whether written down or unspoken, customers associate brands with a core function tied together by the materials, traits, and values communicated to them by the business. This commitment is the brand’s promise to solve a problem at the intersection of the business’s and the customers’ values. The strength of a brand is wholly dependent on the ability a business has to own up to that promise.

Chipotle, for example, built their whole brand around the value of independent farming. They believed that the meat produced through these farms is of better quality and better for our environment and economy. Chipotle designed their brand materials to convey these values and infer the promise of an eco-friendly restaurant where people could buy a healthier, guilt-free burrito.

Chipotle customers love Chipotle’s food and love that their dollars are being spent wisely and safely. Unfortunately, the business suffered huge losses in 2016 when cases of food poisoning were reported linked to poor meat quality standards. The reason being that they failed to meet their brand promise.

Supposing Chipotle paid no mind to their meat sourcing and focused instead on taste alone, the situation may have been better since those expectations were never set. Unfortunately, Chipotle customers felt the brand didn’t keep their promise and ultimately lost trust and interest in Chipotle’s message.

Companies like Coca-Cola benefit from having a simpler brand promise. While Coca-Cola has had many tag lines over the years, from “Coca-Cola. Enjoy.” to “Taste the Feeling”, they’ve all been variations on a promise to be refreshing. Coca-Cola may have values and endeavors beyond taste, but their customers only expect to be refreshed by their soda. Year after year, Coca-Cola delivers on that promise, and year after year, their profits soar.

How to Use Your Brand

With the components of a brand fleshed out, the influence they have over a customer is clear. Brand expert Marty Neumeier writes:

As the pace of business quickens and the number of brands multiplies, it’s customers, not companies, who decide which brands live and which ones die. An overabundance of look-alike products and me-too services is forcing customers to search for something, anything, to help them separate the winners from the clutter.

People tend to think their brand is imaginary or unimportant, but brands can be used in strategic ways to attract real customers and real profits.

Positioning

A well-crafted brand highlights the differences between your business and the competition, making it easier for customers to find the right choice for them. High-end or low-end, serious or playful — your brand traits position you into different purchasing categories that can set you apart from the competition.

Recognition

It takes seven times, on average, for someone to notice your business. You’re valuable content goes unnoticed when not backed by a consistent design to represent your brand.

By setting design standards for your materials, customers will recognize your content, expect the level of detail and care put forth from your previously established works. All businesses have a “look”; by keeping consistent standards, you help customers recognize yours.

Authority

Keeping your promises builds trust among customers. When customers trust you, they are more likely to try new products and recommendation you offer since you’ve already done well in the past.

Following my previous example, when my chosen razor-brand Harry’s launched their new face wash, I decided to try it based on the experience of my past purchases with them. I trusted them to make something I would like based on their reputation.

Delight

Customers pay more for things that make them happy. By using your brand to create a delightful experience, you add real value to your product that you can use to your advantage when pricing (price elasticity).

Personality

Only you can do it your way. Injecting personality into your brand is an untouchable advantage over your competitors. Personality can affect positioning, recognition, authority, and delight; so adding yours into your mix of materials can have multiplied effects on your customers.

The Results of Good Branding

Good branding is not measured by stylishness or consistency. Great brands make real money by engaging with customers.

Marty Neumeier says the goal of branding is to ”delight customers so that more people buy more things for more years at a higher price.”

Delightful brands will be rewarded with:

• More repeat customers
• Customers that better appreciate the brand’s products
• More trust from customers and industry recognition
• More social sharing from happy customers
• Price elasticity

Delight can be broken down into clarity and uniqueness. By designing something unique for a specific audience with specific values and goals, you create a one of a kind experience that can’t be bought elsewhere. The more uniqueness built into the product, the more control the business has over the price, reports Business Insider’s Ira Kalb.

Put Brand Strategy into Practice

What will your brand stand for?

The benefits to be gained from a great brand are clear, so I encourage you this information to start making real profits off your brand. I’ve made my Brand Assessment Worksheet available for my newsletter subscribers. The worksheet will help you evaluate the strength of their brand and includes additional ideas for refining your brand experience. I’ve included the sign-up link below so you can download your copy.

I’ve come to love brands not for the companies they represent but for the channels through which they convey their legacies over time. We are surrounded by brands all the time, but it’s up to us to use them to delight the world.

This post was originally published on the Jake Cooper Design blog at http://www.jakecooperdesign.com/what-is-a-brand/