Prototyping is a huge part of the UX process. It’s a great way to check your ideas are feasible, and to get feedback (ideally from users) before you go on to fully develop your project. There are loads of tools out there for prototyping, like Axure, Balsamic and Omnigraffle… but I want to talk about prototyping in HTML.
A lot of project managers or UX-ers will recoil at this idea, thinking that coding HTML will take longer, or that a wireframing software is just more appropriate. I disagree.
8 reasons to use HTML for your prototypes
1. It’s quick
Okay, the speed you can code HTML is going to depend on your experience, but if you’re a decent coder then creating prototypes in HTML will not take longer than using software like Axure.
2. You can easily make changes
If you use stylesheets then you’ll have control over your whole prototype and you can easily make site-wide changes just by editing one line of code.
3. Functionality
You can start adding simple functionality to your prototype with jQuery. Most prototyping software has some ability to add some simple functionality – but it’s usually clunky at best. With jQuery you can demonstrate functions like transitions, animations, show/hides, or even deeper stuff – with as much fidelity as you like.
4. Responsive and Mobile Views
If you code in HTML, then you can include responsiveness in your CSS. Again, some prototyping software has a workaround to allow for responsive designs – but why not go for the real thing?
5. User Testing
User Testing with an HTML prototype means the user will be in an environment they are familiar with – meaning there’s less to explain to them. You’ll get more realistic results from your testing, because the prototype will be closer in feel and functionality to the final product.
6. Flexibility
Wireframes and prototypes created in a software are always going to look like wireframes created in that software. If you use HTML, you can decide exactly how you want it to look. You have control over what fidelity your prototype has. It’s important to keep the fidelity in line with how far into the design you have – but having the option to quickly put together a high fidelity version of the prototype simply by adjusting the stylesheet is really powerful.
7. Handovers
HTML is universal. If you’ve got a team of people working on a prototype then using a software means everyone has to be in the same software.
8. The code is valuable in the future
If your prototype code is solid, then there’s no reason you can’t use it (or at least parts of it) in your final live site – this is a huge time saver.
Something to look out for – watch the fidelity
When you’re coding your wireframes up in HTML, it’s easy for the fidelity to creep up, as you can make it look “nicer” easily. Make sure you keep the fidelity appropriate, relating to how far along in the process you are. If you make a conscious choice to level up the look and feel, to show a client or to test a visual design idea that’s great, just don’t let it happen by accident.
What do you think?
Have you tried HTML prototyping? Have you found it useful? Can you think of other reasons HTML is the right choice for prototypes? Or do you totally disagree with me, are you sticking with Omnigraffle? Let me know in the comments!
Header image by Markus Tacker
Hey Amy, Good post! I’ve been prototyping in html a lot lately. Our team has cobbled together a very fast workflow combining the Jade template language and a ui library like semantic-ui or uikit. I’ll still make initial sketches on paper or even digitally using Sketchapp.