about Interaction Design for iPhone

1. インタラクションデザインの考察
（iPhone版）
Hidetoshi Mori

2. 自己紹介
名前
森 英寿
アカウント
Twitter: @h_mori
Facebook: hidetoshi.mori
職業
プログラマ
開発言語
Java / .net / Ruby / Objective-C
アプリ開発実績
iPhone版SOICHA(TweetMe)
ATND暦

3. iPhoneの特徴
持ち運べセンサーなど多機能なデバイス
通信、GPS、カメラ、加速度センサー、地図
小さなスクリーンサイズ
480 x 320 px (retinaでは 960 x 480 px)
すべての操作を画面上にて指で行う
タップ、スクロール、ピンチ、ジェスチャ

4. 考慮すべきこと
電車に乗りながら、歩きながら、お風呂に入りなが
ら触る
通信できないことを想定
キーボードが苦痛
起動・動作が遅いと待てない
画面が小さい
不要なデザイン要素はできるだけ排除する
指で押せる最小のボタンサイズは 44 px
縦を狭く取った場合は横を広くする
ジェスチャを工夫する

5. アプリケーションの種類
ネイティブアプリケーション
Objective-Cで作る (※変換しても可)
開発コストは大きい
iPhone最適化Webアプリケーション
iPhoneのSafariで見ることを想定してサーバーアプリケーショ
ンを作る
Java/Ruby/PHP/Python/Perl etc
開発コストは小さいがチープに見えるかも
Webハイブリッドアプリケーション
ネイティブコードのWebKitを利用して作る
カメラ、マップなどはSDKを利用できる
Htmlを直に組込みしてJavaScriptで作る方法も可能

6. iOSのスペック・仕様
CPUが非力
メモリが尐ない (特にiPadは注意)
仮想メモリはディスクスワップ領域がない
メモリ警告レベルによりKillされる (異常終了)
バックグラウンドアプリはメモリ警告によりKillされる
起動が遅いとKillされる (※約20秒)

7. 対策
GPUを活用する
CoreGraphic、OpenGL ESを使用する
ユーザーレスポンスを殺さない
非同期処理を積極的に使う
(UIKitの操作はメインスレッドで行うことに注意)
画像、音声等のリソースを小さくする
インスタンスのロード、クリーンアップのタイミングを検
討する
Killされたときを考え、最終状態を随時保存する
メモリリークをチェックする (※特に大きなインスタンスは要注
意)

8. 製品定義のポイント
想定ユーザーを考慮に入れた特徴にする
初心者 or 上級者 ？
男性 or 女性 ？
タスク系 or エンターティンメント系 ？
ユーザーシーンを想定する
どこで、どのように使う ？
移動しながら or 家でじっくり ？
アプリの外観・世界観と戦略を照らし合わせて考える
AppStoreでのアプリランキングを考慮
奇抜なデザインだと目を引きやすいが長期で利用されづらい

9. 設計のポイント
シンプルに分かりやすく
機能の整合性を保つ
標準コントローラを可能な限り使う
メッセージを減らし、視覚効果を活用する
専門用語を避ける
キーボード入力を最低限にする
ユーザーが解決出来ないエラーメッセージは表示しな
い

10. 設計のポイント
ジェスチャはUE向上に有効
標準的なジェスチャは再定義しない
ジェスチャの定義は補助機能として捉える
（ジェスチャ機能を認識されない場合がある）
ダブルタップより長押しが操作しやすい
アクションに対して必ずレスポンスを返す
処理中マーク・プログレスバーの表示
ユーザーへの通知は音のみでは不十分
(ミュートされているかも)
ボタンハイライトの利用
（アクション処理開始はTouch up insideが基本）

11. 設計のポイント
iPhone画面の両サイド位置に主要なボタンを配置しな
い
ケースの種類によっては押しづらい
配置する場合、大きめのボタンにする等の工夫
UIAlertView、UIActionSheetの使い分け
通知系はAlert、ユーザ選択はActionSheet
UIAlertViewは描画負荷が高いので多用しない
アニメーションに一貫性をもたせる
トランジション系アニメーションは種類と方向に概念
がある
不要なアニメーションは避ける

12. ヒューマンインターフェースの原
則
※ヒューマンインターフェースガイドラインより抜粋
メタファ
実世界のオブジェクト、アクションを実装する
何かに触っている感覚を実装する
標準コントローラに可能な限り準拠する
Ex）スライド式スイッチ、ピッカー
見る・示す
可能な限りキーボードを操作させない
リストの表示・ピッカー等を使用する
入力エラーチェックではなく入力させない工夫

13. ヒューマンインターフェースの原
則
※ヒューマンインターフェースガイドラインより抜粋
フィードバック・ダイレクトオペレーション
ユーザーアクションには見える変化を与える
ハイライト処理等
音によるフィードバックは避ける
ユーザーはミュートにしている可能性がある
操作の結果を即時に応答させる
重い処理がある場合は非同期実装させる
（UIViewの制御はメインスレッドで行う）
長い処理の場合は状況を通知させる
インジケータ・プログレスバーを利用
アニメーションの利用

14. ヒューマンインターフェースの原
則
※ヒューマンインターフェースガイドラインより抜粋
ユーザーコントロール
ユーザーからアクションを起こさせる
キャンセルできる機会を与える
プログレスバー・キャンセルボタン配置等
外観と整合性
アプリケーション外観は機能性に強い影響を持つ
美しくする基準ではなく機能との整合性をとる
主要機能以外の装飾は控えめにする
一貫した外観と機能性・アニメーションを設計す
る
意味のないアニメーションは避ける

15. 私見
標準アプリケーションの動作は模倣すべき
文字より視覚性を重視する
ボタンの配置には熟慮する
ユーザーはダイアログメッセージを読まないこ
とを強く意識する
初めて利用するユーザーに対しての操作を誘導
するナビゲートは非常に有効
始めからローカライズを意識した設計を心がけ
る

16. ご清聴ありがとうございま
した
m(_ _)m