iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン

感想

普段何気なく使っているiPhoneの所作について改めて丁寧に解説してある一冊。無意識のうちにすらすらと使っていた「使いやすさ」の裏には何があるの？どうして無意識に使いやすいと感じるの？がきちんと分かる。iPhoneアプリにこれから携わる、という人は必読かも。各章の終わりに、わかりやすい章の要約がまとめられているので、それを読み返すだけでもかなり参考になる。 キャプやiOSの動作が少し古かったりするのだけれど、基本的に大事な部分はほぼ変わらず。iPhoneアプリを開発するなら、この一冊&Appleのガイドラインでちゃんと「お約束」を確認しておくべきであった。

以下、自分用要約まとめ。

素早い操作

まとめ

• 「５つのW」に焦点を合わせ、アプリがタップする価値のあるものとなる条件を明確にする
• 机から離れた状況で使う為の機能に集中させる。
• 「マイクロタスク」「ここでしかできないこと」「退屈だな〜」を念頭に置いて開発
• 自分のアプリを類似アプリから差別かする内容を見極める
• 「スキル」「カリスマ性」
• データを途中でほじゅうできるようにしたりコミュニティを形成できるようにしたりして長く使ってもらえるようにする
• 構想は大きく、実装は小さく
• Webサイトのアプリ版を作るときはiPhoneで使うプラスαのメリットを生み出す方法を検討する

小さなタッチスクリーン

カスタムUIパーツ作成のヒント

• ページを開いたときにナビゲーションバーにアニメーションを使って、メニュー項目が画面左からスライドして入ってくる→右側にもメニューがあるよっていう覚えてもらい方

フラットページ　ページインジケーター

• 最初の画面から最後の画面に直接ジャンプはできない

まとめ

• 人間工学的配慮が必要。手に持ったときのアプリの操作感を考える
• 主要なUIパーツは親指の届く「ホットゾーン」に置く
• マジックナンバーは４４。タップ領域は少なくとも４４pxにし、４４pxのリズムでデザインをする
• 空間には余裕を持ち、画面をスッキリさせる
• 主要な情報は画面上部に。主要なUIパーツは画面下部に配置
• 主要なUIパーツはタップしやすいところに固定。可能ならスクロールはしない
• 飾りを減らし、高機能なツールは秘密のパネルや隠し扉を使って表示する補助画面に移動させる

デザインを始める前に

まとめ

• Appleのデザインセンスを生かそう
• Apple標準のナビゲーションモデルは、フラットページ・タブバー・ツリー構造の３種類。適切な物を選ぼう
• いきなりピクセルレベルの作業に飛び込んだりせず、加味の上で全体像を考える

標準のUIパーツ

ナビゲーションバー

「戻る」ボタンの位置は絶対的なもの。ナビゲーションバーの左側がこのボタンの定位置。これ以外のUIパーツをここに置くことは避ける。

バーのアイコン

標準のボタンを利用すれば無駄な労力をかけずに済み、ユーザーが意味のわからないアイコンを見つけて首を傾げることがなくなる。アイコンのカタチに別の意味があってもその意味で使ってはいけない。

テーブルビュー

iPhoneで使われる標準尾テーブルビューはリストのことを差す

まとめ

• 標準のUIパーツを利用する。見慣れたものには権威がある
• 画面内にバーは２種類まで。画面上部にはナビゲーションバー、下部にはタブバーかツールバーのどちらか。
• 検索バーは画面上に固定するのではなく、スクロールする部分に入れてしまおう
• テキストフィールドではどのキーボードを使うかよく検討する
• 設定の数は絞り込む。そして「設定」アプリに自分のアプリの設定をいれるのはやめる

目立たせる

• デザインを始める前にアプリの「個性」を決めよう
• 色や画像をカスタマイズして標準UIパーツに個性を付加しよう。
• アイコンは個性を重視するよりも明確さを重視しよう。
• 細部に凝るよりもシルエットをすっきりさせる
• インターフェースのメタファーを現実の世界から取り入れる
• リスクを恐れずにチャレンジする

第一印象

• アプリのアイコンは機能、インターフェース、名前、ブランドを表すものにしよう
• アイコンのデザインには力強く単純なシルエットを取り入れよう
• 短い名前がベスト
• 素早く起動するかのように見せるため、起動画像をアプリのバッググラウンドに見せてカモフラージュしよう
• 「一時停止したアニメーション」による錯覚を利用する
• 初めてのユーザーのために単純でわかりやすい「玄関マット」を用意する
• アプリの初期画面は特にスッキリとした物に

スワイプ、ピンチ、フリック

• ジェスチャーの意味は経験から類推される
• ユーザーがアプリをどう使おうとするかを観察し、それをもとに採用するジェスチャーを決める
• ジェスチャーが見つけられないユーザーのために代替手段を用意する。すべての操作がジェスチャー以外の方法、表示されているUIパーツを使ってできなければならない
• シェイクは「取り消す」「やり直す」のダイアログボックスを表示するためか、何かおまけの機能のためだけにする
• 全てのタッチや動作に対して視覚的なフィードバックを表示し、控えめな効果音を補助的につける

横向き画面の活用

• まずはアプリを縦向きで最適化し、それから横向きに対応させよう
• 横向き画面では、単にコンテンツを拡大するのではなく、別の方法で表示しよう
• 入力の多いアプリなら縦横の向きのキーボードをサポートする
• 横向き画面では縦向き画面で表示している内容をグラフィカルに表現してみよう
• 重要なコンテンツや機能は回転しなくても表示されるようにしよう
• 回転でレイアウトが変わってもユーザーが迷わないようにしよう

礼儀正しい会話

• アラートは緊急のイベントの為だけに使う
• アプリがそこから先は使えなくなってしまいそうな場合や許可を必要とする場合
• アラーと画面では穏やかな説明口調を用いる
• アラート画面のデフォルトボタンには一番安全な選択肢を割り当てる
• ノーティフィケーションはユーザーが設定できるようにする
• スピナーやモーダルボタンを使ってアプリが全力で仕事をしていることを知らせる
• プログレスバーやゲームなどで実際より速く動作しているようにみせる

こんにちは、お隣さん

• 自分のアプリだけの連絡先、イベント、画像を作らないようにする
• 既存の連絡先やイベントの記録を対象にして追加や拡張をする
• 副次的機能に関しては他のアプリとリンクし、自分のアプリでもリンクを受け入れる
• 終了時点で他のアプリへリンクするようにする
• ウェブビューやマップビューに関しては「最低限」のアプローチをとり、より複雑な機能はsafariやマップアプリへジャンプするようにする