4

I am working on a web page where a data entry can be viewed in two different ways: a table view or an interactive view.
Also, there should be a link that takes the user to a "compare" page.

I am trying to come up with the UI layout and this is my current plan with 3 clickable icons:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Clicking on the first two icons would change "Data" section to the selected view, and the rightmost icon would take the user to the "compare" page.

However, I feel like the "compare" button doing something completely different from the other two while being side-by-side is not an intuitive design. What is the best way to go about this?

  • Add labels beneath the buttons saying "table view", "interactive view" and "compare" to convey that the rightmost button does something different?
  • Keep the "view" buttons and add a "Compare" textual link beneath them?
  • Add a toggle switch between the "view" icons?
  • Others?

Note: This is just one section of the page. There are stuff above and below so I want to keep the UI contained within the two rectangular boxes for the overall layout consistency.

  • 1
    Can you clarify how the compare option works? Because it's a different mechanic from the view options, so it may only require more space to convey the idea of difference, but it may not be enough. What does the user see on screen on each selected option? – PatomaS Mar 13 '14 at 2:17
  • @PatomaS The compare page is a separate page where the user can select data entries for a side-by-side comparison and graphs and similar stuff, with the current entry pre-selected. – TwiNight Mar 13 '14 at 5:18
  • Ok, so I'm visualizing two windows or two areas on the screen, a left column with controls and something else, and a right area with the data. My answer works with that, plus I added a bit more once you sent the comment. – PatomaS Mar 13 '14 at 6:07
1

Definitely not the toggle switch — it is designed for mutually exclusive options, by introducing it you will be telling user there is no other option than the two.

I personally dislike the labels, as they are often redundant once the icon idea is clear to the user.

"Compare" is too non-explanatory and could mean anything in terms of UI, for example, GitHub code comparison frames.

I would simply add another icon with table and graph, combined.

enter image description here

P.s. I've moved toggles to the data component, because unless "Some stuff" means other operational controls, toggles are too detached from the content they call up.

0

I would combine options 1 and 3, add labels and change from two view icons to one.

Add labels for clarity, that always work and is always helpful and if there are only two view modes, alternating between them is a good solution to save screen space, leave more room for the labels and help the user.

On the data side, inform the user, using text and icon, which view mode is being used.

If you go for the option with one button to toggle view, there is no much need to isolate the "compare" button since both would be doing different actions and there will only be two. If you decide to use an option with three buttons, then you have to separate the different one from the other two to convey easier the idea of different kind actions; you can do that with mere space, background colour, a vertical line, a combination of the mentioned ones and, most probably, in some other ways.

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.