クイズで学ぶUIデザイン ユーザビリティの基本が身につく50問 発売予定

Part 1　クイズ編

Chapter 1　誰がどこで使うのか
Q1 ボタンの区別、どちらがみんなにわかりやすい?
Q2 複数選択ができるアンケート、どちらのUIがふさわしい?
Q3 韓国への一人旅。日程を比較して航空券を安く買いたい。予約しやすいカレンダーはどっち?
Q4 多国籍の人が来るコンビニ画面、どちらがやさしい?
Q5 ネットワーク診断ツールの結果表示。アメリカ向けにふさわしいのはどっち?
Column 1　UIデザインの歴史

Chapter 2　画面遷移と操作手順
Q6 階層構造、どちらがわかりやすい?
Q7 アンケートの選択肢の配置、どちらがわかりやすい?
Q8 「73」と数字を入力するとき、どちらが早く操作できる?
Q9 入力スペースへ記入するとき、どちらが直感的に入力しやすい?
Q10 数値を微調整するとき、どちらが使いやすい?
Column 2　「ヤコブ・ニールセンの10原則」と「ヤコブの法則」は別もの

Chapter 3　デバイスの制約
Q11 地デジの番組予約。テレビの画面とタブレットの画面が並んでいる。どちらがテレビの画面?
Q12 タッチパネルの数値設定ボタン、どちらがミスなく操作できる?
Q13 この2つのズームUI、どちらがスマホ向き?
Q14 本日20時20分に、大人2人、子供4人のチケットをスマホで申し込みたいとき、どちらが操作しやすい?
Column 3　ATMのテンキー配置が逆なのはなぜ？

Chapter 4　視覚心理と UI
Q15 ショップアプリの登録画面、わかりやすいのはどっち?
Q16 どちらのアイコンの視認性が高い?
Q17 新製品のおもちゃ、サイトで目を引くのはどちらの見せ方?
Q18 次に押すボタンを明確に示したいときふさわしいのはどっち?
Q19 サイトの構成。臨時休業のお知らせを確実に見せたいとき、ふさわしいのはどっち?
Column 4　エレベーターの「閉」ボタンの真実

Chapter 5　認識とUI
Q20 入力フォーム、どちらがスピーディに入力できる?
Q21 タブの表現、どちらがわかりやすい?
Q22 時間表示、どちらが残り時間がわかりやすい?
Q23 この2つのレイアウト、どちらのほうが操作の流れがスムーズ?
Q24 この2つの説明、どちらが読みやすい?
Q25 この2つの画面、どちらが選びやすい?
Column 5　世界で一番働き者のUIパーツ

Chapter 6　手がかりと UI
Q26 診察の順番、どちらが見つけやすい?
Q27 固定文字と可変文字が明確なのはどっち?
Q28 項目選択、どちらが他にも選択肢があることがわかる?
Q29 カロリー摂取量が多すぎる日、どちらが見つけやすい?
Q30 英語が選ばれているのが明確にわかるのはどっち?
Column 6　ハンバーガーメニューの誕生秘話

Chapter 7　色・形・文字
Q31 情報の重要度、どちらがわかりやすい?
Q32 医療機器の文字、どちらが見間違えにくい?
Q33 この2つの医療機器の画面、どちらが危険な状態だとすぐに判断できる?
Q34 この2つの表示、どちらの文字が読みやすい?
Q35 直感的にわかりやすいアイコンはどっち?
Q36 説明文が読みやすいのはどっち?
Q37 数値の表示、遠くからでも見やすいのはどっち?
Q38 リストの表示、1行ごとを見分けやすいのはどっち?
Column 7　WindowsとMacの「閉じる」位置が違う理由

Chapter 8　思案クイズ
Q39 スクロールが多いデザインはユーザーにどんな影響を及ぼす?
Q40 画面下部にある主要ボタンを画面上部に移動した場合、どんな問題が起こりやすい?
Q41 文字色と背景色のコントラストが弱いとどうなる?
Q42 メニューをすべてアイコンのみで表示すると、どうなる?
Q43 フォームでの選択肢をすべてプルダウンにすると、どうなる?
Q44 同じアプリ内で画面ごとにUIスタイルが違うと、どうなる?
Q45 この画面でボタンを見たとき、ユーザーはどのように感じる?
Q46 このエラーメッセージが表示されると、何が起こりやすい?
Column 8　ありなしワークショップのススメ

Chapter 9　洞察クイズ
Q47 このUIどこが問題?
Q48 このUIどこが問題?
Q49 このUIどこが問題?
Q50 このUIどこが問題?
Column 9　なしありワークショップのススメ

Part 2　スタディ編

Study 1　利用者と利用環境の考え方
1-1 UIは誰のために?
1-2 色覚の多様性
1-3 文化による違い
1-4 多言語対応における言語選択の工夫
1-5 多言語対応を見据えたレイアウト設計
1-6 まとめ
Column 10　Undo（元に戻す）が生んだ世界

Study 2　情報の構造と操作の流れ
2-1 階層構造とは?
2-2 人はどこまで覚えられる?
2-3 階層の見せ方の工夫
2-4 階層の深さと幅のバランス
2-5 慣れたユーザーは、UIをどう見ているか
2-6 まとめ
Column 11　なぜ「変な箱」は生き残ったのか

Study 3　デバイス特性と設計上の制約
3-1 デバイスによる違い
3-2 画面サイズの制約
3-3 入力方法の制約
3-4 利用環境の制約
3-5 まとめ

Study 4　視覚心理をUIにどう活かすか
4-1 視覚心理とUIの関係
4-2 ゲシュタルトの法則
4-3 進出色と後退色
4-4 錯視と誤解の回避
4-5 視線の動きと注視位置
4-6 まとめ
Column 12　彼らはUIを作ろうとしていなかった

Study 5　認識と理解のプロセス
5-1 認識と理解の違い
5-2 アイコンとラベル
5-3 用語のわかりやすさ
5-4 フィードバックと状態認識
5-5 まとめ

Study 6　行動を導く手がかりの設計
6-1 手がかりとは何か
6-2 視覚的な手がかり
6-3 行動を促す手がかり
6-4 一貫性と学習効果
6-5 まとめ

Study 7　色・形・文字による情報伝達
7-1 色・形・文字が担う役割
7-2 色の役割と注意点
7-3 形で伝える工夫
7-4 文字のわかりやすさ
7-5 まとめ

Appendix　ヤコブ・ニールセンのユーザビリティ10原則
1. システム状態の見える化
2. 現実世界との対応
3. ユーザー操作の自由度
4. 一貫性と標準
5. エラーの予防
6. 記憶に頼らない操作
7. 柔軟性と効率性の確保
8. シンプルで洗練されたデザイン
9. エラー発見と回復のしやすさ
10. ヘルプとドキュメンテーション

書籍の購入や、商用利用・教育利用を検討されている法人のお客様はこちら

図書館での貸し出しに関するお問い合わせはよくあるお問い合わせをご確認ください。

利用許諾に関するお問い合わせ

本書の書影（表紙画像）をご利用になりたい場合は書影許諾申請フォームから申請をお願いいたします。
書影（表紙画像）以外のご利用については、こちらからお問い合わせください。

お問い合わせ

内容についてのお問い合わせは、正誤表、追加情報をご確認後に、お送りいただくようお願いいたします。

正誤表、追加情報に掲載されていない書籍内容へのお問い合わせや
その他書籍に関するお問い合わせは、書籍のお問い合わせフォームからお送りください。