1

Let's say I have a table view with a list of records (in this case, transactions). A user can click on the Transaction ID to navigate to the individual transaction record in the same tab. If the user presses "back" on their browser, what is the best way to direct them back to the table in such a way where they can identify which record in the table they had clicked on previously?

Another method is to open the transaction in a new tab, but I'm not sure if that's the best experience for the user.

Note: I am using a pre-made mockup just to illustrate the example. Please ignore the data.

enter image description here

2
  • A small thing I'd like to add that I wouldn't have the first column's contents be a link in order to navigate to the detail page of that entire row. I would make the entire row clickable instead. A link as presented here would be a reference. For instance, you could have the customer or delivery type be a link, which would navigate the user to that reference.
    – Kriem
    Dec 31, 2023 at 13:44
  • Another thing I'd like to ask is: what's your motivation to make the user aware what they just navigated from? Because the thing is, I think it's unnecessary to do so. Either a user can open the detail page in a new tab deliberately (right click, etc), or they use the forward button to recheck where they just came from of they really don't remember. Which brings me to the first question: what's your motivation? As I believe it will not be an issue and the user will either be able to remember, have tools to recheck, or just doesn't care. Honest question, I'm curious!
    – Kriem
    Dec 31, 2023 at 13:47

1 Answer 1

0

There are a few ways in which most apps do this:

  1. If you don't have a lot of data for a transaction, you could use a modal or a right-side drawer. This would remove the need for any other UI changes. If you have a web app, you can also update the url when a transaction is opened, so that on page refresh, the modal/drawer can be reopened.

  2. If you change the whole page, when pressing the back button, you could highlight the selected row for 1-2 sec, while also scrolling the table to make the row visible. You might want to record the previous scroll position so you can show it back the exact same way as it was before leaving the page.

  3. Another possible solution would be to add some UI indicator (like an arrow or a highlight) on the selected row and remove it once the user has interacted again with that specific row (like hovering over the row).

  4. Of course, if you have time and passion for animations, you could try to implement some fancy transitions like the Mission Control in MacOS :)

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.