For the last 7 months I’ve been working on a digital service for the Home Office which is used by people in Kuwait, Oman, Qatar and the United Arab Emirates. Doing user testing means going a long way, so we (researcher @bernardtyers and I) had to make sure we’d set everything up properly.
As part of our design and research process we prototyped the service from start to finish. Prototyping is great – it means you can get a design in front of a user sooner, with less cost, and a smaller feedback-loop. The most important thing about a prototype is that it exists, and it’s used to test what you’re working on.
When it comes to the ‘tech’ you use to create these prototypes I stand by the phrase “the best prototype is the one you can make”. The aim is to get this this out as soon as possible!
For some people that will mean grabbing a sharpie and a piece of paper. Others might prefer a UX prototyping tool like Axure, UXPin or Balsamiq. For us, the best sort of prototype for getting realistic results was a full-fidelity HTML and CSS prototype.
What do we mean by full fidelity?
Full fidelity means that to the naked eye it could have been the real deal. It looked like, and interacted like, the finished thing. We used HTML, and production-ready CSS.
In doing so, we eliminated the risk of any false-negative readings which might come from prototypes made using prototyping tools.
Sometimes, the prototype created by these tools can interact slightly differently to one made using HTML and CSS. Without going in to too much technical detail, you might find that pressing tab doesn’t trigger the expected behaviour, or that you have to use your mouse where you might otherwise use a keyboard (for drop-downs, or scrolling).
In previous tests, we’d found that minor differences in how a prototype interacts when compared to a finished thing skewed the entire session. Once the moderator had had to say “sorry, you can’t use tab.” or “sorry, that button doesn’t work” the participant lost faith in the prototype, and knew they were using a dummy.
Handing-off to development
Another benefit of high-fidelity technical prototyping that we experienced was a more linked-up design handoff to developers.
In non user-centred organisations designers have traditionally bemoaned the tiny changes or unexpected behaviours that appear in developed products, but rarely have these designers done anything to help close the gap between dev and design.
Practicing user centred design with iterative prototyping helped us in the production stages by leaving fewer aspects of interaction design to the imagination of whomever happened to pick up the story. It was a way of giving more complete UI acceptance criteria.
Working on this project has been a great educational piece, and as a team we’ve learned a great deal which we can take to other projects. I still stand by the best prototype being the one you can make, but given the time, skills and opportunity I would now always opt for a high-fidelity prototype.