Brief history of what's happening: the client wanted an interactive graph that the user can use to determine their needs from the client. The graph charts the user's business growth over time. When the user drags the knob under the graph, the services below (in the services section) will show/hide depending on what kinds of services are available to that size of business. (ie: if your business is ready to market a product, you need these 6 services, etc.)

Because the sections are separate, but also tied together, I am looking for ways that I can indicate to the user once they let go of the graph knob, they should go down to the services section. I would like to do something animated, like perhaps, draw an "hand drawn" style arrow from the graph to the services section... is there a better way to tie these elements together?

Note: the services section could easily fall below the fold, which is why I'd like the additional indicator that these sections are related.

graph and services

  • When the knob is dragged, can users see something happening in the service section? Would any milestone have the same services as the one before? Does the graph start on the left most milestone, and would services change as you move to the one on its right?
    – Izhaki
    Sep 3, 2015 at 21:06
  • the services are visible animating in and out of place as you get past each milestone. some of the services translate to multiple milestones, but there is an obvious animated transition. My concern is that if your browser is a certain size, you might not see that there is content below the graph, so I just want a (possibly) redundant "hey look down here!" that is fun and not obnoxious
    – binky
    Sep 3, 2015 at 23:06
  • 1
    Oh OK, so this is a 'below the fold' question. Because so long the services animate you can hardly do better than this. I'd clarify this in the question.
    – Izhaki
    Sep 3, 2015 at 23:16
  • is the Revenue just an artistic projection? Sep 12, 2015 at 8:33

1 Answer 1



This is an interface that feels interesting to an inexperienced client, but is not intuitive, easy to use, or a good experience for users.

  • There is WAY too much cognitive load involved.
  • The user first has to understand the graph, then understand the non standard interaction model, then relate the interaction to a panel that may or may not be below the fold.
    • The panel itself is non standard (non grid aligned, unfamiliar hexagonal shapes favoring cryptic icons over text)
  • On top of all of this, a user who wants to peruse all services now has to drag the slider across each node in the graph, then try to read the hexagonal shapes, then repeat to much frustration.

This kind of idea is typical for clients who are creative but inexperienced with UX. Typically the design firm will have an active role to play in explaining why creativity is not the same as UX or branding, and why creative solutions can lead to bad UX and negative branding.

So my first suggestion would be...try to fix the upstream problem of bad design, otherwise this is like choosing what color to paint the Titanic.

If you really need to do this...

I would start by reducing the nonlinear, indirect interaction in the design:

  • Replace the drag interaction with a row of buttons, each representing a growth phase. You can use flat styling to make these look elegant while retaining the button affordance so it's clear to users how the interaction works.

  • When the button is pressed, highlight the growth phase in the graph and animate a drop down panel connected to the button. This provides a clear visual linkage between the graph, the button and the drop down panel content.

  • Use hexagons, or the graph, but not both. You are trying to do way too much by introducing visual bling into the interface. Help your client exercise some design restraint.

Hope that helps. For various professional reasons I'm very familiar with VC, legal, accounting, banking and consulting firms who frequently need to communicate a range of services spanning a company's life cycle and in my experience this is not the right way to do it: the chart is communicative, but the way it is being made interactive is not.

I'll try to add an alternate wireframe here tomorrow if I have time.

  • just a note that the services panel is always available whether you interact with the graph or not. The graph can be bypassed completely and the services would all be visible and usable. I appreciate your points and insight, and brought up some of these issues with the client myself, but this is what was asked for, and the project is almost over. I am looking for ways to tie these two panels together as opposed to starting over.
    – binky
    Sep 4, 2015 at 15:28
  • Any chance you'll still be able to add a wireframe? Sep 9, 2015 at 14:36

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.