Running a web office I see a lot of sites, quality assurance is part of every minute of my day. Everything I see goes through the same quality checks otherwise we don’t launch it. Tools and people will come and go, quality on the other hand is the one thing in a web office that is a constant. It’s the one think you should put all your focus on improving. If a project is delayed a week or two no one will mind six months from now, but if you sacrificed quality in the rush to launch six months from now the effects will still be noticed. Often you only have 10 seconds to impress your users.
I go through a few quality and consistency checks almost every day. Typically it’s the student assistants who are the worst offenders but even seasoned web workers make mistakes. It’s good to keep everybody on their toes and make sure the whole team (even if it’s just two of you) are aware when someone makes a mistake. It’s an opportunity for everyone to learn, not a platform to criticize.
Below are some testing patterns I use on a daily basis based depending on the stage of the project.
Navigation / User Experience
First and foremost I click every link possible. The LinkChecker plugin for Firefox is a must have but be careful, I’m not just looking for 404′s, it’s blank or incorrect content that I look for.
If the site is a redesign I make sure in the navigation there is also references to all the old URL’s for each new menu item. We do this as part of the navigation process so when the site is ready to launch we can create the redirect list quickly and painlessly.
For every one of our projects we create a list of user goals. These are the primary actions an ideal user should take for us to call them “successful”. This could be as broad as clicking to view the program list or as detailed as getting them to sign up for an open house. Regardless, for each user goal I create a step by step list of the pages and screens they would see to get to that goal. This way we can see them compared to each other and determine where we can optimize.
Design
I love the five second test, I think it’s a great way to get immediate feedback from someone who has no vested interest in the site. It gives an objective view from an outsider with no repercussion of their thoughts and feelings, it’s as honest as you can get. Before showing mockups to a department or client I like to run a few of these, just to see how outsiders react and often it gives us data to back up our own opinions.
I then bring up the mockup and the actual coded site side by side and check to see if any details are missing. I’m not looking for pixel perfection but at the very least looking for the same colors, relative spacing and feel.
Code
I typically have every different type of browser I can get my hands on open all the time. I <3 Spoon.net. From doing so much front end development I get use to the browser quirks, know how to spot them and know how to get around them. As IE 6 is fading it doesn’t mean you don’t still have to support it, it just means you support it in a different way. Make sure there are no peek a boo bugs or double margins. Developers should know better.
If there is an address or location making sure the HTML is correctly formatted with microformats. Although it might not be immediately apparent why they should be there, in the not so distant future they will be connecting information all over.
Making sure Google Analytics is set up and installed on every page prior to launch. If this is an existing site, make sure the same analytics id is installed on the new site. You want to have all the historical data you can get your hands on. In addition make sure all you filters and user goals are setup beforehand. You don’t want to loose those first time visitors when your new site gets announced.
Accessibility
Using the Webmaster Toolbar for Firefox the first thing I do is turn off CSS. Looking at the pure hierarchy of the page to make sure it makes sense. H2′s are nested under H1′s and skip to navigation and content links are in place and working.
I then turn javascript off. Making sure everything still works including any flash areas and rotating promotions. If there are expanding areas or embedded video I make sure there is still a way to get to that content or download an alternate version of the video.
Lastly I try to navigate the entire site with my keyboard. A user should be able to go from area to area in a logical order without having to back track or loose track of the selected item. I make sure I can get to the sub menu items, I can click back to the home page and lastly making sure any javascript that moves elements changes my selection focus to the new items. I don’t go into all the WAI-ARIA guidelines but as many as time allows.
User Experience
Lastly I take a look at the whole user experience. What happens if someone hits a 404? Are they presented with a pretty page with navigation intact and a friendly error?
Using that redirect list I make sure to type in a few random old URI’s to make sure they forward to the right pages on the new site.
I also make sure any promotion areas, news or event lists have enough content in them to last for the next few weeks. This way as the department is fixing odds and ends they notice after launch they don’t have to worry about the small items that move over time. It’s won’t be cool two weeks in to see the site with blank areas where news or promotions should be.
Final Thoughts
Every one of our departments want a new site and they want it up as soon as possible. This is totally understandable but there is no need to sacrifice quality for speed. As Head of Marketing posted earlier this week, “Ultimately it’s what you deliver that matters.” Keep your quality standards high, so what if the department heads get a little annoyed, your users will thank you.
Photo by mollyjolly
Firefox can actually disable CSS on its own, sans-plugins (View -> Page Style -> No Style), a practice that I highly recommend as well.
It can’t, unfortunately, disable JavaScript, AFAIK.
One plugin definitely worth mentioning is “Firebug”, a plugin for firefox. In addition to allowing block-level inspection, it also allows you to see all HTTP requests (both synchronous AND asynchronous), as well as computed styles and the layers of CSS. It has some useful JavaScript debugging tools as well.
And I also totally agree with you on spoon.net — it’s AMAZING. I only wish I could use it on Linux. :/
Actually, you can disable javascript in FireFox by going to Tools > Options > Content > and unchecking Enable Javascript. Just make sure to turn it back on when you are done testing!
Good article, but there are a couple of missing words that make you say the opposite of what I really think you mean:
“I love the five second test, I think it’s a great way to get immediate feedback from someone who has vested interested in the site.”
Should be:
“I love the five second test. I think it’s a great way to get immediate feedback from someone who has no vested interest in the site.”
Also in the paragraph about microformats:
“Although it might be immediately apparent why they should be there…”
Should be:
“Although it might not be immediately apparent why they should be there…”
@Scott Thanks, these have been corrected.
Also, the expression is “tide over” not “tie over.” And “setup” is one word as a noun, but two words used as a verb or adverb.
Sorry, that’s really nit-picky. I just have ink in the blood. This was a great post.
Many thanks.
I’m from the marketing side, which is unfortunately separated from the web team at our college. But I’m intrigued by, and somewhat jealous of, the dedication to QA I often see in web offices. If we delayed an ad or brochure to spend a few more weeks getting it just right, our campus “clients” would surely rebel. User testing for an ad or a poster? Are you kidding?
. They’d just do it themselves. It must be nice to have a password.
But seriously, how do web teams set up an environment that shields them from the constant pressure to deliver projects when the client departments want them? At our college, those above the web team have no responsibility for marketing results, so the web producers are somewhat shielded by a lack of accountability. How does it work at other institutions? Thanks for your input!
Russell,
The key is convincing everyone that the Web IS a marketing function and not a technical function. Maybe back 10 years ago when only technical people could update and manage Web content but now a days it is a critical recruitment piece. In just a few minutes your institutions Web presence can turn a prospective student to apply or have them clicking the back button.
I would start by working with your marketing office to do some user studies to test your brand identity and usability compared to the printed pieces they send out. From there putting a case together for a closer relationship between the Web and marketing. It will still need to be a partnership because the IT dept should maintain the servers but all the content and implementation of public facing pages should really be looked at as marketing.
It’s an old school way of thinking that needs to be broken. I hope this helps.