インタラクションデザインの考察
先日、ソラコムさんの協力を得て第２２回仙台スマート勉強会にて発表させていただきました。
私は絵を書けないプログラマなんですが、開発者視点で設計（デザイン）をどう考えるべきかをテーマにインタラクションデザインの考察という内容で行いました。予想以上に反響があったのでここで、幾つか掻い摘んで紹介したいと思います。
- 設計のポイント
- シンプルに分かりやすく、機能の整合性を保つ
- できるだけ標準のコントローラを使う
- 分かりにくい場所では文字より視覚効果・アニメーションを活用する
- メッセージを減らす工夫
- システムエラー等のメッセージは表示しない
- メッセージよりイメージ（画像）で表現する
- 入力チェックを行うよりも、未入力状態ではボタン自体を非活性化する
- 文言の工夫
- 専門用語は使わない
- ボタンの表記名は挙動を表す文言で表示する
- ✕ OK、キャンセル、はい、いいえ
- ◯ 閉じる、保存する、破棄する
- 入力補助の工夫
- 入力した履歴機能などを追加する
- ドリルダウンリスト、ピッカーなどでサジェスト機能を追加する
- 初期表示時のデフォルト入力値などを検討する
- GPSの活用（逆ジオコーディングなど有効に使う）
- ジェスチャの活用
- ショートカット的な目的で補助的なジェスチャを定義すると有効
- 標準的・一般的なジェスチャは再定義してはいけない
- ダブルタップ、トリプルタップよりはロングタップの方がベター
- ボタン配置
- iPhoneではユーザーが苦なく押せる最小サイズは44px
- 画面両サイドはケースで邪魔になることがある
- 主要なボタンは大きめのボタンにする
- 当たり判定を大きくするためにボタンサイズを大きくしボタン画像を小さくするなどの工夫
- ボタンのタップアクションはタッチアップ時に開始する
- アニメーション
- トランジション系は種類と方向に一貫性を持たせる
- その表現に意味をもたないアニメーションは避け、機能を視覚的に分かりやすくする目的で使用する
- UIAlertView、UIActionSheet
- ユーザーへの通知系はAlert、ユーザーへ選択させる場合はActionSheetを使う
- 端末によってはAlertViewは描画負荷が高いので注意する
- 加速度センサーの活用
- シェイク動作を操作補助に割り当てる（感度と検知する向きはじっくり調整する）
- デバイスの方向検知に利用しない方がいい場合もある
- ※家で使うアプリでは寝ながら使用する場合がある。
- 設定値はデフォルト値を熟慮
- 利用ユーザー層を想定し最適な値をよく検討する（特にフォントサイズ）
細かい手法論やポイントは幾つか存在しますが、その実装・デザインに正解はありません。理由は対象としている使い手によって使い勝手が変わるからです。例えばフォントサイズ一つとってみても、ユーザーの年齢やユーザーロケーション（歩いている／家でゆっくり）によって変わります。
重要なことは、対象としているユーザーの立場・視点にたってUI・機能の実現手段を考えるということだと思います。開発者はコンピュータリテラシーに長けていてアプリもたくさん触れています。常識だと思っていることで一般的にはそうではないという面が多々あります。B2Cのプロダクトを作る人はこのギャップは強く意識する必要があり、何も知らないことを前提として且つ使いやすく設計する必要があります。
実装などの技術論は先行していますがUI設計についてはデバイスと環境に深く依存するため、これから世界中で最適解を試行錯誤に模索していくのだと思います。これを機にインタラクションデザインを考えるキッカケになればと思います。
勉強会で使用したスライドを貼りつけておきます。
インタラクションデザインの考察
View more presentations from Hidetoshi Mori
