3

At the moment, I have a Material based app where I automatically change between List view and Grid view depending on device's viewport size, should I do that?

I already read here that they are content based and if the data fits well in both modes I should show some button so the user can change between them.

The layout looks like this:

grid view vs. list view

Also, in the material way, how should be the transition between Grid and List views?

  • 1
    Thanks for your contribution to UXSE :) Are you able to provide some screenshots or mockups to indicate what the design looks like and what the transition is (i.e. List to Grid or Grid to list from which viewport sizes)? That way we can understand the design rationale better and provide a better response. – Michael Lai Oct 22 '18 at 21:47
  • All right! I have them drawed by hand, it's a little old, but I'll try to digitalise it. – Machado Oct 22 '18 at 22:23
  • I added an image taken from another question while I'll draw the animation myself. – Machado Oct 22 '18 at 22:29
3

The toggle between a 'grid' and 'list' view is a common design pattern that has already been used quite a lot on traditional desktop applications like File Explorer on Windows or other operation systems, and the overlap/similarity between desktop and web application these days means that most people will be familiar with the design pattern.

The key thing to be aware of in your case is for there to be a clear trigger for when this is going to happen. The toggle allows this to be user controlled, but when you are doing this automatically when the viewport size changes then it is about making sure that the transition is consistent and clear to the user (e.g. from a desktop to a mobile view) so that it is not just the view that changes but the rest of the experience is also consistent with the viewport.

In terms of the transition, there are some guidelines in the Material Design documentation for UI interactions, but I am not aware of any specific points referring to the transition between viewports, but generally you want to make it subtle enough so it is not distracting to the user or interrupts the viewing flow.

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.