「UIの色を変えただけで大量のクレームを頂戴してしまった話」の何が問題か？｜moutend
結論話題の記事「UIの色を変えただけで大量のクレームを頂戴してしまった話」を読みました。ユーザーを軽視した内容に驚愕したのですが、それよりも記事が批判されている原因を理解できていない様子の方が存在することに衝撃を受けました。 現職のデザイナーあるいはデザイナーを目指している方々にお伝えしたいことは以下の3点です。 具体的な不都合を訴える問い合わせは無益なクレームではなく有益なフィードバックです。プロダクトの価値向上につながる貴重な意見ですから無視するべきではありません。 時間の経過でユーザーがUIに慣れることはありません。問い合わせをしても無駄だと学習して離脱したパターンを疑いましょう。受け入れられる場合も含めて画面の変更はユーザーに負担を強いているのだと自覚してください。 色覚特性や色とコントラストについて学びましょう。色だけで情報を伝えるデザインはアンチパターンですから避けてください。
UIの色を変えただけで大量のクレームを頂戴してしまった話｜のなと
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
メルカリで値段の「¥マーク」を小さくしたら購入率が伸びた理由、ペイディがサービス名を「カタカナ表記」にする理由など、プロダクトのマーケ施策まとめ30(2023)｜アプリマーケティング研究所
メルカリで値段の「¥マーク」を小さくしたら購入率が伸びた理由、ペイディがサービス名を「カタカナ表記」にする理由など、プロダクトのマーケ施策まとめ30(2023) 2023年に取材した記事から、長く参考になりそうな施策をまとめました。※ 数値等はあくまで取材当時のものです。 1、商品ページの「¥マーク」を小さくしたら購入率アップ（メルカリ）メルカリでは、商品詳細ページの「値段の¥マーク」を小さくしたところ、購入率が大きく上昇した。 理由としては、¥マークを小さくしたほうが、心理的な「価格の圧迫感」が減って、心理的にすこし安く感じるためと考えられている。例えば、¥マークが大きいと桁数が多く感じたり、価格を高めに感じやすい。 この案があがったときには、社内でも懐疑的だったそうだが、テストすると小さな開発コストで大きなリターンを得られる施策になった。 元記事：https://markelabo.c
実案件から学んだ、本当に役立つUIデザインの法則50 ユーザビリティチェックリスト総集編｜i3DESIGN Designers
「ユーザビリティチェックリスト」ということで、UIデザインの「あるある」を取り上げ、改善案とセットでまとめています。 今回は、10のヒューリスティクスをもとに分類してみました。10のヒューリスティクスについては、以前記事にまとめています。 具体的な事例を一緒に取り上げ、よりわかりやすく解説していますので、こちらもあわせてご覧ください。 また弊社ホームページにて、ユーザビリティチェックリストをダウンロードいただけます。こちらも合わせてご活用ください。 1. システムステータスの可視化（Visibility of system status）1-1. 入力項目が多いときはステップを分けるフォームの入力項目が多い場合は、項目をグルーピングして画面を分割しましょう。 フォームが長すぎると、ユーザーは入力を途中で辞めてページから離脱してしまうかもしれません。 その上で、ステッパーを設置して現在の進捗
わたしはページ内検索を普通に使いたい
以前にも少し書いたのですが、ウェブブラウザーで使えるページ内検索による体験が阻害されるのが本当にストレスで、その例を残しておこうと思います。 採用側の気持ちも分かりますので、どうなると皆が幸せになるのか分からないという種類のものなので困ったところです。 省略されたテキストoverflow: hiddenとtext-overflow: ellipsisまたは-webkit-line-clampによってテキストが省略された場合、その省略部分がページ内検索にヒットすると非常に探しづらいです。 特に、グリッドで区切られたアイテムが複数列・複数行で並んでいる際に顕著です。 以前の記事のとおり、わたしはYouTubeでよく遭遇します。 下記のデモは、1000個のアイテムを並べたものです。 このうち、「Red Rose」というワードは12個のアイテムに含まれています。 デモを開いて「Red Rose」で
「のどが渇いた」というユーザーに何を出す？ ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
2022年9月13日 株式会社メンバーズ ポップインサイトカンパニーでのウェビナーのスライドです。「ユーザーが欲しいと言った機能をつけたのに使われない！」という経験はありませんか。プロダクトをつくるとき「ユーザーの心理を理解しよう」とよく言われます。しかし、ユーザーに言われたままやることと、ユーザーが本当に望んでいることは異なります。「UXデザイン・UXリサーチ」は、ユーザーを理解するための専門技術です。ユーザーインタビューやユーザビリティテストを用いてファクトを集めることで、ユーザーの表面的な言葉に惑わされない、本当のインサイトにたどりつくことができます。かんたんなワークも交えながら、体系的に解説いたします。Read less
2022年上半期、注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー
接触確認アプリで「陽性者との接触は確認できませんでした」と表示されても、アプリからプッシュ通知が来た場合は陽性者との接触があったと判断して行動してください
リンク shimajiro@mobiler 厚生労働省、接触確認アプリで「COVID-19にさらされた可能性があります」と表示されたユーザーへの連絡を呼びかけ 厚生労働省は、新型コロナウイルスの陽性者との接触を通知するアプリ「接触確認アプリ（COCOA）」のFAQを更新。従来は、スマートフォン上に「COVID-19にさらされた可能性があります」という旨のメッセージが表示された場合でも、COCOAを 1 user ぱしり@やっさいもっさい @pasiri 接触確認アプリ、COVID-19にさらされた可能性があります って通知きた。 ログ見ると一致したキーが１つカウントされてるけど、 アプリ立ち上げても接触は確認されませんでしたなんだけど。 なにこれ？ pic.twitter.com/S66B3r8eBx 2020-08-03 06:32:44
OOUIからユーザビリティテストまで、スキル横断的にUIデザインを見る！Designer's MTG #10 UI Design編 レポート！ - Pepabo Tech Portal
こんにちは。 コーポレートデザインチームのmewmo(@mewmoppel)です。 ペパボではテレワークを基本とする働き方に移行することが決定され、社内デザイナーのナレッジシェアの場として開催されている「Designer’s MTG（通称 デザミ）」のフルリモート開催も当たり前の風景となってきました。 今回は「UI Design」のエキスパートスキルエリアのデザイナーにナレッジシェアしていただきましたので、その様子をお届けしていきたいと思います〜 これまでのデザミのレポートはこちら Designer's MTG #9 Information Architecture編 レポート！ 40人のデザイナーがフルリモートで集合！ Designer's MTG #8 レポート！ 「デザミとは？」「エキスパートスキルエリアとは？」については、前回の記事で紹介していますので、気になった方はあわせてご覧く
僕は文字だけ拡大したい - dskd
公開日2020-02-02タグaccessibility文字だけ拡大できる機能とページ全体を拡大できる機能を持ったブラウザ（例えば Google Chrome）を使っていて、僕はその機能の違いを認識している。 しかし、文字だけ拡大するとページ全体を拡大したのと同じ挙動になるように作られているウェブサイトがたまにあり、そういうサイトに限って文字だけ大きくしたいので、つらい。 なんというか、手段が奪われたと感じてしまう。こちらの操作を阻害された感。 CSS でサイズ指定が全部 rem 単位だとそういうことが起きるんだけど、せっかく文字だけ拡大する方法があってそれを使いたいのにページ全体を拡大したのと同じになっちゃうというのは、エクスクルーシブではないだろうか。 大きいディスプレイ使ってると、その広さに見合った情報量、たとえば図と文字をある程度俯瞰できる割合を保ったまま文字を大きくしたいって思う
「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた｜Tsutomu Sogitani
大阪の実家に帰った時、リビングのテレビの裏側を見たらAmazonのFire Stick TVが挿してありました。このFire Stick TVをテレビに繋ぐと、Amazonのプライムビデオを観ることができるようになります。 プライムビデオには、Amazonプライムの会員であれば、追加費用を払うことなく楽しめる映画やドラマ、アニメなどが豊富に揃っています。さらに個別に追加金額を払うとほとんどの映像コンテンツを観ることができるという、まさにTSUTAYAキラーなサービスです。 うちのおかんは月に2～3回は映画館に行くほどの映画好きなので、プライムビデオのメインターゲットといえるでしょう。本来ならプライムビデオで映画三昧の毎日を送っていてもいいはずです。 しかしながら、Fire Stick TVを挿しているにもかかわらず、プライムビデオを一度も使っていませんでした。初期設定をした私の弟が一通り使
パワポやExcelのグラフを色弱者にも分かりやすくするセットを有志が無料配布 作者「将来は標準設定に」
プレゼン資料の作り方を解説した本の中で、色を効果的に使ったグラフやスライドが「良い例」として紹介されることがあります。 ですが色を多用したプレゼンテーションには落とし穴も存在します。日本人男性の約5％、女性の約0.2％は特定の色の識別が苦手とされており、そうした色弱者にとっては「むしろ分かりにくいデザイン」になってしまう可能性があるのです。 カラーユニバーサルデザイン機構（CUDO）副理事長である伊賀公一さんは、前述の問題を解決するために、PowerPointやExcelの配色セットを「誰にでも分かりやすい色」であるカラーユニバーサルデザイン（CUD）に変更する方法を公開しました。 パワーポイントの色が分かりやすい色に CUDで作られた「色弱者にも分かりやすいプレゼン資料」 その方法とは、Microsoft Officeの書式設定を一括で変更する「テーマ」機能を使うというもの。CUDO公式
新那覇バスターミナルのフロアマップの罠(2） | ず＠沖縄
2018年10月1日にオープンしたばかりの那覇バスターミナル。開設当初はフロアマップにも混乱が見られました。2ヶ月近く経ったので少しは良くなっただろうと、チェックしてみました。 新那覇バスターミナルのフロアマップの罠 | ず＠沖縄（前回記事） 現在位置がまたしてもおかしい前にも記事でフロアマップの「現在位置が正しくない」ことを指摘しました。そのフロアマップが一応更新されています。しかし…… フロアマップも含めて案内表示は新しくなりました。 地図部分を拡大。外光を反射して見辛いのは相変わらずです。しかし問題はそこではありません。 なんと！ 現在地と書かれた場所が6箇所あります。何を考えて地図書いてるのか？ 右上部分を拡大してみました。意味不明だよね、これ。 案ずるに、このフロアマップが貼られている部分が「現在地」かとも考えたのですがそうではありません。降り場A〜Dにも同様の地図は貼られていま
新那覇バスターミナルのフロアマップの罠 | ず＠沖縄
沖縄本島の路線バスが10月7日・8日の2日間乗り放題になるフリー乗車券が発売されたので、あちこち散歩してきました。1000円で2日乗れるのは非常に素晴らしい。 沖縄のバス路線は那覇バスターミナルからおおむね放射状に広がっているので、そこを中心に移動すると便利。私は新バスターミナルにはまだ慣れていないので、フロアマップを見ながら移動しようとしたのですが…… 【お知らせ※更新】バスの日記念＆新那覇バスターミナル開業フリー乗車券について | 沖縄バス株式会社 現在位置がおかしい私は地図を見るときは、まず現在位置を探すようにしています。さて、バス降り場Cに貼られていたフロアマップ。ラミネート加工されているので見ずらいのですが、現在地点が変なのが見えますか？ 拡大写真。出発エリア6番付近（待合室）に現在位置と書かれています。どう考えても現在位置と合わないので何度も地図を確認してしまいました。 降り場
ホットケーキのUX革命？洗い物がなくなる革新的ホットケーキミックスが爆誕
佐藤健太郎 @kentarow 人類の歴史が変わるレベルの革新的ホットケーキミックスが発売されたので買ってみた。あの面倒な洗い物がなくなるなんて！家で食べるだけじゃなくてキャンプにも持って行くつもり morinaga.co.jp/sp/products/de… pic.twitter.com/KHhfrGn8wW 2018-08-29 10:45:58 森永製菓 @morinaga_angel 計量カップもボウルもオタマも泡だて器も不要！袋の中でもみもみするだけ。そんな驚愕のホットケーキミックスが登場しました！その名も「もみもみホットケーキミックス」。ぜひみなさんも、もみもみしてみてくださいね。もみもみ体験のコメントもお待ちしてまーす♪ angel.eng.mg/60423 pic.twitter.com/frtdBWHJDC 2018-08-21 12:46:26 森永製菓 @morin
820. Appleが失ってしまったものを持ち続けるDELL 〜XPS 15 9575の充電コネクタ〜 | 使いやすさ日記 by U'eyes Design Inc.
ここ何年かは主力ノートPCはAppleのMacBookシリーズでした。Air/Pro/無印と数台は使用してきましたが、最近のモデル（USB Type-Cコネクタで充電を行う年式）でちょと不便に感じている点があります。それは写真のように充電ケーブルのコネクタ部分にLEDライトがなくなってしまった点。2枚目の写真はもう少し前、MagSafeという磁力式のコネクタだった頃のものです。こちらは充電中はオレンジ、充電が完了すると点灯、コネクタまたはコンセント側が外れていると消灯です。つまりここを見るだけで色々な情報を得ることができていました。充電コネクタ挿して充電してたつもりがコンセントが抜けてたり省エネタップでスイッチが切れてた、なんてミスにも気付きやすくなります。 ところがこの2016年モデル以降ではそれがなくなってしまいました。理由としてはこのケーブルが単なる充電ケーブルではなくUSB Typ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
そうそうお母さんもリモコン青色がいいなって思ってたよ！うん！！→SHARP公式さん「社員の私ですらそこ塗りたいと思ってた」
ユニクロアプリが動画メインになっていて、なかなか見たい商品まで辿り着けない！と話題に「素直に静止画で見せてお願い」→対処法もあるらしい
登録手続きのこの画面、生まれた年までひたすら連打できつすぎる→実はここから年選択できるが「悪いUIの例として教科書に載せたい」
Miyamoto | DeNA Design on Twitter: "なぜかあまりネットに流れてない情報なんですけど。UXデザイン界隈では有名な「グーグルUXデザインプロフェッショナル認定証」って講座があるんですが、実はそのコース3でFigmaのEducation planの特典があります。 社会人… https://t.co/1pURyKMUCt"
