タグ

uxとhtmlに関するusako1124のブックマーク (6)

  • サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable

    公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : アクセシビリティ / ユーザビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入

    サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable
  • ラジオボタンをUIに用いる時のポイントを解説!より良いサイト、アプリの利用環境のために

    ラジオボタンはフォームにおける必須要素です。互いに相容れない2つ以上のオプションがある時に使用され、ユーザーは正確に1つの選択肢を選ばなければなりません。言い換えれば、選ばれていないラジオボタンをクリックすることによって、選んでいた他のどんなボタンも選ばないということになります。 ラジオボタンは正しく使用されれば素晴らしいものです。ユーザーが間違ったデータを入力するのを防ぎます。キーボード・ナビゲーションやプラットフォームを通じた信頼できるレンダリングなど、多くの選択肢を提示してくれます。 稿では、ユーザビリティ・テストによって巧みにつくられたラジオボタンに関する実用的なガイドラインをご紹介します。 ラジオボタンの名前の由来 古いカーラジオにおいて放送局を変えるために使われたことにちなんでラジオボタンと呼ばれるようになりましたが、このボタンは1つ押された時、別の1つは飛び出すようになって

    ラジオボタンをUIに用いる時のポイントを解説!より良いサイト、アプリの利用環境のために
  • 入力フォームにおけるユーザビリティの再確認

    ユーザー登録などに必要な入力フォームですが、今もなお使いにくいフォームを見かけることがあります。U-Siteでは入力フォームについて何度も取り上げてきましたので、ここで、これまでの記事を引用して基をおさらいします。 HCD事業部・宮内 2016年5月12日 イードではHCD関連の調査業務を多数請け負っております。最近ではユーザー理解のための調査が増えていますが、一方で、基的なユーザビリティ評価業務も日々行っております。その主な内容としては、ユーザビリティテストやヒューリスティック評価によって現状のサイトやアプリの問題点を明らかにし、改善方針を提案するというものがあります。 サイトやアプリの規模、サービスの種類、運用体制などにより、存在するユーザビリティ上の問題点は様々で、新しいデバイスやデザインパターンの出現によっても変化していますが、共通した問題点もあります。その一つが、ユーザー登録

    入力フォームにおけるユーザビリティの再確認
  • 今どきの入力フォームはこう書く! HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA

    みなさん、入力フォームを制作する際、どのような施策をおこなっていますか? 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chromeデスクトッ

    今どきの入力フォームはこう書く! HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
  • 「スキップナビゲーション」を実装する|ウェブユーザビリティ向上を支援するWebsite Usability Info

    スキップナビゲーションとは、Webページの冒頭(ナビゲーションメニューの手前)に設置されたページ内リンクのことで、そのリンク箇所で[Enter]キーを押す(あるいはクリックする)と、ナビゲーションメニューを通り越して、文が始まる位置にジャンプすることができる機能です。「JIS X 8341-3:2009」の改正原案では、「ブロック・スキップ」と呼ばれています(項目番号7.2.4.1)。 特に音声ブラウザやスクリーンリーダーなどの支援技術を使ってWebページ上の情報を「上からひとつずつ順番に」見ている(聞いている)ユーザーにとっては、同一サイト内のページや何度か訪れているページを開くたびに生じる問題、つまり「いちいちナビゲーションメニューをすべて見て(聞いて)からでないとページのメインコンテンツに辿り着けない」といった煩わしさを解消することができる、便利な機能と言えるでしょう。 海外、少な

  • タブ型 UI について考える | Accessible & Usable

    公開日 : 2016年1月18日 (2020年8月30日 更新) カテゴリー : アクセシビリティ / ユーザビリティ タブをクリック/タップすると、JavaScript によって、そのタブに紐づいた情報 (タブパネル) が切り替わり表示されるユーザーインターフェース (UI) があります。限られたスペースで複数のコンテンツを併存させることができ、メタファとしてもわかりやすいと言えます。 タブ型 UI の例 今回は、このタブ型 UI について、ユーザビリティおよびアクセシビリティの観点から配慮したいことを考えてみたいと思います。 ユーザビリティの観点から配慮したいこと タブっぽく見えること 言わずもがなですが、タブ型 UI はユーザーにとって「タブっぽく」見えなければなりません。タブなのかボタンなのか微妙な UI を見かけることもありますが、仮にユーザーがそれをタブではなくボタンと認識して

    タブ型 UI について考える | Accessible & Usable
  • 1