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:
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?
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.