We are working on a product that has to connect inputs and outputs together of different items. There can be hundreds of I/Os for each item and 1 O can go to many Is, but each I can only accept 1 O. Inputs can also accept an input from the end user and Outputs can also display to the end user. Inputs in each item could be optional or required.

We have already figured out how to make the connections together between the items (opening a modal which shows a list of all of the I/Os for that item with a search and, when clicking on the I or O, seeing what can be connected to it, since the list gets limited based on what type of unit the I/O is expecting/providing), the problem we’re stuck with is how to display all of the connections so users can edit them in a way that isn’t overcomplicated.

The ideas we’ve come up with and then thrown out:

We started thinking of something like a flow diagram (like omnigraffle) because it’s easy to see the flow of I > O. The problem is it becomes very complicated as connections criss-cross and lots of items can connect to the same other item (so item 1’s Output A is connected to item 2’s Input A and item 3’s Output C is connected to item 2’s Input B, etc.) and each item’s Os can connect to many other items. Along these lines we thought of a flow diagram that was done with words instead of boxes and broken down all the way down to the I/O (so only showing all of the I/Os and having a step down to each thing it’s connected to). This would also allow you to link to a group of outputs if it’s already used.

We thought of collapsing common connections between many items into a single line and expanding the line on click to show the many connections that exist in the single line, but this still doesn’t really solve the problem of potentially thousands of lines.

We thought of zooming levels and making groups of items that are all linked together and having a high level where it just shows that there is a connection between the groups. Problem with this is that you can have a lot of groups and it would just become just like the lower levels unless you trust a user to know that they would have to make groups inside groups to be useful (which could be explained in a tutorial/best practices area).

The other way of thinking about it is using a long list of all items and having each drop down to show the I/Os and having the text under each for what it’s connected to, if connected, or just saying “Not connected”. If the I/O is connected you could click on the name of what it’s connected to and it would scroll to that item. The problem with this idea is that it’s not very user friendly as a user would have to scroll the entire list to find what they’re looking for/would have to click through connections to find the item they are looking for.

We tried pulling ideas from things like omnigraffle, but it seems that it has the same exact issues we are trying to solve. We also looked at things like database map tools which, yet again, had the same issues. At this point our designers are stuck and are looking for a fresh set of eyes on the problem and trying to see if there’s anything out there that we could pull some type of inspiration from.

It is meant for android and the screen size will be limited to the phone screen.
assumption: there won’t be more than 30 items in the menu.

I am having trouble trying to explain to my client in a non techie language, on why he should follow responsive typography.

Let me give a little bit of context: The project in question is for creating a web portal with dyna…

I’ve worked with designers in the past that had in-depth knowledge about the controls available to developers to create user interfaces. When they created designs, they would be able to mark various controls being used in the…

I have some images coming in from a different website, so I don’t have any control over the sizes of the images, they vary in width and height. And I need to create a good looking gallery out of these images. I have access to…