User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I have a table and in the first version of the implementation, I had expandable rows with info. In the new version, the client wants expandable sections in the section expanded because it is a lot of info.
What is the best option, in this case, expandable rows (with other expandable sections inside/ just the text), quick view or modal? What case offers a better user experience?
I will add some photos from "Design better data tables" as details for the three cases.
I believe all options work fine but I would vote for the 2nd option because the 1st example could be complex for data to be visualised clearly on small viewports.
I would say that the first one is better, but you can also do something like google analytics and use the second one.
Pop-up windows are not a good idea since everyone complains about it all the time online and this is linked with the "Pop-up ads" negative affects in an average user mind.
I would say : Test it. You can try to do some User Research to know if users prefer the first one or the second one. You can do it either by using tools like "hotjar" to look at the user during his interaction and combine it with Google Analytics and Google Tag Manager tool
OR
You could do some classic User Research through observation and UX curves to see what's best.
Also, think about the evolution of your system : Is it better to have a "scroll down" thing (because adding a TONS of info will be not good for your UI maybe?) or a "window from right" (letting you add some new infos that can be useful in a near future).
Also, just thinking about it now as an idea to refine, you could go for a "multiple window" view like in browser : A user can open multiple "tabs" and switch the view to them to see everything he needs (that can be used for comparaison for example).
I prefer the expand option because it feels more intuitive and keeps the eye moving in the same direction as the list. I'd also prefer a hot key (esc) to close the window to avoid scrolling to click and close the modal.
I'm thinking screen size would also be a factor.
Here's an article suggesting best practices and lots of posted comments with helpful feedback. https://uxmovement.com/forms/best-practices-for-modal-windows/
All the 3 solutions posted works provided more context.
Before I lock on to a solution, I would definitely want to know the frequency of actions needing to view expandable content. If it is frequent, then the columns of the table are not doing their job properly and may be prioritize the parameters we want to show upfront.
If we are assuming the action is less frequent, I will give priority to the extended content so that I can make informed decision with accuracy.
In this case, accuracy is prioritized over efficiency.
As a result I would prefer either Solution 2 or 3.
The first solution is the best solution for the interaction (I did not have a look at the content). Here is the reason why I think so:
The first solution does not make the user move the mouse a lot. On klick shows information another click on the same spot closes the information. In a large table like this, the user would probably use the mouse as a pointer device to stay oriented on which row she is. By using a modal (either on top or the side) the user is forced to find the last row after every modal to keep on reading the table.
The simple answer is this: would the users of the app expect to be able to open more than one record at once? If so, the first wire is you only choice.
The other two options are a question of preference.
