UX Mock Ups and Product Vision

Static Wireframes on Figma

Placement Case Studies: WIP

Annoto

• Function: social annotation tool for video (and pages)

  • overlay:

    • layers on top of all video

    • allows faculty to input quizzes along the way that is graded, grade passback

    • comments and chat discussions on the video (with text, audio or video responses possible)

    • all interactions in a transparent layer on top of the video

    • annotation of page or documents also take place on a transparent layer above content

  • learning analytics tab

    • a tab where instructors can interact with learner analytics from all interactions of user with overlay

Ed(STEM)

• Function: discussion tool + coding lessons + IDE for scalable peer coding

  • pop-up/ new tab

    • recommended for IDE and peer coding

  • embedded, in-line

    • in line exercises that allow

  • side panel

Yellowdig

• Function: course discussion and learner + graduate community tool

  • side panel

    • for ongoing discussions to drive live learner engagement

  • in-line

    • for quick discussion prompts, perhaps graded, with automatic grade passback

    • peer to peer learning, social learning

  • discussion section tab

    • a separate discussion or community space for learners to interact with their peers/cohort and form community bonds, supportive relationships, etc

UQ or Edly Self reflection tool

• Function: learner self reflection space in support of metacognition and growth mindset

• In-line/ Embedded, end of unit

  • quick prompts inviting learners to interact with content

• section at bottom of page

  • longer form prompts or problem sets that invite reflection

• eventually forming the core basis of learner notes that can be downloaded and kept after a course has completed

LTI Placement Options UX/UI:

WIP

Options related to placement of LTI tools for organizations and instructors. When deciding on the best placement we also need to ensure consistent interactions across the platform. At this time, the new Studio UI is a WIP. At this time, however, we could draw inspiration to the new Files and Uploads UI.

Modal Overlay

• A modal presents a required action to a user, which blocks the use of the rest application until the action is completed, or the modal is exited.

• Anatomy of an optimal modal:

  Open

  

  Source: UX Movement

• The Nielsen Norman Group define modals / non-modals as the following:

  • Modal overlay: Content on page is disabled until the user interacts with the modal.

  • Non-modal overlay: User can still interact with the background content.
    
    

    Open

    

    Source: Nielsen Norman Group

• The current Files and Uploads UI incorporates modals as follows:
  
  

Non-modal Overlay

• A non-modal overlay can show advanced controls, explanations, or help. They’re often used when a task is not critical, and don’t block the use of the rest of the application. They can be disruptive, especially when obscuring important information.

• Google Mail uses a non-modal overlay to compose new email messages. You can continue using the entire application with it open, or minimize it without losing your draft.

• There are many different examples of non-modal overlays. For the purpose of this document we have selected two options that might serve as inspiration for LTI Placement:
  
  

  Files and Uploads:
  It seems the new Files and Uploads will include non-modal overlays.

   

   

  Squarespace:
  Uses non-modal overlays in their website editor.

Slide-out Modal

• A slide-out modal is a panel that slides in over the application, partially covering the underlying content. It’s best used when a user needs to see additional content or functionality without leaving their current view.

• On desktop is should slide-out from the right of the screen. While on mobile it can slide up and cover part of the viewport, or cover the entire viewport.

  Contentful:
  Contentful stacks slide-out modals one on top of each other.
  
  

   

Inline Accordion

• Inline accordions display content within the given page. When a user selects a link or button, a panel opens below it displaying the content in question.
  
  

New Tab

• When the user performs an action, a new page opens in a new tab.

• According to the Nielsen Norman Group:

  Carefully examine the user’s context, task at hand, and next steps when deciding whether to open links to documents and external sites in the same or a new browser tab… There is generally one good reason to open a page in a new window, and that is that the user will need to refer to that content in order to complete a task in another window… Users performing casual, laid-back tasks were far less bothered by new browser tabs or windows than users who were in high-pressure or time-sensitive scenarios.

  Given the LTI tool might need to be added within context, opening up the available tools in a new tab probably won’t be a good option.

  Files and Uploads
  If we decide to go the new tab route, we could align our design to the below.

Dropdown

• Similar to how Figma installs plugins: https://help.figma.com/hc/en-us/articles/360042532714-Use-plugins-in-files#:~:text=Figma%20design%3A%20Click%20Resources%20in,select%20the%20plugin%20under%20Recents.. This might be a nice way to keep the interface free from clutter. The user could always choose “more” and it could open a sidebar.

Popup

• Not to be confused with the modal! A popup appears on top of the current content, and is usually triggered by an interactive element. Popups are generally smaller in size and house less content than modals. Users can often still interact with the underlying content without the popup being closed.

Conceptual Visualizations

1. End-to-end workflow

2. An Administrative Dashboard experience for admins to configure tools at the org or instance level

3. A Studio Settings experience for authors or course teams to toggle on/off pre-configured apps in a course

4. A workflow baked into the Course Outline experience for authors or course teams to configure apps at the xblock level