Solidus admin branding

[Mandily]

Because we’ll be touching UI elements in every issue, I’d like to go ahead and change the branding now instead of later down the road. Doing it now should cut down on multiple UI touchpoints that would be required if we made something fit the blue and green design now, and then had to readjust layout spacing to fit an updated brand.

The blue and green colour colour palette is a bit dated and unintuitive in how interactive elements are identified. I’d like to restyle the admin with an all over grey colour palette with purposeful hits of a slightly deeper blue. This shade of blue gives a better sense of solidness and weight than the medium hued colour currently being used. The cool grey palette will help unify the UI and make it easier to look at for long periods of time.

The mockup below was put together so that all UI elements could be contained to one page. Please ignore the actual content (ie navigation structure, button labels) at this point.

Features of this design include:

• Dark left navigation for maximum contrast between it and the content area. This will make it easier for the user to focus on the content in the middle of the screen.
• White header area so that users can upload logos with white backgrounds.
• Primary buttons like ‘create a new product’ are blue, secondary buttons like ‘export list’ are grey to give hierarchy to page functions.
• Active/current page colours in the navigation to reinforce the user’s location
• Hover/focus colours for every interactive element
• Grey content background to allow content areas to be grouped in white boxes on top.
• Intuitive success, warning and error messaging colours that fit in with the new palette
• Change of font to title/sentence casing, Open Sans, 12px site-wide with a few exceptions on font size for titles.
• Table cells that are left aligned for regular text, right aligned for prices
• Three states for sorting functions: unsorted, ascending, descending (currently only ascending and descending are used)
• Moving the ‘loading’ box, and message area to a sticky footer
• Removal of icons from buttons
• Label cleanup across page titles and buttons so that they’re consistent across the app

Please let me know your thoughts about the updates. I’m also curious to know how people feel about including the last four bullets in this issue.

[andremleblanc]

OMG it looks a billion times better 👍

[tvdeyen]

Wow, @Mandily!

First of all this is a big improvement! Thanks for your work.

Really appreciate that the admin UI is finally addressed in Spree/Solidus 😍

My two cents:

• I like the idea of using less prominent colors, especially for the main menu. But, I don't like this overall dark look of this. For us "nerds" this is ok, but the majority of our users aren't and like more light colors. I would love to see another version with lighter grays. (And it looks too much like Wordpress _cough)_
• The blue color palette is little bit to "cold" for my eyes. Although blue is the color of trust and solidness (that's why lots of banks uses blue colors), we should try something else. For me, I love the golden touch of the Solidus logo for instance. Maybe we could try a golden palette? (Solidus => money => Gold, get it? ^^)_
• I think buttons that cause an action like "create" or "delete" should look like it. So blue is not the best option here IMO, especially with the overall blue color palette. Maybe the obvious ones (green and red) would be something we could try here, don't know.
• The rounded corners of the UI elements look a bit too nice / cute for such an solid peace of software. As I don't promote complete sharp edges, I would try to reduce the rounding a little bit.
• The rest is great. I like the content area and the sticky footer (the pagination should be sticky too)

Because it is not purpose of your mockup, I say it here: WE NEED TO CHANGE THE ICONS! They don't fit the overall vision of an solid and mayor e commerce software.

Like I said above. Very great work!

Thanks

❤️

[mamhoff]

Also really like it!

I like the dark menu, and I think it does give a good contrast to the main area. We're also used to slate-gray menu backgrounds from our mobile devices, so people will get it nicely.

I'm fine with the color palette. Gold is a tough color to nuance, and brown would be... brown. I think if people care a lot, there might be a PR to make that configurable, but really: Blue is good. If more elements can be distinguished via shades of grey, I wouldn't even mind...

I agree with @tvdeyen that the action buttons should be signal their actions (green for creation, red for deletion).

All in all, this is amazing work. Thank you @Mandily!

[ghost]

I would agree that this is a huge improvement. I don't mind the dark/cold nature of the design, and actually think it's a much more professional looking interface. It definitely has a strong Wordpress feel, but I wouldn't try to reinvent the wheel, just to make a more distinct separation.

In terms of the last 4 bullet points, I think they all make sense and would be great additions.

[Mandily]

@tvdeyen Changing the icons means using something other than Font Awesome. Font Awesome makes it easy for others to add new menu items, search for an icon on the cheatsheet and stick it in, so I'd be a bit worried about the extensibility of that.

I don't generally like using icons with text because it's redundant, but in this case I've got a future feature that collapses the menu to something smaller that is managed with each menu item's icon.

That being said, I'm still open to conversation about it if others see value in replacing or removing them altogether. I just want to make sure we do what's best for the most amount of users.

I don't want to blindly follow what everyone else is doing, but at some point it's good to consider that they've figured some things out along the way and we should use their learnings ourselves. For those of you who haven't seen Shopify (ecommerce) and Stitch (inventory management), They also use a darker navigation panel and light content area.

[Mandily]

I just had a good conversation with @stewart about the message area sticking to the bottom of the screen and wanted to share here with the rest of the folks inGitHub.

Currently it's stuck to the top of the page. I see that as a hindrance in getting to the navigation and action buttons that are up there. We also considered adding it under that bar/to the top of the page content, but that moves content up and down as it's displayed/removed, which is an extra bit of friction that I didn't want to deal with.

The best option was sticking it to the bottom of the page, where it would cover content, but not functionality and not adjust layout. Because our admin users are regular users of the app, I don't see a problem in the minimal amount of 'training' it would take to remember to look down instead of up. I suspect unless they see a flash of red, they wouldn't give a second thought to it anyway. As @stewart also pointed out, the translucence of the background also helps to remind users that it's temporary and content is behind.

[tvdeyen]

@Mandily there are lots of great other icon libraries out there. But I totally agree, that this will be too much of a change for now.

You're Shopify and Stich examples clearly show, that a dark menu is the way to go (for good reasons). So I just thought more like a "branding", then a redesign here. But nevermind.
I'm all in. Let's not reinvent the wheel.

For the bottom aligned sticky notification I'm totally fine with. Maybe, you could consider a more Growl / OS X Notification center like approach floating on the top right. That's what we did in AlchemyCMS and since lots of users are used to it, it could be an option.

But it's jut notifications and like you already said, people won't notice them unlike they're red.

But, I think the "wait, something important is happening"-JS-progress-spinner-thingy should be more prominent and in best case, prevent the user from clicking anything. So maybe makin it a full screen overlay would be an option? Like, you guessed it, we did in AlchemyCMS:

PS: Sorry, for these shameless plugs, but I thought a lot of admin user interfaces in the last couple of years and just want to share my experience here.

[Sinetheta]

@tvdeyen my concern with a blocking spinner is that not all interactions which could trigger this loading state result in a page that a user shouldn't interact with.

Literally any ajax for any reason https://github.com/solidusio/solidus/blob/master/backend/app/assets/javascripts/spree/backend/progress.coffee will cause this thing to pop up. So if anything I would like to see it become less prominent (eg the admittedly overplayed http://ricostacruz.com/nprogress/ ) rather than more disruptive.

[jhawthorn]

@tvdeyen my concern with a blocking spinner is that not all interactions which could trigger this loading state result in a page that a user shouldn't interact with.

Literally any ajax for any reason https://github.com/solidusio/solidus/blob/master/backend/app/assets/javascripts/spree/backend/progress.coffee will cause this thing to pop up. So if anything I would like to see it become less prominent (eg the admittedly overplayed http://ricostacruz.com/nprogress/ ) rather than more disruptive.

This has gotten off topic, especially since this change is being made in #509, not here. Can we move discussion to that issue, and keep this issue to font, colour, and other style issues Amanda has proposed?

[davekiss]

IMHO, input labels and content area tabs could use a little bit of hierarchy, but overall, this is a huge improvement! Also, I know people love to hate WordPress, but maybe it isn't so bad of a thing that the ubiquity of a familiar UI has an influence here if there is a chance that admins might already be familiar with that system (I know in my case they would feel right at home)

Have to agree about the blues being cold and the buttons missing "action" colors, as mentioned above.

[Mandily]

So I'm currently envisioning three different button types:

1. primary - blue - examples: new product, add rule, save, search
2. secondary - blue inverted (white bg) - examples: download promo code list, cancel (used for cancel when the primary interaction would be creating something. If the user was on a page to specifically cancel an order it would be a primary button)
3. negative action - red - examples: delete (although right now this is an icon, so not applicable)

I'm not sure I understand how other action types could be colour coded. Can anyone give some concrete examples?

[tvdeyen]

Like that. But still think there is a difference in "primary" and "positive" actions.

"Add" and "New" are more like primary, but "Save" / "Update" are definitely very positiv actions and could be look like one, so green.

What do you think?

[Mandily]

We're talking about two different models of styling our content. I'm proposing a model where we emphasize the most likely user path. What's being proposed by some others in this discussion is using a model where we colour code positive, neutral and negative actions.

I think highlighting the likely path is more effective than highlighting the outcome of the action. It breaks down for me when the likely path is considered a negative action. Say the user wants to delete something, and we show them a dialog to be extra sure because they can't undo it. Based on the colour model, both delete and cancel are red. It takes an extra moment (increasing cognitive load if you want to get geeky about it) to make a decision because the colour is interfering with the desired path.

We could combine the two models as shown in the third column below, which makes sense from a UX perspective, but I could argue visually doesn't look as nice as the blue. The blue fits in with the overall look and feel of the UI a little better, while anything red would be the things that stands out on the page. I could be more easily swayed on this one though if someone had a reason for it. I've included a quick screenshot of a form in the current UI as an example.

Thoughts?

[tvdeyen]

I can agree that red is not fitting into the appeal of the UI and really like the primary and secondary action being inverted blue.

The current UI has the action color code as hover state. What do you think about keeping that behavior? It would be a great compromise of both ideas and it's more subtitle.

BTW: As cancel is not a dangerous action IMO, I wouldn't color it red, but neutral/secondary.

[sukhchander]

@Mandily @bricesanchez i built a bootstrap based dashboard for my own 'version' of spree. it's functional but half complete. it's responsive. here are the screens. after forking spree last year i changed a bit of the internals as well as the UI. i shared the screens on the slack channel. sharing them here now. let me know if you'd like to use the functioning demo.

[cbrunsdon]

Thanks for sharing your screens @sukhchander, but unless you had a specific path to get anything concrete merged, I doubt we'd benefit from a code dump.

You're very welcome to break out any specific functionality and shoot PR's across on a case-by-case basis though, looks like there are definitely some improvements you've made to what is shown in different admin areas the project might benefit from.

[Mandily]

It's been a while since anything was said in this issue. I just wanted to update it with a note that we're still planning on releasing this in 1.4

[cbrunsdon]

Closing this as its not super actionable itself and is being looked after in other PR's and issues.