みなさんにもマウスホバーで表示されるバルーン内のリンクが開けなくてイラついた経験があるかと思います. リンクにカーソルを移動しようとすると閉じてしまうバルーン 丁寧に吹き出しの三角形の部分を通ったときだけリンクに辿り着ける. イライラ棒か? こんな体験は今すぐ滅ぼしましょう. Web なら floating-ui を使うと, そもそものバルーン自体の実装も簡単にできますし, この問題への対策も 1 行で済みます. 対策 1. バルーンが閉じるのを遅延させる リンクにカーソルを合わせようとするとマウスホバーが外れ, その瞬間にバルーンが閉じてしまうのが問題の原因です. ということで, 素朴にはバルーンが閉じるまでに遅延を入れてあげると良いですね. floating-ui での実装では delay を追加するだけです. // ... const hover = useHover(context

はじめに とあるゲームをプレイしているとき、ミッションを達成する毎にToast通知が出てくるのですが、一気に複数ミッションを達成すると入れ替わりでずっと出続ける仕様で、しかもユーザー操作で引っ込ませることが出来ない。 このときToastの下に操作したいボタンがあったら？ ユーザーはストレスに感じる。(自分はストレスに感じた) しかも、そのToastを押してもミッションのページに移動できないので「それ、通知の意味ある？邪魔なだけじゃん」と思った瞬間、そもそもToastUIってどういう場面で使うべきで、どこからが"邪魔"になるのか、真面目に考えたくなりました。 正しい使い方ができる場合は全く持って問題ない まず前提として、ToastUIが悪いわけではありません。本来の用途通りに使えていれば、優れたフィードバックUIです。 正しい使い方の条件は、大きく分けて2つ。 非割り込み的であること 情報量

公開日 : 2025年6月13日 (2025年6月14日 更新) カテゴリー : アクセシビリティ / ユーザビリティ EC サイトやクチコミなどで、商品やサービスに対するユーザー評価を、星の数で示すユーザーインターフェース (UI) があります。端的な日本語表現はなさそうですが、英語では「star rating」と言うようです。 白地の背景に黄色い星印という外観が一般的ですが、それだとコントラストが低すぎて (特にロービジョンや高齢者などにとって) 星が視認しにくい可能性があります。こうした問題をはじめ、星の数による評価 (star rating) の UI は、アクセシビリティがおざなりにされることが少なくないように (実際に EC サイトなどのアクセシビリティ診断をしていて) 感じます。 この記事では、星の数による評価 (star rating) をアクセシブルにする方法について、解

ちょっと良いUIおれおれAdvent Calendar 2024 – 05日目 フォーム送信を HTML ではなく JavaScript から管理するとき、応答待ちの間はくるくるを出すのと合わせて各種入力を非活性化しておいてほしいなと思います。何か条件を満たすまで利用できないようにしておくとかも。 でも入力欄が 100 個あると全部に disabled 付けるのダルいですよね。<fieldset> を使うとひとつで済みます。あきらめないで！ デモ https://codepen.io/ginpei/pen/ByBjLYR <fieldset> <fieldset>: フィールドセット要素 – HTML: ハイパーテキストマークアップ言語 | MDN <fieldset> はフォームのグループ化を行う要素です。普通は（本来は？） <legend> と組み合わせて使います。 disabled

公開日 : 2024年3月23日 カテゴリー : アクセシビリティ / ユーザビリティ フォームのパスワード入力欄 (<input type="password">) は基本的に、入力された文字列がマスキングされ、代わりに文字数の分だけ「黒い点」が提示されるようになっています。他人によるパスワードの盗み見を防ぐためですが、ユーザーは、大半のケースでは背後から覗く人が誰もいない状況でパスワードを入力するでしょうし、入力した文字列が視認できないと正しくタイプできているか不安になったり、タイプミスしたときの修正がしづらい (どの箇所でミスしたか確信が持てず、はじめから入力し直さざるを得なくなる) といった問題もあるでしょう。こうしたことを考慮に入れると、パスワードのマスキングはユーザーの任意で解除できる (入力した文字列を表示させる) ようにしたほうが、ユーザビリティの観点では望ましいと考えるこ

JavaScriptランタイムのBunは、新機能としてシェルスクリプトをJavaScriptもしくはTypeScriptで記述し、特定のOSに依存せずに実行できる「Bun Shell」を発表しました。 シェルスクリプトは特定のシェルに依存するもの LinuxやmacOS、WindowsなどのOSは一般に、「シェル」（Shell）と呼ばれる機能を備えています。 シェルはコマンドラインインターフェイスなどのユーザーとの対話機能を備えており、例えばLinuxのコマンドラインで「ls」コマンドを打ち込むとファイルの一覧が返ってくるという動作はシェルが提供しています。 そしてシェルでは一般に、こうしたコマンドを複数つなげた一連の動作をスクリプトとして定義し実行できる「シェルスクリプト」が利用可能です。例えば、次のシェルスクリプトは、「ls」コマンドによるファイルの一覧をファイル「list.txt」に

YouTubeに公開された7分足らずの動画に世界が衝撃を受けた。 動画に写っているのは、オンラインゲームをプレーするアメリカ人の男性。 その手元にあるはずのコントローラーが、ない。 代わりとなって…

公開日 : 2022年10月17日 カテゴリー : アクセシビリティ / ユーザビリティ 各種サービスへのログイン、インターネットバンキングなどの取引実行前の本人確認、といったシチュエーションで、多要素認証としてワンタイムパスワード (†) の入力が求められることが珍しくなくなってきました。従来の認証方法であるユーザー ID とパスワードの組み合わせに加えて、都度、動的に生成される一定の桁数の数字の並びをユーザーに入力させることで、セキュリティをより強固なものにしています。 † ワンタイムパスコード、確認コード、認証コード、などと呼ばれることもあります。 ところで、このワンタイムパスワードの入力欄の実装には、<input type="password"> が用いられているケースを時折見かけます (個人的な感覚としては、インターネットバンキングでこのような実装が比較的多く見られる印象です)。

ガジェット全般、サイエンス、宇宙、音楽、モータースポーツetc... 電気・ネットワーク技術者。実績媒体Engadget日本版, Autoblog日本版, Forbes JAPAN他 Twitterは、ユーザーがツイートを転載しようと画面のスクリーンショットを撮ると、代りにリンクのコピーやOSの共有機能を利用するようポップアップ表示で勧めるテストを実施中です。 Twitter解析で知られるJane Manchun wong氏はこのテストの様子をスクリーンショットで伝え、Twitterが新規ユーザーを獲得しようとする一連の取り組みの一環だと述べています。 Twitterで見たツイートをどこかのウェブサイトやサービスを通じて誰かに伝える際、「リンクをコピー」するか「ツイートを共有」を選んで埋め込めば、見た人はリンクや埋め込みツイートからTwitterに誘導されて、ツイートを続けて読んでいくこと

僕はdotfiles系リポジトリ*1のコミット数を合計するだけで2261コミットある、.vimrcばっかりいじっていて開発が全然進まないタイプの人間で、つまり開発環境にとてもこだわりがある。 こだわりすぎて他に誰もやってなさそうな数々のカスタマイズを生み出してしまったが、やらなければよかったと後悔しているものが多くあるので、僕のような人が新たに生まれないよう、やめておけばよかったテクニックとその法則のようなものを紹介したい。 後悔しているもの C-h, C-y, C-u, C-oでウィンドウ切り替え Windows, macOS, Linux問わず以下のグローバルなキーバインドを設定している。 C-h: ターミナルにウィンドウ切り替え C-y: IntelliJかCLionにウィンドウ切り替え C-u: Google Chromeにウィンドウ切り替え C-o: TwitterかSlackに

公開日 : 2022年1月18日 カテゴリー : ユーザビリティ / 情報設計 (IA) ウェブサイトにおける情報探索の方法には、大きく分けて、ブラウズと検索があります。ブラウズとは、用意されたナビゲーションを辿ってゆくことで目的の情報に到達するもの、検索とは、ユーザーが自由にクエリ (キーワードやその組み合わせなど) を入力することで目的の情報を探し出すものです。それぞれ、以下の利点があります。 ブラウズの利点 ユーザーは、目的の情報を何と表現するかを記憶していなくても、情報探索ができる。情報の匂い (information scent) が適度にあるメニューを、順次辿ればよい。 クエリを入力するよりも、ナビゲーションをクリックやタップで進むほうが楽である (特にスマートフォンにおいて、小さなオンスクリーンのキーパッドでタイプ入力するのは面倒)。 検索の利点 ナビゲーションのステップを順

公開日 : 2021年12月29日 カテゴリー : 情報設計 (IA) YouTube の各動画には、サムズアップ (親指を立てて肯定の意味を示す) アイコンによる「高く評価 (like)」ボタンと、サムズダウン (立てた親指を下に向けて否定の意味を示す) アイコンによる「低く評価 (dislike)」ボタンが備えられています。以前は、両方のボタンに対して、それぞれが押されたカウント数が明示されていましたが、今年11月以降、片方の「低く評価 (dislike)」ボタンにおいて、カウント数が非表示になりました。 YouTube の動画表示。「高く評価 (like)」ボタンには押されたカウント数が明示されているが、「低く評価 (dislike)」ボタンには表示されていない。 YouTube 公式ブログに、この UI 変更に関する公式説明が載っています (参考 : An update to di

Enablement Bootcampを終えて -Enablement Bootcamp for Gopherizing 〜業務で使えるGoを学ぼう〜

前提 自分が嫌だと思う項目を作らない。 曖昧を許容できるようにする。 なぜその項目が必要なのかを説明する、もしくは予想できるようにする。 倫理的に、そして法的に問題ないものか確認する。 HTMLの仕様とブラウザの挙動を活用する。 システムの都合が優先される場合があるが、なるべくそれに引っ張られないように工夫したい。 分割しない 姓名、郵便番号、電話番号、年月日、時分など、入力フィールドが分かれていることがあるが、なるべくこれを避ける。フォーカスの移動が、面倒だからだ。なるべくユーザーの手間を減らしたい。 フォーム送信後のデータベースの都合や、事務処理、または運用にて必要不可欠である場合を除いて、分割しないようにしよう。 年月日や時分などは <input type="date"> <input type="time"> <input type="datetime-local"> のように標準

中央に円と三角形を重ねた静止画をスマートフォンに表示すると、必ずその画像を触ってしまう習性が現代人にあることを、千葉電波大学情報心理学部の研究チームが発見した。論文は英専門誌「イディオットサイコロジー」６月特大号に掲載された。 実験では、人の顔や風景など様々な静止画の中央に円と三角形を重ねた加工画像２００枚を用意。それらの画像を表示したスマートフォンを実験の参加者に手渡して行動を観察した。 その結果、実験に参加した５００人全員が真っ先に画像中央部をタッチする行動を見せ、さらにその中の４９０人は、何度もタッチを繰り返すしぐさを見せた。中には実験を止めるまでの１分間ずっと画面を連打し続ける人もいた。 また、図形の位置を右上や左端など中央以外の場所に変えて行った実験では、タッチする人の割合は平均６２％まで下がった。さらに、チンパンジーを対象に行った比較実験では、画面をタッチしたチンパンジーは１匹

こんにちは、Qiita開発チームのgetty104 です。 今回は2020/03/12にリリースした、QiitaのLGTM機能について、その背景と目的を説明します。 背景QiitaについてQiitaは2011年にリリースして以降、ありがたいことに順調にユーザー数が増えていき、2020年の現在では毎月700万人を超えるユニークユーザー（UU）が訪れ、6000万PVのページアクセスがあり、毎日300件以上の記事が投稿されるようになりました。エンジニア向けWebメディアとして業界トップシェアを獲得し、国内エンジニアのほぼ100％が利用するサービスとなっています。 Incrementsの全社戦略IncrementsではQiitaの他に、エンジニア向け転職支援サービスであるQiita Jobsや、社内向け情報共有サービスであるQiita Teamも開発・運用しています。また今年、Qiitaのオーディ

サイトに行くとポンとでる｢通知送っていい？｣のやつ、Firefoxはとりあえず全ブロックへ2019.11.07 18:0029,176 Victoria Song - Gizmodo US ［原文］ （ 岡本玄介 ） 邪魔くさい通知よ、サラバ。 ｢通知送っていい？｣のポップアップは、控えめに言っても“死ぬほどウザすぎ”です。定期的にウェブサイトへアクセスしているからといって、ポップアップ通知で飽和されたがっているということではないのです。 Mozillaさんグッジョブということで、Mozillaはこの問題に対抗するため、Firefox 72ではそうしたポップアップ通知を自動的にブロックし、URLバーに小さなアイコンで表示するようにしました。 変更は2段階で行なわれます。MozillaはFirefox 70から、通知ポップアップの許可オプションをデフォルトで｢Not Now（いまはしない）｣