General ThirtyBees Back Office UX improvements

[RaptorX]

There has been some things that I have noticed PS has done in a way that defies logic and while these are not bugs I qualify them as minor UX nuances that I am not sure if I am the only one that sees them, say for example:

Why on earth are the "bulk actions" always at the freaking bottom of the list?! This is specially annoying when for example you set up the list to be 1000 products EDIT: think of all other lists in the program, not just products... most software I use has this at the top (where the search options are) because thats the most logical place to put it...

Also when creating a product you must add images to a product before creating combinations, but for some odd reason here the combinations tab is before the images... talk about UX design!

On the same product creation page I would say that the best would be to put all required fields in one tab, and all the optional stuff separated in other tabs as it is at the moment.

Are there reasons why is it like that? Is it possible to change those at some point?

I admit it, those are really tiny things but overall I feel that they add up.

[zimmer-media]

Hello RaptorX.

~~At first I hope from a communtiy perspective that I do not think so alone. Suggestions and improvements are welcome.~~

~~I do not know what you expect in total. Here, a "new" shop system is built, in which, in my view, the priority of eliminating the bugs of PS has absolute priority.~~

~~"Mass actions" change - hmmm, at 1000 .... products with once disable or delete? Why? Do you sell dubiously?~~

~~At the end of the list I think it is best if I filter and eg only want to have 50 products per page, I may want to be able to exclude some items. So I read from top to bottom and not from bottom to top.~~

~~When creating products, I have never heard of problems in which only a product image must be added !!! And incidentally, to sell products without images, who buys products without the product before at least as a picture to have seen?~~

~~When creating the products, it is ok from my point of view with the tabs for the specific information, whether they are optional or not. It does not make sense for me to create products where I constantly have to scroll the page to see what needs to be entered into the data - I think the whole lot of factual with tabs, especially with different information.~~

~~Why should you change everything at once when you are used to so much?~~

~~I do not want to upset or scare anyone here, but this shop system is free ecommerce. I think if you expect more you should pay the programmers and their work.~~

EDIT: Revised by the account holder. A now former team member wrote at the time with my account and without my consent.

[RaptorX]

I think you missed both my points.

In general i dont think things should change at once.

Regarding the bulk actions I set the example at 1000 products because some people here do sell like that but Im not talking only about products, you can find the bulk actions button in many screens:

not sure if you had to scroll to see those two arrows I just pointed but some people have to scroll every single time they have to work with: many products, many modules, many zones, many lists... it gets tiring, specially if you setup a lot of stores for other people... just saying.

Is funny how you have to always scroll down if you want to perform an action in many items (say disabling a lot of modules that you dont use... or enabling them)... heck just selecting them all!!

When creating products, I have never heard of problems in which only a product image must be added

That is exactly my point, but it seems you missed what I meant...

The order of which you have to click to add a product is weird... if you have to always add pictures before making a combination, why the heck is the tab below it? :P

I never said to cram EVERYTING in to one tab... that would be stupid.

I said everything that is required should go in one tab... is just simple and plain logic. :)

[zimmer-media]

~~My English is not the best. Therefore, it may happen that I understand some things wrong.~~

~~from my point of view, that's perfectly alright. The examples are bad, do I have to constantly change this data in mass processing? But I think that the filter functions of the shop are not properly understood by you. Filter the countries, eg by continent or region, etc. Filter products by categories or by quantity, etc. Even if I want to do a list of modules or mass-production products, I'll start up and work down. I do not want to disable a module or country that I do not want. Therefore, I read from top to bottom and then use the mass processing. Otherwise I have to scroll from the bottom up again. Uppps.~~

~~The order of the tabs for pictures and combination, ok that would be logical.~~

EDIT: Revised by the account holder. A now former team member wrote at the time with my account and without my consent.

[RaptorX]

Therefore, I read from top to bottom and then use the mass processing

okay... if you read from top to bottom then the bulk actions button should be on the top... i think that is the logic I am trying to explain but you keep saying that my example is incorrect.

Yes, I can "filter" information, I understand that... but some times, even when I filter information I have to scroll to get to the bottom to hit: "Bulk actions > Select all" which is nonsense... If I want to select all I shouldnt have to scroll.

And is not just my opinion... almost every software out there is like that for a reason. :)

[dynambee]

I agree, it makes sense to have the bulk actions at both the top and the bottom of a list. Sometimes you need to look through the data before deciding what to do, other times you already know what you want to do and just need a way to do it quickly. Since the bulk actions are there to help people do things quickly it seems odd to make changes that result in quick actions taking longer. There have actually been examples where I thought bulk actions weren't supported on 30bz because there was no indication of the bulk actions at the top of the list. Only after scrolling down, clicking each item in the list, did I find the bulk actions at the bottom. That's bad UX.

I think there are some other UX issues with 30bz as well. For example, during the checkout process all (almost all?) the buttons are "30bz yellow". With PS this wasn't the case, they colored the "proceed to next step" buttons green but the "update", "edit", "add", etc buttons were a different color. This makes it very easy for the user to see quickly which button to click to go to the next step. When all the buttons are the same color it defeats one of the great UX reasons for using color -- to help users tell one type of thing from another.

[RaptorX]

other times you already know what you want to do and just need a way to do it quickly.

I guess you nailed it.

That is what I mean: many times I know exactly what I came to do on that page, I just want to do it quickly.

Probably @zimmer-media means that he had to read first and then select or do something but many times that is not the case.

E.g.: I filter all products to have just all the watches and want to disable them temporarily because I will do something pricewise and don't want orders coming in for watches in the mean time.

That should be easy to do.

[Pedalman]

Hi Raptor,

I agree with your points. And by chance, I had altered the issue with the button at bottom myself. I use an product export/listing module that list all! products in csv style and at the very bottom there you will find the "action" button (to regenerate the list).... Very annoying and something that made me think.... I am no coder. I am very sorry about that and I would really like to learn (vote for video tutorial section here on TB. Looking live over Lesley's and Michael's shoulder. ;) But I think I am an UX guy if there is something like that :)

Anyhow, I hit the "inspect" button (F12) in my browser and looked for the CSS of the button. Found it and made a text-search for the more or less unique CSS in the modules folder and found nothing. Then I searched the admin theme folder and voila. Module's css is based on admin theme. So, coming back to your request. I just edited the tpl in question (actually I only copied the button code that was wrapped in a DIV at the top where I needed it)... Perhaps you can do that too.

More on UX BO improvements: I would like to have the option to "live" arrange the sections in /bo/orders. Changing the responsive width and height and position in an order the shop owner/user likes. I think this is something that is overdue and needs to be added to TB as Prestashop alike.

[alwayspaws]

@RaptorX Thanks for bringing this up. Having the buttons at the top would save a lot of scrolling and would make for a better UX.

@Pedalman

I just edited the tpl in question (actually I only copied the button code that was wrapped in a DIV at the top where I needed it)…

Did you only change one page? I especially want it on the products page, but wonder if I can also add it to the images pages to bulk delete images. Any ideas?

[zimmer-media]

bulk action on top I have copied the corresponding code from the file listfooter.tpl and inserted it in the file listheader.tpl. Path: / your-adminfolder / themes / default / template / helpers / list /

<div class="col-lg-6"> {if $bulk_actions && $has_bulk_actions} <div class="btn-group bulk-actions dropup"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> {l s='Bulk actions'} <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="#" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), '{$list_id}Box[]', true);return false;"> <i class="icon-check-sign"></i>&nbsp;{l s='Select all'} </a> </li> <li> <a href="#" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), '{$list_id}Box[]', false);return false;"> <i class="icon-check-empty"></i>&nbsp;{l s='Unselect all'} </a> </li> <li class="divider"></li> {foreach $bulk_actions as $key => $params} <li{if $params.text == 'divider'} class="divider"{/if}> {if $params.text != 'divider'} <a href="#" onclick="{if isset($params.confirm)}if (confirm('{$params.confirm}')){/if}sendBulkAction($(this).closest('form').get(0), 'submitBulk{$key}{$table}');"> {if isset($params.icon)}<i class="{$params.icon}"></i>{/if}&nbsp;{$params.text} </a> {/if} </li> {/foreach} </ul> </div> {/if} </div> i insert the code for (approx. line 245)

{block name="preTable"}{/block}

the new file: (rename it to "list_header.tpl") 01512660075637list_header.tpl

result:

EDIT: At the moment I have not looked in which path the file should be stored in the overrides.

[zimmer-media]

@raptorx said in General ThirtyBees Back Office UX improvements:

That is exactly my point, but it seems you missed what I meant...

The order of which you have to click to add a product is weird... if you have to always add pictures before making a combination, why the heck is the tab below it? :P

I never said to cram EVERYTING in to one tab... that would be stupid.

I said everything that is required should go in one tab... is just simple and plain logic. :)

To change the order of the product tabs, you can do that in the file controllers / admin / AdminProductsController.php

Find the code:

``` $this->availabletabs = ['Quantities' => 6, 'Warehouses' => 14]; if ($this->context->shop->getContext() != Shop::CONTEXTGROUP) { $this->availabletabs = arraymerge( $this->available_tabs, [ 'Informations' => 0, 'Pack' => 7, 'VirtualProduct' => 8, 'Prices' => 1, 'Seo' => 2, 'Associations' => 3, 'Images' => 9, 'Shipping' => 4, 'Combinations' => 5, 'Features' => 10, 'Customization' => 11, 'Attachments' => 12, 'Suppliers' => 13, ] ); }

```

and you can completely customize the tab order for your needs. Whereby it would be useful to have the tab for the pictures above the tab combination. If necessary, save the file in the override.

[zimmer-media]

@raptorx said in General ThirtyBees Back Office UX improvements:

E.g.: I filter all products to have just all the watches and want to disable them temporarily because I will do something pricewise and don’t want orders coming in for watches in the mean time.

For a probably faster processing of the prices I use the mass editor tool of @musicmaster. At this time I do not need to disable any articles. For example, I use this tool to filter a desired category and select the necessary data, eg product ID, title, article number and sales price. Afterwards I export the data into a CSV file and can change these eg by Excel and formulas prices. No matter if the price should increase by 0,50 € or 5%. After processing the file, I import the file normally via the BO.

From my experience, you can also make wonderful mass changes with this tool. Not all features are available in the free version, but a very large part is open and it has saved us a lot of work time here.

This is just a suggestion to make any work easier.