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 modals? 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.
One question I have is this: What does that "Record Payment" control do? Does it trigger a modal of some sort with more tasks, take the user out of the context of this page (not what I would expect), etc?
If it triggers a function that opens a modal context then I would avoid using a modal solution to house this information - "hot modal on modal action" is not a good thing in a UI context ;-) Also, it looks as if there is quite a lot going on in that panel, it might be a bit much for a modal.
The expandable row direction is a good one because it is a common UI pattern for people that keeps them in the context of the work they are doing, and if appropriate can allow them to compare expanded rows. If you need to pop a modal out from within a row expand, that is a perfectly reasonably thing to do over a page (rather than another modal).
I personally LOVE a good slide-in side panel... modal but more scalable than a modal box, configurable... but it does have the same issue of being bad form to open a modal ON TOP of an already modal experience - too "Inception" - so if that "Record Payment" function is something that needs to happen as a modal experience on this page I would shy away from this direction.
I really appreciate your prototypes but they are moving a little fast for me to assess all of what is in them... I'm not sure I am seeing the evidence of expandable areas WITHIN your expandable area/modal - it might help us all to explain what the core problem is that your client is having with the expand you provided before.
