Galileo AI
「UIの色を変えただけで大量のクレームを頂戴してしまった話」の何が問題か？｜moutend
結論話題の記事「UIの色を変えただけで大量のクレームを頂戴してしまった話」を読みました。ユーザーを軽視した内容に驚愕したのですが、それよりも記事が批判されている原因を理解できていない様子の方が存在することに衝撃を受けました。 現職のデザイナーあるいはデザイナーを目指している方々にお伝えしたいことは以下の3点です。 具体的な不都合を訴える問い合わせは無益なクレームではなく有益なフィードバックです。プロダクトの価値向上につながる貴重な意見ですから無視するべきではありません。 時間の経過でユーザーがUIに慣れることはありません。問い合わせをしても無駄だと学習して離脱したパターンを疑いましょう。受け入れられる場合も含めて画面の変更はユーザーに負担を強いているのだと自覚してください。 色覚特性や色とコントラストについて学びましょう。色だけで情報を伝えるデザインはアンチパターンですから避けてください。
UIの色を変えただけで大量のクレームを頂戴してしまった話｜のなと
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
UIデザインのための心理学：33の法則・原則（実例つき） | ベイジのUIラボ～業務システムとSaaSのUIを考える
ユーザーが「使いやすい」と感じるアプリケーションは、良いUIデザインで設計されているともいえます。良いUIデザインでは、ユーザーの認知負荷を下げる工夫がされています。認知負荷を下げる仕組みを知るには、心理学とUIデザインの密接な関係を理解することが重要です。 行動心理学や認知心理学の発展により、人間の感情や行動は、脳の仕組みに基づいて様々な法則に当てはめられることが分かってきました。UIデザインでも、心理学を活用したアプローチでより良いユーザー体験を生み出すことができます。特に業務システムのような複雑なアプリケーションでは、メニューや画面レイアウトなど幅広く活用できます。 今まで心理学はマーケティング領域で応用されることが多く、ウェブサイトやアプリケーションのUIデザインで語られることはそれほど多くありませんでした。そこで本記事では、人の様々な心理現象や認知の法則を、UIデザインに活用する
ミルクボーイがUIとUXの違いを説明したら｜広野 萌
挨拶内海「どうもお願いします。ありがとうございます。今、NFTアートをいただきましたけどもね。ありがとうございます。こんなんなんぼあってもいいですからね」 駒場「いきなりなんですけどね、うちのおかんがね、好きなIT用語があるらしいんやけど」 内海「そうなんや」 駒場「その名前を忘れたらしいねん」 内海「IT用語の名前忘れてまうってどうなってんねん。あれやろ、IT用語ゆうたらどうせ、デザイン思考か、アジャイル開発か、リーンスタートアップやろ！」 駒場「俺もそう思ったんやけどちゃうらしくてな、いろいろ聞くんやけど、全然わからへんねん」 内海「そうなん？」 駒場「うん」 内海「ほんだら俺がね、おかんの好きなIT用語、一緒に考えてあげるから、どんな特徴言うてたかとか教えてみてよ」 定義駒場「おかんが言うには、製品やサービスとの関わりを通じて利用者が得る体験及びその印象の総体やって言うてた」 内海「
UIの文言の決め方とOOUIの話 - ツレヅレナルママニ
Webサービスの開発をしていて、UIの文言について悩むことはありませんか？ 個人的には、あるボタンのラベルを名詞か動詞のどちらにするべきかで悩むことが多かったです。 そんなときに「他のサービスでもこうなってるし、xxがいい気がする」などと経験則に基づいて判断することはある程度できるものの、それを論理的に説明することが難しいと感じていました。 もしかしたらこのあたりは言語学や心理学に関わる話で、下手に深入りしない方がいいのでは？と思う時期もあったのですが、名詞か動詞のどちらにするべきかのヒントとなるnote記事にあるとき巡り合いました。 note.com 名詞か動詞のどちらにするべきか 名詞か動詞のどちらにするべきかについて、上記の記事では以下のように記載されていました。 選択されたオブジェクトに対するアクションは「体言止め」「名詞」を使う。 アクションからオブジェクトを選択する場合は、より
UIデザイン時にやってしまいがちな18の誤ち｜Mikio Kiura / ANKR DESIGN
WebデベロッパーのVictor氏による下記のツイートから始まるスレッドが大変参考になる内容だと感じたので、ご本人に許諾を得て日本語で紹介させていただくことにしました。 I reviewed 100+ user interfaces this year. Avoid the most common 18 mistakes to make your UI/UX design better 👇 — Victor (@vponamariov) July 30, 2021 私は今年100以上のユーザーインターフェースをレビューしました。あなたのUI/UXデザインをより良くするための、下記に示す18個の良くある誤ちを回避しましょう。本記事で使用する画像はすべてVictor氏のツイートから拝借しています。なお翻訳には一部私の意訳が入っていることをご了承ください。 1. 薄いコントラストの文字適切では
Home | Open UI
Open UISection titled Open%20UIThe purpose of the Open UI, a W3C Community Group, is to allow web developers to style and extend built-in web UI components and controls, such as <select> dropdowns, checkboxes, radio buttons, and date/color pickers. To do that, we’ll need to fully specify the component parts, states, and behaviors of the built-in controls, as well as necessary accessibility require
スマホUI考（番外編） UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは | fladdict
いま『ビッグオー駆動型開発』とよばれる開発手法が、業界の一部で注目を集めている。 その理由は非常にシンプルだ。『ビッグオー』は非常に安価で簡単な手法でありながら、従来の開発手法に比べ劇的にUIやUXを改善できるためである。 製品コンセプトのような上流から、ボタンのレイアウトといった下流工程、さらにはグロースハックやプロモといったリリース後のフェイズまで一つの手法でユーザビリティを評価できる。この汎用性がビッグオー駆動開発の大きな特徴であり、導入時の利点となる。 今回はこのビッグオー、の概要と具体的なやり方について論じたい。TwitterのUI拡張予言以来、久しぶりのUI系エントリである。 ビッグオー駆動開発とは何か？ ビッグオー駆動開発は、正式には『OKAN Driven Development（オカン駆動型開発）』とよばれる開発手法である。 これは自分のオカンを指標とすることで、低コスト
Re: スマホUI考（番外編） UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは - ネコメシCEOブログ
この記事は、「スマホUI考（番外編） UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは」へのトラックバック的なものです。 深津くんのこの記事では『ビッグオー駆動型開発』と名付けてますが、ちょー簡単にいえば、「どうしようか迷ったらオカンに聞け」という提言です。これは、概ね正しくもあるのですが、このような提言の仕方はリスクを伴う部分があるので、いちおう、早めにその旨を声明しておかねばという衝動に駆られました。ので、このエントリーに至っています。 で、この『ビッグオー駆動型開発』に関しては、ビミョーに懸念があったので、一応、反論というか、補足というか、まあなんというかそういうことをしておこう。ビッグオー駆動型開発自体の詳細は深津くんの記事にあるので繰り返す必要はないという前提で、欠点を挙げる。 そもそも当開発者たるエンジニアやデザイナーにおけるリテラシーの問題。彼らが、高齢者や低リテラシ
「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた｜Tsutomu Sogitani
大阪の実家に帰った時、リビングのテレビの裏側を見たらAmazonのFire Stick TVが挿してありました。このFire Stick TVをテレビに繋ぐと、Amazonのプライムビデオを観ることができるようになります。 プライムビデオには、Amazonプライムの会員であれば、追加費用を払うことなく楽しめる映画やドラマ、アニメなどが豊富に揃っています。さらに個別に追加金額を払うとほとんどの映像コンテンツを観ることができるという、まさにTSUTAYAキラーなサービスです。 うちのおかんは月に2～3回は映画館に行くほどの映画好きなので、プライムビデオのメインターゲットといえるでしょう。本来ならプライムビデオで映画三昧の毎日を送っていてもいいはずです。 しかしながら、Fire Stick TVを挿しているにもかかわらず、プライムビデオを一度も使っていませんでした。初期設定をした私の弟が一通り使
課金 UI まとめてみた｜あき - 良いもの作って正しく届ける
売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限
スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流｜Go Ando / THE GUILD｜note
前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで
Information Architecture. The Most Important Part of Design You’re Probably Overlooking.
What Is Information Architecture?Simply put, Information Architecture is the structure of all the information in your app or website. When we put care into the arrangement of information, we can make it easier to understand and navigate. It’s similar to how a writer starts with an outline before they write a story, or how an architect starts with a blueprint before they choose paint colors. In ess
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
v0 by Vercel
Patterns
Home
GitHub - inkline/inkline: Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.
Mantine
Jenkins Design Language (JDL)