Multimedia:Upload wizard/Features

From Wikimedia Usability Initiative
< Multimedia:Upload wizard
Revision as of 22:24, 13 July 2010 by NeilK (talk | contribs) (Prototype, layout and flow TODO)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search


(until after the March usability tests)

  • Licensing tutorial
  • Metadata step
  • Licensor
  • I have permission from someone
  • Email author with code in URL
  • Verification of code by visiting link + filling out deed
  • OTRS confirmation
  • Other, less frequent cases (paintins, screenshots, etc.)
  • configurable in preferences
  • memory of the recent licenses selected
  • Server-side file format conversion

Must have

  • Multi-step process
  • Upload step:
  • Select file
  • Upload progress
  • Silently fix filename uniqueness
  • Catch upload errors and display appropriate warning
  • Acceptable file extensions only (shows error)
  • Image fingerprint (hash) checking for uniqueness (shows error)
  • can override if user has right perms
  • Zero length files
  • Broken format
  • File too small
  • Any other upload errors
  • Metadata/Macro step
  • Licensor
  • Offer choice
  • Own work
  • Deed
  • Apply ownwork source and appropriate licenses to all images
  • Other options
  • Apply ownwork source and chosen license to all images
  • Found on a website
  • Enter in all source / license info individually
  • Thumbnailing
  • Description, change description
  • Multiple languages for descriptions
  • Change filename (with uniqueness check)
  • Extract and prefill with EXIF metadata, or other good guesses such as Wiki username
  • Comment / Description
  • Author (from EXIF copyright, or Wiki signature)
  • License (if available in EXIF)
  • Date (EXIF captured date OR EXIF stored date OR Today's date)
  • Use calendar + datetime input
  • Source
  • Do not allow progress to next step unless
  • At least one good description
  • All filenames are good
  • All files are licensed in some way
  • Thanks step
  • Say thanks
  • Provide thumbnails and links and wiki markup for all files uploaded

Must have for the usability study

  • Step 1 - File selection
    • Single file upload
    • No validation of file extension, file type, or duplication
    • Show progress bar
  • Step 2 - License selection
    • List of images is grayed out or hidden until a license is selected
    • My own work
      • By default, CC-by-sa 3.0 is selected
      • User can override the license selection
    • From a web site
      • By default, CC-by-sa 3.0 is selected
      • User can override the license selection
      • No validation on license violation
    • If license selection is all unchecked, the message appears to select one.
  • Step 3 -Successful completion
    • "Thank you!"
    • Provide a link to the uploaded asset

Nice to have

  • Upload Step
  • Multiple files
  • Single click adding files
  • HTML5 and other advanced browsers
  • Fine-grained progress while uploading (XHR)
  • Thumbnails before uploading (FileAPI)
  • Drag & drop adding (HTML5)
  • Multiple drag & drop adding (HTML5 Upload)
  • Catch errors before uploading
  • File too large (FileAPI)
  • Firefogg
  • Chunked uploads (via Firefogg)
  • Firefogg thumbnailing
  • Advertise for Firefogg, if user has ffox and not firefogg?
  • Firefogg conversion of file formats, client side
  • Metadata/Macro step
  • Map to set Location
  • prefill map with EXIF data
  • Prompt for "bad" filenames e.g. DSC_whatever and suggest change
  • Thanks step
  • Send a welcome email, if first time

Won't have

There is nothing that the Upload Wizard won't have.


  • Language guessing
(Despite objections here, we have this anyway)
Users have set language codes to be what-the-fucking-ever, so we try to pick a good language that's "close" to theirs
see MediaWiki:LanguageHandler
also, there was some agreement that "pt-br" would be "pt" (visible in UploadForm.js)
also, there is evilness about pseudo-languages combining source and language, like "enownwork", but that should probably die

Prototype, layout and flow TODO

  • Prototype
  • Fix configuration so article links work
  • Import appropriate templates (missing languages/months?)
  • All steps
  • Increase font size in help bubbles and second line of deed
  • Remove automatic welcome message on sign-up on Commons prototype
  • Add spinner while Step 1 loads
  • Step1 / Step 2 / Step 3 outlined on top with a series of boxes with arrow points on the left side. Highlights move across bar as user progresses
  • Nice to have: slide the series of arrow boxes at the top to remove steps (caution: not RTL compatible, needs to flip)
  • Thumbnails at 120px width
  • Combine deed and files Details step, pre-select checked for deed statement, confirm by clicking OK
  • For copyright information in individual files, by default it just says "As above", can select to customize
  • Do not allow customizing copyright information when there's only one file on the page. (There's no point)
  • light colored horizontal lines to separate files (step 2 and 3 especially)
  • more options/fewer options needs to have triangular arrow preceding text, points left for closed, down for open.
  • Step 1 (adding files)
  • File input is ugly and not obviously clickable
  • Remove upload 'X' is hard to click
  • Indications of upload activity "uploading..." and "OK" need to be styled correctly
  • Upload activity "OK" should have a checkmark
  • "Add upload" button should stand off from uploads more, pointer to click
  • Nice to have: "Add upload" pops open file dialog (1-click upload)
  • Progress bar should be less violent colored, simple blue?
  • Message inside progress bar "uploading..."
  • progress bar has outline
  • Should there be an explicit step to move to the next page? It feels a little abrupt when it moves automatically forward. Consider that the user may have wandered away, switched to another tab.
  • Ring a little bell when everything uploaded?
  • Step 2 (licensing and details)
  • General layout: thumbnail at left is hanging indent, then block of fields and values aligned from left to right
  • With exception of description, textareas should appear to be one line initially (e.g. source, author)
  • Remove scrollbars from textareas (they grow automatically)
  • Thirdparty / found it on a website header text: "They are not my own work."
  • Keep "we need information from you" at top
  • Links to open deed options should be bolder, larger, cursor: pointer
  • Checkboxes at left, hanging indent for rest of text
  • In "own work", Make fine print (last paragraph) smaller
  • greyed examples for "Source"
  • Nice to have: Field-specific help appears when field has focus, or we need to draw attention to it (pressed submit with missing information). Use box with left-pointing arrow
  • Field help should use specific examples for them to emulate
  • When altering title, spinner should appear while it seeks for a unique filename
  • This should block submission
  • Validation. Stop them from committing info which is incomplete or problematic. Must help user understand what needs to be fixed (similar to help, perhaps pop open field specific help with red). Must have:
  • Unique filename
  • Source
  • Author
  • License
  • At least one description
  • The required description has to be in some known language (or do we allow it to be blank? Check old form...)
  • Date must be sane (it's as sane as datepicker widget allows, which ought to be enough)
  • Nice to have: geocoding
  • Nice to have: categories
  • Nice to have: fade away files, descriptions when deleted.
  • Low priority: Enter author from EXIF (broken?)
  • Step 3
  • Fix layout - thumbnails at left, options at right
  • Wikitext should be thumbnail with default caption, no alignment
  • Don't dead-end -- link back for more uploads, go to home page of wiki
  • General prettiness
  • buttons
  • icons for "adding" type buttons
  • errors should flash yellow when revealed, or next is clicked to indicate why you can't proceed.

TODO from IRC, email feedback

  • You can't use browser back button
  • Yes, this will be a bit of a challenge. So far it's a NTH not a must have.
  • Alert box "Please press this button to start your uploads." after pressing a button
  • That's a mistake in the string
  • <thedj> if i'm on the first page, there are two buttons. "add another file" "upload" and "next". I'm slightly confused about what
  • We used to have it so that upload and next were the same button, that is, once it was finished, it went immediately to the next. That felt weird. But perhaps we should hide [next] until all files are uploaded.
  • I don't understand the criticism. The local filename is likely to be useful; if not we will filter for common patterns of crappy autogenerated filenames.
  • Fixing this
  • Useless? "ZOMG THIS DEED IS NOT READY" message
  • This is obviously a placeholder
  • Wizard tabs show a link pointer but you can't browse there.
  • You are allowed to write new lines in the title (but should not) Also, it doesn't trim leading/trailing whitespace
  • Font size in text fields is too small
  • Add support for upload from url
  • You can change the upload fields *after* they have been uploaded
  • No option to add another file after the upload (merge upload with next button?)
  • Agreed
  • "To link to it in HTML, copy this HTML code:" fails for long urls (only the first line is shown,

breaks at

  • Yup, agree here
  • UploadWizardPage.js contains wiki config. It should be a <script> tag int the page.
  • I don't understand this comment -- NeilK
  • Noscript fallback doesn't work (no error either)
  • Noscript fallback should be a html equivalent Wizard
  • Highly unlikely. noscript fallback will be a simple HTML4 file uploader.