There’s always an easy way to do things and the complicated way. The iPod is as successful as it is because it doesn’t make you think, just think about it, when was the last time you saw an iPod or iPhone come with an instruction manual? Yup, thought so. Those things do what you expect them to do, in other words they are intuitive. These type of interfaces make for a transparent UI. It may be beautiful, but the user will move along with little or no effort. This is what a transparent UI is all about.
Sweet lord, is that some transparent user interface?
Go for the obvious
You don’t have to reinvent the wheel every time you jump into a new design, wireframe or whatever it is you are building. Keep something in mind: your users are used to finding things and doing things a certain way. This means, for example, they will try to look for a way to sign in / sign out of your app in the top right corner of the site, so by all means put it there and not somewhere in the sidebar. It sounds pretty obvious reading it, but trust me, I’ve seen my fair share of this, even client requests that will just receive a big no from my side. In other words: don’t reinvent the wheel.
There is a lot of space to design cool stuff and be innovative, but every single UI you build does not have to be something out of minority report. Trust me, a few years ago I made this mistake, very confusing user interfaces is what you end up with.
It’s all about your content
It doesn’t really matter if you are building a website for a local restaurant or a product for a new startup, the UI should not be in the way: it’s all about the content. The less you make your user’s think on how to find/do something the more they will focus on what they are really there for. Outside of the design world, most users won’t care if you have awesome buttons an trendy textures in your site, if at the end they can’t do what they got there to do. Once again, get the interface out of the way and focus on what’s important.
You can always make a website css-gallery worth, but at what cost?
No need to explain
A few years ago I was designing for a startup and found myself putting in infoboxes everywhere trying to explain how everything worked. I did so, once the site launched the main concern was that it was hard to use. So from then on that became a red light for me: if you really need to explain the user how to do something, then revisit your design. As Steve Krug wrote in Don’t Make Me Think:
…if Web pages are going to be effective, they have to work most of their magic at a glance. And the best way to do this is to create pages that are self-evident, or at least self-explanatory.
A quick checklist
Here’s a small list of the top of my head to keep in mind, feel free to chip in and I will keep adding stuff here.
- Links should be obvious: Make them another color, underline them or even bold. It should be really obvious to me that that is something I can click on. (Standard preference is another color + bold or underline).
- Session info: I bring it up once again, but users always look for a way to sign in/ sign out/go to their profile on the top right corner of the site. I suggest keeping it there.
- Content is king: I’m there for the content, so is the user. Don’t take focus away from what’s important. UI is the means not the end. Unless I’m a designer looking for inspiration, I’m probably not there to see how pretty your site is.
- Navigation: Make it simple, if you have multiple layers of pages, make sure that hierarchy shows in the nav.
- Start with wireframes: You will focus more on content and how to lay out the content instead of focusing on color schemes and pretty textures.
- Guide the eye: Most of the time, users will scan or skim your website at first by going from left to right and top to bottom in kind of a zig-zag fashion. Take advantage of that.
- People = Users: I know I’ve been using the term users here and in every other of my posts, but remember the term “users” is not an abstract being, you indeed are designing for people.
I know there is a ton of more stuff, anything else you’d like to see here? Drop me a note at firstname.lastname@example.org or via twitter @andresmax.