Usability testing helps bring together the website structure and makes it user friendly. It is a method used to improve the web layout, to make it easy-to-use and easy-to-understand. A simple quick definition of Usability, it is comprised of 5 quality components:
“Every dollar invested in ease of use returns $10 to $100.” – IBM
Anything you put on your webpage to make your website feasible and to make users interact more easily with it, counts as usability. Recent studies identified companies committed to ease-of-use actually exceed anticipated earnings, meaning it results in: more conversions, satisfied customers, long-term relationships, better ROI and more…
Now, also for the sake of search engine ranking success, you need best user experience on your website. The result is a win-win situation. According to Steve Krug, usability means to make sure a person of average (or even below the average) ability and experience can use the thing – whether it is a web site, remote control, or revolving door – for its intended purpose without getting hopelessly frustrated.
In this post, I’m going to offer 5 testing tips to provide a better user-experience and to help users interact with your website anywhere in the world from any device.
So before launching any new webpage or making any major or minor amendments, you need to test 5 key things:
Making your website cross-browser compatible is a necessary task that can’t be overlooked as all your marketing efforts are based upon how you maintain your digital presence. A broken website is akin to playing a game with the wrong keys!
I coded a simple HTML with little encoded CSS styles
and view that in Google Chrome and IE7
Google Chrome allowed adding a long container under a small box where IE7 stretched the small box exactly the same as the width of the long container.
You can evaluate your website layout with a number of different tools. Adobe BrowserLab (Free) and Browsershots (Free) are quite popular and easy to use. Just put your website link into these free tools and check your it’s appearance on multiple browsers with different versions in Mac, Windows and Linux.
Here is a list of different tools available for Cross-browser checking:
Image Courtesy: Smashing Magazine
According to StatCounter, 1366×768 pixels overtook 1024×768 but suddenly in April 2013 1024×768 increased to 18.22% from 14.64% – maybe it is for a while or it will stay longer or rise-up. For now the most popular screen resolution worldwide is 1366×768, for computers. This new dominant screen resolution is a particularly important statistic for web-developers, as they can now make their designs more optimized for 1366 pixels-wide screens from the beginning.
Your pages should work at any resolution, from 800×600 to 1280×1024 and beyond. It can be a difficult task to make your websites compatible for many resolutions so you can check Google Analytics to know your audience.
Make sure to test your pages for the visitors screen resolutions before and after code changes.
What to check?
- Readability: By readability I mean how easy your text is to read at a different resolution? If the content is hard to read, visitors may never understand anything and bounce back.
- Visibility: Put the most important information “above the fold” so users can see it without scrolling. If an “add to cart” button or other key elements appear after a long scrolling, users may never get around to it.
- Aesthetics: It means how the elements of your website look when users see it from different screen resolutions. All the elements should be lined-up correctly, accurate in size and aligned properly.
Test whether your website functions properly, meets the quality guidelines and provides the target specification (maybe decided in the SOW)
Different forms have their own requirements i.e. registration, login, newsletter, payment, add to cart etc. All forms should work according to their specifications as this is one of the direct ways that make customers connect with the website.
What to check:
- Formatting – should be consistent and professional looking.
- Fields marked mandatory are actually required?
- Message appears when a mandatory field is left blank
- Error messages must be appropriate and helpful
- Form fields must accept only valid formats (typically zip code, email address, fax and phone number, etc.)
- TabIndex must be controlled and working properly
- Test the form several times, each with different values
- Email must go to the correct location
- Thank you page must appear on submit
Pay close attention to link action of newly added pages so that you can refer users to the appropriate pages where necessary. Test all the links for correct link targeting, broken internal and external links, to ensure a greater user experience. You may use Xenu to run the broken links report.
What to check:
- Outgoing links for all the pages from specific domain
- All internal links
- Links are going to their respective pages
- Link to the email addresses should go to the correct person and must have mailto:
- Links are consistent & easy to identify
- Easy to access and must link to the main navigation.
- Test to check if there are any orphan pages
- Lastly check for broken links
Content is a voice – your conversions depend on how you speak to the audience. It is also a major part of usability testing. All the newly created content produced should have familiar sound, and be logical, readable, and grammatically correct.
The content must have these, for greater user experience:
- Get to the point as quickly as possible.
- Cut out unnecessary information.
- Avoid long sentences, use language that is easy to understand and stick to common words and phrases.
- Use Headings to Break-Up Long Articles
- Use Bulleted Lists and Text Formatting
- Give Text Blocks Sufficient Spacing
- Make Hyperlinked Text User-Friendly
- Use Visuals Strategically
What to check:
- Content formatting
- Easy to read
- Canonicalization for duplicate content pages
- Content shouldn’t be copied from other websites
Every page when added on the website must pass through the Page speed test so that the page opens smooth and faster. Sometimes the code is not compatible to load, images are too heavy, and lots of hardcoded styles and scripts will make the pages hard to load.
You can evaluate your web page with the help of YSlow and Google’s Page Speed. These tools are available for Firefox and Google Chrome browsers. (You need to have firebug installed, before you download YSlow in Firefox!)
Tools to Download
YSlow for Google Chrome: https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
Page speed for Firefox and Google Chrome: https://code.google.com/speed/page-speed/download.html
YSlow for Firefox: https://addons.mozilla.org/en-US/firefox/addon/YSlow
Recommended Firebug tool: https://addons.mozilla.org/en-US/firefox/addon/firebug
What to check:
Web page must score as high as possible. Best score is 100/100
Users expect websites to be optimized and functioning properly for their various mobile devices so they can access the website anywhere they need to.
Before you launch new features and/or major and minor changes on a website check them on iPhone, iPad, and different mobile versions to ensure that your site looks fine and is working properly. Adobe Shadow (Free), MonkeyTalk (Free and Paid) and Perfecto Mobile (Paid) are great tools for designers, developers and for QA testers.
Look at these areas for mobile testing from a simulator and physical device:
- Test every page and view every function
- Submit the forms multiple times, check the quality of images and click on every link
- Test in different modes i.e. Portrait and Landscape
- Test your website on the most recent and older iPhone versions to ensure that your website will work fine for every user
Testing isn’t a onetime event, but part of the culture at data driven companies. Be sure that you’re using the right tools and testing continuously. Websites should render properly in multiple browsers and on mobile devices. You must carefully check the website functionality, content and web page performance.
Please share your thoughts in the comments below 🙂
Special Thanks to @Sha Menz for the copy-editing help.