15 Timeless Rules for Creating Intuitive Web Apps (With Examples)

Do you have an epic app idea?

Learn the steps to bring your idea to the market in this ebook.

A web app that’s difficult to figure out, unintuitive, or inefficient is not going to win many hearts. But designing a user-friendly interface is hard. On top of the usual design problems like picking the right colours and creating a proper content structure, you need to also be aware of the bigger picture.

Wondering if your app is really as user friendly as you think? Tired of trial sign-ups that never convert into paid customers? Get The UI Audit book and your troubles begone!

Every founder should be aware of these rules. User experience has very little to do with Photoshop and a lot to do with how well your product gets adopted on the market. Nowadays, users don’t have to settle for a less-than-perfect user experience. If you fail to effectively satisfy their needs, they’ll simply move to your competition.

1. Don’t Reinvent Patterns

There’s a reason why all modern mobile operating systems use icons to let users access apps. Couldn’t they as easily be swapped for a list or a different UI element? Of course. But that would require users to learn a new pattern every time they switch a device. That, in the end, would mean lots of angry users.

Use patterns you see in popular apps to help users learn your interface. These patterns can be

  • colours (using red for errors)
  • icons (envelope is a recognised symbol for messages)
  • placing (“forward” button is always on the right-hand side)
When reporting a post, Facebook displays the “Continue” button placed on the right-hand side and makes it more prominent than the secondary option “Back”.

2. Group Related Elements

Users should (in most cases) be able to guess where to find a control or information. A great way to make sure of that is to group related objects together. For example, features like log out, settings, profile, switch account belong together, so they shouldn’t be scattered around. We can connect them with colour, styles (same size font), or put them in the same box.

Buffer grouped all profile-related controls under one drop-down. This way they can't interfere with other features in the app.

3. Less is Better

Your users want a faster horse. Feature requests will never stop. Your app will never be perfect. But it can be useful. And the only way to make sure of that is by limiting the number of features.

I know, it sounds counter-intuitive to disregard your customers’ and your own ideas for improvements — but it’s necessary. Every button you add is another chance for a new user to get confused and leave. Ask yourself: If this app only did one thing, what would it be?

TeuxDeux is an app that basically only does one thing — saves tasks for different days.
TeuxDeux is an app that basically only does one thing — saves tasks for different days.

4. Plan Before Developing

Take some time to break down your app into a wireframe before starting to code. Making changes later is far from easy. UX should be a priority before everything else starts.

Start with user flow. Go step-by-step from nothing to the result and skip all the “nice to have” features.

Mailchimp has a nice user flow that guides you through creating an email campaign with a breeze.
Mailchimp has a nice user flow that guides you through creating an email campaign with a breeze.

5. Provide Feedback

If you typed a message and your phone didn’t provide haptic feedback, did you really write that text?

There’s nothing worse than buttons that do nothing. To keep users from clicking the same button five times just because the site is loading, provide a cue to let them know what’s going on. This can be textual, using words like “Loading …”, “Sending …”, or “Please wait”, or using a loading bar.

Beautiful button animation combined with the spinning loader in the Headspace web app lets you know your request went through.
Beautiful button animation combined with the spinning loader in the Headspace web app lets you know your request went through.

6. Unobtrusive Help

Your app’s interface should be as intuitive as possible. However, users will sometimes need a gentle push into the right direction. It’s important to let them learn on their own and only offer help when it’s needed.

Tumblr gives you an option to take a short tour or skip it.
Tumblr gives you an option to take a short tour or skip it.

7. Help Users Decide

Looking at a new interface for the first time can be overwhelming. Help new users follow through with the task they’re most likely to do by adding emphasis to the “next step”. Should they create a new project? Install software?

You can even start with a lean UI and only add features as the user progresses.

It's hard to say no to Pinterest's obvious "next step".
It’s hard to say no to Pinterest’s obvious “next step”.

8. Focus On Target Users

You should always design for your audience. If the majority of your users know Git, there’s really no point in also tailoring the experience to non-techies. At worst, you’ll clutter the interface for everyone.

Github's clean interface isn't rich in graphics and full of explanatory text.
Github’s clean interface isn’t rich in graphics and full of explanatory text.

9. Where Am I?

Don’t let your users get lost in your app. Using elements like breadcrumbs or form steps will help eliminate unnecessary clicks and show hierarchy.

In simpler apps, Simply marking the current page in the navigation will do the trick.

MightyText app uses double navigation in settings to help users easily navigate the interface.
MightyText app uses double navigation in settings to help users easily navigate the interface.

10. Where did that come from?

Instead of just displaying data, show transition. This way, you’ll avoid surprising users with a different interface.

Wistia shows a simple slide effect to display more tools.
Wistia shows a simple slide effect to display more tools.

11. Design For No Data

To make mockups look nicer and more realistic (even if it’s just Lorem Ipsum), we design apps with content. But that’s not what fist-time users will see. In places where there should be a list of files or friends there will be blank space (sorry, I had to). We can either guide users through creating some content or display helpful and unobtrusive tips.

A nice illustration and a tip help new users get accustomed with Dropbox.
A nice illustration and a tip help new users get accustomed with Dropbox.

13. Keep Consistent

One of the top principles of good UX is keeping the interface consistent throughout the entire app. A user has to already learn how to use it, so why not make it similar from screen to screen?

Wherever you are, you always know where to look to find left-side links in Gmail.
Wherever you are, you always know where to look to find left-side links in Gmail.

14. Load Quickly

47% of consumers expect a web page to load in 2 seconds or less.

Says an infographic by Kissmetrics. Users are slightly easier on web apps, but loading time is still important. Displaying a part of the content or a loading bar is a great way to keep users on the page.

Sounddrown displays their logo with a simple animation while the app loads.
Sounddrown displays their logo with a simple animation while the app loads.

15. Test

There is only so much a list of tips can give you. Your users are different — ask them what they want and test different ideas with A/B testing, surveys, or usability testing.

If you want to learn more about UX and other aspects of design, be sure to sign up for our free email course below!

Do you have an epic app idea?

Learn the steps to bring your idea to the market in this ebook.

Download