During the University of Minnesota 2011 usability study, it was found that the participants ignored the action links. e.g. the modules page under "Modules" tab of the website. This problem is a result of two underlying issues: the visual treatment of the action link is poor as it looks like a link with a small font in blue and the other is overwhelming amount of information on the pages. Because of this, the participant comes to a page, gets fixated to the overwhelming amount of information and does not notice the action link.

What is needed is a clear demarcation of visual hierarchy of the different parts to such pages across the site for consistency and efficiency's sake. Also, the action link needs to be prominent like a button "Add menu item"

Issues like these generally affect the user's morale of not being able to complete a task.

Files: 
CommentFileSizeAuthor
#70 core--action-links--1167350--70.patch518 bytesry5n
PASSED: [[SimpleTest]]: [MySQL] 48,909 pass(es).
[ View ]
#67 Screen Shot 2012-12-06 at 10.32.32 AM.png63.76 KBdead_arm
#61 menu_local_action.patch960 bytesdroplet
PASSED: [[SimpleTest]]: [MySQL] 48,955 pass(es).
[ View ]
#55 1167350--53--screen.png17.96 KBry5n
#55 1167350--55--screen.png35.43 KBry5n
#55 core--emphasize-action-links--1167350--55.patch6.49 KBry5n
PASSED: [[SimpleTest]]: [MySQL] 48,073 pass(es).
[ View ]
#54 drupal8.css-actions.54.patch6.11 KBsun
PASSED: [[SimpleTest]]: [MySQL] 48,051 pass(es).
[ View ]
#54 interdiff.txt1.3 KBsun
#53 core--emphasize-action-links--1167350--53.patch5.33 KBry5n
FAILED: [[SimpleTest]]: [MySQL] 48,059 pass(es), 2 fail(s), and 0 exception(s).
[ View ]
#48 core--emphasize-action-links--1167350--48.patch4.71 KBry5n
FAILED: [[SimpleTest]]: [MySQL] 48,051 pass(es), 2 fail(s), and 0 exception(s).
[ View ]
#44 action-links--1167350--37.png11.22 KBry5n
#44 action-links--1167350--43.png83.9 KBry5n
#44 core--action-links--1167350--44.patch4.77 KBry5n
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch core--action-links--1167350--44.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#37 css.actions.37.patch3.77 KBsun
FAILED: [[SimpleTest]]: [MySQL] 47,233 pass(es), 2 fail(s), and 0 exception(s).
[ View ]
#37 css-actions-seven-toned-down.png51.99 KBsun
#30 drupal8.css-actions.30.patch3.66 KBsun
FAILED: [[SimpleTest]]: [MySQL] 46,786 pass(es), 3 fail(s), and 0 exception(s).
[ View ]
#30 actions-seven-styled.png30.93 KBsun
#28 drupal8.css-actions.28.patch3.03 KBsun
FAILED: [[SimpleTest]]: [MySQL] 46,836 pass(es), 2 fail(s), and 0 exception(s).
[ View ]
#28 actions-stark.png33.24 KBsun
#28 actions-seven.png30.35 KBsun
#28 actions-bartik.png31.74 KBsun
#25 buttonized-action-link-1167350-25.patch2.42 KBiflista
PASSED: [[SimpleTest]]: [MySQL] 46,462 pass(es).
[ View ]
#25 plussed-button-link.png33.58 KBiflista
#17 buttonized-action-link-1167350-17.patch1 KBiflista
PASSED: [[SimpleTest]]: [MySQL] 46,228 pass(es).
[ View ]
#17 interdiff.txt542 bytesiflista
#17 buttonized-link-1.png57.57 KBiflista
#13 Screen Shot 2012-10-17 at 9.38.18 PM.png58.75 KBiflista
#13 buttonized-action-link-1167350-13.patch1 KBiflista
PASSED: [[SimpleTest]]: [MySQL] 42,676 pass(es).
[ View ]
#12 action-button-d8.png13.98 KBBojhan
#5 action-links-treatment1.png111.29 KByoroy
#5 actionlink-treatment2.png108.43 KByoroy

Comments

Other issues which are related to this are in the Help section and the modules page (I mentioned that already)

Help section: Participants missed the links and focused their attention on the busy information part (bottom half) of the page, leaving them overwhelmed.

Modules page: Participants missed the "Install new module" page and had their attention towards the long list of available core modules on the site.

The recommendation is for a button:

- should this be in the same style as Sevens other buttons
- should we keep/include the + symbol on the button

Version:7.x-dev» 8.x-dev

Lets do some mockups for this and see how things work.

Marked #569236: "Add" pages a duplicate of this

Status:Active» Needs review
StatusFileSize
new108.43 KB
new111.29 KB

I can see how the first couple of links in the help section are overlooked but that's unrelated to action links. I'm attaching two possible visual treatments for the action link on modules page, both making it look more like a button. For these I dropped the little '+' icon that's currently shown before the link, could easily be added back in, but not sure if it would be needed.

screenhot, drupal-blue rounded button styling

and

screenshot, lighter blue background with a bit darker 1px border

I'm guessing that second treatment runs into WCAG contrast issues. A fancy subtle gradient would be even nicer, that's for the second iteration :)

Or could we use actual buttons, the same button styles we already use in whichever themes?

I don't know about making them look like buttons, since they're not.

However, that contradicts with me saying that I like treatment1 better, even though it looks more button-ish.

Status:Needs review» Active

No patch. Also, still major?

Yes, still major. This is a key pattern, and its not noticed by beginners.

Status:Active» Needs work

Would be good to get some more design proposals around this then.

Setting to "needs work" even if there's no patch. Designs are work too :)

StatusFileSize
new13.98 KB

What about something like this?

action-button-d8.png

StatusFileSize
new1 KB
PASSED: [[SimpleTest]]: [MySQL] 42,676 pass(es).
[ View ]
new58.75 KB

Added background and made cursor as a pointer. Also deleted now unnesessary +.


Assigned:Unassigned» iflista
Status:Needs work» Needs review

Thanks for doing a patch! Why do you think the '+' is now unnecessary?

@yoroy, the meaning of button speaks for itself. There is no need in additional visual complexity.

Excellent work @iflista! That CSS looks nice and clean.

@yoroy, @iflista and I were looking at the first mockup in #5, which has no +. However, if both @Bojhan and @yoroy think a plus is a good idea, perhaps we should add it. We should be consistent with the button styles we use elsewhere.

@Bojhan's mockup reminds me of the "actual preview" issue and the node page redesign--are we adopting this style of button as a pattern?

+++ b/core/themes/seven/style.cssundefined
@@ -731,9 +731,16 @@ ul.action-links li {
+  background-color: #0074BD;

I think our standard for hexcodes is that they should be lowercase. http://drupal.org/node/302199 says lowercase is "preferred," at least.

StatusFileSize
new57.57 KB
new542 bytes
new1 KB
PASSED: [[SimpleTest]]: [MySQL] 46,228 pass(es).
[ View ]

Fixed hexcode to lowercase, according to standard. For button slyle #1.

Status:Needs review» Needs work

The last submitted patch, buttonized-action-link-1167350-17.patch, failed testing.

@xjm I hope to, but no one is working on those issues.

@Bojan, I'm working with a patch for your style.

Status:Needs work» Needs review

@Bojhan, could we decouple restyling the buttons for better visibility from those issues? Like can we change the look of the buttons first so that we have a consistent pattern, and then iterate into the more complex pieces of the redesign?

Also if we can implement #12 using a CSS gradient and then (optionally) just the + graphic that would be ideal.

@xjm We totally can, we can just put this in with other styling people will get angry and we have it all over :D

StatusFileSize
new33.58 KB
new2.42 KB
PASSED: [[SimpleTest]]: [MySQL] 46,462 pass(es).
[ View ]

Styled link as button, due to comment #12

Status:Needs review» Needs work
Issue tags:-Usability, -UMN 2011

The last submitted patch, buttonized-action-link-1167350-25.patch, failed testing.

Status:Needs work» Needs review
Issue tags:+Usability, +UMN 2011

Assigned:iflista» sun
StatusFileSize
new31.74 KB
new30.35 KB
new33.24 KB
new3.03 KB
FAILED: [[SimpleTest]]: [MySQL] 46,836 pass(es), 2 fail(s), and 0 exception(s).
[ View ]

I'd suggest to simply do this:

Stark:
actions-stark.png

Seven:
actions-seven.png

Bartik:
actions-bartik.png

Yhea, I wouldn't do the normal button styling. The whole reason of even the initial styling, is that it stands out. If you style it like a normal button it won't stand out, instead it will kinda blend in.

StatusFileSize
new30.93 KB
new3.66 KB
FAILED: [[SimpleTest]]: [MySQL] 46,786 pass(es), 3 fail(s), and 0 exception(s).
[ View ]

Well, from a design perspective, I think that is simply too much — visual overload. Especially, colors. It also sorta tells that the regular buttons are not visible/recognized.

But anyway, as long as it only affects a specific theme (and I don't have to use it), I can live with that. :)

Seven, fancy:
actions-seven-styled.png

Status:Needs review» Needs work

The last submitted patch, drupal8.css-actions.30.patch, failed testing.

Visual hierarchy man, humans need it :)

Status:Needs work» Needs review
Issue tags:-Usability, -UMN 2011

#30: drupal8.css-actions.30.patch queued for re-testing.

Status:Needs review» Needs work
Issue tags:+Usability, +UMN 2011

The last submitted patch, drupal8.css-actions.30.patch, failed testing.

I can fully understand you feel like its too much, that's my first reaction to this too. However as yoroy points out, it is a very important visual landmark that immediately derives visual hierarchy. Because pretty much everything in "Seven" is toned down, this currently feels strange compared to the overall style.

We can probably tweak this a little, for example reducing the ridiculous roundness of the buttons. And play a little with the tones, so it still stands out - but not Joomla-like stands out.

The normal gray buttons are ignored, that's why we are adding an attribute to at least make primary actions stand out on forms. You are working on that patch :)

Meta comment (after feature freeze?):

We should really step back and look at Seven as a whole, since we have both usability enhancements and new core features (like Views, Spark stuff) to accommodate. For example, my first inclination for these local action buttons is to use the same visual style that we plan to use for form buttons (see #1510532: [META] Implement the new create content page design). The ultimate visual design for those is very similar to what is proposed here, and I doubt that there is general value in differentiating action buttons from form buttons.

(Aside: It's unfortunate that the new form buttons styles are implemented in #1238484: [docs update] Ability to mark the form buttons to be of a specific type (so that they can be styled differently) with class names like 'form-button' and 'form-button-primary'. Using these classes on non-form buttons is confusing, even if the same visual style makes sense. This is why css hooks should reflect the visual semantics of the design system more closely than strictly following content semantics.)

Status:Needs work» Needs review
StatusFileSize
new51.99 KB
new3.77 KB
FAILED: [[SimpleTest]]: [MySQL] 47,233 pass(es), 2 fail(s), and 0 exception(s).
[ View ]

Alright, this is what I can offer:

  1. Better Seven color scheme.
  2. Removed background-color from System/Stark.

Seven:

css-actions-seven-toned-down.png

Status:Needs review» Needs work
Issue tags:-Usability, -UMN 2011

The last submitted patch, css.actions.37.patch, failed testing.

Status:Needs work» Needs review

#37: css.actions.37.patch queued for re-testing.

Status:Needs review» Needs work
Issue tags:+Usability, +UMN 2011

The last submitted patch, css.actions.37.patch, failed testing.

Friends, anything left I can do to please you? :)

That said, I'm primarily interested in the CSS and theme function clean-up, as well as the "componentization" of action links here. So if you guys think that hashing out the perfect design for Seven will take some more time, please tell me so, as I'll move those clean-ups into a new issue in that case.

I'd like to see this latest implementation land soon and would be happy to discuss further tweaks in follow-ups.

Assigned:sun» Bojhan

I will tweak the styling and upload a new patch, can't get it to apply atm though.

Assigned:Bojhan» sun
StatusFileSize
new4.77 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch core--action-links--1167350--44.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
new83.9 KB
new11.22 KB

@sun, @yoroy Looks like there are some issues in IE8 and 9, unfortunately:

#37 in IE9 and IE8

The problem was due to linear-gradients not supported in IE, and the old buttons png was still being applied. The attached patch fixes that, and also ensures that IE gets hover and active states. I also switched to setting line-height to 'normal' and achieving height with padding alone, since Firefox has issues with line-height on inputs, and I wanted to make sure these styles would work on any elements.

While doing this, I took some time to more closely match Bojhan's mock in #12. Patch attached looks like this:
#43

Assigned:sun» Unassigned
Status:Needs work» Needs review

Changing status for testing. Also @Bojhan sorry, I had this post queued before you and messed up the assignment.

Status:Needs review» Needs work

The last submitted patch, core--action-links--1167350--44.patch, failed testing.

Assigned:Unassigned» sun

#44 looks good to me — the only thing I'd remove is the increased font-size for .button.add:before in Seven. I dug into that detail for some hours for #37 and it turned out that the increased font-size scales poorly (which is visible in the x-browser screenshots, too). Removing it and just simply using the same font-size for the "+" as the link/button text actually looked better and more acceptable, and didn't cause strange scaling/spacing/vertical-alignment issues.

Status:Needs work» Needs review
StatusFileSize
new4.71 KB
FAILED: [[SimpleTest]]: [MySQL] 48,051 pass(es), 2 fail(s), and 0 exception(s).
[ View ]

@sun Agreed. New patch removes the increased font-size on the "+" icon.

Assigned:sun» Bojhan

Thanks! And sorry, I didn't actually intend to re-assign to me. Assigning back to @Bojhan for final review and potential RTBC. :)

@sun No problem. I figured the assignment wasn't intended, but forgot to mention it. Here's hoping for RTBC too :)

+++ b/core/modules/system/system.theme.css
+.action-links li:first-child {
+  margin-left: 0; /* LTR */
...
+a.button.add:before {
...
+  margin-left: -0.1em;
+  padding-right: 0.2em; /* LTR */

Sorry, we actually forgot to add RTL styles for these to system.theme.rtl.css (also missing one LTR marker).

Can you quickly add them in?

Status:Needs review» Needs work

The last submitted patch, core--emphasize-action-links--1167350--48.patch, failed testing.

StatusFileSize
new5.33 KB
FAILED: [[SimpleTest]]: [MySQL] 48,059 pass(es), 2 fail(s), and 0 exception(s).
[ View ]

Added missing RTL styles. Two tests starting at /core/modules/block/lib/Drupal/block/Tests/BlockTest.php:74 need asserts updated to take into account classes being added to these action links. However, I don't know xpath or simpletest well enough. @sun can you update these?

Assigned:Bojhan» Unassigned
Status:Needs work» Reviewed & tested by the community
StatusFileSize
new1.3 KB
new6.11 KB
PASSED: [[SimpleTest]]: [MySQL] 48,051 pass(es).
[ View ]

Thanks! Fixed those two assertions.

Additionally corrected the vertical padding of Seven's .button.add from 0.5em 1em to 0.2em 1em 0.3em, so as to improve the visual vertical label positioning within the button and slightly decrease the vertical volume and space being consumed by action links.

Also moving this to RTBC — the latest patch basically implements @Bojhan's mocks, and as @yoroy already mentioned, we can tweak the styling in Seven in a follow-up patch if necessary.

StatusFileSize
new6.49 KB
PASSED: [[SimpleTest]]: [MySQL] 48,073 pass(es).
[ View ]
new35.43 KB
new17.96 KB

@sun Vertical alignment within inline-block elements is a pain cross-browser. I hate to do this, but #54 looks wrong in webkit (Chrome on the left, FF on the right):

Screen of #54

Fortunately we can simply switch to pixel values for the top and bottom padding to get more consistency. This is a case where using pixel units is not going to cause any a11y or scaling issues. Padding on .button.add in this patch is 4px 1em, and looks like this:

Screen of patch 55

Would love a quick review and then back to RTBC.

Status:Reviewed & tested by the community» Needs review

That should be 'needs review' temporarily.

Status:Needs review» Reviewed & tested by the community

Looks great to me and from discussions above looks like the code has had a solid work-out too. rtbc!

@yoroy Thanks! :)

Status:Reviewed & tested by the community» Fixed

Committed/pushed to 8.x, thanks!

YAY! :) Thank you @ry5n + @yoroy + @Bojhan + @iflista for making this happen!

Status:Fixed» Needs review
StatusFileSize
new960 bytes
PASSED: [[SimpleTest]]: [MySQL] 48,955 pass(es).
[ View ]

add back "HTML" & "Plain text" link supports.

It produces such problems #1853072: Unauthorized users see extra buttons on /forum

Ugh ;)

So we have a module that attempts to output no link where usually a link is expected to appear.

Those lines didn't make any sense to me, which is why I removed them.

Allowing an action link to not be a link is just weird and breaks the user interface pattern. I think that should be corrected differently. I do not think that Forum's usage of action links is legit.

What do others think?

Note that #1853072: Unauthorized users see extra buttons on /forum clarifies Forum module's problem, including screenshots.

This is inpropper usage, I'd say a won't fix. Forum should not do it like this. If you dont have the permission, you don't get the button its pretty straight forward.

Status:Needs review» Fixed

OK, let's move this issue back to fixed then, and determine how Forum module needs to be corrected in #1853072: Unauthorized users see extra buttons on /forum.

I agree with #62 through #64, FWIW.

Should it add help text / html = false to prohibit this usage ?

Issue tags:+accessibility
StatusFileSize
new63.76 KB

The base blue button color #1078D8 with white text is a 4.46:1 contrast ratio which doesn't pass WCAG AA. Can we use #1078D4 instead? Visually the two blues are almost identical so I don't think it will affect the design at all, and it passes the Core accessibility gate https://drupal.org/core-gates#accessibility.

For comparison:
Screen Shot 2012-12-06 at 10.32.32 AM.png

@dead_arm Seven is pretty schizophrenic at the moment in terms of visual styling and needs work there. Bojhan, yoroy and I have plans to start building a style guide to help unify things that have diverged this cycle. Since quite possibly this button style will change, I wonder if we can postpone this fix for the moment?

(Just to be clear, I love folks who do the hard work to make Drupal accessible. In fact, what WCAG testing tools are you using? I'd like to start using them myself.)

@ry5n I completely understand that Seven is going through some big changes, but wanted to pipe up since the issue is still open and the button is a recent addition. I'm new to accessibility work myself, but have been using http://contrast-a.dasplankton.com as my tool of choice.

StatusFileSize
new518 bytes
PASSED: [[SimpleTest]]: [MySQL] 48,909 pass(es).
[ View ]

@dead_arm Thanks for the link. I'm going to take that for a spin!

Also, I decided this really is easy to roll a patch for, so I went ahead and did that. I think you have the rationale there to RTBC this :)

Status:Fixed» Reviewed & tested by the community

Looks good to me!

Status:Reviewed & tested by the community» Fixed

I can literally not tell a difference between A and B in #67, so if this gets our accessibility rating up, that sounds great to me.

Committed and pushed to 8.x. Thanks, dead_arm and ry5n!

Automatically closed -- issue fixed for 2 weeks with no activity.