Comments on Sketchy Wireframes

Aaron T. Travis — Sat, 05 Mar 2011 05:54:07 GMT

@ Stephanie Thanks, here’s the correct link to the Visio custom line styles tutorial that I reference: http://visualsignals.typepad.co.uk/vislog/2008/03/creatin….

Aaron T. Travis — Sat, 05 Mar 2011 05:54:03 GMT

@JS The way to create sketchy stencils in Visio is to use custom line styles. Many of the sketchy stencils out there don’t allow themselves to be easily converted, so you have to use Visio’s custom line styles to make shapes look sketchy. I’ve created some screenshots to show you how, and also please refer to the tutorial listed in the table footnote. I use a couple of different line styles depending on the look I’m going for.

Once you have your sketchy line styles set up, you can right-click on any object and quickly change the line style to sketchy and back. You can also change the fonts quickly this way as well. If you’re using stencils, then changing the stencil should change all of the objects that are linked to it. Hope that helps.

J S — Sat, 05 Mar 2011 05:53:59 GMT

Aaron,
You mention that “certain programs allow you to convert your existing sketchy lines and fonts to traditional style without having to recreate them” and you list Visio as a product offering “Easy Conversion.” I’ve been looking for some direction on how to convert the sketchy stencil shapes to traditional shapes in Visio. Can you provide some insight?
Thanks for the great article,
Joseph

brooke baldwin — Sat, 05 Mar 2011 05:53:56 GMT

aaron
thanks for the article. i’ve been using the same visio sketch stencil you show for the past few years and i’ve found it makes a big difference when executives/management are looking at my early-stage work to understand the implications of ideas for an interface versus final.
thanks for the read.

Stephanie Heacox — Sat, 05 Mar 2011 05:53:51 GMT

Great article, and may address some of the wireframe = design problems I encounter. One small note: the link to the Visio tutorial (footnote 2 on your table) seems not to work…

Michael Malsch — Sat, 05 Mar 2011 05:53:48 GMT

Hi Aaron!

Thanks for this great article and for mentioning pidoco°, of course!

I just wanted to add, that another cool thing about digital/clickable wireframes is, that you get a much better feel for the usability than with pen and paper since you can really click through all links and navigate these digital wireframes like a real website. Furthermore you can easily perform data generating usability tests that help you making the right decisions about what clickpaths work fine and which need to be re-designed for peak performance with your site user. Do these tests already in the stage of prototyping and save the money for later changes after the site has been programmed (aka. “finished”).

Please note: Since we got a very good rating from Aaron, we love to hear you comments about our pidoco° wireframing tool too! You can check us out for free or call me for any questions: +49-30-4881 63 85!

Thanks and best regards

Michael
from pidoco°

aparna sanaka — Sat, 05 Mar 2011 05:53:44 GMT

Thanks for the article Aaron. A very good depiction of comparisons amongst current tools in the market – very informative.

In my experience, over time I have used several different ways to create wireframes – right from Word (cons – formatting issues and would crash every now and then), Excel (seems weird but tabs helped – downside cannot print it all in one go!), Visio (did well for most part) until clients bought newer products – Axure, iRise being some of them. ‘Wireframes’ are more detailed followed up with interactive javascript based HTML prototypes or HTML outputs from Axure / iRise.

Although, I sketch a lot like Maria in notepads one of the best ways that worked really well with the ‘clients’ was a quick drawing of a succession of screens on flipcharts (to depict interactions) – great for discussing ideas, allowing the client, stakeholders, focus groups a ‘freehand’ to mark out the good / bad points on the actual ‘paper prototype’ – the immediate pros were that the client, stakeholders were more ‘involved’, would be more open about their thoughts – overall very interactive sessions and best of all actually had quicker sign offs.

The next thing that was a shade better than a ‘paper prototype’ in this context which worked equally well was ‘Balsamiq’ – a quick and dirty way of creating the first initial ideas – a sort of a kickoff session on ‘ideas’ at hand. A great tool to have in th realm of ‘sketchy wireframes’. The clients review the JPGs / images (saved using Balsamiq) and then go over their initial thoughts in a meeting.

I think what happened over time is that clients started “expecting more” from wireframes – to ‘see’ the closest thing to the real application – simulating interactions. Hence, the sudden influx of wireframing tools in this “sketchy wireframing’ space. By far what is important to know is ‘your’ work environment and what really works best for you to complete your task effectively and quickly. To ‘adapt’ and make the best of what’s available in the market and get the best results in the shortest time frame.

Maria Cordell — Sat, 05 Mar 2011 05:53:21 GMT

Thanks for the article, Aaron. I’ve done a lot of wireframes in Visio and Omnigraffle, and I sketch a lot in my notebook, but I’ve only recently had a chance to use a sketchy wireframe style in Omnigraffle. It’s great for communicating concepts and early ideas early on. My client reacted to the “sketches” very well when reviewing early concepts for a somewhat complex site content area, and we were able to have a good discussion as a result. There was just enough fidelity to see how things should work, but not so much that one felt too firmly committed to a particular direction. I think it made me more relaxed overall, too, since it didn’t have to be perfect. I’ll be doing more of this in the future, that’s for sure!

Scott Stribrny — Sat, 05 Mar 2011 05:53:05 GMT

Thanks for your interest Aaron. More about our ‘Right Requirements, Right Now’ workshop may be found at http://bit.ly/7w5lo5. In the workshop we work through how much or how little information to include in requirements, depending on organizational circumstances, and we emphasize the importance of using various techniques (like ‘sketchy wireframes’) to better manage the expectations of stakeholders. I’ve already sent your blog link to past participants of’Right Requirements, Right Now.’ Contact me at Scott.Stribrny@GroupAtlantic.com so we can find a time to chat! Keepp up the good work.

Loren B — Sat, 05 Mar 2011 05:53:01 GMT

For Axure users, Ascentium has imported the Visio stencils mentioned here into an Axure-native library. Get your sketchiness and interactivity in a single prototype!

http://consulting.ascentium.com/blog/ux-seo/Post222.aspx

Aaron T. Travis — Sat, 05 Mar 2011 05:52:52 GMT

@Scott Stribrny

Thanks for the attribution. Your workshop sounds interesting. I’m curious to know more about it.

Chris Baum — Sat, 05 Mar 2011 05:52:46 GMT

@roy The table has been updated for your reading pleasure. Enjoy.

roy scholten — Sat, 05 Mar 2011 05:52:31 GMT

The table header is unreadable for me (FF 3.5): http://skitch.com/yoroy/nkke4/sketchy-wireframes-boxes-an…

Josh Cunningham — Sat, 05 Mar 2011 05:52:29 GMT

“Despite frequent disclaimers that the wireframes were for high-level discussion purposes only, each presentation would drift into fixations of irrelevant details.”

I find this to be hardest thing to overcome in my admittedly minimal wireframe experience. It is so, so easy to get sidetracked by minutia and have a conversation that should be high-level turn into a disappointing and unproductive design critique. I’m excited to give your techniques here a shot!

Scott Stribrny — Sat, 05 Mar 2011 05:52:26 GMT

I agree that “Sketchy Wireframes” are a worthwhile option to consider to speed up creativity and problem solving in the early stages of projects. Thanks for your useful pros/cons. I’ll reference this piece with attribution when covering these topics in my “Right Requirements, Right Now” workshops.