認知心理学をUX・Webデザインに活かすための119の心理法則・認知バイアスを体系化。認知負荷、意思決定、記憶、感情をUI設計へ翻訳する実践ガイド。
記事タグ: UX心理 / 認知負荷 / UXデザイン / UIデザイン / 行動心理学
記事一覧
UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
認知心理学をUX・Webデザインに活かすための119の心理法則・認知バイアスを体系化。認知負荷、意思決定、記憶、感情をUI設計へ翻訳する実践ガイド。
見出しをクリックすると対応するコンテンツを展開・折りたたむUIコンポーネント。FAQ・設定セクション・段階的開示に使われ、単一展開と複数展開の使い分け・ARIA disclosure/accordion パターンの実装を解説する。
AIアシスタントとの対話インターフェース。メッセージバブル・ストリーミング表示・ロール別スタイリング・入力欄・スケルトンローディング・エラー状態の設計パターンを解説する。
重要な情報・警告・エラー・成功をインラインで伝えるUIコンポーネント。Toastとの使い分け・4種類のセマンティック（info/success/warning/error）・role=alertとaria-liveの実装を解説する。
日付の選択・予定の表示・期間の選択を行う高度な複合UIコンポーネント。Date Picker・Event Calendar・Date Range Pickerの3種類の使い分け・キーボードナビゲーション・aria-labelの実装を解説する。
複数のコンテンツアイテムを横スクロールまたはスライドで切り替える複合UIコンポーネント。自動再生・手動ナビゲーション・インジケーター・レスポンシブ対応・アクセシビリティ（aria-roledescription・aria-live）の設計を解説する。
KPI・グラフ・テーブル・アラートを1画面に集約したデータ可視化UIのレイアウトパターン。グリッドレイアウト・ウィジェット設計・レスポンシブ対応・スケルトンローディング・フィルタリングの設計を解説する。
UIの情報密度をユーザーや用途に合わせて切り替える設計パターン。Compact・Default・Comfortable の3段階・テーブル行・リスト・カードへの適用・ユーザー設定との連動を解説する。
テキスト・コード・リッチコンテンツを編集するためのUIパターン。ツールバー・コマンドパレット・スラッシュコマンド・マークダウン入力・コードエディター・インラインフォーマットの設計を解説する。
コンテンツが存在しない状態をユーザーに伝えるUIコンポーネント。「データなし」「検索結果なし」「エラー」の3種類の設計・イラスト/アイコン/テキスト/CTAの組み合わせ・アクセシビリティの実装を解説する。
画面上に浮かんだ状態で表示し続けるパネルUIコンポーネント。ユーザーがドラッグで位置を変えたり、折りたたんだりできる永続的なフローティングUIの設計・実装を解説する。
リンクやアバターにホバーした時にユーザー情報・記事プレビュー・リポジトリ情報などをリッチなカード形式で表示するUIコンポーネント。TooltipとPopoverとの使い分け・ホバー遅延・キーボードアクセシビリティの設計を解説する。