Add Icons to the Design - Widgets Page in the Admin Panel
|Reported by:||scribblerguy||Owned by:||anonymous|
|Severity:||normal||Keywords:||has-patch, widgets, user interface, Admin Panel, usability|
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.