Imagine the concept of a black box, that can have inputs and outputs.

A box can connect with other boxes. We have something like this:

enter image description here

Now imagine a smartphone. "Ok, this guy is crazy." You thought. And you are right.

I am having several problems conceiving an alternative representation for this kind of structures in a smartphone.

Let me give a concrete example: enter image description here

As you can see we have two boxes from the same type that provide each one a number. Those 2 numbers go into a box that sums and produces the sum. That sum is connected to a box that displays the number received.

There are two important types of boxes: Information providers and actions. Information providers usually start these diagrams and actions generally finish them.

It is important to know what type of block is being used and how blocks connect with each other. Another relevant fact is that new type of blocks can be created. Therefore, this structure is flexible and expansible.


Although I didn't come to a solution yet one thing I know for sure:

I need a system that allows the user to simplify the scene, grouping blocks. Still I have the problem on how to represent this. Is all information important?

Please be aware that I belive the user needs to see the "full picture" or at least what matters of that picture. The minimum I belive that is important is:

  • Know what is connected to what
  • What provides info and what is the final result
  • How the information flows between the boxes.
  • Someone edited my post and then I edited to add an example and that information was lost. I want to thank that person for puting my image and changing the table style. Thanks.
    – Tiago
    Mar 22, 2012 at 19:44
  • we're here for you, until you get those next few rep points (and even then!). :)
    – jcmeloni
    Mar 22, 2012 at 21:18
  • 1
    An important question: Can links loop backwards? Some networking systems are strictly hierarchal (you can never have an output go back upstream in a way that may create feedback). Is yours? If not, there are some significant optimizations that can be made into the UI. Even if you can have outputs go back to upstream inputs, if that is the exception you can allow it to be inconvenient or less clear in favor of the majority being simple. Apr 29, 2012 at 23:31
  • That question is pertinent. The truth is that I can do that limitation if the simplification is worth it. This is a system that I am developing and I am my own costumer, so I am kinda free to do some simplifications as long as the expected value in those modifications is worth it.
    – Tiago
    Apr 29, 2012 at 23:57
  • I'd be very interested to hear how you ended up solving this issue!
    – Kit Grose
    Dec 6, 2013 at 0:51

3 Answers 3


What you're describing sounds a lot like how Quartz Composer works:

Screenshot of a simple Quartz Composer patch Screenshot taken from this page by Anthony Mattox

With a simple graph like this one it's fairly easy to comprehend how this might be able to transpose to a mobile UI (though it wouldn't be without its confusion).

The issue with this application (which I imagine would hold true for yours too) is that it can quickly devolve to this:

Screenshot of complex Quartz Composer patch Screenshot taken from this page by Ian Grant

This might be an impossible problem to solve adequately on a mobile device. One option might be to introduce the idea of a "shelf", like in the old NeXTSTEP days, which holds an object temporarily while you navigate the UI separately:


download bmml source – Wireframes created with Balsamiq Mockups

That allows you to scroll the left panel around without scrolling the outlet away too. By pairing the shelf's outlets each pair has an input and output outlet the two boxes being connected don't need to be visibly close to one-another.

For what it's worth, a big part of what makes these systems work is the spatial awareness it hooks into. You'd benefit, I imagine, by allowing the user a zoom-and-panable interface to allow the user to visualise the whole beast spatially.

  • One way Quartz Composer reduces visual complexity, too, is the addition of subroutines which they call a macro. If you have access to a Mac I encourage you to play around with it to explore the awesome UI.
    – Kit Grose
    Apr 10, 2012 at 3:11
  • The addition of soubroutines was thought and probly it will have a automatic mechanism that alows the simplification. You choosed the right example to ilustrate the complexity that this can have, with quartz composer. However, I feel that I can't understand your solution well. In your solution what is the shelf? The right or the left? And that value 7 is connected with what?
    – Tiago
    Apr 10, 2012 at 19:49
  • @Tiago: The shelf is the thing on the right, which I imagine to be fixed in place as the left list of "patches" is scrollable. By providing a fixed area to connect outlets to, you don't need the input and output patches to be visible at once. Right now in the example, the value 7 is connected only to the shelf. It could be then attached to the "Sum" patch by dragging a connection from the bottom of the shelf outlet to the "A" input on the sum patch. The UI would therefore allow the user to scroll the first patch off-screen to do so if required (since the shelf would always remain on-screen).
    – Kit Grose
    Apr 11, 2012 at 0:59
  • Although this is a good proposal I belive that this can make some confusion where 10 blocks or so are connected. Also it doesn't provide a great view from all the schema. If I scroll up, in your case, I know SOMETHING is connected. But what? Knowing what is connected matters in this case.
    – Tiago
    Apr 26, 2012 at 14:06
  • @Tiago: The point of my proposal is that I don't believe there's any way to put an arbitrarily-large set of objects on a tiny screen legibly. My solution is a way to manage information being off-screen.
    – Kit Grose
    May 1, 2012 at 23:50

How about something like this? This seems to be a fairly clear and interesting way to show multiple inputs and outputs but without examples from you, it's hard to know if that will work with your data types.

If you have a wide tree vs a long tree, you can always make it scrollable as long as you have clear borders around the image so the user knows when there is something to the left or right that they're not currently seeing.


download bmml source – Wireframes created with Balsamiq Mockups

  • There are several problems with that representation. First it does not identify what boxes are being used (it is important to know if we are using a certain type of box) and second you don't know if you are connecting inputs or outputs or were they belong. Made an image that shows that problem: img688.imageshack.us/img688/6311/faillz.png Bread can't connect with Dough since we can deduce from the last connection that Dough is an input. Inputs connect with outputs. Only. Added an example on the question. Thanks for your answear :)
    – Tiago
    Mar 22, 2012 at 19:40
  • How many box types are there? Will boxes represent items, actions, and results as in your example image? I removed the boxes in my example as an attempt to de-clutter and decrease space used for mobile, with the assumption that items that are grouped in one section are related. You could use separate border styles for each box type. Inputs have dotted-line edges and outputs have solid edges, etc.
    – Karen
    Mar 22, 2012 at 19:47
  • That is the interesting part. I don't know. It is a flexible system. A programer can develop a box as a plug-in. A box can represent anything. Usually they represent a transformation. But are boxes that create data (like the number provider, on my example) and boxes that do something (like the display, on my example). I understood your suggestion but I need to show more data. Also, your suggestion probly doesn't scale well with 3 or 4 paralel boxes.
    – Tiago
    Mar 22, 2012 at 20:30

I am working on a structure where there are only two types of boxes: one provides behavior/action, the other a container. This structure is used for system engineering.

The first type of boxes is called system method, the second system element. A system element can contain system methods and system elements. Just like you pointed out that it's very important to describe how the contained boxes are connected in the containing system element.

Both types of boxes are abstracted as an input array, an output array, and some common operations like calculate(). System element is more interesting because it contains connection information.

This structure is definitely flexible and expandable. Both of your charts can be represented with this structure.

I found this post when I am searching for a formal name of the diagram representing this structure.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.