Android interface for the Camera Preview screen. This should pretty much follow the material guide for live object detection, with some flavoring for this specific use case. Main elements:
[x] Top app bar: A transparent header containing buttons to quit, get help, turn on flash etc.
[x] Reticle / object marker: A dynamic indicator providing visual cues to the user about how to point/move their phone, as well as some indication of progress. The guide has a separate 'object marker' which outlines partially detected objects, but I'm thinking of seamlessly morphing the reticle into this.
[x] Tooltip: A text overlay describing what the reticle is trying to convey, but in words; e.g. 'Point your camera at an object', 'Searching...', or 'Move closer'.
[ ] Onboarding experience: A full-screen tutorial popup which shows up at the start. This should be a single page, quick explanation of what to do, with imagery.
[ ] Error banner: The tooltip should not show error messages, such as 'Can't reach the internet' or 'Camera resolution too low'. These should be in a dedicated banner, drawing the user's attention and providing action buttons.
Unlike the guide, our app will continue to process frames forever rather than switching to a results screen once an object is detected. For this reason I'm thinking that the reticle should seamlessly morph into an object marker around the chessboard, transitioning without user interaction into recording the game. Additional elements for this:
[ ] Pieces overlay: The predicted board contents should come up as an overlay over each square, e.g. a knight icon over a square we think contains a knight.
[ ] List of moves: While a game is being recorded, a short list of the most recent moves should appear at the bottom of the screen.
[ ] Game history transition: By swiping up or clicking on this list of moves, the screen should transition into a non-overlay view of the game history: drawing of the chessboard with pieces at the top, full scrollable and clickable list of moves at the bottom. This is live updating, but identical to the interface used for showing historical games.
During live detection, it might be cool to use the warped image as a background instead of a drawn chessboard.
Android interface for the Camera Preview screen. This should pretty much follow the material guide for live object detection, with some flavoring for this specific use case. Main elements:
Unlike the guide, our app will continue to process frames forever rather than switching to a results screen once an object is detected. For this reason I'm thinking that the reticle should seamlessly morph into an object marker around the chessboard, transitioning without user interaction into recording the game. Additional elements for this: