Balsamiq Community Discussion

Wireframes and dialogs (modal / pop up)

Hi Balsamiq Team. I have to design some dialog-conditions interactions. Ex : the user clicks a button, he gets a question, if yes he wil have a screen1, if no the sytem do somethign et so on.

I know that I can duplicate wireframes but I want to avoid that.
At the same time, it is important that I display the dialogs, then the wireframe results depending on the user’s answer.

Have you considered storyboarding for this, @simple45? Basically, it would just be displaying all your pages on a single wireframe and using markup to walk someone through the flow.

Similar to the geolocation image that Alasdair posted here.

Would that work for this scenario?

Brandan :
I will have to demo the link interactions (and real time navigation) between wireframes.

Under the topic “Wireflows with Balsamiq]”, Alasdair explained that links are not possible between controls on the same canvas

Ahh ok. Then yeah, if you need to show the actual interaction (eg clicking on a link and then the wireframe changing), you would need to use wireframe duplication.

As Alasdair mentioned, there isn’t a way to link between elements on a single canvas. I’m sorry about that, my friend.

You are saying that, if I have 10 interactions in the same wireframe, I have to duplicate it 10 times?

If you want to show actual interaction on that same wireframe, I’m afraid so.

It’s best to think of our app as digital pen and paper. If you had to use Pen and Paper to demo this wireframe, how would you do it? Hopefully, it would work the same way in our app.

Brendan :
That’s not what I said. I talked about actual interaction on that same wireframe because you suggested using storyboarding.

My original post is about dialogs / popus and interactions. Displaying pop-ups and interacting with user is the basis of any web application. Since, I want to avoid duplicating wireframes, I was asking for any other idea.

Ahh, then I am confused @simple45.

From your initial post, it sounds like you want to have a user click on a button, be posed with an A / B question, and then react depending on what they choose. Sometimes that’s sending them to another page, sometimes it’s keeping them on the same page.

Is that right?

Right.

Ok, good.

From that description, every button press has a minimum of one interaction on the same wireframe page. Story boarding would work because you could show the flow on one page. You could even add a link to other wireframes depending on the user’s answer. That’s why I suggested it.

Beyond storyboarding, I cannot think of a good way to do this without duplicating wireframes to show interaction.

Something that may help us brainstorm: If you had to do this on pen and paper, how would you do it?

I don’t understand why you are talking about “pen and paper”?
I am using Balsamiq so I am asking about Balsamiq capabilities (doing it on paper is another story, paper can not be dynamic).

Again, storyboarding has no dynamic links capabilities, so it is not a solution (see above).

Sorry for adding to the confusion, @simple45.

Our app is built to mimic the speed of pen and paper, without having to do the work of actually drawing anything. A good rule of thumb for using our app is that if you cannot do it on Pen and Paper, you likely cannot do it in our app.

I wanted to brainstorm using that analogy because we both are familiar with pen and paper’s capabilities. We could use that mutual language to maybe come up with another solution for you.

Who says that I cannot do it on Pen and Paper?

Balsamiq offers dynamic linking between wireframes. Can we do that on paper? : No (it is just an example).

I wasn’t meaning to imply that you couldn’t do it on pen and paper. That’s why I want to brainstorm using that as an example because there may be a way we aren’t thinking of.

As for linking, imagine you have drawn a picture of your website onto a piece of paper. You say, “when you click this button, you’re taken to this page” and then you switch to another piece of paper with a different page of your website. That is what our linking feature does.

I don’t want to compare Balsamiq to a piece of paper, otherwise I will use a piece of paper.

And your suggestion seems like : if I have 10 interactions in the same wireframe, I have to duplicate it 10 times. Again, I don’t want to duplicate wireframes.

Let’s see if other people have other ideas.