Add Icons to the Design - Widgets Page in the Admin Panel

[scribblerguy]

Overview: By adding icons to the Widgets Page in the Admin Panel, the usability and visual appeal of that page will be greatly improved. This enhancement only requires a few lines of new code in the "/wp-admin/widgets.php" file, a short helper function in the "/wp-admin/includes/widgets.php" file, and one extra CSS declaration.

Usability Improvements: Currently, individual widgets are only labeled with their name. By adding icons, they will now have graphic "labels" as well. These will provide an additional indicator of what functionality each widget provides.

Furthermore, adding icons will (1) help the user more readily distinguish among the individual widgets; (2) provide a better visual cue that the individual widget panels are a type of menu interface, rather than just a list; and (3) the icons will act as bullet-points that draw the user's attention to each specific widget name.

Visual Appeal Improvements: Text, no matter how fancy the typeface, is still just text. By adding icons, the Widgets page will appear less "dry and more "fresh." Users will be more drawn to page's interface and more likely to notice and interact with the interface. In addition, this will provide a minor "refresh" in the design that will hopefully generate some positive buzz in the blogging community.

Implementation: The attached patch does not alter any existing functions, but rather, uses the widget's class name to determine what icon to use. The class name appears to be language independent, so there should not be any conflicts there. By using the class name, this will keep the naming of the icon images consistent. The images will be stored in the "/wp-admin/images/" directory are intended only for use in the Admin Panel. The images files are named using the format of classname.gif, so the icon for the core Calendar widget is "widget_calendar.gif."

With the current patch, only core widgets will have unique icons. All other icons will have a plain default widget. Letting widget developers create their own icons and providing a hook or option to show that instead of the default icon is probably feasible, but not likely desirable.

The chief concern for not implementing custom icons is that the widget developer could use a non-visually appealing icon or an icon with colors that clash with the current colors and theme of the WP Admin Panel. See: ​http://www.alistapart.com/articles/writingainterfacestyleguide.

One workaround for this may be to allow the widget developer to set as an option, the name of an official, but extra icon that would be displayed instead of the default. (I tried doing something with third-party widgets and custom icons, but could not get it to work, so someone else should work on implementing this, if so desired).

The attached icons set only uses greyscale, as color seemed to be visually over-powering. A rationale for each icon choice is attached as a text file.

Stylesheet note: "vertical-align: text-top;" seems to be the best, browser-neutral setting for icons images of this size (16x16). The CSS declaration was tested in Firefox 2.0.14, Opera 9.27, Internet Explorer 7, and Safari 3, all on Windows Vista.

[scribblerguy]

just the icons with their names and file size

[scribblerguy]

the patch in action, with a few third party widgets to show the default icon

[thee17]

-1 because, I prefer a text based layout.

[Viper007Bond]

-1 as well, but not a strong one. I prefer the current design, but wouldn't kill myself over this change.

[sambauers]

I kind of like it, the icons are well thought out although they are a little bland.

Surely this could all be done using background images in CSS though, that way the semantic purists are less bothered.

[strider72]

I'm for this with two caveats:

1) I agree that it should be a CSS background. This is purely visual, and not needed in the HTML.

2) I believe the code that allows plugins to add widgets should also be changed so custom widgets can have included icon images as well.

[caesarsgrunt]

+1, although I don't really like these particular icons. The famfamfam ones might be suitable. I also think they should be CSS background images, and I definitely think plugin developers should be able to set their own icons.

[ryan]

Widget management redesign in 2.8 will take these suggestions into account, but if we use icons in some way, we would want them to match the style of the navigation icons, and since the code for widget management is going to be significantly changed, will need to consider in context of new screen composition.