Sufia - UI for Creating Works and Uploading Files

As part of the Dec 2015 Working Group for the Sufia UI, this is a space for discussing and collecting together proposed wireframes.

General observation:

• Uploading a few files needs to be simple and intuitive

• Uploading large number of files can be more complex.

Two workflows have been identified that satisfy the following requirements:

1. file first - upload files first for... 
   

   1. legacy systems

   2. large scale batch ingest

2. work first (aka metadata first) - create work and its metadata first to...

   1. simplify ingest for users

   2. solidify the concept of a work

   3. support the need to create a work without files

benhowell's diagram of Sufia 7 UI Upload Workflow (a translation of sprint wireframes):

Open

Lynette's diagrams reflecting the sprint wireframes:

Anna (hackmastera)'s amendment of the above "work first" workflow

Open

sfbetz' workflow

single file upload

Open

multi file / single work

Open

multi file / multi work (x files / x works)

Open

multi file / multi work (x files / y works)

Open

 HackmasterA's 'upload first' workflow brainstorm:

Open

Please add comments and questions on individual pages. Implementation note: Current Sufia upload files process is integrated with https://blueimp.github.io/jQuery-File-Upload/.  Wireframes that are compatible with jQuery-File-Upload will require less development effort to implement.

sprint wireframes  (minimal changes from current Sufia UI) - 

• work metadata entry screen

• add files

• file metadata entry screen

dt's wireframe  (rearrangement of component parts)

• Create Work (by dt)

sprint wireframes  (minimal changes from current Sufia UI)

• Sufia - Batch Upload - Step 1: Select Collection

• Sufia - Batch Upload - Step 2: Click Select files

• single-part works - Each file goes into a separate work

  • Sufia - Batch Upload - Step 3: Choose work vs. works and Step 4-spw: Click Start upload

  • Sufia - Batch Upload - Step 5-spw: Enter metadata and save

• multi-part work - All files go into one work

  • Sufia - Batch Upload - Step 3: Choose work vs. works and Step 4-mpw: Click Start upload

  • Sufia - Batch Upload - Step 5-mpw: Enter metadata and save

dt's wireframe  (rearrangement of component parts)

• Batch Upload (by dt)

hackmaster's (now outdated) upload files approach (see workflow above for context)

• Persona Research/Professor - Sufia Home - self deposit

New layout proposed by Anna (hackmastera)

Open

The more I played around with different layout ideas, the more I realized Sufia could benefit from a true admin view. I've always been a fan of how WordPress does it, so I used their admin layout and discovered that it works quite well with PCDM-flavored Sufia. Find some mockups for adding works below.

Note that these mockups include functionality not currently present in Sufia (E.g., drafts and a trash can are the two big ones). Also, at a super high level, there are basically two principal views in this design: an admin view and a user view. Admin view is all about the persistent menus that allow editors easy access to the functions they need at all times and user view is the normal Sufia interface with the blue headers and footers (the user view isn't present in these mockups).

Open

Mockups in PDF:

After getting some feedback regarding the amount of effort that would be required to implement the previous set of admin view wireframes, I came up with what I hope is a simpler approach for including an admin menu. Find the PDF below.

Workflow/Wireframes PDF:

•  (Middle Ground)

• (Rebound dt plus Mike T.)

• (Plus Browse Everything)