Log in to like this post! Outgrowing Balsamiq Mockups George Abraham / Tuesday, November 14, 2017 Conceptually different. For good reasons. The universe of prototyping and wireframing tools is ever-expanding. If you’ve prototyped before, chances are you’ve used Balsamiq Mockups, one of the most popular wireframing tools. Maybe you still do. Mockups is designed for quick, low-fidelity wireframes (screens). Many designers appreciate Mockups’ lightweight approach and consider its limitations to be fair tradeoffs for its speed and simplicity, and worth the price of admission. If you count yourself in this camp, I encourage you to take a look at Indigo Studio Essential. Indigo Studio Essential offers a prototyping solution that not only is as nimble and simple as Mockups but adds time-saving tools and shortcuts and additional power and capabilities. Indigo Studio enables you to more than just design a prototype—it lets your users run it on any device (no special software required) and take part in remote usability tests, with Indigo recording every facial expression and analyzing every mouse movement. And did we mention that Indigo Studio Essential is available for free? That’s right: all the power (and more!) of Balsamiq Mockups, at absolutely no cost. That’s not a special promotion—it’s always free. (What’s the catch? We’ll admit it: we hope that over time, you’ll subscribe to our paid versions of Indigo Studio Professional or Indigo Studio Enterprise, which add team-based collaboration and usability features. We'll even give you a deep 65% discount if you upgrade to Indigo Studio Professional orEnterprise by Feb 28, 2018--use code STEPUP when you subscribe. But if all you need is an individual design tool, Indigo Studio Essential will always be yours for free.) If free isn’t enough of a reason to consider switching to Indigo, here are five additional reasons why Indigo Studio Essential may be a better fit for you when compared to Balsamiq Mockups: You can design directly for your device Users do more than click—they touch, tap, hover, and swipe You’ll reduce screen sprawl You can add animated transitions You can run prototypes on any device 1. DESIGN FOR DEVICES Balsamiq Mockups offers an infinite canvas by default, and UI elements can be placed wherever on an ever-expanding display. That’s great in theory, but users don’t use infinite displays. Indigo Studio Essential offers a selection of common devices types and sizes ranging from phone to custom size. As a designer, you pick the device and then create your screen designs using the WYSIWYG designer. Going one step further, iOS device viewports come with iOS UI control pack. This UI pack includes all the common UI elements available in iOS and subscribes to Apple guidelines for sizing and tap targets. So when you use Indigo to design an iPhone app, you know exactly how it will appear on the native device. Balsamiq allows you to add a phone chrome stencil separately for context, but you’ll need to take care to ensure your designs stay within it. Indigo Studio displays the stencil in the design experience, but when your users run the prototype on their iPhone, they won’t see the stencil—just the app, the way you intended it. 2. ADDITIONAL INTERACTION TRIGGERS Desktop interactions were reimagined for touch interfaces, giving rise to gestures not used on desktops. Naturally, usability depends on how familiar users are with certain interactions, and how easy it is to learn novel ones. The most common interaction for desktop is an on-Click interaction, which is reinterpreted as a tap for touch UI. However, there are other familiar interactions that can be used to enhance the user’s experience, such as hovering and swiping. Balsamiq Mockups offer only one single interaction, which is the on-Click or tap. Indigo Studio Essential includes interaction triggers for both desktop and touch. And the following table shows a comparison of interactions available in Indigo Studio vs. Balsamiq Mockups: Indigo Studio Essential Desktop/Mouse: Click (default), Double Click, Hover, Right Click Touch: Tap (default), Double Tap, Press & Hold, Swipe + direction Balsamiq Mockups Desktop Mouse: Click (default) 3. REDUCING SCREEN SPRAWL WITH UI STATES Almost every prototyping tool available has the ability to create screens. And a prototype usually consists of a series of screens connected by interactions, showing how a task is accomplished by the user. However, it’s not always the case that when the user interacts (e.g., a button click), they navigate to a new screen. This model may be true for simple content-driven websites, where you click on a link to see another webpage. For apps, and especially for communicating a user story in prototype form, UI changes may happen on the same screen. In other words, the user is not navigating away from the screen. A simple example of this would be to show a modal dialog overlaid on the screen. This type of change is what we call a screen state. In the world of Balsamiq Mockups, everything is a screen whether it’s a big change or a small change. The challenge is to manage a growing number of screens and be aware of how they are connected to support a user story. It’s possible that you will end up with 20 or more screens, when in fact what need are 5 core screens and UI states of these 5 screens. Without UI states, the sheer number of screens can quickly become tedious and confusing to manage. Indigo Studio Essential includes support for both screens and screen states. It also adopts a story-telling approach where you can choose to create new screen or screen state as and when you need it. Additionally, Indigo Studio offers two visualizations that are dynamically generated as you add interactions. Screen to screen navigation view shows how screens are connected Interactions explorer shows how the screen states are connected inside a screen 4. ANIMATED TRANSITIONS Well done animations or transitions don’t distract us from the task we are doing. And functional animations are those that help solve a design problem (e.g., catch the users’ attention when necessary). Often it’s not about adding a particular animation effect, but more about timing such that all UI changes don’t happen at once. In the following example, you can see that the image on the left makes use of staging and a slide-in effect, allowing the user to process changes one at a time. When changes happen instantly in the UI, users may miss noticing the change. Balsamiq Mockups does not support animated transitions as you navigate from one screen to another. Transitions are instant and abrupt, forcing you to create many extra screens if you need to approximate an important animation. Indigo Studio Essential supports animation preset effects that can be applied when adding or removing UI elements. It also includes an animation timeline that allows you to sequence the UI changes. It’s fast, easy, and available whenever you need it. The preset effects are available when navigating between screens or when making UI changes to any particular screen or screen sates. These include fade, slide, flip, and pop. 5. VIEW PROTOTYPES ON DEVICES The real reason for creating prototypes is to collect feedback from users and stakeholders. It’s not about just satisfying the designer’s curiosity, which is just a small part of the story. To get real feedback, we need to aim for at least three things: Use the prototype on the device it's meant for Get the prototype in the hands of real users (see note Provide mechanisms to collect feedback via commenting or usability studies* Whether we like it or not, users are busy people too. So it’s up to us to remove any obstacles to feedback. With Balsamiq Mockups, you can send a user the source files for the prototype, but the user will need to install Mockups to view it, which is a lot to ask. The other option is to export and send a clickable PDF, but that hardly simulates an actual app experience. Indigo Studio Essential allows you to export an offline HTML version of the prototype, which you can send to the user as a zip. The offline prototype is completely interactive and viewable without any software beyond a common browser. Seeing is believing, so go ahead and download this offline prototype. Simply unzip and launch the index.html file to view the prototype. You can also opt to host this offline prototype on your server. Learn about hosting prototypes. Even simpler: publish the prototype on http://indigodesigned.com (or your private Indigo Server) and you can access your prototype on any device. Note: This is where we start to charge for Indigo Studio, as our cloud-hosted capabilities are delivered through the paid versions (Indigo Studio Professional and Indigo Studio Enterprise). But when you download Indigo Studio Essential you get to try out the Professional features for free for 30 days, and we believe (and hope!) you’ll find the additional power and features to be a great deal. Interested? Read on. Do more with Indigo Studio Indigo Studio Essential is our free plan. Upgrading to Indigo Studio Professional or our other paid plan, you unlock features to further enhance your prototyping experience: Share a link with users and stakeholders to view the prototype Allow reviewers to add comments and get email notifications Create and share re-usable design libraries Collaborative prototyping with group Workspaces Run unmoderated usability studies with video replays ...and remember: Balsamiq Mockups users upgrading to Indigo Studio Professional or Indigo Studio Enterprise before February 28, 2018 are eligible for a deep 65% discount--use promo code STEPUP when you subscribe. Want to learn more about Indigo Studio? Indigo Studio empowers designers, developers, product managers and users to quickly and collaboratively create and test realistic prototypes – before the first line of code is written. Visit our learning library for getting started videos and help documentation. Don't have Indigo Studio yet? Download Indigo Studio Essential, which includes all the Professional features free for you to try for 30-day. After 30 days, if you do not subscribe to Indigo Studio Professional or Enterprise, you will lose access to subscription-based features, but you can continue to use Indigo Studio Essential free of charge. Compare plans to see feature not available in Indigo Studio Essential.