{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"section","parameters":{"macroParams":{},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Section"}}},"content":[{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"reason":"A column macro in a rich body macro can't be created or edited in the new editor.","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"column","parameters":{"macroParams":{"width":{"value":"50%"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Column"}}},"content":[{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"#FFF","rowspan":1},"content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"1. Problem","type":"text"}]},{"type":"paragraph","content":[{"text":"Problem Statement:","type":"text","marks":[{"type":"strong"}]},{"text":" Currently most web applications use the standard ","type":"text"},{"text":"http","type":"text","marks":[{"type":"code"}]},{"text":" file browse and upload service provided with the ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" form field.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Only one file can be selected at a time for upload.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Interface is inconsistent from browser to browser even down to the labels on the ","type":"text"},{"text":"browse","type":"text","marks":[{"type":"em"}]},{"text":" button.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The application can not specify the file type or types that are accepted in the current context.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The browser does not provide meaningful or consistent feedback on the upload process.","type":"text"}]}]}]}]}]}]},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"#FFF","rowspan":1},"content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"2. Users","type":"text"}]},{"type":"paragraph","content":[{"text":"Catalina","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11560439"}}]},{"text":" and ","type":"text"},{"text":"Christy","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11514084"}}]},{"text":" are some of the users whose needs we primarily considered when designing the Uploader.","type":"text"}]},{"type":"paragraph","content":[{"text":"Fluid Personas","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/fluid/pages/11560455"}}]},{"text":" are a collection of various types of important users whose needs we need to consider throughout the design process.","type":"text"}]}]}]}]},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"#FFF","rowspan":1},"content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"3. Users' needs","type":"text"}]},{"type":"paragraph","content":[{"text":"Contexts of Use:","type":"text","marks":[{"type":"strong"}]},{"text":" Where in the systems we support is an Uploader being used currently?","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"uPortal File Upload Contexts of Use","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9315920"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"OpenCollection File Upload Contexts of Use","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9315919"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Sakai File Upload Contexts of Use","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316050"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Uploader Scenarios and Use Cases","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316096"}}]}]}]}]},{"type":"paragraph","content":[{"text":"Functional Requirements:","type":"text","marks":[{"type":"strong"}]},{"text":" What use cases does the Uploader component support?","type":"text"}]},{"type":"paragraph","content":[{"text":"Primary & Secondary Scenarios:","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316096"}},{"type":"strong"}]},{"text":" In what scenarios would the Uploader be used?","type":"text"}]}]}]}]}]}],"version":1},"cxhtml":"50%

\n#FFF#CCC

1. Problem

\n\n

Problem Statement: Currently most web applications use the standard http file browse and upload service provided with the <input type="file"> form field.

Only one file can be selected at a time for upload.
Interface is inconsistent from browser to browser even down to the labels on the browse button.
The application can not specify the file type or types that are accepted in the current context.
The browser does not provide meaningful or consistent feedback on the upload process.

\n#FFF#CCC

2. Users

\n\n

Catalina and Christy are some of the users whose needs we primarily considered when designing the Uploader.

\n\n

are a collection of various types of important users whose needs we need to consider throughout the design process.

\n#FFF#CCC

3. Users' needs

\n\n

Contexts of Use: Where in the systems we support is an Uploader being used currently?

\n\n\n

Functional Requirements: What use cases does the Uploader component support?

\n\n

Primary & Secondary Scenarios: In what scenarios would the Uploader be used?

"}}},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"reason":"A column macro in a rich body macro can't be created or edited in the new editor.","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"column","parameters":{"macroParams":{"width":{"value":"50%"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Column"}}},"content":[{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"#FFF","rowspan":1},"content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"4. Solution","type":"text"}]},{"type":"paragraph","content":[{"text":"Wireframes","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9315921"}},{"type":"strong"}]},{"text":":","type":"text","marks":[{"type":"strong"}]},{"text":" What does the Uploader look like and how does it behave?","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"storyboards"},"legacyAnchorId":{"value":"UploaderDesignOverview-storyboards"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Anchor"}}}},{"text":" ","type":"text"},{"text":"Storyboards:","type":"text","marks":[{"type":"strong"}]},{"text":" How, when, and where would the user use an Uploader?","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Uploader Storyboard - Simple Upload","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316100"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Uploader Storyboard - Upload with Error","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9315914"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Uploader Storyboard - Add more","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316102"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Uploader Storyboard - Upload and Cancel","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316313"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Uploader Storyboard - Batch Upload with Metadata","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9315901"}}]}]}]}]},{"type":"paragraph","content":[{"text":"Comprehensive File Upload Design Pattern","type":"text","marks":[{"type":"link","attrs":{"href":"http://osdpl.fluidproject.org/designPatterns/file-upload"}},{"type":"strong"}]},{"text":":","type":"text","marks":[{"type":"strong"}]},{"text":" Design advice for performing a \"comprehensive\" (complex) file upload.","type":"text"}]}]}]}]},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"#FFF","rowspan":1},"content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"5. Uploader User Testing","type":"text"}]},{"type":"paragraph","content":[{"text":"Uploader User Testing","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316353"}},{"type":"strong"}]},{"text":":","type":"text","marks":[{"type":"strong"}]},{"text":" Summary of all user testing performed on the Uploader component.","type":"text"}]},{"type":"paragraph","content":[{"text":"User Testing Protocol:","type":"text","marks":[{"type":"strong"}]},{"text":" Describes how the user testing of the Uploader will be carried out.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Uploader User Testing - Round 1 Protocol","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9315935"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Uploader User Testing - Round 2 Protocol","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316088"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Uploader User Testing - Round 3 Protocol","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9315905"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Uploader User Testing - Round 4 Protocol","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316084"}}]}]}]}]},{"type":"paragraph","content":[{"text":"User Testing Results:","type":"text","marks":[{"type":"strong"}]},{"text":" Describes how the users interacted with the Uploader prototype and what improvements can be made.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Uploader User Testing - Round 1 Results","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316270"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Uploader User Testing - Round 2 Results","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316203"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Uploader User Testing - Round 3 Results","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316002"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Uploader User Testing - Round 4 Results","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316111"}}]}]}]}]}]}]}]},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"#FFF","rowspan":1},"content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"6. Preparing for Implementation","type":"text"}]},{"type":"paragraph","content":[{"text":"Storycards:","type":"text","marks":[{"type":"strong"}]},{"text":" Decomposes the Uploader into small implementable chunks","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Storycard 1: Remove \"pause\" button","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316278/Uploader+Storycards#UploaderStorycards-story1"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Storycard 2: \"Remove\" button should not display once files are being uploaded","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316278/Uploader+Storycards#UploaderStorycards-story2"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Storycard 3: Add remaining time for upload to the progress bar.","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316278/Uploader+Storycards#UploaderStorycards-story3"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Storycard 4: Update information at the bottom","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316278/Uploader+Storycards#UploaderStorycards-story4"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Storycard 5: Add Cancel button (Daphne)","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316278/Uploader+Storycards#UploaderStorycards-story5"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Storycard 6: Error: file name already exists (Erin)","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316278/Uploader+Storycards#UploaderStorycards-story6"}}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Storycard 7: Allow user to create a display name & send notification (Daphne)","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316278/Uploader+Storycards#UploaderStorycards-story7"}}]}]}]}]},{"type":"paragraph","content":[{"text":"Functional Specification","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/Infusion13/pages/9316069"}},{"type":"strong"}]},{"text":":","type":"text","marks":[{"type":"strong"}]},{"text":" Development specification containing interaction details such as \"interesting moments.\" ","type":"text"}]}]}]}]}]}],"version":1},"cxhtml":"50%

\n#FFF#CCC

4. Solution

\n\n

Wireframes: What does the Uploader look like and how does it behave?

\n\n

storyboards Storyboards: How, when, and where would the user use an Uploader?

\n\n\n

Comprehensive File Upload Design Pattern: Design advice for performing a "comprehensive" (complex) file upload.

\n#FFF#CCC

5. Uploader User Testing

\n\n

: Summary of all user testing performed on the Uploader component.

\n\n

User Testing Protocol: Describes how the user testing of the Uploader will be carried out.

\n\n\n

User Testing Results: Describes how the users interacted with the Uploader prototype and what improvements can be made.

\n#FFF#CCC

6. Preparing for Implementation

\n\n

Storycards: Decomposes the Uploader into small implementable chunks

Storycard 1: Remove "pause" button
Storycard 2: "Remove" button should not display once files are being uploaded
Storycard 3: Add remaining time for upload to the progress bar.
Storycard 4: Update information at the bottom
Storycard 5: Add Cancel button (Daphne)
Storycard 6: Error: file name already exists (Erin)
Storycard 7: Allow user to create a display name & send notification (Daphne)

\n\n\n

Functional Specification: Development specification containing interaction details such as "interesting moments."

"}}}]}],"version":1}

Uploader Design Overview