現場の「あるある」から学んだ 今すぐ使える「UIデザイン」41の法則【PDF版】 発売予定

序章　UIデザインとはなにか？
・UIはユーザーとシステムをつなぐ「接点」
・UIデザインと混同されやすい領域のデザイン
・UIデザインに求められる視点
・「良いUIデザイン」の3つの指針
・指針①10のユーザビリティヒューリスティックス
・指針②UX5段階モデル
・指針③WCAG
・本書の「読み方」
・ナビゲーター「UIじぃ」

Part1　飲食店の注文管理システムを通じて、業務支援システムUIの基礎知識を学ぶ
【アカウント登録①全体】
・プロダクトを使い始める準備をスムーズに進める
・01.要素の意味は「色の違い以外」で伝える
・02.重要な情報は常に表示する
・03.「ユーザーの現在地」を示す
・まとめ

【アカウント登録②入力】
・ユーザーの操作の手間を最小限にする
・04.自動入力を活用する
・05.デフォルトの値をユーザーに合わせる
・06.入力内容に合ったサイズにする
・まとめ

【オンボーディング】
・プロダクトの機能や操作方法を簡潔に伝える
・07.「スキップ」をできるようにする
・08.操作方法を分かりやすく提供する
・09.内容に合ったオンボーディング手法を選ぶ
・まとめ

【データ一覧①カードビュー】
・複雑な情報をひとまとまりでわかりやすく表示する
・10.並び順や絞り込み条件を表示する
・11.「情報の総量」を表示する
・12.押した結果が想像できる見た目にする
・13.コントラスト比は一定以上に保つ
・14.テキストの行間や文字数を読みやすくする
・まとめ

【データ一覧②操作】
・ユーザーの予想を裏切らない
・15.操作が正確に行えるサイズにする
・16.スクロールできることを示す
・17.「機能の違い」を見た目に反映する
・まとめ

【インサイト：道具としてのユーザーインターフェース】
・UIの本質を理解する
・「道具的UI」
・「広告的UI」
・デザインの目的の違いが生むもの
・中間的な存在～ECサイトの例～
・データとの関係性～「道具的UI」の核心～
・なぜ「道具的UI」が重要なのか

Part2　従業員の評価管理システムを通じて、複雑な機能を使いやすくデザインするポイントを学ぶ
【データ一覧　テーブルビュー】
・機能や見た目を業務フローに合わせて最適化する
・18.コンポーネントらしさが伝わる見た目にする
・19.データがない状態であることを表現する
・20.日付・時間をわかりやすい表記にする
・まとめ

【データ詳細①閲覧】
・情報の優先度を判断し、視覚的に表現する
・21.情報をグループ化する
・22.要素に優先順位をつける
・23.アイコンは補助的に使用する
・まとめ

【データ詳細②削除】
・重要なアクションの誤操作を防ぐ
・24.「削除」はほかの機能と区別する
・25.削除のしやすさを情報の重要性と合わせる
・26.ボタンテキストは動詞で表現する
・まとめ

【データ詳細③フィードバック】
・操作に対し適切かつ迅速なフィードバックを行う
・27.操作に対するフィードバックを返す
・28.操作箇所とフィードバックの位置を近づける
・29.ユーザーの操作を中断させない
・30.ボタン・リンクであることを示す
・31.リンクと遷移先の画面タイトルを揃える
・まとめ

【新規データ入力①入力】
・情報の形式に合った入力方法を用意する
・32.入力条件は事前に提示する
・33.定型的な内容の入力時は選択肢を提示する
・34.同じように使えるコンポーネントを使い分ける
・35.複数の入力方法を用意する
・36.「戻る」「閉じる」「キャンセル」を正しく使い分ける
・まとめ

【新規データ②エラー】
・ユーザーのエラー解消をサポートする
・37.システムメッセージは内容に応じた見た目にする
・38.システムメッセージは「身近な言葉」を使う
・39.エラーメッセージはエラーの近くに表示する
・40.メッセージにエラーを解消する方法を記載する
・41.エラーを過剰に表示しない
・まとめ

• ご購入等に関する問い合わせ