Interaction Design In The Cloud

Advertisement

Interaction designers create wireframes in tools such as Adobe Illustrator, OmniGraffle and Microsoft Visio. Originally, these wireframes were primitive shapes drawn to represent various UI elements. Many of us cannot imagine life without them.

There are, however, reasons to consider moving to the cloud to do interaction design. In short, today’s cloud-based tools are:

  • Optimized for collaboration,
  • Editable anywhere,
  • Interactive,
  • Published in real time,
  • Self-maintaing (the user doesn’t need to update software),
  • Payable monthly,

Emailing your old static designs will feel old fashioned once you see what these tools can do. Going a step further, there are tools for the user review process, too. Just upload your ideas, from simple mockups to final layouts, link them together, and share them for comment.

iPad Wireframe1
(Image credit: baldiri2)

This article walks you through the current selection of cloud-based tools and provides some recommendations. The number of offerings and amount of functionality are pretty vast. For the sake of brevity, we’ll address two functions: prototyping and wireframing. But if you’re intrigued, you might want to explore cloud-based image editing, mind-mapping tools and other UX activities. These tools are already out there, and surprisingly good.

Prototyping

For our purposes, prototyping involves uploading images (screens) and linking them together via hotspots. Once these are set up, the prototype is published and available to reviewers for usability testing, commenting or both.

Review criteria
Here are the fundamentals that a product should support in order to compete in this space:

  • Quick uploading process,
  • Support for several source image file formats,
  • Easy linking between pages,
  • Support for feedback from end users.

Some items aren’t available as of this writing:

  • The ability to nudge images in line without having to recreate them;
  • The ability to create interactive objects and layer them (such as a menu bar that appears on every page).

InVision

What it does
Create your screens in your favorite tool and upload them to InVision3. Then add hotspots; a hotspot links to another page. This is great if you live and die by the comp (Photoshop file). For example:

  1. Create a new project. Think of a project as a collection of previously generated comps that you are going to tie together as a prototype via InVision.
  2. Upload your files to this new project (the images in this article are PNGs).
  3. In “Build” mode, create the hotspots. Basically, you are linking together the prototype. If you have all of the collateral that you need, this will go quite fast — exactly as you’d want it to work.
    Smashing Magazine Example

Observations
The application works as advertised. It enables the user to quickly wire up prebuilt comps, wireframes and sketches. The tutorials also explain useful actions, such as creating hotspots that will be the same on multiple pages (these are called “templates” in InVision).

Speaking of templates, they expose both a major advantage and a major disadvantage of this tool: if the uploaded images are not placed perfectly, then the templates will not line up properly. One would want the ability to adjust the x and y coordinates of any image so that they line up perfectly without having to change the source files. On the upside, if you’ve done the prep work right or you’ve made your hotspots large enough, you can fudge this a bit, and the templates really accelerate the build process.

A number of usability issues have made me scratch my head. For example, the first time I tried adding a hotspot to the search input field, the “Link to…” modal dialog was off to the left side of the browser, which made it impossible to save or cancel the dialog. I then tapped the “Update screen” at the bottom of app to refresh the screen. It turns out that in InVision speak, “Update” = “Replace.” I was afraid to refresh the browser because there is no indication of whether the application saves automatically. So, in the end, I switched to “Preview” and then back to “Build.”

Once you’re familiar with the quirks, however, the application is useful. If you’re a designer or want to work offline to generate wireframes, then give this app a hard look.

  • Upload process
    Drag and drop, or browse the file system
  • Supported file formats
    JPG, PNG and GIF
  • Linking pages
    Easier than the others tested because of templates
  • User feedback
    Easy, nested
  • Marquee clients
    eBay, Google, Intuit, Whole Foods and many others. Very impressive.

You can taste the fruits of my labor4. Remember, being online means it’s delivered to whoever, wherever, whenever it’s done. Feel free to add comments.

FieldTest

In spirit, FieldTest5 (in private beta) serves the same space as InVision. The designer uploads prebuilt comps, wireframes and the like to FieldTest, ties them together, and then publishes them for review. One advantage is that FieldTest leverages device gestures. In short, you can “play” FieldTest prototypes on your iOS, Android or Windows Phone 7 device and have it respond to gestures. Combined with the built-in screen transitions, this is a powerful function for mobile app designers.

As with InVision, screens are grouped into “prototypes” (projects). Including them in a project means that they can be linked to and from other screens. The process is the same, too: create the prototype collateral, link it together via hotspots, and publish it for review. For comparison’s sake, here are the hotspot configurations for the two apps.


This demonstrates the differences in approach. On the top is FieldTest. It allows a user to choose between gestures (the prototype I built was an iPhone app). The gestures are tap, long tap, swipe, swipe left and swipe right. Multiple gestures can be active for the same hotspot, which is particularly cool and gives a realistic experience of various actions. On the bottom is InVision, whose ace is templates. The author can create a template for several controls that appear together, and they can reuse that template on several screens.

Observations
If I were to choose between these prototyping tools, FieldTest would be my choice, largely because I build mobile applications. Having listeners for multiple gesture types makes for a more realistic prototype. If the app were Web-based, then InVision is more mature.

FieldTest still has work to do, though. In the beta, gestures such as up and down are missing. Templating as InVision does is really useful. It streamlines the addition of hotspots. Another area for improvement is in comments, and allowing a prototype’s end user to provide feedback.

There are other usability nits. For example, FieldTest includes a status bar at the top of each screen. I have yet to figure out why someone would want this, and it’s not optional. So, if you take a screenshot on an iPhone, you’ll have to edit it to remove this status bar, only for FieldTest to put it back.

Try it out for yourself on the prototype built for this review6. Please note, there is no down gesture, so if you want to try that, gesture from right to left (like when advancing through pictures in iPhoto).

  • Upload process
    Browse the file system
  • Supported file formats
    JPG, PNG and GIF
  • Linking pages
    Fairly easy
  • User feedback
    Enables gestures on the device, which is great.
  • Marquee clients
    In private beta

ClickDummy

ClickDummy7 is another competitor in this space and has the same process as the others. The user uploads materials and then links them together through hotspots. The link function is a “tool” contained in a drawer (i.e. a UI element that slides in and out from one side of the screen).

Observations
This drawer seems innocent enough, but it creates unnecessary hurdles for the user. In an attempt to simplify the problem, it has added confusion and multiple steps to an easy process. How? The user has to toggle between this tool drawer and the page-picker drawer a lot. The page picker also has to be overloaded in order to provide both functions (selecting a page, as in navigation, and selecting a page, as in a hotspot target).

A second issue: the website says that the user can drag and drop images onto the pages drawer. This doesn’t work in my (Chrome) browser. It instead replaces the current page with the image. After a panicked “Backspace,” the user is restored to their project but has lost their location and has to start over.

Another point: this all-important drawer is closed when the app launches. It took about five minutes to determine that the app was working, and this after weeks of looking at apps in this space.

Lastly, unlike both of the apps reviewed above, this one has no compelling feature that makes the additional effort worth the time. In future, hopefully, the addition of some product differentiation, combined with a rework of the primary use case, would make this application worth another look.

You can see the output from this exploration8 for yourself.

  • Upload process
    Drag and drop, or browse the file system.
  • Supported file formats
    JPG, PNG and GIF
  • Linking pages
    Most difficult of those tested
  • User feedback
    Easy to test, but comments require registration
  • Marquee clients
    Not provided

Wireframes

Think of a wireframe as a black and white low-fidelity screen mockup. The mockups I create also include call-outs to give the development team additional context.

In the process, the user will create an account, create a project, and then land on a blank screen. The user then drag and drops UI controls (radio buttons, text input fields and so forth) onto the page.

Once the project is saved, a permalink can be given out for people to see your work. If you change a screen, it will auto-magically show your updates the next time that URL is opened (or refreshed) by a team member. This last point is what the cloud is all about: everyone always has the same (i.e. current) version of your work. Changes are instantaneously available whenever the wireframe is saved.

Compared to most offline tools, the library of available objects is focused on low-fidelity UX. Don’t expect to create gradients or to use a pencil tool.

Review criteria
Here are some basics that are fairly universal in my experience:

  • Robust set of standard UI controls
    If the tool doesn’t have off-the-shelf drop-downs, toggles, cover flows and the rest, then creating those controls will require additional work.
  • Good as a documentation medium
    Plan on your development team using your wireframes to dictate the logic and layout of the application.
  • Good for making wireframe clones, templates or whatever you want to call them
    Not surprisingly, all of the iPhone wireframes I create have the app’s name at the top. I want to do this on the first wireframe and not have to do it again.
  • Responsive
    It all takes place in a Web browser. If the application is slower than a locally running application, then your productivity will suffer. Case in point: a year or two ago, I created about 50 wireframes for a project. Each page took a minute to load. To see my changes reflected, another minute. Trust me, this gets old quickly.
  • Not written in Flash
    “Dear development teams who write these tools: I love Flash, Flex and the rest. Not as much as I love my iPad, however. I want to edit my work across form factors. It’s all drag and drop, right?”

Here’s what you won’t see right away from the tools out there:

  • An extensive stencil library or the ability to easily create and reuse stencils
    OmniGraffle excels at this. Don’t expect Yahoo to create a stencil library for Mockingbird anytime soon.
  • A wide user base
    Momentum is building, and there are believers. This is still a minority position and will be for some time. I would say customer support is great, but the more people use these tools, the better the tools will become.
  • Font selection
    I won’t dwell on this, but you can tell there is still some lively debate about what a wireframe should and should not communicate just by looking at what features are included in any given product.

Balsamiq

As with the prototyping tools, wireframes — or “mockups” in Balsamiq9-speak — are organized into projects. From there, things change. Tools like InVision and FieldTest assume that you have created your pages or screens in another tool. In Balsamiq (and Mockingbird, discussed next), the tool is designed for wireframe creation, with extremely limited functionality for prototyping.

  1. Create a new mockup.
  2. Drag and drop an off-the-shelf UI control from the ones available.
    Balsamiq controls
  3. Configure the control to your needs. This is noteworthy, because Balsamiq provides a number of important options. For example, there is one toggle to put the iPhone in landscape orientation instead of portrait.
    Toggle
  4. Add the rest of your UI controls; document for the development team; and publish.

Observations
Having worked with some other tools, I’ve become a fan of Balsamiq. A great UI control library and easy object configuration are two areas where this tool excels. There are some areas for improvement, though. First, and I’m sure the development team is tired of hearing it, the sketching style is fine for those who understand low-fidelity mockups, but you probably wouldn’t want to show the mockups to your CEO.

A second gripe is that the editing tool is built in Flash, so work is limited to platforms that support it.

On the upside, a few non-obvious pros:

  • The icon set is great. I’ve noticed that only one icon is not in the box: Bluetooth. Anything else I’ve needed has been available.
  • In addition to drag and drop, there’s a great quick-add feature. After typing in a few characters of the name of a UI control, a filtered list appears, allowing you to add controls quickly.
  • Balsamiq has an odd markup language that, once mastered, allows the user to add common things. For example, + Add and sub-menu, > translates to:

And here’s the rundown:

  • UI controls
    More than 70, including iPhone-specific
  • Good for documentation?
    Call-outs are one of the controls; drag and drop them onto the canvas.
  • Good at duplicating screens?
    Yes.
  • Responsive?
    Yes. You will forget you are working in the cloud.
  • Written in Flash?
    Yes.

Mockingbird

Mockingbird10 is also a wireframing tool, and a good one at that. In some ways, it compares favorably to Balsamiq: Mockingbird’s editor isn’t Flash-based; it uses an unobtrusive font; and adding UI controls is (almost) comparable to Balsamiq.

The process is similar, too. Here’s the outcome:

Mockingbird Wireframe

Observations
More professional, right? On the surface, it is more polished, but there are some subtle shortcomings. For example, one cannot left-justify text in an input field. Also, I couldn’t get the icons to all be exactly the same size (36 pixels). And so forth.

There are some logistical hurdles as well. Many of the controls are primitive. To add a call-out, like ones in yellow above, you actually have to add two objects: the yellow circle and the black text. And when a control is added via the quick-add function, the filtering text is not cleared, so after every addition, one has to clear the previous query. Put practically, this mockup took about four times as long to create as the Balsamiq version.

  • UI controls
    Fewer than Balsamiq, and no mobile-specific controls.
  • Good for documentation?
    Call-outs are created with circles and overlaid text.
  • Good at duplicating screens?
    Yes.
  • Responsive?
    Mostly — don’t use Chrome.
  • Written in Flash?
    No.

Mockup Builder

Another entry in the wireframing space is Mockup Builder11. Functionally, it lies somewhere between Mockingbird and Balsamiq. It has a fairly good library of controls — in fact, it’s the only cloud-based solution with native Android controls (Ha!). Moreover, I find its aesthetic better than that of competitors.

Like the others, Mockup Builder starts with a blank canvas, and the user drag and drops controls onto the canvas for configuration.

Here’s the mockup created for this review:

Mockingbird Wireframe 2

Again, the mockup is fairly clean, but there are some issues: the icons use some funny clipping, and they do not scale properly. The user cannot toggle the various defaults for the iPhone, such as the gray bars at the top and bottom of the screen.

Observations
This tool is a little too buggy for everyday use. For example, the notes to accompany illustrations are in Lorem Ipsum text. Also, when copying text from the Web and pasting into a multi-line text area, the text does not wrap to the control’s width — meaning that the text shows exactly one line, and the user has to use the control’s handles to wrap it. I also wanted to show two paragraphs of text but could not figure out how to insert a “Return” in the text.

Another grievance: the tool could use more polish. For example, the screen surface on the iPhone control is narrower than the keyboard, so the user has to resize the keyboard by hand. When that’s done, the “e” is missing in the button. I understand that these are minor, but one would expect these t’s to be crossed off before moving away from a beloved tool like OmniGraffle.

  • UI controls
    More than the others, including iPhone- and Android-specific ones
  • Good for documentation?
    Call-outs are one of the controls; drag and drop them onto the canvas.
  • Good at duplicating screens?
    Yes.
  • Responsive?
    Yes.
  • Written in Flash?
    No.

Conclusion

Cloud-based tools are now available and well designed for UX work. Many of the features in the offerings above are not available in software running locally on your machine. While this space is still growing, I’ve been working in the cloud for the past two years and cannot imagine going back.

Collaboration is instantaneous, and the tools are optimized for the right activities: wireframing and testing with users. In fact, these apps have several unexpected and delightful features, and you might find yourself walking away from your favorites, too.

Of course, there are valid reasons to avoid working in the cloud. Stay with your old standbys if any of the following apply:

  • Your IT department disapproves.
    This is a hot-button issue. All of these tools protect your information, but this is still worth considering.
  • You expect the polish of offline tools.
    These tools are for early adopters. Still, they are Web applications, so they will evolve. That’s what happens on the Web. You’ll just wake up one morning to find some annoyance removed or a key feature added.
  • Your project is big.
    If you plan on a 200-screen flow, you will feel a steady degradation in performance. That said, I’ve just completed a 70-pager with one of these tools and was just starting to notice some minor falloff.
  • You think in terms of “deliverables,” with a complete set of create-once mockups.
    Many of these tools have coauthoring functionality (if the roles are set up that way). In my experience, however, no one has actually changed anything, even if I wanted them to.
  • Your Internet connection is a problem.
    But that’s not to say that you’ll lose data whenever the network is interrupted.

These could be a deal-breaker for some. But these tools are free to try, and some are so simple that you might get hooked in five minutes (as I did a few years ago). Almost all of the research for this article was done with free trials. Given the ease with which you can try these out, you have every reason to go out and see whether one or more is right for you.

If you have another favorite, we’d love to learn about it. The space is ever changing!

(al)

Footnotes

  1. 1 http://www.flickr.com/photos/baldiri/5735003580/sizes/l/in/photostream/
  2. 2 http://www.flickr.com/photos/baldiri/5735003580/sizes/l/in/photostream/
  3. 3 http://www.invisionapp.com
  4. 4 http://invis.io/3R1UL1JG
  5. 5 http://www.fieldtestapp.com
  6. 6 https://go.fieldtestapp.com/13d3izk
  7. 7 http://www.clickdummy.com
  8. 8 http://clickdummy.com/projects/nayres
  9. 9 http://www.mybalsamiq.com
  10. 10 http://gomockingbird.com
  11. 11 http://www.mockupbuilder.com

↑ Back to topShare on Twitter

Erik has worked in human-computer interaction since the late 1990s. Currently, he works as a Senior Product Manager, User Experience at Plantronics, working on mobile apps inter-operating with computers. He has co-authored multiple patents on mobile phone notifications, and holds a Masters Degree in HCI from Carnegie Mellon University.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Eden Rohatensky

    May 10, 2012 5:54 am

    What about Fireworks with Creative Cloud?

  2. 2

    Another option you may have missed to mention is to use a “classic” tool to create your clickable (interactive) prototypes — Adobe Fireworks; then simply export the prototype to your Dropbox folder and copy the public link. Voilà! :-)

    This workflow has several advantages:

    — It will save you time: you can prepare both the wireframes and the interactive prototype right inside one tool;
    — It will save you even more time: once the interactive prototype is ready and reviewed, you can continue to work on the final design in Fireworks;
    — Robust design, wireframing and prototyping features all-in-one (no need to constantly switch between different tools);
    — Syncing files and sharing an interactive Fireworks prototype via Dropbox is super-easy.

    Yes, you’ll need access to a Mac or PC to be able to prepare the interactive prototype, but it’s likely you’ll need one if you work on the design, as well… ;-)

  3. 3

    Quite amazed you managed to not include HotGloo. We use it all the time and find it excellent.

    • 4

      Fellow HotGloo user here. I also like it, although I find the spotty short key support on OSX a bit frustrating. Other than that it seems to have the right amount of features and I’m a happy user.

  4. 5

    Its also worth keeping an eye on Adobe’s Proto app in the creative cloud…!

  5. 6

    Kyle Schaeffer

    May 10, 2012 7:08 am

    You missed QuirkTools Wires:
    http://quirktools.com/wires/

  6. 7

    Huge fan of iPlotz and MockFlow – both left off this list as well.

  7. 8

    Alexandru Andronic

    May 10, 2012 11:11 am

    I’m working with Mockflow and I’m really happy with it. It can also export HTML5 files and you can create links between wireframes.

    • 9

      I just love Mockflow. Fst and easy!

    • 10

      Mike at Pixel Chefs

      May 16, 2012 8:36 pm

      I use Mockflow as well. With pre-made UI components and common layouts, it’s a great timesaver and allows my team to collaborate and produce interactive mockups in short time.

  8. 11

    Check out Interface 2 for iPad or iPhone. Lets you create iPhone and iPad mockups with real native controls. You can then build your flow and when you’re done, export the content as a PDF, or a complete project’s code using a cloud service.

  9. 12

    Moqups Founder

    May 10, 2012 2:04 pm

    Shameless plug :-)

    We’re about to launch the private beta of Moqups, a new HTML5 and SVG based app for generating crisp looking vectorial wireframes that look wonderful in any circumstance (be it a Retina Display or a huge printed sheet).

    Have a look at http://moqups.com/ . We’d be extremely eager to hear your thoughts once we launch the beta (hopefully next week or the other).

  10. 13

    I’ve used FlairBuilder with good success. It supports hierarchical page groupings and a decent number of actions that can be tied to each element. Its competent library is a little limited, but it is possible to draw about anything in it.

  11. 14

    “A second gripe is that the editing tool is built in Flash, so work is limited to platforms that support it.”

    I’m sorry, but Balsamiq is not built on Flash. It’s built on Adobe Air, those are not the same at all. In fact the whole point to build things in Air is the little detail that it runs cross-platform…

  12. 15

    Protoshare is a genuine collaborative wireframeing tool, that I’ve had excellent experiences with.

    The simple process of wiring up a sketch can be achieved with simple drag and drop of images from the desktop. And it has hotlinking tools like the simple “prototyping” solutions you mention.

    But it is also a sophisticated Wireframing tool, all in a SaaS, web based interface. It has collaboration features, annotation and commenting by reviewers, and document creation. It even outputs standalone HTML sites for offline prototype testing.

    I’d thoroughly recommend it for anyone serious about online wireframing and prototyping tools.

    • 16

      Phil Middlemass

      May 16, 2012 1:53 pm

      I use Protoshare with one of our large client teams, overall 100+ users of the system, great for instant collaboration of wireframes, visual designs and even better for creating rich interactive page flows through use of embedded iFrames and ability to add HTML, CSS and Javascript into pages to create pages that better reflect final page builds

      We use it a lot to wire up rich scenarios to put into usability research sessions and have found the results and responses we get from users are much more useful then testing flat visuals that are simply linked together

      If you need a more robust and capable system for enterprise level clients where multiple stakeholders need access to review and collaborate on material I have yet to come across a better solution right now.

  13. 17

    Like Glenn we use HotGloo a lot. It’s a mix of wireframe and prototyping tool. It’s super fast for me to mock up my sketches using their simple wireframe tools and make them into clickable prototypes to share with the team or to test out with real people.

    http://www.hotgloo.com/

    You can do much more than add hotspots to link pages together, you can add view states (which we use a lot), change container views on click or mouse over and it’s got inbuilt review tools.

    Downside for me is it can be slow, but we use a lot of images in our wireframes for backgrounds. We use backgrounds so that the prototype looks a little like the actual site. When running research sessions we’ve found we get better data this way rather than using gray scale wires.

  14. 19

    What about Axure? I mean, of all things. Also ForeUI is worth mentioning if you talk about Balsamiq.

  15. 20

    There appears to be a lot of ‘me too’ apps out there. For web work I tend to use Axure. The problem I currently have is that applications I’m creating are not web based, don’t use either touch or clicking – only key entry – and do not use any ‘widgets’. Axure does not have easy keyboard support meaning I’m still looking for a solution. In addition I am not a fan of sketchy wireframes. Sketches – yep. Sketchy wireframes just look messy to me.

  16. 21

    you missed CLARIFY!

    the only or at least one of the best online styleguide tools: http://clarify.io/

  17. 22

    Thanks for this great overview. I’m sure these are awesome tools, and I look forward to trying out a few of them.

    One of the challenges for teams that collaborate on product design is having a tool that fits into the broader set they use for everything else. In our case, that tool is Google Drawing. It’s uber-simple to use, is always improving and for most companies–completely free. It even has a store of free templates submitted by others in the community, which are super helpful.

    • 23

      I’m using Google Drawings on a current project as well. Overall it’s been great and easy to use, especially with Google Sites as the project portal and Drive for local copy syncs. The two main issues I’ve discovered are (A) lack of any font choices, and (B) measurements so I can accurately size the page and components. I may try publishing the results to one of the above prototyping tools.

  18. 24

    Eduardo Grandelle

    May 15, 2012 5:46 am

    Any word about Axure 6.5? It has just been released and it seems to cover everything that lacked in the previous version.

  19. 25

    We have used many wireframng tools. They all have thier strongpoints. On the desktop we used Axure then JustinMind. Lately we have been using lucidchart. It is simple but we have found simple has it’s advantages. Now we do simple flow diagrams and wireframes the move quickly to bootstrap.

  20. 26

    I have tried new tools, like mock flow, and invision, but I always go back to illustrator, Once you have your a template library of your own you can create wireframes very fast, and Adobe Acrobat pro is great tool for feedback. Also managing your files is complicated in those apps, nothing like managing your files in your system. Sometimes I feel like these new apps are reinventing the wheel, probably because UX Design and “wireframing” are popular topics today.

  21. 27

    I use Axure and have used Omnigraffle, InDesign and Balsamiq int he past but I still feel the sweet spot lies in the mix of all of these. One of these tools needs to become what Photoshop has become for designers.

    • 28

      As EktaI said, I also used Axure, Omnigraffle, InDesign and Balsamiq int he past. Both of them have their greats and I happen to know another Interaction design tool from my social network. Something like Mockup Plus, it seems to be a design tool. After I used it, I found some good but also some bad which need to be improved. I think in current quickly changing world, there needs more brilliant ideas and changes regarding to interaction design. AND I ever read a book –Simple &Usable Web, Mobile and Interaction Design written by Giles Colborne. I got so many inspiration from it. Innovating…

  22. 29

    Hi, have subscribed and have an RSS link feeding onto my desktop. Your articles are really good, what I’m looking for and interested in. Pitched slightly above my, novice, level tho’.
    The only uses I have had from cloud are creating a home network and syncing with my iphone.
    I have just discovered that M.S. are still letting people code/create programs with BASIC – a language I was using 27 years ago! So, I keep switching between web and program design. Consequentially, achieve nothing except creating a local archive of (quality) data. I need a way to tie it all together,
    it only exists (the plan) in my head right now :>)
    Boo Riddler

  23. 30

    Mads Nygaard Pedersen

    May 25, 2012 1:42 pm

    Thanks for a nice rundown and some useful comments with hints.

    I have been down the research lane myself for the last couple of months – pretty intensely.

    Imo the key feature missing in most tools is the right mix of simplicity combined with the option of hands on ‘pointy’ feedback – I know a couple of tools mentioned here has the (e.g. HotGloo supports review notes – but it misses the obvious option for viewers of a shared link to comment on notes.)

    The Adobe Proto app works relatively well – but the review option in Creative Cloud lacks (at least for now) the option of adding a visual pointer to what element in the wireframe/mockup the comment is about specifically…

    For me as a freelancer it’s all about keeping the workflow simple and costs down – so some tools are too pricey as well. E.g. Protoshare is $49/mo if one requires the review option (who doesn’t?!). Axure and JustInMind are really REALLY pricey license-wise… have used Balsamiq for a few projects, but the online editor is soooo slow – it’s sheer pain. Hopefully (for the company) they’ll improve this…

    Anyway, will try out some of the other hints here – thanks!

  24. 31

    Thanks for the overview.
    It was nice though it missed my favorite tool. WireframeSketcher
    http://wireframesketcher.com/
    Robust
    Rich… a much richer selection of controls than the others.
    Multiplatform
    Flexible. Many forms of output and display
    Customizable . Works within the Eclipse framework
    Check it out.

    Etan

  25. 32

    You should mention UXPin in a list like this. I started using it a couple of months ago and it is very good! It has real-time collaboration with co-workers and a special viewing mode for clients. Especially nice is the special tool they have for converting paper prototypes from their special kit into interactive wireframes just by taking a picture of them.

    • 33

      Wow! Thanks Femke! It’s so great to read such a review on the web about our system :).

      So true – you missed UXPin (http://uxpin.com), but we’re young, aspiring and with rather different approach towards the problem. UXPin is the UX Design tool. We’re bunch of UX designers creating dools for anyone that cares about great design.

      In UXPin you can create wireframes, clickable prototypes (and yes you can start on paper and we’ll convert that to html), upload diagrams, personas – and put all of that in the context of your design story. Because every design is a story, right?

      Watch us and hoepfully you won’t be disappointed.

      You’re all welcome on board dear friends!

      • 34

        I recently tried all the currently available tools, including all the ones reviewed here, with the goal of creating a mock up.

        UXPin was the best in my opinion since it allows for much higher definition as compared to some others like Balsamiq, while at the same time being the easiest to use. The last bit was very surprising since for the rest of the tools there was a tradeoff between accuracy and ease.

        Finally, it provides for basic prototyping, which I ended up using though I had no plans to do so. The prototyping functionality is not enough for a large project at this point, it just suffices for basic stuff. For instance, you can’t “move” one box if another is clicked, only hide or show it.

  26. 35

    This is a great article – thanks for the thorough overview, it was a great place to start during my prototyping research. I also came across the site http://www.keynotopia.com – it has both keynote and power point templates for creating interactive prototypes. Also worth checking out too.

  27. 36

    Nice overview. Would be great if this article could be updated for newer prototyping tools.

    For those looking for wire framing for multiple mobile platforms (iOS, Android, Windows Phone), try http://xiffe.com
    It has a large set of platform specific customizable controls/ icons.

  28. 37

    Great post!

    Also, InVision just announced full integration with Sketch. When you save your Sketch files to InVision, it extract your screens and assets automatically.

    More information: http://blog.invisionapp.com/sketch-meet-rapid-hi-fi-prototyping/

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top