Perform HTML Click-Through Usability Testing on a New Website - dummies

Perform HTML Click-Through Usability Testing on a New Website

By Lisa Lopuck

The visual design of a website has a big impact on how users identify interactive elements and understand how to navigate through a site. So, it’s a good idea to mock up a few pages in the chosen look and feel to illustrate a user’s path through a key task such as purchasing a birthday gift.

Assemble these few key pages into an HTML click-through. The click-through looks real and contains all the pages that users would see if they were to step through a task successfully. Each of the pages can be a mock-up saved as a single JPEG and placed in an HTML page. You can expand upon your initial design directions to make your first testing prototype.

[Credit: © Provide Commerce, Inc.]
Credit: © Provide Commerce, Inc.

For testing purposes, don’t mock up only half the page and leave the rest blank. During the test, users will ask about these neglected areas. Even if you give them an explanation, they are forced to use their imagination to fill in the gaps. This can skew their reading of the page. Users need to see the page in its full context to give you the most accurate feedback.

For testing purposes, the HTML coding for each click-through page should be just enough to place the mock-up image in the page and apply a few hotspots to interactive areas that link to the next page in the task sequence. At this point, you just want to see whether the visual and interaction design work as you intended.

If you were designing the page shown, you could add a couple of features to give users more reasons to buy:

  • A sort feature to rate selections by price and other user-selected criteria

  • A drop-down menu next to “for her” so users can browse gifts in any of the “6 ways” the home page mentions

    [Credit: © Provide Commerce, Inc. ]
    Credit: © Provide Commerce, Inc.

On testing day, you may consider having a few design options on hand for the users. As you begin to ask questions, you may present alternative ways of visualizing the same page — with different button treatments or layouts, for example — and ask users to compare which way they prefer.

During the testing phase, users may offer suggestions on how the interface can be better or different. After all, the whole point of user testing is to open up the design process to new ideas that better serve the end user. If you’ve already invested a lot of design time to make the site work a certain way, you may be reluctant to change it without a good reason. User tests may provide one.