UIの色を変えただけで大量のクレームを頂戴してしまった話｜のなと
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
フラットデザインのウェブサイトはユーザーの時間を無駄にしブランドを傷つける可能性がある
by Heima ウェブサイトやアプリに用いられる「フラットデザイン」は、モダンですっきりした印象を人に与えます。しかし、コンサルティング会社であるニールセン・ノーマン・グループの調査によって、フラットデザインには、ユーザーに余計な時間を割かせ、決断力を弱める効果があると判明。ボタンなどのナビゲーションがフラットデザインになることで、ユーザーのページ滞在時間は増えるものの、ブランドへの見方がネガティブなものに変わる可能性もあるとのことです。 Flat UI Elements Attract Less Attention and Cause Uncertainty https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/ 調査グループは一般のウェブユーザー71人を集め、それぞれのユーザーに9つのウェブ
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
スクロールは制御するな - Weblog - Hail2u.net
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
ラジオボタンに初期値をおくべきかという議論 | バシャログ。
近ごろ職場近辺で「モーニングがある」「きちんと分煙されている」「携帯電話の電波が入る」の3条件をいずれも満たすようなカフェを探している kagata です。2つまではわりとどこも満足できるのですが、3つすべてとなるとなかなか難しいようです。 さて、先日弊社内で「ラジオボタンには初期値を設けるべき」とごく軽い気持ちで発言したところ、社内外で思いのほか活発な議論が巻き起こるということがありました。その際に調べた前提的な話を備忘のためここにまとめるとともに、今考えている疑問や課題をご紹介します。「そんなことも知らないの？」ということがあったら、ご教授いただければ幸いです… m(__)m HTML の仕様を確認する 「ラジオボタンには初期値を設けるべき」だとわたしが最初に学んだのは10年くらい前のことです。当時はプログラミングでなく主に HTML を書いて生計を立てていました。そのころに次の記事を
なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？
スマートフォンなどのモバイル端末用UIでよく用いられる「三」のマークのアイコンは、ハンバーガーのように見えることからアメリカでは「ハンバーガー」アイコンと呼ばれています。徐々に浸透してきたハンバーガーですが、UIデザインの優劣という観点から見た場合、「劣った醜い撲滅すべきものである」という意見が出されています。なぜハンバーガーがダメなのかについて、ジェームズ・アーチャー氏がデータ分析結果を基に理論的に解説しています。 The Hamburger Menu Doesn't Work - Deep Design http://deep.design/the-hamburger-menu/ 下の画像の赤丸で囲われたのが「ハンバーガー」。モバイル端末UIだけでなくデスクトップUIでも広く普及したアイコンで、クリックすることで主にメニューなど他の追加情報を表示させられます。 ◆不親切 一般的に普及し
Belajar Bahasa Inggeris Online 2022 (Kelas English 1-to-1)
Kalau anda teringin nak fasih English, boleh belajar Bahasa Inggeris online dengan kami. Kelas dijalankan menggunakan Zoom / Google Meet. Kelas Bahasa Inggeris Online Ini Khas Untuk Orang Dewasa Yang Faham English, Tapi Bila Speaking: Ayat Berterabur, Grammar Hancur Dalam proses nak fluent English, kenapa mesti malu? Kami di JomEnglish Academy faham, anda nak sangat cakap smooth dan rasa confident
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
モーダルウィンドウを考える | Accessible & Usable
公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア
モバイルにおける入力フォームデザインのためのチェックリスト
モバイルデバイス用の入力欄をデザインするときには、14のユーザビリティ要件からなるこのリストを満たしているかどうかをチェックしよう。 A Checklist for Designing Mobile Input Fields by Raluca Budiu on June 14, 2015 日本語版2015年7月10日公開 デザイン対象がWebページであれ、Webベースのアプリケーション（たとえば、SaaS）やネイティブモバイルアプリであれ、基本の構成要素の1つになるのが、ユーザーがテキストを入力する地味なテキスト入力欄である。このウィジェットは大量に利用されているので、その利用自体について、この記事で話す気はない。アプリケーションデザインにおいて、ワークフロー等の全体像に関わる問題は良質なユーザーエクスペリエンスにとって重要であり、指摘する必要のある課題がたくさんあるからである（こうした
分かりやすいWeb入力フォームのための十戒 | POSTD
1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ
ウェブページに文字拡大機能を置くのは「時代遅れ」 | Accessible & Usable
公開日 : 2015年2月17日 (2019年11月9日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ウェブページの上部 (サイト共通ヘッダーなど) に、文字拡大機能が設置されているサイトを見かけることがあります。 文字拡大機能のイメージ。[大][中][小] ボタンが並んでいたり、[標準][拡大] ボタンが並んでいたりする。 ブラウザの標準機能として文字の拡大が可能であることを知らないユーザーが多い (ユーザーの大半はプリファレンスを変更しようという考えに及ばない) ことから、文字拡大機能を見える形でページ上に設置したほうが親切、というウェブユーザビリティ専門家が (かつては) 多かったように思います。 私自身、長い間ウェブユーザビリティに関わってきた中で、当座の利便性を優先してサイト側に文字拡大機能を実装する判断をしたり (そしてやっぱり止めたり) ... と紆余曲折な
スマホ初心者の母にスマートフォンサイトのUIについて色々聞いてみました | AOGIRI.net（アオギリネット）
おそらく自分の母親世代である方も対象になるであろうスマホサイトを制作するために、母に色々と意見を聞いてみました。 母は、スマートフォンで私のインストールしたアプリでレシピ見たり、天気予報を見たり、ニュースを見たりするぐらいで、積極的にネットで検索はしないけど、必要に迫られると見るというぐらい。 そこでいくつか驚いたこと、なるほどと思ったことがあったのでご紹介します。 右上の三本線はメニューとは認識しないどころか、「メニュー」という文言すら何を指しているのか分からない 最近、スマートフォンサイトではヘッダの右上に「三本線＋メニュー」のボタンが配置されることが多くなっています。三本線だけ、というサイトもありますが、万人がターゲットのようなサイトは、「メニュー」「MENU」の記載が大体あります。 しかし、私の「このメニューっていうボタンを押したらメニューが表示されるって分かる？」という質問に返っ
入力フォームの「必須」「任意」のラベルは両方付けないとコンバージョン率が下がる
[レベル: 初〜中級] 入力フォームのフィールドには、入力が「必須」なのかまたは「任意」なのかのラベルを両方付けることが推奨されます。 どちらか片方だけだと入力途中の離脱の原因になります。 ECサイトのユーザービリティ調査と最適化を専門に扱っているBaymard Instituteが詳しく解説しています。 15の大手ECサイトのユーザビリティ調査と18の主要なモバイルサイトのユーザビリティ調査、そして自社による最新の大規模なアイトラッキングテストによって実証することができました。 この記事では、その解説の要点をまとめて紹介します。 片方だけの「必須」「任意」ラベルの問題点 入力が「必須」か「任意」かをどちらか片方のラベルだけで示すことにはさまざまな問題点があります。 必須か任意かを示さないのはいちばんよくない そのフィールドの入力が必須か任意かを示さないのはいちばんよくないスタイルです。
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
Yahoo!ニュースの見出し行間「5ピクセルの差」に見えた光～ヒートマップでUI改善
社長の宮坂がゲスト出演した、11月27日放送のテレビ東京系「カンブリア宮殿」。Yahoo!ニュースの裏側にも触れられており、ご覧になった方もいらっしゃるかもしれません。 （放送バックナンバー：爆走する国民的サイト！これがネットの底力だ！－ テレビ東京） 公式ブログ新コーナー「news HACK」ではこれまで、Yahoo!ニュースにおけるスマホ利用の成長などをお伝えしてきましたが、今回は、同番組の中でも登場したYahoo!ニュースのUI改善事例について、番組で触れられなかった部分も加えて詳しくお伝えしたいと思います。 これからご紹介するのは、スマホブラウザ版Yahoo! JAPANトップページのA/Bテスト事例（※Yahoo!ニュースのアプリ版との違いなどについては、こちらの記事をご参照ください）。 テスト結果は現在のスマホ版トップページに使用されているものと同様ですが、まず具体的な説明に入
PCサイトでのグローバルナビの最小化は避けよう
PCサイトで、メインコンテンツのカテゴリーをドロップダウンメニュー内に格下げすると、あなたの提供するものをユーザーが見つけにくくなってしまう。 Killing Off the Global Navigation: One Trend to Avoid by Jennifer Cardello and Kathryn Whitenton on February 9, 2014 日本語版2014年5月12日公開 従来、グローバルナビゲーションはWebサイトの全ページに表示され、以下の2つの機能を果たしてきた： ユーザーがどこにいようと、彼らが容易にトップレベルのカテゴリーを切り替えられるようにする。 トップページを経由しないで入ってくるユーザーにも、そのWebサイト上で利用できるものをすぐに感じ取れるようにする。 最近、グローバルナビゲーションのカテゴリーをドロップダウンメニューの中に入れるW
入力フォームの工夫 - ワザノバ | wazanova
http://googleresearch.blogspot.com/2014/07/simple-is-better-making-your-web-forms.html 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約2時間前 今回、Googleのチームが、アイトラッキングシステムの利用やユーザインタビューを通じて、入力フォームのユーザビリティについて実験しています。参照しているのは、2010年にスイスのUniversity of Baselのチームがまとめた "20 guidelines to optimize web forms" です。2000年代のアカデミックな研究成果をもとにまとめられたものですが、現在もまだ当てはまるものと、ここ5-10年で変わってきているものがあり、興味深いです。最近は、スマホ
Webらしいニュース配信UIとは
紙的な情報配信 新聞記事は、印刷されたらそれで終わりです。後の紙面で修正・注釈が入る場合がありますが、記事が世に出た瞬間、そのままのかたちで残ります。また、配信できるタイミングと回数が限られているので（朝・夕、時々号外）、期限までにどれだけ記事の質を高めるかが勝負になることもあると思います。新聞社の Web サイトは、こうした『新聞の性質』を強く残したまま Web コンテンツを配信しているように見えます。 カテゴリやキーワード（タグ）を活用した情報分類をするなど、 Web の特性を活かした手法を取り入れているものの、記事を集めた書庫のような存在です。以前紹介した公共施設の Web サイトと似たような状況といえるでしょう。新聞社の Web サイトの記事の特長をみると、記事の形状は、紙の時代とほぼ変わりないことが分かります。 配信された記事は、そのままの形で残る 訂正や追加情報が入る場合はある
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How a Massive Bomb Came Together in Beirut’s Port (Published 2020)
