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 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.
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
A Studio Settings experience for authors or course teams to toggle on/off pre-configured apps in a course
A workflow baked into the Course Outline experience for authors or course teams to configure apps at the xblock level