欧州委員会はWebを破壊していると私は考えるようになりました。ユーザーのプライバシーを守ろうとする彼らの試み（GDPRやクッキー法とも呼ばれるeプライバシー指令）は、クッキー通知とプライバシーポリシーのオーバーレイの氾濫という予期せぬ結果を引き起こしました。 事実、平均的なユーザーの立場からすると、ネットワーク中立性の崩壊よりもクッキークライシスの方が、日々のWeb上での体験においてダメージが大きいと言えます。 それでも、ネットワーク中立性に関わるものと同じような組織的抵抗は、クッキー通知の異常性に対してはほとんど発生していません。私たちは、その意図が良いものであるために受け入れているのです。 誤解しないでほしいのですが、その意図自体は良いことです。どのサイトがトラッキングしてOKで、どの情報を収集しても良いかの主導権はユーザーが持つべきです。欧州委員会の取り組みは評価に値します。ただし、

LexieはUXコンテンツの戦略家でありライターです。MarketoやWebsite Magazine、Envatoなどに寄稿しています。 ユーザーがサイトに着いてからサイトを立ち去るか購買するまでには、ある地点から次の地点にユーザーを導く一連のステップがあります。ペルソナは顧客の典型を表すことで、特定のユーザーの行動を予想する手がかりになると同時に、顧客のペインポイントに対処する助けになります。マーケターの63%がコンテンツを作る際に、バイヤーペルソナを使っているそうです。 私の経験から、ターゲットの消費者に固有の顧客ペルソナを作成し、ユーザージャーニーを向上させるいくつかのステップを紹介します。 ユーザージャーニーマップを作る あらゆる快適な旅において大切なのは、どこからスタートしてどこに辿り着くのか知ることです。正確なユーザージャーニーマップを書くためには、ユーザーがページに辿り着い

UX Movementの創立者、ライター。ユーザーに優しいユーザーエクスペリエンスデザインのスキルを読者の方が上達できるよう、UX Movementのブログを作りました。 あなたのユーザーはスマホアプリやモバイルサイトのボタンをちゃんと狙った通りに押せているでしょうか？　きちんと押せているかをユーザーのせいにする前に、ボタンのサイズや間隔が最適化されているかどうか確認しましょう。 ボタンが最適なサイズと間隔になっていないと、ユーザーが狙いを外したり、間違ったボタンを押してしまいます。この記事ではどの程度が最適かを見ていきます。以下の数値は、96DPIでのCSSピクセルを基準にしています。 ボタンサイズの基準 まずは基準となるサイズがわからなければ、ボタンのサイズが最適かどうかを判断できません。幸いなことに、ボタンのサイズと間隔に関するリサーチによって、高齢者を含むほとんどのユーザーに有効な

ユーザーがWebサイトを見るとき、彼らの視線は左を向いています。そのため右側に配置されたロゴにはユーザーはあまり視線を向けず、ブランドリコールが弱くなります。左側に配置されたロゴには多くの視線が集まり、ブランドリコールに繋がります。 中央配置のロゴはサイトトップへのナビゲージョンを邪魔する Nielsen Norman Groupは中央配置のロゴについても研究を行いました。調査によると、ロゴが左と中央のどちらに配置されるかでブランドリコールに違いはありませんでした。位置よりもロゴのコントラストや読みやすさのようなデザイン的な違いがブランドリコールに影響していました。 それだけではなく、中央配置のロゴはユーザーがサイトトップへ遷移するのを邪魔していました。左配置のロゴを比べると、中央配置のほうがユーザーが１回のクリックでサイトトップへ戻ることを失敗する割合が「6倍近く高い」ことがわかりました

Alan Smith氏は、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。 UXとUIの定義についての論争は、その２つの言葉が現れて以来ずっと続いています。UXはUser Experience（ユーザー体験）、UIはUser Interface（ユーザーインターフェイス）を表しています。 さっぱりわからないですか？　これを理解できる瞬間はおそらくこないでしょう。エンドユーザーへのインターフェイスがユーザー体験に対してどのように影響を与えるかわかるでしょうか？ また、UXとUIという言葉が同じ時期に作られたものでないという事実も、この２つをとりまく混乱の原因のひとつであることは間違いないでしょう。UXとUIは、同時期に考え出された言葉ではなく、当初は明確に定義され

PaulはUXデザイナーであり、デジタルトランスフォーメーションの専門家です。非営利団体や企業のWeb、ソーシャルメディア、モバイルを使ったユーザーとの結びつきを支援しています。 この記事を読んでいるならば、すでにプロトタイピングのポテンシャルの高さを知っていることでしょう。 しかし、プロトタイプについて誤解している人はあまりに多く見受けられます。プロトタイプが企業のカルチャーや時代遅れの技術、政治によって制約されてしまうことも多々あります。その結果、製品がどれほど優れたユーザー体験になり得たのか、誰も知ることができなくなるのです。 プロトタイピングは、完成品に向けて何度も反復するためのツールだと認識している人がほとんどです。この理解によれば、プロトタイプに追加されるものはすべて実用的でなければなりません。また、周囲からプロトタイプについて合意を得たら、その合意された技術スタックで作成しな

スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける

SeanはCodal社の技術ライターおよびリサーチャーです。UXデザインからIoTまで、様々な話題のブログを投稿しています。 従来のテレビは、依然として一般の視聴者の大部分を抱えています。一方で、視聴者は徐々にモバイルデバイスのような小さなスクリーンへ移行していっています。 主要な放送局はこの兆しを把握しています。そして、避けられないように見えるモバイルへの転換の流れに乗ろうとしています。CBSのような昔からの放送網やAmazonのような業界の新参者のどちらも、自分たちの番組をどこでも視聴できるためのアプリを提供しているということです。 私たちは今、モバイルテレビという新種のモバイルアプリの出現の真っただ中にいます。これはファンとネットワークの双方にとって素晴らしいニュースですが、その一方でモバイルテレビという新しいジャンルは、近年発展する上での苦悩を抱えています。そのため、HBO GOは

同じようなデザインの手直しに人生の貴重な時間を費やしたいと思う人はいません。過去に別のアプリなどで解決されている問題があるのなら、その問題の解決策がテンプレートとして既に存在するはずです。それこそが、誰にでも使えるデザインパターンです。 ここでは、Web上でデザインパターンを見つけるのに最適なサイトをリストアップしました。執筆時現在、これらのリソースはすべて無料ですが、一部はプレミアム版などを支払うように求められる場合があります。なお、この記事は、これらのサイトのアフィリエイトではないことを最初に断っておきます。 UI Patterns UI Patternsでは、好みのパターンを簡単に検索でき、使えると思ったパターンをグループ化することができます。また、自分のデザインでのパターン活用に役立つ、UIデザインパターンに関する多くの興味深い記事があります。 WELIE Interaction

毎日アプリから送信される通知の数に注目したことはありますか？　これらの通知の内、いくつを実際に注意して見ていますか？ 私たちは毎日、日々の生活を邪魔になるといっても過言ではない、役に立たない通知を数えきれないほど受け取っています。これらの通知はパーソナライズされているわけでもなく、私たちと関連性も薄く、送信のタイミングも考慮されていません。その結果、ユーザーは通知をオフにしたり、アプリを消去してしまったりします。 モバイルアプリをアンインストールする理由の１位に、通知が鬱陶しいことが挙げられました。回答者の実に71％が答えています。（２位以降は下から順に「複雑な登録フロー」、「フリーズする」、「UI/UXが悪い」、「押し付けがましい広告」、「プライバシーが不安」、「ソーシャルログインを強制される」） しかし、このUXのアンチパターンとも言うべきプッシュ通知は、企業とユーザーの双方にとって有

Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で

Fabio Muniz氏はTestLodge社のプロダクトデザイナーであり、製品開発の立ち上げ段階における設計で活躍しています。Fabio Muniz氏の仕事はfabio.designでご覧ください。 ソフトウェアの設計プロセスではプロダクトの欠陥が見つからず、ユーザーが使う段階になって欠陥が明らかになりユーザー体験を損ねてしまうことがあります。 この記事では、そういった事態に陥らないようにチェックしておくべき事項をリストアップしました。ここで挙げるチェックポイントは一般的なものであり多くのプロダクトに適用可能ですが、例外もあることをご理解ください。 インタラクションデザイン 01 - 頻繁に発生する操作が簡単にできるか チェックをする理由：同じ情報を繰り返し入力することは面倒であり、ユーザーの生産性向上に寄与しません。面倒な操作が多ければ、ユーザーはより生産性の高い競合プロダクトへの乗り

デザインの仕事においては、単純作業系のタスクもあれば、想像力を膨らませるようなタスクもあります。作業はできる限り効率化する一方、アイデア出しやデザインなどはじっくり考える時間を取りたいものです。 今回はクリエイターが抱えるさまざまなタスクに便利そうな「スマートパッド」というツールをご紹介したいと思います。実際にUX MILKの開発チームが使ってみた感想などを交えつつ、スマートパッドとは何なのか、そしてこの製品をどう仕事に使っていくのかを見ていきましょう。 スマートパッドとは スマートパッドは一見普通のノートパッドのようですが、専用のボールペンで書くことで、内容がデータ化されるというツールです。ノートの横の丸いボタンを押して電源を入れてから、ノートに書き込み、再度ボタンを押すことでデータが保存されます。今回使っているのは「Bamboo Folio」という製品です。 書いたデータは専用のスマー

MatthieuはUpLabsの創設者で、MaterialPaletteとWOW.js.のクリエイター。 良いユーザー体験のためには格好良いデザインだけではなく、仕組みや構造、使いやすさにも気を配る必要があります。近年ではUXデザインの重要性が叫ばれ、こういった考え方も徐々に浸透してきてはいますが、だからといってビジュアルやインタラクションのデザインを軽視してもいいと言うわけでもありません。 この記事では過去にも何度か取り上げている、UIコンセプトギャラリーサイトのUpLabsからまたいくつかのUIコンセプトを実装コード付きでご紹介します。ユーザーがサイトを使うときの心地よさを演出するためのヒントがたくさん詰まっていますので、是非参考にして下さい。 ※各項目ごとにCodePenを埋め込んでいるため、読み込みに少し時間がかかる場合があります UpLabsのオススメUIコンセプト５選 1. カ

Jenna Erickson氏は、Codal社のクリエイティブ分野の戦略家です。Codal社はシカゴに拠点を置き、モバイルサイト設計に関するトータル・ソリューションを提供しています。 ECサイトをデザインする際は、購買者がどんな人であるかを考えることが大事です。あなたのECサイトは企業と消費者どちら向けのものでしょうか？ B2B（企業 to 企業）とB2C（企業 to 消費者）のどちらのウェブサイトも、わかりやすく簡潔であることが求められます。美しい見た目のデザインも必要です。また、製品やサービスの詳細情報が提供されていなければなりません。 しかし、消費者のニーズと企業のニーズは異なる傾向があります。詳細情報の量やUX、デザインに関するニーズは、B2BとB2Cでは一致しません。 私が働いているCodalは、B2BとB2Cの両方のデザインと開発を請け負っている会社で、日常的にこれらに関する議

Markdownは幅広く注目されているマークアップ言語の一つです。その手軽な記述方法から、愛用している方も多いのではないでしょうか。 Markdownの特色としてはHTMLのような見やすいスタイリングで出力できる点です。Markdown初心者の方などはリアルタイムで出力結果が見れるとよりMarkdownに親しみが持てると思いますので、今回はMarkdownをプレビューできる、Markdown対応の無料テキストエディタを特集したいと思います。 Markdownとは？ ツールの紹介の前に、Markdownを知らない方のため、改めてMarkdownとは何かを見てみましょう。 Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。（Wikipedia） 平たく言えば簡