Mobile devices: open link on first click, multilevel menu

[sj]

I use vertical dropdown with 3 levels.

I use default settings and everything works fine. But I want to have the following :

(On desktop everything is ok, because of mouse hover will open the submenue and a click will open the link of a menu item in every level.)

On mobile device there is the following problem:

When I click on the menu items of first or second level, the submenus open. I need to click a second time to open a menu item of level 1 or 2.

On level 3 (last level, without submenus) the link will start on first click.

Now I also want to start the links of the first or second level by first click. In this case it can show the submenus for a short time, but then link directly on its first click to the page.

At the moment it will link to the page only when I click a second time on the menu items.

Thank you for your help.

[admin]

Now I also want to start the links of the first or second level by first click. In this case it can show the submenus for a short time, but then link directly on its first click to the page.

Hmm, are you sure about this?

First, please define “a short time”?

And second, if “a short time” is something like a second or two, it doesn’t make sense to show the sub menus at all since the users will not be able to tap any items in them before the parent link is loaded automatically. And if the timeout is longer (e.g. 5-10 seconds or more), it still doesn’t make sense since at some moment after a sub menu is expanded the browser will just start loading the parent link and the users will have no idea what happens..

[sj]

Thank you for your answer.

I want to have the customer see the submenus but also go directly to the page which is important.

You can see an example hier: http://www.tracto-technik.de (you can choose english language)

If you have a tablet and go with your finger on “products” you see the submenus but the link to “products” will be opened “a short time” later (may be it is immediately but needs time to be loaded).

The page of “products” is important and the customer should see it.

But the customer, who knows exactly what he wants, can first click “products” – see the submenu – and choose “Grundopit – Pipe rammers”. Then he comes directly to “Pipe rammers page” without going to “products”.

If he does not choose one of the submenus the main page of “products” is loaded.

I think this is very clever. If possible I would like to have this solution.

[admin]

I just tested http://www.tracto-technik.de on Android and iOS and I am not able to observe what you describe. Here is how it behaves for me:

The parent items have 2 active areas that can be tapped. If I tap the text, the link is loaded immediately and no sub menu is displayed. If I tap the arrow, the sub menu is toggled and no link is loaded immediately or in a short while.

Can you explain how exactly you are testing this?

[sj]

Please do not use desktop and do not use mobile with the responsive menu bar .

Please try with a tablet (I have an Ipad) ! You can see it only on a tablet ! There are no arrows, it looks like the desktop menu.

1. Try :
(page “product” is loaded)

– touch “Product” : you see the submenu

– wait a while : the the page “product” is loaded

2. Try :
(page “Grundodrill pipe rammers” is loaded)

– touch “Product” : you see the submenu

– do not wait too long and choose “Grondodrill pipe rammers” from the submenu:
the page “Grundodrill pipe rammers” is loaded

Thank you again for your comments.

[admin]

OK, I see what you mean. This happens because they use hover CSS menus on desktop that are not mobile optimized. And the delay is the default 300ms click delay before firing the click event that mobile browsers have when you tap a link on the page (browser makers are actually trying to remove that in many scenarios recently). I am not sure what you like about this but it makes the sub menus completely unusable to regular users that are not familiar with their contents. Can you read all the items in 0.3 seconds + plus a variable bit more (depending on your network connection, device and browser loading speed) and then choose the one you are interested in before the parent link is loaded automatically? Of course, not. What happens with further sub menu levels? Try choosing some item from the “Pipe installation” > “Products” sub menu (and remember you have no idea what the items are and first need to read them). I guess you see what I mean.

BTW, I guess you are testing with an older iOS version because in 8.1 I tested with, the first tap on the parent item “Products” activates the sub menu and only a second tap activates the link – it’s not activated automatically. This is obviously because they are trying to make similar non-mobile optimized pure CSS menus usable in some way.

I currently get the behavior you describe on Android (latest Chrome, Firefox and Opera) but as I mentioned, it makes the sub menus completely unusable to regular users.

[sj]

Thank you very much. I only can test it on Ipad , probably with older iOS.

You are right, it is not allways very usefull. But the company gets the user to see all important pages, which the user should see.

This is my menu-structure

– products, overview (level1)
– list of categories (level2)
– the real products (level3)

example:
– Products
–HDD drilling systems
——TJ8522S
——TJ5415S
——
–MINI drilling systems
——MJ1400
——MJ1600

The page “Products” shows an overview of all categories (HDD drilling systems, MINI drilling systems, ..)
The page “HDD drilling systems” shows an overview of all products you can really buy (TJ8522S, TJ5415S, …)

So, these pages of level1 and level2 have additionally important informations.

On tablet you allways need 2 taps to reach these overview-pages “Products” or “HDD drilling systems”.

I think, the visitor will never tap two times, when he does not know, how important these pages are.

If there would be a good solution, how I can get tablet user to see the level1 and level2-pages with one tap, I would like it. But I understand all your other comments.

I like your SmartMenus. Thank you very much for that. Probably I have to try to get the visitors with some further links to these important pages.

[admin]

I think, the visitor will never tap two times, when he does not know, how important these pages are.

Yep, but the same goes for desktop users too. They may just as well skip your section index pages and directly load some of the products pages. So maybe you should reconsider if it’s OK for you to place very important information the users absolutely must see on those index pages and at the same time use dropdowns that provide the possibility to skip them. There are different approaches to solve the potential issue:

– do not include very important information on the section index pages but instead show it on all products pages (I would probably choose this – normally index pages contain just a list of all the child pages)
– do not show the products pages in the dropdowns so that users always need to pass through the index pages and read any important information there
– some other possibilities like mega dropdowns where the index pages are presented by headers and can be loaded on the first tap (but again, this doesn’t solve the issue that they can still be skipped)…

[sj]

Thank you very much for your inputs.

I have to think about all the different possibilities. May be I will use the mega menu option. So I have to work on it.

[Author]

Posts