Object detection: live camera - Material Design

a visual search (a search query that uses an image as input)

These guidelines cover the detection of a single object at a time.

Principles

Navigate with a device camera

To educate users about how to search with their camera, provide onboarding and persistent instructions.

Keep the camera clear and legible

カメラの領域を最大化するために、その他のUIは上下に配置し、カメラの上に重ねるものは半透明に

Provide feedback

照明条件や物体との距離感などによる問題を修正してもらうためのFeedback

Error states should:

componentやmotionで示す

どうすれば改善するかの説明を含むこと

例えば、バナーに Nor results found, 詳細はここ、とか Move closerとバルーンを表示したり

Components

https://scrapbox.io/files/611447cb80fb8c001c8a8910.png

https://scrapbox.io/files/611447d27a8ded001c97b1e4.png

1. Top app bar

常にこれらにアクセスできるべき

終了ボタン

brightnessの調整（フラッシュとか）

ヘルプボタン

カメラの上に重ねるので、solid colorかgradient scrimがベター

既存のTop Barのprinciplesにも従っている

Persistant,

2. Reticle

どこに物体を写すか

camera viewfindersにinspired

これ自体をアニメーションして、状態を伝えるのが良い

3. Object marker

検出したらコーナーだけ表示して、closeすることを伝え、closeしたら検索して、みたいな

4. Tooltip

errorはtooltipでなくbannerにするべき

目立たせるのと、アクションするためのボタンを提供するため

5. Detected image

検出結果の画像は

何を検出したか確認のため

検索結果との比較のため

エラー時に説明するため（複数物体含んでるとか、ぶれとか）

6. Modal bottom sheet

visual search result

Experience

Live camera visual search happens in three phases:

Sense: Use the camera to look for input

app should

Describe how the feature works

on-boarding experience

エラーは最初に全部説明せず、起きたときに説明すれば良い

help sectionは設けるべき

Communicate the app’s actions

カメラが探してますよ～がわかるようにする

Guide how the user controls the camera and suggest adjustments

detection timeoutを設けて、Tprobue finding a match?とヘルプのバナーを出す

Recognize: Detect and identify an object

Mark the detected object

検出したことをしらせる

Display a prompt for the user to start a search

検索しますよをprogressを出し、カメラ位置をキープしてもらう

実際に検索を開始する前のディレイ

あるいは、キャンセルを選択することも可能にする

Display search progress

検索中の表示

検索中は検出とlive cameraを停止させると良い

ずっとデバイスを構えている必要なし

常にtooltipでサポートするの良いなあ

Make corrections

Small image size

もっと近づけて

Network connection

Communicate: If a matching object is found, communicate that to the user

Display the detected object

To allow comparison between the detected object and search results, display a thumbnail of the detected object above the modal bottom sheet.

Provide fast navigation

カメラに戻れるように

Evaluating search results

No results found

画質が悪い、学習していない、など

検出できなかったことと、ヘルプを提示する

Poor results

low confidence scoresのときは、再検索しますか？でtry againさせる

そもそも表示しないという手もある？

物体サイズなどを指示して、そもそもこのstateに入れにくくするのが良いか

Theming

retail app.

これに組み込んだらどうなるかの例

reticle, tooltipなどを変更している

この根拠が知りたい。どうやって決めたのか。理論に基づくか、直感か、A/Bテストなどユーザーテストか