1

I am designing a grid and need to accomplish two actions when clicking on a row:

1) navigate to a detail page for that row information

2) open an accordion "drawer" with more information.

I am a little stuck on the best way to do that. What I've come up with is either have the primary action of clicking the row lead to the detail page and then have a button to expand the row in case the user wants to, but I am wondering if that's the best way... see attached for an image of the grid so far...the grid so far

Improve this question
4
  • 1
    Use cases help a lot to solve such collisions. Could you please describe why users want to view details on a separate page vs. viewing them in place?
    – mikryz
    Jan 19, 2016 at 23:44
  • the details in the "drawer" will be simple editable data that they dont have to navigate to the detail page to edit. if they need detailed information they navigate to a detail page.
    – MichL
    Jan 20, 2016 at 16:11
  • could you show an example of the type and length of content shown in the accordion "drawer" please
    – Dave Haigh
    Jun 19, 2016 at 13:24
  • Does the detail page contain many fields or few?
    – NB4
    Jun 15, 2017 at 4:42

3 Answers 3

Reset to default
1

enter image description here

  • add a expand Collapse icon so user can easily understand row is expandable

  • don't redirect user on click of row.

  • On click of row just open the accordion and show loading in accordion enter image description herearea if needed.

Improve this answer
0

For this case I suggest to make in-place editor, instead of a drawer and display a button on rollover to view details. Something like this: enter image description here

Improve this answer
1
  • One click edit for the cells is already in place in the grid (in an edit mode to protect the data). problem is there is sub information that also should be displayed to increase productivity but isnt extremely necessary to see all the time. this is where i am struggling about how to navigate between the two interactions.
    – MichL
    Jan 22, 2016 at 14:34
0

Actually there is better option to this. It's that don't redirect user on click of row.

My Suggestion:

  • On click of row just open the "accordion drawer".
  • Add a link to either of the important field i.e. Id or Name. Also change little appearance to which the link is added by color(mostly used shade of blue) or an underline.

Why?

1) Seeing your data table i can tell user would be somewhat technically aware, so user will be able to know what things would be where.

2) Also if you have gone through any back-end table entries(like phpmyadmin or Wordpress pages/posts listing page), you will never be redirected on click of row. So it creates uniformity if you follow that.

3) In future, if you decide to add some column which is in need to have link to their entries. It would be better if whole row selection doesn't redirect or throws user to another page. And even changing the functionality then would not be that good.

A rough example(from Wordpress admin panel):

enter image description here

Hope this might help you!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.