25 Feb 2013

4 Awesome Usability-Testing Bookmarklets

Usability has always been an important part of any website design. Now that we have so many features, platforms and tools, especially mobile web design and those built with Flash or HTML5, it is more important than ever to do thorough testing – both for catching potential bugs, and in ensuring that all users (handicapped, mobile, tablet, ect) will be able to properly see and enjoy the benefits of your website.

When you are a major site or company, you can generally afford an entire campaign dedicated to it with multiple staff or hiring on contractors to test for you. But smaller sites and independent blog owners might have a more difficult job of this, and a much more limited budget. In other words, the rest of us have to take what we can get.

My preferred method of usability-testing comes from bookmarklets. These helpful little tools allow me to check things as I go. Besides, they support most browsers (All you need is a bookmarklet toolbar to drag any of them to). While I have come across a dozen claiming to offer you good usability-testing features, only four have gone on my permanent list.


1. Responsive Design

Responsive Design
By dragging the link box into your bookmarks bar, you will be given a powerful and user friendly tool that will test your website for responsive design. I love the way it alerts you as you go, and I always make sure I have it installed before I make any layout or feature changes to my blog.


2. Dirty Markup

Dirty Markup
Coding is a mess. There is nothing worse than having your interface all done, and then a single messed up bit of HTML, CSS of JavaScript that shows up in the middle of it like a sore thumb. You can’t leave it, as it looks unprofessional and may throw off other elements and usability. But finding it can be impossible in that jumble of coding. This ‘beautifies’ the coding to something more manageable. It allows you to customize to your preferences, as well.


3. Readability

Readability
These are actually three different bookmarklets, and each one are pretty helpful. The first lets users scrub the web page of anything distracting. Which can be helpful when designing a site, as you can remove ads and photos that make it harder to see the rest of the interface. The second is ‘read later’ and the third a ‘send to Kindle’. I will admit these aren’t helpful to usability itself, but they are still pretty cool.


4. Soma Fontfriend

Do you spend way too much time thinking about fonts? The way they look on your page, the color, the size, the type…there is a lot to consider. For those who obsess over the lettering, this is the tool for you. It allows you to rapid check fonts within your browser, and make fast changes as needed.

Do you know of any bookmarklets that you think are must-have tools for the average site owner? Let us know in the comments.