[wp-trac] [WordPress Trac] #7112: Add Icons to the Design - Widgets Page in the Admin Panel

[WordPress Trac]

#7112: Add Icons to the Design - Widgets Page in the Admin Panel
--------------------------+-------------------------------------------------
 Reporter:  scribblerguy  |       Owner:  anonymous                                                 
     Type:  enhancement   |      Status:  new                                                       
 Priority:  normal        |   Milestone:  2.7                                                       
Component:  General       |     Version:                                                            
 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.

-- 
Ticket URL: <http://trac.wordpress.org/ticket/7112>
WordPress Trac <http://trac.wordpress.org/>
WordPress blogging software