Four Aspects of a Usable Modern Web Interface

Dec 19 2009 by Brujo Owoh | 20 Comments

15 years ago, the web didn’t look the way that it does now. The web was dull, unattractive and less visually appealing. Interacting with web pages was not possible, and the web was simply a static information space.

Well, a lot’s changed since then. Today’s modern trends on the web are sophisticated, alluring and engaging. Building interactive and amazing interfaces using Flash/Flex or Silverlight has become easier and more accessible to modern-day designers.

Four Aspects of a Modern Web Interface

It’s easy to get caught up in the creative concepts of modern web designers. Just peeking at The FWA, a popular design gallery for Flash/interactive websites, will give you a glimpse of the creativity and character of the interfaces that today’s designers build. Their concepts are out of this world, and it’s only going to get better.

But where does that leave universal design? And usability? Do they have to sacrifice these important factors in order to provide their users an out-of-this-world experience?

In this article, I’d like to highlight four aspects of usable designs in today’s modern web – the things that you should keep in mind when working on your design projects.

1. The visual design

Remarkable designs are very creative and push towards the extreme limits of conventional (e.g. safe) designs. They’re distinguished, and they make memorable positive impressions on the people that see them.

But how much is too much?

Keeping your visual design simple yet memorable is a challenge, but a challenge that you must be able to negotiate when it comes to creating usable designs.

To improve the aesthetics of your interface, use white space to visually organize the page. Grouping related design elements and separating distinct elements can aid users in quickly finding the set of information they’re interested in.

The graphics you use should be able to illustrate, inform and aid the readers. Visual clutter should be avoided, and every visual element on your interface should serve a purpose.

In the following example, you can see how Bigo & Twigetti arranges visual elements by spacing them out and making them purposeful as visual cues as to what the website is about.

Bigo & Twigett

2. Dynamic feedback

Do you ever get bored of the standard static site feedback (the ones that appear after you’ve filled out your web form, for example)?  I do.

Today’s web interfaces are evolving in such a way that you don’t know what to expect when you get to a website. I like the experience where my actions provide a unique response. Appropriate and dynamic feedback gives users an immersive and interesting user experience.

Over at Sergey Tyukanvo’s online gallery, feedback is based on the real world. Users will be more likely to relate to your website if physical analogies and cultural standards are utilized.

Sergey Tyukanvo's online gallery

3. Information architecture

If a user can’t find what he/she wants in as few clicks as possible, they’ll leave. Use metaphors that are easy to identify with. Navigation should come naturally to the user. Controls should be highly visible.

It should be obvious to the user what his/her actions should be on your website, making retrieving information a smooth process. Check out the Coca-Cola site: it’s arranged in a manner that makes it easy to find the information you likely want to know.

Coca-cola

4. Constraints

By definition, constraints mean restricting possible actions that can be performed. Another way of looking at it is giving users more control over possible actions that can be performed; a classic half-empty versus half-full glass scenario. That way, they feel like they’ve achieved something.

John Ruppel’s portfolio is a unique example. The options menu allows users to filter between interface styles, backgrounds and categories in a totally efficient manner. Users are, thus, motivated to learn more about these various options they have control over.

John Ruppel's portfolio

Your thoughts?

What are other important factors to consider when designing a modern user interface? Share your thoughts with us in the comments.

Related Content

About the Author

Brujo Owoh is an university student majoring in Multimedia Systems. He specializes in web design and 2D animation. In his spare time, he enjoys reading fiction, hanging out with his mates, or keeping up with design trends on Twitter. Want to hire him or connect with him? Get in touch on Twitter: @Brujo2.

20 Comments

Diego Quesada

December 19th, 2009

Good ideas to refresh knowledge about web design… I will look into my web to see if it complies with this…

Thanks.

Derek

December 19th, 2009

“Users will be more likely to relate to your website if physical analogies and cultural standards are utilized”

ridiculous. It’s not a museum it’s a web page. You should not bend the human-computer interface to real world metaphors. I can’t right click on things in the real world, I can’t ask the security guard where the mona lisa is on the faux museum web site. I’ll save my whining about the use of Flash.

markinyan

December 19th, 2009

One who know what he wants, wil find everything on any page. Web design has a lot of opportunities today. You just need an idea, really great idea, and your site will be WOW.

Joost

December 19th, 2009

Can’t say I think these are examples of modern web design: mystery meat navigation, full flash sites, etc.

“What are other important factors to consider when designing a modern user interface?”
I think usability, accessibility, (web & interface) standards, conventions, clear messages, clear navigation, etc.

@markinyan “One who know what he wants, wil find everything on any page”
Well this might be true, but most users don’t know what they want when they arrive on a site the first time. Or at least they don’t know where to find it.

I think most people come to a site to make their lives easier, usually because they can find information or a service on that site. Not to find the navigation or to be wow-ed.

So I believe it’s the interface designer’s job to make the visitor’s life easier.

Chandan

December 20th, 2009

great article
Dynamic feedback concept is pretty good

Arcnerva

December 20th, 2009

Its depends on the site. But typically I think most users do not want to deal with an overly complex interface. If your content is hot, then it may compliment it well. But if not, its usually more frustrating than impressive.

Really it depends on the context. Just watch the load times and how “creative” everything is getting.

Remember what your goals are. Then work around them, not over them.

AllProgramming

December 20th, 2009

I agree with all your points more especially point 1. People completely underestimate the power a visually appealing program has over the user. I have on occasion seen bad software programs that look visually awesome and as a result get the buy in of the client.

John Koht

December 20th, 2009

Great Post! I completely agree.

I think the 4th point is one that is becoming more important for interactive/flash sites, allowing users to view a portfolio in different ways, i.e. grid, slideshow, 3D carousel, list, etc. Allowing users to experience a website on their own “terms” is one of the most important aspects of user experience. (example: http://www.birdman.ne.jp/main_en.html#/portfolio)

As for speed, yes, it is important, but it depends on your audience. If Sixrevisions.com was slow people would avoid visiting, but if you are looking for a great photographer and you visit his flash website and it takes a couple of seconds to load, I don’t believe that will have much effect on a user’s willingness to wait.

Great article, nonetheless!

Victor G.

December 20th, 2009

Man, I’m all about “less is more”. Dynamic instant feedback is also a good one, and high contrast to distinguish elements.

I think in terms of content, having a clear indication of where you are is very important for users (ie: clear headers, clear simple navigation). Call-to-action buttons/navigation is important too!

Astho

December 21st, 2009

Good concept, thanks,…

Dane Ash

December 21st, 2009

If the design distracts from the content it is going too far. There was a time when all requests were for shock and amaze web design which far out weighted the site content in effort. I am glad we have progressed since then.

Noel Wiggins

December 21st, 2009

Never before in history have we designers known so much about website design, it shows in the evolution of websites, even government sites are looking better now.

It seems as though the internet is turning into its own medium, that is not unlike any other medium.

Anrkist

December 21st, 2009

I’m all for design but when was the last time you did a search and ran into a design heavy site? These sites might work if the have money for advertising but for many web sites, money isn’t always available. Give it a good usable design and one that Google can read.

Ryan

January 20th, 2010

Not to be rude, but some of this is interaction design 101, and some of it is just plain wrong.

1. The visual aesthetic of the site does make the user more willing to put up with using it, but the design should be tailored to the audience. Google uses a lot of data and separates it cleanly with whitespace, but what if your audience is primarily visual, like a skateboard website? Imagery becomes paramount. Research is key to a great visual layer.

2. Dynamic feedback is great if it’s subtle and allows the user to confirm their actions without thinking, but too much can get annoying fast. In-line form validation? Awesome. Ridiculous page transitions? Really annoying. We typically like to use metaphors as opposed to analogies because it allows us to translate real world behaviors into web norms. You have to work within the medium.

3. Study after study has shown the users will continue to click into a site as long as you’re giving them something useful and relevant to click on. The click-depth lie is just as misleading to designers as the “page fold”. Good information architecture is letting the person know where they are within the structure of the site, not limiting the structure of the site to make everything appear in one place.

4. There are a very limited number of applications where a user wants to spend time to get to know how to use an application. That’s why we have progressive disclosure. Refer to the 80/20 rule, 80% of your users probably only use 20% of an application or site’s features. So you design around the happy path and offer “advanced” features only for the people that want them.

Finally, I don’t really know why the author chose to use terrible websites in the examples. There are so many great and useful sites that aren’t built in flash just to be flashy and allow people to accomplish a great deal of tasks.

PC

February 8th, 2010

I think this article hits at the foundations of good web design and the aspects that every web developer must get right, but more important than memorable design is usability…

What good is a memorable design if the user can’t get what they want from the site?

I think that first rule about creating websites is to understand that users are very busy. There are just too many demands on their time. What they want (and deserve) is to get specific answers, in the shortest possible time.

Yesterday, I spent several hours searching for a specific time & attendance clocking system. Most of the sites were unmemorable, possibly all. But when I found sites that might offer what I wanted, I bookmarked them to come back later. Now, they don’t have to be memorable for me: to get onto my bookmarked list, they have to be valuable in terms of the answers they provide.

Searching threw up several issues for me: Once I got to a site, I wasn’t able to find the information quickly because no one thought about me. The sites were mostly self-promoting and time-consuming to work through. I would have appreciated clear, unambiguous headlines (that I could scan through), clear answers to my questions such as system requirements for their products and most importantly, clearly outlined benefits of their products. All of this I had to search deeply for. Many websites were just too cumbersome to explore.

Here are a number of primary questions that I think every website must address:
1. What can your product do that will interest me?
2. Why should I do business with you?
3. What can you guarantee me?

I don’t care if your benefits are unique or not, I just want the right combination specific to what I want.

Sorry if the above sounds abrupt or selfish, but I represent the ‘holy grail’ – a web visitor and potential and immediate buyer!

One book that I found very simple and striking is Steve Krug’s “Don’t Make Me Think”. This provides a journey into the mind of the site visitor and how she thinks. He discusses conventions that work (so why change them), how users “muddle” their way through, the visual hierarchy, usability testing and so on.

Anyone serious about usability should give thought to these issues.

Boldis Media

May 7th, 2010

Thanks for the article about trends in web-design, it’s very useful for our studio.

Dap An De Thi Dai Hoc

May 13th, 2010

One who know what he wants, wil find everything on any page. Web design has a lot of opportunities today. You just need an idea, really great idea, and your site will be WOW.

Igor

December 10th, 2010

There are some nice examples here, I especially like Sergey Tyukanvo’s online gallery, it is much more original than usual clickthrough picture gallery site. To me, that site is memorable.
Also, my opinion is that it is better to use flash as part of your site, not the whole site, use flash to add some magic and special functionality if needed. I am also for “simpler the better, less is more” website concept. Thanx for the article!

MrMe

June 23rd, 2011

I found out the hard way that speed means money. When i switched on using part of my site : http://www.chefbabait.com in flash format, my revenue went down dramatically.
It’s all because many people have a weak internet connection and a very low patience level …

Leave a Comment

Subscribe to the comments on this article.