インタフェースデザインのお約束
優れたUXを実現するための101のルール
- Will Grant 著、武舎 広幸、武舎 るみ 訳
- 2019年11月 発行
- 256ページ
- ISBN978-4-87311-894-9
- フォーマット Print PDF ePub
- 原書: 101 UX Principles
内容
デジタル製品のデザインに役立つ101の指針。製品のユーザビリティや性能を高める上で必須かつ基本のツボ、マスターすれば時間を節約し顧客満足度をアップできるテクニックが101のコンパクトなルールにまとめられています。メッセージが明確で説明もわかりやすいので短時間で気軽に読むことができます。101のルールは、タイポグラフィ、コントロール、カスタマージャーニー、各種要素の統一、UX全般に関わるプラクティスに分類されているのでリファレンス的に読むことも可能です。「よくある落とし穴」を巧みに回避し、自信をもってユーザーのために闘い、すばらしいユーザーエクスペリエンスを提供するプロへと成長させてくれる一冊です。
●翻訳者による「日本語版のサポートページ」。
●日本語版独自の8つの追加ルールが収録された「訳者あとがき」のPDF(6MB)。
というわけで、この長すぎる「訳者あとがき」では、原著者があげなかった「ルール」を追加させていただくことにした。日本語が絡むものは原著者には無理なので、そうしたものを中心に(と思ったのだが、最終的には必ずしもそうならなかった)。
原著者は001から始めて101まで書いているが、訳者は201から始めさせていただく。102から200までの「ルール」は読者諸氏に埋めていただければ幸いだ。本書のサポートページ(https://musha.com/sc/101/)からご提案をお送りいただけば、訳者がまとめて、ウェブページに(あるいは本書の『続編』で!)公開して差し上げられるかもしれない(どれくらいの方がお寄せくださるかわからないが、その努力をすることはお約束する。本書がベストセラーになってくれれば、その余裕もできるだろうが(^_^))。
——「訳者あとがき」より
●読者が考えた新ルールの「ルール提案ページ」。
関連書籍
目次
まえがき 意見と質問 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 漢字は東アジア公認のアイコンセット? 索引