A visual is worth 1000 lines of code

Why we believe in visual controllers

They say a picture is worth a thousand words. It's a saying that attempts to describe the difference between the amount of information that can be conveyed in a visual format, and the amount conveyed verbally or textually. In short, theres no real contest. Visuals are faster and easier to use and understand than words for almost every person on the planet. This is the reason we build user interfaces in the first placethey help people interact with our systems in ways that would be difficult via text alone.
If youre not convinced, try to compare the amount of time it takes you to absorb the information below, represented first as text, and then in a relatively agreed upon visual representation:

Bold: on || Italics: off || Underline: off || Text color: red || Text highlight color: yellow

The visual representation only requires a quick, almost instantaneous scan, while the text requires a few seconds of eyeballing even for the quickest reader (not to mention the additional screen space required).

When we want to design a new visual representation, we use the visual mediums innate superiority to our advantage. And so, when we plan user interfaces, we use visual design tools (Figma, Sketch, Photoshop, etc.) They allow us to work with our eyes and hands to create the precise visual representation we want, all the while ignoring all other concerns (scale limitations, technical debt, performance, etc.). But their output is often completely static. It looks like our interface (often in its most basic forms), but it's miles away. To describe all its different interactions, we'd need to design it over and over again in all of its manifestations.

When we want to build the actual user interface, we are limited by current tools to using text that describes our visuals, their interactions and their logic (in our case text in the form of HTML, CSS and JS code). This happens because of technological limitations, because of old habits, and because developers take upon themselves an unfair share of the burden of making the systems work. They create the logic and infrastructure, as they should, but they also create the visuals and their interactionsbecause they are the only ones who can.

What were left with is thousands of lines of code that describe visual information, and a gap between stakeholders ability to directly affect the project. The textual description of the visuals is often completely opaque to the designer who designed them. Unless they are well-versed in reading and writing CSS and HTML (and many times other code flavors like React or Vue), they can point their finger at whats wrong, but cannot fix it themselves.

This is where visual controllers come into play

Visual controllers are the set of tools that allow users to apply changes to code using their eyes and hands. For example, choosing a color via the mouse and a palette, or changing the size of a div by dragging its corners using the mouse.

They enable us to forgo the translation between visual and text, allowing us to use our senses to determine what should appear, and where. There are fewer translation layers, and therefore, less room for error as well as a quicker output. A designers eyes wont miss a misplaced button visually. The same cant be said for textual CSS comprehension, as good as we may be with CSS.

Visual controllers are also a great equalizer. They make design accessible and easy for people who may not know how to describe the same visuals in text format (practically anyone who has not spent years honing their front-end coding skills). They offer us a way to widen the circle of contributors, so that more of the stakeholders can directly affect the areas they own. (People who cant make the translation from text to visual and back are often referred to as non-technical, but I think this is a boring and futile distinction.)

Lets explore another example. We have some very basic HTML code of a modal that has an attribute data-open which determines whether it appears on screen or not. The HTML code looks something like this:

<div class="container"><div class="modal" data-open="true"><!--...modal content...--></div></div>

But, almost no developer in their right mind would work on it this way. Indentation and line breaks are the most basic visual manipulation developers use in order to show the DOM structure in a readable way. The output is often something like this:

<div class="container">    <div class="modal" data-open="true">        <!--...modal content...-->    </div></div>

Now the structure is a lot easier to deduce thanks to a visual cue. With a visual controller we can go even further. We can show the conditional data-open in both of its possible states, open or closed, and use other visual aids to make this even easier to comprehend. The violet rail, for example, means a conditional DOM element in our current UI:

Note: The example above is not 1:1 as in the HTML example used previously. We use React in this example because thats what our UI currently supports, but we think it still gets the point across.

The visual representation does something that the text cannotit can reveal what other options are available. In the example above, we can see that theres another optionthe content we can display when our conditional is false. In this case and in many others, the visual controller helps us access the different options much easier than if we just had to keep them straight in our minds.

Conclusion

A good visual representation helps us form a better mental model. It can help with the understanding of hierarchies as they exist by making things that are dependent follow a visual ordering or flow. It can group together things that are related or that work together, making them easier to find and use, and improving their synergy. Most importantly, it can hint at what else is possiblewhat other options are available that may not jump out of the text.

We believe that visual controllers for structure and design can be helpful to anyone who participates in the interface creation process, and that this is a big part of what drives our development and design process. We believe in visual controllers.

Come see what we mean

Codux is a new visual IDE for React. It follows these principles, and combines the development and design processes into a single, faceted process. We are leveraging Codux in our everyday work to build Coduxvisually editing the visual aspects of the application directly from within it. Download Codux and try it out to see for yourself how it improves the UI development experience. If you want to continue the discussion, leave a comment below or join our Discord server.