Functionality Description

Editor / Default view

The editor is where the user defines the content and the appearance of the prompter. In the middle, there are content segments. They’re editable text boxes without any styling and their size depends on the amount of text in them. They have a colored outline to separate them from each other visually. There’s another single-line text box at the top of each segment, which is for naming the segments. Filling the segment name in is optional. In the top right corner, there’s an X button that removes that segment, after a confirmation prompt. At the bottom right, there’s a Move icon, which the user can grab and drag to reorder segments. Next to the Move icon is a colored circle, clicking it opens a color picker (maybe just a few predefined colors) which defines the color of the segment.

At the top of the segments, there’s an Add segment button, which adds a new segment at the top of the segments list and a Clear all button, which deletes all the segments after a confirmation prompt.

At the top of the page is a unique Session ID, which the user can use to open the session on different browser windows or devices.

On the left, below the logo, are the prompter settings: Text size adjusts the prompter text size (does not affect the segments in the middle but rather the prompter itself) at a range of 30px to 250px. Letter spacing, which adjusts the letter spacing at a range of 0.8 to 3 in increments of 0.1. Line spacing, which adjusts the line spacing at a range of 0.8 to 3. Scroll width, which adjusts how much of the screen the text in the prompter takes up horizontally, the options being 50%, 75% and 100%. Scroll speed, which adjusts the speed at which the text scrolls on the prompter (this can also be adjusted in the prompter view). Flip for reflection, which flips the whole prompter view vertically in case the user has a 45% angle glass in front of the camera to project the prompter directly between them and the camera lens.

On the right side of the screen, at the top there’s the prompter preview. The bottom part of the preview is the starting screen of the prompter view, just shrunken down for the preview. The top part is the same, but vertically flipped and at a lowered opacity (to simulate projection). This means that if the user flips the prompter for reflection, the bottom part will show the upside-down version and the top part will look right side up.

Under the preview there are two text fields: Stream address, which is the URL for the prompter view (for easy copying and sending). Remote control address, which is the URL for the mobile remote view.

At the bottom right corner there’s the Update button, which updates the stream (sends any changes made to the prompter view). Under the Update button, there’s the Play button, which simply opens the prompter view in a new tab.

Prompter view

The prompter view shows the content as a teleprompter, using the settings and content made in the editor view. At the top, there’s a small instructions bar, which appears when the view is first launched and disappears when the scrolling begins. The instruction bar slides back into view when the user pauses scrolling or presses any button on their keyboard or mouse. The controls are listed in the bar: Keyboard: Space plays and pauses the scroll. Up and down arrow keys jump backwards and forwards in the prompter and left and right arrow keys decrease and increase the speed, respectively. The top bar also shows the Session ID and the instruction to use F11 to toggle fullscreen view.

There’s a colored line around each segment and the name of the segment in 37px font (in that segments color). The user can open the prompter view in as many windows and devices as they want. And using the controls on any of the devices controls all prompters simultaneously, so that they can have multiple prompters in sync with each other. The prompter, therefor, is like a live stream that can be played, paused, scrolled through etc. on any device or browser viewing it. There shouldn’t be competing commands as the prompter is supposed to be used by one person at a time, but perhaps in the future there could be a prompter view that can only be viewed. Not now though.

Mobile remote

When prompter.me is accessed with a phone, a different page is opened. This page only has a text field where the user can enter the Session ID and a Go button. The Go button takes them to a remote view, which doesn’t show the prompter, but only its controls. The big button in the middle plays and pauses the scrolling, the up and down arrows navigate back and forth in the scroll and the side arrows control the speed. There’s an Exit button on the bottom that takes the user back to the front page, so they can enter a different Session ID. There’s also a little question mark button, which opens simple instructions.

Prototype: https://xd.adobe.com/view/614443a6-af97-49a7-603e-e82e2c667a77-1775/