記事アーカイブ
(全463件 : 27/47ページ)

フラットデザインとユーザビリティ

ここ数年、多くのウェブサイトで「フラットデザイン (flat design)」が採用されるようになり、表現手法として実質的に広く定着したと言えます。この記事では、フラットデザインにおけるユーザビリティの配慮について、考えてみたいと思います。

Apple のサイトがリニューアルされ、モバイル端末でアクセスするとモバイルサイトの形で表示されるようになりました。ここで目を引くのは、(よくある三本線のハンバーガーアイコンではない) 二本線のナビコンです。

最近では Font Awesome のようなアイコンフォントを用いるウェブサイトが増えてきました。画像アイコンに比べメリットが多く、とても便利なアイコンフォントですが、アクセシビリティ (とりわけ、スクリーンリーダーを介した情報伝達) の観点で考えると、実装において若干の工夫が必要です。

ウェブコンテンツの表現で、テーブル (表) を用いる場合は、できるだけシンプルな表組みに設計するとよいでしょう。また、データセルの中にリンクが含まれる場合は、リンク箇所の識別性やリンクラベルの明確さを意識しましょう。

Web サイトの各機能は基本的にシングルクリック (シングルタップ) で使うものですが、ユーザビリティテストをしていると、クリック対象箇所を無意識的にダブルクリックしてしまう人が少なからずいることに気付かされます。

Web ページの中にナビゲーションメニューが複数ある場合、個々のナビゲーション (<nav role=“navigation">) に aria-label を記述すると、スクリーンリーダーユーザーがナビゲーションメニューの種類を容易に把握しやすくなります。

Web サイト (ページ) をデザインするにあたっては、そのアバウトネス、つまりそのサイトやページが「何であるか？」を明確にすることがとても大切です。Web 閲覧デバイスの多様化を前提に、メインコンテンツのみでアバウトネスが伝わるようなデザインが今後は求められるでしょう。

JIS-X8341-3:2010 では、「8. 試験方法」で「実装チェックリスト」の作成が求められています。おすすめは、ウェブサイト構築の上流工程から、アクセシビリティの要件定義書として、実装チェックリストを作ってしまうことです。

Web ページに埋めこまれている動画をモバイルデバイスで再生しようとすると、キャプション (字幕) が表示されないという問題がありましたが、最新の iOS および Android では、この問題が解決しています。

ユーザーのアクションに対するフィードバックを検討する際、もとのアクションに直接応えるものではない関連情報も併せて提示したい、と思うことはありませんか？ユーザーから見た場合、それは情報ノイズであるばかりか、かえってユーザーの目的達成の邪魔になってしまう恐れもあります。