9

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.

7
  • If you could provide a WireFrame or a MockUp or a ScreenShot it would be much easier to answer this (good) question! Commented Dec 7, 2012 at 12:26
  • 1
    @BennySkogberg - Yeah sorry - I hit post before I had added my images :) Commented Dec 7, 2012 at 12:27
  • What's the real purpose of these icons? Exactly what decisions should they affect when the user sees and reads them? Commented Dec 7, 2012 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
    Commented Dec 7, 2012 at 15:00
  • @Izkata - Do you have any better suggestions for the icons? Commented Dec 7, 2012 at 15:42

3 Answers 3

6

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.
1
  • 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. Commented Dec 7, 2012 at 13:07
3

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).

2
  • 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? Commented Dec 7, 2012 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. Commented Dec 7, 2012 at 17:44
1

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 and acknowledge you have read our privacy policy.

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