記事カテゴリー : ユーザーインターフェース (UI)
(全131件 : 5/14ページ)

アイコンフォントか? SVG アイコンか?

アイコンフォントについて、アクセシビリティ問題 (音声読み上げや表示に関するリスク) を指摘する声がありますが、代わりに SVG アイコンを用いることで、解決するのでしょうか。SVG アイコンの短所も踏まえたうえで、考えてみたいと思います。

Google マップの地図を静的に画像化する

先の記事「Google マップの埋め込みについて考える」の追補として、Google マップの地図を静的な画像として出力し、マーカーを付加してウェブページに貼り付ける方法をご紹介します。

スマートフォン機種変更とワンタイムパスワード利用解除

インターネットバンキングでワンタイムパスワードを利用している場合、スマートフォンを機種変更する際には事前にワンタイムパスワードの利用解除手続きを済ませておく必要があります。ユーザーがこの手続きを忘れないためには、どうしたらよいでしょうか。

チャンク (情報の塊) が視覚的な手掛かりだけで表現される場合のラベル付け

画面デザインの都合上、チャンク (情報の塊) を視覚的にしか表現できないとしても、そのチャンクに対しては自然言語によるラベルを (視覚的には非表示であってもスクリーンリーダーでは読み上げられる形で) 付けたいものです。

パターンライブラリー

ウェブサイトやアプリケーションの開発や運営においては、一貫性のある UI を採用し、維持することが、ユーザビリティ上重要になります。UI の一貫性を保つためには「パターンライブラリー」を用意し、プロジェクト関係者の間で共有しておくと便利です。

ワイヤーフレーム

ウェブサイトの画面設計をまとめるにあたって、よく使うのが、ワイヤーフレームという手法です。ワイヤーフレームを作るにあたって、私自身が心がけていることなどをまとめてみました。

ペーパープロトタイピング

ウェブサイトの画面設計のファーストステップとして、よく使うのが、ペーパープロトタイピングという手法です。ペーパープロトタイピングについて、私自身が心がけていることなどをまとめてみました。

Google 検索結果のカード表示

Google 検索をスマートフォンで利用すると、検索結果の表示 (個々のリンク先の情報) がカードになっています。現時点で可能なインタラクションの程度であれば、このようなカード表示を採用すべき必然性は無いな...というのが個人的な印象です。

画像スライドショーの標準 UI (あったらいいな)

ウェブサイトで複数の写真を一連で見せたいケースがあると思います。ユーザビリティ/アクセシビリティ上の問題がなく、かつユーザーが没入感を得やすい UI として、ユーザーエージェント側が全画面表示の画像スライドショーを標準で提供してくれたら...と考えてみました。

アクセシブルな HTML5 <video> プレーヤー

HTML5には <video> 要素があり、動画再生のコントロールもブラウザ側が標準的なプレーヤーを自動生成してくれます。ただ、ウェブアクセシビリティの観点で見ると、ブラウザ標準の動画プレーヤーは、残念ながら不十分な感が否めません。