Help me design the Linking Mockups Feature

Edit Subject

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.

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'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).

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.

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:

1. Select an object on mockup (a button, some highlighted text, etc).
   
2. Drag it to an open spot on the mockup, or on the Balsamiq Mockups' user-interface.
   
3. Drop it on the open spot. ***
   
4. In the open spot, a list of available 'link-to pages' is displayed in a "link controls" area.
   
5. Select a 'link-to page'.
   
6. The link is created.
   
7. 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).

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.

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).

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

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.