Ideas for your web page usability

We would like every single page on the Internet to load instantly and be easy to use and understand. It’s only some kind of ideal, you will find problems with every page (with this one as well). It’s good to know what these problems are, at least. Let’s review some of them through simple tips.

Nothing is worse than a link pointing to nowhere. You should update broken links occasionally. Not many people know that W3C provides link checker you can use on your website. See here.

Run HTML validator

Nowadays browsers are capable of correcting some faulty HTML code, but problems still appear. Some code glitches are especially popular in CMS like WordPress where users create content in editors, use plugins etc. There is a lot of room from problems. See W3C validator.

Turn off Javascript

Recently I spotted quite many people who use extensions like ScriptSafe, which blocks JavaScript for all the domains by default. It means that a typical website cannot depend mainly on scripts. That is especially true for blogs like this, why would I require JavaScript enabled for a block of text?

Try to disable scripts for your domain and check if all the basic functionality work. Can you reach the content?

Try without CSS

It happens very rarely to not load stylesheets for the page, and it’s not the main point. I just think that no-CSS test reveals problems with HTML content. If the content is planned well, everything would still be readable. When I code a template, HTML is the first phase, styles appear after the content is fixed.

Create print stylesheet (for articles)

Some people print the articles they want to have by hand. Such printed versions don’t need specific page elements like navigation or some interactive blocks that are unusable on the paper.

Optimize for loading speed

Users don’t like when they have to wait long before the page renders. You can think of delaying scripts loading, minimizing resources etc. Also, think of improvements possible after the page renders, like non-blocking scroll event handlers. Google provides the PageSpeed tool to help you spot the problems.

Minimize images

Many people on the web use huge images with many details. These are ofter not necessary and needlessly increase web page size. For example, try to save image as PNG with a limited set of colors – many files look good with a 64-color palette, and filesize can be four times smaller than typical PNG-24 image. See jpegoptim.

Photoshop “Save for web…” tool (from video by Adam Henson, https://www.youtube.com/watch?v=H8BUzsaqePw)

SVG is a lossless format, but we can still greatly remove its size by removing unused or unwanted features like empty attributes, long identifiers etc. I use this web interface for SVGO project. It can reduce file size by even 50% on complicated shapes.

Think of accessibility

Your website may be visited by users with a vast array of disabilities like vision problems. That is why W3C prepared recommendations for usability (WCAG 2.0). AChecker will help you to identify problems in this area and sometimes give tips what to do to remove them.

A part of users (including me) uses the keyboard shortcuts heavily. While it can be a problem to navigate inside a page containing a number of links, some part should be taken into consideration. You should be able to go through every form using keyboard only.

Review navigation structure

It is important to have some general idea behind the page. It usually helps to take a look at navigation – how content is grouped and how deep is navigation tree. You could spot some patterns, like a lot of articles touching particular subjects or promoting some not popular content on home page. What can you do to serve users what they expect from the site?

Your ideas?

What do you do to improve users experience? Is there an interesting tool others can use to improve their websites? If so, leave a comment!