Dictation
Joule / Patterns / Dictation
Intro
Dictation enables voice-to-text input. It captures and transcribes user speech in real-time offering an additional way for inputting text.
Joule dictation compact (left) and expanded screen(right)
Usage
Do
- Request microphone access from first-time users.
- Keep the keyboard visible until the user closes it.
- Provide clear listening feedback and maintain cursor position during transcription.
- Enable editing after dictation.
Don't
- Hide listening or processing status.
- Auto-submit or overwrite user input.
Anatomy
A. Input Field
Text area where users type their text input to communicate with Joule.
B. Dictation Button
Activates dictation mode and lets users input text by talking to Joule.
C. Placeholder Text
Prompts users to enter text. For example: “Message Joule”.
D. "Stop" Button
Stops dictation mode and reverts back to the default input field.
E. Soundwave
Indicates the speaking status.
F. User Input
User input is the text that is displayed as live input from users.
G. "Send" Button
Sends the message to Joule.
Regular input field (top) and dictation before speaking (middle) and dictation while speaking (bottom)
Behavior and Interaction
Basic Flow
The user initiates the dictation session by tapping the microphone icon, speaks while receiving a live transcription, and submits the query from dictation mode.
Starting the dictation from empty input field
Stopping Dictation
When a user initiates a dictation session and chooses to stop the recording before submitting, they’re taken back to the default input mode. Stopping the session does not clear the input; instead, the live transcription is persisted in the text area. This allows the user to review the captured text, make manual edits if necessary, or resume the conversation at a later time without losing their progress.
Stop the dictation while dictating
Dictation with Content
When a user has an active attachment or a specific mode selected, the dictation component adapts to include this context within the query. The user can initiate dictation while a file, such as a PDF, is attached to the message. The live transcription is captured alongside the existing attachment, allowing the user to provide voice instructions or questions related to that specific content before submitting.
Starting dictation with content
