Usability? Not an afterthought… (Part 2)

In part one we looked at some usability methods you can easily implement into a web site project. Such as identifying functionality, grouping similar goals, designing flow charts, evaluating and refining our processes. In this final part we will take a look at the next steps that can take us towards development stage with solid design solutions and a better understanding of the site’s requirements.

Produce wire frames

Wireframes can illustrate entire page layouts or just portions of website functionality. Using this type of low-fidelity prototype can be a cost effective way to user test your workflow and design concepts. (Fidelity is the degree of closeness to the “depth, breadth and finish of the intended product” (Hakim & Spitzer)). Wireframes are not visual designs, they should only represent the functional layout and placement of objects on the page.

If you have to show wireframes to the client for functionality approval, make sure they understand their purpose and they do not confuse your wireframes with visual ideas. Show them a visual design also to separate the two.

When I have an interface in mind for a functionality/layout issue, I prefer to sketch a rough idea onto paper and show it to a few people for a rapid test to get a fast opinion. This throwaway prototyping method can be highly effective because ideas can be sketched out in minutes, quickly detecting errors and realising new ideas.

You can create your wireframes as hand sketches or in a visual layout program. If you use a program such as Visio or Omni Graffle there are many stencils with pre-made objects to drag and drop onto the work area.

Example - Hand drawn wireframes.

Example - Computer drawn wireframes.

Test wire frames

Now you have your wireframes you can test them on some users. If you can use people from your target audience, that’s fantastic! If you are not privileged with access your target audience direct, asking for help from people at work can help just as much.

It’s important to brief your users properly even if you’ve only got a few wireframes to test. Ask them to imagine that the wireframes as a computer screen.

Inform the user/s

• …what the site is, to place your wireframes in context
• …to vocalise their thoughts out loud during the test
• …that the wireframes are being tested not them!
• …they can ask questions anytime and they will be answered at the end of the test

If you have multiple wireframe screens you will have to take the place of the browser and switch screens/paper at the appropriate times.

Make sure you take a notepad and pen to take notes on what the user is speaking aloud. Or even better, record the audio to re-play later. Away you go! Test until your heart’s content.

Evaluate findings, produce solutions and implement

Hopefully you have come away with lots of useful information regarding your wireframe layouts and concepts. The important part now is to evaluate your findings and produce solutions that suit your target audience.

If you need help making decisions on layout/functionality changes, discuss your findings with the development team. This is also a good time to talk with developers to flesh out the most realistic ideas and suggestions from your findings.

This whole process is a great way to innovate and meet users expectations, as you have more the users involved at the early stages. Once you implement your designs and come to the final testing where most development is finished, you should find less issues with the user interface and functionality. This will reduce testing times immensely, help to eliminate redesigns of functionality and shows professionalism to your clients throughout the whole project. Making drastic changes at the last stage of design will not fill your client with confidence.

Integrating these methods to your projects improves the key areas of usability on your website: learnability, efficiency, memorability, and user satisfaction.

Make sure you explore any new ways of user testing and involving your target audience at early stages of a project. It can only help the success of your final development.