UX: Colors for (CRUD) buttons

[pavoltanuska]

All the buttons in the list view are using btn-primary or btn-default classes.

I think the colors can help the UX semantics here, the same way it's done on create/edit form for submit/cancel buttons.

E.g.:

• create button - btn-success
• delete button - btn-danger
• edit button - here I'm not sure, either leave it be or make it btn-warning

It could also be configurable in config/backpack/crud.php with for example 'use_colored_buttons' => true/false variable.

I know this could be achieved by overriding the default views with my own, I'm just offering my help (PR included) in case you decide this is something worth being in the CRUD package by default.

[tabacitu]

Hi @pavoltanuska ,

I understand what you're saying, I've tried it myself for a project because it sounded like a good idea to me too. And I had exactly the same color importance in mind, so I guess we think alike :-)

During that project I've discovered that it's not a great idea to make the line buttons so colorful, because it places focus on the buttons, rather than the information. So it's establishing a visual hierarchy where we, as developers, specify: these are the most important features in the UI, in this order - delete, edit and create. And that might not be true for every admin, every time they access the table view. And it might be different from CRUD to CRUD. Sometimes the admin might come in to search. Other times to reorder. And in those times, the colors will just tell them "look at me" when they actually want to be looking somewhere else. It's visual hierarchy taken too far and it might become bothersome. That's why, at the time, I decided to keep the colors on the create/edit/reorder screens and NOT keep the colors in the table view. Since on those screens the save action definitely is the most important one, no doubt about it.

Now I think this visual hierarchy issue might be because the colors are so damn powerful. But then again, having them so powerful does help in a lot of other places. And introducing new colors that are less obvious is bad practice - there are already enough colors as it is. Sorry for taking you through my entire thought process, but it just wanted to show you I've considered it again.

I'm not hell-bent on this - if there is enough support behind this we'll do it, but for now I'd stick to my previous decision to leave them as btn-default, sorry.

Anyone else - opinions?

[OwenMelbz]

I do tend to add colours, but agreed that too many colours can be distracting.

Using Github as an example, the section here only has 1 coloured button to show the primary function, everything else is pretty subtle

Same for amazons checkout, only the primary function is styled differently

And twitter, all the less important call to actions are subtle, then the main one is styled/coloured

FINALLYYYYY

I guess you start to see a trend between this big/high profile sites and the way they handle call to actions is all quite similar

So yeah, some colour will be good, but I think only for the primary action, anything else should be pretty subtle

[pavoltanuska]

@tabacitu no reason to be sorry, your explanation actually makes sense. Abusing the colors could indeed lead to admin interface looking like a bad trip to the circus.

@OwenMelbz wow, you put quite some effort into the research, big props! Having said that, I think only the Gmail example is really applicable here, as the other examples are too specific. Not that it makes your point any less valid!

• Github issue - if you've already opened that page, commenting is the most probable action
• Amazon - e-commerce site should always try to funnel you to the "Buy ASAP" option, thus highlighting any other option would be contraproductive, businesswise.
• Twitter - you're on the "timeline"/"main page" so the important content is right before your eyes. Other sensible action is to "tweet", so they're highlighting that. On the other hand, you have no
  Messages or Notifications. If that was the case, that sections would actually be highlighted (with (I think?) a red notification badge) and you would be funneled to interact there.

And then there's Gmail - you're 100% correct here, "Composing" the message is the priority and the secondary action buttons (Delete, Archive) should take no precedence among themselves, as they are on the same functionality level. (What caught my eye is that you have only text in the buttons, no icons. I find icons easier to navigate the site visually, the text only buttons look annoyingly same to me :) )

I'll rest my case about the secondary CRUD buttons here.

I'm still not sure about the main "+ Add" button. On one hand, it's styled with btn-primary and not btn-default, therefore it's kind of prominent. On the other one, making it btn-success could add some more meaning to it.
But that's probably just nitpicking and I can live with that :)

Anyway, thank you both for your input, I appreciate it!

[tabacitu]

:-) Great to hear that. Wonderful work, @OwenMelbz .