ユーザーインタフェース

要点と定義

ユーザーインタフェース（UI）は、利用者とシステムとのやり取りを実現するための接点である。アクセシビリティを考慮した情報提示では、重要な情報を色だけに頼らず、文字など別の手段でも伝える。パンくずリストは現在ページまでの階層上の経路を示す。カルーセル、メディアクエリ、ハンバーガーメニューは、それぞれコンテンツの横方向の切替、表示環境に応じたスタイルの切替、メニューの表示操作に関わるUI要素・機能である。

適用条件と例

パンくずリストは、Webサイト内で現在のページがどの階層にあるかを、トップページからの経路として示す。カルーセルは、固定された表示領域内で画像などを横方向に順次切り替える形式である。メディアクエリは、画面幅などの表示環境に応じて適用するCSSを切り替える際に使われる。三本線のアイコンを選ぶとメニューが表示される仕組みは、ハンバーガーメニューである。ユーザビリティ評価では、思考発話法のように利用者が操作中の考えを話す手法があり、ヒューリスティック評価法のように専門家が原則に照らして問題を探す手法もある。

アクセシビリティに配慮するには、必須であることを色による強調だけでなく文字でも示し、色を識別しにくい利用者にも情報を伝える。画像リンクの代替テキストは、リンクの目的や遷移先の内容を理解できる説明とする。

現在のページがサイト階層のどこに位置するかを、トップページからの経路として示すUI要素がパンくずリストである。

必須項目を色だけで示すと情報が伝わらない利用者がいるため、文字による明示も加える。表組みは表形式のデータに用い、画像リンクには目的を理解できる代替テキストを与える。

パンくずリストは、トップページから現在閲覧しているページまでの階層上の経路を示す。ページ一覧やページ内の移動操作部品とは役割が異なる。

固定された表示領域内で画像などを横方向に順次切り替えて見せるUI形式をカルーセルという。

単一のHTML文書を端末の表示サイズに合わせて提示する際、画面幅などの条件に応じてCSSを切り替える機能がメディアクエリである。

三本線のアイコンを選択してメニューを表示する仕組みをハンバーガーメニューという。

思考発話法は利用者が操作しながら考えを話す評価手法である。ヒューリスティック評価法は専門家がユーザビリティの原則に照らしてインタフェースを評価する。