Don't use "nameboxes" in frontend

  • Posts: 2128
  • Thank you received: 732
  • Hikashop Business
6 years 11 months ago #208102

-- url of the page with the problem -- : any
-- HikaShop version -- : 2.5.0
-- HikaMarket version -- : 1.6.4
-- Joomla version -- : 3.4.3
-- PHP version -- : 5.5.3
-- Browser(s) name and version -- : any, especially mobile

Hi Jerome,

Frankly, I don't think using nameboxes in the frontend - e.g. in the product edition page - is a good idea. While they work great in the backend for admins, in the frontend nameboxes are anything but ideal:

  1. For the "Average Joe" as user or vendor, nameboxes are a letdown in the infamous "User Experience" as they are by far not as intuitive as single or multiple dropdowns.
  2. Nameboxes are awkward when used on touchscreen devices. Actually, UX is plain horrible.
  3. Nameboxes are awkward when to be styled: they require yet another set of CSS rules (while dropdowns are already "on board"), and they are trickier to deal with (while dropdowns are simple, especially with Chosen).
  4. Where it's about a single choice to be made - e.g. for brand, or where a vendor shall and can pick only one single category for a product - nameboxes don't even make sense, a single dropdown is the logical and much more intuitive way to go.

So, I'm urging you to abandon nameboxes in the frontend and bring back regular dropdowns. Everyone's lives would be much easier again for the above mentioned reasons.

For starters, how can I replace the namebox for the "Brand" field with a single dropdown here and now? Sorry, but again, since it's a single brand to be selected (which makes good sense), the use of a name box makes no sense at all there.

Thank you!


Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )
Last edit: 6 years 11 months ago by lousyfool.

Please Log in or Create an account to join the conversation.

  • Posts: 75924
  • Thank you received: 11857
  • MODERATOR
6 years 11 months ago #208117

Hi,

Backend or frontend, the nameboxes solve the same issues.

1. It's your experience, but not everyone will agree with you. I personally find it much more easy to use. When I have a 100 brands and need to search each time through the list to find the one I want, I'd rather just type a few letters of the brand I want and directly select the brand I want. For the average Joe, even without typing anything in it and looking through the list of brands, it will take him as much time as with a normal dropdown.

2. I wouldn't say plain horrible. But yes, they are definitely less user friendly than the iOS or Android selector that appears on the screen when you click on a normal dropdown.

3. I agree, you need another set of CSS rules to style nameboxes since they are not normal dropdowns.

4. Even for a single choice, they make a lot of sense.
When you have 4 levels of categories and a few thousands of categories, even if you have to select only one of them, it's not possible to use a dropdown for that.
First, over a few tens of elements in a dropdown, the loading time will be slower, and over a few hundreds, it's likely that the page processing will crash. The only solution left besides nameboxes is to use selection popups like we had before. The problem is that Joomla templates don't play well with popups and one third of the time, the popups won't work properly by default because of some javascript or CSS issue with the template. It's a real pain on our end to support that.
Second, it's not possible to properly represent a tree structure in a dropdown. Joomla has done it with ACL dropdowns but you can't expand/reduce the branches of the tree and thus it's a pain to use such dropdowns once the tree has more than a few elements as you always wonder where you are in the tree when using the dropdown.
Third, when you have a big tree of elements, or just a lot of elements, it takes a lot of time to go through the list of the dropdown. With a namebox, you can type a few letters and you get the matching elements and can just click on them. It's a hell of a lot faster.
Fourth, some studies even show that native dropdowns can decrease the usability on mobile devices over custom built dropdowns (like the namebox system we have): baymard.com/blog/mobile-dropdown-navigation
So even if I agree with you, it seems that the average Joe will prefer a namebox over a dropdown in average.

The only case where a dropdown makes more sense than a namebox is when you have only one selection to do and when you only have a few elements to do that selection from. It's maybe the case on your website, but in most cases, this doesn't apply to categories and brands so I don't see a good enough case to change that in HikaShop or HikaMarket.
As far as I can see, the benefits of nameboxes (tree support, unlimited number of elements, no slow downs of the loading of pages, easy search, less issues with third parties) clearly outweigh the drawbacks (require additional CSS to style it if you want to, less friendly than plain dropdowns on mobile devices for some people).

To replace the namebox of the brand selection by a dropdown, you can edit the file "form" of the view "productmarket" via the menu Display>Views and change the code:

<?php
		echo $this->nameboxType->display(
			'data[product][product_manufacturer_id]',
			(int)@$this->product->product_manufacturer_id,
			hikamarketNameboxType::NAMEBOX_SINGLE,
			'brand',
			array(
				'delete' => true,
				'default_text' => '<em>'.JText::_('HIKA_NONE').'</em>',
			)
		);
					?>
by:
<?php
$manufacturerType = hikashop_get('type.categorysub');
$manufacturerType->type='manufacturer';
$manufacturerType->field='category_id';
echo $manufacturerType->display('data[product][product_manufacturer_id]',@$this->product->product_manufacturer_id);
?>

The following user(s) said Thank You: lousyfool

Please Log in or Create an account to join the conversation.

  • Posts: 2128
  • Thank you received: 732
  • Hikashop Business
6 years 11 months ago #208192

Hi Jerome,
Hi Nicolas,

Thank you so much for taking the time to write another detailed response.

1. I'll be dealing with not 100 but several hundred brands. Enable the Chosen library, and you get a search field on top of the dropdown - the only exception being the iPhone where Chosen dropdowns don't work and fall back to regular. So, except for iPhones no issue with that, average Joe = happy... just don't use an iPhone... B)

4. A lot of truth in what you're saying, at least for multiple levels and multiple choices!
Agreed, for a massive tree of "4 levels of categories and a few thousands of categories" the regular (multiple) dropdown - Chosen or not - is not practical, lol. In my case, for product categories I'm looking here at 4 main categories, 8-15 categories on 2nd level, and 0-8 categories on 3rd level. A total of around 100 across all levels. Enough to think about it carefully, and sure, using the namebox system has its merits for complex structures and multiple selections.
For my reasons #1-3 plus the article you kindly linked to I'm still dreaming of a something else, perhaps similar to a dropdown in multi-level menus, or accordion. But then... maybe I'm just dreaming, haha...
Alternatively, the very next thing I can think of is the zone selection as you guys are doing it for countries and states in registration/addresses: basically conditional selects, a second dropdown loads and can be opened depending on the choice in the first. Ok, different purpose, and the user still can't see all available choices at once (tree), but could be worth considering for categories as well? Or not...

Funnily, my vendors won't even have to deal with categories - it'll be unchecked in the ACL... for completely different reasons. But one day in the future it shall be enabled, and I guess I'm already thinking about it...

However, "brand" is always only a single level - unless HikaShop decided to allow "grouping" of brands in main/sub level style. And it's always only a single choice (again, this making good sense, and even in a namebox only a single one is allowed). So, many thanks for the code snippet. Using it now for brands (with Chosen), and of course, it works as intended!

All this said and done, probably end the thread here - if everyone else is happy with the nameboxes, then that's good, no need for you to spend/waste more time on it, and I'll keep dreaming, hehe!


Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )
Last edit: 6 years 11 months ago by lousyfool. Reason: "Hi ........." ;)

Please Log in or Create an account to join the conversation.

  • Posts: 75924
  • Thank you received: 11857
  • MODERATOR
6 years 11 months ago #208213

Hi,

Several dynamic dropdowns could be an alternative to a namebox, but on the look and feel side, I don't really like it. And on the usability side, several dropdowns can mean a lot of clicks comparing to a namebox where you can just enter the name of what you want regardless of the level where it's at.
So I'm still for a namebox.
Thank you for your feedback anyway, it's interesting to get those. We can't promise that we'll change it though, but it's great to ponder on such ideas and see what other people think about our choices.

The following user(s) said Thank You: lousyfool

Please Log in or Create an account to join the conversation.

Moderators: Obsidev
Time to create page: 0.060 seconds
Powered by Kunena Forum