How User-Friendly Is Your Site?

25Mar08

I sign up and navigate through a lot of different Websites and services every single day so I can create screencasts to help my readers decide if they want to try them out or not. In doing this, I notice every little detail from arriving to the site, to locating my account settings, to signing out. It’s my job to know where the help pages are, how to change a password, and how to generally navigate through whatever site I’m currently creating a screencast for. I can’t tell you how many times I’ve ditched a service that I actually thought was kind of cool, but navigation was so horrible that I didn’t want to share it with you here – And that’s the topic of the screencast today.

I want to know if I’m crazy or if the very minor issues I’m showing you really do matter. I don’t think enough start-ups realize that it’s not only important to have a functioning site, but a functional site as well. What do you think? Let me know what issues bother you in the comments after you watch the screencast below:

Click Here To Watch The Screencast 3m19s

Want this screencast on your site? Click here to get the code for this and other DemoGirl screencasts!



54 Responses to “How User-Friendly Is Your Site?”

  1. 1 Colin Griffiths

    Wow. I think you’ve opened a can of worms with this one. Yes it is irksome when you want some indicators where to go to. My pet peeves
    1. Contact us How many times have you wanted an answer and you are sent to numerous FAQ or other areas. The answer is not there. I find often you have to dig deep the find, at the pack page, in 4pt type there it is. Microsoft are a big offender here. Try going to their Knowledge base. (It could be some sort of a conspiracy)

    2. Credit Card numbers. How often do want you more info and before you buy and there is a demand for your CC details. I run like hell from this site. No order. You know it can be a very good product but poor site design will lose the sale.

    Anyway that’s my say. There are lots of other peeves, too numerous to mention here.
    Cheers Colin

  2. 2 Rick

    Very insightful. Thanks for reminding companies that we are still the customer. Good job!
    -Rick-

  3. Colin, yeah, I thought this may turn into a festival of complaints but it could prove to be useful to someone looking to improve their UI. I’ll add to your list another one of my pet peeves – There’s a link that says “register for an account” so I fill in all of my information, click on submit, and I’m greeted with “Thank you for your interest! We’ll let you know as soon as we open into public beta!”. Sneaky, sneaky…

    Rick, hopefully someone’s listening.

  4. Great video with some excellent suggestions. I work for a company that creates financial software and as a QA engineer I regularly test for our software’s user interface.

  5. 5 Al

    I’m having trouble with a software company that has a top down approach to software design, we’re the experts, we’ll create it, sit on your hands and when we’re done figure out how to use until we decide where else we want to go with it. Very frustrating and I suspect that they are dinosaurs and are not utilizing their user base well. Can you suggest an article or website that discusses modern user/software designer paradigms that I can share. I’m not a techy.

    Thanks

  6. Wonderful idea and information!
    I dugg it.
    http://digg.com/design/How_User_Friendly_Is_Your_Site

    Pai

  7. Hopefully WordPress is taking care of that for me in their evolving improvements.

  8. Found this on a Twitter tweet, great overview! I’m working on a community project right now that I realize is blowing it on 2 of the points you made–we’ll have one unhappy designer tomorrow morning…

    Thank you

  9. Scott, don’t tell them it was me… 😉

  10. Some good tips there. Thanks.

  11. Hiya Mol:

    Very informative screencast. Looks like you’re branching into web usability consulting as well. As you no doubt noticed, it IS a growth industry, but then, so’s screencasting. Cute pics, too. I especially like the “pouty face.” The other images were compelling as well. Almost like a Zero Punctuation review, without the expletives.

    One minor critique, if I may: I did notice a fair bit of mic noise on this screencast – both CS and popular audio editing packages have a noise gate feature that might be good to check out.

    Hey, I’ll be coming to the SF bay area in the next month or two to do a couple of CS courses. Want to meet up?

    cheers, d.

  12. I enjoyed your article. It definitely made me think of a couple things. My site uses WordPress and the one thing I didn’t like about it was the sign-in page. I put on a better sign-in option, but it still goes to a seperate page to log on. I’ll have to review that one.

    I, too will be Digging this one. I am also bookmarking the site.

    Thanks again.

    Jeff
    http://www.geekazine.com

  13. Jeff, thanks so much. I could have gone on and on in this screencast but I just wanted to make a point and open some eyeballs.

  14. Never thought about navigation so closely. Good point!

  15. 15 Jared Schnelle

    You brought Twitter into this, so here is my major complaint about them. Log into twitter then click “Find & Follow”. After signing up, I immediately clicked here in effort to search for a few people I knew were on the site.

    The only thing you can do on that page is import via your email. The way you add friends is by already knowing their account name, or going back to your personal page and looking in the sidebar for a search option. Terrible UI design if you ask me.

  16. Some good thoughts. Another way to help in making your website be very professional, is too make sure it is “W3C” compliant.
    Too many websites don’t bother with this, and just leave the site in a mess of code. This is both unprofessional and makes the site discouraging for other viewers with possible disabilities to view.

    There are three things that I do when designing websites:
    1. Test in IE and Firefox, though Firefox is better, IE still owns the market in the browser war.
    2.Get the “Web-Developer” Toolbar for designing in Firefox, You can find color and read css code etc.
    3.Go to http://validator.w3.org/ to make sure your code is up to standards!

    If you don’t want to bother taking the time to make your site easy accessible….ask yourself why you’re designing websites.

    Do the code right, don’t give up without a fight!

    In closing, thanks for posting you video, I enjoyed it!

    Regards,

    Sean|Orbell

  17. 17 anonymous

    What site is “Mac only” – what is one example of such a site? There are tons of windows only sites, but I have never seen a Mac only site. I think you’re smoking something.

  18. 18 rafi

    What you are doing here is what many website companies are starting to do. While QA testing makes sure everything is working and there are no bugs or errors, you are looking to make sure everything works from a end user perspective. This is a new type of testing which is referred to as UAT – User Acceptance Testing. My company just started doing this and our websites are getting much more user friendly than before.

    Good ideas in your video, thanks

  19. 19 foobar

    so, you didn’t actually conduct any REAL usability testing? just a single person’s opinion? quite valid.

  20. Great tips and I agree with what you are saying here.

    Rex

  21. Finally! Someone who gets it! Please review Facebook as I see huge problems with their interface. Navigating is confusing between text links, buttons, tabs, and navigation bars :/

  22. @ anonymous – http://www.skitch.com/ is one that I’ve been dying to try.

  23. Lol. Just wondered why the screencast is on a separate page, not even a preview image of the screencast … seems a bit lacking in usability. At worst you could have a lightbox-esque overlay or a “fold”. With videos that are essentially radio essays with eye-candy I like to browse the comments while listening. I can do that but only by opening a new tab. YMMV.

    Also, (while I’m wobbling atop my high-horse) I find the contrast between the page elements – article, nav, comments – to be too little to easily guide the eye. Just my preference.

    Now, on to the screencast:

    Twitter – they don’t want you to find out more, they just want you to sign up. That’s why the help is “hidden” it’s not an oversight. I’d bet money on it.

    MySpace – they don’t want you to sign out. Presumably that’s so they can use some fancy scripting to track you across the web.

    Maybe I’m naive, but as a web-designer I can’t really imagine that these things have been overlooked; I think it’s a step beyond that – capitalism sucks, eh?!

  24. 24 Jack

    WOW , This is awesome I found your post through digg. I am a Website Consultant for a Development firm in Saint Augustine FL. People just don’t get UI!!!! You seem to explain in a manner that brings it down to a great common sense level that many, oh so many, people and companies do not get when developing site. Awesome Job!

  25. @pbhj – You’re absolutely right. We’re working on putting the videos right on the front page but there are so many of them that we’re trying to find a way to do it right. As for the reasons MySpace and Twitter do the things they do? Yeah, I’m not naive either. That was part of my point. Don’t only think about what is good for the site, think about what will also make users happy.

    I’d also like to add, in my defense, that this screencast is not about me knowing everything about site design. Obviously no one person can say what is perfect for everyone, that’s impossible. At the end of the screencast I note that the sites used are examples, and so was the negative and positive feedback I mentioned. I just wanted to open some eyes about issues other than making sure a site works.

  26. 26 Max Weir

    You’ve covered just the very basics here and left out a whole host of others. You’ve stated the obvious things from the example sites in your video but i found so many more issues with all those examples that you simply overlooked. What was the real point of this video if aren’t comprehensive in your review.

  27. Skitch isn’t really a webapp. Complaining that you can’t use the application on your Windows box is like me whining that Valve doesn’t release steam on Mac. =)

    But your main rant about web usability I agree with. I’ve found the more content a site has the harder it becomes to find a good way to present the data without alienating or boring your user base.

    I’m torn about login/logout for webapps. There are times where you can’t do the layout you want with a login on the front page without it looking horrible (it works for cartoony pages, but rarely looks good on clean designs). Plus it may not be a validate thing to put on the main page. As for “logout”… I rarely use them. I’d rather have the cookies be “die on close of browser” and a login page that ALWAYS prompt you for a login/password instead of redirecting you somewhere else.

    I can see a nice compromised for login. Which would be an expandable div layer either via a click or mouse over. It would allow the page still to be clean while having the login still at your finger tips.

    – Ben

  28. @Max – This was meant to be a very brief look at simple things that can be changed. Believe me, I notice a lot more than I mentioned. If I mentioned it all you would be watching a screencast well into the weekend. They weren’t even very important issues, the fact is that there are simple issues as well as more complex.

    @Mourning – I wasn’t complaining about skitch, just answering a question from another commenter (and I don’t believe I called it a webapp). It does look cool though…they even have a screencast! http://www.skitch.com/#demo

  29. It’s truly amazing how little usability is considered – especially by big companies that you would think should know better. When you make something hard to use, you are just sending your users / customers to your competitors.

    Good point about the deadpool. Having a user-friendly site may not guarantee you don’t end up there, but it’s a big step in the right direction.

    I’m thinking I might ask you to review my site – once I have enough stuff to make it worthwhile 🙂

  30. Usability is one of my main goals when creating / designing a website (come check my newest creation – http://www.Wallpapers-room.com !)

  31. What annoys me the most is when you want to cancel an account, quit the service and the account cancellation has a mysterious path or something, is totally hidden. Some sites still have this problem.
    Excellent screencast. All the best!

  32. Hello,
    I am new to your blog and really liked your screencast ! Thank you for information, I will try to fix those issues on my next webpage. If you have any further information on this topic (or further screencast) I would be very pleased if you can email me.

    Regrades Snoop1990

  33. 33 Fred

    Taking a page from your screencast: when you click for the screencast it takes you to a different webpage – shouldn’t this page have navigation on it? the only way out is to hit the back button…

  34. The trick is finding a way to make it work, be simple to use, but still not be cluttered. I’d like to see more from wordpress on this – stuff like inline posting, instead of going into the admin panel, and logging in through a form. A way to keep this from cluttering would be by simply having collapsible logins.
    Say you have a big button with “Login” on it, and when you click it, the form appears beneath it. Little things like that would improve the website. However, I disagree with the help button: many users that I know would not want to be bugged by the help button, but would want to try and see how it works first, before looking for help. I think that many users would feel patronized by the big “Help”.

  35. @Fred – Yes, absolutely. When I make a typical screencast, the last screen is a title page which says “click here to return to DemoGirl. I didn’t do it for this one because I didn’t add that page, but you totally busted me! Thanks for pointing that out because I didn’t realize it. Kind of ironic that I missed that in this particular screencast…or is it?

  36. Hi Demogirl,

    I loveeeed your video! It is soo important to have a user friendly site. I would love to know what you think of InternshipRatings.com. We just created the site and would love your feedback (hopefully it will be positive).

    Thanks!

  37. 37 Emery

    Agreed on your analysis, but I want to point something out concerning front-page logins.

    The most common reason to redirect a user to a login page is so that you can initiate a secure session in order to prevent someone’s username and password being sent in the clear. There are solutions to get around this that have the browser encrypt the user’s password client-side before it’s submitted, but they rely on Javascript. These days it’s rare to encounter a client without Javascript, but a designer still has to take it into account.

    In the battle between security and improving the user experience by one click, security should win out.

  38. Three things I disagree with in your screencast
    1) Designers do not always have to be separate from coders. Some coders are actually pretty competent with creating a user-friendly interface. On the other hand, such designs may not always be pretty, but even graphic designers can go overboard and go for looks more than anything else. In addition to this, a dedicated, or even contract UI designer can be very costly, sometimes more than the coders themselves. And further still, my experience at a web development company has shown me that communication between designers and coders is not always fluid, and often results in longer development time, or dis-satisfied clients. I realize this is a little off topic from your idea, but these are some issues with separating designers from coders, especially with a start-up.

    2) Some of these things you point out seem to be personal issues more than anything else. Personally, I like the “Help” button to be on the bottom with other mildly important links. It doesn’t interfere with content, and I generally know where I can find it.

    3) Myspace sucks. period.

  39. 39 Menaum

    I don’t want a girl to visit my website cause I’m so shy :$

  40. 40 ashish

    found your site via digg. bookmarked it!

  41. Hi DG,

    Nice post – I found on Digg in my Netvibes page.

    What is really intereresting about your cast is that it is really simple… I am in usability in Sydney Australia and I often forget that MOST people don’t really understand usability at all!

    Often I head off blogging about stuff that is just too complex and will appeal to a small percentage of net users who are in the business.

    I need to K.eep I.t S.imple S.toopid and I will get more readers!

  42. 42 Josh

    It’s kind of ironic that you used ‘click here’ twice in this post.

  43. I hate how delicious hides their firefox plugin. I have to search on google to find the page that has it. They only link to it on new registrations >:|

  44. 44 Richallum

    Hi Molly,

    Just read the Digg thread and it has re-confirmed my view that ‘web 2.0’ has empowered a lot of people mainly to be rude with no come back. So what if you are female, ‘from the valley’, pretty or ugly, have a voice I don’t like/like, are/are not an expert. It doesn’t matter. You have an opinion which you express clearly without insulting anyone. If I disagree I can extend the same courtesy back to you or say nothing.

    keep up the good work.

  45. I completely agree, often the smallest usability improvements can have the biggest postive effect! What I have a real grudge against is what I call ‘dead-ends’: the last page of a journey that leads nowhere. Please, always make it easy for users to continue browsing/searching/interacting..

    If you wouldn’t mind, Demogirl, would you have a look at http://Mippin.com on Mobile (!) and Web and the newly launched support tool http://MippinMaker.com on web only?

    Cheers,
    Carola.

  46. I’m sure a lot of people are going to disagree with me on this one, but I’m okay with Twitter’s decision to “bury the help.”

    Generally speaking, help should be your absolute last resort. The content on the page, your information architecture, and so forth should be your primary source of help. In other words, the best help you can provide is making the application clear in the first place.

    In my opinion, providing an extended “help” section is often a cop-out that developers use when the site itself isn’t clear enough. In the case of Twitter, the content on the page such as the “why” and “how” sections are sufficiently helpful, and I think providing an extra “help” section is all but unnecessary.

    I am increasingly in the favour of not including any help section at all, and rather focusing on making the application and the content itself more helpful.

    Remember: nobody reads the help!


  1. 1 Is Your Site User Friendly?
  2. 2 How User-Friendly Is Your Site? « Demo Girl | SoapBoxRants.net
  3. 3 FuzzLinks.com » How User-Friendly Is Your Site?
  4. 4 precariousPanther
  5. 5 How User-Friendly Is Your Site? | White Sands Digital
  6. 6 Attention: Marketing People Sending Me Emails « Demo Girl
  7. 7 Two Mad Geeks » How User-Friendly Is Your Site?
  8. 8 Disqus Comment System | SoapBoxRants.net

%d bloggers like this: