13

I was just wondering if it would be possible to have a more descriptive icon for the Balsamiq feature offered by UX stackexchange. I have been on this site for a while and only today I found out about by accident when I clicked on the smiley face icon

enter image description here

thinking it would open up a whole set of emoticons for me to use in my answer but was surprised to find that it was a link to Balsamiq.

Though I am delighted to find this ,I personally feel more people will use and provide better answers with visual mockups if this feature was more obvious

1
  • 3
    The new image will be in the next build of the site.
    – balpha StaffMod
    Mar 19, 2012 at 16:07

7 Answers 7

Reset to default
14

This is Mike from Balsamiq.

I appreciate, and I guess should have expected the feedback. We admit to not working on the icon when we did this integration, but I completely agree with all the feedback. It's obvious that a smiley icon, while a legacy of the initial Mockups App UI isn't going to work in a rich text editor to suggest anything other than an emoticon widget.

So on to action. The main goal should be to design an icon that:

  1. Is imediately recognizable and indicates that it's tied to the "add wireframe / mockup" behavior. Better scent and recognition, less mystery meat.

  2. Fits into the toolbar dimensions. The toolbar has containers for icons of 20px, but actual icon height is max 12px.

This morning I started some sketches to see what iconography might work, starting with the initial concept using the sketchy Mockup image to more generic wireframe images.

icon sketches

We did a few versions showing these ideas in the toolbar.

icon comp

At the box in the top is the progression of ideas as we iterated on the icon. We're thinking that for editor integrations like this, an icon like the two in the right are appropriate for signifying a wireframe.

We'd be happy to go with the one we depict in the toolbar image above, right next to the image icon. Please chime in and let us know what you think, and thanks for the honest criticism.

Edit: For those who might not read through all of the comments, here are the current proposals:

enter image description here

21
  • I like the one shown in the toolbar
    – Ben Brocka
    Mar 16, 2012 at 16:41
  • 1
    I quite like the one with the pencil, although its the pencil part that appeals. I'm trying to think how i'd describe the icon if someone posts a question that would benefit from a mockup, leaving a comment against the question "You can draw a Balsamiq mockup wireframe; use the small icon with the square and cross in it next to the pictureframe" is a bit of a mouthful, and i'm wondering if having a pencil on it increases the descoverability overall. However space is limited and the one you've gone with is appropriate and in-keeping with the style of the other icons. /fence sit
    – JonW Mod
    Mar 16, 2012 at 16:46
  • One problem with combining the pencil and the document is that the space for the pencil would take up space to depict the boxes of the wireframe. It's funny how even in meta-conversation, describing wireframes or icons depicting wireframes is hard. "Click the wireframe icon, it's the boxy black and white one." :)
    – Mike
    Mar 16, 2012 at 17:00
  • 1
    Here's what I mean. I think the pencil might add information, but it doesn't help recognition. img.skitch.com/20120316-c3t5h3nkpmicr25tpd8nk6g5dt.png
    – Mike
    Mar 16, 2012 at 17:11
  • 1
    Hmm, I actually quite like that. It shows it is an action and not just a method of content styling or something you are inserting into the post, but I do take your point. I'm just glad the only criticism of Balsamiq integration is that 'the 20x12 icon could do with changing'!
    – JonW Mod
    Mar 16, 2012 at 17:14
  • 1
    @Mike These are great! I tried a variation of your pencil variation of your pencil and wireframe icons. What do you think?
    – Matt Rockwell
    Mar 16, 2012 at 17:15
  • If the height restriction were a crazy 12px (making 20px seem positively roomy all of a sudden), and assuming you were happy not visually incorporating a Balsamiq connection, then I'd totally go with the one shown in your toolbar above. However, can I note for the record that the existing smiley icon is more than 12px high :-)
    – Roger Attrill
    Mar 16, 2012 at 17:18
  • @JonW True about pencil indicating an action.
    – Mike
    Mar 16, 2012 at 17:24
  • 1
    @MattRockwell Looks like a good variation. Lighter. If the boxes under pencil were gone, the pencil would be clearer. Peldi made an interesting point that the darker bar above could indicated both a window or page layout, suggesting web or desktop application, and I liked that idea.
    – Mike
    Mar 16, 2012 at 17:27
  • 1
    9 and 10 for the win!
    – Matt Rockwell
    Mar 16, 2012 at 18:13
  • 1
    10 and then 9 - Good job!
    – Roger Attrill
    Mar 16, 2012 at 18:23
  • 1
    I like 10 as my first choice and 9 as my second choice. Thanks Mike !
    – Mervin
    Mar 16, 2012 at 22:44
  • 1
    Yup, I'm with you guys. Both 9 or 10 are spot-on.
    – JonW Mod
    Mar 16, 2012 at 23:08
  • 1
    Alright, thanks for all the feedback. We also vote for #10. We'll send it to our StackExchange friends tomorrow!
    – Peldi Guilizzoni
    Mar 18, 2012 at 9:00
  • 1
    Thanks for all the feedback, everyone! Glad we could turn this around quickly.
    – Mike
    Mar 19, 2012 at 12:17
7

I took the liberty of creating a 5 Second Test (Question 2) for the submission form and took 20 anonymous persons feedback on their opinions.

When asked:

What do you think the smiley-face icon does?

15/20 responded: "emoticons" or "adds smiley into the post" (5/20 responded 'don't know' or similar).

True, it's not exactly scientific, and there is no guarantee that persons viewing the test would be users of UX.SE so the whole concept of Balsamiq / Wireframes may be alien to them, but it's still some genuine feedback.

Question 4 from the same survey was also interesting. That asked how people would insert a Wireframe Mockup into the page. That was even less scientific because it assumed people know what the term Wireframe actually means, but again the general consensus did not involve the smiley face (Most suggested the image upload icon, or didn't know).

3
  • I do hope you understand how biased of a survey this is :). I agree it's not an ideal icon, but there's a leading question combined with out of domain users with an out of context problem.
    – Ben Brocka
    Mar 15, 2012 at 19:10
  • I agree, and this should be tested more comprehensively, but this is a great first step given the tools and resources available to us.
    – Rahul
    Mar 15, 2012 at 19:15
  • @BenBrocka Oh totally, these test results are caveat-ed to the hilt (as I try to convey in the answer) and should be taken with a large grain of salt, but they are still genuine answers from real people, not just my own opinion.
    – JonW Mod
    Mar 15, 2012 at 22:59
5

I propose something in the vein of this:

enter image description here

Instead of using a not-so-well-known icon from one brand of software to represent a mockup, use something that more directly represents aspects of the mockup process.

I myself was aware of Balsamiq but had never used it, so I had never seen icon. Since it is only shown after installing their software, or on the website if you hover the home link, it is not very well known. As great as Balsamiq is, not everyone uses it.

2
  • This icon makes some sense, though might mean "form" or something. In the end I think a lot of people are always going to have to hover or click to see what the button actually does
    – Ben Brocka
    Mar 15, 2012 at 19:33
  • Unless its a superfluous smiley, assuming that it represents smileys and they stay far away :)
    – Matt Rockwell
    Mar 15, 2012 at 19:34
4

Totally agree that our smiley icon is misleading in the context of a rich text editor, as it does indeed look like a smiley.

We're totally open to having another icon, but the question is: what should it be? The "placeholder image" that infoal suggests is one option, a simple "form" like Matt suggests is another...can't say I'm in love with either, but that's just my two cents.

Maybe something that says "UI" or "sketch" somehow...here's all the variations of our icon, which could help for inspiration maybe...

3

I totally agree that the existing icon, whilst being a Balsamiq brand does not do a great job of indicating a generic wireframing/mockup tool - especially for those new to Balsamiq.

The placeholder box with the cross would go a good way to improving this. Perhaps the Balsamiq identity could be combined with that - for example in the following...

enter image description here

...which when scaled to 20 x 20 pixels - it juuuust about works.

enter image description here

2
  • 2
    That's pretty good. I like the line of thought there. It's just about intriguing enough to get people to click (or hover) to investigate what it's for, but it has enough obvious wireframe / Balsamiq references to make sense. I think that the tooltip that currently is in place for it should also be changed from 'UI Wireframe' to 'Create Balsamiq Mockup' or something like that to also increase the identification of the option. Also - Bonus points for creating the icon using Balsamiq itself! Nice touch.
    – JonW Mod
    Mar 16, 2012 at 10:04
  • I like this, but it's a lot of detail to fit in 20x20...I'll see if our designicorn Mike can take a crack at making it a little more clear.
    – Peldi Guilizzoni
    Mar 16, 2012 at 13:15
1

It is Balsamiq's brand icon, which comes with a certain level of brand recognition which is good for them and allows users to recognize the product...if they're familiar with Balsamiq.

I also think we're likely coming up against the same problem Balsamiq came up with...how the heck do you make a 20px icon that fully represents the concept of UI Mockups? A sketched box? Sketchy lines? I'm not convinced there's a useful direct metaphor out there that works in 20px, especially not one that works better than Balsamiq's brand recognition in a field where they're one of the most common mockup software offerings.

3
  • 1
    I wasn't aware it was a Balsamiq brand. I use Axure personally so haven't had exposure to Balsamiq. I did manage to figure out what this icon was for though, but that may be because I had been made aware that Balsamiq was now included and when I looked at posting a question there was a new icon there so I put two-and-two together.
    – JonW Mod
    Mar 15, 2012 at 17:33
  • "how the heck do you make a 20px icon that fully represents the concept of UI Mockups?" A box with an x in it (i.e., the conventional image stand-in)? Nothing says wireframes to me like that.
    – infoal
    Mar 15, 2012 at 19:10
  • 1
    @JonW upon reviewing Balsamiq's website, they don't do a good job of building a brand around the icon
    – Ben Brocka
    Mar 15, 2012 at 19:11
0

I would suggest a sketch of a pen, instead of a sketch of a smiley or a non-sketchy pen. That would signal "draw a sketch" to me. :)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .