6 ms·

Something always bothered me: why using "sketch-like hand-drawn pencil" like style for that kind of tools ? I understand that "wireframing" is some kind of "br

Something always bothered me: why using "sketch-like hand-drawn pencil" like style for that kind of tools ? I understand that "wireframing" is some kind of "brainstorming" tool, so it is used with a pencil and a whiteboard in a meeting room and require to draw/erase fast iteratively... so it's the "right" tool for this job... But as soon as you use a computer instead of a pencil, why not have a "realistic" and "clean" look instead of this kind of quick-and-dirty sketch-like style? It's an honest question Is it because designers are most used to this style? Is it because it make more clearly appear the essential points (for example: a list) and avoid discussion like "is this text exactly in this color ?"

olivierduval 2y ago
(to be honest, I find this "pencil-like" look a bit like MS Comics for fonts, ugly and unprofessional... so I really don't understand why designer tool use it so much)
- toyg 2y ago
  Anybody who's ever been in a few meetings that try to put together stakeholders, designers, and developers, know how it will inevitably descend in painful back and forth about a shade of hue or an icon size. People get distracted by colors and graphics, and fail to provide actual feedback on functionality and layouting - which are the hardest bits to change later. The point of this style is to communicate that it's a rough draft, so that people focus on the essential implementation and functionality requirements, the hard stuff. It's easy to give it a lick of paint later. (It also keeps expectations low, so that the final result will feel like you're overdelivering. But that's just bonus.)
- olivierduval 2y ago
  For those "downvoting" this comment, please: I wrote it right after my initial post, before any answer, to make my initial post clearer. I certainly should have added this to the main post. Now that I have all these answers, I understand better. But cant delete or modify this comment. So sadly it's here for eternity :-( Thanks a lot for your insightfull comments to the original post. Actually, I now think that I will use these method to help getting more feedback from users
ramraj07 2y ago
If I draw something in balsamiq, I’m typically “forgiven” for how basic the design looks. Try and do the same in let’s say MS paint and you could be called unprofessional and lazy. But this style seems to communicate strongly that this is a basic barebones wireframe. Honestly it also looks better.
estsauver 2y ago
The reason that I've heard used repeatedly is that a shocking percentage of folks who aren't Technology producers can't separate visual quality from "doneness" of a project. If you show some business folks something that looks like it works, they'll mentally update the project to "Nearly done!" and then everything else after that becomes "Unreasonable delays."
- dspillett 2y ago
  This is unfortunately very true. You also have to be very careful with word/phrase choice in discussion about future work: people often hear “what we could do, is…” as “there is already a full feature that allows you to configure the tool to do…”. You really have to drill home that ideas and possibilities are just that, and not concrete features that they could start using tomorrow.
  - edmundsauto 2y ago
    Why is this unfortunate? If it weren’t true and people could separate the things, would we really be better off? I ask because this guy s a common lament, but I’ve never figured out why. It shouldn’t be a surprise or (to me) disappointment that the fidelity of a communication also carries signal about the status.
    - mionhe 2y ago
      Unfortunate because it's relatively easy now to mock-up the pretty part well enough to be mistaken for the real thing. Which people who don't have experience in this field then do, and get often get confused or upset even. Example of this from another industry: working in manufacturing, a client wouldn't listen to our explanations about why their part wasn't ready to be molded in plastic. (lot's of design issues that would make it impossible to get out of the mold or lead to extreme cosmetic imperfections). To prove their point that their part designs were ready, they held up a 3d print of their part and said, "See? It's right here! You just have to do this!" This led to a half hour of answering questions before they started to understand that the two fabrication processes were very different and had different requirements. I think the unfortunate part is really the time you have to sink into helping someone understand that's often unpaid, in my experience.
niklauslee 2y ago
Psychologically reduces obsession with the perfect drawing.
Beretta_Vexee 2y ago
This style says ‘it's a draft’ ‘it's an idea’. This is very important for communication within the team. It also allows you to concentrate on the essential points and not on the details (I don't like this font, the centring isn't perfect, etc.). To my great surprise, even for training courses, this style encourages questions and interaction with the students. There's a whiteboard feel to it which suggests that the presentation isn't set in stone.
- specialist 2y ago
  Right. The more polished a rendering is, the more people are emotionally attached to it. Keeping it rough enables brainstorming, whatifs, etc. Ages ago, when CAD was new, architects would show customers tracings (of plots). For all the same reasons. The practice was so common that my buddy (also an architect) created a "hand plot" driver for AutoCAD. "Messy" hand drawn look instead of precise line work. The driver was huge popular.
ashildr 2y ago
It’s an abstraction that makes people focus on the part that is relevant for the discussion at hand, and not on implementation details.
rpastuszak 2y ago
A) Make it easier to focus on the core aspects of the problems instead of obsessing with details (applies to both designers and "reviewers") B) An "unfinished" messy design is an invitation for critical feedback. If you give people something that looks too polished, they might be afraid that they'll break it, that they don't understand it, that they can't give feedback that is "good enough". In short: if it looks like a toy people will play with it. * C) The reason many of these tools look like Balsamiq has more to do with the tech of the late 00s/early 10s. This specific style of vector art was pretty easy to achieve in Flash.
victorbjorklund 2y ago
I usually dont use wireframes like this but one benefit is that it clearly communicates "this is NOT a finished design". Way to many times you bring a figma/mvp to get feedback on the "big picture" like the user flow etc but people get stuck on "the margin on that box is wrong" or "can we use another font?" when they see a design that looks like a "finished" product. You dont have that issue with wireframes.
veenified 2y ago
Sometimes the pixel perfect details don't matter for a use case, so why set the hi-fi expectation for both the designer and developer. The designer can get caught up in choosing colors and pixel-perfect layout, and similarly the developer implementing on that design might unnecessary time attempting to match the hi-fi design.
adastra22 2y ago
Because the final product will require tons of details to have been thought through, which can quickly become bike-shedding derailments. How many times have you had to say “this is just example styling—we can tweak it later”? The hand drawn sketch conveys that implicitly.
codegeek 2y ago
Exactly. I feel the same way. After lot of research, I settled on Whimsical for doing mockups/wireframes. Good Balance between Simplicity and Power. Only complain is clickable prototyping which is not available. If they add that, I would never leave Whimsical for prototyping.
shagie 2y ago
> Something always bothered me: why using "sketch-like hand-drawn pencil" like style for that kind of tools ? https://napkinlaf.sourceforge.net https://napkinlaf.sourceforge.net (one of my favorites from back in the day) > The Napkin Look & Feel is a pluggable Java look and feel that looks like it was scrawled on a napkin. You can use it to make provisional work actually look provisional, or just for fun. It is released under a BSD-style license > The idea is to try to develop a look and feel that can be used in Java applications that looks informal and provisional, yet be fully functional for development. Often when people see a GUI mock-up, or a complete GUI without full functionality, they assume that the code behind it is working. While this can be used to sleazy advantage, it can also convince people who ought to know better (like your managers) that you are already done when you have just barely begun, or when only parts are complete. No matter how much you speak to their rational side, the emotional response still says "Done!". Which after a while leads to a later question: "That was done months ago! What are they doing? Playing Quake?" A good article on this is Joel on Software's “The Iceberg Secret, Revealed”. ... and that's the place that I remember where to find this blog post: Don't make the Demo look Done - https://headrush.typepad.com/creating_passionate_users/2006/12/dont_make_the_d.html https://headrush.typepad.com/creating_passionate_users/2006/... > When we show a work-in-progress (like an alpha release) to the public, press, a client, or boss... we're setting their expectations. And we can do it one of three ways: dazzle them with a polished mock-up, show them something that matches the reality of the project status, or stress them out by showing almost nothing and asking them to take it "on faith" that you're on track. > The bottom line: How 'done' something looks should match how 'done' something is. > Every software developer has experienced this many times in their career. But desktop publishing tools lead to the same headache for tech writers--if you show someone a rough draft that's perfectly fonted and formatted, they see it as more done than you'd like. We need a match between where we are and where others perceive we are. The infographic in this post ( https://headrush.typepad.com/photos/uncategorized/feedbackimage.gif https://headrush.typepad.com/photos/uncategorized/feedbackim... ) is especially important because the how it looks changes what type of feedback you get. I had a project where I grabbed the stylesheet and header from another similar project while working on it... and spent a week discussing with management about what color blue it should be when the questions I needed answering were "does this page flow make sense?"
mitchbob 2y ago
One of the most valuable things you can do with early prototypes is have prospective users try them, to see whether they're understandable and meet users' needs. When a prototype looks unfinished, users understand that it can be changed, and you can collaborate with them and explore ideas for making the prototype better.
rendaw 2y ago
It's the first bullet point in TFA, right after the big screenshot. > Stress-free hand-drawn style ... A hand-drawn style reduces stress on perfection and allows you to express ideas quickly.

olivierduval 2y ago

(to be honest, I find this "pencil-like" look a bit like MS Comics for fonts, ugly and unprofessional... so I really don't understand why designer tool use it so much)

toyg 2y ago
Anybody who's ever been in a few meetings that try to put together stakeholders, designers, and developers, know how it will inevitably descend in painful back and forth about a shade of hue or an icon size. People get distracted by colors and graphics, and fail to provide actual feedback on functionality and layouting - which are the hardest bits to change later. The point of this style is to communicate that it's a rough draft, so that people focus on the essential implementation and functionality requirements, the hard stuff. It's easy to give it a lick of paint later. (It also keeps expectations low, so that the final result will feel like you're overdelivering. But that's just bonus.)
olivierduval 2y ago
For those "downvoting" this comment, please: I wrote it right after my initial post, before any answer, to make my initial post clearer. I certainly should have added this to the main post. Now that I have all these answers, I understand better. But cant delete or modify this comment. So sadly it's here for eternity :-( Thanks a lot for your insightfull comments to the original post. Actually, I now think that I will use these method to help getting more feedback from users

ramraj07 2y ago

If I draw something in balsamiq, I’m typically “forgiven” for how basic the design looks. Try and do the same in let’s say MS paint and you could be called unprofessional and lazy. But this style seems to communicate strongly that this is a basic barebones wireframe. Honestly it also looks better.

estsauver 2y ago

The reason that I've heard used repeatedly is that a shocking percentage of folks who aren't Technology producers can't separate visual quality from "doneness" of a project. If you show some business folks something that looks like it works, they'll mentally update the project to "Nearly done!" and then everything else after that becomes "Unreasonable delays."

dspillett 2y ago
This is unfortunately very true. You also have to be very careful with word/phrase choice in discussion about future work: people often hear “what we could do, is…” as “there is already a full feature that allows you to configure the tool to do…”. You really have to drill home that ideas and possibilities are just that, and not concrete features that they could start using tomorrow.
- edmundsauto 2y ago
  Why is this unfortunate? If it weren’t true and people could separate the things, would we really be better off? I ask because this guy s a common lament, but I’ve never figured out why. It shouldn’t be a surprise or (to me) disappointment that the fidelity of a communication also carries signal about the status.
  - mionhe 2y ago
    Unfortunate because it's relatively easy now to mock-up the pretty part well enough to be mistaken for the real thing. Which people who don't have experience in this field then do, and get often get confused or upset even. Example of this from another industry: working in manufacturing, a client wouldn't listen to our explanations about why their part wasn't ready to be molded in plastic. (lot's of design issues that would make it impossible to get out of the mold or lead to extreme cosmetic imperfections). To prove their point that their part designs were ready, they held up a 3d print of their part and said, "See? It's right here! You just have to do this!" This led to a half hour of answering questions before they started to understand that the two fabrication processes were very different and had different requirements. I think the unfortunate part is really the time you have to sink into helping someone understand that's often unpaid, in my experience.

niklauslee 2y ago

Psychologically reduces obsession with the perfect drawing.

Beretta_Vexee 2y ago

This style says ‘it's a draft’ ‘it's an idea’. This is very important for communication within the team. It also allows you to concentrate on the essential points and not on the details (I don't like this font, the centring isn't perfect, etc.). To my great surprise, even for training courses, this style encourages questions and interaction with the students. There's a whiteboard feel to it which suggests that the presentation isn't set in stone.

specialist 2y ago
Right. The more polished a rendering is, the more people are emotionally attached to it. Keeping it rough enables brainstorming, whatifs, etc. Ages ago, when CAD was new, architects would show customers tracings (of plots). For all the same reasons. The practice was so common that my buddy (also an architect) created a "hand plot" driver for AutoCAD. "Messy" hand drawn look instead of precise line work. The driver was huge popular.

ashildr 2y ago

It’s an abstraction that makes people focus on the part that is relevant for the discussion at hand, and not on implementation details.

rpastuszak 2y ago

A) Make it easier to focus on the core aspects of the problems instead of obsessing with details (applies to both designers and "reviewers") B) An "unfinished" messy design is an invitation for critical feedback. If you give people something that looks too polished, they might be afraid that they'll break it, that they don't understand it, that they can't give feedback that is "good enough". In short: if it looks like a toy people will play with it. * C) The reason many of these tools look like Balsamiq has more to do with the tech of the late 00s/early 10s. This specific style of vector art was pretty easy to achieve in Flash.

victorbjorklund 2y ago

I usually dont use wireframes like this but one benefit is that it clearly communicates "this is NOT a finished design". Way to many times you bring a figma/mvp to get feedback on the "big picture" like the user flow etc but people get stuck on "the margin on that box is wrong" or "can we use another font?" when they see a design that looks like a "finished" product. You dont have that issue with wireframes.

veenified 2y ago

Sometimes the pixel perfect details don't matter for a use case, so why set the hi-fi expectation for both the designer and developer. The designer can get caught up in choosing colors and pixel-perfect layout, and similarly the developer implementing on that design might unnecessary time attempting to match the hi-fi design.

adastra22 2y ago

Because the final product will require tons of details to have been thought through, which can quickly become bike-shedding derailments. How many times have you had to say “this is just example styling—we can tweak it later”? The hand drawn sketch conveys that implicitly.

codegeek 2y ago

Exactly. I feel the same way. After lot of research, I settled on Whimsical for doing mockups/wireframes. Good Balance between Simplicity and Power. Only complain is clickable prototyping which is not available. If they add that, I would never leave Whimsical for prototyping.

shagie 2y ago

> Something always bothered me: why using "sketch-like hand-drawn pencil" like style for that kind of tools ? https://napkinlaf.sourceforge.net https://napkinlaf.sourceforge.net (one of my favorites from back in the day) > The Napkin Look & Feel is a pluggable Java look and feel that looks like it was scrawled on a napkin. You can use it to make provisional work actually look provisional, or just for fun. It is released under a BSD-style license > The idea is to try to develop a look and feel that can be used in Java applications that looks informal and provisional, yet be fully functional for development. Often when people see a GUI mock-up, or a complete GUI without full functionality, they assume that the code behind it is working. While this can be used to sleazy advantage, it can also convince people who ought to know better (like your managers) that you are already done when you have just barely begun, or when only parts are complete. No matter how much you speak to their rational side, the emotional response still says "Done!". Which after a while leads to a later question: "That was done months ago! What are they doing? Playing Quake?" A good article on this is Joel on Software's “The Iceberg Secret, Revealed”. ... and that's the place that I remember where to find this blog post: Don't make the Demo look Done - https://headrush.typepad.com/creating_passionate_users/2006/12/dont_make_the_d.html https://headrush.typepad.com/creating_passionate_users/2006/... > When we show a work-in-progress (like an alpha release) to the public, press, a client, or boss... we're setting their expectations. And we can do it one of three ways: dazzle them with a polished mock-up, show them something that matches the reality of the project status, or stress them out by showing almost nothing and asking them to take it "on faith" that you're on track. > The bottom line: How 'done' something looks should match how 'done' something is. > Every software developer has experienced this many times in their career. But desktop publishing tools lead to the same headache for tech writers--if you show someone a rough draft that's perfectly fonted and formatted, they see it as more done than you'd like. We need a match between where we are and where others perceive we are. The infographic in this post ( https://headrush.typepad.com/photos/uncategorized/feedbackimage.gif https://headrush.typepad.com/photos/uncategorized/feedbackim... ) is especially important because the how it looks changes what type of feedback you get. I had a project where I grabbed the stylesheet and header from another similar project while working on it... and spent a week discussing with management about what color blue it should be when the questions I needed answering were "does this page flow make sense?"

mitchbob 2y ago

One of the most valuable things you can do with early prototypes is have prospective users try them, to see whether they're understandable and meet users' needs. When a prototype looks unfinished, users understand that it can be changed, and you can collaborate with them and explore ideas for making the prototype better.

rendaw 2y ago

It's the first bullet point in TFA, right after the big screenshot. > Stress-free hand-drawn style ... A hand-drawn style reduces stress on perfection and allows you to express ideas quickly.