私たちの脳の大部分は視覚処理に使われています。人間が処理する情報の90%は視覚から来ていると述べる研究者もいます。 この記事では、視覚情報の１つであるイラストについて述べたいと思います。UIの他要素と同様、イラストも特定の目的のために使われます。イラストをUIで使おうと考えた場合、いつなんのために使う必要があるのかを明確に理解しておく必要があります。 以下ではイラストがユーザー体験にどう役立つのか、３つの典型的な例を紹介します。 １. UIをより具体的にする コンセプトの説明 言葉だけでは、コンセプトを伝えるのが難しいときがあります。特に、コンセプトが抽象的である場合がそうです。イラストはものごとを明確化する力を持ち、デザイナーはこの特性を使うことができます。たとえば、Basecampは現代ビジネスで起こる日々の問題を明示するためにイラストを使用しています。言葉だけのメッセージより抵抗なく

アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ

プロダクトにユーザーを登録させることは大変です。たくさんの時間、エネルギー、費用が必要なのにもかかわらず、最初の体験の直後に、苦労して得たユーザーの大部分を失ってしまうプロダクトが山ほどあります。Andrew Chen氏の調査では、以下ようなことがわかりました。 平均的なアプリは、インストールしてから最初の３日間でデイリーアクティブユーザーの77％を失う。 企業は新規ユーザー獲得のために多大な投資をしますが、初回訪問の直後に獲得したユーザーの大部分を失ってしまうのです。そのような企業にはなりたくないでしょう。しかし、どうすればより上手くできるでしょうか？　そのためには、完璧なオンボーディングプロセスを作りあげ、第一印象を素晴らしいものにする必要があるのです。 オンボーディングというのは人事用語で「新人研修」を意味しており、「登録し、利用してもらう手段」としてUXデザイナーによって取り入れら

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

Roxanneはライブチャットやビジネスプロセス自動化を専門とする英国に本拠を置くソフトウェアハウスであるParker Softwareのオンラインコンテンツマネージャです。 インターネットを壊したのは誰でしょうか？　インターネットには、ゴシップや嘘が溢れていますが、もちろんPAPER誌のKim Kardashian氏のようなセレブの写真によって壊されたのではありません（編注：同誌のBreak The InternetというコーナーにKardashian氏が登場した際、その過激な写真が話題になりました）。インターネットは、企業によって壊されているのです。 もしかしたら、あなたは最近オンラインでのユーザー体験がひどくなっていると気づいたかもしれません。デザインやコンテンツが突如として悪くなったのではありません。ジャーニーそのものが、だんだんと崩壊しているのです。これは、比喩でもあり現実でもあ

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

わりかん・決済アプリ「paymo」を運営する AnyPay, Inc.のPM & UI/UX Designer。技術とデザインの力をプロダクトに結集させるプロセスがとても好き。Twitterは@ikutani41。 WebサービスやiOS/Androidアプリのデザインをするとき、どのようなアカウント概念を採用するか検討したことはあるでしょうか？ ほとんどのアプリは、ユーザーごとにアカウントを作って情報やログを紐づけたり、機密情報を扱う場合は認証機構を設けたりする必要があります。また、どのようなタイミングで、どのような操作でアカウントを作ってもらうかはとても重要で、さまざまな選択肢があります。 一般的なデザイン アプリをインストールして初めて開いたとき、下図のような画面をよく見るかと思います。 こういったデザインが採用される背景には、理由があります。 ユーザが慣れているため操作に迷いにくい

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 ゴーストボタンとは、外枠があるけれど中が透明なボタンのことです。Web上で人気のトレンドですが、多くのデザイナーが間違って使用しています。 クリック率が下がる ゴーストボタンはミニマリストな今どきの見た目と感覚を演出し、デザイナーの間で人気です。騒々しく威圧的な印象を、ユーザーに対して与えません。しかしコールトゥアクション（CTA）として考えた場合、それこそが問題となります。 CTAボタンにはユーザーの関心を引きクリックを促すような、強いビジュアルの手がかりが必要です。ゴーストボタンのミニマルな見た目では、強いビジュアルの手がかりが足りません。結果としてクリック率の低下を生じます。 クリック率が低いと言うことは、ユーザーのほとんどがゴーストボタンを見逃しているということです。サイトでのエ

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 ハンバーガーメニューとは、メニューを表示するために使われる３本線のアイコンです。アイコンをクリックまたはタップすると、ナビゲーションが表示されます。 デザイナーが書いたハンバーガーメニューに関する記事はたくさんあり、その多くはハンバーガーメニューに反対するものです。読んだことがない場合は、NNGroupのHidden Navigation Hurt UX Metricsを読んでみてください。簡単に言えば、アイコンそのものについてではなく、アイコンの背後にナビゲーションを隠してしまっていることについて議論しています。 しかし、場合によってはハンバーガーメニューが良い選択になりえるでしょう。 第２のナビゲーションとしてのハンバーガーメニュー ハンバーガーメニューの主

Emilyはイングランド出身で、大学でフランス語とドイツ語を学んだあとベルリンに移住しました。CareerFoundryで執筆していないときは、旅行やフラフープ、読書を楽しんでいます。 2018年のUIデザインの世界には何が待ち受けているのでしょうか？ 冒険好きなデザイナーの皆さんには、朗報です。2018年は反乱の年になるでしょう。UIの限界を超え、既存のルールを破り、リスクをとるべきときなのです。 ここでもっとも重要なテーマは、「Big and bold」です。これは、フルスクリーン表示、大胆さ、全体の没入感に関係しています。 しかし、上位５つのトレンドを紹介する前に、2018年、そしてその先のUIを形作るものは何か見てみましょう。 仮想現実（VR）と拡張現実（AR）は、これからのUIにおいて大きな役割を果たすでしょう。INADEV CorporationのVikrant Binjraj

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

Jenniferは、UX戦略、研究、およびデザインの取り組みを15年間にわたって行ってきました。ユーザーを楽しませる、より強いブランドを構築しています。 。 チャットボットはすべて同じではありません。では、チャットボットの良し悪しを決めるものは何でしょうか。 良いチャットボットとは、ユーザーがより効率的に何かを達成できるようにしてくれるものです。中でも優れたものは、チャット体験自体を楽しくしてくれます。一方で悪いボットは、ユーザーの時間を無駄にしたり、意味が通らない返答をしたり、ユーザーをイライラさせたりして、離脱率を高めてしまう可能性があります。 誰も好んで悪いチャットボットを作ろうとはしません。しかし、過去にチャットボットをデザインした経験がないと、開発の大変さに気づかなかったり、あるいは技術がすべてだと思ってしまっているかもしれません。その結果、ユーザー体験を向上するどころか、損ねる

PaulはUXのデザイナーでありデジタルトランスフォーメーションの専門家です。彼はユーザーを促進するためのウェブやソーシャルメディア、モバイルの活用を、非営利やビジネスの分野で手助けしています。 私たちUXデザイナーは、プロトタイプをよく使います。しかし、UXデザイナーにとって、クライアントや経営陣にプロトタイプが時間や経費に見合うものだと説得することはストレスです。この記事では、プロトタイプのビジネスにおける利益について説明していきます。 プロトタイプは私たちが自由に使うことのできるもっとも強力なツールの内の１つです。しかし、多くの人がプロトタイプはお金がかかるデザインツールだと思っています。そのため、プロトタイプは適切なツールだと思われません。 締め切りまでの期間が短く、予算が限られている場合プロトタイプは最初にカットされるものの１つであることが多いです。代わりに、企業は生産工程を短縮

Benは、UXPinのコンテンツデザイナーです。Webデザインとバックエンドの開発の仕事をしています。 ユーザーのためにデザインするには、ユーザーの最終目標とそこに辿り着くまでの行動を知っておかなければなりません。この２つはそれぞれコンテンツとユーザーフローと呼ばれます。これらが一緒になって、素晴らしいWebサイトの核を作るのです。 では、情報の概要をインタラクティブデザインに昇華させるにはどうすればいいのでしょうか？　この記事では、一連のコンテンツを１つのプロトタイプにする手法について、紹介したいと思います。 コンテンツリストをまとめる 私たちは何をデザインしているのでしょうか？　多くのデザイナーは、まず外枠を作成してから内側へと仕事を進めていきます。ユーザーが多くの時間を費やす情報自体を検証する前に、情報の入れ物や枠組みから制作してしまうのです。 内から外へデザインを進める人は、ユーザ

Marcinは製品デザインのプラットフォームである、UXPinのCEOおよび共同創設者です。2010年にUXPinを共同創設して以来、彼はポーランドのシリコンバレーオフィスの製作チームをリードし手助けしてきました。 「ワイヤーフレームの時代は終わりました。インタラクティブなプロトタイプこそがすべてです。」 私たちは少なくとも７年間は、この主張を聞き続けてきました。もしこのような議論に対して、人気がすべてを証明するというなら、真実はこの主張の逆と言えるでしょう。なぜならワイヤーフレームは終わったらしいと議論され続けているという事実自体が、ワイヤーフレームは顕在で、デザインプロセスにおいて少なくとも一部のプロジェクトやデザイナーに適合する形で存続していることを証明しているからです。 ワイヤーフレームはどのように生き残ってきたのでしょうか？　実はワイヤーフレームは進化し続けています。 ワイヤーフ

Robert Moseley氏は、デジタルマーケティング技術、分析、最適化、およびパーソナライゼーションの専門家で、ウェブ開発と分析の技術面において経験が豊富です。 Moseley氏はCloudinaryの上部ソリューションエンジニアです。 Webサイトへの訪問者や、オンラインで買い物をするユーザーたちに、ページの表示速度に対する忍耐力を求めてはいけません。なぜなら彼らがページに滞在するか否かは、たった数秒間のうちの判断によって決まってしまうからです。 Kissmetricsの報告によって、ページの読み込み速度がユーザーの離脱率に大きな影響を及ぼすことがわかりました。一般的なWebサイトへの訪問者は、ページの読み込み時間に対する忍耐力が低いので、読み込み時間が１秒かかるごとに離脱率も１％増加してしまいます。 同調査には、10秒後には40％近くのユーザーがページを離脱するというデータがありま

Jess Huttonはユタ州のソルトレークシティーにあるClearlinkのUXおよびナレッジマネジメントのスペシャリストです。 最近「モバイルファースト」という言葉を聞きますか？　これは６、７年前に流行った言葉ですが、モバイルファーストという言葉は新しく生まれ変わり、一周して再び使われるようになりました。デザイントレンドは、モバイルファーストからレスポンシブWebデザインへ移り変わり、そしてまたモバイルファーストへと戻ってきました。しかし、この変遷はいかがなものでしょうか。 モバイルテクノロジーは計り知れないほどの変化を遂げたのにも関わらず、「モバイルファースト」に戻ってくるのでしょうか。むしろ、今その単語を流行語として耳にすると、モバイルデザインにおける新しい段階の呼び方として正しくないように感じます。モバイルファーストよりもユーザーファーストデザインのほうがより良い呼び方でしょう。

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デフォルトとは、初めから導入されている初期値や初期設定のことです。一見大したことないように思えますが、デフォルトはユーザーの決断を左右大きな力を持っています。 この記事では、アプリでより優れたユーザー体験を生み出すために、あらかじめ用意された入力フィールドやデフォルト設定をどのように利用するべきか述べていきます。 入力フィールドのデフォルト値 フォーム入力が長いことが原因で、ユーザーはフォーム入力がより簡単なサイトへ移ってしまうことがあります。適切なデフォルト値を提供することで、ユーザーがすべての選択肢を選ぶ手間を省くことができます。 大半のユーザーが必要なものにする もし事前に決めることが可能な場合は、あらかじめ値をフィールドに入れておくことをおすすめします。

Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 「デザイラビリティ（Desirability）とユーザビリティ（Usability）の違いとは何か」という質問はUXデザインの分野でよく見受けられるため、区別できることは重要です。 なぜなら、ユーザビリティはUXの基本であり、ユーザビリティ（使いやすさ）がなければ、価値のあるUXを作り出すことが難しいからです。一方で、デザイラビリティ（望ましさ，好ましさ）がなければ、ユーザーの心にいつまでも残ることはほとんどありません。記憶に残り、誰かにオススメできるUXではなくなってしまう可能性があります。 ニールセンノーマングループが2008年アムステルダムで定義した、UXの４つのシンプルな段階があります。 ユーティリティ ユーザビリティ デザイラビリティ ブランド体験

Ben Shneiderman氏の『Designing the User Interface』とJakob Nielsen氏の『Ten Usability Heuristics』の著書に基づく、インタラクションデザインに関する10個の原則というものがあります。 この原則は、「ヒューリスティック」と呼ばれるもので、経験則による広範なルールであり、特定のユーザビリティに関するガイドラインではありません。 １．一貫性を重視する 同じことを意味する複数の名称や状態があることは、ユーザーにとって好ましくありません。ユーザーの混乱を招かないように、用語と動作を一致させるようにしましょう。相手の驚きを最小限にする「驚き最小の原則（The Principle of Least Surprise）」に留意することが大事です。 アプリ内のすべての要素に一貫性を持たせるようにしましょう。たとえば、同じスタイルの