...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
UX Mock Ups and Product Vision
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:
...
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
End-to-end workflow
...
An Administrative Dashboard experience for admins to configure tools at the org or instance level
...