Moved: Reply To: Ergonomy of menu on mobile

https://xtemos.com/forums/topic/ergonomy-of-menu-on-mobile/

Hi,

Let’s focus, and do 1 by 1.

The primary target is to have an obvious category selector in shop / mobile like this one, similar to Basel:
https://snipboard.io/Yxuw2s.jpg

This is about mobile only.

The code below has no effect.
woodmartThemeModule.$document.on(‘wdShopPageInit’, function() {
woodmartThemeModule.categoriesMenuBtns();
});

As of now, my “category selector” is in the 3rd row of Header, using 2ndary element, with product categories (or blog categories) as a menu.
The 2ndary menu does not work on mobile for 2 reasons:
1. category names are hardly clickable (tough but possible on iphone, impossible on galaxy)
2. the sub-category names are out of screen, and un-clickable.

Give you below the access to website – it’s staging, no worry whatever you do

Kind regards

Hello,

I have submitted the issue to our dev department I will get back to you.

Best Regards

Hello,

Please set the configuration as shown: https://prnt.sc/12ifbnk
https://prnt.sc/12ifc79

If you have any questions please feel free to contact us.

Best Regards

Hi,

First, our reminder:
The target is to have an obvious category selector in shop / mobile like this one:
https://snipboard.io/Yxuw2s.jpg

1. Secondary menu on mobile
You wrote me:
The secondary menu is the element of the Header builder, allows to show additional menu created in Appearance > Menu: https://xtemos.com/docs/woodmart/adding-menu-site/
As you saw it, on website, it’s executed as you wrote. Now, we can agree that it does not work on mobile.
Topic closed

2. Use the “shop title”
This is what you propose:
https://snipboard.io/fMPtIJ.jpg

The big “boutique” (ie shop in French) takes space without adding any value
Q1: if we agree that it is useless, how to erase it? If you think it’s useful for users, please explain your view.

“categories” word + related icon are really small and hardly visible and clickable (think about senior people)
Q2: how to make them more impactful / visible?

there are 3 hamburger icons, leading to 3 different … “things”. Ie 1 for website overall menu, one for shop filters, and 1 for “categories”. This is extremely unclear, fully confusing re. UI / UX:
Q3. what do you propose to make it simple and obvious for users? Any person shall understand immediately what means what.

Kind regards

Hello,

1. You can disable this option in Theme Settings -> Shop -> Sidebar & Page title -> Shop title.

2. Try to add the following CSS to increase this button

.main-page-wrapper .page-title .wd-action-btn.wd-style-text>a {
	font-size: 18px;
	text-transform: uppercase;
}

3. You are right, we will add a different “Filters” icon and return the caret for “Categories” in our next update.

Kind Regards

Hello,

The original topic is how to have a simple, visible, and immediate way to select “product category” on shop page, and “blog category” in page. On mobile.

The 2ndary menu, though proposed on mobile, does not work (see above).

This is the option that you propose via your “title”
https://snipboard.io/UKz4jN.jpg
The huge BOUTIQUE takes space without adding any value. Though the title size is set to “small”. Still the confusion with the 3 hamburgers … so, very poor from pure UI / UX perspective

The management via sidebar is also confusing .. if you give priority to categories, then, when user clicks on the top left hamburger, supposing to get the “site menu”, user receives the “category” ….

On mobile, Woodmart is faster, but the ergonomy for users is poorer. Though mobile is now the n° 1 device worldwide and should be the utmost priority

Regards

Hello,

The BOUTIQUE word can be disabled in Theme Settings -> Shop -> Sidebar & Page title -> Shop title.

Also, what else you would like to change there to improve the ergonomy on mobile devices?

Kind Regards

Hello,

Reminder: target is to have an obvious category selector, on mobile. Ideally specific for blog, and shop. It’s obvious on shop, I think. For blog, which can be a blog, or a magazine, or a newspaper, basically, it enables the “reader” to choose his / her interesting topic, rather than scrolling all articles, whatever they talk about.

Re. Disable “BOUTIQUE” word
Reminder: this word takes space without adding value. And you wrote that it’s the only way to get a “product category selector”
Here, I should have missed something … sorry. if I disable page title, the hamburger, leading to category selector is disappearing as well.
The settings for your info:
https://snipboard.io/AsCZiY.jpg
The result:
https://snipboard.io/fUqy6D.jpg
Anyway, we stay on same issue: there are 3 hamburger icons. Leading to different “things”. And icon 3 and 4, which are different, lead to same “thing” (filters by attribute)

How to improve ergonomy? 3 options, 1 having 2 variants
In my view, and we may disagree, in a shop, first you select a category (man / woman – shoes / trousers / shirts / …). And secondly, you filter. The way to select “product category” must be obvious (ie implying no brain effort), and same for filters.

Option 1: Get a “category selector” in menu
What is Basel is perfect, for me.
https://snipboard.io/ho9dvw.jpg
ON woodmart:
– it could be achievable via the 2ndary menu, but it does not work.
– you propose a category dropdown on desktop. But none on mobile, though mobile is now more important than desktop.
Category dropdown for mobile and 2ndary menu are 2 variants that can solve the issue.

Option 2: Sequential sidebar with 1. Filters headings and then 2. Criterias.
I don’t know the tech jargon for this, but this is what most top players do:
https://snipboard.io/KkLYg1.jpg
Ie. first, you have the “titles” of filters. And then, you choose.
The advantage here is that you immediately see all your possibilities to filter (category, color, style, ….), without scrolling to see all criterias (ie the successive lists of all categories, all colors, all styles, …)

Option 3: varying sidebar
https://snipboard.io/5J9MF7.jpg
Probably the toughest one for you.
If I am on shop page, the sidebar shows the different “product categories”
If I am in a given category, the sidebar shows the filters per attribute (brand, color, …)
But if I click on the hamburger on top left, I have the overall site menu.
Somehow, like we all know on desktops, it’s like the contextual menu with right click.

Other considerations:

Based on this image:
https://snipboard.io/fUqy6D.jpg
You don’t need the hamburger 3. Most top players just write a text, sometimes it is colored to have more visual impact.
In the same logic, you could replace the 2 reversed arrows by a text, like most do.

Based on this image:
https://snipboard.io/aPGcAE.jpg
The “3 dots” icon, which means “etc” / “and so on”. On the blog page, I would replace it by something like this:
https://www.google.fr/search?q=summary+icon&hl=fr
In a blog, it can only relate to “topic” / “section” / …

Hoping this is clear and useful

Kind regards

Hello,

Option 1. Try to add the following code snippet to the Custom CSS area in Theme Settings for mobile and tablet devices to hide the title only

.title-shop.page-title .title {
  display:none;
}

The categories menu in page title works in the exact same way as with Basel https://prnt.sc/133vtmf

Other options are not available in our theme. We will consider this for our future updates.

Kind Regards

Hi,

This is what you propose:
https://snipboard.io/FgRUAG.jpg

simplicity / clarity is key on mobile because space is reduced

As a user, 3 hamburgers, leading to 3 different “things” … sorry, there is no logic, it is confusing, not understandable. Would be clearer without the icons 2 and 3. Possible?

This way of presenting categories:
– via menus, you can organize categories like you want. For instance, according to business priority. Here, it’s alphabetical. Possible to change?
– the right arrows -leading to subcategories- do not stand out. They are not obviously visible. How to change weight / color?
– if product counts can add something on desktop (there is space), eventually in shop pages, but here, in this menu, on mobile, it complexifies the reading. You don’t see immediately the categories (just a part, the first ones in alphabetical order). Possible to specifically withdraw them here on this menu on mobile?

You demo on mobile device does not work. Talking about this one:
https://woodmart.xtemos.com/shop/
Have you one that works?

Kind regards

Further,

– if

Hi,

1. In the next update we will replace shop title categories menu burger icon with arrow icon in close way like it looks on Basel theme.

2. WooCommerce has own product categories sorting option that can’t be overwritten by WordPress theme. To sort your categories try to use the following drag and drop interface in product categories menu (screenshot https://prnt.sc/13c550u).

3. Try to add following custom code to the Global Custom CSS area in Theme Settings to change sub-categories arrow color to the desired one.

.page-title .wd-nav-product-cat .wd-nav-opener,
.page-title .wd-nav-product-cat .wd-nav-opener:hover {
	color: #FF0000;
}

.page-title .wd-nav-product-cat  .wd-nav-opener.wd-active {
	color: #0032A0;
}

4. There is no such option in WooCommerce, but following changes can be done with Custom CSS. To exclude product categories on mobile view you need to find ID of the following category by checking it URL in the WordPress Dashboard (https://prnt.sc/13c5rly). After creating a list of desired categories IDs you can create custom CSS code which will hide these categories on a mobile device. For example to hide categories with IDs 15,72 and 154 on mobile device try to add following custom code to the Mobile Custom CSS area in Theme Settings.

.wd-nav-product-cat .cat-item-15,
.wd-nav-product-cat .cat-item-72,
.wd-nav-product-cat .cat-item-154 {
	display: none;
}

5. We have checked our demo on mobile devices https://woodmart.xtemos.com/shop/, and it is working normally (video https://gyazo.com/ca08b5ae2db918bad52ccbe934fe605b)

Kind Regards

Hi,
Thanks for your work.

1. OK – this will withdraw 1. If you replace the hamburger icon above products by a funnel icon, clarity and logic will improve for users.

2. that’s way, which works.

3. I will try to find an optimal with your guidelines. Though, I think that, for users, it would be far easier if the sub-categories were not only accessible when PRECISELY clicking on arrows, but also when clicking on text.

4. Looks like I was unclear, sorry. My point was about product counts, the number of products, how to withdraw them?

To illustrate my overall point, this is a view of boutique, on desktop this time, with 1. secondary menu used for product categories generated via menu; and 2. your title.
https://snipboard.io/SL8fHo.jpg
Which one is the most user-friendly, for you?
The advantages of the 2ndary menu:
– your can organize the menu like you need
– woodmart has more CSS settings options in menu than in page title
I can’t understand why you decided to have a non-working 2ndary menu on mobile

5. Your demo … I found why our experiences are different. My purpose was to try your demo on title / categories. Usually, I use firefox / developer tools. And when I click on title / categories, it does not work. But within Chrome, it does. I just tried on my mobile with firefox, and it works, so the issue is specific to firefox / developer tools. So, not a problem indeed.

Kind regards

Hi,

3. Subcategories menu can be opened only by clicking on subcategories arrow button. Click on parent category will open a page with all parent category products. The area of pressing on the arrow button can be enlarged via custom CSS code:

.wd-nav-product-cat .wd-nav-opener:before {
 	content: "";
	position: absolute;
	left: -50px;
	top: 0;
	right: 0;
	bottom: 0;
}

4. You can hide product counts by adding the following custom CSS code to the Mobile Custom CSS area in Theme Settings => Custom CSS.

body .wd-nav-product-cat .category-products-count {
	display: none;
}

6. To utilize product counter, WooCommerce categories nesting, AJAX shop filtering, AJAX product sorting, synchronizing with WooCommerce categories widgets, attributes widgets, swatches widgets, and support of native WooCommerce Product Catalog options – only WooCommerce product categories can be used.

Kind Regards

[Author]

Posts