UploadWizard/Design recommendations
This document is a work in progress.
This document serves as a design pass on for the MediaWiki UploadWizard.
Notes
[edit]- Design has not been applied to the progress indicator at the top of the screen. This will be forthcoming.
- Not all screens are currently represented. This is a work in progress.
- Care has been taken that all changes should be minimally impactful.
- Changes are based off the codebase as of the March 29th deployment.
Screen: "Learn"
[edit]
While whimsical and friendly, the cartoon suffers from the problem that the controls for the user (the continuation button) are pushed "below the fold."
Accordingly, the controls for continuation should be placed both above and below the cartoon.
Further, the "Next" button should be modified in style to become a stronger call-to-action (addition of arrow icon and coloration).
By default, the check box to skip the cartoon step should already be checked. This is not so important at this phase but in the future - especially with mobile devices - this will become a problem.
Ideally, it would be better to slice the cartoon up into panels and allow the user to click through. This should be easily accomplished with little effort. This design pass does not cover such a development, however.
The primary goal of the user here is to upload files. Requiring them to "go to school" is counter-productive to this goal.
Screen: "Upload", Select Files
[edit]
Since we have introduced a whimsical character (Puzzly) on the first screen, let us continue to utilize him (it?). Puzzly has the potential to be a very powerful, user-centric ally.
Helpful, friendly "Let's get started" text should be included.
The text of the button must change. An emphasis on the word "donate" will invoke a pre-supposition that files are going to be given away freely and not simply "uploaded" (e.g., Flickr, Instagram). Users who do not wish to freely donate their work will likely be scared off by the wording but that's perfectly fine: they were not going to have a good experience with the tool anyway (likely aborting at the licensing screen).
Again, the button must become a more direct call-to-action. Green coloration and iconography should be included.
Not pictured: There should be a link at the bottom to allow the user to revisit the cartoon screen if they so desire and have marked that they do not wish to see the cartoon again. I will include this in the next revision of this document. This accounts for automatically skipping the step forward.
Screen: "Upload", Files Selected
[edit]
This part of the process requires little modification.
The "placeholder" icons should be modified to include green pluses, indicating addition.
Both buttons should become green calls-to-action with iconography. Both are equally important in this context, so they should remain separated but have the same coloring.
The text of the "Upload" button should change to "Start Upload". This is a more accurate term for what is happening to the user.
The "remove" icons (the X) should always appear in the upper right corner. Currently, it only appears on hover, which requires more discovery than is warrented. The text "remove" should not appear until the line-item has a hover state.
Screen: "Upload", Upload Results
[edit]
This screen example includes a (clumsy) error condition. In the case that not all elements are uploaded, the user can still continue, so we should allow for that. Errors are included in-line.
Success and failure icons should be replaced with a more modern style (assets can be found on the MediaWiki Style Guide.
We will bring back Puzzly here as well. The user has done a good job; let's provide encouragement.
If failure of a single upload is considered a "Full Failure", then a sad-faced Puzzly should be included.