デザインにおけるメンタルモデル
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 メンタルモデルは、ヒューマンコンピュータインタラクション（HCI）とインタラクションデザインにおいて重要な役割を果たしています。これらはユーザーが周りの世界をどのように知覚しているかに関連し、事実に基づくコンセプトではなく、人の信念に基づいています。しかし、もしユーザーのメンタルモデルを理解することができれば、あなたはデザインの中でこれらのモデルを再現し、デザインをより使いやすく直感的なものにできるでしょう。 メンタルモデルは信念から生まれたものです。何らかのシステムあるいは反応についてユーザーが持っている信念です。ほとんどの場合、この信念は実生活のモデルとある程度似通っています。ユーザーは将来の行動をメンタルモデルに基づくシステムによって計画したり予想した
登録フォームのテキストフィールドにはオフホワイトを
アプリケーションをデザインする際、ほとんどのデザイナーはコンテンツページには労力を費やしますが、登録フォームは見過ごしがちです。ユーザーが辿り着くのは、視覚的に魅力がなく、無味で事務的なフォームです。白いバックグラウンド、まっさらなテキストフィールド、煩雑な文章、不快な黒のアウトラインがあちこちに散らばった、登録のモチベーションを掻き立てないフォームです。もしあなたのフォームがそんな状態であれば、改善の余地ありです。 あなたのアプリを使いたいユーザーはフォームの見た目に関わらず登録はしてくれるでしょう。しかし、まだ決めかねているユーザーは事務的なフォームを見て辞めてしまうでしょう。第一印象で多くの見込み顧客を失っている可能性があるということです。もっと機能的で魅力的なフォームにすることで、ギリギリで決めかねているユーザーの背中を押すことができます。 ビジュアルがユーザーを後押しする ある調
メルペイが実践する「アジャイルUXリサーチ」とは
株式会社メルペイ UXリサーチャー。2014年株式会社リクルートジョブズへ入社し、人材領域のデジタルマーケティングやプロダクトマネージャーを経て、UXリサーチチームの立ち上げを経験。 株式会社メルペイでUXリサーチャーをしている松薗です。 2019年9月に開催されたUX MILK Fest 2019にて、「アジャイルUXリサーチ」という、弊社のUXリサーチの取り組みについてお話をしました。UXリサーチのマニアックな話にどれだけ興味を持っていただけるかドキドキしていましたが、当日は会場後ろで立ち見が出るほど多くの方にご参加いただきました。 今回は登壇の際、お話した内容を記事に再編集してご紹介します。 メルペイについて まずはじめに簡単にメルペイについてご紹介させてください。メルペイは、日本最大のフリマアプリを提供する株式会社メルカリのグループ会社である、株式会社メルペイが運営するスマホ決済サ
北欧のUXデザイナーが日本の文化から学んだこと
Usable MachineのUXデザイナー/Design Matters。デザインと技術に関して書くことが大好きなデザインオタクです。 日本人は、複雑なデジタルテクノロジーを使いこなし、伝統文化からインスピレーションを引き出すことの本当の意味を理解していると言えます。私たちは北欧のデザイナーとして、日本のデザインと文化から学ぶべきものを見つけたいと思いました。そこで私たち、Design MattersのJulieとMichaelは、デジタルデザインの新しい視点を見つけるために東京に５日間、滞在してみることにしました。 日本はデザインの文化においてクオリティの高さは良く知られていて、特にテクノロジーの分野で高い評価を得ています。しかし、日本のデジタルプロダクトと非デジタルプロダクトのデザインはまったく異なることに気が付きました。インテリアデザインを始めとした日本の非デジタルデザインについて
Webデザインにおける適切なスクロール方法とは？
PaulはSpeckyboy Design Magazineの創設者、編集者です。Webデザイン業界で長年の経験があり、最新のWeb技術やデザインのトレンドに情熱を注いでいます。 スクロールはWebサイトのきわめて基本的な機能です。しかし、基本的な要素であっても、スクロールはユーザーにとって便利な機能にも、ユーザーを苛立たせ、競合サイトに移動させてしまう原因にもなり得ます。 Webサイトの中には、ページを最下部までスクロールすると、スクロールバーが中央の位置に戻ってコンテンツが下に読み込まれ続ける、「無限」スクロールを実装しているものもあります。このようなスクロール機能は一部のサイトでは有効ですが、ユーザーを苛立たせてしまうことも多くあります。したがって、効果的なスクロールの活用方法と適切なスクロールの種類を理解することが重要です。 複雑な要素には単純さが必要 近年のWebサイトはこれまで
トグルスイッチの誤用をやめよう
AnthonyはUX Movementの設立者で執筆者です。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。 トグルスイッチを使うべき場合と使うべきでない場合があります。デザイナーが誤った使い方をするとユーザーの混乱とイライラにつながります。使うべきタイミングを知るには、さまざまなタイプのトグルの状態や選択肢について理解する必要があります。 文脈上の状態 vs システムの状態 トグルスイッチとトグルボタンをデザイナーは混同しがちです。両方とも状態を管理しますが、トグルスイッチとトグルボタンには根本的な違いがあります。トグルスイッチはシステムの状態を管理し、トグルボタンは文脈上の状態を管理します。文脈上の状態のトグルはユーザーが見ようとしている現在の画面にのみ影響を及ぼしますが、システムの状態のトグルはアプリ全体に影響を及ぼします。 トグルスイッチを文脈上の状態のために使う
UXデザインにアニメーションを導入するときに注意すべきこと
Jolinaは、アメリカやイギリス、オーストラリアの複数のスタートアップを相手にしているデジタルマーケティングの戦略家です。 長いアニメーションの歴史の中で明らかになったものがあるとすれば、それは動く画像はいつだってユーザーの心を掴めるということです。アニメーションの目新しさは薄れたものの、今ではエンターテイメント以外の目的でも使われることが多くなりました。実際、時代を問わない魅力と汎用性を最大限に活用することで、Webサイトのユーザーに好ましく魅力的な体験を作り出すことができます。 しかし、特にUXデザインの立場から見ると、アニメーションはすべてが同様に作られているわけではありません。いくつかのアニメーションは、問題を解決せず、むしろ新たに生み出してしまっています。善意から作られていても、間違ったアニメーションはユーザーの目的の邪魔をし、インターフェイスを乱し、Webサイトに悪影響を与え
WebサイトのUXデザインにありがちな６つの間違い
Alanはソーシャルメディア、Webデザイン、モバイルアプリ、デジタルマーケティングといったさまざまなトピックの最先端を扱うライターです。 ユーザー体験（UX）は現代のビジネスにおいてきわめて重要です。ターゲットとなる消費者が買い物をするためにWebサイトをクリックした瞬間から、消費者体験に対するインプレッションが発生します。Webサイトは、ユーザーがスムーズに買い物できるようにし、有意義なインタラクションを通じてユーザーを夢中にしなければなりません。もしWebサイトが期待に応えられなかったら、ユーザーは競合のサイトに移動してしまうでしょう。 直帰率を下げ、コンバージョンを上げるための最善の方法は、次に紹介する６つのよくあるUXの間違いを避けることです。 １. 機能性と見た目の美しさのどちらかを優先してしまう Webサイトは、クリエイティビティと機能性が完璧にバランスを保っていなければなり
ユーザー体験の質を左右するナビゲーションのパターン６選
アプリはアイデアから生まれ、目的によって具体化されます。私たち起業家やデザイナー、開発者の関心は、最初から最後までスムーズな行程に沿ってユーザーを誘導して、有益な体験を与えることにあります。 あるリサーチによれば、65％近くのユーザーは、アプリ体験が好ましくないブランドを否定的に感じています。したがって決定的に重要なのは、ユーザーが労力を使わずに自分たちの課題の解決策にたどり着けるよう、インターフェイスのデザインをシンプルにすることです。 Gerry McGovern氏は『Usability: Navigation is More Important than Search』という記事の中で、機械に詳しい70％のユーザーはリンクをクリックすることからタスクを始めている一方で、残りの30％は検索から始めていることを明らかにしました。 これを踏まえると、ナビゲーションがユーザー体験でとても重要
モバイルアプリに最適なボタンサイズと間隔とは
UX Movementの創立者、ライター。ユーザーに優しいユーザーエクスペリエンスデザインのスキルを読者の方が上達できるよう、UX Movementのブログを作りました。 あなたのユーザーはスマホアプリやモバイルサイトのボタンをちゃんと狙った通りに押せているでしょうか？ きちんと押せているかをユーザーのせいにする前に、ボタンのサイズや間隔が最適化されているかどうか確認しましょう。 ボタンが最適なサイズと間隔になっていないと、ユーザーが狙いを外したり、間違ったボタンを押してしまいます。この記事ではどの程度が最適かを見ていきます。以下の数値は、96DPIでのCSSピクセルを基準にしています。 ボタンサイズの基準 まずは基準となるサイズがわからなければ、ボタンのサイズが最適かどうかを判断できません。幸いなことに、ボタンのサイズと間隔に関するリサーチによって、高齢者を含むほとんどのユーザーに有効な
Webデザイナーがやめるべき非生産的な５つのこと
この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 Web Designers: Stop Doing These 5 Unproductive Things Webデザイナーでいることは、時には狂気の沙汰であるように思えます。いつだってとんでもなく忙しいか、ただただ何かが起こるのを待っているかのどちらかです。当然、お金の状況は混沌としています。 ですから、クライアントを満足させるように苦心しなければなりませんし、その上に、最新のトレンドや技術を学び続けなければなりません。どうです、疲れてはいませんか？ 私たちがしていることの中に、全く生産的でない仕事が含まれていることに気づくのは難しいものです。たとえしっかりした意図を持っていたとしても、知らず知らずのうちに自分の首を絞めていることもあります。これを踏まえて、仕事と
モバイルにおけるステップインジケーターはどうあるべきか
フォームが複数ページに渡る場合、ステップインジケーターは必要不可欠です。ステップインジケーターはユーザーに対して自分たちが今どのステップにいて、あとどのくらいのステップが残っているかを示す役割があります。 画面上のスペースが限られているためモバイルフォームで、ステップインジケーターを提示することは困難です。デスクトップと同じインジケーターをモバイルフォームで使用すると、可読性と可視性の問題が生じてしまいます。 直線型 vs 放射型 無理やり狭いスペースに各ステップのタイトルを収めると、テキストサイズが小さくなりユーザーが読みにくくなります。さらに一度にあまりに多くのステップ名と番号が表示されるため、可視性も下がります。結果、視覚的なノイズが発生し、ユーザーが現在いるステップを把握することが難しくなってしまいます。 モバイルフォームには放射型のインジケーターを使用してください。こちらの方がユ
クリエイティブなタブバー型ナビゲーションを考える | UX MILK
モバイルナビゲーションの基本パターンを選ぶときに、プロダクトデザイナーは２つの選択肢から選びます。ハンバーガーメニューとしても知られるドロワー型か、タブバー型です。どちらのナビゲーションにも長所と短所があります。 この記事はそのうち、タブバー型に関するものなので、ドロワー型を上回るタブバー型の利点から話しましょう。 ユーザーの現在地がひと目でわかる。アプリの中で自分がどの位置にいるのかをメニューを開いて確認する必要がありません。ひと目で知ることが可能です。 見つけやすさ。ユーザーはトップレベルのナビゲーションオプションを最初から見ることができます。 指の届く範囲にある。タブバーは届きやすい場所（画面の１番下）に位置しています。ユーザーは指を伸ばして選択する必要がありません。 しかし、タブバー型にはいくつかの欠点があります。 ナビゲーションに載せる選択肢の数が限られる。タッチ箇所が小さくなり
効果的なUXライティングのための16のルール | UX MILK
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 UXライティングとは、プロダクトとユーザー間のインタラクションを支援し、プロダクト内のユーザーを導くUIのコピーライティングのことを指します。UIのコピーには、ボタンやメニューラベル、エラーメッセージ、セキュリティの注意喚起、利用規約、その他のプロダクト使用に関する指示などが含まれます。 UXライティングの主な目的は、ユーザーとデジタルプロダクトのコミュニケーションを解決することです。この記事では、効果的なUXライティングに関する実践的なヒントを提供します。 ※編注：当記事はあくまで英語におけるUXライティングについての紹介になります。 なぜUIのテキストをいじることがデザインプロセスにおいて重要なのか 多くの場合、プロダクトの開発者は、UIのテキストをプロダク
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
タイポグラフィを活用するための12のツール
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デザイナーがコンテンツを重視したアプローチの利点を理解するにつれて、タイポグラフィがデザインプロセスで欠かせないものになってきました。 Web上の95％もの情報は文字で書かれています（Oliver Reichenstein氏） しかしタイポグラフィは、その分野に不慣れな人にとって難しいものです。そこで、タイポグラフィのタスクを快適に行えるように、役立つツールリストを用意しました。この記事で取り上げるツールは、適切なタイポグラフィによってより良いデザインを作る助けになるものです。 以下の項目に分けて、ツールを紹介しています。 フォントを選ぶ フォントペアリングとスタイリングを選ぶ フォントに情報の階層を付ける インスピレーションを得る フォントを選ぶ タイポグラフ
見出しを最後まで読まないユーザーのためのアイブロウヘッドライン
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 ユーザーがオンラインで読むことを想定して、文言を書いていますか？ アイトラッキング調査によると、多くのユーザーはオンライン記事の見出しを数単語だけ読み、最後までは読まないそうです。 さらなる調査で、ほとんどのユーザーが見出しの最初の２単語だけに目を通していることがわかりました。ユーザーはCTAをクリックする前に、見出しを見て内容を予測しているのです。 ユーザーは早くキーワードを知りたがる 見出しの最初の２単語でユーザーに本文のヒントを与えないと、ユーザーは見出しをスキップするだけではなく本文自体も読まないでしょう。 ユーザーが情報を手に入れるまでの忍耐力と行動力は長く続きません。そのため、彼らの興味を引くために見出しの最初の数単語に強いキーワー
よりよい検索体験のために改善したい11のポイント | UX MILK
Stephen Moyersはオンラインマーケティング担当者、デザイナー、テクノロジーに精通したブロガーです。 彼はロサンゼルスに拠点を置くSPINX Digital Agencyと提携しています。 あなたのサイト内のコンバージョン率を低下させている原因は「検索機能」にあるかもしれません。 致命的な問題ではなくても、コンバージョン率アップに役立っていなければ検索機能の意味がありません。サイト内検索を最適化してユーザー体験を向上させれば、Webサイトのユーザビリティと楽しさを大いに向上できます。 ユーザーはWebサイトが楽しいほど頻繁に訪れ、会員、顧客、購読者などの人数増加に繋がります。サイト内検索の改善は簡単ですが、よくある間違いによって検索するときの体験が邪魔されていることが多いです。サイト内検索を適切なものにするやり方を身につけて、競合サイトと同じ落とし穴にはまるのを避けましょう。 見
食事配達アプリが持つべき４つのユーザー体験 | UX MILK
TaylorはCodalのライターで、UXデザインから幅広いワールドワイドウェブの他の要素まで何についてでもブログ記事にしています。関連性の高い、魅力のある記事を作り上げる努力をしています。 「There’s an app for that（それをするためのアプリ、ありますよ）」という有名なAppleのCMキャッチコピーがあります。ユーザーの生活をより快適にするためという目的は、賛同できるものです。 お腹が空いているのに冷蔵庫が空っぽで、食事を家まで届けてほしいという状況を想像してみてください。現代では、何ができるでしょうか。おそらく Appleがキャッチコピーで言うように、食事配達のためのアプリに頼るでしょう。 同じことをするのは、あなただけではありません。ここ数年の間に食事配達の利用は上昇傾向にあり、App Storeは多くのアプリで溢れかえっています。代表的なものは、Uber Eat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デジタルデザインに倫理と哲学のアプローチが必要な理由
