[wp-trac] [WordPress Trac] #11232: UI improvements for 2.9 bulk plugin/theme updater (esp. success/fail msgs)

[WordPress Trac]

#11232: UI improvements for 2.9 bulk plugin/theme updater (esp. success/fail msgs)
--------------------------+-------------------------------------------------
 Reporter:  jeremyclarke  |       Owner:  ryan      
     Type:  defect (bug)  |      Status:  new       
 Priority:  normal        |   Milestone:  Unassigned
Component:  UI            |     Version:            
 Severity:  normal        |    Keywords:            
--------------------------+-------------------------------------------------
 I just tried the bulk plugin upgrades in WP 2.9 rare. It worked well but
 the experience of seeing so many copies of the upgrade message made me
 think that it could be much more effective visually at communicating the
 results without too much extra work.

 Here's how it looks now:

 [[Image(http://simianuprising.com/wp-content/uploads/2009/11/wp-bulk-
 updater-ui-ticket-0.png)]]

 == Problem ==
 While this is informative it is obviously super-spartan in design while
 also taking up a ton of space on the screen. When it was just one
 plugin/theme at a time I was willing to ignore the simplicity, but with 11
 in a row it gets pretty intolerable that it not only fails to communicate
 the relevance of the messages its outputting, but also forces me to scroll
 a ton to see all the output.

 I felt like I had to read through all 11 sets of messages because the
 success message had no special style. It looked just like all the others,
 so if there was a failure message I had to assume it would also look like
 the rest. Needless to say reading all that is a terrible user experience
 and WP could do a lot better. The output reads like a log of information
 that should be hidden by default, and maybe it should be.

 == Solution ==

 === EASY: Add .updated and .error to {{{<p>}}} tags ===
 The simplest fix would be to add a css class to the success/fail messages
 so that they stick out. The obvious choice and one that would involve no
 new styling is to use the existing {{{.updated}}} and {{{.error}}} classes
 from the {{{/wp-admin/css/global.css}}} file. I tried them on my list and
 it works fine on the {{{<p>}}} tags the messages are wrapped in. The
 .updated ones look yellow, so after seeing one you could scan down the
 page to see that all messages are yellow.

 === Make Success/Fail messages bigger ===
 The final messages should be much bigger than the rest of the text for
 each plugin, and the other messages should probably not have so much
 margin on them. As it is each line is its own {{{<p>}}} and as such has
 1em of margin on top and bottom. If they were instead seperated by {{{<br
 />}}} tags they would be just as readable (they currently have {{{line-
 height:140;}}} anyway) and I can't think of a "semantic" reason why this
 log output should be considered paragraphs that outweighs the need to
 conserve space.

 === Use the actual plugin's name ===
 The success/fail message should state the name of the plugin, as in
 "Contact Form 7 Successfully Upgraded" instead of "Plugin Upgraded
 Successfully".

 When you are reading a list with many plugins it would help greatly to
 differentiate the messages. The current system feels very vague: nowhere
 in the message is the title of each plugin mentioned. If the actual plugin
 name would be complex/resource-intensive to determine then the filename of
 the core plugin file (i.e. {{{contact-form-7.php}}}) should be shown
 instead, most people would be able to figure out which plugin it was based
 on the filename.

 === Link back to Core Upgrade screen at end of list ===
 This may already be planned, but at the end of the list, after the
 "Disabling Maintenance mode." message (which should also be removed, not
 really useful to users) there should be a link back to the {{{/wp-admin
 /update-core.php}}} file. As it is its very unclear what to do after
 upgrading your plugins, and giving the user a direct link to the next step
 just makes sense.

 === Hide log output entirely with JQuery and only show upon request ===

 I think this is the real killer solution. All messages but the final
 success/failure one should go in a div that is hidden by jquery by
 default, but can be shown by clicking a 'more info' link next to the
 success/failure message.

 For most people this would mean a string of messages informing them that
 each of their plugins was successfully upgraded. Easy to look at and look
 through to make sure there was no problems. If there is a problem they can
 find out what it is easily or actual error messages can be displayed by
 default.

 I think this might be how it should always have been. The current system
 feels a bit by-developers, for-developers. Normal people just want to know
 that it was upgraded or if there were problems.

 == Implementation ==

 I looked through the {{{/wp-admin/includes/class-wp-upgrader.php}}} file
 to see how this was accomplished but haven't actually written a patch yet.
 It seems like the messages themeselves are being generated by the
 {{{show_message()}}} function from {{{/wp-admin/includes/misc.php}}}. That
 function doesn't have options for adding classes to the {{{<p>}}} tags it
 produces nor does it allow for other formats. Maybe we could modify that
 function to do more? Add in {{{$before}}}, {{{$after}}}, {{{$css_class}}}
 and {{{$format}}} parameters? I think they would be useful in a lot of
 situations where you're showing messages.

 Otherwise I think it's reasonable to use a seperate display system for
 these upgrader messages that accounts for the importance of
 differentiating between log messages and success/fail messages.

 If someone would be willing to commit a patch if it was done a certain way
 please say so and I'll try to make a patch that satisfies your demands.
 IMHO there's a good chance that ryan or whoever did most of the work on
 the upgrader could hammer out these changes in no time though ;)

 === Screenshots ===

 === .updated and bigger font for success msg ===
 Here's how it looks with just the addition of {{{.updated}}} to the
 success messages along with an increase in the font size of {{{.updated}}}
 and switching to {{{<br />}}} or removing the padding from the rest of the
 output. The font size increase would involve wrapping the whole upgrader
 output in a class or id like {{{#updater-output}}}, which IMHO is a very
 sensible choice that would match the rest of {{{wp-admin}}}. The CSS to
 increase the font size would then be
 {{{
 #updater-output .updated {font-size: 16px;}
 }}}

 [[Image(http://simianuprising.com/wp-content/uploads/2009/11/wp-bulk-
 updater-ui-ticket-1.png)]]


 === hide output with jquery, use plugin names and add button at bottom ===

 This one is uglier but shows what I mean about hiding most of the log
 output and using the actual plugin names. Note how many more messages can
 fit on one screen and consider how useful the hidden messages are to 99%
 of users. Compared to the current design this one can show 8 plugins worth
 of messages instead of 3(!)

 [[Image(http://simianuprising.com/wp-content/uploads/2009/11/wp-bulk-
 updater-ui-ticket-2.png)]]

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