Supercharged Learning Through Annotations
AI Experiment • Interaction Design
DEMO
DEMO
DEMO
Supercharged Learning Through Annotations
AI Experiment • Interaction Design
Learning requires managing multiple information sources
Learning requires managing multiple information sources
When users engage with complex topics (mathematics, programming, scientific concepts), they frequently encounter unfamiliar terminology that requires clarification.
When users engage with complex topics (mathematics, programming, scientific concepts), they frequently encounter unfamiliar terminology that requires clarification.
Current behavior forces users into one of these paths:
Current behavior forces users into one of these paths:
Open new chat threads for each clarifying question
Open new chat threads for each clarifying question
Open new chat threads for each clarifying question
Navigate to external resources (Wikipedia, documentation)
Navigate to external resources (Wikipedia, documentation)
Navigate to external resources (Wikipedia, documentation)
Interrupt main conversation flow and pollute context
Interrupt main conversation flow and pollute context
Interrupt main conversation flow and pollute context
Switching context comes at a cognitive cost
Switching context comes at a cognitive cost
When you switch between tasks while trying to learn something, your brain is significantly worse at storing that information into long-term memory compared to when you focus on just one task at a time (Linger et al., 2024 ; Muhmenthaler & Meier, 2019).
When you switch between tasks while trying to learn something, your brain is significantly worse at storing that information into long-term memory compared to when you focus on just one task at a time (Linger et al., 2024 ; Muhmenthaler & Meier, 2019).
Frequent interruptions hamper the process of consolidating information into long-term memory, thereby affecting our ability to learn and retain new knowledge effectively. Context switching creates attention residue - a phenomenon where thoughts about previous task persist and intrude while performing another task (Schmitz & Krämer, 2023 ; Tugtekin & Odabasi, 2023).
Frequent interruptions hamper the process of consolidating information into long-term memory, thereby affecting our ability to learn and retain new knowledge effectively. Context switching creates attention residue - a phenomenon where thoughts about previous task persist and intrude while performing another task (Schmitz & Krämer, 2023 ; Tugtekin & Odabasi, 2023).
What if we could just ask Claude a few things on the fly without having to navigate away, open a new chat, or crowd the current thread.
What if we could just ask Claude a few things on the fly without having to navigate away, open a new chat, or crowd the current thread.
— Me, 30/M, Heavy Claude User
Annotations build on existing patterns
Annotations build on existing patterns
Claude supports contextual actions in artifacts. Improving a piece of text will trigger an input field dialog for user query while asking for an explanation will trigger a message with the query "Can you explain this section to me in more detail?" and the highlighted section.
Claude supports contextual actions in artifacts. Improving a piece of text will trigger an input field dialog for user query while asking for an explanation will trigger a message with the query "Can you explain this section to me in more detail?" and the highlighted section.
Contextual menu in artifacts
Examples of improve (top) and explain (bottom) query
In addition, there are two examples of adapting chats. Users can branch a conversation at any point and these can be nested indefinitely although there are no obvious visual cues, unless they hover on the specific message
In addition, there are two examples of adapting chats. Users can branch a conversation at any point and these can be nested indefinitely although there are no obvious visual cues, unless they hover on the specific message
Incognito chats on the other hand work just like a regular chat, with all the features available except that they aren't stored in a user's history.
Incognito chats on the other hand work just like a regular chat, with all the features available except that they aren't stored in a user's history.
Branching a message by editing its content
Branching a message by editing its content
Incognito chats aren't saved to history
Incognito chats aren't saved to history
Index
Index
Creating a lightweight, isolated thread system
Creating a lightweight, isolated thread system
Annotations are anchored to the main conversation, with limited functionality and UI, optimized for focused queries. Contextually isolated, they don't pollute the main thread's history or derail the conversation flow.
Annotations are anchored to the main conversation, with limited functionality and UI, optimized for focused queries. Contextually isolated, they don't pollute the main thread's history or derail the conversation flow.
Annotation dialog
Annotation dialog
Visual cues in chat history
Visual cues in chat history
Annotations can be upgraded to regular chats
Annotations can be upgraded to regular chats
A comparison between regular chats vs. annotation threads:
A comparison between regular chats vs. annotation threads:
Annotation threads count towards daily limits but they don't consume a chat's context window. Each annotation maintains its own conversation history.
Annotation threads count towards daily limits but they don't consume a chat's context window. Each annotation maintains its own conversation history.
interface Annotation { annotation_id: string; title: string // Connection to main conversation trigger: { message_id: string; // Which message has the highlighted text text: string; // The highlighted text start_index: number; // Character position start end_index: number; // Character position end (exclusive) }; // Content messages: AnnotationMessage[]; // State status: "active" | "upgraded" | "deleted"; upgraded_to_conversation_id?: string; // Metadata created_at: string; updated_at: string; }
interface Annotation { annotation_id: string; title: string // Connection to main conversation trigger: { message_id: string; // Which message has the highlighted text text: string; // The highlighted text start_index: number; // Character position start end_index: number; // Character position end (exclusive) }; // Content messages: AnnotationMessage[]; // State status: "active" | "upgraded" | "deleted"; upgraded_to_conversation_id?: string; // Metadata created_at: string; updated_at: string; }
Three-tier navigation system
Three-tier navigation system
Users can navigate between annotations using the weighted timeline on the right, clicking on highlighted pieces of text or by using the in-panel controls.
Users can navigate between annotations using the weighted timeline on the right, clicking on highlighted pieces of text or by using the in-panel controls.
DEMO
DEMO
DEMO
Mobile experience
Mobile experience
The interaction model for mobile is simplified taking into consideration existing app and OS-specific patterns.
The interaction model for mobile is simplified taking into consideration existing app and OS-specific patterns.
DEMO
DEMO
DEMO
Annotation threads on iOS
Annotation threads on iOS
Sheets are used to accommodate the annotation UI and distinguish it from the main chat. The timeline is removed to avoid crowding and instead a list of all annotations is made available.
Sheets are used to accommodate the annotation UI and distinguish it from the main chat. The timeline is removed to avoid crowding and instead a list of all annotations is made available.
List view of all annotations
List view of all annotations
Existing pattern for artifacts
Existing pattern for artifacts
Reach a state of flow
Reach a state of flow
Studies have shown that it takes around 15 minutes of uninterrupted work on a task to reach a state of flow, where you give complete attention to one activity (Poon et al., 2020).
Studies have shown that it takes around 15 minutes of uninterrupted work on a task to reach a state of flow, where you give complete attention to one activity (Poon et al., 2020).
Annotations make this easy by helping users reduce concurrent chats and increase engagement depth. Currently, there are not direct competitors offering a similar feature. This would position Claude as a learning assistant for complex domains in an increasingly competitive and crowded market.
Annotations make this easy by helping users reduce concurrent chats and increase engagement depth. Currently, there are not direct competitors offering a similar feature. This would position Claude as a learning assistant for complex domains in an increasingly competitive and crowded market.
More focused engagement
More focused engagement
More focused engagement
Better learning outcomes
Better learning outcomes
Better learning outcomes
About this work
About this work
This is a concept prototype exploring how spatial organization could improve learning workflows in AI chat interfaces. Open to discussing technical feasibility and iterations.
This is a concept prototype exploring how spatial organization could improve learning workflows in AI chat interfaces. Open to discussing technical feasibility and iterations.