Closed Bug 848000 Opened 12 years ago Closed 12 years ago

[Flicks] Take the signup/submission flow out of the modal overlay

Categories

(Websites :: Firefox Flicks, defect)

Product:
Websites
Component:
Firefox Flicks
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
VERIFIED FIXED

People

(Reporter: craigcook, Assigned: osmose)

References

(
URL
)

Details

The modal overlay has proven problematic because 1) we don't currently have any confirmation when a user closes it, making it too easy to bail out mid-flow and 2) there's a very crazy IE layout bug that shrinks the modal randomly and inscrutably until it's unusable. We could easily enough add some logic to confirm if a user meant to dismiss the modal (which was originally specced but didn't get implemented), but that still leaves the IE layout bug which is baffling and frustrating and hard to reproduce. The benefits of the modal aren't great enough to offset the cost of fixing that bug, so we'll just ditch the modal. When a user initiates the submission process it will lead to a separate web page with a minimal UI (no navigation, no footer) for each step of the process. These are the same pages we've been displaying in the modal iframe, but now they'll just stand on their own. The final confirmation page will restore the normal navbar and footer design, with the addition of a prominent link/button to return to the Flicks home page (all the header navigation leads to the home page already).
Depends on: 845438
2 implementation notes. 1. On the final confirmation page use the text "Back To Flicks" for the link to the flicks home page. 2. Add the following line to the Rules For Uploading step. 2nd to last. (It will be the new number 4. number 4 becomes number 5). Use the same text and link format as FAQ page so no new l10n. "Your flick must be submitted under a <link>Creative Commons - NonCommercial-ShareAlike license</link>"
After using the submission flow in the modal version I had some feedback that I hadn't yet made a bug for. This is feedback regarding mostly simple things like spacing in the form, placing "optional" next to Nickname field, add a "." after "Be concise, yet unique" message, etc. However, there is one larger issue regarding this error: http://cl.ly/image/0q2d1y061m1s If the user submits a video that is not the right format, they get stuck at this error with no way to go back tot he upload screen. This may be fixed by moving to the page by page flow instead of modal. Could you ping me when this design is transferred into the page by page flow so that I can check it out? I'll hold off in filing any bugs since the non-modal version may solve a lot of them. I'd also like to take a look and let you know of any changes/bugs before it goes live or before your attentions goes to another project.
Blocks: 839202
Blocks: 840130
Blocks: 840746
Commit pushed to master at https://github.com/mozilla/firefox-flicks https://github.com/mozilla/firefox-flicks/commit/69e699cdf3841e9b003b76b15228e1e64c382e03 Fix Bug 848000: Finish hooking up demodalized upload process. - Removes excess code leftover from modal upload, such as complex login button logic and the extra view for launching Persona login from within the modal frame. - Adds a "requires-auth" class that will ensure the user is logged in vía Persona before letting them follow the link. - Update to latest django-browserid.
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
Reopening this bug for feedback necessary to implement before going live. PDF with feedback is here: http://cl.ly/2K3j3C3o0Y47 Most comments are quick fixes about form layout. (ie: Nickname field is optional) There is also some feedback about error states. For instance, when uploading wrong file format I was not given an error before proceeding to the next step and was allowed to fill out details about the incorrect file that I uploaded. Check out the PDF for the rest. There are a couple of things I mentioned that you can pass on if you don't have time to fix. Thanks!
Flags: needinfo?(mkelly)
Assignee: nobody → mkelly
I've got a local branch with most of the changes. I need some guidance on design/strings: - Right now I'm popping up a JavaScript confirmation when the user attempts to upload a file with an extension like jpg, png, exe, etc. What should the box say? Currently I have "The file you've chosen doesn't look like a video file. Are you sure you want to upload it?" - If the user attempts to leave the page during the upload process, I have it showing a JS confirmation popup saying "You haven't finished uploading your flick. Are you sure you want to leave?" - Should the popup for leaving the upload process only show up after the user has started uploading a flick, or should it show up if they try to leave the page at any point? - This one is more for Craig: What should we use for a progress indicator once the user clicks Next after uploading their video? A spinner? Do you have a GIF you want to use, or something else?
Flags: needinfo?(mkelly) → needinfo?(craigcook.bugz)
(In reply to Michael Kelly [:mkelly] from comment #6) > - This one is more for Craig: What should we use for a progress indicator > once the user clicks Next after uploading their video? A spinner? Do you > have a GIF you want to use, or something else? Aren't we already showing a progress bar for the upload? What process are we indicating after clicking Next? I can whip up a spinner gif but I'm not sure where it needs to go.
Flags: needinfo?(craigcook.bugz)
(In reply to Craig Cook (:craigcook) from comment #7) > Aren't we already showing a progress bar for the upload? What process are we > indicating after clicking Next? I can whip up a spinner gif but I'm not sure > where it needs to go. This is for showing the user that we're processing the form AFTER they've uploaded the video, when they've clicked the next button. We could do a spinner, or just show a message, or whatever. Currently all that happens is that the next button is greyed out and disabled.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
(In reply to Michael Kelly [:mkelly] from comment #6) > I've got a local branch with most of the changes. I need some guidance on > design/strings: > > - Right now I'm popping up a JavaScript confirmation when the user attempts > to upload a file with an extension like jpg, png, exe, etc. What should the > box say? Currently I have "The file you've chosen doesn't look like a video > file. Are you sure you want to upload it?" If we want to let them upload, I think this string looks great, but I wonder if it's better to actually prompt them to choose a video file: "The file you've selected doesn't look like a video file. Please choose a different file and try again." > - If the user attempts to leave the page during the upload process, I have > it showing a JS confirmation popup saying "You haven't finished uploading > your flick. Are you sure you want to leave?" Looks good, I'd just say "quit" instead: "You haven't finished uploading your flick. Are you sure you want to quit?" Thanks!
(In reply to Michael Kelly [:mkelly] from comment #8) > (In reply to Craig Cook (:craigcook) from comment #7) > > Aren't we already showing a progress bar for the upload? What process are we > > indicating after clicking Next? I can whip up a spinner gif but I'm not sure > > where it needs to go. > > This is for showing the user that we're processing the form AFTER they've > uploaded the video, when they've clicked the next button. We could do a > spinner, or just show a message, or whatever. Currently all that happens is > that the next button is greyed out and disabled. Sorry for the late reply. I've been at Google Analytics training today. I've gone through the upload process 3 or 4 times now and for some reason there is a big delay for me between the screen where you enter information about your upload, select 'next', and the final screen is shown. I was just hanging out there with a disabled 'Next' button wondering what I should do :) It seems odd since the file was uploaded before the screen that asks you to enter your details. Is something happening here that causes the delay before the final screen or is this an isolated issue I can blame on my slow internet connection? If this isn't happening to anyone else, just disregard this part of my feedback.
The delay does exist, it's because we have to make an API call to Vimeo to complete the upload and ensure that there isn't an error with the video format. This takes Vimeo a short amount of time to process, and since we want to let the user know immediately if their video had an error, we have to wait.
Status: REOPENED → RESOLVED
Closed: 12 years ago → 12 years ago
Resolution: --- → FIXED
Verified
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.