User interfaces are tough. As a developer, it’s hard conceptualizing an easy to use interface with all the information that we have in our database. As a designer, it’s easy to build something visually appealing while ignoring crucial specs. A product person is a good mediator who can find some middle ground between good design, user experience/interface, and developer constraints–unfortunately not every company has the luxury of having one.
Sometimes, we need to put on a different hat and work on things that we’re not necessarily comfortable in. Luckily, building good user interfaces is a skill that can be learned by almost anyone. Here are some tips on how to get started.
The Technologies Poised to Change the World in 2019 | Data Driven Investor
It is not easy to imagine a technology that will receive as much publicity as the blockchain did last year but there's…
You are not the user
This is a point I like to mention all the time because it’s the most important one. We often get so stuck in our own world that we sometimes forget who is actually using our product. While records stored in our databases follow certain naming conventions, they don’t mean anything to our users. You’ll want to present the data in your site or app in a way that users will easily understand.
You may have had meetings that went on for weeks or evens months, about a certain new feature. In your head, the feature makes a lot of sense. An outsider won’t have the same insider knowledge and the feature will be foreign to them.
Start by creating a proof of concept and show it to someone without giving them a backstory. The color, the look, and even the name of the feature might be confusing to an outsider. By looking at where they get stuck, you’ll know what needs to be changed. Because this feedback is given to you early on, it’s a lot easier to make tweaks at that time, instead of waiting until you’re almost at the finish line.
Just because the feature makes sense to you, don’t mean everyone will understand how it works. Be open to feedback and be open to asking for it as well.
Simple is better
Often referred to as “less is more”. We have this tendency to put as much data on a page as possible under the false pretense that we’re adding value to our users. A particular form could have 30 fields to give you maximum control of your settings. Great, the user will be happy! Not really, your user is now probably overwhelmed, confused, has grown impatient, or has moved on to something else.
Think about which fields are absolutely necessary and remove the rest. Now with your new subset of fields, do it again, remove at least one or two more options. Just because a field is important to you, doesn’t necessarily mean it’s valuable to the user. Can your app still run without this data? If it’s not crucial, you can always collect it later on when you actually need it.
We read webpages from top to bottom, everything else is fluff and we’ve grown blind to distractions. Items on the sides of your page, or on the top are easily missed. We’ve learned to ignore the ads. Don’t try to overcome this obstacle by placing your content in a non-linear way. Your chaos will cause confusion and your users will leave. Instead, embrace this fact and align your content across an invisible vertical line on your page–a grid if you will.
When dealing with forms, keep the labels either to the left of the inputs or directly above them. Align all your inputs with the grid. If you’re going to place a submit button at the end of the form (i.e no autosave and no floating save button), then align it, as you’ve guessed, to the grid.
Remove all friction
You want your user’s session to be as simple as possible so that they can focus on your product. Don’t add any friction. Don’t add any pop-ups while they’re still reading. Don’t use multistep navigation when you can simplify it in one step. Do some magic. Autocomplete things when you can but in an intelligent way (e.g allow for grammatical errors and typos). Don’t make them format their telephone number on input, do it for them.
Don’t tell them a username is in use after they hit submit, do it right away. In the same vein, don’t presume guilty until proven innocent. For example, don’t tell them their passwords don’t match when they haven’t even made it to the re-enter password field. Actually, get rid of that re-enter password field, they can always reset their password later if they messed up. If you’re not convinced, add an eyeball icon that unmasks their password so that they can see what they’re typing.
Speaking of passwords, the length is everything. A 16 character password is a lot harder to crack than an 8 character one that has numbers, letters, special characters, emojis, zodiac signs, or whatever other weird made up requirements. Ask your users to type a sentence or a few words that they’ll easily remember. Because it’s easier for them to memorize them, they won’t end up writing down their password on a sticky note by their desk.
Keep menus simple
This echoes my first point but let’s focus on navigation for a minute because it’s how your user will discover more of your content. Ever been to one of those restaurants that offer 100+ items on their menus and you have no idea what to order? Compare that to a restaurant that only has 7 items. The former is overwhelming, the latter makes it much easier for you to decide what you want to eat.
The simpler menu also shows that the chef knows what they’re doing — instead of being a jack of all trades, master of none, they are instead focusing all of their energy on creating fewer, better meals. The exact same logic applies to menus on the web and in apps. By offering a limited amount of choices, you’re making it easier for the user to decide what to click on, while also showing that you’re an expert rather than appearing to be all over the place.
Here comes the dilemma, what if you have 50 sections because your site has been around forever, or you need them for business, or SEO reasons? Evaluate all the categories and see which ones actually get clicks and traffic and which can get consolidated or eliminated. There really shouldn’t be so many options. If you absolutely must keep them, then create 5–7 main categories and place the rest in subcategories. Your menu can simply show the top-level categories and when you click through, the rest can appear.
Try to avoid showing the subcategories in a popup–An interface with a menu inside a menu on hover yields a really frustrating user experience.
With your new simpler menu, you’ve suddenly made it a lot easier for the user to navigate while still adhering to the business requirements.
Form placeholders are bad, don’t use them
When dealing with forms, some people will omit the labels and instead, put that information directly in the placeholders. This is a bad design. As you start to fill in the forms, the labels disappear and if you change tabs and then look at the form again, you will have no idea which field is which. If you make the labels appear only when you type something in the field, you’re adding a distraction.
The other thing I often see is people using placeholders to show examples of the kind of data that a field can accept. This is also not a great idea. To the user, it sometimes looks like the field is already filled in and they will skip it. Don’t try to be too clever here, an input with a label directly above it, or to its left is the most user-friendly approach.
Ditch the burger, and your assumptions
We all know about the hamburger icon, we see it everywhere. Everyone knows what it is, and what it does. Not quite. Even in a test done this year, I’ve discovered that most users, especially on desktop, barely use the hamburger icon. It’s very possible that they don’t notice it, or simply don’t want to click it. However, in my tests, by adding the word “Menu” next to or under it, it always generates more clicks. My suggestion is not to add the word but maybe reconsider your interface. Perhaps the hamburger icon isn’t the best approach on the desktop where you have space to show some of your menu items?
The assumption that our users will automatically understand a feature because it’s used on other sites is problematic. In tests done a few years back (circa 2013), I had discovered that my links would get considerably more clicks if they were blue and underlined instead of any other color with an underline only on hover. Pretty crazy right? I decided to remove the underlines anyway because the difference wasn’t large enough to justify the ugliness they added to the look and feel of the site.
The lesson here is to never assume anything about your users. When possible, test things out. There are a ton of tools to help you do A/B tests. Be warned though, A/B tests are expensive, both in time and money, and you need a considerable amount of traffic to draw proper conclusions. If your sample size is high enough, then trust your data. That data is a lot more accurate than your instincts.
Draw inspiration from others
If you’re building something new and you’re not entirely sure which approach to take, look at what others are doing. A lot of times, they’ve done the research already. Be careful though, just because someone else is doing it doesn’t make it right, not does it guarantee success on your platform. Different audiences behave in different ways.
Test out the feature as they have it on their site. This also gives you the added bonus of not needing to build a prototype. Don’t flat out copy it though. You need to adapt the feature to your site, your brand, and your audience. By the time you’re done, the feature will probably be a combination of influences from a few different sites or apps with your own special touch added. Don’t flat out plagiarize but do draw some inspiration. Be warned, some features do have patents on them.
There’s a lot more to creating good user interfaces but if you’ve been paying attention, I limited this article to only a handful of ideas that I think are the most valuable to get you started. Let me know what you think in the comments below and follow me on twitter (@tkaravou) where I’ll post more tips.