ソーシャルディスタンスなどと称してユーザー名や文章にスペースを挟む行為についての苦情を読んで考えたこと - 午前2時の正夢
元ネタ 生活と意見: ソーシャルディスタンスなどと称してユーザー名や文章にスペースを挟む行為についての苦情 これを読んで色々と考えたことがあった。 特に自分が広告代理店に勤務しているがあるべき抑止力になれなかったというのが大きい。 webサービスを開発しているわけでアクセシビリティとは無縁ではいられない。 多少なりともアクセシビリティに関わるなら社内でこういった企画が出たときに止めないといけないなと思った。 本来はこういう可燃性の高い話題は触れたくないが、明らかに無知とそれを許容した無教養が今後も出てくると思い、それらをせめて自分の組織においては抑止したいとおもう。 デジタルエージェンシーと”バズ”の功罪 小難しい見出しをつけたが承認やイメージアップといったものに踊らされて判断を誤ったのだとしか言いようがない。 近年SNSを使ったブランドイメージ構築が盛んだ。 シャープさんのような中の人運
UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
英国内務省 (UK Home Office) によるウェブアクセシビリティの「べき/べからず」ポスター | Accessible & Usable
公開日 : 2018年11月19日 (2023年7月19日 更新) カテゴリー : アクセシビリティ 英国政府 (GOV.UK) は、世界的に見てもっとも積極的にアクセシビリティに取り組んでいる中央政府のひとつという印象ですが (たとえば、「Make your public sector website or app accessible」というガイダンスを提供していたり、「Accessibility in government」というブログを展開していたりします)、先日 UK Home Office (英国内務省) が、ウェブアクセシビリティの「べき/べからず (Dos/Don'ts)」をまとめた啓発ポスターを制作していることを知りました。GitHub で公開されているので、ご紹介したいと思います。 ウェブアクセシビリティの「べき/べからず」ポスター (UK Home Office) 障
幸福のデザインを忘れていませんか
利潤の増大はあくまでもUCDやHCDの結果のひとつであり、主要な結果は人々の満足感や幸福であるはずだ。そのことを忘れてしまったように見える昨今の状況においては、本来、我々が目指すべき目標が何だったのかを改めて知らせることが必要だろう。 黒須教授 2019年5月20日 マーケティングに毒された最近のUXD 現在、UXD関係者の焦点は、より高いUX水準を持ち、その結果、より一層ユーザに受けいられる、つまり購入したり利用したりしてもらえる人工物(製品やサービスやシステム)の設計と提供に偏ってしまっている。これは世界中で同じような傾向が見られているが、果たしてそれで良いのだろうかという反省が見られない。少なくとも僕の耳には入ってこない。 資本主義の世界では、製造手段や提供手段をもつ人々(資本家)が、それを持たない人々に働く場や手段を提供したり、その結果として得られる産品を提供したりしてその代価とし
明るいUI or 暗いUI？ ユーザビリティから考えるUIの明るさ
SeanはCodal社の技術ライターおよびリサーチャーです。UXデザインからIoTまで、様々な話題のブログを投稿しています。 UXとUIの違いを知らない人に説明する最善の方法は、比喩を使って説明することです。UIが車の見た目だとすると、UXは運転の仕方です。またUIが出会い系のプロフィールだとしたら、UXは出会い方です。これらの比較は違いを上手く表している一方で、UIの複雑性を軽視していることもあります。 UIとは、単なる塗装やTinderのプロフィールではありません。UIとは全体の環境です。ピクセルひとつひとつが重要であり、多面的な構造を持っています。私たちは、サービスのプラットフォームを選ぶときは全体の体験を最適化できるよう注意深く考えます。一方で、配色理論やレイアウト、タイポグラフィ、フォントの選択などの小さな要素については、数秒以上かけて考慮されることは滅多にありません。 そのため
3万円でユーザビリティーテストルームをつくる - Blog.おにぎりたまごうぃんなー
ユーザビリティーテストの設計から実施までの仕事を受ける機会があり、テストルームの準備も行いました。 テストルームを借りるという選択肢もあったのだけれど、今回はデメリットのほうが大きかったので、自前で一番安くあげるテストルームを設計してみました。 都内でユーザビリティーテストができるスタジオを借りるとなると1日10万円前後くらいになると思うので、3万円で1回社内にテスト環境作っておいとくと、選択肢が増えて楽だと思う。 ( ※この記事はクライアントさんの了承を得て書いています ) ユーザビリティーテストを実施するにあたって必要な要素 接続概要図 部屋(テストルームと観察ルーム) それぞれ個室である必要はないが、テストルームは被験者の集中力を見出さないためになるだけ個室であったほうがよいと思う。 観察ルームである程度大声で話してもテストルームに声が届かない距離、仕切りは絶対にあったほうがいい。テ
定性的ユーザビリティテストのタスクの改善： 防ぎたい間違い・トップ10
ユーザビリティ調査のために適切なタスクを書くのは、科学ではなく芸術の分野の作業だ。とはいえ、そこにもルールはある。タスク作りでよくある以下の間違い10個に自分のタスクが該当していないかチェックしよう。 Write Better Qualitative Usability Tasks: Top 10 Mistakes to Avoid by Amy Schade on April 9, 2017 日本語版2017年8月7日公開 定性的なユーザビリティ調査を大きく左右するのが、テストするデザイン、テストする参加者、そして、（特に多いのが）セッションを運営する進行役である。だが、これ以外にも重要な要素というのは存在する。それがタスクである。 タスクに求められるのは、UXリサーチャーのゴールを正確かつ適切に反映すること、さらに、参加者がやらなければならないことについての明確な指示を与えることである
より良い検索フォームのための９つのベストプラクティス
検索ボックスは入力フィールドと送信ボタンの組み合わせです。検索ボックスにデザインは必要ないと考える人もいるかもしれません。たしかに、たった２つの単純な要素でしかありません。しかし、コンテンツが多いサイトでは、検索ボックスは往々にしてもっとも頻繁に使用される要素なのです。 複雑なサイトに遭遇したとき、ユーザーは労力を使わずに素早く最終目的地まで辿り着けるように、すぐに検索ボックスを探します。ですから、検索ボックスのデザインやユーザビリティは重要なのです。 この記事では、ユーザーが目的地に辿り着くための時間を節約するために、検索ボックスをどのように改善できるかを見ていきます。
ReactはなぜFiberで書き直されたのか？Reactの課題と将来像を探る
先日行われたFacebookの開発者向けイベント「F8」で、React Fiberの発表が行われていました。 といっても、React関連の新しいプロダクトが発表されたというわけではなく、Reactが一から書き直されたということのようです。 ReactはなぜFiberで書き直されねばならなかったのか？Fiberが解決しようとした課題は何なのか？ その答えを聞くために、React Fiber現状確認というブログエントリで大変詳細にFiberの事を解説されていた小林徹 (Twitter: @koba04)さんに、実際のところを詳しく伺ってきました。 React Fiberとはなんなのか、そしてReactの将来像を探ってみます。 React Fiberとは？ 白石 React Fiberってなんですか？まずは概要を教えてください。 小林 Facebookが先日のF8カンファレンスで発表した、Rea
なぜ企業はWebアクセシビリティに取り組むのか？
2017年2月15日開催のセミナー「これから取り組むWebアクセシビリティ Vol.2」で、セッション1「なぜ企業はWebアクセシビリティに取り組むのか？」に用いたスライドです。講師は作業部会1（理解と普及）委員の伊原 力也氏です。Read less
タブ型 UI について考える | Accessible & Usable
公開日 : 2016年1月18日 (2020年8月30日 更新) カテゴリー : アクセシビリティ / ユーザビリティ タブをクリック/タップすると、JavaScript によって、そのタブに紐づいた情報 (タブパネル) が切り替わり表示されるユーザーインターフェース (UI) があります。限られたスペースで複数のコンテンツを併存させることができ、メタファとしてもわかりやすいと言えます。 タブ型 UI の例 今回は、このタブ型 UI について、ユーザビリティおよびアクセシビリティの観点から配慮したいことを考えてみたいと思います。 ユーザビリティの観点から配慮したいこと タブっぽく見えること 言わずもがなですが、タブ型 UI はユーザーにとって「タブっぽく」見えなければなりません。タブなのかボタンなのか微妙な UI を見かけることもありますが、仮にユーザーがそれをタブではなくボタンと認識して
別ウィンドウを開くことの是非｜ウェブユーザビリティ向上を支援するWebsite Usability Info
（2012年1月28日追記） この記事内容をアップデートした記事を、別途公開しました。「別ウィンドウを開くことの是非 (その2)」をご参照ください。 Webサイトを制作していると、<a href="xxx" target="_blank"> などとマークアップして、リンク先ページを別ウィンドウを開くようにしたいと思うことがあるでしょう。たとえば、以下のようなケースです。 別サイトにリンクする場合 (できれば 別サイトを回遊した後、自サイトに戻ってきてもらいたい) 開いたページであれこれ操作が予想され、その間、元ページは残しておきたい場合（ブラウザの [戻る] ボタンではすぐに戻れないケースなど） お気持ちはよくわかるのですが、ユーザビリティやアクセシビリティの観点で考えると、リンクは別ウィンドウを開くべきではないと考えます。理由は、以下の通りです。 初心者ユーザーやシニアユーザーは、別ウィ
10歳のこどもから学んだユーザビリティ向上のポイント
2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子（10歳）を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい！」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います！ ↑私が10年以上利用している会計ソフト！ 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく
全日本＜label＞要素マークアップ検定
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたｗRead less
エラー (ユーザーのつまずき) をデザインで解決する | Accessible & Usable
公開日 : 2015年6月18日 (2021年2月2日 更新) カテゴリー : ユーザビリティ ウェブサイトの利用シーンでは、様々な局面でエラー (ユーザーのつまずき) が生じています。ユーザビリティテストをしていると、エラーに直面したテスター (ユーザー) はまるで自身に責があるような言動を見せることが多いのですが、実はユーザー側ではなく、デザイン側に問題があるケースが大半と言えます。 この記事では、エラーの種類を理解したうえで、どうデザインによって解決するかを、見渡してみたいと思います。 エラーの種類 D.A.ノーマン氏は、著書「The Design of Everyday Things」(日本語訳は「誰のためのデザイン？)」の中で、エラーには「スリップ (slip)」と「ミステーク (mistake)」の二種類があると述べています。 スリップ (slip) A slip occurs
Webならではの表現を見つけるために捨てるべきこと
面白いから実装で良いのか コンテンツや利用者体験を重要視する動きは Web でもネイティブアプリでも見られるものの、Web サイトデザインにおいては空回りしているように見えることがあります。ときには Web サイトよりネイティブアプリのほうが良いと思われてしまうような表現や手法が使われていることも少なくありません。 上から下へスクロールするという多くの利用者が期待するユーザビリティでさえ、パララックスデザインという表現によって破壊されていることがあります。パフォーマンスが重要視されているのかと思いきや、10 以上の JavaScript ライブラリを組み合わせた重たいサイトも未だにあります。それも「面白い表現」「ネイティブアプリのような見た目」を実現するためだけに実装されていることもあり、利用者には負荷がかかることがあります。日本人を対象にしていたとしても、誰もが高速回線でデータ量無制限と
UserZoom Platform | UserTesting | UX Research Capabilities
See what your customers experience. Get a video of a real person reviewing your website.
Googleはなぜモバイルに力を入れるのか？これからのWebパフォーマンスで注力すべきポイント
こんにちは、川田です。Googleはここ最近、デスクトップ向けWebに対して、ほとんどの関心を失っているように見えます。HTML5ブームも過ぎて、やることがなくなってしまったのでしょうか？……いえいえ、そうでもありません。昨今の待ったなしで進む技術革新の中で、彼らは「ある問題」と戦っているようです。 Webは「モバイル」中心の時代へ移っていく すでにご存知の方も多いと思いますが、GoogleのビジネスモデルはWebに強く依存しています。2014年1Qの決算で、Googleは全売上の約68%が自社のWeb系サービスの広告収入であり、約22%はAdsenseなどの他のWebサイト向けの広告であると報告しました。Webに依存したビジネスが実に9割を占め、1日に約120億円の収入をWebから得ています。もっと簡単に言えば、Webだけで、タイの国民全員の給料分ぐらい稼いじゃってます。当然、Webの進
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン原則の実践｜dely design
