It’s no secret that in order to build a successful website or web community you have to design with the users in mind. Of course you can’t forget about optimizing for search engines, but let’s focus on the visitors since they’re the ones who are using your site and interacting with it.
You probably visit tons of sites daily, and many of them you visit for the first time. Being a web-designer I find I spend more time on a new site than the non-webdesigner visitors. I’ll take the time to analyze the page layout, flow, typography and I often take the time to browse and visit more pages/posts.
I have to say, at least 15% of the sites I visit offer a poor user experience (yep I just made that number up, but it’s pretty accurate). Good thing the other 85% got it right though :)
So, let’s see what we can do to improve the user experience on our sites. Those are very simple tips but we sometimes forget about them.
Can I Click Your Logo?
I’m sure it’s happened to you before. You find yourself on a new website, browse a bit and then decide you’d like to go back to the homepage and you try clicking the logo… nothing happens. Now you got 3 options:
- Click the logo again and hope it’ll work this time
- Find a ‘home‘ link and click on it
- Leave the site
Why not make it easy and link that logo to the homepage? In most cases it’ll take about 30 seconds to do. And all of us who expect that clicking the logo will take us back to base will enjoy a better experience.
Easy To Use Navigation
There are lots of things to consider when designing a navigation bar, from the position on the page to the style of the menu itself. The most common place for a nav bar would probably be around the top of the page, above the fold and just below the logo. This is very common for one good reason: it works. We’re used to it being placed around there.
Of course that doesn’t mean you can’t be creative and do all sorts of crazy things with your nav bar. (but don’t get me started on all-Flash websites that try to be clever with their navigation and totally ruin the user experience) :)
One thing that many people forget is to highlight the current page in the menu. If a user is on the ‘about‘ page for example, the ‘about‘ link in the menu should probably be styled differently to indicate which page the user is on.
Make It Easy To Search And Find Content
It amazes me to see that many sites don’t have a search bar. I think this is a no-brainer and it will dramatically improve the user experience. If your website doesn’t have a search bar, please add one, your users will thank you!
There are other ways to make your site easy to search. For example you could add a list of categories or even a tag cloud. If you run a blog this should be fairly easy to do as most blogging softwares (WordPress for example) use categories and tags to categorize content.
Styling Links Properly
I think we all know how to spot links on a webpage. They’re usually a different color than the body text and they’re sometimes underlined. Styling links properly can go a long way in creating a great user experience.
Let’s take the recent Abduzeedo redesign. Every link is easily identifiable and most, if not all, clickable elements (text links and linked images) have an active state that pushes the element down by 1px. I find that’s a really nice touch.
Let’s see how you could style links. Here’s a basic example that uses the border-bottom property to add emphasis to the hover and active states:
a {
text-decoration: none;
color:#FFF0F0;
}
a:hover {
text-decoration: none;
color:#6666FF;
border-bottom: 1px solid #6666FF;
}
a:visited {
text-decoration: none;
color:#6E2C00;
}
a:active {
text-decoration: none;
color: #3D3D98;
border-bottom: 2px solid #3D3D98;
}
Feedback And Welcome Messages
I like it when I visit a site and I see a welcome message and my name displayed. I enjoy visiting Amazon.com because every time I visit I see a message that says ‘Hello Jon Phillips‘. It makes me feel good. Of course if the goal of your website is not to get people to register, a welcome message is a bit useless, but it’s a must for an online store.
Feedback messages and contextual help can also improve user experience. How often do you fill out a signup form, hit submit at the bottom, and then wait for the page to load only to find out that you didn’t enter some information correctly. I’m sure it pisses you off too.
This can be avoided by adding some simple hover boxes, tooltips or pointers to the form fields. Guiding the user throughout the whole process will make for a much better user experience. Basically, don’t wait for the user to hit that submit button, give feedback right away.
Let’s take the ‘change password‘ box on DesignMoo. When you try to change your password you’ll get different error and warning messages to help you create a more secure password.
What Else? Share Your Thoughts!
Of course we should always keep in mind the site’s audience (a teen site will be very different than a real estate site). Things like location, age, sex and purpose of a site will greatly influence design decisions!
So, what else would you add to the list? Please feel free to chime in by leaving a comment below. :)
Hey Jon!
Nice list! What about making sure that footer of your page also contains some basic navigational tools. A “back to top” button, graphic or link can be useful, especially on pages with long articles.
If I’m at the bottom of a page, I will also often look for a small, secondary menu if I want to navigate to another page.
Neither are essential, but I think they are nice touches ;)
Hey Matt! Thanks for the comment – adding nav tools in the footer is a great idea, so is adding a ‘top’ button. :)
I hate headers that are so big that I have to scroll down to read the first post. If you’r on 15 inch screen this happens alot. And if you have a latop your also stuck with the touchpad, which in most cases are not good for scrolling (need to use both hands on mine).
Great tips! I hardly ever use a “home” link anymore, I’ve gotten in the habit of dropping in a conditional statement to make it a link if it’s not the homepage. I think people expect that these days.
Nice post! It’s always difficult to make clients understand the importance of a simple and well-built navigation system on their website.
in styling the links i think that its very important to also use outline: none
i hate those dotted lines around an active link
One thing that makes me crazy is when a company’s phone number isn’t on the front page or at the bottom contact info line. Why make me work to contact you?
Great list! Call to Action is still the most effective (and simplest) solution to improving User Experience in our opinion. Providing a clear path for your users and removing the question marks from their minds is our motto over at http://www.designzillas.com. Thanks again for your input Jon, great article.
Excellent tips! I’m glad somebody finally wrote something about this. Especially the clickable site logo. Great job.
Great article. I totally hate going to websites where I can’t click on the logo to take me back to the homepage.
@Daniel: good catch, thanks for the heads up (there’s a couple things I need to realign I think) :)
@All: thanks for all the suggestions – there’s some great ideas in your comments for sure!
Would like to know if you can be sure that people know that the clickable logo is back to frontpage? Is it safe to ship the ome link.
Great article. Here are some more:
LINKS & BUTTONS – To extend your link idea : Make sure that all clickable elements on the page follow the same style and are obvious without hovering over them. Do they look clickable? Also do not style headers with the same color as your links, if they are not links. This is a common print designer mistake.
LESS IS MORE – Having 19 different sidebar elements and intertwined Google AdWords everywhere is simply noise. It makes the visitor scan through everything looking for real content. Having ads styled like your content degrades your content and leads to visitor attrition and abandonment (ie. think Wired Mag with their ads that look like content but are adverts). Let your content breathe. How about some white space.
Peace out. Designers, read this article !
Putting “overflow: hidden;” on the .postfooter class for this page would be a damn easy way to have the content of the post footer not spill out of its container ;)
@Jon, excellent post. I couldn’t agree more with you on the Flash-based websites. ;)
My biggest gripe when viewing websites is when input buttons don’t use cursor:pointer. I think browsers by default should make every clickable element display the standard pointer cursor. (As I type this I notice it’s not that way on the comment form… sigh)
Another style concern is with Safari’s outline border on form elements. It’s such an annoyance to build a beautiful design with pixel-perfect details only to run up against a fuzzy border surrounding a form element on focus. As part of my standard CSS resets, I always include :focus {outline:none;}.
I agree, feedback is key. But you need to make sure you organize and analyze it correctly and not just dump it into a database. This is why drop downs are great for feedback.
You may like this article from Web Site Magazine that reviews usability tools http://bit.ly/32mqlQ
I am affiliated with http://www.usertesting.com but the article covers several other tools as well.
Amanda
Very nice article, I digg it. Usability is key and fortunately it is starting to catch on.
One other thing I would also recommend would be a “Back to Top” link. It’s super easy to implement and adds great benefit to your website.
Excellent tips, and some good ones in the comments too! Over the years, I’ve had an awful lot of clients ask for a ‘go back’ button somewhere on the page. I point out that there’s a perfectly good one on the web browser, but they’re often insistent. What does everyone else think? Are these a good / not good idea? The only real use for a special in page one, that I can think of, is when you’ve been through a series of forms, and the back button would take you somewhere more meaningful. They’re also useful in ‘sequential forms’ to go back to the previous form page, where you’re coding the steps, rather than using traditional pages.
Good collection.
“Can I Click Your Logo?” was a good one.
Great list! Some handy tips in there :)
Very great and useful article. Some infos are new!
I struggle to use websites that fail to clearly indicate the focus state, which leaves keyboard-only users like me having to keep a close and constant eye on the browser’s status bar as we tab, just to know which link has focus. This relies on the URI being unambiguous, of course. That has to be one of my biggest peeves and it is so easily avoided.
@Mange
That does nothing to improve UX, and in fact probably hurts it. Leave conventions the way they are. Changing a built-in part of the browser GUI just so that it looks better is usually the wrong decision.
I think its incumbent upon any serious website to do a little usability testing. For me, this could be as simple as asking 2-3 people (separately) who have never seen the site before to sit down and perform some basic functions…such as navigation, finding info, returning to the home page, placing an order, sending feedback to the webmaster/company, etc. It’s SO obvious that this is rarely done that most sites are painfully inadequate in at least one of these areas. Your list is a great start, though…and raises an important topic.
good tips all around. i like having large enough text just to be on the safe side and as you write making sure the links are clearly visible.
This is a great post. Call to actio. Help the viewers know what they are doing and what they should do.
Thanks a lot.
cheers
Lucky me,saw this awesome site.and thinking of user experience and the worthy list mentioned above i think wordpress is really upto the mark in it.
Hi Jon,
well done round up! I almost forgot the “link-the-logo” point. The 4th most visited page of my site nadelspiel.com is a search & find page with an overview over all the topics in table form and alphabetical lists of tags. Decreased the bounce rate to 10-13%.
http://www.nadelspiel.com/finden/
Kind regards from Austria,
eliZZZa
Nice list there. I like well designed, accessible websites.
The clickable logo is always a good idea, it seems common practice these days to do that. I also like the tips about the navigation.
All in all, a good read. Thanks.
Awesome! I love those kinds of logins.
I normally quit a registration when I get an error and no description to it.
An anchor text within relevant to the topic perhaps…btw, I like the idea of clickable logo thanks.
Great list. Happy to see almost all except for the current page requirement at well taken care of on Inspiring Pixel. And yes! can I click your logo is actually true. I end up deleting the permalink portion in the URL to reach the homepage in the last and final effort. :)
Sorry to appoint this but you forget the LoVe/HAte rule, order matters:
a:link { }
a:visited { }
a:hover { }
a:active { }
You know for browser consistency.
These might have been said already but…
For websites:
1.) make sure that navigation at the top, hidden or otherwise (popup/out) is easily identifiable. This is easily overlooked by professional designers.
2.) Even though most monitors now have exceeding large space, you need to take into consideration that headers can’t take up 50% of the screen. Even though 800×600 pixel monitors are not the norm now, it still should be used as a basis to be used as a “standard” for the beginning of a content area. No one should have to scroll to start reading anything that you are wanting to say.
3.) contrast contrast contrast…
4.) optimize your images properly. You can still use gifs and they give great quality and produce exceedingly small file sizes, and you don’t always need to use PNG with 24bit for alpha. Design is about thinking, not about being lazy (not to offend). This may not seem like much of an interface issue, but in fact it is.
5.) interface design is about creating an environment that is memorable. Not just some text on a page with a banner, or a Flash site with some “funky” animation. But creating a memorable environment that becomes part of the interface. That’s where it becomes fun, but in turn, takes a long time to design. There are a lot of good examples that are out and about and have been linked to lately on this sight.
6.) If the page is long, give links that link back up to the top, and even perhaps also site link as well
7.) footer should always have your site links, but also all your other information too, such as contact, and perhaps an form (which seems to becoming big as of late).
8.) Other good things to take into consideration with good interface design for the web is to link into all of your other social media sights. Show recent postings on your own site (1 or 3), recent tweets, as well as links to such items.
9.) and the most important part of all is to make everything as simple and as self explanatory as possible. You shouldn’t have to write a manual for anyone to walk through your site. It should be enticing, personal, and warm… regardless if it’s personal or corporate.
Now all of these things work for both corporate and personal sites across the board.
For Interactive CDs & DVDs, the rules are very much the same but for the most part, the amount of the content you need to deal with is far less, but the need to create that unique environment within a fixed area is the only way you can create an interactive interface.
Cheers!
You have a very informative blog that offer a lot of great ideas.
Fantastic article on user usability, five was good but it would be great if you have another five?!
Useful tips, I sure am gonna apply some of them.
Personalized user experience is what makes most of us happy. Nice tips
I like the click on logo part.