記事カテゴリー : ユーザビリティ
(全180件 : 11/18ページ)

マイクロインタラクション (Microinteractions)

Dan Saffer 氏の「Microinteractions」を読みました。この記事では、本書の内容の中でもキーと言えるマイクロインタラクションの4つの構成要素、「トリガー (Triggers)」「ルール (Rules)」「フィードバック (Feedback)」「ループとモード (Loops & Modes)」について、簡単にまとめたいと思います。

「戻る」に対するフェイルセーフ

Web サイトのページ遷移の中には「リニア (直線的)」な動線のものがありますが、ブラウザの「戻る」ボタンを押した途端セッションが切れることがあります。ナビゲーション操作の手軽さが向上しつつある現在、効果的なフェイルセーフがあってもよいかもしれません。

Web ページから電話をかけるリンク

「電話番号を調べるために Web サイトにアクセスする」という利用シーンは (特にスマートフォンを使用している場合) 多く見られます。Web ページから直接電話できるリンクがあるとよいでしょう。

アプリ内ブラウザの「戻る」機能

スマートフォン用アプリのブラウザ機能で Web ページを遷移しているとき、画面左上の「戻る」アイコンをタップしたら、直前に見ていた Web ページではなく、Web ページを開く前のコンテンツに一気に引き戻された...という経験はありませんか?

そのフォーム入力欄は分割する必要があるのか?

Web サイトの入力フォームで、入力欄が細かく分かれているのをよく見かけます。このように入力欄が分かれているフォームについて、ユーザビリティの観点で少し考えてみようと思います。

ユーザビリティテストにまつわる「誤った通念」

「ユーザビリティに関する10のヒューリスティクス / Ten Usability Heuristics」のオリジナル版 (1990年) を Jacob Nielsen 氏と共に作った Rolf Molich 氏が、「Usability testing myths (ユーザビリティテストにまつわる誤った通念)」をまとめているので、ご紹介します。

Plain Language (平易な言葉)

Web サイトにおいて情報をわかりやすくユーザーに伝えるためには、どう文章表現 (ライティング) するかが重要ですが、その考えかたを表わす「Plain Language」という概念があるので、ご紹介したいと思います。

フォーム入力要素のラベル配置

Web サイトのフォーム入力要素に対するラベルの配置 (レイアウト) について考えます。チェックボックスやラジオボタンの場合は「ラベルは右」、それ以外は「ラベルが上」を基本とするのがよいでしょう。

<input> 要素の type 属性を使ったフォーム入力支援

HTML5 では、<input> 要素で使用可能な type 属性値が新たに追加されています。ユーザーが使用するデバイスによっては、この type 属性値に応じた入力しやすいユーザーインターフェース (UI) が提供されるので、「気の利いた入力支援」が可能になります。

フォームの入力必須項目のマークアップ

Web サイトのフォームの中には、入力必須の項目があります。<label> 要素の中に「必須」と書かれているだけでも実質的にはかなりアクセシブルであると言えますが、せっかくなので、よりセマンティックに (マシンリーダブルな形で) 「必須」であることを表現してみたいと思います。