行動科学でユーザーの最適なメンタルモデルをつくる
KristenはIrrational Labsの共同創業者であり、Googleの行動経済学グループの立ち上げメンバーの１人です。 顧客との関係の中で、顧客があなたのプロダクトをいろいろ探究し、使うモチベーションが高いのは初日をおいて他はありません。 なぜでしょうか？ 理由その１：衝動。初日において顧客は何らかの理由であなたのプロダクトをダウンロードし、使い始めるという動きを起こします。２日目にになってから、彼らはなぜそれを重要と考えたのか、なにが重要だと考えたのかを思い返すのです。 理由その２：サンクコスト。初日において、登録には少し時間を使いますから、顧客はその時間が無駄ではなかったと思いたがります。他のアプリを探したり、新しいオモチャが出ていないかチェックするほうが良かったと思いたくないのです。２日目には、あなたは顧客がしたことが他のどのようなものよりも意味があったと証明する必要があり
UXリサーチのための定量的なデータ分析
あなたの製品は一般的にどう思われていますか？ 日常生活ではどのように使われていますか？ お客様を理解できないと、お客様のニーズに対応できません。そこでUXリサーチが登場します。ターゲットオーディエンスの行動の背後にある明確な答えを提供し、企業が十分な情報に基づいて決定を下すのを支援します。 定量的UXリサーチとは、人間の行動を説明する数値データを理解することであり、ユーザー体験を成功させるための重要な要素の１つです。 定性的（なぜ） vs 定量的（なに）リサーチ 答え探しをはじめる前に、定性的リサーチの役割にも注目することが重要です。これにより、質問の背後にある 「なぜ」 を理解し、ユーザーの意思決定プロセスを把握できます。 定性的調査は少人数の参加者を対象に行われることが多く、今後の道筋について明確な見通しを示すものではありません。しかし、定性的リサーチは定量的リサーチの枠組みを作ること
認知負荷の増加がWebサイトに与える悪影響
Paul Boag氏はユーザー体験デザイナー、サービスデザインコンサルタント、およびデジタルトランスフォーメーションのエキスパートです。非営利団体や企業向けに、デジタル体験の改善を目指す支援をしています。 あなたのWebサイトは、訪れるユーザーにあれこれ考えさせすぎてはいないですか？ ユーザーに大きな認知負荷をかけていて、それによってユーザーがあなたのWebサイトから離脱していっている、ということはありませんか？ もしそうならば、これは修正すべき問題で、実際に修正が可能です。 認知的な負荷による影響 この問題はWebデザイナーである私たちと明らかに密接に関連しています。ユーザーが１つのことに集中しすぎて、他の要素に気が付かなかった場合、Webサイトでの重要なCTA（コールトゥアクション）だって気づかれない可能性があるということです。そう、ものごとをクリーンかつシンプルに整理したいというデザ
UXデザイナーが創り出して活用する10の成果物
Miklosは、18年以上のキャリアをもつUXデザイナーのリーダーであり、プロダクトデザインのストラテジストでもあります。フルスペクトルのプロダクトデザイナーとして、ユーザーのニーズ、ビジネス目標、テクニカル面での実現可能性などを考慮しながら、ユーザーの要求を満たし、利益をもたらすプロダクトデザインを目指しています。 UXデザイナーはさまざまなシーンでその活躍が期待されています。たとえば最小限のドキュメントを用いて作業を進めるチーム、リーンスタートアップやアジャイル開発を求められる環境、外部企業とコンサルティング契約を結ぶ場合、または厳しいドキュメント要件を持つ大企業や政府機関のコンサルティング業務など、さまざまな環境が挙げられます。 関わり方や環境の性質（およびそれをすべて結び付けるもの）に関係なく、UXの専門家はデザインに関するアイデア、研究結果、プロジェクトのコンテキストを効果的にさ
よりユーザーを中心としたデザインスプリントを考える
この記事はUX for the Massesからの翻訳転載です。配信元または著者の許可を得て配信しています。 Making 5-day designs sprints more user-centred もし１つだけ超常的な力が手に入るとしたらなにを選びますか？ 私なら未来を予見できる予知能力を選びます。想像してみてください。株式市場はもちろん、あらゆるギャンブルで大儲けできるだけでなく、プロダクトやアイデアが実現されるのかずっと前にわかってしまいます。たとえばFacebookやTwitterが世に出る前にそれらをつくることができます。フラットデザインが主流になるずっと前にそれをつくり出して、友達をあっと言わせることもできました。いつでもどのデザインがうまく行って、どのようなアイデアが成功するのかを知ることができるでしょう。時代遅れのデザイナーになることは決してなく、いつでもスーパーデザイ
登録フォームのテキストフィールドにはオフホワイトを
アプリケーションをデザインする際、ほとんどのデザイナーはコンテンツページには労力を費やしますが、登録フォームは見過ごしがちです。ユーザーが辿り着くのは、視覚的に魅力がなく、無味で事務的なフォームです。白いバックグラウンド、まっさらなテキストフィールド、煩雑な文章、不快な黒のアウトラインがあちこちに散らばった、登録のモチベーションを掻き立てないフォームです。もしあなたのフォームがそんな状態であれば、改善の余地ありです。 あなたのアプリを使いたいユーザーはフォームの見た目に関わらず登録はしてくれるでしょう。しかし、まだ決めかねているユーザーは事務的なフォームを見て辞めてしまうでしょう。第一印象で多くの見込み顧客を失っている可能性があるということです。もっと機能的で魅力的なフォームにすることで、ギリギリで決めかねているユーザーの背中を押すことができます。 ビジュアルがユーザーを後押しする ある調
北欧のUXデザイナーが日本の文化から学んだこと
Usable MachineのUXデザイナー/Design Matters。デザインと技術に関して書くことが大好きなデザインオタクです。 日本人は、複雑なデジタルテクノロジーを使いこなし、伝統文化からインスピレーションを引き出すことの本当の意味を理解していると言えます。私たちは北欧のデザイナーとして、日本のデザインと文化から学ぶべきものを見つけたいと思いました。そこで私たち、Design MattersのJulieとMichaelは、デジタルデザインの新しい視点を見つけるために東京に５日間、滞在してみることにしました。 日本はデザインの文化においてクオリティの高さは良く知られていて、特にテクノロジーの分野で高い評価を得ています。しかし、日本のデジタルプロダクトと非デジタルプロダクトのデザインはまったく異なることに気が付きました。インテリアデザインを始めとした日本の非デジタルデザインについて
【2020年版】プロジェクト進行管理に便利なガントチャートツール20選
プロジェクトの進行においてスケジュール管理というのはとても重要になります。スケジュールをしっかりと把握しておかなければ効率よく業務を進めることもできなくなってしまいます。このスケジュール管理をするために使うと便利なのが「ガントチャート」です。 ガントチャートとは ガントチャートは横軸に日付、縦軸にタスクを並べ、各タスクごとに予定を記入したり進捗を記入することで、プロジェクト全体のスケジュール管理ができる表のことを指します。１つのプロジェクトを進める上で多くの作業（タスク）がありますので、ひと目でスケジュールの進捗を把握し、各タスクのスケジュール調整を適宜行うことができるのが利点です。 エクセルなどでも作ることは可能ですが、一からガントチャートを作るのはなかなか骨が折れる作業になります。そこでおすすめなのがガントチャート専用のツールやサービスです。 以下に、国内外のガントチャート管理ツールを
UIにダイナミックなアニメーションを盛り込める20の無料ツール
近年では誰もがアニメーションを活用します。たとえばBttn.cssやHover Buttonsといった、ボタンに追加できる非常に小さなホバー効果や、Granim.jsを介して動く、魅力的でダイナミックなグラデーションスタイルの背景などが存在します。サイズにかかわらず、アニメーションはタイポグラフィやナビゲーション、ロゴタイプなどと同じように、インターフェイスにとって不可欠な要素です。アニメーションを短い時間で消滅する、ある種の無駄な要素だと考えているなら、それは間違いです。 アニメーションはただユーザーを楽しませるだけの要素ではありません。とても深い目的のために働くものです。ユーザー体験全体を結びつけるために使われるものもあれば、インターフェイスのアクセシビリティを向上させ、見つけやすく理解しやすくするために使われるものもあります。
すぐれた開発者体験のためにデザイナーができること
AlexanderはStockholmに住むUXデザイナーです。アクセシビリティやフロントエンドの開発において長年の経験があります。 私は仕事の中で、優れた開発者経験がプロジェクトの成功に大きく寄与していることを知りました。この記事では、デザイナーとしてプロジェクトに貢献するヒントを紹介します。 私は、スウェーデンのストックホルムでUXデザイナー、フロントエンド開発者として８年間働いています。これまでに参加したプロジェクトを振り返ってみると、すばらしいユーザー体験を提供することができたプロジェクトには、いつも優れた開発者体験がありました。一方で、開発者を無視したプロジェクトでは、期待された体験が得られないことが多かったのです。 少し単純化しすぎかもしれませんが、開発者体験（DX=Developer Experience）は開発者のユーザー体験であると言えます。 「開発者体験」という言葉は珍
フィッツの法則をUIデザインに活用する
よく知られているように、人間の行動は予測がつかないものです。重力、電気、摩擦とは違い、毎回いつも同じように振舞うわけではないようです。 そしてこのことが、フィッツの法則を興味深いものにしています。フィッツの法則とは、人間の振る舞いについての非常によくできた予測モデルです。 デザイン時にフィッツの法則を活用することで、標準的な人間の振る舞いを用いて、使いやすいインターフェイスを作れるようになります。あなたのWebサイトにも、ソフトウェアのプログラムにも、ゲームにも、これを用いることができます。食料品店のセルフレジから金融系のWebサイトまで、人間の行動は変わらずに同じままなのです。 どんなインターフェイスも、フィッツの法則から得られる教訓を用いることで、ユーザーが起こすエラーを減らして、彼らがタスクをより素早く達成するようにできます。 フィッツの法則とは何か フィッツの法則は、人間の行動をモ
モバイルデザインのために再確認すべきヒューリスティック原則
Jordanはビジュアルコミュニケーションに注目し、戦略やサービスデザイン、UX/UIを担当するアメリカのデザイナーです。 Jacob Nielsen氏は多くのデザインパターンを収集し、人間とコンピューターのインタラクションにおけるユーザビリティの構築を指導していました。そして1994年には、それまで学んできたことをユーザビリティヒューリスティックに反映し、それを用いた評価の原則を集めて公開しました。それから25年が経ち、コンピューターがスマートフォンに変わった現在においても、Nielsen氏の唱えた原則はいまだ揺るぎません。 人間中心デザインによってユーザーの重要性に対する認識が高まり、それに応じてデザインプロセスも形を変えてきました。Nielsen氏の唱える原則はあらゆるスクリーンにおいても普遍的ですが、モバイルデバイスの人気が高まり続ける現在、強調すべきはモバイルインターフェイスです
UIデザインにおける赤色と緑色の使い方
色は私たちの認識や感情に大きな影響を与えます。正しく使用された場合、その色はユーザーの特定の反応を引き出す事ができます。ここでは下記の理由に則り、赤と緑という２つの色に注目したいと思います。 赤色と緑色はどちらも実用的な色であるため、UIデザインにとって非常に重要です。 UIのアクセントカラーとして赤と緑を使用する、一般的な方法を見ていきましょう。 重要さを意味します。即座に注目を集め、ユーザーに迅速な決断を促す非常に目立つ色です。 赤色はとても高い温度を示す色です。情熱から怒りというような感情が含まれている強烈な色でもあります。 警告または危険を意味します。 赤いライトが点滅している場合、人々は危険または緊急事態を連想します。 エラー表示 赤色は多くの場合、警告や非常に重要で確認が必要なもののいずれかに関連付けられています。そのため、エラー表示について考えるときに最初に思いつくのは赤色で
モバイルにおけるステップインジケーターはどうあるべきか
フォームが複数ページに渡る場合、ステップインジケーターは必要不可欠です。ステップインジケーターはユーザーに対して自分たちが今どのステップにいて、あとどのくらいのステップが残っているかを示す役割があります。 画面上のスペースが限られているためモバイルフォームで、ステップインジケーターを提示することは困難です。デスクトップと同じインジケーターをモバイルフォームで使用すると、可読性と可視性の問題が生じてしまいます。 直線型 vs 放射型 無理やり狭いスペースに各ステップのタイトルを収めると、テキストサイズが小さくなりユーザーが読みにくくなります。さらに一度にあまりに多くのステップ名と番号が表示されるため、可視性も下がります。結果、視覚的なノイズが発生し、ユーザーが現在いるステップを把握することが難しくなってしまいます。 モバイルフォームには放射型のインジケーターを使用してください。こちらの方がユ
ユーザーを離脱させない電話番号の入力フォームとは
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 電話番号入力フォームは、生年月日入力フォームと並んでくせ者です。たくさんのフォーマットがあり、どの入力方法が正しいかを見分けにくいことがよくあります。国番号を入力すべきか否かさえよくわかりません。 適切な入力フォーマットを判別できないと、ユーザーは電話番号入力フォーム以外の項目も入力内容が不適切なのではと不安になります。電話番号入力フォームでエラーがでると、フォーム入力自体を放棄してしまうかもしれません。 どのフォーマットが正しく、どのフォーマットでエラーが出るのかを、ユーザーが入力時に困惑しないように伝えるべきです。もしユーザーが困惑するようあればユーザー体験が乏しいということなので、デザインし直す必要があります。入力フォーム改善のためには、
マイクロインタラクションを考慮すべき４つの理由
自身の旅行体験をまとめているフリーWebデザイナー。オンラインの小さなリブランディング会社と仕事をしている。会社の理念は、顧客が希望を持ち、人生を新たにもっと楽しめるような製品を作り、提供すること。 マイクロインタラクションは、私たちの周りに溢れています。これはユーザインターフェイスの特定の瞬間のやりとりに用いられるものです。たとえば、ユーザーがモバイルアプリのボタンをタップするとナビゲーションメニューが開かれるなどが一般的なマイクロインタラクションになります。 より詳しく述べると、マイクロインタラクションとはユーザーがどこかでなにかの操作をしたときに起こる、インターフェイス上のアニメーションや変化を指します。ユーザーにとって有益な情報を提供するインタラクティブなアニメーションのことだと考えてください。マイクロインタラクションを利用する理由はたくさんありますが、ここでは４つの例を紹介しまし
優れたダッシュボードをデザインするための10のガイドライン | UX MILK
Neilは、イギリスのAstraZenecaで働くUXデザイナーです。現在さまざまなUXデザインのプロジェクトを率いています。 もしあなたがプロの自転車競技に詳しければ、「アシスト（Domestique）」という用語を聞いたことがあるでしょう。馴染みがない人に向けて説明すると、アシストとは自転車競技のチームにおける選手の役割を指します。「Domestique」はフランス語で「下僕」という意味です。 アシストの選手は、水のボトルをチームの車から集めてほかのチームメイトに渡すという役割を担っています。また、チームの車が近くにいないときに先頭選手の自転車が故障したら、自分の自転車や予備のタイヤを渡します。さらに、遅れているメンバーがいれば、先頭集団に追いつくまで彼らを牽引し、追いついたら自分はペースを落とします。このようにアシストの選手は無欲にひたすら奉仕し続けます。決してアシスト自身がレースに
効果的なUXライティングのための16のルール | UX MILK
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 UXライティングとは、プロダクトとユーザー間のインタラクションを支援し、プロダクト内のユーザーを導くUIのコピーライティングのことを指します。UIのコピーには、ボタンやメニューラベル、エラーメッセージ、セキュリティの注意喚起、利用規約、その他のプロダクト使用に関する指示などが含まれます。 UXライティングの主な目的は、ユーザーとデジタルプロダクトのコミュニケーションを解決することです。この記事では、効果的なUXライティングに関する実践的なヒントを提供します。 ※編注：当記事はあくまで英語におけるUXライティングについての紹介になります。 なぜUIのテキストをいじることがデザインプロセスにおいて重要なのか 多くの場合、プロダクトの開発者は、UIのテキストをプロダク
無料のマテリアルデザインフレームワーク10選
ライターであり、Sufism:A Brief Historyの著者。メインの分野はオープンソース、モバイル開発、WebCMS、ベクターアートなど。電子ジャーナルのBrave New Worldのチーフ＆エディター。 デザイン原則に科学と技術のイノベーションを組み合わせたら、なにが起こるでしょうか？ まさにGoogleが実践し作りあげた、マテリアルデザインのコンセプトが創られるのです。 マテリアルデザインとは、クラシックデザインの原理やルールと、サイエンスやテクノロジーの可能性やきまりを結びつけたビジュアルデザインコンセプトです。マテリアルデザインだけでなく、関連するツールやリソースも同様に人気があります。 この記事では、マテリアルデザインスタイルを採用するWebやモバイルプロジェクトに最適なフレームワークをまとめました。 マテリアルデザインUIキットとマテリアルデザイン活用の実例もまとめて
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
