Always Live

Apparently it takes about 80 seconds for Spotify to run an Edit-Build-Test cycle on their iOS app, in other words: after you have made a change it takes 1 minute and 20 seconds to view the result. This is obviously annoying if you are an engineer working on the app (and I bet they have ways to improve this by working on sub modules etc) but it’s completely devastating if you are a designer or developer working on the user experience. Sure XCode is notoriously slow in this aspect, and frameworks like React Native can help you vastly improve turnaround by hotswapping javascript code instead of recompiling and relaunching the simulator. But even if you can get down to seconds, you still have the issue that your app restarts and you need to find your way back to the place you were tweaking. Designers and UX developers need instant feedback, and the productivity gains are immense.

In Noodl, whenever you edit your design, if possible, that edit will be inserted into the running prototype without restarting it. Changes are instant and the result is instantly visible. Imagine fixing a car engine while you are driving the car. Or in this case, tweak an animation while it is running. No need to restart and find your way back to that particular place in your prototype.

download (1).gif

This can be achieved because the representation of your design, the node graph, is connected live with the running prototype wherever it might run (on your phone, embedded in your app). This also allows Noodl to visualize what is happening live in your prototype by highlighting connections directly in the node graph visualization. Interactions such as a tap that triggers a signal it is visualised live in the graph. So you will always know what is happening, and thus can easily figure out why it is not behaving like you expected :-) Watch the connection between the tap output of the root and the show input of the component.

The highlight feature will also help you identify which portions of a node graph that is activated on a given interaction. But it’s not only signals that are connected to the node graph visualizations, all data that flows in the graph is tracked and can be inspected. Simply hover over a connection and it will reveal the most recent value that have passed through the connection to the target port. Clicking an inspector will pin it and you can watch as the value changes when you interact with the prototype.

download (3).gif

Obviously we are very excited about these features but they are only the beginning. We have just started to tap (pun intended) the possibilities that live editing may bring to the development and design of interactive experiences.

So far the code editor still rules most aspects of the development process. Design tools are mostly used for static resources. We believe that the future is in specialized tools that are optimized for the task at hand. Building great interactive user experiences is one of those tasks that have been overlooked far too long. Don’t worry, we have your back!