...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
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.
...
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.
...