News:

Support the VirtueMart project and become a member

Main Menu

30 notes and suggestions...

Started by iWim, July 19, 2021, 12:03:16 PM

Previous topic - Next topic

iWim

It had been a while since I created a new webshop.
While I was working on it I decided to write down all the suggestions and a few bugs I noticed...

Some may relate to the new admin, some in general.

In no particular order:

0. New Admin (beta)
First off: I like it a lot.
And I know it's still a beta it is being worked on.

1. More contrast for required input fields
See input field for product name. It has a yellow-ish border over white background.
I know the first input field is the product name, but because of my bad eyes and the use of a yellow border I sometimes miss that field and enter the name in the SKU field.

2. More contrast for buttons
White buttons on white background makes them harder to find.
Inverting the colors would make them stand out more.

3. More contrast for headings of sections
Similar to buttons.
My suggestion either add background or give it a (thick) bottom border. Somewhat similar to what tabs have.
So it's easier to see that you're now in a different section on the page.

4. Make table headings lowercase
Saves space.

5. Filtering is not working as expected
When I want to filter the product list (i.e. Only parent) I need to click the magnifying glass next to the search field for it to filter. The clear-button (X) seems to only work for the search box.
To clear 'Only parent' I need to set it to 'Please select' and then I can use the X (or magnifying glass)...
Please look at Joomla's Search tools for inspiration.

6. Make table headings shorter
I don't believe headings in a listview need to be that descriptive.
I know I can change the language overrides, but still...
Product is children of  = Parent
Product has children? = # children
Media file      = Media
Product SKU   = SKU
Product Price   = Price
Product Category  = Category
Manufacturers   = Manufacturers
Shopper reviews = Reviews
On featured   = Featured

7. Move Calculate the costprice checkbox
Currently it's behind the Override input field, which, for new people, may look as if it belongs to that field.
Also in beta on small screens it looks even worse!
My suggestion is to move it between final price and Override on its own line.

8. Price section on small screens is a mess!
That's the beta...

9. Turn the override options into a dropdown
Like the Apply rules dropdowns for other prices.

10. Give date range at price a label
Currently you only see -never- -never-
My suggesties would be
"Available from"
-Always- to -Always-

11. Stay in parent when Adding or Editing Child products
When clicking the Add Child product button or an existing child in the parent/custom field you leave the parent product. And on (Save &) Close you do not return to the parent, but to the products list.
My suggestion is to open the child product in a modal popup. Similar to how we can add and edit an article during the creation or edit of a menu-item in Joomla.
This saves time: you can continue to work on the parent after creating the child without having to search for it in the product list.

12. Always display a list of child products in the parent
I'm not sure why in one parent children are displayed and in others they are not.
I believe children created through the Multi Variant field don't display.
The other way around does work. Children created differently will display in the Multi Variant Field

13. Child products should also display the parent name/sku, not just its ID
A name makes much more sense.
Also instead of entering a product ID a button Choose parent, with a modal where you can search and select a parent works much easier.

14. Product dimentions & weight has the same heading as Product status...
My guess it's the beta as the current template has no heading for D&W.

15. Product images
Yes, there is a search, but then you need to know the name of the image.
My suggestion when clicking on the Select a file button a modal displays all the files from the Media files and you can either search/select an existing file from the Media files or upload a new file.
Multi upload/select would be nice too.

16. Rearranging the images
You should be able to rearrange an image by simply click&drag.
Yes, it works, but it also displays the full image when you let go of the mouse.
Yes, there is a button to drag and not display the full image.
But there is also a button to display the full image instead of just clicking on it.
I'm not sure how, but it would be nice if simply clicking displays the full image and clicking&dragging does not.

17. Custom label in custom fields
Sometimes you want to change the way an option in the shop is displayed. Say from a list to buttons. You can't change the custom field type, but you can't use the same name either.
So you need to be creative and give them a name like i.e. "Colour" and "Choose colour".

What if you could use custom fields names like Colour (list), Colour (buttons) or Colour (old - do not use!) and give them all a label of "Colour".

18. Move (filtering) under the search tools button
Similar to Joomla, saves space
Also be inspired how Joomla filters look and work...

19. Give filters a descriptive name
"All"                 = "Select status"
"Please select"  = "Filter product"

20. Move some toolbar buttons under the Action button
Similar to Joomla 4.
Like Clone product, Clone product tree, Add rating, Publish, Unpublish, Delete

21. Remove Edit and Permissions button

22. Move Permissions link to Configuration

23. Move Bulk assosciate ... buttons into Batch
Similar to J3/4.

24. Return to Inventory list after saving a product when you opened it from Inventory
Or better yet edit inventory directly on the inventory list.

25. Show if product has/is child(ren) in Inventory

26. Pressing the Bulk buttons changes the new template to the old admin template

27. Rearrange the toolbar buttons to be more in line with Joomla
Save | Save & Close | Clone product | Child product | Add rating | Cancel
New | Child product | Actions

28. Color the toolbar buttons more in line with Joomla
Child product and Bulk assosciate should not be green.

29. Toolbar from Coupon list displays on coupon edit screen
So there are 2 toolbars!

I am happy to be back though  8) :P

Regards,
Wim

Milbo

Thank you very much, iWim.
a lot good suggestions, I started with some

Quote from: iWim on July 19, 2021, 12:03:16 PM
1. More contrast for required input fields
See input field for product name. It has a yellow-ish border over white background.
I know the first input field is the product name, but because of my bad eyes and the use of a yellow border I sometimes miss that field and enter the name in the SKU field.
Changed in the new admin template to #46a546 is the green of the buttons.

Quote from: iWim on July 19, 2021, 12:03:16 PM
2. More contrast for buttons
White buttons on white background makes them harder to find.
Inverting the colors would make them stand out more.
Changed to the dark blue of Isis template, hover use the vm blue and white for the font now

Quote from: iWim on July 19, 2021, 12:03:16 PM
3. More contrast for headings of sections
Similar to buttons.
My suggestion either add background or give it a (thick) bottom border. Somewhat similar to what tabs have.
So it's easier to see that you're now in a different section on the page.

Darker now

more tomorrow
Should I fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

Andrew Smith

#2
I'd like to suggest a rearranging of the toolbar buttons in the template part where you add and edit products (VM --> PRODUCTS --> Products).  As part of building a site I've been spending a bit of time here of late.

I'd like to see a rearrangement of the order to New | Edit  |  Publish  |  Unpublish  | Child product | Clone Product  |  Clone Product Tree  |  Bulk Ass. Categories  |  Bulk Ass. shoppergroups  |  Add rating |  Delete | Permissions

My reasoning for this is as follows:

1.  The buttons the average user will use the most are to the left and you don't have to move the mouse far to click and use.  I believe this 'shortest movement possible' is a productivity consideration when it comes to the design of a user interface.  New, edit, publish & unpublish will definitely be the case here, and likely to be the most used, then Clone Product.  Cloning a product tree I haven't used yet, and I suspect the bulk association functions would only be used for larger and more complicated sites.  Delete is kept to the far right for safety :-), and Permissions I would anticipate having rare usage.

2.  This would also give us the same button order (or hierarchy?) as Joomla itself.  My point here is that VirtueMart is something that integrates seamlessly with Joomla and users of Joomla would have an existing understanding / expectation / 'muscle memory' of where certain buttons are.  It's good to be consistent with Joomla's interface.

I've attached a screen shot of two button sets.  The upper one is from the Articles section in Joomla's admin, and the second is from VirtueMart's Products page where I have used Photoshop to show how I envisage a rearranged button set to look.  (I figure it's best to offer a solution rather than just complain, give or take my complete inability to do programming.)  On this image I've also drawn some arrows to show the similarities in button order between Joomla's standard and what I am proposing.

I do hope this makes sense.  I'm still new to using VM and there could be a difference in what order buttons are most used that I'm unaware of.  Similarly, I'm bringing attention to things that seem odd and I haven't learnt to put up with them yet.  :-P  Looking forward to your thoughts.

Andrew

alatak

Hello

Quote from: iWim on July 19, 2021, 12:03:16 PM

15. Product images
Yes, there is a search, but then you need to know the name of the image.

The image search is like before: type "space" and it displays all the images.
Yes, I agree, you need to know the trick.
Adding a tooltip would be nice.

Quote from: iWim on July 19, 2021, 12:03:16 PM
16. Rearranging the images
You should be able to rearrange an image by simply click&drag.
Yes, it works, but it also displays the full image when you let go of the mouse.
I do not have this effect myself.

iWim

@alatak Just did a re-check.
It happens in Firefox (on MacOS 10.15): drag & drop = move + show full image
Safari works as expected: drag & drop = move

Quote from: alatak on July 29, 2021, 08:37:59 AMtype "space" and it displays all the images.
Yes, I agree, you need to know the trick.
Hah, learned something new today...