全てのUIデザインに必要な５つの状態（実例と共に） - The five UI states｜TK - UXデザイナー in 🇺🇸
授業ではあまり習わないですが、UIデザインの実務において常に考えなければならないフレームワークの一つにThe five UI statesがあります。雑に説明するとUIは以下の５つの状態になる可能性があることを踏まえて、それぞれに対してデザインを作っておくというコンセプトです。 • 何も登録されていない状態 (Blank state) • ロードしている状態 (Loading state) • 不完全な状態 (Partial state) • エラーが起きている (Error state) • 理想的な状態 (Ideal state) 授業のプロジェクトや提案型プロジェクトではそこまで深く考えないのかもしれませんが、UIデザインの実務では相当な時間を占めていることが多いです😑 特に複雑な構造のB2BプロダクトだとError stateのUIパターンを一週間考え続けるみたいなことも多々あり
「俺はこっちのデザインの方が良いと思うな〜」の倒し方 - Qiita
「それってあなたの感想ですよね」 ..... けど、これじゃ勝てないよね、現場はそんな単純じゃないですよね そんなあなたのデザインにひと摘みのエビデンスを添える手法をいくつかお伝えします。 そうです、ユーザーテストです。 .....まだ閉じないで...まだ諦めないでほしい。 いつものじゃなくて定量的に測るユーザーテストです。 タイトルのような主観的な感想を、客観的な数値で倒すことができるのです。 ここではプロダクトのデザイン（見た目やUI設計）をどう定量的にテストしていこうかというお話をします。 はじめに定量的なユーザーテストをすることで見える世界をお伝えするので、その後はこういう場面ではこう倒すといったような How to を列挙しようと思います。 エンジニアの皆々様はテストを書きますよね。 デザインのテストは疎かにしてませんか？ ユーザーテストをすることで実現できること たとえば Yo
なぜディレクターはUXを分解・言語化しなくてはいけないのか？クソゲーが生まれてしまう原因｜かえるD
ゲームディレクターとして動いていると、企画やできたもののフィードバックをよくする。そうすると必要なのは、UX（ユーザー体験）を言語化して説明をして納得をしてもらうことだ。一緒にやっているプランナーから、UXの分解・言語化をどうやっているのか？という質問が来たので、書いてみる。 ゲームディレクターは、なぜUXの分解・言語化が必要なのだろうか？ これは簡単で、自分が感じていることを言語化できないとチームメンバーに伝えることができず、納得感を持って作ってもらうことができないためだ。「なんとなくダメ」とか、「理由は説明できないけどこうして」という指示は、繰り返せば繰り返すほどやらされる方はしんどくなっていく。当たろうが外れようが、何をやっているのかよくわからなくなってくる。主観ではなく、客観で伝えることができないと、チームは納得がしにくい。なので、ゲームディレクターにはUXの言語化能力がとても必要
Cookie規制が招くWeb体験の危機
欧州委員会はWebを破壊していると私は考えるようになりました。ユーザーのプライバシーを守ろうとする彼らの試み（GDPRやクッキー法とも呼ばれるeプライバシー指令）は、クッキー通知とプライバシーポリシーのオーバーレイの氾濫という予期せぬ結果を引き起こしました。 事実、平均的なユーザーの立場からすると、ネットワーク中立性の崩壊よりもクッキークライシスの方が、日々のWeb上での体験においてダメージが大きいと言えます。 それでも、ネットワーク中立性に関わるものと同じような組織的抵抗は、クッキー通知の異常性に対してはほとんど発生していません。私たちは、その意図が良いものであるために受け入れているのです。 誤解しないでほしいのですが、その意図自体は良いことです。どのサイトがトラッキングしてOKで、どの情報を収集しても良いかの主導権はユーザーが持つべきです。欧州委員会の取り組みは評価に値します。ただし、
なぜWebサービスはUIの改悪を繰り返すのか
自分はWebサービスの表側を作るお仕事に就いていますが、日本人ってサービス系の開発に向いてないよなーと強く思います。 特にWebサービスやアプリについては、まじで向いてない種族だと思います。 一番アカンなーと思うのが、リリース後の開発において機能追加は精力的に行う一方、機能削減はぜーんぜんやらないんですよね。 Webサービスって、リリース直後の段階である程度しっかりとしたUIで組まれていて、機能追加のことは基本的には考慮されていないケースが多い印象があります。 そのせいか、機能が追加されればされるほどいびつなUIとなっていって、最初は見やすかったのに、どんどん見づらくなっていくという…。 そうなってくると途中で全面リニューアルを行わざるを得ないことになるんですが、その頃には元のコードはぐっちゃぐちゃになっているわ元いたエンジニアはやめてるわてんやわんやで、もうどーしようもない状態になってい
認知負荷の増加がWebサイトに与える悪影響
Paul Boag氏はユーザー体験デザイナー、サービスデザインコンサルタント、およびデジタルトランスフォーメーションのエキスパートです。非営利団体や企業向けに、デジタル体験の改善を目指す支援をしています。 あなたのWebサイトは、訪れるユーザーにあれこれ考えさせすぎてはいないですか？ ユーザーに大きな認知負荷をかけていて、それによってユーザーがあなたのWebサイトから離脱していっている、ということはありませんか？ もしそうならば、これは修正すべき問題で、実際に修正が可能です。 認知的な負荷による影響 この問題はWebデザイナーである私たちと明らかに密接に関連しています。ユーザーが１つのことに集中しすぎて、他の要素に気が付かなかった場合、Webサイトでの重要なCTA（コールトゥアクション）だって気づかれない可能性があるということです。そう、ものごとをクリーンかつシンプルに整理したいというデザ
デザインの敗北事例集～人に伝わらないデザインは死ぬ～｜かじさん＠旅するWebマスター
ヒトに伝わらないデザインは、いとも簡単に死んでしまう。 オシャレでカッコよく、綺麗で鮮やかなデザインを作り、自分もクライアントも満足したとしても、機能性が無いデザインは簡単に死ぬのだ。 今回はそんな「デザインの敗北」事例を10個程度ご紹介しよう。 ※反対の「デザインの勝利事例集」記事はこちら 東京ミッドタウン日比谷の「極力シンプルで美しいデザインにしよう」というデザイナーの欲求がトイレのアイコンを小さくしすぎて「トイレはどこ？」という質問が多発して看板が設置されるの、まさに『デザインの敗北』というほかなくてとてもすき pic.twitter.com/kpI8LnWkq7 — Simon_Sin (@Simon_Sin) April 2, 2018 わかりやすいデザインの敗北事例である。 どう見てもトイレを示すアイコンが小さすぎる。 デザインは「問題解決」のためにあるので、機能性を大いに失っ
モバイルではメニューを画面下に表示すべき理由
スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ
ポジティブな第一印象でサイトの直帰率を改善する方法
高い直帰率ほど気落ちすることもありません。ユーザーがWebサイトで数秒しか費やさないなら、どれだけ私がコンバージョン率を最適化するアドバイスを伝えても、何の意味もないでしょう。 Microsoftが実施した調査によると、ほとんどのユーザーの集中力が持続する時間は、たった８秒しかありません。この8秒間で、ポジティブな第一印象を与えて、ユーザーをWebサイトにとどまらせる必要があります。 残念なことに、現実はさらに困難です。Journal of Behavior and Information Technologyに掲載された調査によれば、ユーザーは500分の１秒で第一印象を判断しています。 加えてこの第一印象は、ハロー効果のせいで、サイトをより長く閲覧しなければならないとしても維持されます。 サイトの第一印象によって、詳細なコンテンツをユーザーがどのように認識するかが決定します。 直帰率を下
業務システムにおけるUXリサーチのポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
UXリサーチとは、ユーザー体験に関する調査の総称です。 ユーザーファーストのシステムやサービスを提供するためには、ユーザー体験からユーザーニーズを掴むUXリサーチは欠かせません。UXを重視する企業では、UXリサーチは積極的に行われています。UXリサーチについて言及した書籍も多く、ネット上には有益な記事が多数アップされています。 ただその一方、世に出回っているUXリサーチに関する解説の多くは、調査対象が生活者であることが前提です。 UXリサーチの総論は、対象が生活者であっても企業内のビジネスパーソンであっても変わりません。しかしながら、各論となる具体的な手法は、ターゲットなどの前提が変わると、そのまま使えません。 例えば、企業内で使われる業務システムやSaaSのUXリサーチは、生活者向けのUXリサーチとまったく同じというわけにはいきません。対象者が社内の限定的なユーザーとなる場合、インターネ
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
新しいHTMLタグportal、Portals機能で変わるWebの遷移体験！ CDS2019で紹介されたヤフーの実装例 #UIUX
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。PayPayモールのエンジニア関と、Yahoo!ニュースのデザイナー萩野です。 皆様、突然ですがPortalsをご存じでしょうか。 Portalsとは、新しいHTML要素です。2019年11月11日〜12日にサンフランシスコで開催された「Chrome Dev Summit 2019」（以下CDS）でも紹介されました。 本記事では、Portalsが可能にする新しいWebでの体験をご紹介します。 Portalsとは？ なにができるの？ Webブラウザー上でユーザーにとって良い体験を提供するためには、表示速度の向上が欠かせません。 Portalsを利用すると、画面遷移の体感速度を向上させることが可能です。 まずはこちらの比較
デザインの一貫性の重要性とは
Chris氏はプロダクトマーケティングマネージャーであり、デザインとタイポグラフィのバックグラウンドを持っています。アカデミー・オブ・ファイン・アーツでインストラクターを務め、学生にデザイン理論とソフトウェアデザインについて教えています。 デザインシステムをどのように作成すれば、サービスが拡大する際にデザイナーや開発者がいつも直面する問題を解決できるのでしょうか。 少し前に、UXPinのCEOであるMarcin Treder氏は、社内のデザインシステムの構築に役立つ一連の記事を執筆しました。業界のリーダーたちにインタビューすると、世界中のチームにおいて頻発する問題はデザインの一貫性の欠如であるとわかりました。また、デザインチームやユーザーにとって、この一貫性の欠如は数多くの問題を引き起こす可能性があります。 ユーザーの混乱：同じアクションなのにさまざまなパターンがあると、ユーザーは混乱して
ダメなUXデザイナーが言いそうな10のセリフ
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 優秀なUXデザイナーについて書かれた記事はインターネットに多く存在しますが、本記事はそれらとは違います。今回は悪いUXデザイナーを見分ける方法について話したいと思います。 デザイナーが優秀かどうか見極めるのに役立つセリフを10個ご紹介します。 私はUXデザイナーなので、ユーザーにとって何が最善か知っています ステークホルダーよりも、チームメンバーよりもはるかに問題領域に詳しいと信じているデザイナーは少なくありません。ときにはユーザーより把握していると考える人さえいます。したがって、デザイナーが自分たちのソリューションに固執し、批評から逃れようとする状況がよく起こります。 理解しておくべきは、どれだけ長くデザイナーとして経験を積んでいようと、すべてのアイデアは仮説
誰かのせいで良いUXが提供できないと感じたら
PaulはUXデザイナーであり、サービスデザインのコンサルタント。UNICEFなどの非営利団体や企業に対して、ユーザーのデジタル体験を向上させるためのコンサルティングを行っています。 私がUXの専門家から聞いた一番の不満は、「同僚や顧客、マネージャーが改善の障害になっている」ということだ。しかし、それはなぜでしょう。そして私たちはそれに対して何ができるのでしょうか。 以前から気になっていたことでシェアしたかった内容です。これが学びのあるブログ記事というより愚痴に近い内容であることは十分に理解していますが、これは私のブログ記事ですし、好きに書かせていただきます。 私は、UX分野の仲間たちが、同僚や顧客、経営者について不平を言うのを聞くのにうんざりしています。公平を期すために言っておくと、他のデジタル専門家も同じことをしていると聞いていますが、このあとすぐ触れるように、UXの専門家ならもっと良
ショッピングサイトで見かけるダークパターンのまとめ | コリス
たくさんのショッピングサイト、オンラインショップがあります。良心的なサイトもたくさんありますが、意図しない購入や申込に誘導・欺くサイトもあります。利用者として、そして制作者として、気をつけたいダークパターンを紹介します。 料金に手数料が加えられていたり、メール配信が知らない間に申し込まれていたり、登録は簡単なのに退会が難しかったり、キャンセルがクリックできないみたいに表示されてたり、さまざまなダークパターンが存在します。 Dark Patterns at Scale by プリンストン大学とシカゴ大学の研究者によるレポート 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Sneaking -スニーキング Urgency -アージェンシー Misdirection -ミスディレクション Social proof -ソーシ
UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感
ユーザーに直感的で分かりやすいボタンとは、UXの観点からくわしく解説
ボタンのクリックレートが低い、ボタンを配置したページにユーザーが長い時間を費やしている、これはボタンが直感的でなく、分かりにくいボタンが原因かもしれません。 コンテンツにおけるボタンの配置、ボタンの形状、導線に基づいた配色など、ユーザーに直感的で分かりやすいボタンをUXの観点から詳しく解説します。 5 Techniques to Make Mobile Call to Action Buttons Intuitive by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーが分かりやすいボタンとは 1. スキャンパターンに従ってボタンを配置する 2. 形を使って、ボタンをテキストから区別する 3. プログレッシブアクションにカラーを追加する 4. ラベルにあるテキストの太さを変える 5. 優先度の高
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン負債の返し方 〜ネイルブックの場合〜
UIの使いづらさにイラッとする！これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface
