10-second website usability testing
The world would be a better place without clamshell packaging. Apart from the environmental hazard caused by the PVC, you risk “wrap rage” and a blood-letting every time you pry something out of it. On a usability scale of one to five, I’d give clamshells a minus two.
A website can deliver that same level of pain and frustration to visitors if you don’t test usability before you launch. The following check can be included in your normal workflow, takes no more than ten seconds, and is a good measure of the visitor-friendliness of your finished layout. (Check out the video above for a demonstration.)
First, open the website in your browser and then disable style sheets with one of the following methods:
- In Firefox
If you have the Web Developer add-on as part of your web designer toolbox, go to CSS > Disable Styles > Disable All Styles or press Ctrl + Shift + S. If you don’t have the extension installed, go to View > Page Style > No Style.
- In Safari
You need to enable the Develop menu first. Go to Edit > Preferences, then under the Advanced tab check the box for “Show Develop menu in menu bar”. Once you’ve done that, go to Develop > Disable Styles.
- In Internet Explorer 8
If you have the Developer Toolbar installed, the option is under Disable > CSS in the Developer Tools window (hit F12 to open it). If you don’t have the extension, go to View > Style > No Style.
- In Opera
Go to View > Style > User Mode, assuming you don’t have a custom style sheet set up.
Any of these approaches will disable ALL style declarations, including external, internal, and inline rules, so you’ll be left with the browser’s default rendering of the markup.
Then check these three points:
- Semantic markup
The content should be understandable even without style information. Tags should be chosen based on the meaning of the content, not how they render in the browser. For instance, site navigation is really a list of links so an appropriate way to mark them up is as an unordered list.
- Logical organization
The structure of the page should make sense apart from the styled layout and be arranged in an understandable hierarchy. Ideally you should use source ordered content. The main heading would appear first followed by the most important content, which is how you’d expect a page to be laid out.
- The only images are those with text or some relation to the content
If somebody read a web page to you, they probably wouldn’t talk about the tiled background or the email icon next to the contact link. While useful, these elements are decorative rather than structural. Once styles are disabled, the only images that should be left are those with text (preferably with alt attributes so they’re accessible) and those that are integral to the content.
If the markup of a website meets these three criteria, it offers a logical, user-friendly foundation on which to lay your styles. Unless you do something crazy with your CSS, the finished website should reflect the usability of the unstyled markup.
This isn’t meant to be the ultimate website usability test, but it is a quick way to tell if you’re on the right track. As a side benefit, this technique also lets you see how assistive technologies view web pages, so it’s a good indicator of accessibility as well.
How about you? How do you test the usability of your websites? What do you think is the best gauge of a website’s usability? Let us know in the comments.
About Jason Garrison
Jason is a freelance web designer and developer who has a healthy obsession with web standards. When he’s not knee-deep in code, you can find him in a meditative state communing with the universe.
8 Comments
this is very good, enjoyed reading it. well done
That’s really interesting. I’ve never thought to do this before. I’m definitely going to start do this test. I think it will help in terms of UX as well.
Thanks for the great post. Looking forward to seeing more.
O Man, reading through scared me out a little bit cos i think i av got an offline project that i if i disable css , i am not sure if it will be usable but like u said that is not the ultimate test…lol
I’m sorry, but your div#sidebar is related to the layout, not to the content. Am I right? You could have named it div#subContent, I guess. Just a thought, hope you dont get offended. Didnt mean to. Very good article, though.
I would hope that all professional web designers know what their CSS’less code is behaving like by now. If your site doesn’t work without CSS 99% chance you are building sites wrong, plain and simple.
Although, I would think that this test is probably a better Accessibility (specifically screen reader) test than a usability one.
Good article though.
Yuri — Nice catch. View the source code of the site and you’ll find that we use #header, #sidebar, and #footer as id’s for the containing div’s. But the usability test I presented is about what the visitor sees and those elements are behind the scenes. If you want to be completely semantic, you could go with something like #branding for the header and #subcontent for the sidebar as you suggest. Although that doesn’t really make it easier to understand the layout, Plus, header, sidebar, and footer tags are coming up in HTML5 so using them as id’s in your layouts can make the transition easier… if we ever get there. :)
Davide — I agree that this is a great test for accessibility, as I stated in the wrap-up, and I think a lot of people already know about it in that context. I presented it as a usability test here to offer a different view and another reason for web designers to make sure their websites are well-coded.
I don’t get why the info from the header should be at the bottom. If you want your header at the top like you have when the styles are active, wouldn’t that also be the place you’d want it when the styles are inactive?
If for some reason your style would not work one day, your visitors would have to scroll the opposite direction of what they’re used to to get to the menu.
Thomas – Good question. Putting the header and information that repeats from page to page at the bottom of your markup is a technique called “source ordered content”, and it does two things for you.
First, it can help with search engine optimization. Search engines place the most emphasis on markup that appears right after the opening body tag, so it makes sense to start out with a keyword-rich main heading and content rather than header information and links.
Second, it can help with accessibility. Assistive technologies like screen readers work straight from the source code with no regard for the styles you apply through CSS. With source ordered content, visitors who use those technologies can access the unique content on each page first without having to skim through the header and navigation information on every page to get to the good stuff.
You can read more about it in this earlier article, Source ordered content: The best kept secret in web design.