Material design UI doubts


#1

To manage the icons in the app top bar, for “visualizing” and “ordering” items in the contest list, it’s better to unify them in one “option” icon and try to keep the top bar as simple as possible? or it is more comfortable to have separate icon for each function. One icon for grid or list visualization and another icon for the ordering the items?


#2

I don’t think this is a Material Design dependent question, but rather a general UI question.

Using grid/list view controls is a very common thing and I have never seen these controls behind a dropdown or another control. The reason I think is simple: It’s not necessary.

Trying to keep the UI clean is a very good thing, but don’t sacrifice relevant functionality for thinking that you’re cluttering the UI without building it first.

I would keep them visible.

Although not directly related, here’s a page in Material Design’s documentation about grids that may give you more insight: http://www.google.com/design/spec/components/grid-lists.html#grid-lists-content

Why don’t you build a prototype to get a closer feel for it? I use either Prott (https://prottapp.com) or InVision (http://www.invisionapp.com/)

Good luck.


#3

Yes, I can do it, but if you send me any sample image than it’s for me.


#4

Dear Ricardo,
Thank you for the answer.
Take a look at Google Drive or Google Note application for android.
It’s exactly the material design matter, because there are specific rules for how to organize the layout.
I resolved my problem by put all the options in one icon access. Because in my case they are secondary actions. And it is still easy to change the visualization or the order of the items.

On the other hand as I had to put 4 other icons in the same place, which were more important to be fast to reach on my layout. I left them easy to catch with putting only the necessary ones. And hide the ordering and filters in one icon that gives a dropdown to select how you want to order your items.


#5

@nushin That sounds great.

It would be nice to see some screenshots of your solution for others to learn from this discussion as well.


#6

I wish I could,
But here I don’t know why I cannot attach images!


#7

@nushin It’s probably because you’re new in the forums, which is a common thing.

But you don’t need to upload images here, there are plenty of online image upload services you can use.

Choose one service, upload your images and post the links here. And actually, this forum will tell you that you can only post one link, which means that only one URL will be linked, the other URLs will just be text, which is fine, all we do is Copy + Paste the URL in our browsers.

Choose your image upload service: http://lmgtfy.com/?q=free+image+upload

Also, you don’t necessarily have to share the designs in case there are any concerns from your company regarding posting private information.

But what you can do is share wireframes of the solution rather than designs.

Hope that helps.