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:

flow chart link

External File Link:

external file link

Pop Up:

popup shape

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.

  • If you could provide a WireFrame or a MockUp or a ScreenShot it would be much easier to answer this (good) question! Dec 7 '12 at 12:26
  • 1
    @BennySkogberg - Yeah sorry - I hit post before I had added my images :) Dec 7 '12 at 12:27
  • What's the real purpose of these icons? Exactly what decisions should they affect when the user sees and reads them? Dec 7 '12 at 13:53
  • The icon for your "Flow Chart link" makes me think of an in-tab javascript popup, and the "Pop Up" icon looks to me like a new tab popup...
    – Izkata
    Dec 7 '12 at 15:00
  • @Izkata - Do you have any better suggestions for the icons? Dec 7 '12 at 15:42

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.
  • Thanks - great points. One thing I was thinking of doing was offsetting the image so that the center of the image is over the corner rather than inside the shape? But I definitely agree about making them bigger and adding some color. I'll see if I can create some new images. Dec 7 '12 at 13:07

Firstly, I'm not keen on the current icons. The hyperlink image is recognizable, but the others are quite hard to identify. The flowchart icon could quite easily seem a popup icon and vice versa; I think these still need some work.

Secondly, you can try to add affordance to the shapes by shading the background, raising them with a slight dropshadow, giving them curvature with a subtle gradient and using a more visible hover effect (usually partly depressing the button or shading it a little). You can also give depth effects to the border, usually by adding a white drop-shadow to create an indentation effect (only works on non-white backgrounds). Finally, on mobile, you could also try using an inner shadow on the shape to help indicate 'pressability' (this is the way CTA buttons work in the iOS app store).

  • Thanks, Jimmy. In relation to your comment about the icons: they're mostly to indicate what the click will do. Perhaps there is only the need to indicate that these types of shapes are clickable? Do you have any suggestions for reworking the icons? Dec 7 '12 at 13:56
  • @TheCloudlessSky - I think the hyperlink icon is probably okay, but I'd probably use an 'i' or question mark icon for disclosing that there's going to be an 'explanation' popup. You might use arrows or arrowheads for the 'move to another page' icon. Unfortunately, icons can be quite tricky as there's not that many recognizable shapes that have obvious meanings and work at lots of resolutions. Dec 7 '12 at 17:44

You might want to consider having the icons appear outside of the flowchart shape, and become more prominent (filled in or colored perhaps) on mouseover. You can also add tooltips that appear on mouseover to help explain what it is or what it does if the exact icon is not obvious.

In the example image below, the right border of your flowchart square has an additional margin outside the shape which houses the icon/interaction in light grey. When the active area (perhaps the entire margin) is hovered, the icon is highlighted/colored to reinforce it's interactive nature, and the tooltip 'popout' 'link' etc can also be included.

enter image description here

*In the interest of speed, I captured this illustration from the brilliant designs of 'Pulse' (http://www.pulse.me/) for the purpose of this illustration aka not all my own work...

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.