Introduce the jQuery UI Icons Framework on edit/delete links in the operations column on tables to improve usability, and make Drupal a bit more pretty.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

RobLoach’s picture

Issue summary: View changes

Linked screenshot.

NikLP’s picture

These icons are quite plain and also a little hard to see; are there other (better) options, or is this whole problem why we don't have them in the first place?

karschsp’s picture

subscribe

droplet’s picture

subscribe

bleen’s picture

I brought this exact point up at DrupalCon London during webchick's presentation on UX and the user testing that was done in Minnesota and I was quickly rebuffed by someone in the audience who worked on "seven" (sorry, I dont know her name). She said that since we have such a hard time even defining some of our concepts with words that iconography would be too difficult to do well.

I'm sure she wasn't talking about the "operations" buttons specifically, but the general answer I got when I asked about the broad topic of iconography in core, was that it shouldn't be there.

I think the screenshot in the original post is 1000% better than what we have. Personally, I'd love to see some color but I'm not picky on that front. If it were up to me I'd be happy to commit this as is and then if someone comes up with better designs then those should be considered.

mrfelton’s picture

+1 for icons in core, and +1 for using the jQuery UI icons for it.

TR’s picture

I do not like the idea of using icons here. My opposition is anecdotal and experiential, not based on any usability testing, so let me relate my story:

I've worked with Ubercart for four years, where icons are used for operations on the order administration page, much like you're proposing here. I've never liked this. My experience is that it's awful from a usability standpoint. I still always have to hover over the icons to figure out what they are for. You can argue that Ubercart might just have a poor choice of icons, but I think that only reinforces my point; icons can mean different things to different people. We can argue forever about what the "best" icons are, but there's no "right" answer. (And I think this may be what the unnamed audience member mentioned in #4 - whom I agree with - was saying.)

It would be much better IMO to keep the actual words like "edit", "delete" etc., which are immediately readable and understandable without having to interpret some intermediate iconic language.

mrfelton’s picture

FileSize
50.31 KB

TR. You do do make quite a good point there, and one that I actually sympathise with - I often find myself having to hover over the icons in Ubercart to work out what they do. However, why do we have to choose between icons or text? Can't we use both? Many applications and operating systems leave this choice up to the user. Icons only, icons and text, text only. This could be a simple switch in the theme settings perhaps?

Attached screenshot shows what an interface might look like with icons and text. You get the best of both worlds - you get easily recognizable icons, big clickable areas (area of icon + text), and the text to accompany each icon in case you can't work out the icon.

As a side note, notice how I chose a different jQuery UI icon for the delete button from the one that Rob Loach chose!

Everett Zufelt’s picture

I have no real opinion on including icons, other than that for accessibility they should be supplemental and not replacements for the text.

Icons carry far less meaning than text, and are far more difficult to localize.

Damien Tournoud’s picture

I actually like the new dropdown menu (with a default action) from ctools (as used in the Views UI). It would be a nice fit for those type of operation columns.

Damien Tournoud’s picture

Just a side note: I like the idea of having a symbolic icon set in Drupal core. Beside jQuery UI, there are other good sources of such icons: the nice Gnome symbolic icon set, the beautiful Iconic set by P.J. Onori, the original AIGA set (from the 70s), the new Noun project, etc.

droplet’s picture

@#9,
I do not like dropdown of new Views UI. Most of case, there are no default operations. Edit / Del / ... are common usage.

@#7
Icon + text close to:
http://blogs.msdn.com/b/b8/archive/2011/08/29/improvements-in-windows-ex...
(ICON only used in Mac OS)

Damien Tournoud’s picture

@droplet: most of the time the action you want is "edit", isn't it?

mrfelton’s picture

@Damien Tournoud - sure there are a multitude of nice looking icon sets out there that could be used. But, as we have jQuery UI in the core, those icons are available to us right now. In an ideal world the choice of icons would be pluggable, but why not start with jQuery UI icons which we already have, and which has a very complete and well defined set of icons that should cover most, if not all of our needs pretty well. And because they are part of jQuery UI, which we are using for the display of numerous other system components, they should should fit very well with the look and feel of other parts of the system.

droplet’s picture

@Damien,
for me, no. I edit the content from node page. others operations I do bulk actions.

If our purpose is going to simplify the screen, dropdown maybe a chosen. Otherwise, I think more directly visible action is the best.

mrfelton’s picture

@droplet - I don't think the purpose of this is to simplify the screen, is it? I would say that it's about making it more user friendly, more 'modern', and generally better looking. I don't think we want to hide these actions away in a drop down - They are good where they are now - instantly visible, and accessible with just one click. I think this is about enhancing what we already have, not drastically changing it.

Bojhan’s picture

We get this request every release, for loads of things. But generally don't do it for various reasons, it doesn't really add clarity and requires module maintainers to make icons for custom operations.

I have rarely experienced icons as replacement for text to really add more clarity to a UI, it often is part of the brand a certain UI wants to show. We have purposely decided against it in the past, because we don't feel its part of our brand neither is it part of our community its skillset. You are obviously totally free to discuss this more, but I dont think we can be easily persuaded of this position.

RobLoach’s picture

FileSize
10.29 KB

operations-buttons.png
Using jQuery UI Buttons.

But generally don't do it for various reasons, it doesn't really add clarity and requires module maintainers to make icons for custom operations.

I tested it with an action that didn't have an icon and it still looked pretty. There's also the jQuery UI Context Menu, which might serve as a better solution for having a number of different operations and not having it take up too much space. Or the Split button.

nod_’s picture

Status: Needs work » Closed (won't fix)

We have dropbuttons from views now. http://drupal.org/node/1808594

klonos’s picture

I never really liked the idea of using dropbuttons for the sole fact that they hide often-used functions behind additionally required clicks. I wish there was some way to have both and make this a configurable setting. I also really love the idea of using only icons and hover-over text because IMO computer/phone users in general are already familiar with the pencil icon for edit, the cogwheel for configure and the x/trashcan icon for delete.

So, would it be relatively easy to provide some kind of theme function/override in order to get this rendered in various ways? That way, it would become a per-theme thing.

tim.plunkett’s picture

Just override theme_links__dropbutton__operations() or hook_element_info_alter() it in contrib or a custom module. This won't be changed in D8.

mgifford’s picture

Issue tags: +icons

Tagging and adding related link - #1744278: Make use of jQuery UI Icons in core

Ultimately these icon issues need to be consolidated if they are ever going to get into Core.

mgifford’s picture

Updated issue summary.