Download & Extend

Review UI for the landing page before you actually update your site

Project:Drupal core
Version:7.x-dev
Component:update.module
Category:task
Priority:normal
Assigned:dww
Status:closed (fixed)
Issue tags:Update manager, Usability

Issue Summary

Given that just about every other Update manager page has needed some UI love once it got into core, I figured I should open an issue about the landing page once you've selected what to install or update, before you're actually sent off to authorize.php to actually update your site.

Comments

#1

One quick thought already:

A) This page only exists as part of a multi-step process. You should never be able to add this to a dashboard or shortcut, etc. How can we prevent that little + icon?

AttachmentSizeStatusTest resultOperations
617588-1.pre-update-landing-page.png34.83 KBIgnored: Check issue status.NoneNone

#2

p.s. the "how to take a backup" link points directly here: http://drupal.org/node/22281

#3

Status:active» needs review

Had a great IRC session with yoroy just now. Lots of improvements. We're almost there, except I think the info about backing up your site is now getting lost...

AttachmentSizeStatusTest resultOperations
617588-3.update-ready.patch5.44 KBIdlePassed: 14707 passes, 0 fails, 0 exceptionsView details
617588-3.update-ready.png25.27 KBIgnored: Check issue status.NoneNone

#4

Some alternatives:

a) wrapping the backup stuff in strong

b) putting it in a warning dsm(). ;)

AttachmentSizeStatusTest resultOperations
617588-4.update-ready.strong.patch5.5 KBIdlePassed: 14675 passes, 0 fails, 0 exceptionsView details
617588-4.update-ready.strong.png25.36 KBIgnored: Check issue status.NoneNone
617588-4.update-ready.warning.patch5.43 KBIdlePassed: 14729 passes, 0 fails, 0 exceptionsView details
617588-4.update-ready.warning.png26 KBIgnored: Check issue status.NoneNone

#5

Status:needs review» active

We spent more than an hour and a half reviewing this single screen, good session indeed.



Starting point:


comments:
- what am I confirming anyway?
- the step1 and step 2 text makes this multi-step within a single screen of the install sequence, that's overdoing it.


My gist was that


doesn't really give less info.

Then we found out that 'Confirmation' is not really asked for here, more that the system can confirm that everything downloaded just fine and that you can get ready to actually install them. Since you only get to this screen if all went well, we choose 'Ready to update' as the new title for this screen. And added the message that yes, downloads were done and succesful.

Now is indeed the time to make a backup. We're not going to say sorry for tools that didn't get build (yet) so we just give some stern advice.

The 'use maintance mode' checkbox + description are hopefully clear enough. The box is checked, the text says it's recommended, we can assume most users will happily do the right thing here and leave this as is.


Resulting in:

Rename button label to 'Continue'. It's simple, active, understandable and invites to move on.

#6

Status:active» needs review

status

#7

This stronger emphasis on the backup message is ok with me. Ideally, the "learn how" would be unboldened.

#8

Assigned to:Anonymous» dww

Note, screenshot #7 is just 617588-4.update-ready.strong.png, which is what you get from 617588-4.update-ready.strong.patch attached to #4.

Re: "Ideally, the "learn how" would be unboldened."

Heh, well, this is where you have a clash of UX vs. themers vs. translators... :/

Currently works like this:

<?php
$form
['backup'] = array(
   
'#prefix' => '<strong>',
   
'#markup' => t('Backup your database and site before you continue. <a href="@backup_url">Learn how</a>.', array('@backup_url' => url('http://drupal.org/node/22281'))),
   
'#suffix' => '</strong>',
  );
?>

Easy to alter the form if you want, and very easy to translate, since the only markup in the string is the link (and apparently, the translators want the actual href tag in the string).

To only strong part of it, we'd either have to do this:

<?php
$form
['backup'] = array(
   
'#markup' => t('<strong>Backup your database and site before you continue.</strong> <a href="@backup_url">Learn how</a>.', array('@backup_url' => url('http://drupal.org/node/22281'))),
  );
?>

which is a nightmare for themers, since they now have very little control over the strong tag, or, we have to do something like this:

<?php
$form
['backup'] = array(
   
'#prefix' => '<strong>',
   
'#markup' => t('Backup your database and site before you continue.'),
   
'#suffix' => '</strong>' . t('<a href="@backup_url">Learn how</a>.', array('@backup_url' => url('http://drupal.org/node/22281'))),
  );
?>

which is a nightmare for translators, since we assume a left-to-right language, and there's not much context for the "Learn how" part if their language actually needs a different grammar for that to make sense. :(

Not sure what's the right compromise here... I'm happy to implement whatever is deemed best, but I think keeping the whole line bold might be the best (which we already have in #4, in which case this is RTBC).

#9

My $0.02 ...

<?php
$form
['backup'] = array(
   
'#markup' => t('<span class="backup_emphasize">Backup your database and site before you continue.</span> <a href="@backup_url">Learn how</a>.', array('@backup_url' => url('http://drupal.org/node/22281'))),
  );
?>

span.backup_emphasize { font-weight: bold; }

Because who in the world is going to change that themed piece of html? Maybe an Administration theme would consider this page and perhaps would want to emphasize it with a color instead of a weight. Everyone one wins. ish.

#10

Status:needs review» needs work

I think the first patch in #4 is great (http://drupal.org/files/issues/617588-4.update-ready.strong.patch). It's more of a technical hurdle than I think it's worth to un-bold the "Learn how," so I'd recommend leaving it alone. One nitpick:

+++ modules/update/update.manager.inc 30 Oct 2009 02:39:37 -0000
@@ -353,41 +354,22 @@ function update_manager_download_batch_f
+    '#markup' => t('Backup your database and site before you continue. <a href="@backup_url">Learn how</a>.', array('@backup_url' => url('http://drupal.org/node/22281'))),

"Backup" isn't a verb. This should read "Back up your database and site..."

All hail dreditor and its oddball advertisements.

#11

Status:needs work» needs review

Rerolled to add the space. ;)

AttachmentSizeStatusTest resultOperations
617588-11.update-ready.strong.patch5.5 KBIdlePassed on all environments.View details

#12

Status:needs review» reviewed & tested by the community

Excellent. Looks good. Committer note: The screenshot in #7 is current, except that it's now "Back up your database...". :)

#13

Status:reviewed & tested by the community» fixed

Um. Wow! This is a *tremendous* improvement! Great job, folks!

Way to make those new Drupal 7 features really shine! :) Also, way to get rid of more lines of code than you add. ;)

Happily committed to HEAD.

#14

Status:fixed» closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

nobody click here