On my Clothing Website navigation panel. On mouse over or click event the jQuery menu collapse / open. Example picture is attached below.
What is the best sign or way to show that it has more menu options or links after click?
Will my customers (females & age 15 years+ ) know that it will open on mouse over or mouse click?
Definitively if you want to base a decision on the visual side only, you may be be falling short for the right solution. If you want to go the extra mile try this:
On the visual side:
Needless to say, that if you plan your IA according to your target audience (15yo females) and name the categories in a way that they recognize, the visual assets that you use become almost irrelevant, because they'll know that they need to go there.
Try to get familiar with the terms 15yo females use so that you can drive them to the sections that you want; i.e. naming the category after what a 15yo female will get engaged by.
There's a few tools like Optimal Workshop That allow you to plan and test that information architecture. Might require work, but you'll notice that the visual assets are the least of your problems.
However, if you don't wanna go the extra mile, you cal always find inspiration here:
I find that the + and - signs that have been used in operating systems for a very long time are the easiest to understand.
The triangle is a bad choice because it seems to point in the same direction even when rotated (because it has 3 tips).
The arrow is okay as long as it is no just a triangle. Its inconvenient is that it draws too much attention.
I don't find that the multiple horizontal bars means menu or anything.
Sub-menus need to visually be at a lower level than main menus. It must be done with alignment and eventually other appearance details.
Iconography is culturally specific, not universal.
Which is to say none of these patterns are clear if you aren't familiar with them
For an interesting related read, check out this report by Sandia National Laboratory [PDF] regarding iconography that could be used around the Yucca Mountain nuclear waste facility.
That said, I'd use the 'hamburger.' It is modern and widespread enough that most users with smart phones will understand it. Adam Powell from Google's Android team wrote an excellent series of articles that deals with the UI challenges and solutions they implemented and why (and why not in some cases).
When I searched for it, I came across this article on a site which is, apparently, all about Android UI Patterns and it gives an overview and links to the series of articles as well as the UI Pattern guide.
Hope it helps.
Even I am in favor with the opinion that triangles are not used consistently and hence have ambiguity of usage and its significance. here is the example of different usage and significance of triangle usage in one website (YouTube).
I am not denying the fact that here different widgets are used like drop down box, drop down menus but ultimately it has to convey that its a container and contains more items. Choosing one shape (triangle) and using it differently for expanded and collapsed states may confuse user.
I think + and - states are quite simple to understand in this context, but going further, supporting visual cues can be added, as shown below. Here, in support with + and - icons, different color is used for sub menu background, suggesting this is a sub-section and falls under upper menu category.
First of all, I would have removed the hover-state (on mouse over) to display the sub-options, A hover-action is often very sudden and surprising for the user (for smart-phones, there are no real hover - people see and tap) (1)
And secondly, Do they need to know what will happen after they click the category? Visual clues are fine, but simplicity is key. As long as the sub-menu is visually different see @spicerjet, the interaction-pattern will most probably be learned after the first interaction.
I see the use case as: -Someone- wants -something- that is enlisted under -some category-
If the user has to go through a -category- to find -something-, they will interact with the category, regardless of what visual clue lies in front of them. The more you clutter the menu with details, the harder it is to choose from the list of items. (2)
Disclaimer: When working on UX, there is always important to try out ideas on the users of the webpage, see how they act, and learn from it. There is never an easy way out.
1: http://tech.vg.no/2013/04/10/hover-state-on-touch-devices/
I wouldn't really worry about the menu itself as much as about the whole concept. I think there is a better way to think about the problem you're trying to solve.
What you are trying to achieve is basically to give users more specific categories as they narrow down their navigation. This is a very common pattern in UX. It's called Faceted Navigation (or Faceted Search), and it's something that Amazon for example does pretty well.
Below are some good articles on the subject, but if you just google it you'll find plenty of others. http://quince.infragistics.com/Patterns/Faceted%20Navigation.aspx
http://alistapart.com/article/design-patterns-faceted-navigation
All but 4 will should have high success.
4 (the hamburger icon), is typically used to denote there's a submenu. I have only seen a version of this icon as the sole visual within a button. So adding text next to it would be cumbersome.
1 and 2 can also be interpreted as submenu indicators.
3, however is a fairly standard collapse icon. I would however, change the icon to a full triangle, rather then the bigger than sign.
Really, this seems more like a user testing question than a design question. I would just simply user test them with you clients. We could speculate forever on the best visual approach for making them discoverable, but chances are most of us aren't your users.
Gather up a few of you actual customers or find individuals that you feel fit the profile of your customers and quickly run them through a couple simple tasks involving those menus, without leading them, and then observe and see where they succeed and where they stumble.
The most credible source - you're users.
check out Rocket Surgery Made Easy By Steve Krug - a ton of good user testing advise and tips.
(1) Is a dropdown more than a collapse list.
(2) Conventional and standard way to represent a collapse list. We can see everywhere, in desktop software, apps and web.
(3) It can be confused as a type of bullet point of a list, not clear if it's collapsable or not.
(4) The "burger" can represent a collapse icon since the three lines represent actually a list. But is most common for main menus.
I think the best option for your target audience is (2). Is the most conventional and standard way to represent that function. A part of that and looking the layout, it won't look weird of busy in case you want to add more collapsable elements (image 3 or 4 "burgers together in a column" for example).
A part of that I would recommend you to try to make a proper triangle to differentiate the 2 states clearly. And remove the "open when rollover", maybe the user doesn't want to open it when the cursor is hover that area.
