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

Paul Boag氏はユーザー体験デザイナー、サービスデザインコンサルタント、およびデジタルトランスフォーメーションのエキスパートです。非営利団体や企業向けに、デジタル体験の改善を目指す支援をしています。 あなたのWebサイトは、訪れるユーザーにあれこれ考えさせすぎてはいないですか？　ユーザーに大きな認知負荷をかけていて、それによってユーザーがあなたのWebサイトから離脱していっている、ということはありませんか？　もしそうならば、これは修正すべき問題で、実際に修正が可能です。 認知的な負荷による影響 この問題はWebデザイナーである私たちと明らかに密接に関連しています。ユーザーが１つのことに集中しすぎて、他の要素に気が付かなかった場合、Webサイトでの重要なCTA（コールトゥアクション）だって気づかれない可能性があるということです。そう、ものごとをクリーンかつシンプルに整理したいというデザ

Neilは、イギリスのAstraZenecaで働くUXデザイナーです。現在さまざまなUXデザインのプロジェクトを率いています。 もしあなたがプロの自転車競技に詳しければ、「アシスト（Domestique）」という用語を聞いたことがあるでしょう。馴染みがない人に向けて説明すると、アシストとは自転車競技のチームにおける選手の役割を指します。「Domestique」はフランス語で「下僕」という意味です。 アシストの選手は、水のボトルをチームの車から集めてほかのチームメイトに渡すという役割を担っています。また、チームの車が近くにいないときに先頭選手の自転車が故障したら、自分の自転車や予備のタイヤを渡します。さらに、遅れているメンバーがいれば、先頭集団に追いつくまで彼らを牽引し、追いついたら自分はペースを落とします。このようにアシストの選手は無欲にひたすら奉仕し続けます。決してアシスト自身がレースに

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 UXライティングとは、プロダクトとユーザー間のインタラクションを支援し、プロダクト内のユーザーを導くUIのコピーライティングのことを指します。UIのコピーには、ボタンやメニューラベル、エラーメッセージ、セキュリティの注意喚起、利用規約、その他のプロダクト使用に関する指示などが含まれます。 UXライティングの主な目的は、ユーザーとデジタルプロダクトのコミュニケーションを解決することです。この記事では、効果的なUXライティングに関する実践的なヒントを提供します。 ※編注：当記事はあくまで英語におけるUXライティングについての紹介になります。 なぜUIのテキストをいじることがデザインプロセスにおいて重要なのか 多くの場合、プロダクトの開発者は、UIのテキストをプロダク

UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？　ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に

Alex JasinはMetapressのCEOです。また、Googleが承認したデジタルマーケティングやデザインのエージェンシーである、X3 Digitalの創設者およびCEOでもあります。 ほとんどの人は習慣に支配されています。私たちは、日々同じことを同じやり方ですることを好みます。研究者によれば、私たちは予測可能な行動しかせず、それほど自発的に行動することもありません。慣れ親しんでいるという感覚は、満足や安全、安心で満たされた価値のあるものです。 しかしもしそれを捨て、習慣や行動パターンに頼らず生きようとしてみたら何が起きるでしょうか？ では、以下の実験の結果を見てみましょう。 UXデザインパターンとは 簡単に言えば、「UXデザインパターン」とは、ユーザーがWebサイトに接するときの行動をデザイナーが予測して考え出したものです。 実例として、コンピュータのキーボードのレイアウトを考え

Stephen Moyersはオンラインマーケティング担当者、デザイナー、テクノロジーに精通したブロガーです。 彼はロサンゼルスに拠点を置くSPINX Digital Agencyと提携しています。 シンプルで素敵なWebデザインの体験は、シームレスです。ユーザーは自信を持って快適に１つのコンテンツから次のコンテンツに簡単に移動することができます。Webデザインにおいてシンプルで完全なユーザー体験を実現することは、デザイナーや開発者が直面するもっとも困難な課題の１つです。 ここ数年の間にモノやアイデア、コンテンツが過剰に溢れたことで、世の中のトレンドはシンプルな方へとシフトしてきています。法律の専門用語は素人向けの言葉に言い換えられ、作家は飾り立てた表現よりも簡潔なコンセプトを提供するように努め、住宅所有者は牧場のように広い家を下取りに出して小さく効率的な家を手に入れています。料理人さえも

Webサイトはあらゆる種類の情報にアクセスできます。ある企業についてもっと知りたい、商品を購入したい、寄付をしたい、リソースにアクセスしたいなど、探している情報を見つけるために私たちはサイトナビゲーションを頼っているのです。 多くのWebサイトが「十分」に機能するナビゲーションを備えており、ユーザーを必要な情報にアクセスさせることができます。しかし、それは試行錯誤を重ねたからなのです。この記事では、デザイナーがより効果的でわかりやすいナビゲーション体験を作り出せるようになるためのベストプラクティスをいくつか紹介します。 『ナビゲーションは検索よりも大切である』という記事で、著者のGerry McGovern氏は彼のチームが行った調査について紹介しており、「ユーザーの70%はリンクのクリックから始め、30%は検索を使用した」と述べています。また、「検索を使うよりもリンクをクリックするほうが簡

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

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

10年前、ユーザーインターフェイスでアニメーションやモーションを使うことは、ユーザーのことを考慮するのではなく、むしろユーザビリティの低下につながりました。なぜなら、ピカピカする派手なWebサイトや立ち上がるポップアップ、点滅するボタンなどが多用されていたからです。 しかし、アニメーションやモーションに対する認識は、ここ数年で大きく変化しました。 iPhoneやモバイルアプリの導入以来、多くのデザイナーは動的アニメーションの将来性を見越して経験を積んできました。そして、アニメーションはインターフェースデザインの重要な部分になりつつあります。なぜなら、アニメーションはデザイナーに「時間」という新たな次元を提供したからです。 現代のインターフェースは、静的な画面の連続ではありません。アニメーションによって製品に時間という次元が生まれたため、機械と人間のギャップを埋めることが可能になったのです。

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の１つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、ユーザーのふるまいに影響を与えることもできます。 より良いUXを築くため、サイトにアニメーションを追加する例をいくつか説明していきます。 進捗 ローディングアニメーション Webアニメーションにもっとも共通する用途の１つは、ページの読み込み（ローディング）時にユーザーの気を紛らせることです。 ローディングアニメーションはユーザーの感覚時間に影響し、実際より待ち時間を短く感じさせることができます。 待ち

ユーザーは、自分のウォンツよりもニーズを満たす製品を選ぶ傾向にあることが立証されています。Abraham Maslow氏は人間の欲求についての理解を深め、それがどのように満たされるのか研究しました。デザインの文脈においても、マズローの欲求階層説を活用することで、ユーザーのウォンツよりもニーズを満たす、より効果的なUXを提供することができます。 ユーザーにあなたの製品を受け入れてもらいたければ、受け入れてくれるように動機づける必要があります。アメリカの心理学者、Abraham Maslow氏は、人間のモチベーションに関する研究で知られています。1943年、Maslow氏は論文『人間のモチベーションに関する理論』を発表しました。論文の中で、彼は人間の欲求について自身の解釈を明らかにし、欲求がもっとも基本的なものからもっとも複雑なものへと、階層を形成していることを提唱しました。 彼は、人間が満足

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 インターネットの速度が速くなったことで、動画の人気がさらに高まっています。動画は、サイト上やアプリ内でユーザーが費やす時間を増やすと考えられてるのです。デスクトップ、タブレット、スマートフォンなどで動画を視聴するように、今となっては、動画は私たちの生活のどこにでも存在しています。 「百聞は一見にしかず」ということわざは、まさに動画にふさわしい言葉です。 効率的に利用すれば、動画はユーザーを引き込むのにもっとも強力なツールの１つになります。より多くの感情を伝え、商品やサービスを「感じてもらう」ことができるでしょう。しかし同時に、通信量が多くなり、スクリーンを動画で埋めてしまう可能性があります。ですので、特に注意して使用する必要があるのです。 この記事では、デザイン

ECショップをデザインするとき、デザイナーはどういったことを気にしてデザインをするべきでしょうか。シンプルでおしゃれなビジュアル？　それともお得情報を前面に出しますか？ 実際の店舗でもさまざまなショップが存在するように、扱う商品やターゲット属性によって、当然ながらECショップのデザインアプローチも変わってきます。 今回はHamee株式会社で運営しているECショップにおける事例を、デザイナーの平山さんにお聞きしました。 平山 智也 氏 Hamee株式会社 デザイン部 UI/UXデザイナー 茨城県神栖市出身。大学では情報学部でデザインコースを選考し、WEBデザインやUI/UXを学ぶ。 学生時代のアルバイトで不動産広告のデザインやweb制作会社のインターン経験を経て、新卒でHameeに入社。現在はEC店舗のUI/UX改善、販促企画などのコンテンツデザインに携わっている。 同じ商品でもターゲットに

大規模なECサイトにおけるUXチームのリードであり、レンセラー工科大学でヒューマン・コンピューター・インタラクションの修士号を取得しています。Webサイト、Twitter。 私たちは日々、オンライン上でフォームを使っています。購入を完了するため、メーリングリストやソーシャルネットワークなどに登録するため、ディスカッションに参加するため、美味しそうなランチの写真を投稿するためなど、フォームを使う場面はさまざまです。オンラインで情報を入力するために、フォームは必要不可欠と言っても過言ではありません。 しかし、長きに渡ってフォームの改善はあまり見られませんでした。「使える」ものではあったものの、「使いやすい」ものには至らなかったのです。 近年では新しいテクニックを正しく使うことで、デザイナーはより早く、簡単で、生産性のあるフォームの作成が可能になっています。 フォームは短ければ良いのか 「フォー

Netflixはどうやって素晴らしいストリーミング体験を提供しているのでしょうか？　彼らがどのようにサイトを作り、さらにA/Bテストを通してどのようにUIの改善をしているのでしょうか？ この記事では私がYelpで参加したDesigners+Geeks eventで学んだことから共有します。２人のスピーカー、Anna Blaylocky氏とNavin Iyengar氏はNetflixのプロダクト・デザイナーであり、何年も何百万人という会員に行ってきたA/Bテストから収集した実態について語ってくれました。また、参加者がデザインを考える上で手助けとなるようないくつかの関連する例を示してくれました。 科学的な手順 仮説 科学において仮説は、研究や実験を通して検証されるアイデアや事象の原因を指します。デザインでは理論やや予想を「仮説」と呼ぶことができます。 仮説の基本的な概念には、あらかじめ決まった

Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz。 モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how the user gets from those screens

徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア

プログラミングを学ぶことは簡単なことではありません。それは誰でも知っていることです。 ですが、残念ながら「プログラミングは簡単！」といった文句でビジネスをしようとするマーケターはたくさんいます。彼らのプロダクトを使えば、あるいはそうなるのかもしれませんが。 Hearing the WWDC keynote say coding isn't hard frustrates me. It's extremely hard. You're setting beginners up for huge disappointments. — Tyler McGinnis (@tylermcginnis33) 2016年6月13日 WWDCキーノートで「プログラミングは難しくない」と言っているのは本当に腹が立ちます。ものすごく難しいですから。初心者を騙してがっかりさせるだけです。 誰かがあなたに対してプ