Need help in understanding the interaction. Me and my friend are stuck in one interaction where right side gets updated, when we select an item in the left.

Right side has default little amount of information. The problem is how to go back to this page , from the previous page. (from Left side selected post page) MOCKUP

Also link to any similar websites will be helpful

  • You can use 1st item on the left side, like News. – Alexey Kolchenko Feb 23 '16 at 8:54
  • Add a big left arrow on left of your logo, to go back to your default text. Like wizard, browser or windows 10 apps... – ColdCat May 23 '16 at 18:40
  • Using breadcrumbs might be the best solution. smashingmagazine.com/2009/03/… – Bharath Selvaraj Jul 22 '16 at 12:51
  • Are you saying the default text, "News", is not accessible by clicking either 1, 2, or 3 on the left? How does one get to this page? – bloodyKnuckles Dec 19 '16 at 15:28

suggested solution

I would design it this way. The left panel as big clickable links that refresh the content on the right. In this way, the user can click back and forth with ease.


Maybe u can check this which is similiar with your problem.

enter image description here

w3school Closable Tabs

The london with "X" is your current selected Left section article. When you click the "X" your default "News" in the right side will appear because the layer on "News" is closed.


On top of my head I have two solutions that might work out for you.

  1. When the user clicks on left item, the right side data changes. This data comes in form of dismissable card, which user can dismiss anytime by clicking on 'X' button or '< Back' button like in ios to return to the start page.
  2. Also, the logo can be made clickable to return to the home page.

Here's another way—

All the right side boxes have an "OK" or a "GOT IT" button at the bottom of the text. Click it, and the page goes back to its old state.


I will advise you not to do anything fancy. Here if you try to play with icons, it will not serve your cause, the user will ultimately get confused. Putting bread crumbs for such a small navigation is not space friendly solution.

Just put a footer frame with a back button inside the description panel.

Simple-Easy-Quick and No confusion.enter image description here


Well, why not put an entry to the default state (let's call it "Home") in the left sidebar, along with the other elements you have there? The left sidebar would then be the navigation element between all the right-hand panels, thereby increasing consistency and predictability.

If you're concerned with "Home" not belonging with the other elements in the left sidebar, you can visually distinguish this entry with any of these:

  • a separator
  • an icon on the left
  • bold font
  • indentation (if all elements are subelements of "Home")

As for the label, "Home" is very generic—you might find a more fitting name. Judging from your wireframe, perhaps "News" might be a good title.


The solution is to work with the items on the left like they are check-boxes, but the group is a single select.

In this solution the user can uncheck the selected option and return to the default text on the right side.


download bmml source – Wireframes created with Balsamiq Mockups

  • Pardon me, what if the news section is clickable and right hand section changes when i select it . How to go back in this case? – Divi Feb 23 '16 at 9:08
  • @dan I did not understood that from your question.... if the news section (which is the default section) is clickable and the target of the link is the same box is "self" (the right box). i Guess you can add a "back" or a "close (x)" button in the new window that opens inside the right side. What i mean is that the link from the news will work as an overlay of the right side. – dimshik Feb 23 '16 at 9:21

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.