Different colour lines for prototype links come to and from an element

[Rob_Corradi]

1. Describe the problem your experiencing and how your idea helps solve this

With complex prototypes, it gets hard to know what interaction lines are leading to something vs leaving something on the canvas.

2. Add as much context as possible (screenshots, Figma files, mockups, etc.)

3. Ask questions to bring the community into the conversation

Does anyone else feel overwhelmed by all the lines sometimes?

When they overlap so much it becomes harder to to know for sure which way things are linked and where they go, even with the circles and arrow heads.

I was wondering if it would help to have lines linking to something one colour, and lines linking from something in a different colour?

So all the prototype lines would be either one colour or the other, and it’ll be clearer which way they go.

What do people think?

Rob

[Marc_Nothrop]

Perhaps you could define your thoughts a little more clearly…? Taken literally it’s not clear how “from” or “to something” can be differentiated — all prototype links fit that definition.

Maybe you’re thinking in terms of “forward” and “back” in terms of user flow? I can see that perhaps being useful, but the heuristics in making that work could be ‘interesting’.

Agree the number of linking lines quickly becomes overwhelming, and therefore not terribly useful, so some visual distinctions might be helpful.

e.g. perhaps a different colour/style between actions on the parent frame (aka “screens”) and interactions within, on buttons etc.

[Rob_Corradi]

@Marc_Nothrop

Maybe you’re thinking in terms of “forward” and “back” in terms of user flow? I can see that perhaps being useful, but the heuristics in making that work could be ‘interesting’.

It can be more complex than forward and back, as that suggests a few sequential screens. It could be a screen with multiple options on it that go to different screens, and all of those screens returning to that screen.

@Marc_Nothrop

e.g. perhaps a different colour/style between actions on the parent frame (aka “screens”) and interactions within, on buttons etc.

That’s a also a good idea