The web has been around for 25 years, but we are still trailblazing. We’re still trying to figure out how we’ll build for this new medium. It’s a new frontier, and so far, only a relative few have gone out to start exploring it.
That exploration has primarily been limited to those that could learn how to write code, which is a paltry 0.25% of the world’s population — just 1 out of every 400 people! No wonder Frank Chimero, along with many others, have struggled with the complexity of it all.
What if we were able to liberate web design beyond the requirement to write code, while still keeping the amazing power available to designers at their fingertips? I firmly believe that visual tools are the most reasonable way to do that, because it’s pretty clear that the code-based approach is not scaling.
Imagine how different the world would be today if PCs lacked intuitive graphical interfaces, and were limited to only those who have mastered the command line. That would be a different world indeed. Why would we not want to democratize access to web design in a similar way? It could lead to a sea change of creative innovation on the web.
So, let’s rethink our assumption that code is the only way, and let’s follow the example of other successful creative industries. Let’s make the hard things in web design easy again!
Building a learnable website is much tougher than it sounds. The goal should be a clear user experience that visitors can quickly pick up and understand.
Mobile app designers can solve this through onboarding which helps users learn the interface. But websites can’t always offer lengthy tutorials.
Let’s take a look at learnability and see how you can apply these techniques to your websites. Most visitors know how to browse the web so it’s not really about making interfaces that people learn, but rather just following conventions so they’re comfortable using your site.
Consistency Breeds Familiarity
I mentioned earlier how a consistent interface is necessary for a good design. This means you want to use common page elements that people are familiar with and keep them similar in the long term.
Certain elements should remain in the same place on every page. Your navigation, logo, and main content area should all be easy to find.
But more complex applications need to go further than just info content. Take for example the Dropbox backend which has looked basically the same since they launched.
Once a user learns the Dropbox interface, they never need to re-learn it. That’s the goal of consistency.
When someone returns to Dropbox for a 2nd time they’ll already be familiar with it. Once people have been using it for a while they’ll get familiar with the UI and expect it to behave a certain way.
You can find this same technique on blogs & content sites too, it’s just less pronounced. For example WebDesigner Depot launched a redesign and changed all their hover events to use a moving animation effect.
Now when you have any of the featured story pics, the headlines, or any of the navigation links, you’ll notice there’s a small animation moving those items towards the right.
This remains consistent across the site and it tells visitors what to expect.
Look for consistency in your design and keep those elements consistent as long as possible.
UI Response & Feedback
The mobile world often talks about micro interactions and how these affect behaviors. Those interactions are usually animations or UI responses to user behaviors and they’re crucial to a learnable interface.
Users need evidence that what they’ve done (clicked, submitted a form, entered content) actually had an effect on the page.
You can do this with simple animation effects or by creating page elements that respond to users.
Follow Standard Conventions
I’ve talked about standards in web design before covering the value of consistency for web layouts.
If you’re designing a website meant for average everyday use then you need to follow conventions. It is not the time to get creative or start messing with common expectations.
Visitors want to see navigation menus right at the top. Links should work by hovering and clicking, and if there’s a dropdown it should appear right away.
If you’re designing for learnability then don’t try to reinvent the wheel. Instead look at what everyone else is doing (at least the good stuff) and stick to it.
Stay consistent with your own conventions. Don’t radically redesign your site one day without any way to change back—learn from the failure of Digg v4 and their insane UI change.
Once your design has been online long enough you can bet a lot of people have grown familiar with your conventions. Try to avoid changing these too much.
Granted these tips are just the beginning of learnability so it’s essential to put these ideas into practice and see how they work.