インタフェースデザインのお約束

まえがき

意見と質問

1章　プロローグ
    001　あなたもUXのプロになれる

2章　文字と言葉
    002　書体は最多でも2種類に
    003　あえてウェブフォントを使う必要はない
    004　フォントサイズで情報の階層を表現せよ
    005　本文は標準の文字サイズで
    006　まだ先があることは省略記号で表せ
    007　「大文字小文字の区別なし」にせよ
    008　文字色と背景色のコントラストの黄金比は4.5:1
    009　用語は製品内で統一せよ
    010　英語ページではlog inではなくsign inを使え
    011　英語のページではregisterよりsign upのほうがしっくり来る
    012　常に「顧客は生身の人間」を念頭に置いた表現を
    013　動詞は受動態よりも能動態で

3章　アイコンやボタン
    014　同一製品内ではアイコンのスタイルを統一せよ
    015　古くさくなった機器のアイコンなど使うな
    016　新たなコンセプトに既存のアイコンを使うな
    017　アイコン内でテキストは絶対に使うな
    018　アイコンには必ずテキストラベルを添えろ
    019　絵文字は世界公認のアイコンセット
    020　特徴的なファビコンを用意せよ
    021　いろいろに解釈できてしまうアイコンやマークは使うな
    022　ボタンにはボタンらしい体裁を
    023　ボタンは機能ごとにまとめ、選択しやすい大きさに
    024　ボタン全体をクリック可能にせよ

4章　UI部品
    025　作業ごとに最適なコントロールを選べ
    026　我流のコントロールなど作るな、既存のコントロールを活用せよ
    027　デバイスにもともと備わっている入力方法を利用せよ
    028　年月日の選択用のコントロールは？
    029　同一製品内では日付ピッカーのUIを統一せよ
    030　スライダーは数値化できない値だけに使え
    031　整数だけを入力してもらいたい場面なら数値入力用フィールドを
    032　選択肢が2、3個しかない時にドロップダウンメニューを使うな
    033　選択肢は多くしすぎるな
    034　リンクはリンクらしい体裁にせよ
    035　タップ可能な領域は指先サイズに

5章　フォーム
    036　検索はシンプルなテキストフィールドと検索ボタンの形式に
    037　複数行になりそうな入力欄は状況に合わせてサイズを調節せよ.
    038　フォーム入力は極力容易にせよ
    039　フォームへの入力データは極力その場で検証せよ
    040　フォームを検証したら要修正箇所を明示せよ
    041　ユーザーの入力データの形式に関しては「太っ腹」で
    042　郵便番号や住所の入力を容易に
    043　電話番号の書式は柔軟に
    044　メールアドレスの細かな検証は不要
    045　注文と支払いのページは極力使いやすくせよ
    046　決済時の情報入力は必要最低限に絞れ
    047　金額入力欄における小数点以下の位の自動追加はやめろ
    048　画像の追加を容易に
    049　ユーザーが入力したデータは指示されない限り絶対に消すな
    050　ユーザーが使おうとしている最中に動いてしまうUIなんて最悪だ
    051　パスワードは「*」に置き換えるべきだが、「パスワードを表示」のボタンも用意せよ
    052　パスワード入力欄はペースト可能にせよ
    053　「パスワードをお忘れですか？」のページでは最初から入力欄にユーザー名を表示せよ
    054　パスワードの再設定ページに関する留意点
    055　破壊的アクションは取り消し可能に

6章　ナビゲーションとユーザージャーニー
    056　初期ページはユーザーへの説明の好機
    057　初心者向けのTipは簡単にスキップできるようにせよ
    058　無限スクロールはフィード型コンテンツ限定に
    059　無限スクロールが必須ならユーザーの現在位置を保存し、そこへ戻れ
    060　始まり、中間部、終わりのあるコンテンツにはページネーションを
    061　フィードをリフレッシュされたら、読み終わった項目の次へ移動せよ
    062　ユーザージャーニーには明確な「始まり」と「中間部」と「終わり」を
    063　どのジャーニーでも常に現在位置をユーザーに明示せよ
    064　階層順に現在位置をたどれるパンくずリストを活用せよ.
    065　オプションのジャーニーはスキップ可能にせよ
    066　eコマースのサイトは標準的なパターンを踏襲せよ
    067　「既存のファイルを複製して編集」のフローを用意せよ
    068　UI要素を必須、容易、可能の3種類に分けよ
    069　ハンバーガーメニューなんて使うな
    070　メニュー項目は下部で再表示せよ

7章　ユーザーへの情報提示
    071　言葉で説明するのではなく、見せろ
    072　隠れた部分もチラッと見せよ
    073　パワーユーザー向けの設定は通常は非表示にせよ
    074　処理の所要時間が明確なタスクには全体で1本のプログレスバーを
    075　処理の所要時間が不明確なタスクにはスピナーを
    076　ループするプログレスバーなんて最悪だ
    077　プログレスバーには進捗率や残り時間を示すインジケータを添えよ
    078　検索結果は分類して表示せよ
    079　検索結果は関連度の高い順に表示せよ
    080　未保存はタイトルバーを使って警告せよ
    081　アプリの評価依頼のポップアップなんてやめろ
    082　起動画面で自社のミッションやビジョンの宣伝なんかするな
    083　「弊社のビジョン」に関心のあるユーザーなんていない
    084　通知項目は細かく指定できるようにせよ

8章　アクセシビリティ
    085　クリック可能なリンクのテキストは「読み上げ」機能に配慮して
    086　読み上げ機能に配慮して［本文へ進む］のリンクを追加せよ
    087　色覚障害者に配慮して色情報は補助情報と見なせ
    088　画面表示の拡大・縮小は常に可能にせよ
    089　Tabキーでの移動の順序は支援技術の利用者を念頭に置いて
    090　コントロールのラベルは支援技術の利用者を念頭に置いて

9章　エピローグ
    091　ユーザーの予想や期待に反した動作をさせるな
    092　デフォルト設定を過小評価するな
    093　気の利いたデフォルト設定でユーザーの作業負担を軽減せよ
    094　UIデザインではベストプラクティスの採用は盗用にはならない
    095　是が非でも「フラットデザイン」を採用したければ視覚的シグニファイアを
    096　「ファイルシステム」が理解できないユーザーは少なくない
    097　「それ、モバイルでも動く？」はもはや過去の質問
    098　メッセージ機能では定着済みのパターンを踏襲せよ
    099　「ブランド」になど振り回されるな 
    100　ダークサイドには加担するな
    101　ユーザーテストでは本物のユーザーを対象にせよ

最後にもうひと言——「単純明快」をモットーに

訳者あとがき
    201　文字情報は画像ではなくテキストで
    202　パスワードを定期的に変更させるのはやめよう
    203　「桁区切りのカンマ不要」「数字は全角で」は開発者の怠慢では？
    204　メニュー項目はユーザーが見つけやすいよう分類しよう
    205　英語として意味のとおらないカタカナ語を使うのはやめよう
    206　重要な操作をしようとしたら、アプリをアップデートしなければならないのは最悪
    207　インタフェースをコロコロ変えるのはやめよう
    208　漢字は東アジア公認のアイコンセット？

索引