Log in to like this post! Auto-updating navigation links in your prototype George Abraham / Thursday, February 27, 2014 Sorry. I got busy with designing the next iteration of Indigo Studio, hence the delay in posting this. Without further ado, let's get on with what's new in Version 2 (Update 3). Auto-updating Navigation Links OK. I admit that sounds fancy, but this can be a huge time-saver. So what problem does it solve? When we are in the flow of prototyping, one may not know up front what to call or name the screens in Indigo Studio. Since the goal is quickly build a prototype that can be evaluated, our primary interest is in having a working prototype as soon as possible that we can put in front of users. The problem happens when you decide to make the prototype more maintainable and comprehensible. Re-naming screens may be a natural first step. Since we are tinkering with a finished prototype with navigation links and all, in prior versions of Indigo Studio renaming would cause the navigation to break :(. For example, if you had a NAVIGATE TO interaction defined from Screen A to Screen B, renaming screen B to something else resulted in broken prototypes. We are all too familiar with broken links on websites at some point. Similar problem. But just like you, we too believe that any advice about naming screens appropriately before linking them or to not edit screen names after linking is just plain silly. Our solution? Actually there is nothing you need to do; just go ahead and rename the screens till you are satisfied. Indigo Studio will do the heavy lifting of automatically fixing/healing the interactions within the project. Simple and, I admit, anti-climactic. It's something we always wanted in the product, and we are mighty glad to release this feature. Note: For this to work correctly, you need to rename the screens from inside Indigo Studio application, and not from the file folder structure in your finder (mac) or file explorer (windows). Unique URLs for Screens and Screen States We have tried our best to make it dead-simple to share prototypes with anyone. All you need to do is click on the share prototype option, which publishes the prototypes on Infragistic's secure servers. In response, you receive a simple URL which can be sent around to viewers. Till this update, when you interact with the prototype in the browser, the URL information never changed; you could be on screen 1 of 5 or on a particular screen state deep in a user flow. With update 3, these URLs are unique. So when you are interacting with the prototype the URL changes along with the views! This enables you to do couple of things easily: Copy the URL for a specific screen or state, and send it to viewers. This way you can start the prototype experience deep in the user-flow without having to always start from home For example, you may be having a conversation like "Hey Jane, I was referring to the situation when the user adds a new item to the cart. Here's the link." Or when preparing usability tasks, you can link specific tasks listed in the participant's instruction sheet to specific portions of the prototype Since the URLs are unique, you can now use your browsers "back" button to rewind or retrace the user flow. This can be quite helpful when testing prototypes. Assuming your user went down a particular path and you as the moderator wants to bring them back to a certain point. Easily Look up Viewport Dimensions for Generic Phone/Tablet The concept of viewports as it applies to devices (i.e., iPhones and similar) often times feels more cumbersome than it needs to be. If you understand this concept well enough, feel free to skip to the next paragraph. Since prototypes created in Indigo Studio are pure HTML, what matters most is the viewport declared by the browser. A nested surprise is that the viewport dimensions are different from the device's native resolution. For example, the viewport dimensions for a retina iPhone 5 is in fact 320x568px. Don't believe me? Visit what's my viewport size on your iOS device. If you are creating your designs in Indigo Studio using the UI elements provided, you never have to worry about blurry prototypes. Everything is going to look razor sharp when you load up your prototypes. For iOS, simply pick the iOS device in the platform picker, and get going. Even the icons provided with Indigo Studio are vector/SVG and scale perfectly! In this update we made it easier to design for some of the other popular devices (e.g., Nexus devices, and Samsung Galaxy S4). We made the connection between the viewport size and devices more explicit in the picker. And since we can never exhaustively list all the devices ever made, we also included a way for you to look up the viewport sizes-- thanks to http://viewportsizes.com The only caveat is if you are using bitmap images (e.g., PNG or JPEG). If you are, you need to match the true resolution of the device you are targeting. And then when you add this image to the design canvas in Indigo Studio, simply resize using the adorners. Don't worry. These will render perfectly on your device because we are only changing the visible size and not the true resolution. Specify watermark or hint text for Input fields This has been requested by quite a few of you. We just ran out of time in earlier updates to ship this. It's small, but a time saver. You can now set the help text in the properties panel of the UI element. Very similar to how you specify tooltip info. And now... off to Indigo Studio (Update 4) How to Get This update? Here's how to update the version of Indigo Studio installed on your machine: If you have the option to automatically check for updates on startup checked, you should see a dialog box pop up when you launch Indigo. Simply click update, and Indigo Studio will do the rest. This is the easier approach. If for some reason you chose not to automatically check for updates, go to MENU > HELP & ABOUT and use the "CHECK FOR UPDATES" option. About Indigo Studio for Interaction Prototyping Don't have Indigo Studio? Download a free 30-day trial which will let you try all of the prototyping goodness. Download Indigo Studio Looking to suggest improvements and new ideas for Indigo Studio? Submit a new idea If for some reason you are having trouble with Indigo Studio, check out our help topics, forums or contact support. Get Support Follow us on Twitter @indigodesigned