操作の数より、選べることを決める
利用者が最初に知りたいことと、操作した後にわかることを一組にします。商品の形を見る、用途を選ぶ、展示の説明を読み分けるなど、目的に必要な操作から検討します。
日本アニメ風のバンドMVを紹介する場合も、楽曲を見る入口と、メンバーや制作の背景を選ぶ入口では役割が違います。映像を自動で流すことと、自分で内容を選ぶ体験を分けて設計します。
伝えたい内容から、操作を選ぶ
| 伝えたい内容から、操作を選ぶ | 使い方の例 | 一緒に確認すること |
|---|---|---|
| 選択を切り替える | 用途や条件を選び、関係する説明を表示する。 | 何が選択中か、結果がどこに出るか、選び直したときに何を保つか。 |
| 対象を動かして見る | 立体や図の見たい箇所を選び、角度や説明を変える。 | 動かせる範囲、元の向きへの戻り方、操作なしでも必要な情報を読めるか。 |
| 順序をたどる | 場面や質問を選び、続く説明へ進む。 | 現在位置、前の場面へ戻る方法、途中から再開する範囲。 |
入力と変化を、一続きで確かめる
- 最初の操作を決める
入口の説明を読み、何を押すと何が変わるかを確かめます。押せる箇所と、説明だけの箇所を見分けられるようにします。
- 選択後と戻り先を試す
選択した内容、表示が切り替わる場所、読み込み中の案内を確認します。選び直しや戻る操作で、利用者が現在位置を見失わないかを見ます。
- 別の操作でもたどる
タッチ、マウス、キーボードなど、想定する方法で同じ目的へ進めるかを確認します。動きを減らす場合や読み込めない場合は、静的な説明と次の行動を用意します。
公開後まで含めて決める条件
- 掲載する場所と素材
- 単独のページか、既存サイトの一部かを共有します。原稿、画像、立体データの版と使える範囲を揃え、組み込み先との担当分担を確認します。
- 試す端末と環境
- 対象の端末・ブラウザ・画面幅と通信条件を決め、実際に確認した範囲を記録します。すべての環境で同じ動作になることを前提にしません。
- 更新と入力の扱い
- 誰が何を更新するか、更新後にどの操作を再確認するかを決めます。入力を保存するなら、保存の目的・項目・利用者への案内も整理します。
仕組みを増やす前の相談
凝った動きがないと、体験型のWebになりませんか。
選択に応じて必要な説明へ進めるだけでも、目的に合う場合があります。理解や判断に役立つ変化を優先し、装飾的な動きは必要性と操作への影響を見て選びます。
既存サイトに後から追加できますか。
組み込み方と既存サイト側の制約を確認して範囲を決めます。現在のページ、利用環境、更新方法を共有いただき、代表的な操作から試す進め方を相談します。