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:
border-bottom: 1px solid #6666FF;
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. :)