I have always loved playing with different interfaces and determining what feels natural vs what feels awkward or difficult. Web designers do not always sit down to consider just how important the user experience can be. You want to provide the simplest path for new users to achieve one goal to the next.
In this article I want to share some ideas for basic, fundamental truths to building a usable interface. Designing a website is challenging even as a generic idea of colors, widgets, and wireframe mockups. But if you can sit down to consider the interface challenges first, the details fill in much neater and your design talent will flourish.
What do Users Need?
There can be a great deal of arguing opinions on this topic. However naturally the whole system breaks down to getting your users from point A to B as fast as possible. Since you can’t be over their shoulders helping you need the website layout to act this part.
Figure out what the goals are between each of your pages. Getting newsletter signups or member registrations, allowing returning members to login, edit profile settings, the list goes on and on. The word intuitive can be defined as a person acting on what feels right, even without consciously thinking through the process.
Your ultimate goal should be creating layouts to the point where everything is naturally intuitive. It won’t require any internal dialogue for your users to pinpoint how to achieve each individual goal. Twitter can be a great example because much of their interface has to be streamlined for such basic functionality.
The main home screen is very apparent for where you go to check your profile settings or share a new tweet. Now it may require some digging in the Settings panel to find the avatar upload form. But once you find the page it’s very easy to follow through and upload a new image – and you’ll likely remember that page much easier next time.
Catering to Everyone
The problem I have noticed is that not everybody feels intuitive about the same layouts. A fascinating article by Jared Spool on intuitive design discusses the idea of “knowledge gaps”. These are actions which must be taken by the user to achieve the desired goal – but some visitors do not know what to do!
But if you feel that a full tutorial page is a bit too much then consider adding some smaller in-page tips. If your layout isn’t too cluttered then you may find some room for adding 2 or 3 sentences explaining how to perform defined tasks. This will again include everybody who doesn’t understand the system while still offering support for returning visitors.
Build Small and Expand
I often find that my best design work comes from starting with a very simple idea. Minimalist interfaces can look good if you need to focus on a specific type of content (videos, photos, other media). But web design can encapsulate so many complex layouts and these ideas shouldn’t be restricted in any way.
If you can build some idea in your mind for how the website should look then it’s easy coding a basic draft. At this stage you could make copies of the HTML/CSS layout and modify edits for each. Version control systems like Git make this process a whole lot easier to manage.
But having a very dry, simple layout to start with is what offers so much creativity in the first place. You aren’t restricted to keeping your sidebar exactly the same as every other website and you can even try out totally new ideas. If a new bit of code feels awkward then just remove it and replace with another module.
Perform some Trial Runs
You will actually need to step away from the computer and get in touch some other people for this technique. I recommend getting a very small group of individuals from different technical backgrounds to demo any layouts where you’re not so confident in the results.
It’s possible to just share links with other folks you’ve worked with online. However you can’t be there first-hand and watch how they interact with the website – if this isn’t a problem then go for it! Most web professionals understand how to provide constructive criticism and so you won’t need to hold their hand through the process.
But it’s also difficult to get a knowledgeable response about usability and the intuitive factor of any website layout. Try not to fall too far into details, web design is so fluid that it’s always possible to change things later. But even just two or three small trials may help you catch some mistakes you hadn’t noticed before.
Study the Masters
Possibly the best way to understand usable interface design is by spending your time using lots of different websites and web apps. When you can pick out tidbits from many websites you’ll begin to piece together ideas for your own interfaces. Much of these same ideas have been borrowed from previous designs over the past decade – and this is what pushes innovation.
I can’t give examples of any perfectly intuitive user interfaces since the idea can be highly subjective. In truth this comes down to a bit of cognitive attachment and understanding what makes users feel comfortable.
But never forget that you are also a user! Try keeping a small list of websites with notes about interface segments that you really like. Over time this can grow into a catalog of ideas for constructing and designing the best digital interfaces you can imagine.
Building an intuitive interface will require time and lots of practice. Not just practice coding websites, but also practice using good interfaces and distinguishing what makes them so great. The digital world is starting to blur between mobile & web which makes it that much easier to port over new ideas into your projects. If you have similar ideas or questions on intuitive web design feel free to share with us in the post discussion area below.
You might also like…
40 Recently Released jQuery Plugins →
25 jQuery Plugins to help with Responsive Layouts →
20 jQuery Image and Multimedia Gallery Plugins →
50 jQuery Plugins for Form Functionality, Validation, Security and Customisation →
15 CSS3 Navigation and Menu Tutorials and Techniques →
20 CSS3 Tutorials and Techniques for Creating Buttons →
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials →
22 CSS Button Styling Tutorials and Techniques →
50 Fundamental jQuery Controls, Components and Plugins →