Win customers and improve products with HTML prototypes(digintent.com)
digintent.com
Win customers and improve products with HTML prototypes
http://digintent.com/prototyping-in-html.html
Why HTML prototypes can improve customer development and lead to better products. Includes a demo HTML prototype with some good pointers for improving workflow.
8 comments
I think HTML prototypes are vital to the success of a web app. That said there is a true danger with an HTML prototype that looks too good. Customers often have a difficulty understanding that this is a mockup and it doesn't work. Non savvy customers think it looks like it works even though the guts of the application which takes up the bulk of the development time hasn't even begun.
Totally agree - other than relevant images (the shoes, in this example) we try to avoid using much in the way of color, icons or other design. We use variations of gray shading, unstyled buttons, Helvetica across the board.
Haven't been able to convince ourselves to use Comic Sans though :)
I agree that customers don't always understand why it doesn't work when an HTML prototype looks too good. However, I think that's more of a project management issue than anything else. Presenting it properly can help customers understand what they're doing... and then they love that they can test usability and flow before it's too late to change without a change order.
Shameless plug: I'm working on a HTML5-based high fidelity mockup tool called jMockups [1], which is intended to be an alternative to Photoshop and HTML for creating website mockups.
You can't link the mockups together yet and its still a bit buggy, but long term I want to make it effortless for even the most design-challenged developer to design beautiful websites.
Let me know what you think: [email protected].
[1] http://www.jmockups.com
You can't link the mockups together yet and its still a bit buggy, but long term I want to make it effortless for even the most design-challenged developer to design beautiful websites.
Let me know what you think: [email protected].
[1] http://www.jmockups.com
That's pretty slick man. Nice work!
Do you use Boks (http://toki-woki.net/p/Boks/) with your Blueprint CSS framework? I've found Boks to be a great way to bring some of the benefits of mockups to HTML prototyping. I still start from pen and paper first, because I find that I have to know what I'm going to put into Boks.
(I'm a developer, not a designer, but I've found myself doing more front-end work recently for myself and clients)
(I'm a developer, not a designer, but I've found myself doing more front-end work recently for myself and clients)
Never have - looks interesting though. We'll have to try it out!
Prototypes shouldn't be in HTML.
Edit: Clarification, when using "prototypes" with clients I pretty much always mean mock-ups. Try not to write code unless you have to.
Edit: Clarification, when using "prototypes" with clients I pretty much always mean mock-ups. Try not to write code unless you have to.
Easily showing the client different states of a page was something I was missing the last time I used this technique.
So I created a small jquery-plugin, demo here: http://thinkcreate.github.com/jquery_protoparts/index.html
That's very clever. Thanks for suggesting - we'll have to try that soon!
Axure RP http://www.axure.com/ also generates some pretty sexy HTML prototypes ... all completely self contained and renderable in any browser.
Has helped make every app I've ever done for a client involving it, go really smoothly.
Has helped make every app I've ever done for a client involving it, go really smoothly.
HTML prototypes are good for web applications but not so much for marketing type websites. I use HTML prototypes as a tool for getting the initial set of requirements and setting some scope.
Agree - we primarily do product development, so it's usually relevant for us. I will say we've implemented HTML prototypes for checkout processes in the past with some success as well.
Can you elaborate on how you've used them to set scope?
Can you elaborate on how you've used them to set scope?