5 Damn Easy Ways To Improve User Experience

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.

Abduzeedo

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.

Amazon

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.

DesignMoo

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. :)

Comments

  1. says

    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 ;)

  2. says

    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).

  3. says

    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.

  4. Mange says

    in styling the links i think that its very important to also use outline: none
    i hate those dotted lines around an active link

  5. B. says

    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?

  6. says

    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.

  7. says

    @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!

  8. says

    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 !

  9. Daniel Buchner says

    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 ;)

  10. says

    @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;}.

  11. says

    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.

  12. says

    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.

  13. Marcus J. says

    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.

  14. Karnac says

    @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.

  15. says

    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.

  16. says

    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.

  17. NinjaCrunch says

    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

  18. says

    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.

  19. says

    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

  20. says

    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.

  21. says

    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. :)

  22. LoVe/HAte says

    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.

  23. says

    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!

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *