[UX] Improve the aesthetic & usability of the place-blocks page.

[jenlampton]

As I was working on Backdrop 1.4 and doing a lot of testing of layouts, I became bothered by the inconsistent colors and patterns on the place-blocks (configure layout) page. I love, love, love the new colors and design patterns we see on the modules page, cool blueish-grays and very few borders. I would love to see those colors and patterns applied to the layouts page. I made a few small color changes as part of Backdrop 1.4, but we can do better.

Here's layouts in Backdrop 1.3:

Here's the aesthetic I love about the modules page:

[klonos]

I know that we have intentionally removed the theme previews, but do you think that perhaps it's high time we re-introduced them?

You know what would be cool? ...a theme selector drop-down (top-right corner?) that would show the current layout in various themes. Then also a "edit selected theme" link that brings people to the page that @wesruv has designed in #1905 (comment)

[jenlampton]

Here's an attempt to soften things up, using rounded corners and grays from the modules page.

[jenlampton]

This one includes the draggable-handle so people know that blocks can be rearranged.

[quicksketch]

The addition of the Drag handles is great! That helps tremendously. Especially if you were on a touch device where you don't have the mouse-cursor to give indication.

[jenlampton]

The addition of the Drag handles is great! That helps tremendously. Especially if you were on a touch device where you don't have the mouse-cursor to give indication.

That's what I was thinking :)

I also tried one where the block content was gray instead of white for more contrast, but I'm not sure about this change:

[jenlampton]

And here's another I wasn't sure about, an attempt to de-emphasize the region name by making it gray instead of black:

[jenlampton]

A PR with all the grays is over at backdrop/backdrop#1434

[klonos]

Here's an attempt to soften things up, using rounded corners and grays from the modules page. ... I also tried one where the block content was gray instead of white for more contrast...

👍 looks much better IMO. Also 👍 on the rounded corners.

...an attempt to de-emphasize the region name by making it gray instead of black:

Big 👍 from me on this one. It really bothered me when I was scanning the place block pages that the regions had the same style as the block headers.

...about the drag handle addition. Neither hot nor cold. It does indicate dragability, but on the other hand we use that handler in table rows as the single point that activates the dragging. In the blocks case though, one can use the entire header for that. I don't mind it though.

[jenlampton]

we use that handler in table rows as the single point that activates the dragging

I considered this too, but in this case if people try to drag by only the handle it will still work. I think better some indication (even if it's too little) than none at all. I think we're at least moving in the right direction! baby steps :)

I would love to hear what others think about 1) the gray background color for block content, and 2) the gray region name text. @wesruv @dariusgarza @Graham-72 @docwilmot ?

[docwilmot]

The last one is best, for sure. Grey bg and grey text.

[wesruv]

we use that handler in table rows as the single point that activates the dragging.

This is a-ok from a UX perspective, great addition @jenlampton

I'm not a fan of the gray region text, wondering if stealing the fieldset title style would accomplish a similar purpose? It doesn't necessarily adjust it's visual hierarchy, but it will separate it visually. Which I think is what we need more than a change in visual dominance.

  text-transform: uppercase;
  font-size: (REM or EM that gets it to 14px or 16px);
  font-weight: normal;

[wesruv]

I think removing the rounded corners on the regions (not the blocks) might work even better, again just to differentiate them visually a little bit.

Re: theme selector/theme preview
How would this work? Ideally you'd see the page with actual content, but that might require a content id to render properly. If we have the block admin stuff appear in the theme that would mean every theme has to make sure block admin UI has styles.

We could try to think up a system to preview the site that covers the theme/style/layout settings pages. I think they all have similar issues and could be covered by one module, assuming we can get the functionality right.

[jenlampton]

We should create a separate issue for preview.
On Jun 5, 2016 9:58 AM, "wesruv" [email protected] wrote:

I think removing the rounded corners on the regions (not the blocks)
might work even better, again just to differentiate them visually a
little bit.

Re: theme selector/theme preview
How would this work? Ideally you'd see the page with actual content, but
that might require a content id to render properly. If we have the block
admin stuff appear in the theme that would mean every theme has to make
sure block admin UI has styles.

We could try to think up a system to preview the site that covers the
theme/style/layout settings pages. I think they all have similar issues and
could be covered by one module, assuming we can get the functionality right.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#1935 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AAYSR7JLAbAGIiapt1TfwSqp_7NNimHNks5qIwAzgaJpZM4IoCIr
.

[wesruv]

@jenlampton ^^ 😄

[jenlampton]

Thanks @wesruv :) I've squared off the corners of the drop-zones and it looks a lot bettter. I also added a drop-shadow behind each block, and made the region label text uppercase.

[klonos]

Love it! ...although I think that a 4px h-shadow instead of 0 would look better.

[jenlampton]

You are so right!
updated PR:

[olafgrabienski]

Very nice! Just one suggestion for the moment: the Sidebar region is very narrow, why not make it a little wider? I guess, Content and Sidebar could be displayed in a ratio of 2:1 or so.

[jenlampton]

Thanks for your feedback @olafgrabienski! :) The layout seen here is just a reflection of the front-end layout, and this one happens to be a 25% 75% division. Other layouts will be different, or this can be overridden in the theme.

[olafgrabienski]

Got it, thanks! As there is not so much horizontal space on the place-blocks page, might it be useful to define a min-width for the displayed regions?

[jenlampton]

Interesting, so even if the page is 75/25 on the front, we could do a 60/40 split on the back, or something? I wonder if that would get confusing with the more complicated layouts, like Simmons.

[klonos]

@jenlampton 1st frames are your version (with the blur), 2nd set of frames is again your version but with the blur removed and the shadow left at 4px, the last set of frames has no blur but also shadow reduced to 2px.

[wesruv]

@klonos I would try lightening up the color. I'd make it the border color or a smidge darker than the border color.

[klonos]

Here's my take with 2px, no blur and #ccc:

[olafgrabienski]

@jenlampton regarding blocks like the User Login block in a narrow context. (Instead of opening a new issue) I'd like to propose a small adjustment:

If there is too less space because of layout definitions (or when the admin page is visited on narrower screens), let's remove the float and the right alignment of the Configure link. There are still two lines, but they look less cluttered. To do that, I changed the CSS of my backdrop 1.4.2 site via Firebug as follows:

• removed float: right; from .layout-editor-block-title .buttons
• removed right: 0; from .js .dropbutton-widget

---

Further improvements for narrower screens could include (just some ideas):

• change the horizontal padding of .layout-editor-block-title to 0.5em
• remove text-transform: uppercase; from js .dropbutton a
• add a span element to the Configure link to save space:
  • <li class="configure"><a>Config<span>ure</span></a></li>
  • add .js .dropbutton li.configure span { display: none; }

Well, I guess the responsive design of the place blocks page would indeed be a separate issue - have you discussed it already anywhere?

[klonos]

@olafgrabienski there are better ways to chop text (https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden) but no matter how much we chop button labels, we'll still have issues with them. Especially in languages that use long words. A much better option IMO would be to be replacing the text with icon fonts (#364) when the viewport gets narrow. Icons can still have text, which is a big + for people using screen readers.

[olafgrabienski]

@klonos Yes, I imagined that there were better ways. (Thanks for the link!) Especially the 'span' suggestion wasn't intended as good practice but only to get an idea where to save space. The use of icon fonts seems a good approach.

[jenlampton]

Can we open a new issue for making it better for small screens? These are
all great ideas but I don't want this discussion to delay these aesthetic
changes, which I hope to get in asap, before the newsletter goes out!
On Jun 13, 2016 6:28 AM, "Olaf Grabienski" [email protected] wrote:

@klonos https://github.com/klonos Yes, I imagined that there were
better ways. (Thanks for the link!) Especially the 'span' suggestion wasn't
intended as good practice but only to get an idea where to save space. The
use of icon fonts seems a good approach.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#1935 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AAYSR6K-KhYs_KRUR9hON-jvG9pNPlZLks5qLVsLgaJpZM4IoCIr
.

[klonos]

Can we open a new issue for making it better for small screens?

😉

[olafgrabienski]

Thanks a lot, @klonos !

[jenlampton]

This adjusts the box-shadow based on suggestions from @wesruv and @klonos but I used the color #d0d0d0 because I felt #cccccc was a smidge too dark, and we were already using the former elsewhere (borders of form elements).

[klonos]

Yeah, about the color, I just picked a random gray. Not a designer or a very artistic person.

[wesruv]

@jenlampton me gusta!

[jenlampton]

Pushed a new PR that addresses @wesruv's feedback.

[jrearick]

Looking good. I especially like how the drop targets are highlighted with blue. This helps re-enforce to the use they are dropping in the correct spot.

[quicksketch]

Manually merged in backdrop/backdrop#1434. Agreed this looks a lot better. Great job @jenlampton! This will be in 1.4.4.