website design - Identify different types of clickable shapes?

We're building an application that is like an interactive flow chart. When users are viewing the flow chart, they can interact with certain shapes:

1. Link to another flow chart.


2. Link to an external file


3. A popup that shows more details when clicked.

The problem that I've encountered is how to properly identify that the shapes are clickable and also which action occurs when clicked.

These are our current ideas:

Flow Chart Link:

External File Link:

Pop Up:

We also add the pointer cursor when hovering over the shape. However, I'm really having difficulty accepting these as very intuitive and clear. FWIW - each shape can also have a different geometry (rectangle, diamond and ellipse) and color.

I would also appreciate suggestions for better icons.

Answer

Those small markers in the corners are very subtle - it took me a while to work out that there were differences between them.

I strongly suggest that you change how you mark the links by doing some of the following:

• The icons themselves are good choices, but they are very small and not noticeable. I suggest increasing their size, and possibly even let them have different colours.



• Use colour to indicate a difference. Possibly by giving the backgrounds different colours. If you are going to use images then consider having a different border for each one.


• Finally, if it is a pc only application (i.e. no mobile), then add a larger mask over the images when someone hovers that indicates this. But use this in addition to the icons, otherwise someone will have to hover before they know what it is.