The No UI Approach to Dropdowns
This is the third post in my Fuck Dropdowns blog series where my goal is to give Eric Campbell and Golden Krishna’s 2016 SXSW Keynote Presentation a place to live beyond its video format. In my first post “You Know What? Fuck Dropdowns,” I covered Campbell and Krishna’s thirty two reasons why dropdown are the worst. My second post “Fuck Dropdowns: 6 Ways to Eliminate Dropdowns From Your Design,” presented six options for replacing dropdowns with better UI as shown in the second part of Campbell and Krishna’s presentation.
This post will cover a far more interesting concept that Campbell and Krishna call “the no UI approach.” They suggest moving from user input to machine input. So let’s look at some of the different types of machine input.
Sensors
Sensors detect the environment and world around you. Examples of this include the iPhone — it detects the light in a room and adjusts your screen brightness to accommodate the situation. We see motion used with GPS and motion tracking and audio used with voice interfaces like Google or Siri.
Public Data
Public data includes things you can pull from such as bus and train schedules to determine if someone is on a train route or not.
Cameras
Cameras are great for capturing data right in front of you without actually having to input that data yourself.
APIs
There is also API information you can pull from — it’s already inputted elsewhere so you don’t have to inconvenience your user by asking them to input the information again.
Device/Browser
The same thing is true for device and browser — you use your device everyday and because of this it knows a lot about you. Your device know things such as your name, and probably even your location along with other things. We can leverage this kind of data instead of forcing our user to input the information.
Radios
There are radios like bluetooth and wifi where you can let machine talk to other machines instead of asking your user to fill out a dropdown field. So how can you eliminate common dropdowns using this method? Campbell and Krishna’s first suggestion is to kill state and country dropdowns forever, and I couldn’t agree more.
Radios, GPS — You can do this by using GPS to get a very accurate location of your user and eliminate the need for a dropdown all together. Products like Uber and Lyft use this type of machine input rather than asking their users to input their location manually.
Radios, Wifi — Another option is to use services like Skyhook that pull in wifi information, allowing you to determine location information without using the GPS radio.
Device/Browser, HTML5 Geolocation — You can also use Geolocation to get latitude and longitude by asking permission from the user.
Device/Browser, IP Address — Additionally, you can pull device/browser information such as IP address — it won’t give you a perfect location, but it does give you enough information to get rid of the country dropdown all together.
APIs, Maps, Facebook + Twitter — There are APIs you can pull in, from mapping services like Google maps, to pull someone’s location information instead of requiring them to input the information manually. You can do the same thing with Facebook and Twitter. If your user is signed in through one of these services, you have a lot of options for getting information from them instead of requiring user input.
Public Data, Zip Codes — Campbell and Krishna point out a great service: Ziptastic. This service allows you to help your customers fill out forms by having them enter their zip code first. Ziptastic takes it from there and fills out the City, State and Country, automatically using the Ziptastic jQuery Plugin.
Card Type and Expiration Dropdowns
Camera, Still — You can eliminate the card type and expiration dropdowns all together with card.io — “the easiest way to pay with a credit card on your phone.”
Public Data, IIN (issuer identification number) — Another way to get around credit card type dropdowns is to simply look at the first few numbers someone is typing to understand their card type. Creditcard.js does just this saying, “Most credit card forms are a usability disaster, complicating the already clumsy credit card entry process. Creditcard.js avoids these design mistakes, proving an HTML/CSS/JS solution compatible with any payment form.”
API, Pay — You can create a seamless checkout process by connecting with services like Apple Pay, Android Pay, Amazon Pay, and PayPal. These services allow your user to checkout with just one tap.
API, Facebook — What’s one of the worst dropdowns? Title dropdowns. Campbell and Krishna admit that this is probably one of their least favorites of all the dropdowns. Why? It can actually be offensive. Their advice: just don’t ask. Campbell and Krishna point out that it won’t fundamentally change your relationship with that user, so rather than offending users it’s better to just not ask at all. If you really do need information on title, Campbell and Krishna suggest a better way to go about getting it: connect with Facebook’s API. They point out that Facebook does a really nice job of dealing with gender and title inputs, and by connecting to their API you can get that information without having to ask the user for it.
Camera, Still — You can also use the camera to gather all the information you need from a photo ID using services like Fastfill by Jumio.
Watch Campbell and Krishna’s full talk at www.fuckdropdowns.com
