FLOE Metadata Authoring Design

Latest Design for Demo

Iteration 2

Download PDF:

Page 1:

  • This is the initial landing page.  On the screen there is a list that invites the user to edit an existing resource, or start a new resource.
  • There are instructions on how to use the demo. Instructions will be available throughout the demo and can be shown or collapsed as needed.
  • There is also a "restart demo" link at the top which will clear any changes to the demo content and redirect the user back to the initial landing page.

Page 2:

  • This is the initial landing page again but with the instructions are collapsed. The user chooses whether to edit an existing resource, or start a new one.
  • Note: the metadata icons (the video, audio, and CC icons) should match the values of the default metadata of that resource. Since this is a demo, the user can't save modifications to metadata, therefore these icons never change (i.e. they're cosmetic and are not "live").

Page 3:

  • User has decided to edit an existing resource. The page contains a text editor and three tabs: "edit", "preview content", and "view output HTML". The "Edit" tab is active. The content in the editor and the metadata panels display relevant information.

Page 4:

  • The "preview content" tab is selected and the content that was previously in the text editor is now rendered in the way the end user would experience the content (i.e. the editor controls are gone, all that remains is the content of the editor).

Page 5:

  • The "View output HTML" tab is active. In the interface, the HTML used to generate the content can be examined. 
  • Any modifications the user may have done to the content and the metadata while using the "Edit" tab would be reflected in the displayed HTML.

Page 6:

  • In the case the user has selected to start a new resource instead of editing the existing one, they will see the same Editor interface but without any pre-populated content.

Other notes:

  • Selecting "restart demo" will put the user back to the landing page (page 1 of the PDF). Any changes they may have done is discarded.
  • On first load of the landing page or restarting the demo, the instructions will be visible until hidden by the user.
  • Instructions are to remain visible from UI to UI until user hides the panel. This is true if transitioning to a different part of the demo (i.e. going from landing page to the editor, the instructions will stay open until dismissed).
  • The video can not be deleted from the simple editor once inserted (this is a known limitation at this time).