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.

Context

 

General observation:

• Uploading a few files needs to be simple and intuitive
• Uploading large number of files can be more complex.

Workflow diagrams

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):

Lynette's diagrams reflecting the sprint wireframes:

            

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

 

sfbetz' workflow

single file upload

multi file / single work

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

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

 

 HackmasterA's 'upload first' workflow brainstorm:

Wireframes

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.

 

create work first (aka Manual, EZ)

 

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)

upload file first (aka Batch, PRO) - closest to original Sufia process

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)

• ah-upload-workflow-brainstorm-ah1-dashboard.pdf
• ah-upload-workflow-brainstorm-ah2-success.pdf
• ah-upload-workflow-brainstorm-AH3-MyFiles.pdf

Choosing a workflow

• Persona Research/Professor - Sufia Home - self deposit

 

Dashboard

New layout proposed by Anna (hackmastera)

Admin View Workflow/Wireframes (DT)

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).

 

 

 

 

Mockups in PDF: dt-admin-view-workflow.pdf

Simple Admin View Workflow/Wireframes (DT)

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: dt-simple-admin-view-workflow.pdf

 

Create New Work  (Mike T. )

• create_new_work.pdf (Middle Ground)
• create_new_work_rebound.pdf (Rebound dt plus Mike T.)
• add_files_new_work.pdf (Plus Browse Everything)

 

 

---