The User Interface (UI) has been around since the 1960s when Douglas Engelbart and a team of researchers at the Stanford Institute developed the first interface that was mouse-driven, and employed the use of hyperlinks. Over the years the practice of designing and developing methods of navigation grew from basic principles of user-centric and logical interfaces to presenting information in ways that not only encourage interaction, but solicitation of emotions and convincing (persuading) the user to trust with just what they see in front of them.

User Interface Design can be the design of a Human Interface Device (HID), a software application or a website. Below we will look at 5 great examples of well-thought UI Design. Though they may push boundaries of what some Usability, HCI and UX evangelists would consider a sin, they realize it’s sometimes ok to flip them the bird to give the user a better experience.

The loaded question

What makes great user interface design? Let’s tip-toe around this question because it’s such a subjective concept. The simple answer is, great user interface combines eye-pleasing graphics (notice we didn’t say eye-catching), intuitive functionality (notice we didn’t throw the word "usability" around) and a bit of the obvious with a side of exploration.

Let’s go back to the words we didn’t say and clear a few things up. Phrases like, "eye-catching" and "make it pop" make a seasoned designer want to pull their hair out. And personally every time I hear it I think of the the parody video, "Microsoft designs the iPod package" from a few years ago. Elegant touches of design are good things, but you don’t want to distract the user from their task by making every “important” piece of information jump off the page (box).

Then there’s the word "usability". Don’t get me wrong we should all follow some feverishly strict usability guidelines, but there are several techniques that we can and should employ to make the "usability" of a site a little more attractive. Which brings us to our first example:

In the examples below HGTV takes what could have easily been a simple drop-down menu and applies a very creative use of CSS, rounded corners and semi-transparent pngs to house the revealed menu in a elegant display of yummy navigation.

The same style is applied to the search field but on top of the menu styling, the cleverly placed “Search In:” menu is placed inside the text-field. And notice the gloss and reflection of the magnifying glass on the button. Attention to details like these give the visitor a feeling of trust. It’s the psychology that says, you CAN judge a book by it’s cover. It’s still a search box, I can still find it, and it’s still functions the way I would expect it to. It’s just damn sexy!

The three C’s, “Clean • Concise • Clear” that is why A List Apart makes it into this roundup of great UI. Their use of typography, white space and apparent 960 grid layout make this a perfect design for scanning and readability.

The 960 grid system is to design layout what Chewbacca was to Han Solo.

A 7 foot furry Wookie from the planet Kashyyyk??

No no no, I mean it’s our best friend, comrade, our go-to guy, the one who keeps us from getting into trouble. Based on a width of 960 pixels, it is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. Which gives us vast amount of options when deciding on column width and margin distances. A List Apart uses this to keep their site very clean and help the user focus on what they go there to do. In fact their site is so admired other sites use them as a model to design their own sites.

Ok so it’s not a website per say, but it is an interface and if you have a WordPress Blog and love short-cuts and hotkeys as much as I do you’re in for a treat!

Fluency Admin (current version 2.1) is a plugin for your wordpress admin interface. It replaces the existing navigation with a very nice menu system that is collapsible, and has menu and sub-menu shortcuts that will have you blazing through the admin panel in no time. Fluency made the cut as a great User Interface Design because it took the ordinary task of navigating through WordPress Admin menus and gives it’s user an extraordinary user experience.

When we use something new and then can’t imagine ever using it any other way or think where have you been all my life, it’s these types of interfaces that change the way we perceive how things should work. Which is a perfect segway to our next UI…

Over-hyped? Perhaps, but when the iPhone and iPod Touch came out it was undoubtedly a paradigm shift in how we use these types of devices. Pre-iPhone era, we had mobile phones or Smart(ish) Phones running Windows Mobile and Blackberrys, but that was about it. Sure, these devices had apps, touch screens (via stylus) but compared to Apple’s iPhone and more specifically it’s user interface the iPhone not only changed what we expect from a mobile device, but subsequently changed how other mobile phones looked and worked.

Apple has always put a huge focus on user experience. Sometimes to it’s own detriment as it pertains to a proprietary nature, but this is to ensure a precise and consistent experience for the user each time. There’s a video from a few years ago that depicts the iPod packaging as if it were designed by Microsoft. It’s this “Direct Mail Marketing” tactic which tries not to persuade, but to confuse. Overloading your audience with mountains of irrelevant information and this “make-it-pop” mentality typically results in the bastardization of some poor designers vision. Taking creative direction from VPs and executives with little to no creative background is as dangerous as believing everything you read on the internet. Oh, wait.. I mean.. *quietly steps off the soap box*

As much as the iPhone is capable of doing, it’s simple to use, has a gorgeous user interface and the learning curve is about as steep as the Salar de Uyuni on the Altiplano of southwestern Bolivia.

From it’s multi-touch capabilities to it’s keyboard functionality, finger swipe page scrolling, gyro-sensing horizontal or landscape positioning and two-finger zooming, it’s these new user interface features that make us cringe at the thought of going back to the way it was. Though we should have had Cut, Copy & Paste from the get go, the iPhones execution of how these tasks are achieved with a touch interface is nothing short of a ballet of the fingers.

Last but certainly not least, Tuts+ is a network of sites dedicated to education by tutorials. From Photoshop and Illustrator to coding Actionscript, JQuery and PHP. The reason Tuts+ makes the list is for its, "Familiar Factor".

The consistency of the brand from site to site within the network give users a sense of familiarity and puts them at ease knowing that though they may have gone from PSD to CG, they’re still where they need to be. Removing that question from the equation helps us to not second-guess where we are and how to get from point A to point B every time. Even sites outside of the Tuts+network but still within the Envato "family" share this same feeling and style which is familiar to users.

We aren’t "aware" of this cognitive response to visual stimuli when it happens, just like we don’t think about how to drive to work every day or when we get a new keyboard or mouse we dont have to relearn where the keys or buttons are. It’s the beautifully designed consistency and brand recognition that puts Tuts+ in this list.

There is another site that uses this same type of strong brand recognition and familiarity from network to network, but the name escapes me at the moment. ;)

Conclusion

In these 5 examples of User Interface Design we’ve seen that:

Adding a touch of fun to everyday elements can not only give the user a better experience, but it may make the decision to even move forward for them.

Keep your readers focused by providing a clean layout with good use of typography.

Providing a faster way to complete a task is a win-win across the board.

Be innovative and dont fear failure. Sometimes out-of-the-box becomes the standard by which all others will mimic.

Consistency, consistency, consistency! Your brand is your handshake with your visitor, it’s your commitment to the user to always let them know whoyou are and where they are.

If you liked this article, please help spread the news on the following sites:

It’s interesting to consider that Usability is contextual to the audience. While there are some universal usability principles, it depends on the intersection of the system’s functions and the user’s needs (task or informational). This context will greatly influence the design and architecture.

With that, HGTV’s choice to make a simple dropdown into a new interface breaks convention. Was this wrong? No, but it does introduce risk (large or small, risk is risk). The question is context: is the HGTV audience okay with breaking this convention? Ironically, the hover-over main menu options do more to undermine the usability of the site than the unique search box approach! The hover-over menus contain too many links which have no visual distinctions, and causes the user to stop and read every item. Talk about breaking convention and not provide a faster way to accomplish tasks.

So, I’d temper UI “fun” with assessing the usability risk there may come with breaking convention.

I believe usability should drive your design, and then branding, layout and innovation should enhance it.

About the HGTV menu. I think they’re broken it down quite well, horizontal dividers separating main content areas with headers above each section. I will concede the fact that they could have made a more obvious on-hover state than just an underline, but I still feel the underline is acceptable in this instance.

Agree with usability up front, but we have to be careful when giving carte blanche authority to it.