人に優しいフォームを作ろう、特に日本人に
皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも
ボタンをaタグで作るな高校校歌 - 弁護士ドットコム株式会社 Creators’ blog
まずはこちらをお聞きください。 技術的解説: ボタンを a 要素で作るな a 要素は URL などへのリンクをつくるためのもので、button 要素はなんらかの処理を起動するボタンをつくるためのものです。 配置されるものがリンクなら a 要素で実装し、ボタンなら button 要素で実装すべきです。 これに違反すると、意図しない動作や、アクセシビリティ上の問題が発生します。 これは MDN でも詳しく説明されています。 onclick イベント -- \<a>: アンカー要素 - HTML: ハイパーテキストマークアップ言語 | MDN よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、href を # または javascript:void(0) に設定してページの再読み込みを防ぎ、click を待ち受けするようにするというものがあります。 これらの偽の
ケンタッキーフライドチキン 公式モバイルアプリ、公式Webサイト（2024年3月末まで提供） | チームラボ
アプリ インフラ構築 保守運用 ケンタッキーフライドチキン 公式モバイルアプリ、公式Webサイト（2024年3月末まで提供） ケンタッキーフライドチキン(以下、KFC)の公式モバイルアプリ、及び、公式Webサイトをリニューアル。企画、運用設計、UI/UX設計、デザイン、開発を担当しました。 今回リニューアルでは、ユーザーにより直観的に情報を提供できるUI/UXと、それを実現可能なシステムをクライアントとともにアイデアを出し合いながら設計しました。公式モバイルアプリと公式Webサイトの更新方法を一元化し、フロントエンドからバックエンドまで、一貫した設計・管理・運用とデータ更新を双方で共通化することで、日々の運用負荷を軽減し、ユーザーに素早く情報を届けることを可能にしました。 また、赤と白を基調とした、KFCのブランドイメージをより印象付けるデザインを企画しました。 *2024年3月末まで提供
医師とデザイン。なぜ医療現場は複雑なUIが好まれるのか？｜Kei Kobayashi | 精神科医×デザイナー
医師は情報が詰めこまれたスライドが好き？こんにちは、株式会社CureAppデザイナーの小林です。精神科の医師ですがデザインが好きすぎてデザイナーとして働いています。 医療の世界から会社員に転身すると、日々さまざまな発見があります。先日社外の人とプレゼンテーションの話題になり 「医師向けのプレゼンでは、シンプルなものより情報が詰め込まれたスライドが好まれるんです」 と言われ驚きました。 たしかに医療系のスライドは医師に限らず文字が詰めこまれた分かりづらいスライドが主流ですが、それはデザインへの関心が低いだけでけっして「好き」なわけではない、そう思っていました。 しかし改めて「もしかして医師は本当に複雑なデザインが好きなんじゃないか？」という疑念がわいてきました。 よく見る医療系スライドの一例 https://www.dinf.ne.jp/doc/japanese/resource/kouse
Zoomはセキュリティーを犠牲に勝ったのか、プロダクトデザインの理想と現実
新型コロナウイルスによる非常事態宣言の影響で、国内ではZoomは定着し、イベントや面接、打ち合わせなどでわざわざZoomとは何か説明しなくても通じるようになった。その影響で最近、Zoomがなぜ一人勝ちしたのか？という議論が局所局所で盛り上がっていた。火を付けたきっかけは、Zoomはセキュリティーを無視してUX（ユーザー体験）の強化に全力投球したから成功したという言説である。 確かにZoomにそれまでのアプリではあまり見たことのない機能も存在する。例えばCG（コンピューターグラフィックス）によるバーチャル背景にPowerPointのスライドを重ねて使う時には、画面共有の開始時に自動でPowerPointを起動し、スライドをエクスポートする動作が見ることができる。WindowsのActiveXならいざ知らず、MacOSでもこんなことが可能なのかと感心させられると同時に、直感的には少し怖いと思う
革命的に読みやすい、ＵＤフォント 学力向上効果も期待：朝日新聞デジタル
字を読みやすくすることで誤読を減らそうと開発された、ユニバーサル・デザイン（ＵＤ）のフォント（書体）を教育現場で活用する動きが広まっている。読み書きに困難がある子どもに効果的というだけでなく、学力向上にもつながると期待されている。（山下知子） 「今までの教科書やプリント類と比べたら、革命的に読みやすい」 奈良市の高校３年の松谷知直さん（１７）は、「ＵＤデジタル教科書体」で印字された学校のプリントを見て、こう話した。書体メーカーのモリサワ（大阪市）が、デジタル教科書向けに開発したＵＤフォントだ。 松谷さんは読み書きに困難があり、一般的な明朝体は「文字の輪郭が青く光って、文字が踊り出して飛んでいく」ように見える。小学５年の頃から、太さが均一なゴシック体の方が読みやすいことに気づいたが、学校ではなかなか理解してもらえなかった。母の真由美さん（４５）は「学校生活において『読める』はスタートライン。
“最悪のUI”を体験できるWebサイトをデザイン会社が制作 あまりの使いづらさにストレスがマッハ
まともに入力するのが難しいデザインのWebサイト「User Inyerface」が、海外メディアに取り上げられてジワジワと話題を拡大中です。制作した企業は、直感的な操作では最後までたどりつけない“最悪のUI（ユーザーインタフェース）体験”ができるゲームとして紹介しています。 ゲーム開始で、まず手こずる（画像は「User Inyerface」より） UIはWeb制作などでよく使われる言葉で、人間と機械をつなぐものを意味しています。慣習に従い、直感的に操作できるUIを「良いUI」と呼びますが、「User Inyerface」のコンセプトはその真逆。慣習に逆らっているため、最後のページにたどり着くまでに、いらだちでパソコンをたたき割りそうになってしまいます。 「User Inyerface」を開始すると、画面上部にクッキー利用同意のメッセージが表示されますが、早速分かりづらい。「このサイトはクッ
HTTPS化されたe-Govサイト、HTTPでのアクセスはすべてアナウンスページに転送する残念な仕様 | スラド IT
「電子政府の総合窓口」となっている政府のe-Gov WebサイトがHTTPS化されたのだが、これによってHTTPによる接続が廃止されたうえ、HTTPでアクセスした際にはHTTPS版ページへのリダイレクトは行われず、まったく別のページにリダイレクトされる仕様になっていることから、不便だという声が出ている（@pmx003_the_oのTweet）。 コンテンツのパス自体は変更されていないため、URLの「http://」を「https://」に変更すればアクセス自体は可能になるのだが、現状e-GovサイトにHTTPでアクセスするとすべて「e-Govサイトのhttpによる通信終了について」（URLは「https://www.e-gov.go.jp/sorry.html」）にリダイレクトされる仕様になっており、URLを再度入力しなければならなくなっている。 セキュリティ研究家の高木浩光氏はこれに対し
スマホ確定申告「使えない」の声 途中で「PC行き」宣告され呆然
「スマホの確定申告が使えなさすぎて、やばい」。 最近、こんな声がネットで噴出している。実際にスマホで作ろうとしたら、投資や副業による収入があると先に進めない仕様になっており、がっかりしたという反応だ。国税庁や大手メディアが便利さを指摘するのとは異なり、「失望」に対する賛同が目立っている。 ●「楽ちんなっしー」は本当？ 「こんな使えないサービスに税金使って担当者クビにしろよ」「雑所得が有ると使えないというアホ仕様。期待したのがバカだった」「ネタかと思ったら本当に使えない仕様だった（笑）」ーー。このような手厳しい声が、ツイッター上では散見される。 国税庁は「スマート申告始まります！」とホームページなどで呼びかけ、これまで税務署に来たりパソコンでしたりしていた確定申告が、今年からはスマホで簡単にできるとして熱心にPRしてきた。 千葉県船橋市では1月18日、人気キャラクター「ふなっしー」を招き、ス
「5人でユーザテストすればユーザビリティ上の問題のうち85%が見つかる」の元ネタ論文を解説する｜Mikio Kiura / ANKR DESIGN
Webサービスやアプリなど開発や運用に関わっている方であれば、こんなことを耳にしたことがあるのでは無いでしょうか？ 5人でテストを行えば、ユーザビリティ上の問題のうち85%を発見できるこれらは業界的にはある意味で常識ですが、色々話を聞いてみると、この常識の「出処」あるいは「根拠」ってあんまり知られていないようなのです。 もちろん、ちょっと知識のある人であれば、ユーザビリティ業界の第一人者であるヤコブ・ニールセン博士が提唱したというところまでは知識として知っているでしょう。しかしながら、その元ネタとなった論文を実際に読んだ人、あるいは85%という数字の根拠やその条件について理解されている方はどの程度居るのでしょうか。 ということで本記事では「ユーザテストは5人で85%」の元ネタである下記の論文について、解説、と言うとちょっと大げさかもですが、概要を紹介してみたいと思います。願わくば、この記事
なぜお年寄りはスマホを使えないのか？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 正月に実家に帰ったとき母親にスマホの使い方を教えていて気づいたことのメモ。 お年寄りにスマホを教える立場になったときにこの記事の内容に目を通しておくとよいです。 お年寄り向けのスマホアプリ開発や、逆に未就学児向けにアプリを作るときなどに応用できるかもしれません。 タップできない まず、そもそもタップできない。何気に一番大きな問題。 タップしようとしたときに以下のような現象が起きる。 爪で押してる 強く押しすぎる、画面に触れている指の面積が大きすぎる 狙ったところを押せない 画面に触れた後に指がズレる 触れている時間が長く、長押
825. PayPayにみるQRコード決済考 | 使いやすさ日記 by U'eyes Design Inc.
12月、PayPayというQRコード決済サービスがキャンペーンで話題になりました。加盟店であれば20%還元、一定の確率で全額還元も当たるとあって都心の家電店などで行列ができるほどの賑わいだったようです（現在は終了しています）。 私は元々非接触ICカード式のキャッシュレス決済を積極的に使ってきたので、逆にQR決済は登録しつつもあまり使用してきませんでした。手間としては明らかに非接触ICカード式の方が楽だからです。今回20%還元に釣られて何度か買い物をしてみたのでその感想など。 まずQRコード決済とはなにか簡単に。QRコードはご存じ2次元バーコードの1つです。スマホなどのカメラで読み取ってなにがしかの情報を取り出すことができます。QRコード決済ではこれを支払主あるいは支払先を識別するのに使います。どちらのQRコードをどちらのカメラで読み取るかについてはプラットフォーム毎に違います。後述のPay
iOSでの読みやすい幅 - クックパッド開発者ブログ
モバイル基盤グループのヴァンサン(@vincentisambart)です。 iOSの設定画面の右側は一定の幅を超えないように作られています。 iPadでは: 新iPad Pro 12.9"では: iPadでTwitterのタイムラインのセルの中身も一定の幅を超えません。 このように、自分のアプリで広い画面でもコンテンツが広がりすぎないようにするためにはどうすればよいのでしょうか。AutoLayoutでいくつかの制約を使ってできるのですが、もっと簡単な方法はないのでしょうか。 iOS 9以上では、端末の種類を気にせず、複雑なAutoLayout制約を使わず、殆どのビューですぐ使える仕組みがあります。Appleのドキュメントで「readable content」や「readable width」と呼ばれているものです。以下日本語で「読みやすい幅」と呼ぶことにします。 注意点：下記の説明はAut
モバイルではメニューを画面下に表示すべき理由
スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ
Mac Safari 独自のアクセシビリティに優れたインタラクション | Accessible & Usable
公開日 : 2018年8月20日 カテゴリー : アクセシビリティ / ユーザビリティ Mac (macOS) の標準ブラウザ「Safari」(筆者の手元の環境では、macOS High Sierra 上の Safari バージョン 11.1.2 です) には、独自のアクセシビリティに優れたインタラクションが備わっています。機能としてはさりげないですが、ユーザーの心地よいブラウジング体験を堅実にサポートするものと言えます。他のブラウザでも採用されれば面白いかも...と思い、以下ご紹介します。 target="_blank" リンクで開いたページからの「戻る」操作 <a> 要素に target="_blank" 属性が指定されているリンクをクリックすると、新しく別タブが開いてリンク先のページに遷移しますが、この状態で Safari の「戻る」ボタンを押す (またはショートカットキーで、[co
朝日新聞デジタルの解約が死ぬほど面倒だった話 - Hagex-day info
数年に1度出てくる「サービスの解約が面倒だった！」という話です。 過去にこんな記事を書いてます。 さて、今回解約が面倒だったのは、朝日新聞デジタルの話。朝日新聞デジタルは月300本まで記事が読めるシンプルコースが月額980円、すべてOKなデジタルコースが月額3800円だ。 この有料コースを脱会するには、かなりのクリック数が必要だった。 確かに、有料会員の離脱を防ぐのは重要だけど、ここまでしつこかったら「2度と入るか！」と思ってしまうので、逆効果だと思いますよ、朝日新聞さん！ それでは見ていきましょう。 お客様のサポートページから「解約」をクリック（1回目）。私ルールで解約画面に移動する手間はスルーして、解約クリックからスタートしております。 ログインしているにも関わらず、パスワードを聞かれます。まあ、個人情報の変更や解約といった操作は、本人確認をかねて入力させるので、面倒くさいけど、納得し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[みんなのケータイ]混迷を極めるdアカウント![[みんなのケータイ]混迷を極めるdアカウント](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd6bd288e168ddfe2b4897c4c570d0af8884bca2/height=288;version=1;width=512/https%3A%2F%2Fk-tai.watch.impress.co.jp%2Fimg%2Fktw%2Flist%2F1534%2F834%2F00.jpg)
「Firefox 105」のちょっとした仕様変更が不評、開発チームが撤回／Mozilla、「Firefox 105.0.1」をリリース
Engadget | Technology News & Reviews
Engadget | Technology News & Reviews
