Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
borderStylesolid
HTML Table
stylebackground-color: #eee; margin: 15px 0 0; text-align:left; border-collapse:collapse;
Table Row (tr)
styletext-align:center
Table Head (th)
stylewidth:50%; border-right:1px solid #000

Problem

Table Head (th)

Solution

Table Row (tr)
Table Cell (td)
stylepadding:5px; width:50%; border-right:1px solid #000

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.
Table Cell (td)
stylepadding:5px 10px; width:50%;

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

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

Design Pattern

Section
Column
width25%
Panel
borderStylesolid

Users

Catalina and Christy are some of the users whose needs we primarily considered when designing the Uploader.
Fluid Personas are a collection of various types of important users whose needs we need to consider throughout the design process.

Column
width25%
Panel
borderStylesolid

Users' needs

Context of use: Where in the systems we support is an uploader being used currently?

Functional Requirements:

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

Column
width25%
Panel
borderStylesolid

Uploader User Testing

User Testing Protocol: Describes how the Uploader would be tested with the users

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

Column
width25%
Panel
borderStylesolid

Preparing for Implementation

Storycards: Decomposes the Uploader into small implementable chunks

Functional Specification: Uploader Specification