Let’s Make Code More Playful!

Flowhub.io: The Evolving UI for the NoFlo Development Environment.

I recently wrote about my frustrations with Photoshop — feeling detached from the collaborative environment where we build our software, systems and products: Photoshop is not a Design Tool. How I aim to collaborate with the team at NoFlo is by bringing tools and systems together and bridging the gap between design and development.

We launched a Kickstarter campaign to see if others felt the same frustrations. A lot of people did! We got overwhelming support and funding to continue making the NoFlo environment a reality—we are immensely thankful for all those who supported our campaign. Thank you!

The feedback and support was validating and motivating — it confirmed that both the direction and time is ripe for change. Also, it highlighted many more questions to answer, areas we had missed and how to become better at communicating its potential. You have all helped us make the right decisions for the platform and guide the direction of the NoFlo UI environment.

So, what has happened since then? We evolved both the product and the design. We listened, used your feedback both good and bad, to make the NoFlo UI better. After many months of iteration, we wanted to share our progress and show you a glimpse of what is to yet to come.

Let me introduce you to flowhub.

Principles Guiding the New Flowhub UI

The potential of code is powerful. The opportunity to create and realise an idea, a product, a system is at the forefront of what we do. I believe it is in our human nature to create, collaborate, contribute and build things that impact the world around us.

However, the bar of entry can be so high for understanding how code works — it is daunting, complicated and often difficult to master! Before even touching syntax, code is wrapped in layers of abstraction making it hard to harness its true potential in the real world for many of us.

With flowhub, we aim to overcome these challenges, remove arbitrary layers of abstraction and add more communicative ones to make working with code easier—without jeapordising quality nor impact.

In fact, we want to enable more people to build! Encouraging more developers, designers, project managers and CEO’s to get closer to the heart of their software. Seeing their contributions, progress and growth in a far more understandable format. Displaying a “map” that enhances collaboration, provides real-time feedback and creates collective focus on what is important, not just what is immediate.

Negating the reliance on writing code for impact allows us to collaboratively build the vision shared by you, your team or your company.

Flowhub provides an environment that bridges the gap between design and development. It becomes a tool that approaches coding in a renewed way. A tool shaped around the builders. A tool mindful of how we interact with technology today.

Empowering Visual Learners

We are all primarily visual learners and communicators. We can interpret complexities far more easily in a visual format. So, just like a map, the flowhub graph distills the abstraction and complexity of development down into a simple, visual and more usable format.

It becomes more approachable. A graph allows non-coders and coders alike to come together and collaborate on software development. It allows us to pinpoint areas of improvement much quicker by simply reducing the level of investigation and uncertainty of traditional development.

Graph creating clock animation in flowhub
What you end up with is a canvas of collaboration. Offering the right balance of focus between iterative production and seeing the progress in achieving your long term goals.

The environment visualises real-time processes and progress in development. By minimising the reliance of help manuals and cheat sheets, we can cut down the need to bulk out ever growing documentation. This also reduces time committed to the often arduous task of onboarding new members.

With flowhub, we strive to make software development less daunting and less abstract than traditional approaches. For it to be engaging, responsive and most of all fun! To be understood by more than just software developers and fill that void between input and output, design and development, idea and reality.

Focusing on Touch and Motion

To do this, we have focused heavily on touch and motion in our updated UI.

Both are powerful functional methods of design. They are a way of providing purposeful education and feedback which can enable people to continue developing, creating and building in flowhub.

Touch is so powerful. It encourages you to interact, be hands on with the software. Learn by doing, rather than sitting stuck in the theory. It also lowers the entry bar to working with code, enabling more people to be involved and have a real positive impact.

With touch, the code starts to become less intimidating and more playful. Dragging a block of code and connecting it to another to see what happens is instantly satisfying. It promotes play and exploration and a means to discover possibilities that would ordinarily be hard to grasp with just a keyboard.

Development, as a by product, becomes more proactive rather than reactive. You can see the ripples of your contributions flow through the graph in real-time, speeding up improvements and decision making exponentially!

Context cards, shown on interaction

Motion is equally effective. Using appropriate and assistive animation allows us to make interactions and decisions with far less friction, uncertainty and frustration. Through animation we can clearly describe steps of a complicated process, making it feel easy and delightful.

For example, identifying and understanding the data flow through code means spending additional time writing and reading the same code. It Increases an unnecessary cognitive load to understand the relationships within functions. With flowhub, you simply see the data flow and direction right on the graph.

Pulse animation between two components

Saving us all time, cognitive load and helping provide more focus on what it important.

Plastic Design

Designing for flux is hard. It is difficult to design for constant change, movement, responsiveness and interaction.

We identified the need for a more pliable approach and solution. By evolving our old UI, we could generate a design and avoid compromising the benefits of touch or motion. This progression would allow the interplay of code and creation to be forefront.

Our updates of the UI meant removing arbitrary distraction and unnecessary friction which just gets in the way when we build. We chipped away at any unnecessary or overly decorative UI elements which fought against our aim of fluidity and flexibility.

To become more plastic we focused on fewer, but more sustainable design elements; geometry, type, iconography and colour.

We utilised the same paradigm within flow based programming by breaking down these four elements into immovable parts. Then, connecting them back together to create reusable design patterns which mould to the very nature of flux within flowhub.

We next combined these four areas appropriately and purposefully to provide clearer communication—using the least amount of UI possible.

Grouping nodes to move to a subgraph

Why? To step out of the way and let the user focus on with their work. Allow them to feel more accomplishments and progress.

How? No clutter, no unnecessary decoration, just enough design to be informative and helpful. To be relevant and reactive to the person in front of the screen.

The outcome today—less distractions, less uncertainty and more focus. The UI becomes lighter, faster more flexible. It becomes purposeful.

Tomorrow? flowhub is far from finished, in fact, we have just begun. However, we do aim to listen more, get more feedback, share more and continually improve the UI and usability of flowhub.


Context cards that appear when they should. On the tap of a node, or using the search, you can get exactly what you need in order to keep moving forward.

Selecting a node brings up relevant cards right where and when you need them.

Utilising swipe gestures to access toolkit cards from the edge of the screen. Always there when you need them, but never in the way.

Edge swipe to access toolkit

Adding contextual functionality to shape user interaction: A pie menu gives appropriate options when tapping on a node, an edge, a card. It reveals ports at just the right time when connecting nodes.

Relevant pie menu options in context

All of this is focused on enabling and encouraging human computer interaction. Providing a guide through complexity and abstraction which feels easy to use, inviting and approachable. Using design to create confidence for people to play, explore, drag, connect and build.

Flowhub has evolved to become unapologetically “laser-like”. Designed with purpose and precision—using as little design as possible.

Where Next…?

Flowhub undoubtedly pays homage to the sci-fi movies that gives us a window to the future. Where design development can break free of screens and desks and show us a glimpse of a future worth exploring.

Source: http://www.pinterest.com/pin/209347082652307217/
Source: http://www.fxguide.com/featured/iron-man-3-more-suits-to-play-with/

Lightweight, plastic design gives us the opportunity to make programming fun, visual and tangible. Creating a platform to take full advantage of Head Up Displays (HUD’s), augmented reality or even experienced in 3D interactive environments — movies of the future will be a reality.

More importantly, it reminds us that we can break away from the norms and conventions that often limit our way of thinking, our way of designing, our way of programming — to instead seek new possibilities, venture in uncertain areas and play more with the technology around us.

In the same vein, we will continue to make flowhub the best collaborative design development tool we can—purposeful, focused and playful!

For more information on the development and design at flowhub—visit flowhub.io.