Loading Profile...
EMPLOYEE
Help me design the Linking Mockups Feature
Hi there friends of Mockups! Since the collaborative process we followed for designing the image upload feature worked so well (link: http://getsatisfaction.com/balsamiq/t... ), I thought we should do it again for the #1 most requested feature remaining: "Linking Mockups Together".
I took a stab at what the feature could look like, here it is:
I put the BMML file for the image above here: http://dl-client.getdropbox.com/u/417...
What's missing from the mockup is the inevitable slew of other features that come from having this, such as "export all flow as PDF" or "export all flow as HTML+CSS" or what not...we should still compile a list of those and prioritize it! :)
As always, I'd rather do the feature right than doing it rushed, so let's get this right! :)
I took a stab at what the feature could look like, here it is:
I put the BMML file for the image above here: http://dl-client.getdropbox.com/u/417...
What's missing from the mockup is the inevitable slew of other features that come from having this, such as "export all flow as PDF" or "export all flow as HTML+CSS" or what not...we should still compile a list of those and prioritize it! :)
As always, I'd rather do the feature right than doing it rushed, so let's get this right! :)
I’m excited to collaborate on this, you guys are smarter than me!
52
people like this idea
I like this idea!
Tell me when this idea gets some attention.
The more people who like this idea, the more it gets noticed.
The more people who like this idea, the more it gets noticed.
The company implemented this idea.
The best points from everyone
-
Hi folks! My design team just started using mockups, and it has quickly replaced Visio, PowerPoint, and other wireframe mechanisms for most of our work.
It would replace it for almost ALL of our work with this linking feature... the 3 top requirements for our work reiterate things that have already been mentioned, but I want to amplify their rank:
1. Link from (almost?) any control to another mockup.
2. An easy way to package up a set of related mockups for distribution.
3. A way to "run" the navigation prototype without needing Balsamiq (or any other special tool/technology) around.
I'd rather not go down the slippery slope of other interactivity. Nice idea to allow entry into fields, but do we also do hover animation, etc? So, by default, other than linking, I would avoid interactivity. And link by mockup name, please!
A package could just be a zip of a bunch of mockups.
I am technology agnostic for the most-part, but I prefer straight, simple HTML as the runnable navigation mechanism.
I’m thankful that Balsamiq exists
3 people think
this is one of the best points
-
I'd also really like to be able to link mockups together for storyboarding.
How about an alternative approach, which I've seen used in VUE (Visual Understanding Environment - http://vue.tufts.edu/index.cfm) - pathways.
A pathway is a route through a set of slides representing an aspect of a presentation. You might have 100 slides on a topic (e.g. Impressionist paintings) but want to show 25 slides (in a certain sequence) related to the work of Renoir.
When doing mockups for a web application, the individual mockups are part of a general graph. Story boards are pathways through the mockups.
For example, we have mockups A, B, C, D and E.
Storyboard 1: A -> B -> E
Storyboard 2: A -> B -> C -> E
Storyboard 3: A -> C -> D
The storyboards are independent of the mockups. Usually in paper prototyping you 'pretend' that clicking on a button with your finger goes to another piece of paper. Similarly in a storyboard, clicking anywhere in the mockup brings you to the next one in the pathway.
You could export the storyboard as HTML with the relevant links to the mockup PNGs.
Derek.
I’m excited
4 people think
this is one of the best points
-
Hi,
Just been pointed in the direction of Balsamiq by a developer at my work place.
I'm a designer and this tool is fantastic...but the things I immediately hunted around for were 'Add another page' and some sort of link function.
I agree with the chaps above who favour the 'simple' solutions.
For me to use Balsamiq in my normal workflow I would require 2 things:
1. Multiple pages
2. A clickable region I could place over various objects that on clicking would go to another page.
That's it - the 'actions' stuff etc I can work around - I don't really need that sort of complexity at this stage of design.
Thanks for all the hard work and the brilliant app.
I’m excited
7 people think
this is one of the best points
-
Inappropriate?As a starting point, here's a list of old topics related to this one:
http://getsatisfaction.com/balsamiq/t...
http://getsatisfaction.com/balsamiq/t...
http://getsatisfaction.com/balsamiq/t...
I am forwarding all of those here now.
I’m happy
1 person thinks
this is one of the best points
-
Inappropriate?Great to see this new thread.
I'm starting to wonder if you shouldn't just create a new UI control called "Click Region". It would really simplify everything (IMO).
While I like the idea of making the button and rectangle have a link property, I worry about consistency and usability.
Many parts of a UI mockup would benefit from a link to another mockup. The button bar for example would need the capability to have multiple links to other mockups. A button would only need one. Therefore the user would use the rectangle control to create a click region for the button bar, however use the button property to link a button. This is confusing.
And most importantly.
Many people copy and paste UI from one to another. This could cause a myriad of issues as the link would get copied too. Resulting in a mess of linked mockups that should not be linked.
Therefore I propose a new UI component called "Click Region". It could be transparent with no layering. Perhaps it could only be seen with a toggle to story board mode.
1 person thinks
this is one of the best points
2 Comments Add a comment
This is one of the best points
-
I never saw a response on this - which surprised me. Peldi, what are your thoughts on this? -
Hi Michael, I'm thinking that I'm still on holidays (or at least I'm trying) and that I'll focus on this in the new year, but that I wanted to get the conversation started in the meantime.... ;)
-
Inappropriate?Need to think of how this will work with Confluence and the other wikis. Maybe there would be one mockup file with multiple tabs (one for each mockup). The user could then define which to show on the page.
1) a PNG each each mockup tab (multiple links would be added to the page)
2) an interactive mockup (a single link on the page
I’m happy
3 Comments Add a comment
This is one of the best points
-
Wait, I didn't say that a mockup would have multiple pages...what I was thinking for Confluence is to turn the embedded mockup image into an image+imagemap for the hot areas, which would then link to wherever...I need to mock it up. :)
-
OK, I was thinking of it differently in my mind. Need to think of the workflow to see how complex this would be. Would this limit you to images on the same page? Probably not, but then if there are 100s of mockups throughout the wiki, how does one easily link the relevant ones.
In my mind I saw a "project" mockup which contained the relevant screens and from which I could create the relationships. -
Peldi, EasyPrototype has a way to do "image+imagemap for .. hot areas .. which .. link to wherever". You can download the trial version, create a simple screen with a button, publish it, and check-out the HTML to see how they wrote it. I did that a year or two ago, but I forget exactly what they used. ~Thom
-
Inappropriate?This is a great product, and this feature is one of the missing pieces, at least for me. I just started using this an hour back, in fact still using the demo version.
I think most elements have one or more possible actions associated with it. To reduce complexity and keep in mind the philosophy of the whole prototyping method and the product, the lesser the better, IMO. A text box, text area etc has an action associated with it - fill in some random text. A linkable element (tabs, links, buttons) links to another mockup. This would enhance the presentation of a wireframe. Also, 'Full screen' is not a great name and 'Presentation' might be better (@Michael who I believe initiated that particular feature request called it that).
Will be following this thread closely. -
Inappropriate?I like the flexibility of Michael's idea to have a "clickable region" component, but I am more partial to OmniGraffle's "action" property on all objects.
It seems to me to be the most flexible solution, allowing me to specify that any object will behave as a link to another canvas, or focus on a specific object when responding to an onclick event.
I’m thankful
-
Inappropriate?I've wrote you the mail about the prototype I have, but I may explain my main ideas here:
1) for design-time we extend the number of supported file types to 2 by adding 'bpml' - a Project file
2) you can still create individual mockups and edit them as at the moment
3) you can create Project and add mockups to it - either add existing items or create new mockup initially linked to the project
4) all linked mockups still exist in the external files and can be edited separately /* all this repeats the popular IDEs' (VS, Eclipse, etc.) behavior */
5) while editing the _project_ file you get the new view with 2 panes. The left one contains mockups thumbnails, the right one is the working surface with the currently selected mockup
6) on the working surface you see the mockup that could be edited in place the same way as in the 'standalone' mode, but each control (every of the existing controls) gets the new 'link' property that allows you to choose one of the mockups added to the project. May be it would be useful to add special 'linking area' control in this mode, but I doubt. This linking information is stored inside the project file and do not affect the mockups files
7) you also get some extra properties like project title, mockup title, mockup comment, as well as 'hint' property for the element that has the link property filled (or may be not only for these elements, but for any desired element)
8) when in presentation (really better name) mode you see the mockup. Clickable (with filled link property) elements are marked somehow (with icon, or with border, or with colour highlight). The hints are shown when hovering the elements. The mockup title and the comment are viewed on the surface to allow users (like customers) to view your project (storyboard) without your explanation. When clicking the linked items you see the linked mockups in the same window
9) the links do not work in design-time
These makes the scenario really simple yet powerful enough for the most of real cases. I would also suggest ability to 'publish' (build, export) the project to the archive containing html presentation ready to be sent to the people nor having the BM (the same as when you export individual mockup to the png file).
2 people think
this is one of the best points
2 Comments Add a comment
This is one of the best points
-
This captures what I was thinking. in Confluence you could just have a new macro to define which file to display, the interactive one or the PNG.
As for the actions, I would like "on click" and "on hover" hover could be useful for menus.
I also agree on the rename of Presentation mode. -
I also like the concept of a project of several mockups or some way of having multiple mockups in one file and being able to navigate between them using thumbnails or something similar.
-
Inappropriate?Hey, Long-time Lurker... ;0)
One thing that strikes me here is that the Desktop version will kind of get the short end of the stick here - to use this feature w/ Desktop, I'd have to either make sure all the recipients have Mockups for desktop (and all my BMMLs!), or start planning my website to host all the individual pngs. What I like about Mockups for desktop today is that the output is encapsulated in one little file I can email around, so this proposal doesn't really solve my main problems generating full "flow" storyboards.
Worth considering (and maybe not as hard as you'd think? Not sure) would be encapsulating the output of a multi-BMML "project" (piling onto Eugene's work above) in some format that can handle it. A PDF w/ pages is workable, but I think you'd have a lot more room to grow into some crazier-cool features if you considered SWF as an output format =). It's self-contained, and can be used for adding other "dynamic" features to the output later (man, I wish I had hoverable tooltips/flyouts over certain regions!).
I've done some on-the-fly swf generation using ByteArrays in the past, and could actually imagine this not being ridiculous hard. The main cost would likely be the tax on the user to learn the new concept, but I still have a feeling it would be worth it (since, frankly, what you're proposing won't help my workflow [sorry, I still only use desktop and send pngs]). -
Inappropriate?While all of us love this product and want to make it better, I feel we might be doing a couple of unintentional but bad things, IMHO. Namely, feature bloat and designing too much for each of our own individual selves and our special edge cases. Again, I completely understand your points and would find some of these useful, but again, some of them might not be core to Peldi's idea of keeping it simple and solving the problem he is trying to solve. From the basic research I have done by talking to a few users of Mockups and other designers, I feel that there are two basic things that mockups can solve apart from what it already does and which is in tune with the overall idea.
I have already made this point but want to find some sort of consensus on how many people agree with my analysis of both the bloat-ware and requirements.
With a paper prototype, a designer can do a usability test by mimicking certain events (like inserting a text-box when user pretends to type into it) and fetching the next screen when the user navigates away from the current screen. One can also demonstrate to other stakeholders the design and its rationale. If Mockups is basically something that takes all the plus points of paper prototyping, then its obvious next step is to aid the designer to satisfy his two goals - usability testing and presentation. And restating my earlier comment, it is basically LINKS and ACTIONS. Link will link to another mockup(it is a type of action obviously). Action is simple, and might be a misnomer as it mimics user input. Wouldn't this accomplish most of the goals?
I have used only the desktop version and do not understand all the dynamics of its use in a wiki. And while many of you may disagree with my opinion, I do feel we need to be more empathetic to Peldi's overall design philosophy and values before suggesting a plethora of ideas. It is our duty as designers to do nothing less.
I’m concerned
3 Comments Add a comment
This is one of the best points
-
I posted about Paper Prototyping and since you mention, I will post it here:
http://getsatisfaction.com/balsamiq/t...
http://getsatisfaction.com/balsamiq/t... -
This comment was removed on 01/08/09.
see the change log -
Yep. That is exactly what I meant when I mentioned usability testing with paper prototypes.
-
Inappropriate?Hi,
Just been pointed in the direction of Balsamiq by a developer at my work place.
I'm a designer and this tool is fantastic...but the things I immediately hunted around for were 'Add another page' and some sort of link function.
I agree with the chaps above who favour the 'simple' solutions.
For me to use Balsamiq in my normal workflow I would require 2 things:
1. Multiple pages
2. A clickable region I could place over various objects that on clicking would go to another page.
That's it - the 'actions' stuff etc I can work around - I don't really need that sort of complexity at this stage of design.
Thanks for all the hard work and the brilliant app.
I’m excited
7 people think
this is one of the best points
3 Comments Add a comment
This is one of the best points
-
+1 on multiple pages... balsamiq can now open multiple windows, just need to support the concept of a 'project'...
also +1 on clickable region... seems like the simplest, non-intrusive way to do this
i'd like to add my own request here which is templates... i'd like to be able to create a mock template and extend it multiple times. changes in the template will be reflected in all extending mocks. -
It would indeed be nice to open one 'file' and have all the related mockups open at once. This could be in the form of multiple pages or some kind of project file, as Patrick suggests.
The clickable region is a good concept to use on controls that don't support out of the box.
I would like to see the link property as a standard though for the controls that suggest to be clickable, like the tabs bar for example. It is easy enough to add or delete tabs, simply by separating the words by a comma. It could become a pain if you had to relocate the clickable regions for these types of controls each time you add or remove a tab.
The links could be set by means of the links dialog window or maybe as part of the text (example: Tab 1 [mockupName], Tab 2 [mockupName2]) -
I couldn't agree more to keep it simple. The thing I really like about Mockups is that it's simple and quick.
-
Inappropriate?Totally agree with Johnaustin, ideally with a third point:
3. Export to HTML. -
Inappropriate?Hmm this will be a very nice feature.
What I would like to see is a kind of storyboard function.
Just something easy.
What somebody was thinking at my work is a function where,
the moment you click on a next button or so, the new screen
becomes visible under the screen where you clicked on.
Basicly at the end you get some kind big overview in a linked structure
where all screens are visible and where you can hide the ones you dont
want etc.
This to have a total overview of your application screens and to
see better inconsistencies in between different screens.
This is a quick mockup of the idea.
With this you can follow better a specific path in you application
without losing overview of you application. If you only want to follow
the next path, you dont see the back path etc...
I’m happy
1 person thinks
this is one of the best points
-
Inappropriate?I'd also really like to be able to link mockups together for storyboarding.
How about an alternative approach, which I've seen used in VUE (Visual Understanding Environment - http://vue.tufts.edu/index.cfm) - pathways.
A pathway is a route through a set of slides representing an aspect of a presentation. You might have 100 slides on a topic (e.g. Impressionist paintings) but want to show 25 slides (in a certain sequence) related to the work of Renoir.
When doing mockups for a web application, the individual mockups are part of a general graph. Story boards are pathways through the mockups.
For example, we have mockups A, B, C, D and E.
Storyboard 1: A -> B -> E
Storyboard 2: A -> B -> C -> E
Storyboard 3: A -> C -> D
The storyboards are independent of the mockups. Usually in paper prototyping you 'pretend' that clicking on a button with your finger goes to another piece of paper. Similarly in a storyboard, clicking anywhere in the mockup brings you to the next one in the pathway.
You could export the storyboard as HTML with the relevant links to the mockup PNGs.
Derek.
I’m excited
4 people think
this is one of the best points
1 Comment Add a comment
This is one of the best points
-
what if we simply added tags to the mockups? The story board editor could search for tags and allow you to search & collect them, sequence them much as any slide-show editor. (there has got to be a plug in for GIMP that could help here)
This would keep the complexity out of the mockups program.
I vote against the actions verb - this is a slippery slope that will have you competing with rational rose. -
Inappropriate?I'd like to add my voice in support of two ideas already expressed:
1. Using a simple "pages" metaphor to go beyond 1-screen mockups
2. The idea of a "link" control that moves you from page to page
1. Pages Metaphor
Quite simply, I think this is why PowerPoint is so popular as a prototyping tool. It's so simple to take one page, duplicate it, make some edits, and now have the beginnings of a workflow that can be demonstrated by flipping through the slides.
2. Link control
I think this is the simplest, most direct way to implement a feature that takes you from one page to another.
Thanks for listening!
Doug -
Inappropriate?I had an idea about using 'layers', where you'd have:
1. a template layer (optional) - so you could create a mock and reuse it as a template in multiple other mocks. you cannot edit the template layer, other than specifying the template mock to be used.
2. a link layer... where you'd have clickable regions. when creating/editing clickable regions, the mock is greyed out and disabled but visible in the background.
3. one or more notes / annotation layer. you can show/hide note layers during a presentation.
I’m excited
-
Inappropriate?To completely get away from OmniGraffle if I could make an object (button, link) clickable, tell it which mockup to open on click, and then export the entire thing to PDF (so the user can click all around in the PDF) then I'd be extremely happy.
I’m confident
2 people think
this is one of the best points
-
Inappropriate?Hi there, guys;
I've just started testing the tool, and it seems amazing.
Just some quick notes:
1- As someone said before, I started looking for "add new page" and "link" features, as soon as I felt that the tool was worthy (in two minutes!)
2- I like the "clickable region" approach for its simplicity, though having an action defined in some type of objects would do.
3- Multiple pages (and keeping it in ONE file) is a must, because easing the delivery is a key factor when discussing approaches.
4- Have you considered something like "layers", or "backgrounds"? It's a killer when doing multiple pages.
the best (balancing cost, features, easy, demoable, ...) mock system I've ever used is this Visio stencil here: http://www.guuui.com/issues/02_07.php
Keep it simple, but let's get some "interaction" features :-)
Thanks!
I’m excited
-
Inappropriate?First I'd like to echo everyone else's sentiment that this will be a bad-ass feature, and I can't wait to have it.
I'm pretty happy with the original proposal. I think having the link icon in normal edit mode and the whole element be clickable in full-screen mode is a good way to go about things.
My additional $0.02:
- When exporting to an image, give the option to automatically create a note with link destination next to any linked elements
And fwiw, this feature is of somewhat limited utility to me (as a Balsamiq Desktop user) until you have export to HTML+CSS.
I’m psyched!
-
Inappropriate?Peldi,
I love your tool! It looks like a ready-for-real-use tool that DENIM and Napkin never quite matured into.
The one feature your tool needs - before it becomes useful enough for me to purchase - is linking.
For me, speed is the key.
I facilitate requirements and design sessions with end-users and subject-matter-experts, where I create mockups with them in real-time. Normally I have to use a white-board, because no e-tools are fast enough. Your tool looks like it could be used in real-time mockup-creation, if this feature is implemented the right way.
A key focus is --> How fast can a link be created?
A link can be created on an iRise* mockup in 1 or 2 seconds. Balsamiq Mockups could match that.
The key to speed is drag-and-drop linking.
Here is a style** of drag-and-drop linking that I think would work for Balsamiq Mockups:
- Select an object on mockup (a button, some highlighted text, etc).
- Drag it to an open spot on the mockup, or on the Balsamiq Mockups' user-interface.
- Drop it on the open spot. ***
- In the open spot, a list of available 'link-to pages' is displayed in a "link controls" area.
- Select a 'link-to page'.
- The link is created.
- The "link controls" area is now displayed just below (and appears with) the "object controls" window in the upper-right corner.
This fits in nicely with the action-control-on-every-object idea. For those who want an ad-hoc area to be clickable, perhaps you could add an "Ad-hoc Area" object, that has an "action control" like all the other objects -- to allow for both approaches to be used.
I look forward to seeing what you implement. I hope you choose to use a form of link creation that is very fast to use.
Best Regards,
Thom
PS - I also think the 'storyboard' feature would be nice, but I see it as a separate thing. I think of 'storyboards' as 'user scenarios'.
PPS - I also think the 'project' concept would be useful. However, I see that as higher level than a 'storyboard'. I see it as a hierarchy --> [ Project ] > [ Storyboard ] > [ Screen ].
* iRise is a great tool, but it is way too expensive and it locks you in (no export to HTML outside the tool).
** iRise has its own way of implementing drag-and-drop linking that would not work well with Balsamiq Mockup's user interface. Besides, iRise would probably claim their specific implementation is patented.
*** This style of drop-in-an-open-area comes from the Super DragAndGo add-on to the Firefox web browser. Super DragAndGo has been replaced by the QuickDrag Firefox add-on (with its "Open clickable links in new tabs" option turned on, and all its other options turned off).
I’m excited
1 Comment Add a comment
This is one of the best points
- Select an object on mockup (a button, some highlighted text, etc).
-
It occurred to me, after I posted the comment above, that regular drag-and-drop will move the object being dragged.
In iRise, the way they avoid this is the user-interface has a list of all the pages in the left column. You 'drop' the object onto the page-name it links-to to create the link, but the original object stays where it was. They do move a 'ghost' image of the object when you drag the object, but it disappears when you drop it. Having the 'ghost' object move during the drag operations is nice, but not necessary. As for dropping on to the link-to page, I was trying to avoid the extra clutter on user-interface, and not suggest the list of pages be showing full-time. That is why I suggested the Super DragAndGo drag-and-drop-on-a-blank-spot style, instead.
The obvious reason this is not a problem with Super DragAndGo is because it only works on non-editable web pages.
As for Balsamiq, I can think of a couple ways to fix this:
- Use a right-click drag-and-drop, instead of a left-click drag-and-drop.
- Create a larger "out of bounds" area, that is outside the active 'page' area, so the objects can be pseudo-dropped on that to create a link.
- Simply have the "link controls" area show up at the same time as (and just below) the regular "object controls" area, to the object can be pseudo-dropped on that area to create the link.
There may be other options, but that is what is occurring to me right now.
~Thom - Use a right-click drag-and-drop, instead of a left-click drag-and-drop.
-
Inappropriate?I have just stared looking at this tool and also think it is great, very easy to get up to speed and use. I right way started looking for a way to link the pages together and show flow. I agree this should be a simple feature with
1. Using a simple "pages" metaphor to go beyond 1-screen mockups
2. The idea of a "link" control that moves you from page to page, this would be a section of the page or associated with the feature itself, a link button for example.
I also would like quick and ease of use and would stay away from the complexity of a “project” mock up. Seeing the links on the page would be a very visual way to go.
I am really looking forward to being able to use this new feature; this will allow us to move over to using your tool. Without the ability to link, the mockup pages wouldn’t be very helpful in our working environment. -
Inappropriate?Simplicity is one of the sublime benefits of Mockups. What I do now to simulate a link is use a callout circle and number them successively. Then, I use that number as the first character of the page name. If we were simply to use add a link property to a callout circle, that would solve the linking problem on screen as well as when the image is pointed out. Imagine then that a callout has a bubble you could "pull" out of it that would mask text below it blue.
Also want to support other's comments regarding a templating system, much like Django would be best, and the ability to open multiple related files as a project.
Otherwise, keep it simple, that's the beaty, one of them, of the tool. -
Inappropriate?I like it - when will it be ready?
thanks!
c -
Inappropriate?Hi folks! My design team just started using mockups, and it has quickly replaced Visio, PowerPoint, and other wireframe mechanisms for most of our work.
It would replace it for almost ALL of our work with this linking feature... the 3 top requirements for our work reiterate things that have already been mentioned, but I want to amplify their rank:
1. Link from (almost?) any control to another mockup.
2. An easy way to package up a set of related mockups for distribution.
3. A way to "run" the navigation prototype without needing Balsamiq (or any other special tool/technology) around.
I'd rather not go down the slippery slope of other interactivity. Nice idea to allow entry into fields, but do we also do hover animation, etc? So, by default, other than linking, I would avoid interactivity. And link by mockup name, please!
A package could just be a zip of a bunch of mockups.
I am technology agnostic for the most-part, but I prefer straight, simple HTML as the runnable navigation mechanism.
I’m thankful that Balsamiq exists
3 people think
this is one of the best points
2 Comments Add a comment
This is one of the best points
-
I think linking is mostly for showing finished sketches to others, so I don't think that links need to be interactive inside Balsamiq (except maybe in full-screen mode). I think that exporting to simple html files with one png per file using image maps for the links would be sufficient. No need for CSS even. Just zip together the html and png files. I agree that interactivity is a slippery slope and runs the risk of making the product something it's not meant to be.
-
I agree that the linking affect should only be application in full screen mode.
-
Inappropriate?Great commentary above and in the prior discussions. Let me add my “vote” to the mix.
I believe that Mockups, Prototypes and Storyboards are different and all are valuable at various stages of a project.
* Mockup – Page Design
* Prototype – Interaction Design
* Storyboard – User Story/Use Case Review and Approval
I think that the notion of a Project is a good one, where a Project is just a collection of (references to) Mockups, (optional) Storyboards, and an (optional) Prototype (collection of Interaction specifications). It seems to me useful to be able to open either a Project or a single Mockup.
I agree strongly that it has to be quick and easy to play with interaction designs. A couple of thoughts on how to quickly specify Interactions and Storyboards:
* Interaction – Shift drag the widget to one of the tabs.
* Storyboard – Either 1) drag the tabs into storyboard order, or 2) “follow me” through an interaction sequence.
I also agree that is important to be able to quickly and easily export a Prototype or Storyboard to HTML. I believe that this function should gather the assets, generate HTML and zip for easy deployment. It would be great if the user could specify an HTML template. This would allow for incorporation of annotation and feedback mechanisms (e.g. Google Forms, Protonotes, etc.).
My 2 cents ...
I’m excited
2 people think
this is one of the best points
-
Inappropriate?I am a new user of Balsamiq Mock-ups and was generally impressed with the ease with which I could create mock-ups. Like most others who have posted their ideas in this thread I too was dissapointed with the lack of linking and some interactivity (e.g. expanding and collapsing combo-boxes to show choices). I prefer simplicity over complexity for several reasons:
- after all this is a mock-up and not the actual site (which some clients may assume it is if we make it too real).
- speed vs. laboring over details and making everything work exactly as it should
- my intent is to get the client to react to the concept, not be distracted by details
Some of the old Mac users may recall HyperCard. An avid user of HyperCard I liked the simplicity if provided for navigation and interaction:
1. The metaphor of a card was easy to understand
2. Presentations were made up of a stack of cards
3. Any object in a card could be hyperlinked to go to another card
4. The order of the cards was not important unless the stack was a linear presentation
5. You can place a transparent object on any other object or part of it and use simple commands like - Go to "card name", or Go "next", or Go "previous", or Open "Stack name".
6. You could give the stack(s) to anyone with a Mac and they could use the application.
My three criteria would be to make it intuitive, make it fast, and make it easy to distribute.
Shailesh
2 people think
this is one of the best points
-
Inappropriate?I think your initial design nails it by just having a link property on UI elements that naturally support it, and also having a link property for user defined regions. Anything more, for now, would be over kill.
From there, Mockups could compute the set of linked mockups, export/import the set, open/close the set and/or selected linked mockups, create a view of the link graph (story board), etc.
I recommend deferring all the complex stuff for later (projects, stacks, actions...), and only implement simple linking. It would be a big win for Mockups. -
-
-
Inappropriate?My team has created (manually) a linked mockup html set of webpages that user workflow flow. Our plan is to use it to demo, but then also to usability test.
In doing this, we have realized the need to display a little marker on wherever the linkable hotspots are. To do this, we placed a little arrow above each linkable hotspot. This was to give the viewer an idea on where to click.
However I would like this to be toggled on or off. If I am doing usability testing, I want the arrows off so that the user is forced to think about where to click. For demo purpose, I want the arrows to know where to click.
Here is an example:
I hope this can be a part of your design.
7 Comments Add a comment
This is one of the best points
-
Hi, Michael. Excuse me, but I'm unfamiliar with getsatisfaction.com and I don't know if you saw my response to a post of yours from 6 months ago. Unless I find a better solution, I will probably implement a simple storyboarding script that will generate HTML with the proper PNGs chained in the proper order. If you are interested I can release it publicly.
-
I have seen you email, and I appreciate the offer. However I still feel that this feature needs to be part of Balsamiq. I don't want to take the pressure off this important feature that will really take Balsamiq to the next level.
-
sorry for intervening...
jhs, I have the 80% finished stand-alone js/dhtml app solving the task
if you are interested - I can incorporate you in the project (it's a bit suspended due to my lazyness :) -
Eugene, I was thinking standalone DHTML/JS too. I am quite intent on releasing it as free software ("open source") so if that's not good for you, that's fine but I'll just start my own project.
Michael, your point about the integrated feature is well-taken; but I consider this merely a stopgap, and a quick weekend project. -
jhs, open source is quite ok for me, the current sources are hosted at google code.
Please, drop me a note at emirotin at gmail.com and I'll send you details -
Sorry to spam the comments but I'm having trouble finding your code either on this site or code.google. Would you mind posting a link? Thanks.
-
jhs, please, contact me via e-mail
-
-
Inappropriate?My Scenario
* I only use the desktop version.
* I only intend to use linking in presentation mode.
* I am the only one creating mockups, but must communicate them to the entire team.
My Preferences
* A link control would be perfect! No need to change the other controls. Just put this transparent control over what you want clickable (anything/anywhere). Can use a big hand in presentation mode :D
* Absolutely NO need for any interactivity (beyond linking between mockups).
* No need to link to anything besides other mockups (web pages, etc).
* Love the idea of a project file that groups a collection of mockup files.
* Would love to export a presentation for those without BM. A zip file that contains a folder full of PNGs and web pages with image maps would be perfect (easy to check into source control).
I’m a huge fan of Balsamiq Mockups!
1 person thinks
this is one of the best points
1 Comment Add a comment
This is one of the best points
-
I agree - this seems like it would be the simplest (the only feature would be to open a new mockup when in full screen mode). I really liked Balsamiq on the online demo, but was a little surprised/disappointed after buying it and realizing it didn't support links. This was the only additional feature we needed, and will probably use the Visio GUUUI stencil instead until this is implemented.
-
Inappropriate?I wanted to second Derek's suggestion (from a while back) on the use of the VUE utility (Visual Understanding Environment - http://vue.tufts.edu/index.cfm) . (open source). In addition to handling pathways, it also is able to hold metadata about the objects such as images contained in drawing. Further, it can bundle resources together with drawings into project files for ease of portability. It is a very nice compliment to Balsamiq
-
Inappropriate?Good idea,
I'm sorry if I don't have time to go through the entire thread to check but, my only suggestion would be to integrate, or plan for, a preview of the linked mockup when you roll-over the link. -
Inappropriate?I have been doing pseudo-storyboards (for an iphone program) simply as one big mock up containing multiple screens and using callouts and arrows to link them. This works pretty well for a medium number of screens and is pretty rapid.
For me, having to split this into multiple files to get at 'storyboard features' would be a step backwards as I'd then have to switch between files, where now I just clone some screen or action callout I already did, paste it, edit it and link it - and I can so far keep the entire design on one mockup as the iphone screens are small. (I appreciate this won't work as well for desktop GUIs or websites - and maybe not for very complicated iphone programs either - in this case, multiple files may be the way to go).
What would help my case, though, is if the software had some shortcuts to link controls or click areas to screens instead of having to roll that myself using callouts and arrows - which although workable, is a little bit painful and a bit of an interruption to the flow of creating the mockups. If the program then knew enough about the links to keep everything connected and the arrows looking reasonable as I drag stuff around, that would be great. Automatic layout of the graph would be even better but only a 'nice to have'.
So in summary I think connections within mockups as well as across them is important. -
Inappropriate?Thanks for considering this, it's the main thing I'd like to see. For the Desktop version it needs an export to a storyboard to send to users that don't have Mockups. Either PDF or HTML would be acceptable methods.
I’m happy
-
Inappropriate?I believe an extra control in the Control Properties section that would allow "on Click" to link to another Mockup would do the trick. It is how Powerpoint does it with presentations where you want to go to a specific page in the presentation with a link.
-
Inappropriate?I was using a technique that uses a CSS sheet to show "Hot Spots" on a mockup. When I click on the hot spot it will link to another mockup.
After putting a demo together using this method, I have sme suggestions on how to make it automated through Balsamiq Mockups.
It would be great if you could add a "link" property to the objects that would normally be used for linking. This property would allow you to specify what mockup you would be linking to via a dropdown list of mockups that have been created.
The next step would be to add an "Export to HTML" option on the mockup drop down that would create an html page. This HTML would have the "Hot Spots" defined (since Balsamiq knows the position and size of the linkable objects) and hrefs to define what mockup to link to (since Balamiq also knows the Mockup to link to).
There will also need to be some way of determining where the PNGS are Stored (maybe a folder called IMAGES that is a subfolder of HTML). There should be a way of specifing where these would be created maybe with an INI or an Options feature that would allow you to specifiy where these pages would be stored. Once you know where these pages are to be stored you can easily create the HTML because Balsamiq knows the location of the links (hot spots), name of the linked mockups, and the location of where the images and HTML files are located.
I have examples of what I have done if anybody is interested.
Thanks,
Bennett Frazier -
Inappropriate?Hi everyone, thanks so much for all the feedback and for waiting so patiently. I have implemented linking in 1.6 (released today), announcement here: http://www.balsamiq.com/blog/?p=1181
I’m super-thankful
1 Comment Add a comment
This is one of the best points
-
perfect. simple and functional. and as an added bonus, terminology change to presentation. love mockups even more now!!!
-
Inappropriate?Microsoft Expression Blend 3 will have SketchFlow as described in the article: http://www.infoq.com/articles/guest-s...
A GUI editor to compose the application flow seems to be one of the highlights of SketchFlow.
I am a fan of Balsamiq and I hope B can have this earlier than SF. -
This reply was removed on 12/15/09.
see the change log
