UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
カテゴリごとの量を棒の長さで比べるチャート。ゼロ基線の扱い、並び順、縦横の選び方、しきい値の見せ方という設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
中央をくり抜いた円で構成比を示すチャート。中央に置く値の選び方、円グラフとの使い分け、リングの太さ、凡例の作りという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
1つの値を範囲の中に置いて示す半円のチャート。範囲の両端に意味があるかという条件、しきい値の帯の設計、色だけで良否を伝えない書き方という設計判断とアクセシビリティ要件を解説する。
行と列の交点をセルの濃淡で示すチャート。濃淡で読めるものと読めないもの、色の段階の切り方、行列の並び順、値を数字でも出す判断とアクセシビリティ要件を解説する。
時間に沿った値の動きを線で示すチャート。点をつないでよいデータの条件、縦軸を切るときの書き方、系列数の上限、直接ラベルという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
全体に対する構成比を扇形で示すチャート。合計が意味を持つ条件、区分数の上限、並び順、値をどこに書くかという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
複数の軸のスコアを多角形で示すチャート。軸の順序で形が変わるという性質、正規化の根拠、重ねられる系列数、面積を読ませない書き方という設計判断とアクセシビリティ要件を解説する。
軸も目盛りも持たない小さな傾向線。数字と並べて置く理由、複数を並べるときに縦軸をそろえる必要、期間の明示という設計判断とアクセシビリティ要件を解説する。
グループごとの内訳を積み上げて比べるチャート。正確に読めるのは最下段と合計だけという制約、系列の順序、100パーセント正規化の使いどころという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
トグルボタンとは、押した状態を保持してON/OFFや選択中を示すUIです。Switch・Button・Checkboxとの違い、使う場面、aria-pressedの設計を解説します。
Context Menuとは、右クリックや長押しで表示するコンテキスト依存のメニューUIです。contextmenuイベント、Dropdown Menuとの違い、ARIA menu、モバイル対応を解説します。
ページネーションとは、一覧を複数ページに分けて移動しやすくするUIです。表示件数、ページ送り、無限スクロールとの違い、アクセシビリティ要件を解説します。