「UIの色を変えただけで大量のクレームを頂戴してしまった話」の何が問題か？｜moutend
結論話題の記事「UIの色を変えただけで大量のクレームを頂戴してしまった話」を読みました。ユーザーを軽視した内容に驚愕したのですが、それよりも記事が批判されている原因を理解できていない様子の方が存在することに衝撃を受けました。 現職のデザイナーあるいはデザイナーを目指している方々にお伝えしたいことは以下の3点です。 具体的な不都合を訴える問い合わせは無益なクレームではなく有益なフィードバックです。プロダクトの価値向上につながる貴重な意見ですから無視するべきではありません。 時間の経過でユーザーがUIに慣れることはありません。問い合わせをしても無駄だと学習して離脱したパターンを疑いましょう。受け入れられる場合も含めて画面の変更はユーザーに負担を強いているのだと自覚してください。 色覚特性や色とコントラストについて学びましょう。色だけで情報を伝えるデザインはアンチパターンですから避けてください。
UIの色を変えただけで大量のクレームを頂戴してしまった話｜のなと
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
モダンiOSナビゲーションパターン 日本語訳
モダンiOSナビゲーションパターン 日本語訳Modern iOS Navigation Patterns (Japanese Text Ver.) この資料は、Frank Rausch 氏による Modern iOS Navigation Patterns の、日本語訳版です。オリジナル版 “2023-03-07” を基にし、CC BY-NC-SA 4.0 ライセンスによって公開しています。 オリジナルを日本語に訳すにあたり、なるべく元の表現を尊重するように心がけていますが、一部の表現については、訳者による解釈の補足や文言調整を加えています。 目次 目次 はじめに 1. 構造的なナビゲーション ドリルダウン (Drill-Down) フラット (Flat) ピラミッド (Pyramid) ハブ・アンド・スポーク (Hub-and-Spoke)2 2. オーバーレイ型ナビゲーション 強いモー
もっと早くデザイナーに声をかけろ
SIerのインハウスデザイナーとして働いてるんだけど、うちの会社の業務フローがクソすぎてストレスが溜まっている。 あの、PMのみなさん、ていうか我が社の開発標準つくってるみなさん。 外部設計とか機能設計とか、「設計」ってついてる工程にデザイナーをアサインしてください。 デザインって「設計」っていう意味なので。 別に、知識マウントとか偉ぶってるとかでもなんでもないです。 外部設計も機能設計も社内のエンジニアがエクセルで作っているけど、なんでデザイナーを呼んでくれないんですか？ あなたたちがやってるそれ、デザインですよね？ そのくせエンジニアは、自分が設計書を作っていても「デザイン」をしているという自覚は全くない。 それどころか「自分にはセンスが無いから〜！」と変にデザイナーを持ち上げてくるんだけど、あなたたちのやってることもデザインですよ。 なのに、自分たちだけですっかり外部設計とか機能設計
Stop Using ‘Pop-up’
Stop Using ‘Pop-up’ TL;DR: Stop using the word pop-up. Instead choose a term that accurately describes the control you want. I encourage you to read my post Stop Using ‘Drop-down’, which provides the set-up for this post. Along with another term I would prefer everyone stopped using. As you embark on a design, build, or specification, it is important you, the stakeholders, and the team understand
認知機能障害から考えるUX設計【『ケーキの切れない非行少年たち』を読んで】
『ケーキの切れない非行少年たち』概要 この図が出版当時、話題になったため、この本の存在は知ってる人が多いかもしれません。 少年院に勤める児童精神科医である著者が、 凶悪犯罪を犯し入所したある少年に 『ここに丸いケーキがあります。3人で食べるとしたらどうやって切りますか？皆が平等になるように切ってください』 という指示をもとに少年が書いた図 を著者が再現したものが、上の図です。（下段は設問を5等分にした場合） 著者によると少年はまず半分のところに線を引いた後、そこから悩みだして手を止めてしまったそうです、何度か繰り返しても同じようにまず真ん中に線を引いて正解に辿り着けない。 一手目から間違っているという発想に至れないのです。 本書はそういった象徴的な例を挙げながら、少年犯罪と認知機能や知的障害の関係性、その救済方法を論じる内容となっています。 読んで感じたUX設計の難しさ この本の論旨は『犯
もしあなたが『アクセシビリティ試験』をやることになったら
もしあなたが『アクセシビリティ試験』をやることになったら 共有ログインお使いのブラウザのバージョンはサポートが終了しました。 サポートされているブラウザにアップグレードしてください。閉じる ファイル編集表示挿入表示形式ツール拡張機能ヘルプユーザー補助機能デバッグ ドライブに変更を保存できませんでした 画像オプション画像オプション 画像を置換 表のオプション ユーザー補助機能
明るく高コントラストの「空中ディスプレイ」、マクセルが開発 感染症予防に
マクセルが独自に開発した液晶ディスプレイ技術「LLIS」（Laser Like Image Source）と日本カーバイド工業の光学部材を組み合わせた再帰反射式の空中ディスプレイ。光が入射した方向へ戻る再帰反射現象を利用し、専用のリフレクターやビームスプリッターで空中に光を集め、結像する仕組みだ。 マクセルのLLISは、LCD（液晶ディスプレイ）が発する光の方向を制御し、再帰反射に適した映像光を生成する。これにより光のロスを抑え、明るく（2000nt）、高コントラスト（コントラスト比1200：1）の空中映像が作れるという。解像度は1920×1200ピクセルまで対応する。 センサーと組み合わせれば、空中に結像したスイッチやアイコンをタブレット端末のように操作するHMI（Human Machine Interface）ができる。画面に直接触れる必要がないため、医療機関や金融機関など不特定多数の
「マーフィーの法則（３）」＜主張・講演＜木暮
スタートページ＞ 主張・講演＞ マーフィーの法則 Murphyology on Information Technology (vol.3) 2020s 改題：Murphyology by a retired it-engineer お詫び・目次 vol.1、vol.2を書いた当時は現役でしたが、現在はリタイアしており、ＩＴ関連の業務やグループから遠ざかってしまいました。そのため、vol.3 は極めて独断的なエッセイになっていることをお許しください。 また、完成してから公表すべきですが、老い先短いことも考慮して、逐次補充する方法にしました。これについてもお詫びします。 量子コンピュータに関するマーフィーの法則を発見するのは難しい。 ＩＴ実務から離れると、ＩＴの技術やシステムの運用などの裏側（本質）は見えなくなる。 個人趣味でパソコンやインターネットで遊んでいる状態では、新しい情報技術に
React-axe で React アプリケーションのアクセシビリティを向上させる | メルカリエンジニアリング
こんにちは、この 4 月にメルカリに新卒入社したフロントエンドエンジニアの @karszawa です。 この頃は Google I/O 2019 のキーノートでアクセシビリティが大きく取り上げられたり、Safari に Audit タブが追加されアクセシビリティに関する様々なテストできるようになったりと、フロントエンド界隈におけるアクセシビリティへの関心の高まりを感じます。 本記事では React アプリケーションのアクセシビリティをチェックするためのライブラリである React-axe と、その中心技術である axe-core を応用した様々なツールをご紹介します。 React-axe とは React-axe は React アプリケーションのアクセシビリティをチェックするためのツールです。チェックの結果は Chrome DevTools に表示され、開発中にアクセシビリティの問題に気
業務システムでカラーユニバーサルデザイン（CUD）対応した話（進め方と変更例など） - ヴェルク - IT起業の記録
2019年5月19日から、board内で使われている色を調整し、色弱・色覚特性などと称される色覚「P型・D型」の方にも識別しやすい配色にしました。 こういった取り組みが、多くの製品・サービスで行われるようになれば良いなと思い、経緯や実際に行ったことなどを紹介したいと思います。 今回の取り組みは、NPO法人「カラーユニバーサルデザイン機構（CUDO）」に検証を依頼し、問題のある箇所は修正後、無事、同機構が発行するカラーユニバーサルデザイン（CUD）認証を取得することができました。 ちなみに、CUDOさんによると、請求書作成・販売管理・会計・SFAなどの業務支援システムとしてこの認証の取得は初めてらしいです。 カラーユニバーサルデザインとは 現在日本には、割合が最も多い一般色覚「C型」の他、色弱・色覚特性とも称される色覚「P型・D型」の方が男性の約20人に1人、女性の約500人に1人の割合で、
アプリの設定は、初心者/上級者の２段階モードがいいんじゃないかと思う | fladdict
iPhoneアプリなり, Airアプリなりを作ってて思ったんだけど、特にiPhoneのような画面の小さい環境では、機能要望の取捨選択がムズかしい。 本来、ウィジェットというのは単機能特化が一番いいんだ思う。 ところが、ユーザーからの機能要望というのは限度がなく、その全てに対応すると、アプリケーションがあっという間にファットになってしまう。 ファットになったアプリは、既存のヘビーユーザーには歓迎される一方で、新規ユーザーにとっては害として働くことが多い。 まず、あれもこれもという多すぎる機能は、「何をすべきなのか」という本来のコンセプトを消し去ってしまい、それそのものの持っていた「体験」を台無しにしてしまう。結果、「何をしたいのか」が明確なユーザー以外には、きわめて使いにくい一品になってしまう。 また学習コストの大幅な増加も問題となる。iPhoneのような設定画面と、ヘルプを並列に見せること
バッドデザイン賞を勝手にノミネートしてみた-2017年度版- - 酔いどれデザイン日誌 - Drunken Design Diary -
忙しい年の瀬ですが、皆さま如何お過ごしでしょうか。 さて、皆さんは「グッドデザイン賞はあるのにバッドデザイン賞が無いのはおかしい」という風に思ったことはありませんか？私は職業柄、日常生活で見かけた良いデザイン事例と悪いデザイン事例を写真に撮ってストックしているのですが、その中には「本当にこれギャグじゃないの？」というレベルのバッドデザインがあったりするんですよね。 良いものを良いと評価することも大切ですが、良くないものを無視するのは人類の進歩に大きな影を落としているような気さえします。ということで、勝手にアワード化してしまいました。2017と付いてますが、私が見つけたのが2017年だったというだけで製造年度などとの相関性はなく、特に意味はないです。あくまでジョークコンテンツとしてお楽しみください。 【追記】Twitterの方で一部画像が自分で撮影したものではないのでは？とご指摘頂きました。
Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物
ここ半年開発していた動画サービスをベータ版ながらリリースしました（正式リリースは 4 月）。そのサービスの開発において、以前投稿した Atomic Design を採用しました。本記事では Atomic Design を実案件に導入した結果と感想を書いていきます。 Atomic Design の基本的な概念に関して知りたい方は Brad Frost 氏の原文、もしくは私の以前の記事↓を参照できます。 最近よくクリエイターが移住するカナダで Atomic Design を学ぶ Atomic Design を導入して正解 結論から書くと、今回 Atomic Design を導入したことは正解でした。コンポーネントの粒度を論理的に説明できるガイドラインとして十分すぎるほどの役割を果たしてくれました。 このガイドラインがあることで、デザインに関してさほど関心がない人（たとえばデザインよりもエンジニ
フラットデザインの参考にも！Bootstrap3対応のかっこよすぎる無料テーマまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Bootstrap3の無料テーマ＆テーマ集まとめ BlackTie.co http://www.blacktie.co/ 最近衝撃を受けたフリーのテーマ集。どのテーマもかっこよすぎて涙が出ます……ありがたや……ネーミングとロゴもかわいくてきゅんとしますね。 テーマ数は現在（2015年6月時点）25個あり、今後の追加も楽しみですね。 Bootswatch http://bootswatch.com/ こちらもテーマ集です。Bootstrap2の頃からありましたが、3にも対応したようです。フラットデザインにするなら「Flatly」がおすすめ。 Start Bootstrap http://startbootstrap.com/ こちらもテーマ集。管理画面用やポートフォリオ用など、いろいろな用途別に作られているのがありがたいですね（「Sponsored」のタグがついたものは有料なのでご注意！）。
確実に良くするUI/UX設計
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
日経電子版 新聞アプリとしてのUI/UX
「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」で発表したスライドです。 http://connpass.com/event/16187/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Games | Interface In Game
チャートのカラーをアクセシビリティを考慮した色へ変更する · Issue #1172 · Tokyo-Metro-Gov/covid19
Backlog UI リニューアルの舞台裏 / Backlog Renewal UI
