I've been doing user testing to make sure users would know how to navigate between elections on the following schema.

enter image description here

enter image description here

The left side has voter information, always visible. The right panel has election related information, that panel would slide right and then another arrow on the left would appear but users don't seem to realize about this navigation. It's an informational website, not a webapp so not sure about adding instructional overlay. Any ideas?

  • is the right panel always open in some state? Otherwise, what is beneath it? Sorry, a little unclear. And the left 'voter data' pane is persistent, correct?
    – Mike M
    Oct 20, 2017 at 17:50
  • Yes it's always open, you can go to the right and then another arrow on the left it would appear (just updated the post with a second image) Oct 20, 2017 at 17:52

1 Answer 1


Try making a clear delineation between the persistent voter data, and the election pane, with the steps clearly outlined.

You can use a pair of buttons, with the number of step or 'pages' so:

  • They know how many total steps they have to complete
  • They can easily navigate back to make an adjustment
  • You can see the time label ('45 days') next to the content pane title, as they are related

I put the steps into the header, but you could try a version where it's pinned to the bottom, although if there's scrolling, the content would go 'under' the bar. I'm not sure what your viewport situation is.

enter image description here

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.