2

Recently, I designed a tiles menu and it is responsive, which means it will support desktop, tablet/iPad, and mobile devices. But I notice it is very hard to have a submenu in it. Can anyone please provide me some ideas for the best way to show the submenu in a tiles menu like Windows 10?

Here is the layout; the top left tile is the logo.

enter image description here

I have tried a slide menu, but it doesn't provide me the best solution. Because if I clicked at the bottom left tile, it will be a bit weird when the slide menu slides in from the right edge. The second reason is, there is a big gap: the user has to move their mouse from left to right edge and select the options. Also, because of the big gap issue, it makes the button and the active submenu lose their connection.

enter image description here

Improve this question
1
  • 1
    Does the Windows 10 style guide say anything about submenus?
    – Ken Mohnkern
    Oct 23, 2017 at 12:45

2 Answers 2

Reset to default
1

Firstly, let me make it clear, the fact that the placement of the menu needs to be mainly dictated by its contents.
If you place the main CTA's such as "Upgrade plan" or "settings", it'd have to be placed in a more apparent manner.
To answer this question, I'm gonna assume that this sub menu will affect the global app settings and not the particular page alone and that there is only one menu, globally that does these controls.

So if I was you, I wouldn't have a settings tile.
Tiles in the Metro UI are usually used to hold either widgets (weather, finance, etc) or links to apps (Desktop, IE, etc).
Having a settings tile is not the best approach as you'd ideally want to separate the content from the controls. Moreover, since the tile dimensions are not consistent, you'd find the settings tile to be placed in different places across different apps (and even devices).

So I'd recommend triggering a menu on click of a gear icon or a 3-dot submenu icon (if the options are more like the traditional right click menu item equivalent).
You can stick this icon to the top bar so that it is always visible.

Improve this answer
4
  • Thank you for the prompt idea.What I mean is when you visit the homepage, it's a tile design layout with menu items. How can I show a submenu at one of the blocks? E.g. Menu -> submenu 01, submenu 02, submenu 03
    – Jeffrey Leong
    Sep 22, 2017 at 6:23
  • So you mean to say each tile triggers a separate sub-menu?
    – Adarsh Sosale
    Sep 22, 2017 at 9:54
  • Yes. But some of the tiles might just an images.
    – Jeffrey Leong
    Sep 24, 2017 at 23:16
  • That, by the way @JeffreyLeong will get tedious quickly. Especially when you have a lot of tiles.
    – Kitanga Nday
    Nov 22, 2017 at 16:03
0

I would suggest to use UI similar to Tile Folders but I do not think that any control or even guidelines out of the box to help you with that.

Here is how it looks in Windows

enter image description here

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.