Problem/Motivation

The styling of the blocks available to place on the Blocks layout page is too "linky". The styling does not suggest that a user will take an action; the styling suggests that clicking the link will take the user to a different page.

Screenshot of the Place blocks listing on the Blocks layout page

We still need to determine what the styling should be.

Proposed resolution

If we already have designs for this, they need to be posted in this issue as screenshots.

Remaining tasks

  1. Design iterations; agree on a design
  2. Turn the designs into code

User interface changes

There will be changes.

API changes

None.

Original report by @jessebeach

Comments

Title:The "link" styling of the Place blocks available blocks listingThe "link" styling of the Place blocks available blocks listing is not appropriate to indicate an action

Updating the title

@Jessebeach

Agreed, let's remove the blue from link color from the actions. I will propose coming up with a new icon/affordance at UX happy hour today.

@Jessebeach

Discussed at Prague with Yoroy and Lisa and determined that having both "place" and "add" actions share the "+" icon works as long as the "add" action says "new". The "+" being bold and blue is enough to indicate action

For example:

Menu
+ New menu
+ Administration
+ Footer
etc,

StatusFileSize
new35.03 KB

For this:

image

I used "medical cross" UTF271A

.block-list a:before {
content: '✚ ';
color: #0074bd;
}

I guess the one for "new..." needs it's own class to get the italic and elipsis. I just hacked it into the markup.

That has the same problem though, which is that we're using the "add" symbol to indicate "placing" something. Adding is "Creating a new one of." That is not what we're doing here.

EDIT: Hm. Missed #3. Still seems bizarre to me, but I guess...

That said, the styling change definitely gets rid of the "linky" feel, so +1 for that, but this should get Lewis's sign-off cos it's a pretty big visual deviation. I worry it might just replace one anti-pattern (links initiate an action instead of taking you to a place) with another (introduce weird one-off styling of links that are only used in this one place).

@webchick

This is one on which my thinking has evolved over time with influence from others in the UX group. By placing I am "adding" a block to this layout in both instances (new and existing) so the primary action is "add to layout" and the secondary is "create new then add"

@webchick in #6. I voiced this concern in the UX team meeting, I think this design exchanges one problem for the other.

@Bojhan

I voiced this concern in the UX team meeting, I think this design exchanges one problem for the other.

Any ideas how we can overcome this?

Sorry, I forgot to add that. I would actually consider won't fixing this, until it actually comes up as an issue in testing. I dont know if that satisfies the issue, but if the solution is changing one problem for the other - than standing still isn't a bad solution.

The only slight change that I would make is making the plus better (I would make the plus a bit less heavy)

@Bojhan Less heavy in the design? If you mean less heavy like what's in head right now then there's no change.

I don't know how I missed this admin page before. But I discovered today, so this mini-report is with "fresh eyes"

The first reaction was: this looks so coool. "Ah, so it looks like "Context UI" blocks placement"
https://www.monosnap.com/image/EfdazvT2KYPReWUsjBC3cj8qBbJu7f

Then, I thought, silly me, those are blocks, not regions. Those blocks are to be dragged to the regions.
https://www.monosnap.com/image/tbPbXkdxht7kFSFKovIsSMpIXHapWe

I was then like 10 seconds trying to drag them. ("Place blocks" and the visual layout (2 columns) suggests that to me)
Finally... I thought.. maybe if I click them? Profit.

Too long time of discovery, imho, but I don't know how could be improved. The bigger + symbol suggested by tkoleary could work. Not sure.

But I strongly feel that "Place blocks" is wrong. Maybe "Available blocks", or "Blocks to add" could work better
Also "Place" suggests somehow that it's a list of unique blocks. But you can add as many block instances as you want. It's more like "creating" than placing.

Finally the original report says: "the styling suggests that clicking the link will take the user to a different page." . Yes, it does. Was it different before?

"the styling suggests that clicking the link will take the user to a different page." . Yes, it does. Was it different before?

It is supposed to trigger a modal, but that is broken. Someone said they opened an issue, but I don't know where it is.

Hi all, based on my extensive search, I think this issue is perfect for evaluating a new add-on I've developed for Drupal issue queue: #2154143: Evaluating Procid

The add-on is called Procid which is a user script for drupal.org. It offers multiple interactive features to make the Drupal issue queue a more effective medium for resolving issues. You can watch a demo on YouTube.

How can I help?

If you are interested to follow or comment on this issue, I'd appreciate if you can install Procid and participate in the issue using this tool.
You can follow these instructions to install Procid: How do I install Procid?

Why this issue?

We chose this issue because it looks like might be completed in the next few weeks and it is at the beginning of the process.

What data will be collected?

Procid will only log your interactions with the tool for the purpose of evaluation. The logged data will include the action performed (e.g. clicking on a lens or adding a new criteria), the time, and the performer's Drupal username. To comply with the open source/ open data policy, the collected data will be published in the Procid project's page on weekly basis. The usernames will only be published with the consent of the owner and otherwise will be anonomyzed.

For more detail information on Procid's data collection procedure, you can take a look at procid-client and procid-server code on Github.

How do I provide feedback?

  1. Creating a new issue on Procid's Issue Queue on Drupal.org.
  2. Creating a new issue on Github.
  3. Sending an email to Roshanak Zilouchian.
  4. Commenting on a discussion about Procid on Drupal.org.
  5. Using the "Give Feedback on Procid" Button on Procid's first page.