We're rebuilding an online platform for online commerce and are thus contemplating hiding the product menu (represented as a tree, usually with a depth of three or so) and only making it appear on mouseover someplace that attracts the user's attention.

Naturally, we could just have it say "Products" in plain text, but a graphical icon would be a better fit with our overall design (a looking glass for product search, a shopping cart for check-out, etc.) The icon should preferably be pretty self-explanatory even if it's rather small. Perhaps as small as 16x16.

I'm not a GUI designer, but rather a dev working closely to the visual design team. And my thinking is we might want to go with what I can only describe as "a binary tree structure with right angles" (I'm not good with the graphicy stuff), while others have put forth more mundande objects, such as actual trees, or stars.

  • 1
    What are the products? And more importantly: what would it be that a user (customer?) set out to look for if the best content for them is your product tree? If it's the main content of the site then it's more like a 'start here' icon than 'product tree'. Start with what the person would be looking for: nav icons are sign posts, not illustrations. – user56reinstatemonica8 Feb 7 '14 at 17:49

I'm envisioning something like the image below. Essentially, I tried to mimic the file tree system that most desktop OSes use to give the user something familiar. To me, this still feels a little "out there", so I'd put a text label with it so reinforce the association and make the button's action clear.

enter image description here


If your product menu is your main menu, you might not need to represent the tree structure. Actually, a tree structure could, in my opinion, play against you as it adds a certain perception of complexity.

I'd go for something friendly and simple such as:

enter image description here

It works on really small sizes, and it can easily be associated with a menu that can be expanded (the Facebook app has it, among others).


I was thinking you could do something like this. This is a quick mock up, but might spark some ideas.

enter image description here

Hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy