For the first-run dialog, we can either use a horizontal scroll, which is closer to the desktop version but somewhat awkward with the voice switching and controls:

Or we can use a more canonical layout, which I slightly prefer. It feels less weird if we default to the 2nd option (Basic), but the hierarchy and voice selection might be a little unclear:

I will also post the designs for the highlight feature here. Let's add a highlight button to the right edge of the panel/toolbar, and a settings button to the left edge of the toolbar only. Tapping on settings will open the panel. Tapping on highlight will open a popup similar to the one on desktop, except that it's positioned right above the panel/toolbar and expands upwards instead of downwards, so that buttons are easier to tap after tapping highlight. All actions are achievable by buttons: delete, extend to previous, move to previous, move to next, extend to next, format.

When credits are about to run out, if the panel is open, display the remaining time in red; if only the toolbar is visible, replace the settings button with a button showing only the remaining time in red. Tapping on this button will open the voice picker, so that you can switch to a different voice or purchase credits if you wish. In the voice picker, the Basic options will be largely the same as the Advanced options, except for the Remaining Time part, which I think is still being decided on.

On iPad, the highlight popup is positioned right below the navbar, and extends downwards just like on desktop. It should have a minimum width of 320px to accommodate all the buttons, and maximum width of ~500px, horizontally centered in the reader area while making space for the annotation toolbar.

Note that these mocks are sized 744*1133 (iPad mini). When the window is narrower than that, I think we have to adopt the mobile approach and move the TTS controls and highlight popup into the bottom of the reader area, and allow the highlight popup to cover the sidebar area if the reader area is too narrow.

Let me know if I've missed anything here.

AI Voices #1231

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions