ボタンについて
概要
今日はデジタルサイネージの中でもちょっと特殊ですが、ユーザ操作のある端末における、ボタンについて書きたいと思います。
- ボタンらしく見せる
- 細かい説明は省略ｗ 要は押せるものは押せるもののように見せるべき、ということ。
- ボタンらしく見せなくてもいいもの
- どこが押せるのかを探すゲームｗ メニューに戻るロゴ、裏設定画面のための隠しボタンなどはボタンとして見せなくてもいいでしょう。運用マニュアルにはその旨記載したほうがいいと思います。
- マウスオーバーはないほうがいい？
- 画面遷移を伴うシステムにおいて、GUIアプリケーションのようにマウスオーバーを設定していると、タッチパネルような機器の場合に、次画面に遷移してマウスが残っている場合、遷移先の画面のボタンに対してマウスオーバー効果を与えてしまうことがあります。マウスで操作するアプリケーションでない場合には、マウスオーバーを設定しないほうがいい場合があるということ。
- マウスダウンの効果
- なくても困りませんが、利用者が「ボタンを押した」と認識できるように、マウスダウンの効果は設定したほうがいいです。色が変わるとか、へこむとか、音が鳴るなどです。
- ラジオボタンの代わりとしてのボタン
- タッチパネル式の機器の場合、多くは画面に触れるだけで操作します。一般的なHTMLでもRIAでも同じですが、表示部（ラベル）全体が押せるようにするのはもちろんのこと、押されている項目について、項目全体で押されている表現にするとわかりやすくなります。例えば選択されている項目の色を変える、大きさをかえるなどです。
- チェックボックスの代わりとしてのボタン
- 同様に、チェックボックスの場合には、複数選択が許容されているので、大きさを変更するのは避けるほうがわかりやすいです。むしろ複数選択している、またはしていないことをわかってもらうために、大げさなチェックマークなど、ラジオボタンとはちょっと異なる演出が効果的なようです。また、ラジオボタンもチェックボックスも、外す操作について忘れないようにする必要があります。
- フォームの代わりとしてのボタン
- 決定やキャンセル、前、次、スキップ、上下左右、ソフトウエアキーボードなど、ボタンにも種類があるので、視覚的に安定だけを狙って全てを同じサイズに揃えるのではなく、目的に応じたサイズ、色、配置をしたほうがよいようです。ボタンのラベルを読んで区別しないとわからないよりも、同じ機能のボタンは常に同じ位置に配置する、狙って押してもらいたいボタンは大きく目立つ色にするなどの工夫が必要です。
ボタン押下時のアクション
ボタンを押した後のアクションについて考えてみます。他にもいろいろあると思うので、コメントやトラックバック等でご意見などいただけるとうれしいです。
- マウスダウンでへこむ以外のアニメーション
- パーティクルが舞うアニメーション
- ボタンそのものや乗っているアイコンなどが変形、回転、移動するアニメーション
- ボタンそのものが消失するアニメーション
- マウスダウン後の全体
- 画面全体のアルファ値変更アニメーション
- 右から左にページをめくったような遷移アニメーション
- モーダルウィンドウが透過からズームアップするアニメーション
- 画面を分割して切り替わるアニメーション（iPhoneのホームでアプリアイコンを押したような？）
- （タスクバーやドックなどから）飛び出てくるアニメーション
- ラジオボタン（選択されていないものとの差別化）
- 薄い色から濃い色に変化する
- 囲む
- 押された状態にする（へこんだままなど）
- 太字にする
- 大きくする
- 下線をひく
- チェックボックス（ラジオボタンの効果の他に）
- チェックマークをつける。マークはレ点、丸印、×印、□■、アイコンなど。
- セレクトボックス（コンポーネントでない場合などに）
- 背景を塗りつぶす
- チェックマークをつける
- 選択中を表す別の表示枠を設ける
ボタンではないボタンのようなもの
- ポップアップして見せた写真など
- 閉じるボタンはデザイン重視の小さいものより、画像全体が押せるほうが操作性がいいです。その画像を基点にいくつかの処理がある場合、上にボタンレイヤーを重ねて表示するなどの工夫は、画面内でオブジェクトをタッチして操作している、という体験をユーザに与えます。
- 動かせるオブジェクト
- つまみ
その他もろもろ
JISコード系のボタン処理など、よく使われる処理のスニペットを作っておくと便利。＜自分で作れよ
画像ボタンのサイズは通常時もダウン時も同じ画像サイズになるようにデザイナーさんに調整してもらうとよい。押した時の表示位置を狙ったとおりにするためにもこの辺りの協力は必須。できれば同じ大きさのボタンは同じサイズで切り出してもらうようにするとよい。
画像の作成にあたっては、デザイナーさんにキャンバスの解像度を確認してもらうこと。300dpiなんて高解像度の画像を Flash や Silverlight に貼りこむと悲しい目にあう。Flash で使用する前提のファイルのキャンバスは、72dpiで作ってもらうようにすると、デザイナーさんとの齟齬が少なくなる。
