Proposal for slide details panel

Owned by Abi James
Last updated: Jan 05, 2017
2 min read
Status
IN PROGRESS
Stakeholders

Ali Khalili Klaas Andries de Graaf Kurt Junghanns Roy Meissner Soledad Valero Marios Meimaris Stavros Maroulis

Outcome
Due date
Owner
Abi James 

Background

The following UI issues need to be resolved:

  • add somewhere to add/edit tags at a slide level
  • improve UI for editing the slide title as users are reporting issues with doing this through the deck-tree
  • improve history tab UI as it is unclear to users (a) which revision is active (b) how to change between versions.

In addition, in the future we will need to add Questions to tabs below the slide area which is becoming very crowded and is below the scroll line on most monitors.

Proposal

Develop a sidebar to contain information related to the slide. Right-hand sidebar or panels are common in software UI for providing further details or properties on content (e.g. PowerPoint, Photoshop etc). This would contain the functions that the author would edit or to a user wanting to use the slide content. This could contain:

  • Slide title and ability to edit this
  • authors / contributors (and so removed from the tabs below the slide)
  • Version to replace the history tab below the slide
  • Tags for content annotations
  • "Used in" to replace the usage tab below the slide

The tab area below the slide would then be focusing on information aimed at the learner/content consumer:

  • slide activity overview (moving this back from the separate box below the decktree)
  • sources
  • questions
  • comments

At the moment this does not include any information relating to translations of the slide as discussed so far has specified that translations will be done at a deck level.

This panel or side-bar could either be located in the same place as the decktree (with the user switching between views) or on the right-hand side of the slide. Mock-ups below show that each part of the sidebar can be collapsed or expanded similar to an accoridon.

  1. sidebar mockup positioned to the right of the slide area. This is outside of the current grid width defined by Semantic-UI but may be possible if we use the sidebar component.

 


2. sidebar overlaying the decktree with the user able to switch between the 2 functions


3. sidebar shown on the expanded slide view. Again this is outside of the semanticUI grid witch but make better use of screen space on larger screens.


Discussion points

  1. does separating out the slide "properties" for the learning content improve the UI?
  2. does the sidebar/panel UI improve access to these features?
  3. should this sidebar be in addition to the decktree or replace it?
  4. should we explore using the Semantic UI sidebar component to make better use of the while width of the screen?


Any other comments welcomed!