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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

dcmistry’s picture

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.

Jeff Burnz’s picture

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

yoroy’s picture

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

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

yoroy’s picture

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

yoroy’s picture

Status: Active » Needs review
FileSize
108.43 KB
111.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 :)

yoroy’s picture

xjm’s picture

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

tim.plunkett’s picture

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.

tim.plunkett’s picture

Status: Needs review » Active

No patch. Also, still major?

Bojhan’s picture

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

yoroy’s picture

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 :)

Bojhan’s picture

FileSize
13.98 KB

What about something like this?

action-button-d8.png

iflista’s picture

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


yoroy’s picture

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

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

iflista’s picture

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

xjm’s picture

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.

iflista’s picture

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.

Bojhan’s picture

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

iflista’s picture

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

iflista’s picture

Status: Needs work » Needs review
xjm’s picture

@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?

xjm’s picture

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

Bojhan’s picture

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

iflista’s picture

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.

iflista’s picture

Status: Needs work » Needs review
Issue tags: +Usability, +UMN 2011
sun’s picture

Assigned: iflista » sun
FileSize
31.74 KB
30.35 KB
33.24 KB
3.03 KB

I'd suggest to simply do this:

Stark:
actions-stark.png

Seven:
actions-seven.png

Bartik:
actions-bartik.png

Bojhan’s picture

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.

sun’s picture

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.

yoroy’s picture

Visual hierarchy man, humans need it :)

tim.plunkett’s picture

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.

Bojhan’s picture

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 :)

ry5n’s picture

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: 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.)

sun’s picture

Status: Needs work » Needs review
FileSize
51.99 KB
3.77 KB

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.

sun’s picture

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.

sun’s picture

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.

yoroy’s picture

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

Bojhan’s picture

Assigned: sun » Bojhan

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

ry5n’s picture

@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

ry5n’s picture

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.

sun’s picture

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.

ry5n’s picture

Status: Needs work » Needs review
FileSize
4.71 KB

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

sun’s picture

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. :)

ry5n’s picture

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

sun’s picture

+++ 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.

ry5n’s picture

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?

sun’s picture

Assigned: Bojhan » Unassigned
Status: Needs work » Reviewed & tested by the community
FileSize
1.3 KB
6.11 KB

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.

ry5n’s picture

@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.

ry5n’s picture

Status: Reviewed & tested by the community » Needs review

That should be 'needs review' temporarily.

yoroy’s picture

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!

ry5n’s picture

@yoroy Thanks! :)

catch’s picture

Status: Reviewed & tested by the community » Fixed

Committed/pushed to 8.x, thanks!

sun’s picture

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

droplet’s picture

Status: Fixed » Needs review
FileSize
960 bytes

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

It produces such problems #1853072: Remove forum_menu_local_tasks_alter() hack and instead add links in ForumController::build

sun’s picture

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: Remove forum_menu_local_tasks_alter() hack and instead add links in ForumController::build clarifies Forum module's problem, including screenshots.

Bojhan’s picture

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.

sun’s picture

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: Remove forum_menu_local_tasks_alter() hack and instead add links in ForumController::build.

xjm’s picture

I agree with #62 through #64, FWIW.

droplet’s picture

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

dead_arm’s picture

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

ry5n’s picture

@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.)

dead_arm’s picture

@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.

ry5n’s picture

@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 :)

dead_arm’s picture

Status: Fixed » Reviewed & tested by the community

Looks good to me!

webchick’s picture

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.