プロトタイピングツールは、デザイナーが最終製品のレプリカを作成するための製品で、ユーザーテストやステークホルダーへのプレゼンテーションや、デベロッパーへの引き渡しに使われます。デザインツールには、大抵追加機能としてプロトタイプがありますが、専用のツールを使うことで、より高度なプロトタイプができるようになります。

コードベースのデザイン革命を牽引する企業の１つである UXPin の１４日間の無料トライアルにサインアップして、次のデジタル製品や Web デザインのプロジェクトで UXPin の高度なプロトタイプ機能をぜひお試しください。

１．UXPin

UXPin は、デザインを完全にインタラクティブにすることができる、コードベースのプロトタイピングツールです。多くの主要なデザインソリューションとは違い、UXPin にはプロトタイプとテストに必要なものがすべて組み込まれているので、プラグインは必要ありません！

UXPin は、デスクトップ（Mac および Windows）へのダウンロードか、ブラウザでの使用を選択できますが、UXPin のダウンロードの方には、オフラインでも作業を継続できるというメリットがあります。

そして、ブラウザでのプロトタイプのテストや、UXPin の Mirror アプリを使って、iOS や Android などのモバイルデバイスでのプロトタイプの実行ができます。また、UXPin のドキュメントは素晴らしく、１ステップごとの説明やビデオによるチュートリアルで、このツールのあらゆる側面がカバーされています。

さらに UXPin には、他のプロトタイピングツールにはないもう１つの利点として、React コンポーネントで完全に機能するプロトタイプを構築するための UXPin Merge というのものがあります。

Merge を使うと、Git レポジトリや npm 経由での React コンポーネントの同期や、Vue、Angular、Web コンポーネント、Ember 向けの Storybook 統合の使用などのオプションがあります。また、Merge でレイアウトのデザインや、製品を １０ 倍速く立ち上げることができます。

２．Figma

Figma は、最も広く使われているデザインツールの１つであり、多くの YouTube コンテンツや詳細なドキュメントを備えた大規模で熱心なコミュニティがあります。

また、Figma には、複数のデバイスでプロトタイプをテストできるモバイルアプリを備えた「プロトタイピング機能」が内蔵されており、ブラウザでの作業も、Figma をダウンロードしてデスクトップでのオフラインの作業もできます。

ただ、Figma は初期段階のコンセプトには優れていますが、高度なプロトタイプはまだ完璧ではありませんし、デザイナーはユーザーテストに対応できるプロトタイプを作れるとは思えません。

２０２３年、Figma にはインタラクティブなプロトタイプをシンプルにする多くの機能が加わりましたが、Figma の入力はまだ制限されており、UX リサーチャーは、ユーザーの情報入力が必要なアクションをテストすることができません。このツールだと、ユーザーのインタラクションに適応する動的なユーザーフローは作りにくいです。

ただし、Figma で作成したプロトタイプにインタラクションを追加できます。Figma のデザインを UXPin にインポートして、インタラクティブなプロトタイプを作成するためのプラグインを使います。詳しく次のチュートリアルをご覧ください：Figmaのデザインをインタラクティブなプロトタイプにしよう

３．Adobe XD

Adobe XD も人気のある UX デザインツールですが、２０２３年に廃止されました。

Adobe UX のプロトタイプの面白い機能の１つに、特定のインタラクションの時間を節約してくれるオートアニメーションがあります。オートアニメーションで、アニメーションシーケンスの最初と最後のフレームを作成すれば、あとは Adobe XD が埋めてくれます。この機能は全アニメーションで機能するわけではありませんでしたが、パララックス（スクロールエフェクト）のようなものを作成する際にはかなりの時間の節約になりました。

４．Invision

Invision は長年にわたって強力なプロトタイピングコンポーネントでしたが、Figjam に似たコラボレーション用のツールに焦点を当てることにしました。プロトタイピングツールはまだありますが、市場にある他のツールに比べると、２０２４年にインタラクティブな製品を作るには物足りない感じです。

Invision には素晴らしい DSM（デザインシステム管理）機能があり、デザインシステムの管理や、デベロッパーへの CSS やスターターコードの提供に便利です。また、DSM は Storybook と統合されているので、デザイナーとデベロッパーはデザインシステムを同期することができます。ただ残念ながら、デザイナーは UXPin Merge のようにコードコンポーネントを使ったプロトタイプの作成はできません。

５．Framer

Framer は、２０２４年の Web レイアウト作成向けのプロトタイピングツールにおいてトップに君臨するうちの一つです。ラピッドプロトタイピングのための AI 機能を備えており、ユーザーが希望する Web サイトの種類を入力すると、Framer がカスタマイズするデザインを提供します。 Framer では AI が非常に早く取り入れられました。

その他の特筆すべき機能には、レイアウトと挿入メニューがあり、その機能によって、コンセプトのデザインや反復をサッと行うことができます。これは印象的ですが、UXPin にもオートレイアウトとビルトインのデザインライブラリによる同様の機能があります。

Framer の Smart Components 機能には、UXPin の ステートに似た機能がありますが、それほど包括的ではありません。バリアントと変数を使って、スイッチの切り替えやチェックボックスのアクティブ化など、要素にホバーまたは押された状態を付けることができるくらいです。

また、Smart Components は、他のベクターベースのデザインツールからステップアップしたとはいえ、UXPin のステート、インタラクション、エクスプレッション、変数の機能ほど忠実ではありません。

その他のデザインツール比較

その他にも、よく使われている以下のようなプロトタイピングツールと UXPin の比較もご覧ください：

• Marvel App
• Justinmind
• Proto.io
• Axure
• Zeplin
• Balsamiq

UXPin を体験してみよう

デザインツールをお探でしたら、上記の５つも含め、デザイナーが見た目のいい Lo-Fi（低忠実度）ワイヤーフレームやモックアップを作成するのに使えるのがたくさんあります。

ただ、UX のデザインにはテストが必要であり、つまりモックアップではなく、Hi-Fi（忠実度の高い）プロトタイプが必要だということです！UX デザイナーはコード化された製品をデザインしますが、画像ベースのプロトタイプでユーザーテストを行います。ただ、それだと正確で意味のある結果を得ることは不可能であり、必ずユーザビリティの問題が発生し、それが最終製品に反映されてしまいます。

そこで、UXPin のようなコードベースのツールがあれば、デザイナーは機能するHi-Fi（忠実度の高い）プロトタイプを作成できるので、ユーザビリティの参加者は、ボタンや入力が機能することを「想像」する必要はありません。

UX デザインの革命に繰り出しませんか。１４日間の無料トライアルにサインアップして、UXPin でより優れたプロトタイプとテストをぜひご体験ください。

The post ２０２４年のおすすめ プロトタイピングツール ５選 appeared first on Studio by UXPin.

最初に

UX（ユーザーエクスペリエンス）デザインとは、ユーザーとデジタル製品の関係を保証するためにあります。

いくつかの最新ツールがあるおかげで、デザインチームはリアルタイムでのデザインコラボレーションや、ユーザビリティテスト、デザインのイテレーション（反復）がしやすくなりました。

しかし、UXデザインツールがどれも同じというわけではありません。

デザインプロセスの一部（ワイヤーフレーミングツールなど）にしか焦点を当てないものもあれば、より包括的でアイデアから実装まで行うことができるもの、デザインシステムの要素を使用することで一貫性を保つことができるものもあります。

ニーズによって、直接コーディングできるような高度なツール、またはライブラリからドラッグ＆ドロップだけでデザインできるような機能があるものが欲しいという人もいるでしょう。

たくさん調べてツールを選ぶのも1つの方法ですが、自分にとって最適なUXデザインツールを探すには実際に使ってみることが一番です。

UXPinで “実物のような” プロトタイプをデザインしてみませんか？こちらから無料でお試しください。

デザインプロセスを効率化する最高の UXデザインツール とは

情報アーキテクチャ、ワイヤーフレーム、プロトタイプをデザインし、ユーザーに最適な”体験”を作成するための多くのコラボレーション機能を備えた UXデザインツール は多数あります。

 UXデザインツール の中には、デザイナーチーム全員がシームレスに同じプロジェクトに取り組むことができる、コラボレーション要素を備えたものもあります。

ほとんどの UXデザインツール はユーザー体験に焦点を当てています。そのため、ツールを通してユーザーが製品を使うときに「どのように見えるのか」、またはユーザーが「どのように製品を使うのか」について明確なアイデアを得るのに役立つでしょう。

また、デザインの整理、プロトタイピング、ユーザーと製品の関わりを把握するのにも役に立ちます。

初心者から上級者まで使えるものも含め、あなたのニーズに合ったUXデザインソフトはたくさんあります。プロトタイプを作成し、技術チームと簡単に共有できるものもあります。

これらを念頭に置いて、あなたに合った最適な選択肢をいくつか見ていきましょう。

Adobe XD

Adobe XDは有名なデザインプラットフォームのひとつです。全員が同じプロジェクトに取り組む UI/UX チームのために設計され、Mac と Windows の両方のコンピュータで利用が可能です。

このツールの最も便利な機能の1つは、ボタンやナビゲーションバーなどのUIコンポーネントを簡単に再利用できることです。Adobe Creative Cloudを介して、デザイナーにプロトタイプが共有および同期されます。

また、チームメンバーがデザインに変更を加えた際には通知を受け取ることもできるため、チーム全体とステークホルダーの足並みを揃えることに繋がります。

UXPin

デザインプロセスのある側面に焦点を当てたプロトタイピングツールとは違って、UXPin は、実際の製品を使っているような感覚を体験できる、高忠実度のプロトタイプをデザインするために必要な機能が揃っています。

UXPinには、効率的にデザインしたりチーム全体で一貫性を保つことが簡単にできるようになるUI（ユーザーインターフェース）の要素が何百種類もあります。

最もよく使われるインタラクティブなプロトタイプ機能には、以下のようなものがあります：

変数（Variables）

変数は、デザインプロセス全体を通してユーザー入力を作成および保存できる機能です。仕様に合わせてカスタマイズでき、プロトタイプ全体で利用することができます。デザインを他の場所で使うデータの収集や、動的なテキストの使用、ユーザーに特別にマッチするデザインコンテンツの作成も可能です。この機能の最も便利な点のひとつとして、設定した変数の画面遷移ができることです。プロジェクト全体の流れを確認できるので、それをベースに構築したり、別の変数を追加したりすることができます。

ステート

例えば、デザイン全体でいくつかの場面で使うボタンがある場合、そのボタンに対して複数のステート（状態）を設定し、簡単に切り替えることができます。

条件付ロジック

条件付きUXデザインツール では珍しい機能です。デザイナーはインタラクションに対して特定の条件を設定することができ、その条件が満たされた場合に、事前に定義されたアクションが発生します。

このようなデザインオプションには、プロトタイプを機能的にさせるため、デザイナーにとってもユーザビリティテストにおいて大いに役立つでしょう。

さらに、ステークホルダーやデベロッパーがデザインの意図を明確に理解することができ、デザインハンドオフを含む製品開発全体のワークフローがより効率化します。

UXPinの最大の利点の１つに、プロジェクトにおけるチームのハイレベルな連携を実現する独自の「Mergeテクノロジー」があります。

Mergeを使えば、デザインチームは実際にデベロッパーが使っている同じコードコンポーネントを使って作業することができます。

つまり、コード化されたデザインの一部をUXPinにインポートし、それらを使ってデザインを改善することができるのです。

それだけではなく、UXPinには何千ものコンポーネントライブラリがあり、デザイン要素を０から作る必要はなく、デザインにドラッグ＆ドロップするだけで使うこともできます。

アニメーションやアイコンのほか、iOS や Bootstrap のような他のシステム用に設計されたコンポーネントも含まれます。

また、自分でアニメーションの作成や、Photoshopなどを使ってデザインファイルを UXPin にインポートすることもできます。UXPin は他ツールと簡単に統合できるようにレイヤーを保存するため、アニメーションのレイヤーが消去される心配はありません。

Figma

Figma はインターフェースデザインとブレインストーミングに特化しています。Googleドキュメントのように、プロジェクトに取り組んでいるユーザーや、入力しているものがリアルタイムで確認できることから共同作業を便利に行うことができます。また、モックアップや忠実度の高いプロトタイプを作成することができます。

Figmaのプロトタイピイング機能はあまりインタラクティブではありませんが、FigmaのプロジェクトをUXPinエディタに統合することで、インタラクティブで忠実度の高いプロトタイプを簡単に作成可能です。さらに、簡単なコピー＆ペースト操作のみで、UXPinのエディタ内で Figma のプロジェクトの作業に取り掛かることができます。

Sketch

Sketch は、共有ライブラリやレイアウトに対応し、他のユーザーとのデザインの共有やエクスポートができる、コラボレーティブなプロダクトデザインプラットフォームです。また、ベクターツールやプラグインツールなど多くの編集ツールを備えています。複雑なデザインに取り組んでいる場合は、拡大してより細かく編集を加えることができます。コマンドでデザインの一部をリサイズできるのも便利な機能です。

Sketch は独自のアイコンやデザインを作成、ライブラリに保存するのに適しています。例えば１つのアイコンを複数のデザインを比較的簡単に使うことができるといったように、プロジェクト間の共有を簡単に行うことができます。

クラウド上にデザインを保存できるので、チームや組織はデザインに簡単にアクセスでき、より流動的なデザインプロセスが実現します。

もう１つの重要な機能として、同時編集機能があります。ファイルにコメント、編集、変更を加えることができ、加えられた変更などは自動でクラウドに同期されます。

InVision

InVision Studioは製品のデザインプロセスをシンプルにし、デザイナーはコーディングなしでデザインを描くことができます。

また、デザイナーはリアルタイムの共同作業環境でプロトタイプの管理やテストをすることができます。

さらに、デザインの具体化、スケッチやワイヤーフレームの作成、他のデザイナーからのフィードバックを集めることができるホワイトボード機能も内蔵されています。

デザインに命を吹き込むアニメーションや、デザインに変更があった場合にチームメンバー全員に通知する通知システムがあります。

Marvel

Marvelはクラウドベースのプラットフォームで、Web デザインを自動的にクラウドに同期する上に、外出先でも簡単に変更可能なモバイルサポートもあります。

また、簡単にアクセスしてプロジェクトに実装することができるテンプレート、画像、ボタンなどのスクリーンコンポーネントのライブラリもあります。

Marvelは初心者の人にも使いやすく、ドラッグ＆ドロップだけでコーディングなしでデザインを作成することができます。

他のチームメンバーがフィードバックを提供したり、独自のデザインを入力したりできる共同デザイン プラットフォームでもあります。

また、タブレット、スマートフォン、デスクトップパソコンなど、さまざまなデバイス向けに設計されたテンプレートがあります。そのうえ、モックアップは実物同様にテストすることができるため、デザイナーはサッと欠点を見つけ、必要に応じてデザインを変更することができます。

そして、モバイル用のアプリを提供しており、スマートフォン端末でもアイデアのテストや、共有を簡単に行うことができます。

最適な UXデザインツール を選ぶ

上記の例からわかるように、最も人気のあるデザインプラットフォームの中には、デザインプロセスの１つの要素に集中できるものもあり、Marvel のようにカジュアルなデザインに最適なものもあれば、より複雑なデジタル製品やモバイルアプリの制作に適したものもあります。

しかし、ここで覚えておきたいのは複数のソリューションの使用は、デザインツールキットが増えてしまい、作業が遅くなる可能性があるということです。

デザイナーは日々の仕事の中で、多くのツールを統合させたり、アプリ間を移動する必要が出てきますからね。

幸いなことに、アイデアから完成まで一貫してデザインに取り組むことができる高度なツールを利用することもできます。

UXPinでは、開発者がデザインからHTMLやCSSコードをワークフローにコピーして使うことができます。

他のソリューションと比べると、UXPinは業界で最も包括的な UXデザインツール の１つと言えるでしょう。

Axure、Proto.io、Figmaのような、従来デザインプロセスの特定のフェーズで使用されてきたソフトウェアに代わる、新しい選択肢として注目されてきています。

UXPinのツールを使えば、最終製品のユーザー体験がわかる完全にインタラクティブなプロトタイプをデザインすることができます。

UXPinを使って、よりリアルにプロトタイプをデザインする方法をぜひご覧ください。

14日間の無料トライアルのお申し込みはこちら。

The post 試すべきおすすめ UXデザインツール appeared first on Studio by UXPin.

デザイン会社のIDEOによれば、持続可能な長期的成長や成功する製品の特徴として、有用性（Desirability）、持続可能性（Viability）、実現可能性（Feasibility）が必ずあるといいます。

 デザイン思考 のプロセスでは、最も顧客の役に立つ製品や機能性を決めるために、リサーチ、つまり「デザインレビュー」を行います。このデザインレビューがうまくいけば、競合他社が解決していない問題を特定することができ、エンドユーザーとビジネスの双方に利益をもたらすでしょう。

しかし、デザインレビューは何から始めるべきでしょうか？競合における自社の強みはどうやって見つけるのでしょうか？そして、ユーザーや組織のために実行可能なビジネスモデルかはそのように判断するのでしょう？

本記事では、 デザイン思考 を概念化する段階でのリサーチと、以下３つの重要な基準を満たすアイデアを発掘する方法について見ていきます：

• 有用性（Desirability）
• 持続可能性（Viability）
• 実現可能性（Feasibility）

UXPinは、顧客に最高のユーザー体験を提供するための、高度なエンドツーエンドのデザイン、プロトタイピング、テストツールです。無料トライアルにサインアップして、UXPinでUXワークフローとデジタル製品デザインがどのように強化されるかをぜひお試しください。

デザインにおける有用性、持続可能性、実現可能性とは

有用性、持続可能性、実現可能性とは、アイデア、コンセプト、仮説を検証し、独自の価値提案（UVP （Unique Value Proposition）とも言う）があるかどうか、それを追求する価値があるかどうかを判断する デザイン思考 の方法論です。

この３つをすべてクリアしないと、リスクやコスト、失敗の可能性が高まってしまいます。有用性、持続可能性、実現可能性は、アイデアのリスク分析手法であり、イノベーションの芯の部分を見つけるためのツールキットであるとも言えるでしょう。

この方法論を適用することで、デザインコンセプトの弱点を突き止め、さらなるリサーチを重ねたり、アイデアを破棄して次のステップに進むことができるのです。

この方法論の由来

世界的なデザイン会社である IDEO は、２０００年代前半にアイデアをテストする方法として、『有用性』、『持続可能性』、『実現可能性』という デザイン思考 の手法を概念化しました。

IDEOは、最高のアイデアは、この３つの条件が満たされたときに成功すると考えました。逆を言えば、「素晴らしいアイデア」は、これら３つの基準のうち１つでも欠けているとうまくいかないことが多いのです。

では、この３つのレンズを通して、これらの３要素がどのように組み合わされているのかをみてみましょう。

有用性

デザイナーがまずチェックしないといけないのは、有用性 です。もし製品アイデアに市場価値がなく、誰もそれを欲しがらない、必要としないのであれば、それは売れませんよね。

また、有用性を調査することで、その商品が「欲しいもの」なのか「要るもの」なのかがわかります。

例えば、以下のようになります：

• 徒歩、公共交通機関、車、相乗りなどでの通勤が必要。
• 車通勤は便利で公共交通機関よりも快適かもしれないから、車通勤したい。

要るものとは、顧客にとってなくてはならないものであり、欲しい物とは、そのニーズを満たすための、より望ましい選択肢であることが多いです。どちらも「有用性」を満たすものですが、「欲しい」や「あったらいいな」よりも、「必要」という欲求を満たすものの方が、はるかに価値があります。

有用性のある製品を見つけるには、顧客を調査して、満たすことのできるペインポイント（「欲しいもの」と「必要なもの」）を特定しないといけません。

• 製品で問題が解決される人がいるか
• 競合他社は解決策を提示しているか
• もっといい考えはあるか
• そのアイデアは何がユニークなのか、なぜ競合他社ではなくそのアイデアを選ぶ人がいるのか
• その製品でエンドユーザーはどう思うか
• その製品は、使った人が誰かに話したくなるような有用性があるか
• その製品は、一度使ったら一生手放せないようなものか

有用性を調査する場合、そのアイデアをストレステストして、修正すべきギャップを見つけるという意図があります。ギャップが埋まれば埋まるほど製品は強くなり、ステークホルダーからの厳しい質問や顧客満足度にも耐えられるようになるのです。

持続可能性

持続可能性とは、その製品がビジネスとして成立しているかどうかを示すものです。たとえ世界で最も有用性のある製品があるとしても、それが高すぎたり、利益が出なかったりすれば、それは良いビジネスモデルとは言えませんからね。

本当に持続可能な製品アイデアは、短期的にも将来的にもビジネスとして意味があり、投資に対するプラスのリターンをより早く、より長く提供できるほど、デザインアイデアの持続可能性は高くなります。

持続可能性の素晴らしい例として、いかにしてコカ・コーラが１８８６年に生み出した飲料が、今でも世界で最も消費されている飲料の 1 つであり続けられるのかが挙げられます。その初期投資は、発明者に莫大な富をもたらし、１３５年以上経った今でも株主に信じられないほどの利益をもたらしていますよね。

また、持続可能性は、社会的、環境的なインパクト、つまりデザインの倫理的な側面も重要です。そのデジタル製品は、社会にとってプラスの利益をもたらしますか？例えば２０２１年に、フェイスブックの内部告発者フランシス・ハウゲン氏は、SNS 大手の内部調査で、インスタグラムが１０代の少女たちの不安や鬱、自殺願望を生み出していることを示す文書を公開しました。

Instagramは短期的には高い経済的リターンをもたらすかもしれませんが、このティーンエイジャーへの害は長期的に持続し得るものでしょうか。また、政府はFacebook や Instagram を規制するために何ができるのでしょうか？

Facebookは、社会的な論争、罰金、訴訟を克服するためのリソースを持つ巨大企業ですが、小さな会社やスタートアップ企業は、同じような圧力に直面した場合、ほとんどが折れてしまうでしょう。

そのため、持続可能性を検討する際には、事業、顧客、社会に対する価値の提供が必要であり、以下のようなことを検討してみるといいかもしれません：

• このデザインが成立するには何が必要か
• デザインを機能する製品にするには、どのような費用がかかるか
• 新製品や新機能を構築するための設備投資はあるか
• 価格モデルはどうなっているか、また、そのビジネスは利益を上げられるか
• ROI（投資対効果）が出るまでどのくらい時間がかかるか
• その製品はサステナブルか
• その製品は社会にどのような影響を与えるか

なお、持続可能性は有用性と同様に、その製品が確実に実行可能で持続可能であるようにするために、アイデアの調査、分析、ストレステストが求められます。

実現可能性

実現可能性は、現在のリソースに注目し、予測可能な将来において製品を開発する能力があるかどうかを判断します。そしてデザイナーは、その製品がビジネスにどのような影響を与えるかを考慮しないといけません。

実現可能な要因としては、以下のようなものがあります：

• 技術的な制約
• 財務上の制約
• 製品がブランディング、マーケティング、カスタマーサポートなどに与える影響
• 想定される市場投入までの時間
• 運営能力

理想的には、利用可能なリソースを用いて、会社の現在の能力の範囲内で新製品や機能をデザインしたいものです。新製品をサポートするためにインフラを構築しないといけないとなると、リスクとコストが増加しますからね。

新製品や新機能をデザインする際に考慮したい実現可能性に関する質問として、以下のようなものが挙げられます：

• 現在のデザイン体制で、新製品を開発するための部品が揃っているか
• デザイン・開発にかかる時間はどれくらいか
• 新製品の構築や拡張に十分なプロダクトデザイナー、UX デザイナー、エンジニアがいるか？
• 技術的な制約は新しいデザインに対応できるか
• 組織は新しい人材の採用が必要か
• 組織の能力を拡張する必要がある場合、それが将来の製品にどのような利益をもたらすのか
• その製品はブランドにどのような影響を与えるのか
• 製品のリリースは、マーケティング、セールス、カスタマーサポートなど、組織の他の分野に影響を与えるか？また、そのような部門はより多くの仕事をこなす能力があるか

デザインレビューにおける「有用性、持続可能性および実現可能性」の使用

組織は、「インフラ、マーケティング、販売、カスタマーサポートなどのコストを伴う開発を行う前にデザインやプロトタイプの問題点を特定する」という目的のもと、製品デザインの初期段階でデザインレビューを実施し、特定の基準に照らしてデザインを評価します。

基本的には、組織は製品デザインの有用性、持続可能性、実現可能性を知りたいと考えています。

UXデザインレビューのテンプレートのご紹介

「有用性、持続可能性、実現可能性」の デザイン思考 の方法論を適用することで、ステークホルダーに包括的かつ客観的なデザインレビューを提示するためのインサイトとデータを得ることができます。

以下は、ステークホルダーが読みやすく、理解しやすいように、デザインレビューの説明する際に使用できるストラクチャーまたはテンプレートです。

問題：問題は簡潔に述べましょう。デザインチームとビジネスチームは、この土台から共通の理解を深めていきますからね。

システム（現状）： 問題のコンテクストを理解するために、現在のシステムがどのように機能しているかを示しましょう（既存の製品であれば）。その後、あなたの提案する経験によって、システムがどのように機能するかを示すといいでしょう。

JBTD（ジョブ理論）： デザインレビューでは、何が顧客のモチベーションを高めるのかについて、共通の理解を持つことが重要です。Tony Ulwick氏はJBTDを「市場、顧客、ユーザーニーズ、競合他社、顧客セグメントを異なる角度から観察することでイノベーションをより予測しやすく、収益性の高いものにする。」であると定義しており、これによって、顧客がソリューションをどのように「採用」または「不採用」にするかの決定方法をステークホルダーが理解するために役立ちます。

事業目的： 顧客の問題解決におけるビジネス価値とROI を述べましょう。

把握すべきメトリクス： 測定しないものは改善できません。このメトリクスによって、新製品のデザインによって生み出されるビジネスと顧客の価値を定量化できるはずです。

提案された体験： 提案内容を文章でまとめ、明確で理解しやすいものにしましょう。その場にいる人たちは、その提案があなたが以前に明確にした問題とどのように関連しているのかを理解しないといけませんからね。

提案の意味合い：その提案がビジネスの他の部分にどのような影響を与えるか、もしかしたらわからないかもしれません。製品デザインの初期段階でそれを理解するのは、有用性、持続可能性、実現可能性のバランスを取るのに重要です。

基本的なエクスペリエンスデザイン： ワイヤーフレーム、モックアップ、プロトタイプ、またはMVP（最小実行可能製品）を提示して、顧客が製品をどのように望ましいと感じるかをステークホルダーがイメージできるようにしましょう。

デザインに反映されるインサイト：このデザインを選択した理由は何でしたか？インサイトや仮説などは何でしたか？いくつかの項目を箇条書きにして思考の深さを示しましょう。

新デザインに関する仮説：

• 新しいデザインについての仮説とは
• どのようにしてこの仮説にたどり着いたのか
• この仮説を、重要だと思われるメトリクスとどのように整合させることができるか

このような仮説は、明確でテスト可能なものであるべきです。明確な合格・不合格のメトリクスでテストを行うことで、この仮説は、少しずつ前進していることを測るための強力な基礎となるはずです。

チームの協調性を重視： ステークホルダーからどのような意見が必要か？デザインレビューのテンプレートのこのセクションによって、製品の成功の鍵を握るステークホルダーのために、明確なコンテクストと焦点を設定できます。

UXPinにあるデザインライブラリを使って、忠実度の高いプロトタイプやMVP を手短に構築し、デザインレビューの際にステークホルダーに提示することができます。無料トライアルにサインアップして、早速 UXPinプロトタイプ第１号を作成しましょう！

The post デザイン思考 における「有用性、持続可能性、実現可能性」とは appeared first on Studio by UXPin.

近頃、リーンスタートアップ、リーン生産方式、リーンソフトウェア開発、リーンUXなど「 リーン （Lean） 」という言葉をよく耳にするようになったのではないでしょうか。これらのリーンプロセスの目的は「余計なものを取り除くこと」であり、生産性を下げたり混乱させたりするシステムやプロセスをなくします。

リーン UX の主なポイント

• 「リーン生産方式」と「アジャイル手法の原則」を取り入れた、UXデザインへの共同アプローチである。
• ２０００年代初頭に出版されたリーンソフトウェア開発に関する本から派生したものである。
• 学習の優先順位付け、成果の重視、継続的な発見など１５の原則がある。

  適切なデザインツールを選択することで、UXのワークフローとプロセスの効率化につながります。UXPinは、スピード、一貫性、効率を向上させるために構築されたコラボレーションデザインツールです。１４日間の無料トライアルでぜひお試しください。

リーン UX とは

  リーンUX は、連携を促し、MVP（最小実行可能プロダクト）で多くのテストや実験行う成果ベースのデザインプロセスです。

リーン UX は、成果物よりも成果を優先し、「デザインするもの」ではなく「デザインする理由」を問います。「何」を「なぜ」に置き換えることで、デザイナーは「いいと思う人がいるから何か作ろう」という曖昧なものではなく、具体的に「デザインする理由や裏付けとなるデータ」を見つけないといけません。

このように、リーンUXでのデザインは「ワークフローの概念」というよりも１つの「思考プロセス」と言えます。デザイナーは構築する前に仮説を立て、それを検証しないといけません。この思考プロセスが、MVPコンセプトのテストと実験がリーンUXでのワークフローにおいて重要な理由です。

リーン UX の歴史

リーンUX は、２００３年に出版された『Lean Software Development（リーンソフトウェア開発）』という本とアジャイル手法から派生したものです。国際的に有名なデザインとビジネスの専門家であるジャニス・フレイザー氏は、２０００年代に「リーン UX」という言葉を世界で広めました。

“Lean UX is UX practice adapted for Lean Startups…”（日本語訳：リーンUX は、リーンスタートアップのために適応された UX手法である）と言います。

そして、彼はイノベーションとシリコンバレーのスタートアップ企業数社のスケールアップに関する知識と経験を活かし、リーンのコンセプトを UXデザインに応用しました。

アジャイル UX と リーン UX

  アジャイルUX と リーンUX は似たようなコンセプトですが、アジャイルUXはアジャイルを使っているチームに効果的であるのに対し、リーンUX のプロセスはどんなスタートアップや組織にも適しています。

リーン UX のプロセス

リーンUX のプロセスには、従来のUXデザイン思考のフェーズがすべて含まれており、プロトコルが違うだけであることに注意するのが重要です。

デザイン思考のプロセスには５つのステージがあります：

1. 共感：ユーザーが何を必要としているかを発見する
2. 確定：解決したい問題を特定する
3. アイデア出し：ユーザーの問題に対する解決策を考える
4. プロトタイプ：プロトタイプを作成する
5. テスト：プロトタイプをユーザーやステークホルダーとテストする

  一方、リーンUX はプロセスを３つのステージに分けます：

• 思案： 結果、仮定、ユーザーリサーチ、アイデア、メンタルモデル、スケッチ、ストーリーボード
• 作成：ワイヤーフレーム、プロトタイプ（MVP）、価値提案、仮説
• 確認：データと分析、ユーザビリティ・テスト、ステークホルダーとユーザーからのフィードバックの分析

  ご覧のように、どちらのプロセスも同じ要素を含んでおり、方法論だけが異なっています。

リーン UX の原則

こちらの記事で、Ben Ralph氏はコアとなる リーンUX の１５原則を概説しています：

1. 部門横断チーム – 同じプロジェクトに取り組む複数の部署のメンバーでチームを作る。
2. 小規模、専任、同拠点 – チームを５〜９人ほどの少人数にし、ひとつの問題に集中し、同じワークスペース（リモートチームの場合は同じタイムゾーン）に置く。
3. 進歩＝成果であり、アウトプットではない – ビジネス目標の達成は成果であり、機能やサービスはアウトプットである。
4. 問題集中型チーム – チームは新機能のデザインではなく、問題の解決に集中しないといけない。
5. 無駄を省く – ビジネス目標につながらない作業やプロセスを省く。（チームは明確な理由もなく会議に出席したり、報告書を作成したりしていないか？）
6. 少人数制 – チームは一度につき１つのタスクや目的を完了することに集中しないといけない。
7. 継続的な発見 – 顧客、エンドユーザー、ステークホルダーと定期的に関わる。
8. GOOB（Get Out Of the Building）- 社内で仮定をごちゃごちゃ話し合うのであれば実際のユーザーとアイデアをテストする。
9. 理解の共有 – チーム全体が共に学び、成長できるよう、協力し、アイデアを共有する。
10. アンチパターンのロックスター、達人、忍者 – どのチームメンバーも同じように評価する。
11. オープンな職場 – 自由にアイデアを共有できる環境を作る。アイデアに正誤はない！
12. 分析より創造 – うまくいくかどうか議論して時間を無駄にせず、まずはやってみて、その経験から学ぶ。
13. 成長よりも学習 – 最初に正しいものを作り、それから規模を拡大する。
14. 失敗の許可 – 実験とリスクを取ること。マーク・ザッカーバーグ氏の“move fast and break things.” （素早く行動し、破壊せよ）という有名な言葉にあるように、完璧さよりも市場投入スピードを優先する。
15. 成果物ビジネスからの脱却 – UXドキュメントは最小限に。結果に優先順位をつける。

  また、このリーンUXの １５原則には、以下の２つの共通テーマがあります：

• 行動を起こす – アイデアを MVP とプロトタイプに変える。テストを繰り返す。
• チームワーク – 共有、連携、連携

リーンUX のメリット

  従来のUXデザインプロセスには、監督会議、不要な文書や成果物、部署やチームのサイロ化、コミュニケーション不足など、時間をムダにしてしまう障害がありました。

リーンUX で、部門間で連携を促進させ、付加価値をもたらさないプロトコルを避けることでUXワークフローが最適化されます。

また、リーンUX の成果主義とは、UXデザイナーが、CTA（Call to Action） ボタンの色を議論するためにミーティングするのではなく、ユーザーの問題を解決し、アイデアのテストに集中するということです。

複数の部門から代表者を集めた部門横断チームを構築することで、デザイナーは多様なアイデア、経験、視点を活用することができます。この豊富な知識により、チームはより良いMVPを作り、より多くのアイデアをより早くテストすることができるのです。

リーンUX の利点は以下の５つにまとめられます：

1. 無駄を省く
2. 連携を促進
3. 速い
4. 効率的
5. ユーザー中心

 リーンUX の手法

リーンUX 手法の中心となる主な原則は以下の３つです：  

1. 仮定
2. 仮説
3. MVP（最小実行可能製品）

仮定

仮定は単なるアイデアですが、メリットとしては、間違っていても許されることです。これは「実験とリスクを取る」という リーンUX の哲学を補完するものですね。

仮説を立てるには、 思考 の段階で得た研究知識と問題提起が必要です。これらの知識があれば、次のような仮説を立てることができます：

• ビジネスの成果 – うまくいく成果とは？
• ユーザー – サポートしようとしている人（ユーザー・ペルソナ）について具体的にする
• ユーザーの成果 – ユーザーのペインポイントは何であり、製品がそれをどのように解決できるか？
• 製品の特徴 – 問題の解決に必要な製品の改善点

  一連の仮定を強みに、問題解決のための仮説を立て始めることができます。

仮説

UXの仮説とは、以下の３つの変数を持つ検証可能な仮定です：

1. しようとしていること
2. （ユーザーのための）問題解決
3. 望む結果の達成

  仮説は次のように書くことができます： ［このユーザー］のために［これをする］ことで［この結果］が達成されると思われる。

理論は検証されるべきものであって、議論されるべきものではありません。なのでチームメンバーは、仮説がどうなるかについての意見をめぐって議論になることは避けないといけません。次に何をすべきかは、テスト結果に任せましょう！

MVP（最小利用可能製品）

製品全体をデザインする代わりに、チームは仮説を検証するための MVP（最小利用可能製品）を作ります。  

仮説がうまくいけば、それを発展させるための小さな機能的製品を手に入れることができ、仮説が正しくない場合は、そのアイデアを捨てて、無駄な時間を最小限に抑えて次に進むことができます。

デザイナーは、ワイヤーフレーム、モックアップ、プロトタイプを使ってMVPを作り、あらゆるものをテストすることができます。チームは、より時間のかかるデジタルのデザインプロセスに取り組む前に、多くのアイデアをサッと洗い出すために、初期のテスト中に紙のMVPを作成することもあります。

MVP は仮説を検証できるものでないといけません。例えば、ボタンのインタラクションをテストしたい場合、紙のプロトタイプでは有意義な結果は得られませんよね。なので、デジタル製品のコンテクストの中でインタラクションをテストするには、色とコンテンツを備えた忠実度の高いプロトタイプを使用する方がいいでしょう。

それに対し、登録フォームをテストするために、何時間も何日もかけて完全に機能する忠実度の高い製品プロトタイプを作る必要はなく、シンプルなワイヤーフレームがあれば、より早く仕事を終わらせることができます。

UXPin における MVP

UXPin にあるデザインライブラリを使えば、デザイナーはコンポーネントをドラッグ＆ドロップして、MVP をサッと構築できます。高度なインタラクションを追加することもできるので、プロトタイプは最終製品のように見え、感じられるのです。

テストの精度を上げるために、より忠実なテストが必要ですか？  

デザインと開発のギャップを埋めるテクノロジーである UXPin Merge を使って、MVP を次のレベルに引き上げましょう。UXPinのデザインエディタをリポジトリ（GitおよびStorybookとの統合が可能）を介して社内のデザインシステムに同期することで、デザイナーは完全に機能するコードコンポーネントを使用してプロトタイプを構築できます。

UXPin Mergeを活用してリーンUX のプロセスを最適化した使用事例として、PayPalが行った検証があります。あるデザイナーが１ページのプロトタイプ（またはMVP）を2つ作成しました。１つ目はイメージベースのツールで、２つ目はUXPin Mergeを使用しました。イメージベースのデザインツールを使用した場合では、デザイナーは MVP の作成に１時間強かかり、UXPin Mergeを使用した場合だと８分で作成できることがわかりました。その上、Mergeで作成したプロトタイプの方がより忠実で機能的でした。

UXPin Mergeについての詳細や、洗練されたコードベースのデザイン技術で DesignOpsの課題を解決する方法については、ぜひこちらをお読みください。

デザイナーが MVPを作り終えたら、次はテストです！

テスト

最後に、チームは仮説と MVP をテストします。プロトタイプのテストでアイデアの検証をできるだけでなく、リサーチャーがユーザーの行動やプロトタイプとのインタラクションを観察することで、貴重なインサイトを集めることができます。

また、ユーザビリティテストによってユーザビリティの問題やビジネスチャンスも明らかになり、デザイナーはそれを次の反復に追加することができます。

テスト結果を元に、リーンデザインチームは新たなインサイトを得ることができ、思考 の段階に戻ってプロセスを再開することができます。

まとめ

リーンUX のプロセスは、ワークフローを最適化し、連携を強化するために、従来のデザインプロセスを再構成します。チームは新しいスキルを学ぶ必要はありませんが、製品をデザインする新しい方法論へのマインドセットシフトが必要なのです。

この記事で説明してきたように、UXPinを使うことで リーンUX の考え方とワークフローが実現できます。また、コメント機能を使うことで、チームはコミュニケーションをとったり、タスクの割り当て、完了後は［解決済み］にしてタスク管理を円滑で明確に行うことができます。

さらに、デザインライブラリがあれば、デザイナーは低忠実度のプロトタイプを省略でき、ユーザビリティテスト参加者やステークホルダーから実用的なフィードバックを得られる、高忠実度の MVPにすぐに移ることができます。

そして何よりも、UXPinのドキュメンテーション機能によって作業を最小限に抑えることができます。デザイナーはデザインのハンドオフ時に、デベロッパーのために UIに注釈を付けたり、指示などの説明を作成したりすることができます。 世界最先端のコードベースデザインツールの使いやすさをぜひご体験ください。１４日間の無料トライアルはこちら。

The post リーン UX ：UXで効率性を最大化するためのヒント appeared first on Studio by UXPin.

組織と製品の成功に導くためにも、「ユーザー」と「ビジネス」２つの目標において、適切な目標内容とそのバランスを取ることは極めて重要です。双方にメリットのあるソリューションを提供するために、製品チームは企業の戦略目標を達成し、ユーザーの目的や欲求、課題について考慮しなければいけません。

そこで本記事では、「ユーザーゴール」と「ビジネスゴール」２つの違いについて解説し、それぞれの目標内容を見ていきます。また、AirbnbとSpotifyの成功例も合わせてご紹介します。

エンドユーザーやステークホルダーとのテストを強化するために、完全にインタラクティブなプロトタイプを構築しませんか？適切なテストの実施とユーザビリティテスト参加者からの適切なフィードバックを得ることで、ユーザーとビジネスでのニーズを満たすデジタル製品体験を提供しましょう。無料トライアルはこちらから。

ユーザーゴール と ビジネスゴールのちがい

ユーザーゴール

ユーザーゴールとは、ユーザーが製品を使用する際に達成したい、満足させたい、解決したい目的、願望、問題のことです。ユーザーゴールを理解して優先順位をつけることで、デザイン思考の核となる原理である「使いやすく」「機能的」で「楽しい」製品となります。

ビジネスゴール

ビジネスゴールとは、企業が製品やサービスを通じて達成しようとする目標のことであり、収益の増加、市場シェアの拡大、ブランドの評判の向上などが挙げられます。

ユーザーゴールとKPIの把握

ユーザーゴールは、製品の種類やターゲット層によって異なりますが、ここでは一般的なユーザーゴールと、組織がその追跡に使うKPIをいくつかご紹介します。

効率性

ユーザーは、最小限の労力で効率的にタスクを完了させたいと思うものです。なので製品は、ユーザーがタスクを完了して目標を達成するまでの時間を短縮するのにプロセスが効率化されないといけません。

「効率化」のKPI：

• タスク完了時間
• タスクに完了に必要なクリック数/ステップ数/インタラクション数

使いやすさ

ユーザーは、わかりやすく、習得しやすく、操作しやすい製品を求めていることから、シンプルなナビゲーションと親切なガイダンスを備えた直感的な製品だと、UX（ユーザーエクスペリエンス）が向上します。

「使いやすさ」のKPI：

• エラー率
• CES（カスタマーエフォートスコア）
• SUS（システムユーザビリティスケール）

アクセシビリティ

デザイナーは、多様なユーザーや能力に対応した製品体験の提供が必要であり、調整可能なフォントサイズ、代替入力方法、スクリーンリーダーとの互換性などの機能は、インクルーシブなUX（ユーザーエクスペリエンス） の提供には不可欠です。

「アクセシビリティ」のKPI：

• アクセシビリティのチェックリストによる適合度

パーソナライゼーション（個別化）

パーソナライゼーションは、個人のニーズや好みに合わせてコンテンツや機能をカスタマイズして製品体験を上げるものであり、そのニーズを満たすことで、楽しささ、継続性、そしてその “いい体験” が提供される可能性が上がります。

「パーソナライゼーション」のKPI：

• 設定をカスタマイズしているユーザーの割合
• カスタマイズ可能な数
• 活用されたカスタマイズの数

信頼性

ユーザーは、製品に対してエラーのない安定性のある動作を好みます。特に、無料ではない場合はなおさらです。なのでユーザーの信頼と満足感の維持には、製品はエラーや不具合、性能上の問題がなく、正しく機能するものでないといけません。

「信頼性」のKPI：

• クラッシュ、ダウンタイムなどの、技術的な不具合の発生率
• MTBF（Mean Time Between Failure：平均故障間隔）
• MTTR（Mean Time To Repair：平均回復時間）

セキュリティとプライバシー

ユーザーは、組織に対して個人情報やデータの保護を期待しており、強固なセキュリティ対策と透明性の高いプライバシーポリシーを導入することで、ユーザーは自分のデータが保護されていることを確信できます。

「セキュリティとプライバシー」のKPI：

• セキュリティインシデントの発生件数
• データ侵害の件数
• 個人情報保護に関する苦情件数
• 管轄ごとの個人情報保護苦情件数

美観

魅力的で視覚に訴える製品は、CX（顧客体験）を上げ、製品の好感度アップに貢献します。また、優れた美観はブランドのアイデンティティを強化し、製品を競合他社から際立たせてくれます。

「美観」のKPI：

• インタビュー、レビュー、アンケートなどの、デザイン要素に関するユーザーからのフィードバック

楽しさ

ワクワク感、楽しさ、エンターテイメントなどの要素を取り入れることで、商品をより魅力的で楽しいものにすることができます。

「楽しさ」のKPI（エンゲージメントのメトリクス）：

• 平均セッション時間
• 継続率（リテンションレート）
• 使用頻度
• NPS（ネットプロモータースコア）

ソーシャルインタラクション

ユーザーは、社会的な交流や、自分の経験を他の人と共有することを求めることが多いことから、ソーシャルな機能を取り入れたり、ユーザーとのコミュニケーションを促したりすることで、製品の魅力が高まります。

「ソーシャルインタラクション」のKPI：

• コメント、いいね！、シェアなどの数
• １アカウントあたりの平均フォロー数
• 友人への招待状送付数

支援・サポート

アクセスしやすく、迅速なカスタマーサポート、包括的なドキュメントやチュートリアルを提供することで、ユーザーの満足度が上がり、ロイヤリティが構築されます。

「支援・サポート」のKPI：

• カスタマーサポートのチケット数
• カスタマーサポートの対応時間
• チケットの解決率
• サポート交流による満足度スコア

ビジネスゴールと KPI の把握

ビジネスゴールは、事業や業界、組織の戦略的優先順位によって異なりますが、ここでは、プロダクトデザインにおける複数のセクターで見られる、一般的な会社のゴールをご紹介します。

収益成長

多くの企業にとって、売上と収益の向上は主要な目標です。プロダクトデザインチームは、魅力的で機能的、かつ価格の高い製品を作ることで収益の増加に貢献することができ、収益を生み出すインターフェースやユーザーフローを効率化することで、収益の向上を図ることができます。

「収益成長」のKPI：

• 日次/週次/月次/四半期/年次の総売上高
• 収益成長率
• ARPU（１ユーザーあたりの平均収益）

マーケットシェア拡大

マーケットシェアは、業界全体の売上高に占める企業の割合を示すため、製品のメトリクスとして極めて重要です。マーケットシェアを高めるには、組織が多くの要素で競争力を持つことが必要です。例えば、イノベーション、機能、性能、良いUXの提供は製品チームに最も関係の深い要素です。

また、革新的なデザインで製品が差別化され、潜在的な顧客にとってより魅力的なものになり、マーケットシェアの拡大につながります。

「マーケットシェア拡大」のKPI：

• マーケットシェア率
• 市場浸透率
• 顧客獲得数 と 業界/競合他社のベンチマーク の比較

顧客獲得

新規顧客の獲得は、ビジネスの成長にとって極めて重要であり、他の多くのビジネスの目的に影響を与えますが、ターゲットとするユーザーのニーズや好みに合わせた製品をデザインすることで、新規ユーザーを獲得し、有料会員にすることができます。

「顧客獲得」のKPI：

• 日次・月次・年次の新規顧客数
• CAC（顧客獲得コスト）
• コンバージョン率（トライアルから有料プランへ、購読者/ユーザーから顧客へ、など。）

顧客維持

長期的な成功には、既存顧客のエンゲージメントと満足度の維持（顧客ライフサイクル）が不可欠です。プロダクトデザインは、ユーザーからのフィードバックの対応、機能に関する要望の実装、UXの継続的な改善によって、顧客維持の向上を実現できます。

「顧客維持」のKPI：

• 顧客維持率
• チャーン率
• CLV（顧客生涯価値）

ブランドの評価と認知度

強力で一貫性のあるブランドアイデンティティで、企業は際立ち、消費者の信頼が築かれます。プロダクトデザインは、製品が企業の価値観や美意識、ブランド戦略全般と確実に合致しているようにすることで、ブランドの評価を上げることができます。

「ブランドの評価と認知度」のKPI：

• ブランド認知度の測定
• NPS（ネットプロモータースコア）
• 定期的なセンチメント分析
• SNS のセンチメント分析

コスト削減

コストは利益に影響します。つまり、給与やボーナス、株主利益が下がるということです。なので企業は、製品開発、製造、またはサポート関連のコストを削減しようとすることがよくあります。

そのようなコストは、効率的なプロダクトデザインであれば以下のような方法で最小化することができます：

• 製品性能の最適化（サーバーコストの削減）
• インプットコストの削減
• ワークフローとプロセスのシンプル化
• 製品の品質向上
• 新作の市場投入までの時間の短縮
• サポートチケットの削減

「コスト削減」のKPI：

• デザイン、プロトタイプ、テストなどのプロダクトデザインのコスト
• プログラミング、サーバー、APIリクエストなどの製品開発コスト
• 運用コスト
• 労働時間・コスト
• 従業員のオンボーディングコスト

スケーラビリティ

特に、成長意欲の高いスタートアップ企業では、需要の増加や新しい市場への進出のために、ビジネスの規模を拡大しなければならないことがよくあります。なのでプロダクトデザインチームは、製品やサポートするリソースが将来のニーズに対応できるよう、スケーラビリティを考慮する必要があります。

「スケーラビリティ」コストにおいてのKPI：

• 新製品リリースの市場投入までの時間
• 負荷や需要が増加した場合のシステム性能
• 新しい市場や顧客セグメントへの製品適応性

イノベーションと差別化

関連性と競争力の維持には、継続的なイノベーションが必要です。製品チームは、新しい技術、製品、アプローチを探求し、イノベーションを推進する上で極めて重要です。

「イノベーションと差別化」においてのKPI：

• リリースされた新機能や製品改良の数
• 研究開発予算のうち、イノベーションに配分される割合
• 特許出願数または業界賞受賞数

法規制の遵守

企業は、製品が関連する法律、規制、および業界標準に確実に準拠しているようにしないといけません。そのため製品チームは、製品、UI、およびプロセスが確実に規制要件を満たしているようにし、例えばカリフォルニア州やヨーロッパのユーザーなど、特定の管轄区域に合わせて必要な調整を行う必要があります。

「規制遵守」のKPI：

• コンプライアンス監査の合格数
• コンプライアンス違反の発生件数
• コンプライアンス違反により発生した罰金または違約金。

環境および社会的責任

多くの企業は、持続可能性や社会的責任への取り組んでいます。特に法律で特定の目標や要件を満たすことが義務付けられている国や州で、このような取り組みを行っています。そのため、製品チームは、e-waste（デジタル廃棄物）の削減、パフォーマンスの最適化（サーバーリクエストの削減）、製品ファイルサイズの縮小によるストレージの最小化などの目標に貢献するといいでしょう。

「環境および社会的責任」のKPI：

• 製品に関連する温室効果ガス排出量の測定と削減
• デザインおよび開発プロセスにおけるエネルギー消費量の測定と削減
• E-wasteの測定と削減
• 製品の社会的インパクトの測定

ビジネスゴール と ユーザーゴール のバランスのとり方

「ビジネスゴール 」と「 ユーザーゴール 」のバランスをとるのは難しく、ユーザーのニーズとビジネスゴールに対応した機能や改善の開発には、継続的な反復が必要です。

そこで、製品チームが適度なバランスを取ることに成功した２社の実例を以下でご紹介します。

例１：Spotify

•  ユーザーゴール ： ユーザーは、お気に入りの曲やアーティスト、プレイリストに簡単にアクセスでき、パーソナライズされた楽しいリスニング体験を望んでおり、自分の好みに合わせて新しい音楽を発見することも大切にしている」。
  
•  ビジネスゴール ：ユーザーベースを拡大し、プレミアム購読と広告による収益を増やすことを目標としており、製品チームは、ストリーミング業界における競争力を維持するために、UI（ユーザーインターフェース）、機能、パフォーマンスを常にアップデートしている。
  
• 両者のバランスを取るためのアプローチ：『Discover Weekly』 や 『Release Radar』 など、パーソナライズされたプレイリストを生成するアルゴリズムに投資することで、ユーザーとビジネスのゴールに取り組んでいる。このような機能は、ユーザーに合わせた音楽のオススメを提供し、ユーザーがプラットフォームでより多くの時間を過ごすことの促進、広告露出の増大、購読のアップグレード促進をすることで、ユーザーの満足度を高める。また、UXを向上させる機能に焦点を当てながら、収益モデルに対応することで、ユーザーとビジネスのゴールをうまく両立させている。

例２：Airbnb

•  ユーザーゴール ：ゲストは、シームレスな予約体験、宿泊施設の多様性、ホストとの信頼できるコミュニケーションを望んでいる。
  
•  ビジネスゴール ：ホストのネットワーク拡大、予約数の増大、サービス料による収益の獲得を目的としており、信頼できる宿泊施設マーケットプレイスとしての評判を維持したいとも考えている。
  
• 両者のバランスを取るためのアプローチ：Airbnbは、直感的な UI、強固な検索とフィルタリング機能、ゲストとホスト間の信頼できるメッセージシステムに投資することで、 ユーザーゴール に取り組んでおり、ビジネスゴール達成のために、「Airbnbのホスト向けリソースセンター」など、ホストがリスティングやカスタマーサービスを改善するためのサポートやリソースを提供している。

また、Airbnbはレビューと評価システムを導入することで、ゲストとホストの透明性と信頼性を確保しており、企業の成長と成功には、このような「ユーザーゴール」と「ビジネスゴール」 のバランスが欠かせません。

インタラクティブなプロトタイプを使って、ステークホルダーに好印象を与える・顧客に愛されるユーザー中心の製品をデザインしてみましょう。無料トライアルにサインアップして、UXPinの多機能で高度な機能をぜひお試しください。

The post UXのティッピングポイント – ユーザーゴール と ビジネスゴール appeared first on Studio by UXPin.

数ヶ月前、私はシリコンバレーで経験豊富な起業家を前にプレゼンをしていました。そのプレゼン中に私は「“I’m a designer”」と言いました。プレゼン後、60代後半のある男性が、「“I’m a designer as well. I used to design circuits”.（私もデザイナーです。以前は回路設計をしていました。）」と言ってきたのです。しかし、私はそのようなタイプのデザインに関しては専門では無かったため、共通の話題は見つかりませんでした。

デザインという言葉は、危険なほど曖昧な言葉です。また、「良いデザイン」はどんな製品にとっても「良いデザイン」かもしれないですし、一方で「悪いデザイン」はどんな製品にとっても「悪いデザイン」かも知れません。

それでは、本ブログの目的である”デザイン”を一般的に定義してみましょう！

UXPin Merge を使って、共有のビジョンでチームを調整し、デザイン業務を拡張しませんか。詳細とアクセスリクエスト方法については、こちらのページをぜひご覧ください。

デザインとは ？

1. デザインの辞書的な定義

デザインとは、物体やシステムを構築するための計画や慣習の創作物の事です。（建築の設計図、エンジニアリングの図面、ビジネスプロセス、回路図、縫製パターンなど）

つまり、デザインは分野によって意味合いが異なるのです。

(出典：Cambridge Dictionary of American English)

2. デザインの語源

・デザイン(動詞での意味)：①＋②＋③の組み合わせ（ラテン語由来）

Design=「マークアウト、考案、選択、指定、任命」=de-「アウト」＋signature「印をつける」＋signum「印、記号」

※現在はdesignateに意味が付けられている。

・デザイン（名詞での意味）：①＋②＋③をミックス
①中フランス語のdesseign「目的、プロジェクト、設計」

②イタリア語のdisegno、disegnare「印をつける」

③ラテン語のdesignare「印をつける」

(出典: Etymology Dictionary)

3. デザイン の本質

• 目的を持った行動であり、特定の問題を解決するための計画の事。
• 受け手に価値を提供することを意図した一連の意図的な行動の事。
• 単なる企画機能ではなく、何かに意味を与えること。だからこそ、デザインのコンセプトは単一の分野を超え、ウェブ、モバイル、ソフトウェア、ファッション、インダストリアル、インテリアなどに多用・適用できるのです。

4. デザイン の意味をより深く理解するために

すべての定義に共通するのは、デザインとは目的のある行動、つまり特定の問題を解決するための計画であるということです。デザインとは、特定の実用的な分野にかかわらず、「デザインされたもの」の受け手に価値を提供することを意図した一連の意図的な行動なのです。

デザインという言葉は、このように考えることで、より深い意味を持つようになります。デザインは美学以上のものである。デザインとは、単なる企画機能ではない。何かに意味を与えることなのです。それは、経験についてです。だからこそ、デザインのコンセプトは単一の分野を超え、ウェブ、モバイル、ソフトウェア、ファッション、インダストリアル、インテリアなどに応用できるのです。

これって、すごいことだと思いませんか？
ここで、デザインの定義を少しグラフィックで表現してみましょう。私たち一人ひとりにとってのデザインの意味と、それをどう理解するかについて、これからも考えてみましょう。

読んでくださりありがとうございます。

The post 「デザイン」の本当の意味とは？ appeared first on Studio by UXPin.

プロトタイプ はデザインプロセスにおいて最も重要なステップの1つですが、いまだに一部のデザイナーやプロジェクトチームを悩ませています。

よくある誤解として、モックアップのことを「プロトタイプ」と呼んでいることです。また、プロトタイプは一連のスケッチでも、最終製品の機能的なレプリカでもありません。

プロトタイプ とは何か？

プロトタイプとは、最終製品のシミュレーションのことで、製品チームが実物の製造にリソースを投入する前にテストするために使用します。

プロトタイプの目的はアイデアをステークホルダーと共有し、最終的にデザインをエンジニアリングチームに渡して開発する前にアイデアをテストして検証することです。  

プロトタイプ はユーザビリティテストで参加者と共にユーザーのペインポイントを特定し、解決するために不可欠です。プロトタイプをエンドユーザーと一緒にテストすることでUXチームはデザインプロセスの中でユーザーエクスペリエンスを視覚化し、最適化することができます。

エンジニアリングにはコストがかかり、最終製品に変更を加えることはチームが予想しているほど簡単ではありません。そのため、デザインプロセス中にエラーを発見し修正することは非常に重要です。

プロトタイプには主に4つの観点における品質があります。

• 表現方法 – プロトタイプそのもの、紙やモバイル、またはHTMLとデスクトップなど。
• 精度 – プロトタイプの忠実度、ディテールのレベル（低忠実度または高忠実度）。
• インタラクティブ性 – テスト段階でユーザーが利用可能な機能（完全機能、部分機能、閲覧のみなど）。
• 進化 – プロトタイプのライフサイクル。あるものはすぐに作られテストされ捨てられ、その後改良されたバージョンと交換される（「ラピッドプロトタイピング」として知られる）。また作成と改良を繰り返し、最終的に最終製品へと進化するものもあります。

ElementorのUXディレクターによると、ウェブサイト構築プラットフォームのデザイナーは、デザインの複雑さにもよるが、平均4〜5回のプロトタイピングセッションを行うという。

ユーザーのニーズを解決するための初歩的なアイデアであっても、デザインのあらゆる可能なイテレーションをプロトタイプ化すべきです。プロトタイピングは、最終バージョンのベータテストのためだけに行うべきではありません！

プロトタイプをテストすることで、エンドユーザーが製品にどのように接するかについて新たな気づきが得られるのであれば、忠実度や方法は気にせず、時間をかけてユーザーのフィードバックを集めて反復する価値があります。

プロトタイプの種類

プロトタイプを紙、デジタル、HTMLの3つのタイプに分けてみていきましょう。

ペーパープロトタイピング

ペーパープロトタイプとは、紙やデジタルのホワイトボードに描かれたプロトタイプのことである。このようなプロトタイプは、デザイン思考のワークショップのように、デザイナーがまだアイデアを練っている初期段階で使用されます。

ペーパープロトタイピングは、デザインチームが協力して多くのコンセプトを素早く検討するデザイン初期段階で最も効果的です。チームメンバーは、シンプルな線、形、テキストを使ってアイデアを手書きでスケッチします。美学ではなく、多くのアイデアとスピードが重視されます。

UXチームは、床やテーブルの上にペーパースクリーンを並べたり、ボードに固定したりして、ユーザーフローをシミュレートする。これらのプロトタイプをテストするための一般的なやり方は、一人が「製品」を操作し、実際のユーザーの行動に従ってスケッチを切り替えることです。

ペーパープロトタイプのメリット

• 速い – プロトタイプのスケッチは数分でできます。そのため、紙はたくさんのアイデアをテストするのに適しています。ブレインストーミングの会議中であってもすぐにプロトタイプを描くことができるので、アイデアが頓挫しても数分以上は無駄になりません。
• 安価 – メーカー製のペンと紙があればプロトタイプを作ることができるので、安価で身近なものです。
• チームビルディング – ペーパープロトタイピングは共同作業であり、多くの場合、チームで楽しく新鮮なアイデアを生み出すことができます。これは素晴らしいチームビルディングのエクササイズであり、これらの自由な発想のセッションはしばしば創造性を刺激します。
• ドキュメンテーション – チームメンバーは、ペーパープロトタイプの物理的なコピー、メモ、TODOを保管し、将来のイタレーションの際に素早く参照することができます。

ペーパープロトタイプのデメリット

• 非現実的 – どんなに熟練した技術をもってしても、ペーパープロトタイプはデジタル製品を手書きで表現したものにすぎません。そのためペーパープロトタイプはすぐに描けますが、エンドユーザーとのテストではほとんど、あるいは全く結果が得られません。
• 誤検証 – ペーパープロトタイプでは、アイデアを正しく検証できないことがあります。紙の上では良いアイデアに見えても、デジタルワイヤーフレームでは効果的に機能しない場合があります。
• 本能的ではない反応 – ペーパープロトタイプはユーザーの想像力に頼っているため、刺激を見てから反応するまでに時間がかかります。UXを成功させるためには、この「本能的な」反応が重要です。

これらのメリットとデメリットを考慮すると、ペーパープロトタイピングはデザインの初期段階でのみ行うことをお勧めします。紙からデジタルに移行した後は、同じデザインやユーザーフローのために手書きのプロトタイプを再度作成する必要はありません。

ペーパープロトタイピングの詳細については、以下の参考資料をご覧ください。

• Paper Prototyping as a Usability Testing Technique （ユーザビリティテスト手法としてのペーパープロトタイピング）by Justin Mifsud
• Better Use of Paper in UX Design by Marcin Treder（紙の良い利用方法）
• iPhone User Interface Design, Paper Prototype Design （iPhoneのユーザーインターフェースデザイン、ペーパープロトタイピングのデザイン）(video)
• Printable Paper Prototyping Templates courtesy of Tripwire Magazine（印刷可能なペーパープロトタイピングのテンプレート）

デジタルプロトタイピング

デジタルプロトタイピングは、デザイン・プロセスのエキサイティングな部分です。プロトタイプは最終製品に近い形で作成されるため、チームはアイデアをテストし検証することができます。

デジタルプロトタイプには2つのタイプがあります。

• 低忠実度（Lo-Fi）：ワイヤーフレームを使用したユーザーフロー
• 高忠実度（Hi-Fi）：モックアップを使用したユーザーフロー

低忠実度のプロトタイプでは、調査チームは基本的なユーザーフローと情報アーキテクチャの概要を把握できます。高忠実度のプロトタイプでは、ユーザーインターフェース、インタラクション、およびユーザビリティテスト参加者が製品を実際に操作する方法をテストし、より詳細に検討します。

 デザイナーは、FigmaやAdobe XDなどのデザインツールを使ってプロトタイプを作成します。またデザイナーではない製品チームのメンバーが、パワーポイントやGoogleスライドを使ってユーザーフローをシミュレーションすることもあります。

UXPinの特徴として、デザイナーは、他のデザインツールでは実現できない、最終製品とまったく同じ外観と機能を持つプロトタイプを作成することができる点です。

デジタルプロトタイプのメリット

• リアルなインタラクション – ハイフィデリティのデジタルプロトタイプでテストすることにより、UXチームはユーザーが最終製品とどのようにインタラクションするかを見ることができ、ユーザビリティに関する問題を効果的に解決することができます。
• 柔軟性 – 早期にテストを行い、頻繁にテストを行うことができます。初期のプロトタイプから始めて、デザインプロセスが進むにつれ徐々に高度なものにしていくことができます。
• スピード – アイデアをテストするにはペーパープロトタイプが一番早いかもしれませんが、ユーザビリティの問題をテストするにはデジタルプロトタイプが一番早いです。製品がエンジニアリングの段階になると、変更にはかなりの時間と費用がかかります。

デジタルプロトタイプのデメリット

• 学習曲線 – プロトタイプを作成する前にソフトウェアを学び、理解する必要があります。しかし、ほとんどのデザインソフトウェアには同じツールが搭載されているため、ソフトウェアの切り替えは比較的簡単です。
• コスト – ローフィデリティからハイフィデリティのプロトタイピングへと移行するにつれ、時間と労力のコストが増加します。

プロトタイプが成功するかどうかは、チームが各ユーザビリティテストでの明確な目的とKPIを示すかどうかにかかっています。適切な計画がなければ、デザイナーは余計な機能やインタラクションを追加してしまう可能性があります。

デジタル・プロトタイプの作成に役立つリソースをいくつかご紹介します。

• A 10-Minute Rapid Prototyping Lesson by Marek Bowers（10分でできるプロトタイプの高速レッスン）

HTMLとJavaScriptのプロトタイピング

まれに、より正確な結果を得るためにHTMLとJavaScriptのプロトタイプを作成することがあります。この方法の欠点は、コーディングにかなりの時間と技術的コストがかかることです。

しかしUXPin Mergeではそのようなことはありません。

デザイナー（および非デザイナー）は、最終製品のような外観と機能を持つ、コードベースのハイフィデリティ・プロトタイプを作成することができます。

例えば、UXPin Mergeでは、チームはGitリポジトリから取り出したReactコンポーネントやStorybookコンポーネントを使用して、完全に機能する高忠実度のプロトタイプを作成することができます。UXPin Mergeではプロトタイプが最終製品のように機能するため、参加者はボタンやドロップダウンの動作を「想像」する必要がありません。

HTMLを組み込んだ低視覚・高機能のプロトタイプ。(画像提供：Mike Hill氏）

HTMLプロトタイピングのメリット

• 最終製品の機能性 – HTMLプロトタイプは、最終製品の正確なモデルを参加者に提供します。
• 最終製品の技術的基盤 – HTMLプロトタイプの構築は、研究者に貴重な研究ツールを提供し、開発者に最終製品を構築するための基盤を提供します。
• プラットフォームにとらわれない – ほぼすべてのOSやデバイスでプロトタイプをテストすることができ、ユーザーは外部のソフトウェアを実行する必要がありません。

HTMLプロトタイピングのデメリット

• デザイナーのスキルレベルに左右される – HTMLプロトタイプは、あなたのコーディング能力に依存します。コード化されていないプロトタイプは、UXデザインとは関係のないユーザビリティの問題を引き起こす可能性があります。
• 創造性の阻害 – 使えるプロトタイプを作るために、コーディングには時間と集中力が必要です。デザイナーは、使い慣れたデザインツールを使うのと同じレベルの革新性や創造性を達成できないかもしれません。

HTMLプロトタイピングに関する参考資料をご紹介します。

• Designing with Code by Andy Fitzgerald（コードでデザイン）
• The Advantage of Rapid Prototyping by ZURB（ラピッドプロトタイピングの利点）
• コードでデザインする【UXPin Merge入門】 – Robert Kirkman

プロトタイピングのプロセス

プロトタイピングに最適なプロセスというものはなく、製品や用途によって異なります。以下に、最も効果的な3つのプロトタイピング・プロセスをご紹介します。

(注：低忠実度から高忠実度に移行する際には、必ずプロトタイプをテストすることをお勧めします。)

紙⇒低忠実度デジタル⇒高忠実度デジタル⇒コード

ほとんどのデザイナーは、紙⇒低忠実度デジタル⇒高忠実度デジタル⇒コードのプロセスでプロトタイピングを行いますが、実はこれは私たちがUXPinをつくった方法でもあります。

チームで協力して多くのアイデアを練り、紙の上でワイヤーフレームをスケッチし、デジタルに落とし込む前にユーザーフローを作成します。ここでUXチームは、クレイジーエイトや「どうしたらいいか」という質問など、一般的なブレーンストーミングの手法を用いて、エンドユーザーの気持ちになって考えます。

低忠実度デジタルプロトタイプ（ワイヤーフレーム）は、デザインプロセスの早い段階で、ナビゲーションや情報アーキテクチャなどの重要な要素をテストします。モックアップに移行する前に、フィードバックをもとにワイヤーフレームを素早く調整することができます。

ナビゲーションや情報アーキテクチャが完成したら、デザイナーは、色やコンテンツ、インタラクション、アニメーションなどを追加して、最終製品に似せたモックアップを作成します。

リサーチャーによるテストが終了したら、UXチームはエンジニアにデザインを引き継ぎ、最終製品を開発します。  

紙⇒低忠実度デジタル⇒コード

低忠実度のプロトタイピングからコードに移行することは、以前からある手法ですが、最近ではほとんど使われていません。高忠実度と比較してみると、低忠実度のプロトタイピングではコストが安い反面、ユーザビリティの問題の多くを捉えることはできません。

Yelpのデザイン変更作業で作成された低忠実度のプロトタイプ。

Yelpのデザイン変更作業で作成された高忠実度のプロトタイプ。

HTMLプロトタイピング => コード

一人で開発をしていると、初期のプロトタイピングの方法を省略してすぐにコードに取りかかることがあります。アイデアを出し合う相手がいない中で、開発者がいきなりコードに取り組むのは理にかなっていると言えます。

基本的にプロトタイプは基礎を作り、最終製品へと進化していきます。このプロトタイピングの方法は、効率的なワークフローを持つ熟練した開発者にのみ有効です。

優れたデザインスキルを持つデザイナーでも、このプロトタイピング方法は避けた方がいいかもしれません。低忠実度プロトタイピングと高忠実度プロトタイピングは、コードを構築・編集するよりも圧倒的に速いからです。  

紙⇒UXPin Merge – 高忠実度プロトタイピング⇒コード

UXPin Mergeを使用すると、ラピッドプロトタイピングによってUXプロセスを加速できます。コードコンポーネントを使用して完全に機能する高忠実度プロトタイプを作成し、最終製品の実物と同じ状態でユーザビリティテスト参加者に提供します。

UXチームは、上記で説明したような通常のペーパープロトタイピングプロセスにしたがって作業を行います。次に、デザイナーはUXPin Mergeを使用して、すぐに使用できるインタラクティブなコンポーネントをキャンバス上にドラッグ＆ドロップするだけで、忠実度の高いプロトタイプを作成します。

その結果、最終状態を「想像する」必要はなくなり、プロトタイプは最終製品と同じように機能します。UXPin Mergeが提供するコードベースのデザインツールでプロトタイプを作成することは、エンジニアがベクターベースのデザインで作業するよりもはるかに早くプロトタイプを構築できるのです。さらに詳しく知りたい方はこちらのページをご覧ください。

The post プロトタイプ とは？機能的なUXへの道 appeared first on Studio by UXPin.

ユーザーエラーは、フラストレーション、混乱、ユーザー満足度の低下を引き起こし、放棄などの多くの不本意な結果につながってしまいます。そのため、ユーザーエラーを特定、理解および対処をすることは、ユーザー中心のエクスペリエンスのデザインや製品性能の最適化において不可欠です。

この記事では、ユーザーエラーについての基礎を説明した上で、例を用いてエラーを防ぐための11の予防策をご紹介します。

UXPinの完全にインタラクティブなプロトタイプを使って、デザインプロセス中にユーザビリティの問題解決や、ビジネスチャンスを特定しましょう。ぜひこちらから１４日間の無料トライアルをお試しください。

ユーザーエラーとは

ユーザーエラーとは、製品、システム、またはインターフェースと相互作用する際に、意図しない、または望ましくない結果につながる行動や意思決定のことです。プロダクトチームは一般的に、これらのエラーを3つのタイプに分類します：

• スリップ（うっかり）：不注意、注意散漫、筋肉の記憶によって、ユーザーが意図しないミスを犯したときに発生する。
• ミステイク（ミス）：意思決定や問題解決の過程における認知的な誤りが含まれる。
• 違反：ユーザーが想定される意図的な行動やルールから逸脱した場合に発生する。

ユーザーエラーの例

ヒューマンエラーの例として、以下に４つ挙げてみましょう：

1. データ入力エラー：フォームに入力する際にユーザーがメールアドレスを間違って入力してし、通信に失敗したり、メールに送られた重要な情報にアクセスできない。
2. ナビゲーションエラー：EC（Eコマース）のWebサイトを閲覧中に、不明瞭な表示や誤解を招くようなデザインによって、ユーザーが間違った商品画像をクリックするなどで、フラストレーションを招き、ビジネスの売上を失ってしまう。
3. 誤解釈エラー：モバイルアプリでは、ユーザーがアイコンの意味を間違って解釈し、あるアクションを期待してタップしたが別のアクションが実行されてしまう。このような誤解によって、不本意な結果を招き、ネガティブなユーザー体験につながってしまう。
4. 設定エラー：ソフトウェアアプリケーションのセットアップ時に、ユーザーがプライバシー設定を誤って設定してしまった際に、意図せず個人情報を公開したり、過剰なアクセス許可を与えたりして、プライバシーが損なわれ、機密データが流出する。

上記のような例から、ユーザーエラーは間違ったボタンをクリックするようなささいなものから、誤って機密情報を共有してしまうような深刻なものまであることがわかりますね。

ユーザーエラーの６つの要因

以下は、ユーザーエラーの原因となるありがちな要因です：

1. 情報過多や複雑な意思決定要件など、高い認知的負荷は、ユーザーによるエラーの可能性が高まる。
2. デザインの複雑さ、複雑なワークフロー、わかりにくいナビゲーションは、ユーザーを困惑・混乱させてしまうため、ユーザーエラーを引き起こしかねない。
3. エラーメッセージ、通知、視覚的な合図などのフィードバックが不十分不足だと、ユーザーはミスを認識して迅速に修正できない可能性がある。
4. 時間的な制約があったり、締め切りが迫っていたりすると、ユーザーは焦ってタスクをこなすことになり、エラーの頻度が高くなる。
5. 外部からの妨害があると、ユーザーの注意をそらしてしまい、タスクへの集中力を低下させ、ミスの可能性を高める。
6. 不十分なユーザーオンボーディングや、システムやインターフェースに慣れていなかったり、オンボーディングが不十分であったりすると、ユーザーエラーの原因となる。

ユーザーエラーの検出

エラーログと分析

製品チームは、エラーモニタリングツールを使ってユーザーエラーのデータを集め、ユーザーの行動とエラーパターンを分析し、エラーメッセージ、エラーコード、エラーに至るまでのユーザーの行動などのコンテキスト情報を含むエラーデータを取得します。そのデータによって、UXデザインチームはミスの根本原因を特定し、適切な再設計を実施することができます。

ユーザーフィードバック と サポートチャンネル

一般的に組織は、オンラインフォーム、「高評価」や「低評価」などのフィードバックボタン、サポートセンターのメールアドレスなど、専用のフィードバックプラットフォームを設け、ユーザーがエラーを報告したり、サービスでの体験について貴重なフィードバックを提供できやすいようにしています。

ユーザーエラーを防ぐ１１の方法

１．見やすくて直感的なインターフェースデザイン

「The Design of Everyday Things 」の著者であるドナルド・ドーマン氏のアフォーダンス(affordances)、シグニファイア(signifiers)、マッピング(mapping)の概念で、デザイナーはユーザーを正しいインタラクションへと導き、エラーのリスクを最小限に抑える直感的なインターフェースを作ることができます。

例えば、「削除」を表すゴミ箱のアイコンのように、アクションに認識可能なアイコンやラベルを使うことで、ユーザーは意図するアクションを瞬時に特定し、エラーを起こさずに実行することができます。

２．効果的なオンボーディング

効果的なオンボーディングで、明確な指示とインタラクティブなチュートリアルがもたらされるので、ユーザーは製品に親しみやすく、適切な使用方法を理解できるようになります。

例えば、モバイルバンクのアプリのオンボーディングプロセスでは、口座開設や取引の方法を説明したり、ユーザーのミスを防ぐための主要なセキュリティ機能を強調したりする場合があります。

３．考え抜かれた情報アーキテクチャ

情報アーキテクチャは、コンテンツを論理的かつ階層的にまとめ、それによってユーザーは、デジタル製品をナビゲートしやすくなります。例えば、ECサイトでは、商品を明確でわかりやすいカテゴリーに分類しています。このようにして、子供服を探している人が誤って男性用のセクションにたどり着かないようにすることができます。

４．エラー防止の仕組み

検証チェック、エラーメッセージ、トラブルシューティング、確認などのセーフティネットは、問題が起こる前に再確認し、ミスがあれば修正するようユーザーに警告します。

例えば、必須項目が欠けているフォームをユーザーが送信しようとすると、ユーザーが入力を完了するようにエラーメッセージが強調される形で表示されます。

５．一貫した馴染みのあるパターンとインタラクションデザイン

一貫したデザインパターンとインタラクションで、ユーザーはその使い方に慣れてきて、認知的負荷は軽減され、ユーザーエラーを最小限に抑えられます。デザイナーは確立された慣習に従うので、ユーザーは知識、メンタルモデル、習慣を頼りに製品を操作することができるのです。

例えば、 Webサイトのさまざまなセクションの間で一貫したナビゲーションメニューが配置されれば、ユーザーはナビゲートしやすくなり、それによってエラーの可能性が低くなります。

６．ユーザーに優しいフォームデザイン

フォームフィールドの最適化 や明確なラベルと指示の提供、入力検証の実施によって、ユーザーは情報を正確に入力することができるようになります。例えば、入力マスクの使用や、（パスワード強度インジケータなど）入力されたデータの妥当性に関するリアルタイムのフィードバックがあることで、エラーを防ぎ、ユーザーが正確な情報を提供できるように案内することができます。

７．明確な指示およびツールチップ

明確な指示とツールチップ（補足説明）で、ユーザーはツールチップとダイアログを使ったコンテクストに応じたガイダンスを得られ、それによってタスクの完了方法や機能の使用方法を理解することができます。

例えば、Googleドキュメントでは、ツールバーの各アイコンを明確にするためにツールチップが使われ、ユーザーが製品をより効率的に使用する方法についてわかるようにキーボードショートカットが提供されています。

８．段階的開示

段階的開示とは、一度に多くの情報でユーザーが圧倒されることを防ぐため、ユーザーのコンテキストに基づいて徐々に情報を提示する手法です。情報が徐々に開示されることで、ユーザーは関連性のある情報に集中することができ、情報過多によるエラーを回避することができます。

例えば、複雑なソフトウェアアプリケーションでは、デフォルトで高度な設定が隠されている場合があり、それをユーザーが閲覧や修正を要求したときのみ公開することで、複雑すぎることによるエラーを減らすことができます。

９．ユーザーテストとフィードバック

ユーザーテストとフィードバックによって、デザイナーはデザインプロセスにおいてユーザビリティの問題を解決できます。デザインチームは、ユーザーからのフィードバックを収集し、潜在的なペインポイントの特定や、ユーザビリティの問題の発見、エラーを防ぐための改善を行います。

例えば、ユーザビリティテストのセッションを実施し、ユーザーがインタラクティブなプロトタイプにどのように関わるかを観察することで、ユーザーが困ったり、エラーを起こしたりする箇所を明らかにすることができます。デザインチームはインターフェースを改良し、そのような問題を最小限に抑えることができます。

１０．スマートデフォルト

スマートデフォルトは、適切なオプションや設定を事前に選択することで、ユーザーのエラーを防ぐことができます。デザイナーは、スマートデフォルトを使って好みや行動を予測し、エラーを減らしながら、快適なユーザー体験を提供します。ただし、利益のためにスマートデフォルトを乱用しないことを覚えておきましょう。

例えば、カレンダーアプリは、デフォルトのタイムゾーンをユーザーの所在地に設定することで、ユーザーの入力の必要性をなくし、タイムゾーン設定の誤りによるエラーの可能性をなくすことができます。

１１．ユーザーオプションの制限

オプション（選択肢）を限定することで、意思決定がしやすくなって認知的負荷が軽減されることで、ユーザーのミスを防ぐことができます。ユーザーが管理しやすい選択肢であれば、負担なく選択しやすくなります。

例えば、予約プラットフォームは、支払いオプションを最も多く使われているものに制限し、ユーザーが選択した場合、追加のオプションを明らかにするために段階的開示を使用する場合があります。

UXPinのインタラクティブなプロトタイプでエラーを減らす

画像ベースのデザインツールのプロトタイプの制約では、デザイナーはユーザビリティの問題やユーザーエラーの原因となるデザイン上の意志を特定する上で困難なことがよくあります。デザインチームは、より良いプロトタイプを作るためにデベロッパーに頼るか、製品をリリースして品質保証（QA）で把握した問題をバックログに追加しないといけません。どちらを選んでも、コストとフロントエンドの負債は上がります。

UXPinのインタラクティブなプロトタイピング機能を使えば、デザイナーはコード同様のインタラクションや操作性を得ることができるので、最終製品と見分けがつかないようなレプリカを作ることができます。

また、ユーザビリティテストの参加者やステークホルダーは、最終製品と同じように UXPinのプロトタイプを操作することができ、それによってデザインチームは有意義なフィードバックを得られ、反復と改善を行うことができます。

完全に機能するコンポーネントを作る

デザイナーは、テストを強化するのに UXPinで完全に機能する UI （ユーザーインターフェース）やコンポーネントを作成できます。例えば、下の登録フォームの例では、ユーザーがフォームを正しく入力できるためにデザイナーがフィールドエラーメッセージを作成する方法を示しています。最終製品の体験が正確に再現されています。

このプロトタイプは、エラーメッセージを隠す/表示できる条件付きインタラクションで、単一のフレームを使います。このシンプルさは、デザイナーがその場で変更を加えて再テストすることで、コストのかかるテスト時間を最大限活用できるということです。

ちなみに、画像ベースのデザインツールで同等の結果を得る場合だと、デザインチームはフレームを複数の作成する必要があり、コードベースのような迅速性や直感性はありません。また、フレームベースのキャンバスでは簡単に変更を加えたり、反復したりするのも厄介に感じるかもしれません。

コードベースのプロダクトデザインによって、プロトタイプの幅を広げることにつながります。デザインプロセスでより多くのユーザビリティに関する問題を解決できるソリューションを体験してみませんか？こちらからぜひ無料トライアルにお申し込みください。

The post ユーザーエラー とは？：エラーの防止、検出、管理方法 appeared first on Studio by UXPin.

デジタルプロダクトデザインの役割として、プロダクトデザイナーとUXデザイナーという2つの職種があり、よく混同されます。基本的には、どちらも製品開発に焦点を当て、問題解決にデザイン思考プロセスを用いる職種です。 では、プロダクトデザイナーとUXデザイナーの違いは何なのでしょうか？あなたはどちらのポジションに向いているのでしょうか？また、あなたの会社では両方の役割を果たす必要があるのでしょうか？

  UXPinは、UXチームとプロダクトチームのコラボレーションを強化するために作られたデザインツールです。UXデザイナーとプロダクトデザイナーは、UXPinを使用して、デザインプロセスを通してコメント、タスクの割り当て、コミュニケーションを行うことができます。無料トライアルに登録して、デザインチームのためのUXPinのコラボレーション機能をお試しください。

UXデザイナーとは？

UXデザイナーは、ユーザビリティの問題を解決し、製品が論理的な流れに沿っていることを確認することに重点を置きます。UXデザイナーは、お客様が個々の要素やコンポーネントをどのように操作するかを検討するユーザーインターフェースデザイン（UIデザイン）も担当します。 UXデザイナーは初期のユーザー調査や市場調査に深く関わり、ユーザーの問題を特定して理解し、それを解決するためのデザインソリューションを開発します。

新製品や新機能の場合、UXデザイナーは、UI要素やコンポーネントのデザインを含め、コンセプトを実用的なプロトタイプに仕上げる責任があります。 UXデザイナーは、認知心理学を学び、UXデザイナーは、顧客が個々の要素やコンポーネントとどのように相互作用するかを検討するユーザーインターフェース（UI）のデザインも任されることがあります。

UXデザイナーの職務内容と責任

• ユーザー、市場、競合他社の初期調査
• ユーザーペルソナ、エンパシーマップ、ジャーニーマップの作成
• ユーザーエクスペリエンスデザイン、インタラクションデザイン、ビジュアルデザイン、ユーザーインターフェースデザイン
• 情報アーキテクチャの設計
• ユーザーフローとナビゲーションの設計と最適化
• UXライティング（たまに）
• ユーザビリティテスト
• ワイヤーフレームやモックアップの設計
• プロトタイプ作成（低忠実度、高忠実度)
• デザインシステムガバナンス
• 製品チームと協力して新製品や新機能の開発
• デザインハンドオフのためのドキュメントやアセットの作成

UXデザイナーのスキルセット

• 創造的かつ批判的思考
• 問題解決能力
• グラフィックデザイン
• 様々なデザインツールを使いこなす能力
• コミュニケーションとコラボレーション
• プロジェクトマネジメント
• 共感する能力
• パブリック・スピーキング（インタビュー、プレゼンテーション)
• 技術的に優れている
• リサーチ力

米国におけるUXデザイナーの平均給与

Glassdoorによると、2021年における米国のUXデザイナーは平均年収95,944ドルを得ています。

プロダクトデザイナーとは？

プロダクトデザイナーは通常、既存のデジタル製品を扱う仕事です。UXデザイナーと同じような仕事をしますが、既存の製品の開発、新機能の設計、メンテナンスに重点を置きます。

また営業やマーケティングチームと密接に連携し、競合他社や市場、ユーザーの調査を通じてビジネスバリューの機会を見出します。デジタル製品が市場のトレンドやお客様の要望に合わせて進化し、競争力を維持するために重要な役割を担っています。

プロダクトデザイナーは、新しい要素やコンポーネントを設計するのではなく、ドラッグ＆ドロップ式のデザインツールを用いて、既存のデザインシステムを利用してユーザーインターフェースを構築するのが一般的です。

PayPalのプロダクトチームは、UXPin Mergeを使用して製品インターフェースを構築しています。UXPin のデザインエディタを会社のリポジトリに同期させることで、製品デザイナーは完全に機能するコードコンポーネントを使用して新製品や機能を設計しています。 PayPalの製品デザイナーは現在、Mergeテクノロジーの力を利用して、1 ページで完全に機能するプロトタイプを 10分以内に構築しています。これは、経験豊富な UXデザイナーが一般的なベクトルベースのデザインツールを使用した場合の 8 倍の速さです。

UXPin Mergeの詳細と、サインアップして貴社へのアクセスをリクエストする方法については、こちらをご覧ください。

プロダクトデザイナーの仕事内容と責任

• 製品管理
• 定期的なユーザー、市場、競合他社の調査
• ユーザーのニーズに沿ったビジネスチャンスを特定するためのリサーチ
• 製品が常に適切で最新の状態であることの確認
• 製品ロードマップの作成と管理
• 製品戦略の策定と実行
• 製品の設計・開発が予算に見合ったものであることの確認
• 製品による市場シェア、収益の増加、新規ユーザーの獲得方法の特定
• 製品設計のための設計・開発プロセスおよび関連する制約条件の理解
• 営業およびマーケティングチームとの連携 
• ユーザーエクスペリエンスデザイン、ビジュアルデザイン
• UXデザイナー、開発者、その他の関係者にアイデアや仕様を提示
• UXデザイナーとのコラボレーションによるカスタマーエクスペリエンスの設計
• ユーザビリティテスト
• プロトタイプ（主にハイフィデリティ）のデザイン

プロダクトデザイナーのスキルセット

• HTML、CSS、Javascriptの理解
• クリエイティブでクリティカルな思考
• 長期的な計画と戦略
• プロダクトデザイン
• 問題解決
• プロジェクトマネジメント
• 共感する能力
• パブリック・スピーキング（インタビュー、プレゼンテーション)
• 技術的に優れている
• ビジネスの洞察力
• データサイエンス
• リサーチ力

米国におけるプロダクトデザイナーの平均給与

Glassdoorによると、2021年における米国でのプロダクトデザイナーは平均年収105,448ドルを得ています。

類似点と相違点

UXデザイナーとプロダクトデザイナーの間には、相違点よりも類似点の方がたくさんあります。 UXデザイナーとプロダクトデザイナーの最も大きな違いは、製品のライフサイクル（開発、導入、成長、成熟、飽和、衰退）における特定のタスクではなく、そのデザインの役割にあります。 UXデザイナーは、市場に出る前の製品や機能を開発します（製品ライフサイクルの開発段階）。一方、プロダクトデザイナーは製品の寿命が尽きるまで製品を管理し、改良し進化させます。 UXデザイナーは、デザインシステムの更新が必要な場合や、プロダクトデザイナーがユーザビリティの問題を解決するのに苦労している場合に、プロジェクトに戻ることが多い。

デザインアプローチ

• UXデザイナーとプロダクトデザイナーは、人間中心のアプローチでデザイン思考プロセスを適用します。ユーザーのニーズに基づいて製品を設計します。
• よくあることとして、UXデザイナーはユーザーを重視し、プロダクトデザイナーはビジネスニーズを重視すると勘違いされます。しかし、UXデザイナーもプロダクトデザイナーも、リサーチやデザインの際には常にユーザーとビジネスの両方を考慮します。
• UXデザイナーやプロダクトデザイナーは、クロスファンクショナルなチームで仕事をすることが多いので、優れたコミュニケーションスキルが求められます。

リサーチ

• UXデザイナーとプロダクトデザイナーは同じようなリサーチを行いますが、UXはユーザーや行動をより深く追求するのに対し、プロダクトデザイナーは市場や競合他社の分析に重点を置きます。
• UXデザイナーは、製品がリリースされる前の早い段階でリサーチとユーザーテストを行います。
• プロダクトデザイナーは新機能の実装やユーザーの課題解決、ビジネスチャンスの模索など、既存製品のテストを行います。

ツール

• UXデザイナーは、主にプロトタイピングツールとテストツールを使用します。
• 一方、プロダクトデザイナーはジェネラリストであり、デザイン、開発、マーケティング、ユーザーテストなど、さまざまなツールを使用します。

プロトタイピング

• UXデザイナーはデザインプロセスを通じて、紙やデジタルを含むさまざまなプロトタイプを作成します。
• 一方プロダクトデザイナーは、紙などの低忠実度のプロトタイプを使用することは少なく、製品のデザインシステムを利用して高忠実度のプロトタイプを作成することがほとんどです。

テスト

• UXデザイナーは、製品や機能の発売前にユーザビリティテストを行い、ユーザーエクスペリエンスの要件を満たします。
• プロダクトデザイナーは既存の製品をテストし、ユーザビリティの問題やビジネスチャンスを特定します。また、自らが設計した新製品やインターフェースのテストも行います。

 まとめ

2つのデザインの役割にはいくつか重なる役割もありますが、プロダクトデザイナーとUXデザイナーはどちらも組織に大きな価値をもたらす存在です。UXデザイナーは製品の初期デザインを完成させた後、製品デザイナーにバトンタッチします。製品デザイナーは基本的に製品の管理者となります。

製品設計の初期段階ではUXデザイナーはユーザーとそのニーズに焦点を当て、デザインソリューションを見つけなければなりません。その解決策は、組織のビジョンやビジネスゴールに沿ったものでなければなりません。

プロダクトデザイナーもユーザーに焦点を当てますが、彼らは通常、UXデザイナーがユーザビリティの問題を特定して修正した製品を継承します。そのため、プロダクトデザイナーはビジネス価値や、製品の魅力と関連性を維持することに重点を置きます。

プロダクトデザイナーはジェネラリスト（デザイン、マーケティング、データ分析、コーディング、ユーザー行動）であり、UXデザイナーはユーザーエクスペリエンスのスペシャリストであると言えるでしょう。

UXPinによるデザインコラボレーション

UXPinは内蔵のドキュメント、デザインシステム、コメント（タグ付けと割り当てを含む）、プロトタイプのプレビューと共有などの機能により、UXチームと製品チームのデザインコラボレーションを強化します。

また、Mergeはデザインと開発のギャップを埋める強力な機能であり、製品チームのようなデザイナーではない人でも、完全に機能する高忠実度なプロトタイプを簡単に作成することができます。 UXPin Mergeは、デザインエディタとリポジトリからのコードコンポーネントを同期させることで、組織全体が同じデザインシステムコンポーネントを使って作業できるようにし、単一の情報源を提供します。

エンジニアがリポジトリに変更を加えると、組織全体のデザインシステムが更新されます。全員が同じバージョンを使用しているため、DesignOpsは各部門のデザインライブラリやシステムの更新を気にする必要がなくなります。 UXPin Mergeの詳細と、GitやStorybookとの統合を通じてデザインエディタをお好みのテクノロジーと同期させる方法については、こちらをご覧ください。

UXPinを始めよう

UXデザイナーやプロダクトデザイナーにとって、コードベースのデザインがどのようにプロトタイピングやテストを向上させるかを知る準備はできていますか？ UXPinの4つの強力な機能により、プロトタイプの忠実性と機能性を高めることができます。

• ユーザーやキャンバスのアクションに応じて、要素やコンポーネントの異なるステートやプロパティをデザインできます。
• 変数を使用してユーザーデータを取得・保存し、その情報に基づいて要素を更新する。
• 条件付きインタラクションやルールを設定して、二次的なインタラクションやアニメーションを引き起こします。
• Expressionを使用すると、ショッピングカートの更新やユーザー入力の検証など、プロトタイプにJavascriptのような関数を作成することができます。

今すぐチームでUXPinをお試しください。UXPinのコードベースのテクノロジーでデザイナーのコラボレーションを改善し、プロトタイプを強化するための無料トライアルにお申し込みください。

The post プロダクトデザイナー とUXデザイナーの比較分析 appeared first on Studio by UXPin.

組織が製品を作る際に考慮しなければならない重要な UXデザイン原則 が数多くあります。これらのUX原則は、ユーザーをすべての意思決定の中心に据えるデザイン思考プロセスを補完するものです。

この記事では、企業がより良い製品を作るために利用できる16の UXデザイン原則 を紹介します。

UXPinの高度なプロトタイピングとテスト機能によりデザインチームはユーザビリティの問題を最小限に抑え、より良いユーザー体験を生み出すことができます。14日間の無料トライアルに今すぐお申し込みください。

16の UXデザイン原則 

その1：ユーザーにフォーカスする

ユーザーに焦点を当てるのは当たり前のように思えるかもしれませんが、多くのデザイナーはユーザーを十分に理解することなく、個人的な好みや偏見に基づいて意思決定を行っています。 またユーザーの問題を解決したり、製品に大きな付加価値を与えたりするとは限らないデザインや技術的なイノベーションに、デザイナーは振り回されてしまいます。

最良のデザイン決定はユーザーを理解し、そのニーズを満たすことから生まれます。なぜかというと、人間のための製品のデザインだからです。

経験豊富なUX専門家の多くは、人間ではなくユーザーに焦点を当てることはデザイナーが人間を相手にしていることを忘れてしまうという断絶を生むと考えています。

この言葉を人間中心設計と言い換えることで、UXチームはデザインや技術的な問題を解決することから、”人”を助けることへ考えをシフトすることができます。 デザイン思考の原則に基づいてフレームワークを構築することで、常にユーザーを中心に据えることができます。

• 共感-対象の”人”（エンドユーザー）を知る
• 問題を定義する
• アイデアを生み出す
• プロトタイプ
• テストとイテレーション

人間中心設計についての詳細はこちらをご覧ください。

その2：一貫性を保つ

デザインの一貫性は良いユーザー体験を提供するための重要な要素です。一貫性のないユーザー体験は製品の一部を使いこなせなかったり、機能のリリースやアップデートのたびに使い方を学び直さなければならないことを意味します。

デザイナーの目標は矛盾を気にすることなくユーザーのニーズを満たす製品を作り、最終的には信頼と愛用者を獲得することです。

デザインシステムを構築することで、デザイナー、プロダクトチーム、開発者が常に同じ要素、タイポグラフィ、色、コンポーネント、アセットなどを使用し、一貫性を養うことができます。

デザインシステムをお持ちでない方は ゼロからデザインシステムを構築するための7つのステップをご覧ください。

その3：わかりやすい

ユーザーが簡単に理解できるコンテンツや体験を提供すること。デザイナーは、人は常に最も簡単なルートを探すものだと認識しなければなりません。この競争の激しいテクノロジーの世界であなたが使いやすいものを提供しなければ、他の誰かが使ってしまうでしょう。

製品にオンボーディングが必要な場合は、ステップバイステップでわかりやすいドキュメントを作成してください。

UXPinのドキュメントはその例です。まず手順を分類し、探しているものを簡単に見つけることができます。次に、小見出し、ステップ・バイ・ステップの説明、説明ビデオなどでコンテンツを整理し、情報をフォローして消化しやすいようにしています。

その4：ユーザーに考えさせない

情報設計者でありユーザーエクスペリエンスのプロフェッショナルであるスティーブ・クルーグは、著書『Don’t Make Me Think』の中で、「ユーザーとしては、物事がクリックできるかどうかについて、1ミリ秒も考える必要があってはならない」と述べています。

UXデザイナーはプロダクト、アプリ、Webデザインのデザインスタンダードに従わなければなりません。例えば、ユーザーが予想しないような場所にナビゲーションを隠さないこと。またボタン、CTA、リンクなどがわかりやすく配置され、ユーザーを目的地に導くようにしましょう。

創造性や革新性は、競合他社が思いつかないような問題を解決することで得られるものであり、ユーザーが基本的な基準やプロセスを学び直さなければならないような体験を作り出すことではありません。

人間の心理や認知負荷がUXデザインにどのように関係しているかは、すべてのデザイナーが学ばなければならないことです。認知的負荷を最小限に抑えた製品設計を行うことで、より良いユーザー体験とブランドへの信頼が生まれます。

その5：点・線・面-視覚的な文法を理解する

1900年代初頭にバウハウスで定義されたデザインの基本は、「点」「線」「面」の3つの要素で構成されています。

その7：シンプルな言葉が一番

デザイナーは、人々が理解できないような専門用語や社内でのみ使う用語の使用は避けましょう。複雑な言葉を使ってしまうことで、顧客を失うことにもつながってしまいます。

読みやすさは、たとえ高学歴のユーザーであっても認知的負荷に大きな影響を与えます。これは、ポイント4の「ユーザーに考えさせない」でも同じです。

広く使われているライティングサポートツール「Grammarly」によると、書かれたコンテンツには（アメリカでは）13歳位の言葉を使うべきだとしています。

その8：オーディエンスへの共感を持つ

共感は、人間中心のデザインの核心です。デザイナーは理解を超えて、ユーザーとより深いレベルでつながることができます。デザイナーはユーザーやその苦労、環境に共感するために共感を用います。

エンパシーマップとはUXリサーチツールのひとつで、ユーザーが何を求めているのかを明らかにすることで、デザイナーが共感を得るためのツールです。

• 見る
• 聞く
• 考える
• 感じる

エンパシーマップは初期のリサーチやユーザビリティテストの際に、さまざまな感情や気持ちを確認するために使用します。ユーザーをより深く理解することで、彼らが言葉にしないような問題を発見することができます。

その9：フィードバック

マイクロインタラクションやアニメーションを使ってユーザーとコミュニケーションをとり、ユーザーの行動に対するフィードバックやコンテキストを提供します。

例えばアクションの処理に時間が必要な場合は、スローバーやローディングアイコンを使ってユーザーに待つように伝えます。エラーメッセージは、ユーザーが問題を修正するのに役立つようなものにしましょう。

ブランドメッセージに沿った一貫したフィードバックを使用することで、常にポジティブなユーザーエクスペリエンスを提供することができます。

その10：ビジネスバリューを忘れてはいけない

デザイナーは、ユーザーとブランドという2つの要素を満たさなければなりません。製品を成功させるためにはユーザーに焦点を当てることが重要ですが、デザイナーは、デザインがビジネス価値を生み出すことも保証しなければなりません。

ビジネスバリューと人間中心のデザインはしばしば重なり合います。例えば、よりスムーズでスピーディなEコマースのチェックアウトでの体験は、ユーザー・エクスペリエンス（ユーザー中心）を向上させると同時に、コンバージョン率（ビジネス価値）を高めます。

ユーザーの問題を解決しようとするときは常にビジネス価値を同時に生み出す機会を探しましょう。

ポーランドのエージェンシー、HERODOTのEwelina Łuszczek氏は、ビジネス価値に対するデザイナーの義務を簡潔な一文にまとめています。

「優れたUXデザイナーはユーザーの目標とビジネスの目標をリンクさせて、ユーザーと会社の両方が利益を得られるように管理します。」

 2014年のINFRAGISTICSの調査「The Business Value of User Experience」から4つの素晴らしい例を紹介します。

Bank of America

• デザイナーのアクション：登録プロセスのユーザーセンターの再設計
• 結果：登録数が45％増加

Anthropologie (衣料品会社) 

• デザイナーの行動 チェックアウトプロセスのUX再設計
• 結果：売上が24％アップ

GFK (コンサルティング会社)

• デザイナーの行動：購入ボタンの再設計
• 結果：売上高が5億ドル増加

United Airlines (航空会社)

• デザイナーの行動：ユーザーリサーチ
• 結果：オンラインチケット販売が200％増加

UXデザインによるビジネス価値の創出についての詳細は、INFRAGISTICSの12ページにわたる調査結果をこちらでご覧いただけます。

その11：ユーザーテスト

その6の「まず問題を特定する」と同様に、ユーザーテストはデザイナーが経験的な推測をするのではなく、実際のユーザーの問題を理解するために非常に重要です。 ユーザビリティテストは、UXチームに以下のような貴重なフィードバックとユーザーインサイトを提供します。

• ユーザーの問題を解決するためのデザインコンセプトの検証
• 修正すべきユーザビリティ上の問題の発見
• 改善の機会を発見する
• ユーザーについてより深く知る
• ビジネスバリューの機会を特定する

チームは、コンセプトの立案から最終的なデザインの引き渡しまで、常に解決すべき問題を探し、その解決策を検証するためにテストを行う必要があります。 テストについて詳しくはこちらをご覧ください。ユーザビリティ・テストとは何か、どのように実行するか。

その12：視覚的な階層化

視覚的な階層は、製品や画面のレイアウトを整理するのに役立ちます。ユーザーは重要な要素を識別し、必要なものを素早く探し出すことができます。

デザイナーは色、コントラスト、スケール、グループ化などの明確なバリエーションを用いて、視覚的な階層を作ります。

このブログ記事のようにライターがヘッダータグを使って記事の内容を構成し、整理することも視覚的な階層化の好例です。

Nielsen Norman Groupのこちらの記事も合わせてご覧ください。：Visual Hierarchy in UX: Definition

その13：アクセシビリティ

アクセシビリティは、障害のあるユーザーが製品を利用できるようにするための重要な設計上の考慮事項です。また、Google社が「次の10億人のユーザー」と呼ぶ人々（初めてテクノロジーを利用する人々）についても、アクセシビリティを考慮する必要があります。 アクセシビリティに関する主な検討事項は以下の通りです。

• スクリーン・リーダーがコンテンツや指示を解釈できるようにする
• 読みやすさを損なわないような色やコントラストにする
• すべてのユーザーがリンクやナビゲーションを理解できるよう、アイコンとテキストを組み合わせて使用すること
• 読みやすいフォントと文字サイズを使用する
• UXデザイナーは、デザインツールがアクセシビリティチェック機能を備えていないため、これらの配慮を忘れがちです。

UXPinでは、「一人、ひとりに合わせたデジタル体験を提供したい」という思いがあります。そこで、デザインエディタにアクセシビリティ機能を組み込みました。

 14日間の無料トライアルに登録して、UXPinでよりインクルーシブな製品作りを始めましょう!

その14：ユーザーがコントロールできるようにする

可能な限りユーザーが自分の考えを変えたり、送信した情報を編集したりすることが簡単にできるようにしましょう。例えば、チェックアウトフローのすべての画面に戻るボタンを用意することで、ユーザーはエラーを修正したり、変更を加えたりすることができます。

また意図的であるかどうかに関わらず、ユーザーに誤解を与えないようにしてください。

多くの企業ではユーザーが定期購入をキャンセルできないように設定でオプションを隠したり、サポートに連絡するように仕向けたりしています（サポートでは通常、定期購入を継続するためのインセンティブを提供しようとします）。

ユーザーが考えを変えたり情報を編集したりする手段を制限することはブランドへの不信感を生み、お客様に他の解決策を探させることになります。

その15：デザインハンドオフ

デザインの受け渡しは社内のプロセスですが、デザインの受け渡しがうまくいかないと不必要な遅延や技術的なエラーが発生し、ユーザーに悪影響を及ぼします。

UXチーム、プロダクトデザイナー、開発者が協力してプロセスとプロトコルを開発し、デザインハンドオフを最小限のエラーでスムーズに行う必要があります。 UXPin Mergeは、デザインと開発の間のギャップを埋めるのに役立ちます。

まず第一に、Mergeはデザイナーがコンポーネントをリポジトリと同期させることができるので（GitまたはStorybookの統合を介して）、デザインチームは完全に機能する高忠実度プロトタイプを構築することができます。

また、UXPinのSpec Modeは、開発者がデザインの詳細情報を得るための簡単なハンドオフプロセスを提供します。

• プロパティの検査：サイズ、グリッド、カラー、タイポグラフィなど、要素やコンポーネントのCSSを取得できます。
• 距離の測定：要素にカーソルを合わせると、要素とキャンバスの端の間の距離が表示されます。
• スタイルガイド：製品のデザインシステムの概要と、必要に応じてアセットをダウンロードするオプションを表示します。

UXPin Mergeのパワーと、React用のGit統合や他の人気フロントエンドライブラリ用のStorybookなど、お好みのテクノロジーを接続する方法をご紹介します。

その16：再評価と修正

UXデザインの素晴らしい点の1つは、製品やユーザーエクスペリエンスを継続的に改善できるよう、常に進化し続けていることです。 新しい製品やリリースを開始するとデータを分析し、デザインを見直す作業が始まります。

• 何千人、何百万人もの人々が製品を使用したとき、製品のパフォーマンスはどうなるのか？
• ユーザーは意図したとおりに製品を使っているのか？
• ユーザーは、ユーザー体験を向上させるための近道を使っているか？
• ヒートマップはユーザーの行動について何を教えてくれるのか？
• サインアップやチェックアウトの際、ユーザーはどこで脱落するのか？

製品のパフォーマンスを分析する際、チームは常にユーザー・エクスペリエンスを向上させる方法を模索するとともに、ビジネス価値を高めるための道筋を探るべきです。

まとめ

今回ご紹介した16の UXデザイン原則 はワークフローを改善し、ユーザーにとってより良い製品体験を生み出すために活用していただけると幸いです。これは決して網羅的なリストではありませんので、常にプロセスを改善する方法を模索することをお勧めします。

UXPinは、企業の健全な UXデザイン原則 を育むためのコラボレーションデザインツールです。UXPinはデザイナー、製品チーム、開発者の間のギャップをうまく埋め、UXデザインプロセスのあらゆる側面を改善することができる唯一のデザインツールです。

UXPinで新しいデザインの世界を探求するために、14日間の無料トライアルを始めてみませんか？

The post UXデザイン原則 – ユーザーが喜ぶための法則 appeared first on Studio by UXPin.

デザインでの失敗 はつきものです。だからといって、おかしなアイデアなどを見つけたとしても、それはそれでみるのを止めれませんよね。

それぞれのデザインからの重要な教訓があるので、みてみましょう！

10. Motorola ROKR w/ iTunes (2004)

Author: Matt Ray. File licensed under Creative Commons Attribution-Share Alike 2.0 Generic

2004年、AppleはMotorola ROKRでスマートフォン市場への参入を決めました。モトローラは、iTunesプレーヤーをOSに統合しました。このアイデアは素晴らしいものでしたが、実際に実行してみると大失敗となりました。インターフェイスのデザインがよくありません。保存できる曲の数も限られていた。結果的には、iPod nanoが発売された時点で売上が激減し、モトローラは次の携帯電話でiTunesを使わなくなってしまいました。

9. OQO Model 1 (2004)

Author: Philosophygeek. File licensed under Creative Commons Attribution-Share Alike 2.0 Generic

プロダクトデザインの悪さ という点では、タブレット端末にも同様の問題があります。最も悪かったのは、米国のハードウェアメーカーであるOQO社でした。世界最小のWindows XPコンピュータとして発表された「Model 1」をデザインしたのです。5×3インチの小さな画面のため、Windows XPでは全く使えませんでした。OQO社は2009年に倒産しました。

8. Eyetop Wearable DVD Player (2004)

スクリーン内蔵のメガネを使うというコンセプトは以前からあり、Google Glassが最初ではありません。2004年、片側に320〜240ピクセルのスクリーンを内蔵し、DVDを見られるようにしたメガネが初めて登場しました。このデザインには3つの大きな問題がありました。1つ目は、乗り物酔いする人が多いこと。2つ目は、DVDプレーヤーを持ち歩かなければならないこと。3つ目に、映像が片方の接眼レンズにしか映らないため、映像に集中できないことです。

7. Google X (2005)

悪いプロダクトデザインのすべてが、物理的な製品で起こったわけではありません。2005年に発売された「Google X」は、1日限りのひどいオンラインインターフェースでした。Apple OS Xのデザインを真似て作られたものでしたが、アイコンは醜く、接続もうまくいかず、完全に混乱していました。すぐに削除されました。

6. Google Wave (2009)

Author: Akae. File licensed under Creative Commons Attribution-Share Alike 2.0 Generic

2009年に開始されたGoogle Waveは、2010年に失敗を発表し、2012年には完全に消滅しました。Google Waveは、コラボレーションを向上させるはずの興味深いプロジェクトでした。しかし、ここでもまた、良いコンセプトが悪いプロダクトデザインによって台無しになってしまいました。

5. Macintosh TV (1993)

Author: Ben Boldt. File licensed under Creative Commons Attribution-Share Alike 2.0 Generic

アップルにはデザイン上の罪がないわけではありません。もともと、テレビとコンピューターを融合させた「マッキントッシュテレビ」を開発したが、これは「何もしない」ということを意味としていました。わずか1万台がラインオフしただけで、アップルは製品 デザインの失敗 を理由にこのプロジェクトを中止しました。

4. Nokia N-Gage

Author: J-P Kärnä. File licensed under Creative Commons Attribution-Share Alike 2.0 Generic

ノキアは頑丈な携帯電話に定評がありますが、この携帯電話／ゲーム機はひどいアイデアでした。スピーカーとマイクが電話機の側面にあるため、電話機の操作性が悪く、ゲームを変えるたびにバッテリーを外さなければなりませんでした。ノキアの最高傑作とは言えません。

3. Sony Remote for Google TV

Author: Special*Dark. File licensed under Creative Commons Attribution-Share Alike 2.0 Generic

このリモコンは、これまでにGoogleから発表されたものの中で、おそらく最も間抜けなものでした。言うまでもなく、会社はかなりの速さでデザインを更新しました。

2. Windows Mobile

Photo Credit: James Cridland via Compfight cc

Windowsは小さな画面ではうまく機能しませんでしたが、Windows Mobileはもともとモバイル機器の選択肢のひとつでした。しかし、Windows Mobileは、携帯電話で使われるOSとしては史上最悪のものでした。これでは、アプリデザイナーも諦めてしまいます。

1. Shutdown process in Windows 8

Windows 8でコンピュータをシャットダウンを体験した人はその難しさをご存知だと思います。Windows 8はデザインが悪いため、コンピュータをシャットダウンするのに非常に時間がかかり、ほとんどの人はシャットダウンする気になりませんでした。

これらのようなデザインの失敗 を避けたいですか？UXPinのコードベースデザインツールでアイデアの共有やプロトタイピングをぜひお試しください。

The post デザインの失敗 :ワースト１０例 appeared first on Studio by UXPin.

ReactJSと React Native の違いを理解すると、デザイナーはエンジニアとのコミュニケーションは円滑になり、コストのかかる技術的な問題は回避され、デザイン引き継ぎ時の摩擦を最小限に抑えることができます。

デザイナーは、JavascriptやReactの基本的な違いを理解するのに、コードを学んだり技術的な詳細に踏み込む必要はありません。デザイナーに関係する最も大きな違いは、ウェブベースの製品とネイティブのモバイルアプリケーションをデザインする際のコンポーネントライブラリとその選び方です。

UXPin Mergeを使用すると、React UIコンポーネントをGitリポジトリからUXPinのデザインエディタに同期させることができるので、デザインチームは問題なく機能するコードベースのプロトタイプを作成できます。この信頼できる唯一の情報源（Single source of truth）により、デザインのズレがなくなり、市場投入までの時間が短縮され、デザイナーとデベロッパー間の結束が高まります。この画期的なテクノロジーへのアクセスに関する詳細およびリクエスト方法については、Mergeについてのページをご覧ください。

ReactJS とは

ReactJS（一般にReactと呼ばれる）は、Webベースのユーザーインターフェース構築のためのオープンソースのJavascriptライブラリです。コンポーネントベースのフロントエンドフレームワークで、バニラHTML、CSS、Javascriptを記述するよりも早く簡単にWebサイトやWebアプリケーションの開発・拡張ができます。 ReactJSでは、基本的なボタンから複雑なチャートやデータグリッドまで、再利用可能なタグやコンポーネントを作成でき、デベロッパーはコード一行でそれを呼び出すことができます。デザイナーがマスターコンポーネントを作成し、それをユーザーインターフェースの他の部分にコピー＆ペーストするのとよく似ていますね。

ReactJS の例

Facebookは、2011年に自社のWebベースの全製品のためにReactを開発し、現在もWhatsApp、Messenger、Facebook、InstagramのWeb版でこのフロントエンドフレームワークを使用しています。

Facebook以外にも、以下のような多くのグローバル企業やFortune 500社が、WebサイトやWebアプリケーションにReactを使用しています。

• Netflix
• Salesforce
• New York Times
• Reddit
• Cloudflare
• Tesla
• PayPal(PayPalがUXPin Mergeを使ってデザイン拡張させ、Reactリポジトリに同期した方法はこちら)

React Native とは

 React Native は、プラットフォームを超えたモバイルAndroidおよびiOSアプリ、ならびにWebベースのアプリケーションに使用されるReactJSのモバイル版です。ReactJSと同様に、 React Native は、モバイルアプリの開発・拡張のための再利用可能なコンポーネントをデベロッパーにもたらします。

技術的な大きな違いとしては、Reactは仮想DOM（Document Object Model）を使ってWebブラウザ上でコードをレンダリングするのに対し、 React Native はネイティブAPIを使ってモバイルデバイス上でUIをレンダリングする点が挙げられます。

Facebookが React Native を作った理由

 React Native 以前は、デベロッパーはApple XCodeまたはAndroid Studioを使用して、iOSとAndroid用の2つの別々のネイティブアプリケーションをそれぞれ作成しなければいけませんでしたが、今は React Native により、デベロッパーは、iOSとAndroid用のネイティブコードを自動的にレンダリングする単一のアプリケーションを開発することができます。

React Native の例

Facebookは、Instagram、Facebook、Facebook Ads Manager、Oculusなど、ネイティブモバイルアプリケーションに React Native を使用しています。 また、以下のように多くのグローバル企業がReact Nativeを使用しています。

• Coinbase
• Shopify
• Discord
• Skype
• Bloomberg
• Pinterest
• Baiduモバイル

 React Native と ReactJS の違い

２つの最大の違いは、ReactがJavascriptのライブラリであるのに対して、React NativeはJavascriptのフレームワークであることです。

• ライブラリとは、エンジニアがWebサイトやアプリケーションを開発しやすくするために、あらかじめ用意されたコードのことです。
• フレームワークはより複雑で、Webサイトやアプリケーションを構築するためのライブラリ、テンプレートフレームワーク、API、セッション管理などで構成されています。

その他にも、ReactJSとReact Nativeの決定的な違いは以下のようにあります；

• ReactJSはJavascriptとCSSでアニメーションを行い、React Nativeはアニメーション用のAPIを使用します。
• ReactJSはUIでHTMLをレンダリングし、React NativeはJSXをレンダリングします。
• デベロッパーは主に、Web開発にはReactJSを、モバイルアプリケーション開発にはReact Nativeを使用しています。
• ReactJSではWebページのナビゲーションにReact-routerが使われ、React NativeではNavigationライブラリが組み込まれています。

プロトタイプデザインのためのReact

ここでは、デザイナーがReactのプロジェクトに取り組む方法をいくつかご紹介します。

コンポーネントベースのデザイン手法

ReactJSやReact Nativeでは、コンポーネントベースのフレームワークを用いてUIを構築していました。デザイナーも同様に、コンポーネントベースのデザインマインドセットを使わなければいけません。自身がデザインするUIについてそれぞれ、「デベロッパーはこれをどのようにして核となるコンポーネントに分解できるのか」と自問してみましょう。

React製品をデザインする場合、コンポーネントを作成し、製品デザイン全体で一貫してこれらを再利用します。コンポーネント内でフォントサイズやスペーシングの変更は、エンジニアが新しいコンポーネントを構築したり、追加のスタイリングを記述する必要があるためなるべく避けましょう。

コンポーネントライブラリの採用

ReactJS やReact Nativeのデザインシステムをゼロから構築すると、デザインと開発の間で常に課題が発生し、ズレが生じてしまいます。そこで企業は、カスタマイズ可能なReactコンポーネントライブラリを採用することで、この課題を克服しています。

Reactコンポーネントライブラリを用いたデザインにより、デザイナーは、デザインを最終製品に変換する際にエンジニアが直面する制限や制約がわかってきます。

GoogleのMaterial Design UIをベースにしたMUIは、最もわかりやすく広く使われているコンポーネントライブラリの1つであり、デザイナーは、MUIを基盤として、ウェブサイト、ウェブアプリ、ネイティブアプリケーションのデザインシステムを構築することができます。

UXPinのMUI統合により、デザイナーはReactコンポーネントを使用してUIの構築ができます。UXPinのプロパティパネルでMUIコンポーネントをカスタマイズして、ブランドや製品の要件に対応させることができます。無料トライアルにサインアップし、UXPinでReactコンポーネントを使ったデザインを始めてください。

モーションとアニメーション

モーションとアニメーションは、特にネイティブアプリケーションの場合、デザイナーとデベロッパーの間でしばしば摩擦を起こします。ReactJSでは、エンジニアは比較的簡単にデザインアニメーションを再現できますが、 React Nativeで同じ結果を得るのは、追加のツールやパッケージがなければ困難または不可能です。このような追加には時間とコストがかかり、プロジェクトの制約を超えてしまう可能性があります。 モーションとアニメーションについては、プロジェクト開始時に必ずエンジニアと話し合い、デザインの引き継ぎ時に摩擦が生じないよう、何ができるかを判断しましょう。

ReactとUXPin Mergeでデザインする

UXPin Mergeで、デザイナーはReactコンポーネントを使用してきちんと機能するプロトタイプを構築できます。デザイナーは、他のデザインツールと同様にReactコンポーネントを使用しますが、最終製品に含まれるコンポーネントと同じであるため、忠実度と機能性が大幅に向上します。

UXPin MergeでのデザインのためにReactを理解する必要はありませんが、理解していたら、エンジニアリングチームとのコミュニケーションと連携が改善されつつ、より忠実で機能的なプロトタイプを作成できる可能性があります。

Reactのプロップ

Reactコンポーネントは、色、文字デザイン、ボーダー、シャドウなどのプロパティを確定するのにプロップを使用します。Merge はプロップを自動的に認識し、デザイナーが編集できるようにプロパティ パネルが表示され、デザイナーは JSX に切り替えて、コードで表示および編集もできます。

プロップでデザイナーが変更を加えることができますが、同時にプロップは、ブランドの色や書体など、デザインシステムで確定された制約を設定するものでもあります。この制約により、一貫性が維持され、チームメンバーが不正に変更するのを防ぐことができます。

UXPinはベクターグラフィックスではなくコードをレンダリングするため、デベロッパーはデザイナーがコンポーネントのプロップに加えた変更をコピー＆ペーストするだけで、さっとUIを開発できます。

より忠実に、より機能的に

Reactコンポーネントを使ったデザインでは、デザイナーは最終製品の正確なレプリカを作ることができます。たとえば、機能する日付ピッカーを従来の画像ベースのデザインツールで作成することはできませんが、UXPin Merge を使用すると、日付ピッカー、チャート、データ テーブル、グラフなど、エンジニアがレポジトリに追加したあらゆる React コンポーネントでプロトタイプを作成できます。

定義されたインタラクション

インタラクションやアニメーションは、デザインプロジェクトに多大な時間を要し、デザイナーはプロジェクトごとにこれらのインタラクションを作り直さなければならず、エラーや矛盾が生じる可能性があります。

Mergeでは、プロダクションコードから生成された機能的およびインタラクティブな要素を使用してプロトタイプを作成でき、デザイナーは、プロップを使用して新しいインターフェースやコンポーネントに合わせてアニメーション設定の変更ができます。

デザインシステムにアニメーションを組み込むことで、デザイナーはインタラクションの矛盾をなくしつつ、プロトタイピングの時間を短縮できます。

Storybookを使ったその他のフロントエンドフレームワーク

Mergeを使うと、React でのデザインだけにとどまらず、当社の Storybook 統合により、Vue、Ember、AngularJS、Web Components などの他の一般的なフロントエンドフレームワークを同期することができます。

Reactコンポーネントと全く同じようにStorybookコンポーネントを使用して、忠実度の高いプロトタイプのデザインができます。プロップの代わりにStorybook Argsを使用して、UXPinのプロパティ、スロット、スタイル、入力などを変更します。

コードを使ったデザイン

プロトタイピングとテストの強化に向けて、きちんと機能するReactやStorybookコンポーネントを使ったデザインを始める準備はできましたか？ここでは、開始法を2つご紹介します。

1. 14日間の無料トライアルにサインアップすると、MUIのReactコンポーネントライブラリを使用してUIをデザインするためのMUI統合にアクセスできるようになります。
2. または、Mergeページで、ReactのGit統合、またはその他の一般的な技術用の Storybookへのアクセスをリクエストすることもできます。サポートチームのメンバーが、オンボーディングプロセスのお手伝いのご連絡を差し上げます。

The post React Native と ReactJS – それぞれの違い appeared first on Studio by UXPin.

マイクロインタラクションは、強化とフィードバックによってユーザーエクスペリエンスを向上させます。マイクロインタラクションがなければ、ユーザーインターフェースは退屈で活気のないものになってしまいます。

好むと好まざるとにかかわらず、デジタル製品は人間の心理を利用しています。チャットやソーシャルメディアのアプリで「入力中…」と点滅しているのを見ると、その人が何を言おうとしているのか気になってしまいます。

このようなマイクロインタラクションは、ユーザーを引きつけ、製品を使い続けたり、購入したり、ポジティブなブランド体験を共有したりする可能性を高めます。

一方で、マイクロインタラクションは、ユーザーがユーザーフローを完了するのを妨げ、結果的にネガティブな体験をもたらします。

適切なバランスを見つけるには、UXチームがユーザビリティスタディや関係者からのフィードバックを通じて、エンドユーザーとともに忠実度の高いプロトタイプをテストすることが重要です。

UXPin Mergeを使用すると、GitリポジトリやStorybookから完全にインタラクティブなコンポーネントを使用して、UXデザイナーがハイフィデリティ・プロトタイプを作成でき、インタラクションの追加プロセスをスピードアップできます。コードベースのプロトタイプを使用することで、UXチームは最終製品で使用されるマイクロインタラクションを正確にテストすることができます。UXPinを使った高度なプロトタイピングを体験するには、今すぐ無料トライアルをご利用ください。

マイクロインタラクションとは？

マイクロインタラクションは、システムやユーザーからのトリガーに基づいて、フィードバックを提供します。このフィードバックは、タスクが完了したことをユーザーに知らせたり、アクションが必要なときにユーザーに警告したりします。

マイクロインタラクションは、トリガーとフィードバックのペアで動作します。最初にトリガーがあり、次に確認のためのフィードバックがある：

• トリガー：ユーザーのアクションまたはシステムの状態変化
• フィードバック：ユーザーインターフェースへの視覚、聴覚、触覚の変化

私たちが毎日無意識に使っているマイクロインタラクションの優れた例として、プレビュー通知をスワイプで消すことが挙げられます。携帯電話を使用中に通知を受け取った場合、よくスワイプすると、通知のポップアップが画面からスライドして消えます。

上記の例では、マイクロインタラクションのトリガー-フィードバックを次のように定義することができます：

• トリガー：ユーザーが通知のポップアップをスワイプする
• フィードバック：通知が画面から消える

ポップアップで表示される通知もマイクロインタラクションです。

• トリガー：システムが通知を受け取る
• フィードバック：通知ポップアップのアニメーション

通知ポップアップは、複数の目的を果たすマイクロインタラクションの素晴らしい例です：

• ヘルプ：ユーザーに新しいメッセージを通知する
• マーケティング：通知を送信した製品の使用をユーザーに勧める

マイクロインタラクションの4つのステージ

ユーザーにとって、マイクロインタラクションはトリガー・フィードバックとして起こります。しかし、UXチームやエンジニアが知っているように、舞台裏ではさらに多くのことが行われています。すべてのマイクロインタラクションには、4つのステージまたはステップがあります。：

• トリガー：ユーザーのアクションまたはシステムの状態変化
• 条件：どのようなマイクロインタラクションがトリガーされるかを定義するシステムルール
• フィードバック：ユーザーインターフェースへの視覚、聴覚、触覚の変化
• モード：マイクロインタラクションが完了した後に起こること-ステートまたはUIの変更

UXPinは、クリック/タップ、マウスアクション、ジェスチャーなど、様々なユーザートリガーをUXデザイナーに提供します。また、プロトタイプの次のアクション（マイクロインタラクションを含む）に対して「if-then」条件を設定することができます。これは、Javascriptの関数を実行するのと同様です。

実際にお試しください。UXPinの無料トライアルにサインアップして、世界で最も先進的なプロトタイピングツールで遊んでみてください。

なぜマイクロインタラクションが重要なのか？

マイクロインタラクションは、ブランドがユーザーとコミュニケーションをとることを可能にし、わかりやすさ、次のアクション、ブランドエンゲージメントなどを提供します。

わかりやすさとシステムフィードバックの提供

例えば、Instagramのフィードを下に引っ張ると（ほとんどのアプリで）、上部にローディングアニメーションが表示され、システムがフィードを更新するために働いていることを示します。

このマイクロインタラクションがなければ、ユーザーは、システムが A.自分のアクションに応じたのか、B.タスクを完了したのかを知ることができません。

アクションを起こす

マイクロインタラクションは、ユーザーにアクションを起こさせるのにも役立ちます。最も一般的なものは、Eコマースで見られる「カートに入れる」というマイクロインタラクションです。

買い物客が商品をカートに入れると、ヘッダーにあるカートのアイコンが揺れたり、色が変わったりします。場合によっては、画面の横からカートがスライドしてきて、ユーザーにチェックアウトを促すこともあります。

ブランディング

マイクロインタラクションは、ユーザーにポジティブな印象を与えたり、楽しいアニメーションを提供することで、ブランド体験を向上させます。

例えば、DuckDuckGoのアプリを使用したことがある人は、「すべてのタブとデータを消去」をクリックすると、ブラウザが閲覧履歴を消去したことを示す炎が表示されます。

このマイクロインタラクションは、DuckDuckGoがユーザーにブラウジングのプライバシーを提供し、トラッキングクッキーをブロックすることを約束するものです。

マイクロインタラクションの重要性を示すその他の例

• ナビゲーションとユーザーフローの改善
• 特に新しいユーザーに対して、指示を与える。
• ユーザーのエラーを示す、または防止する（必須項目での入力不完全なフィールドに赤でハイライトするなど
• エンゲージメントや共有を促進する

マイクロインタラクションの例

マイクロインタラクションには無限の可能性があります。UXデザイナーはしばしば、マイクロインタラクションで創造性を発揮して楽しんでいます。

ここでは、マイクロインタラクションの最も一般的な例と、それらがどのようにユーザーエクスペリエンスを向上させるかをご紹介します。

マウスホバーエフェクト

マウスのホバー効果は、デスクトップユーザーにとって最も一般的なマイクロインタラクションの一つです。これらのマイクロインタラクションは、ツールチップを使って分かりやすくしたり、カーソルを変えてクリック可能な要素を示したりすることができます。

また、ホバーによるマイクロインタラクションは、画像カルーセルの開始／停止や、ビデオのプレビューを可能にし、ユーザーが画面を「ブラウズ」してからどこをクリックするかを決めることができます。

クリック/タップエフェクト

ほとんどのインタラクションは、ユーザーが画面上の要素をクリックしたりタップしたりすることで発生します。クリック／タップによるインタラクションには、無限のマイクロインタラクションと可能性がありますが、ほとんどの場合、製品やウェブサイトをナビゲートする方法を提供しています。

クリック/タップアクションは、ボタンを押すエフェクトのように、要素上のマイクロインタラクションをトリガーし、ユーザーが別の画面に移動したことを示すために、ページのスライドトランジションをトリガーすることがあります。

タップ／クリック／ホールドエフェクト

タップ＆ホールドのマイクロインタラクションは、ドロップダウンメニューに代わる優れた機能で、特にスクリーンスペースが限られたモバイルデバイスでは有効です。ユーザーは要素をタップ＆ホールドすることで、より多くの選択肢を得ることができます。通常、何らかのマイクロインタラクションでポップアップを起動します。

Facebookの「いいね！」ボタンがその典型例です。デスクトップでは、「いいね！」ボタンの上にカーソルを置くと、より多くの投稿のリアクションを見ることができます。モバイルではマウスカーソルがないため、同じ機能を利用するには「いいね！」ボタンをタップ＆ホールドする必要があります。

ハプティック・フィードバック

最近のスマートフォンやゲーム機のコントローラーには、ユーザーやシステムの動作に対応した振動である「触覚フィードバック」が搭載されています。

ゲームでは、撃たれたり殴られたりするようなアクションシーンに触覚フィードバックがよく使われます。この振動により、ユーザーは画面上で起こっていることを聞いたり、見たり、感じたりすることができ、没入感を得ることができます。

スマートフォンで親指を使った生体認証を行った場合、認証に失敗すると親指の下にわずかな振動が伝わります。この触覚マイクロインタラクションは、親指の位置を変えて、もう一度やり直さなければならないことを知らせてくれます。

データ入力・進捗管理のためのマイクロインタラクション

マイクロインタラクションは、データの入力や進捗状況に非常に効果的です。よく、新しいパスワードを作成するときに、「弱い」から始まり、「強い」「非常に強い」へと進行していくプログレスバーが表示されます。

また、「サインアップ」や「確認」のボタンは、シェーディングされた暗い色/クリックできない状態にしておき、次に進むために十分な強度のパスワードを作成した後に点灯させることもできます。

フローの上部にプログレスバーを設置すると、ユーザーに確認ページまでの残り時間を知らせることができます。ユーザーが進むにつれて、バーがアニメーションしたり、色合いが変わったりして、完了を促すことができます。

スワイプ／スライドによるマイクロインタラクション

UXデザイナーは、移動やナビゲーションを示すためにスライドによるマイクロインタラクションをよく使います。これらのマイクロインタラクションはモバイルで最も効果的ですが、デスクトップ画面でも画像カルーセル、セールスファネル、チェックアウトフローなどで効果を発揮します。

モバイルデバイスでは、タップする代わりにスワイプすることで、よりスムーズで高速なナビゲーションが可能になります。スライドのマイクロインタラクションは、アクションに対応しているため、スワイプとの相性が良いです。

スライドマイクロインタラクションの優れた例として、出会い系アプリでの左右へのスワイプがあります。ユーザーがスワイプすると、マッチする可能性のある相手が画面外にスライドします。一致した場合、アプリは「It’s a Match」というマイクロインタラクションと、チャットを開始するためのボタンやリンクをユーザーに提供します。

システムフィードバック

マイクロインタラクションは、システムのフィードバックをユーザーに伝える上で重要な役割を果たします。回転するローディングアイコンは、最も一般的なシステムマイクロインタラクションです。これらのマイクロインタラクションは、アプリやウェブサイトのロード中にユーザーに待つことを知らせます。

回転するアイコンがないと、ユーザーはアプリがクラッシュしたと思ってしまうかもしれませんし、クリックやタップを続けてしまい、結果的に複数のサーバーリクエストが発生してしまうかもしれません。

メッセージの通知も、システムのフィードバックの好例です。アプリは（他のユーザーから）新しいメッセージを受け取り、アプリを開くように警告します。

まとめ

マイクロインタラクションの重要性と、それを利用してユーザーエクスペリエンスを向上させる方法をご紹介しました。何事も「過ぎたるは及ばざるが如し」です。マイクロインタラクションを使いすぎたり、無駄に長いアニメーションを作ってユーザーの動きを遅くしたりしないようにしましょう。

UXデザイナーは、ユーザビリティスタディからのフィードバックをもとに、ユーザーがナビゲーションのためにマイクロインタラクションを必要としている箇所や、強力なパスワードの作成など重要な指示を見逃していないかを判断する必要があります。

UXPinプロトタイプ：マイクロインタラクションの作成

UXPinは、UXデザイナーがハイフィデリティ・プロトタイプのための没入型ユーザー体験を作成するためのトリガー、条件、およびインタラクションを提供します。

また、変数を作成してマイクロインタラクションをパーソナライズすることもできます。例えば、サインアップフォームからユーザーの名前を取得し、ユーザーがサインインに成功したときのウェルカムアニメーションをパーソナライズすることができます。

また、ページ遷移の有効化、要素の表示/非表示、トグル、状態の設定、APIリクエストの作成など、様々な機能があります。UXPinは、UXチームが完全に機能するハイフィデリティ・プロトタイプを構築して創造性を発揮するためのツールと柔軟性を提供します。UXPinで次のプロトタイプのデザインを始めましょう。世界で最も先進的なコードベースのデザインツールを使ったプロトタイピングのパワーを体験していただくために、14日間の無料トライアルをご用意しています。

The post プロトタイプを改善するパワフルな マイクロインタラクション appeared first on Studio by UXPin.

UXデザイン と UIデザイン がUXの世界で最もよく議論されることの一つです。その違いと共通点はどこにあるのでしょうか？UXデザイナーとUIデザイナーはどちらが必要なのでしょうか？誰が何をするのか？両者は分離すべきなのか？両者はどのように連携するのでしょうか？

このような混乱が生じるのは、ほとんどの教育機関がユーザーインターフェースデザインをUXデザインカリキュラムの一部として教えているからです。UIはユーザーエクスペリエンスの一部であり、なぜ両者を分けるのでしょうか？

中小企業やスタートアップ企業では、UIはUXの傘下に入ります。しかし、組織や製品の規模が大きくなると、ユーザーエクスペリエンス部門は、UXデザイナー、UIデザイナー、リサーチャー、ライター、UXアーキテクト、リサーチオプス、デザインオプス、その他のUXスペシャリストに分かれます。

これらの役割は分かれていますが、いずれも素晴らしいカスタマーエクスペリエンスを実現するために、ユーザー中心のデザインを重視しています。そのためにUXチームは予算、製品、技術的な制約の中で、ユーザーの問題を解決するために協力し合わなければなりません。

UXPinは、UXチーム、プロダクトデザイナー、エンジニア、その他のステークホルダーを含む組織全体の強力なコミュニケーションを促進するコラボレーションデザインツールです。

チームはUXPinのコメント機能を使って、プライベートまたはパブリックなコメントを作成したり、人にタグを付けたり、タスクを割り当てたりして、UXPinを通じてコミュニケーションをとることができます。UXPinを14日間お試しいただき、ユーザーエクスペリエンスデザインを強化するために作られたコラボレーションデザインツールをご確認ください。

ユーザー中心のデザインとは？

ユーザー中心設計とは、UXとUIを結びつける接着剤のようなものです。UXデザイナーとUIデザイナーが効果的に仕事をするためには、ユーザー中心設計のアプローチを用いなければなりません。

ユーザー中心設計とは、お客様を中心にしてデジタル製品を設計するプロセスのことです。この言葉は、アップル社の元社員でニールセン・ノーマン・グループの創設者であるドン・ノーマンが1986年に発表した著書”User-Centered System Design: New Perspectives on Human-computer Interaction “の中で、この言葉を使っています。

その中で彼はこう書いています。「人間は適応能力が高いので、人工物への適応という負担をすべて背負うことができるが、熟練したデザイナーは、人工物をユーザーに適応させることで、この負担の大部分を消滅させることができる」。

ドンが言いたいのは、ユーザーエクスペリエンスデザイナー（UX＆UI）の仕事は、A）人間の問題を解決し、B）ユーザーの制限をなくすように製品を適応させることだということです。

UX デザイン とは？

UXデザインとはユーザーインターフェースを含む、より広範なユーザー体験と、製品に触れたときのユーザーの感じ方を包含するものです。UXデザイナーは製品の体験を最適化し、より楽しく使いやすいものにするために、ナビゲーションやユーザーフローにも重点を置きます。

UXデザイナーの責務

• 製品構造：ナビゲーション、ユーザージャーニー、フロー

• リサーチ：ユーザー、競合他社、市場の分析

• テスト：ローフィデリティおよびハイフィデリティ・プロトタイピング

• デザイン：ワイヤーフレーム、ヒエラルキー、コンテンツレイアウト

UXデザイナーの資質とスキルセット

• クリティカルシンカー
• 問題解決能力
• データや分析に興味がある
• 構造に興味がある
• 機能的なデザイン
• プロジェクトマネジメント

UIデザイン とは？

ユーザーインターフェースデザイナーは、デジタル製品やWebサイトでユーザーが操作するボタン、色、アイコン、タイポグラフィー、画像、フォーム、その他の要素やコンポーネントなどの視覚的要素を作成します。

また、アニメーションやマイクロインタラクションなどのインタラクティビティにも関心があります。

基本的に、UIデザインはユーザーエクスペリエンスデザインの中の専門的なポジションです。

UIデザイナーの責任

• 製品の美学：ブランディング、ビジュアルデザイン

• リサーチ：デザインリサーチ、ユーザー分析

• テスト: UIプロトタイピング（ハイフィデリティ・プロトタイピング）

• デザイン：モックアップ、インタラクションデザイン、アニメーション、ビューポートレイアウト(レスポンシブデザイン)

UIデザイナーの資質とスキルセット

• ビジュアル・クリエイティブ
• グラフィックデザイン
• ビジュアルデザインに興味がある
• 美意識が高い
• 形と機能のバランスをとる
• ユーザーのインタラクションや行動を考慮する
• タスクオリエンテッド

UXデザインと UIデザイン の違い

責任の所在からわかるように、UIデザイナーは美的感覚とインタラクティビティを重視し、UXデザイナーは全体的な体験、構造、ナビゲーションを重視します。

UXデザイナーは製品の体験を幅広く見ますが、UIデザイナーは各画面で何が起こっているかに注目します。

UXデザイナーは通常、リサーチを深く掘り下げ、ユーザーを超えて競合他社や市場分析にまで目を向けます。UIデザイナーは、ビジュアルデザインのトレンドを研究しながら、ユーザーの研究も行います。

ここでは、デザイン思考プロセスにおけるUXデザインとUIデザインの主な違いをご紹介します。

共感する

• UXデザイナー：ユーザーのペインポイント、ニーズ、エモーションに焦点を当てる。
• UIデザイナー：ユーザーの環境や動き、行動に着目する

定義

• UXデザイナー：ユーザーの問題と達成しようとする目標を定義する
• UIデザイナー：ユーザーが目標を達成するために必要な各ステップに焦点を当てる

アイデアを出す

• UXデザイナー：ユーザーの問題を解決するための情報アーキテクチャとナビゲーションを検討します。
• UIデザイナー：ユーザーが製品を操作する際に必要となる要素やコンポーネントを検討します。

プロトタイプ

• UXデザイナー：ワイヤーフレーム、ローフィデリティ、ハイフィデリティのプロトタイピングを用いて、ページの階層やユーザーフローを設計します。
• UIデザイナー：忠実度の高いプロトタイプのためのモックアップとインタラクティビティをデザインする

テスト

• UXデザイナー：全体的なユーザーエクスペリエンスをテストし、ユーザーが製品を使用する際にどのように考え、どのように感じるかを知りたいと考えます。
• UIデザイナー：ユーザーが製品をどのように操作するかをテストし、実用的な質問を投げかける

UXデザインと UIデザイン の共通点

UXデザイナーとUIデザイナーは、どちらもユーザー中心のデザインを重視し、UXデザイン思考の原則に従っています。UXデザイナーはユーザーの目標を定義し、UIデザイナーはユーザーがその目標を達成するのを支援します。UXデザイナーはユーザーのゴールを定義し、UIデザイナーはそのゴールを達成するための手助けをします。

UIとUXを2つの独立した部門ではなく、1つの組織として捉えることが重要です。どちらもユーザーエクスペリエンスデザイナーであり、UXデザインの中で異なるタスクに焦点を当てているだけなのです。

もしデザイナーがどちらかのタスクをうまく実行できなければ、他方のタスクがどんなに優れていても、ユーザーエクスペリエンスと製品全体が失敗してしまいます。

UXデザイナーとUIデザイナーは、どちらもアクセシビリティを考慮しなければなりません。UXデザイナーは、レイアウト、階層、配置など、製品の使いやすさを重視し、UIデザイナーは、色、フォント、サイズ、インタラクションなど、ユーザーインターフェースのアクセシビリティを重視します。

プロダクトデザインのプロセスにおけるUXとUI

ここでは、典型的なプロダクトデザインのシナリオと、UXとUIの役割分担をご紹介します。

1. UXデザイナー／UXリサーチャーは、ユーザー、市場、競合他社の調査を行います。
2. UXデザイナーは、プロダクトマネージャーやステークホルダーと協力して、製品や予算の制約の中でアイデアを開発する。
3. UXデザイナーは、情報アーキテクチャ、初期スケッチ、ワイヤーフレーム、ローフィデリティ・プロトタイプを作成します。
4. UXデザイナー/リサーチャーは、ナビゲーションやユーザーフローを改善するための初期テストを行います。
5. UIデザイナーは、色、アイコン、ボタン、タイポグラフィを使ってワイヤーフレームをモックアップに変換します。
6. UIデザイナーは、インタラクティブな機能を追加して、忠実度の高いプロトタイプを作成します。
7. UXリサーチャーはハイフィデリティプロトタイプをテストし、UX/UIデザイナーに変更を依頼し、反復作業を行います。

デザインチームは、デザインハンドオフの際にエンジニアと協力し、開発プロセスを開始します。

この例は、決して「業界標準」のアプローチではありません。UXデザイナーとUIデザイナーは、デザインプロセスを通じて密接に連携します。

UXデザインは常にユーザーインターフェースデザインに先行します。製品のインターフェイスをデザインするには、それを支える構造やアーキテクチャが必要です。

UXデザイナーは基礎を作り、UIデザイナーはインタラクションと美観を重視します。これらの作業を行うためには、どちらのデザイナーもユーザーのニーズを意識して、楽しいユーザー体験を生み出す必要があります。

UXとUIの デザイン ツール

UXデザイナーとUIデザイナーは通常、同じデザインツールを使用しますが、タスクや目的は異なります。

UXデザイナーは、ワイヤーフレームを作成し、各画面を基本的なクリック／タップ操作でリンクさせ、ローフィデリティのプロトタイプを作成します。UXデザイナーは、グリッドシステムを使って各ページの構造を構築し、ナビゲーションを組み込みます。

ワイヤーフレームが完成したら、UIデザイナーは色、インタラクティブ性、ページトランジション、アニメーション、タイポグラフィなどを追加し、忠実度の高いプロトタイプを作成します。

UXPinがUX/UIデザイナーのスピードと一貫性を高める方法

UXPinは、UXデザイナーとUIデザイナーが協力して、ワイヤーフレームからプロトタイプ、そして最終的なデザインに至るまで、お客様に素晴らしい製品を提供するためのエンドツーエンドのユーザーエクスペリエンスデザインツールです。

1. UXデザイナーは、内蔵のデザインライブラリを使用して忠実度の高いワイヤーフレームを設計することができ、UIデザイナーや関係者は画面のレイアウトやフローをより深く理解することができます。
2. UXデザイナーは、試行錯誤されたビルトインのデザインライブラリを使用することで、初期のテストにおいてユーザビリティスタディや関係者から有意義なフィードバックを得ることができます。
3. ほとんどの作業が完了しているため、UIデザイナーはブランディングや製品の要件に合わせてデザイン要素を洗練させ、すぐにテストを開始することができます。
4. UXPinのコードベースのデザインツールを使えば、UIデザイナーは高度なインタラクションやアニメーションで製品に命を吹き込むことができます。また、条件付きインタラクションを使用して最終製品の機能を模倣することで、ユーザビリティテストでより良い結果とフィードバックを得ることができます。

コミュニケーションとコラボレーションの向上

製品チーム、開発者、その他の関係者を招待し、ブラウザ上でプロトタイプをプレビューしてもらうことができます。UXPinのコメント機能を使ってフィードバックを残したり、UXデザイナーやUIデザイナーにタスクを割り当てたりすることができます。

UXPinを実際に試してみませんか？14日間の無料トライアルにお申し込みいただくと、ユーザーエクスペリエンスを向上させるために構築された、コードベースのコラボレーションデザインツールをご覧いただけます。

The post UXデザイン vs UIデザイン その違いを把握しよう appeared first on Studio by UXPin.

ヒューリスティック評価とは、一連のユーザビリティ原則に基づいてユーザーインターフェースをレビューすることです。

デザインプロセス全体を通してユーザビリティの問題を明らかにし、公開前に問題箇所を修正できることで、開発時間を大幅に節約することができます。

ヒューリスティック評価は、3～5人のユーザビリティの専門家がインターフェイスを検証し、ガイドラインに基づいて潜在的な問題を浮き彫りにしていきます。

この記事はNextUXのAndrew Coyleによって書かれました。NextUXはWebベースのビジュアルコミュニケーションツールを提供しており、チームがWebプロジェクトのフィードバックや方向性を示すのに役立ちます。

Jakob NielsenとRolf Molichは、90年代のヒューリスティック評価のパイオニアです。 ユーザー ・インターフェース・デザインのためのユーザビリティ・ヒューリスティックは、今日でも指針となっています。そのため、彼らの10のヒューリスティックについて学び、ヒューリスティック評価の方法について理解を深めることをお勧めします。

デザイナーとしての経験を通じて、私はウェブプロジェクトのレビューで使用するヒューリスティックスを明確にし、改善してきました。UIを評価する際には数え切れないほどのバリアブルやベストプラクティスを考慮しますが、ここで紹介する5つの原則は私自身がデザインを評価する方法をよく使用しています。

UXPinを使用して最終製品のように見える高度なプロトタイプをデザインしてみましょう。UXPinを使うことで、漠然としたアイデアを他のチームメンバーと共有可能で高機能なプロトタイプに簡単に変換することができます。14日間の無料トライアルはこちらまで。

ユーザーに自分の居場所を知らせる

 ユーザー はインターフェイスの中で自分がどこにいるのかを常に把握し、行きたい場所に移動する方法を理解する必要があります。アプリやウェブサイトでは、わかりやすいナビゲーションとサインマーカーを設置しましょう。また、デザインをインタラクティブにすることで、最終的に何が問題になるのかを徹底的にチェックします。

例：段階的なフローに進捗や状態を示す表示を追加し、説明的なヘッダーを用意して、どこにいるのか、次に何があるのかを伝える。

ルールの例外：ゲームのように、 ユーザー が現在地や次の段階を発見することで娯楽や価値を得られる場合。

ユーザーインターフェースに一貫性のあると美的なものにする

 ユーザーインターフェースを構成する要素やフローにおいて一貫性は不可欠です。

例： 一部のボタンに文語体を使用し、他のボタンにタイトル語体を使用しているデザインがあったとします。これではスタイル上の理由がない限り、一貫性が高いとは言えないでしょう。

見る人によってもちろん異なりますが、私は異なるデザインスタイルを使う場合、全体的なビジュアルに関しての魅力はあまりないかと思います。バランス、シンメトリー、ヒエラルキーなどの視覚的な原則をどのように使うかによって、普遍的なデザインを作ることができます。

例：不必要なボーダーやドロップシャドウなどの視覚的なノイズが多いインターフェイスだと、見た目の美しさを低下させてしまい、かえってユーザビリティを低下させてしまいます。

「読む」「待つ」「覚える」を減らす

残念なことに、デジタルの世界では人々の注意力は極めて低いものです。ユーザーが何かを読んだり、待ったり、記憶したりすることに頼ってはいけません。不必要なテキストは省き、スキャンしやすいようにデザインしましょう。

ユーザーが短期的な記憶に頼らなくてもいいように、できるだけ自動化しましょう。

例：特定のプロセスやインタラクションのロード時間が長いアプリの場合、待ち時間の負担を軽減するために、残り時間を示す楽しいロードアニメーションを追加することを検討します。

例:アプリの設定プロセスが複雑な場合、 ユーザー が説明書を読んだり要件を記憶したりすることを前提にしてはいけません。代わりに、長いセットアッププロセスを、簡潔で文脈に沿った情報を持つ短いステップに分割します。

エラーを防ぎ、行動を可逆的にする

アプリケーションに安全策を講じ、明確なコミュニケーションをとることで、エラーの可能性を減らすことができます。

例：

1. 不用意な削除を減らすために、重要なデータの削除をより手際よく行う。
2. 削除プロセスに特別なステップを追加し、ユーザーが自分のアクションの結果を確実に把握できるようにします。
3. 重要なアクションを元に戻す機能を追加する。

経験豊富な ユーザー に対応し、新しい ユーザー にも対応

複雑さや選択肢の多さで新しいユーザーを圧倒してはいけません。できるだけ早くユーザーが使いこなせるように、初めての使用感を提供すること。

強力なアプリケーションを使いやすくするために、経験豊富なユーザーの能力を制限してはいけません。頻繁に使用するユーザーが目的を達成し、ニーズを可能な限り早く解決できるように、オプション性とカスタマイズ性を提供する。

例：ユーザーインターフェースに表示されるアクションにキーボードショートカットを追加する。新しいユーザーはキーボードショートカットを知らなくても操作できますが、経験豊富なユーザーはショートカットを使うことでより早く操作できます。

ユーザビリティの原則を使用してプロダクトデザインを改善する

エンドツーエンドのデザインツールをお探しなら、ぜひUXPinを実際に使ってみてください。デザイン、イテレーション、プロトタイプの完成を10倍速くします。気になった方は、14日間の無料トライアルをこちらからお試しください。

The post ヒューリスティック評価 – 指針となる5つのユーザビリティ原則 appeared first on Studio by UXPin.

UXの世界は常に成長し、進化し続けていおり、特定のタスクや研究に対応するための新しいUXでの役割または部門が生まれています。 

UXアーキテクトとUXデザイナーは何が違うのか？また、デザインプロセスを改善するために、会社ではこの2つのポジションを満たす必要があるのでしょうか？

ここでは、UXアーキテクトの仕事内容や、UXデザイナーとUXアーキテクトの役割や責任の違い、重複する部分などをご紹介します。この記事の最後に、UXチームが効果的にコラボレーションするためにUXPinがどのように役立つのかを簡単に説明します。

UXPinは、UXデザイナーとUXアーキテクトがより良い製品体験をデザインするためのコラボレーションツールです。UXPinの14日間無料トライアルに今すぐお申し込みください！

UXアーキテクトとは？

ユーザー・エクスペリエンス・アーキテクトとは、基本的に、製品やデザインをハイレベルな視点で見ることができるUXのスペシャリストです。UXアーキテクトは、ユーザーや市場の綿密な調査に基づいて、構造や流れに関心を持ちます。

そのために、UXアーキテクトはリサーチチームと密接に連携したり、自らリサーチを行うこともあります。このリサーチによって、UXアーキテクトは、ユーザーが製品をどのように使用するかについて十分な情報を得た上で判断し、それに基づいて情報アーキテクチャを構成します。

UXアーキテクトの責任を簡単に説明します：

• 製品がユーザーのニーズを満たすようにする
• 情報が整理され、簡単にアクセスできるようにする
• ユーザビリティやアクセシビリティの問題を解決する

コンテンツの整理

UXアーキテクトは、コンテンツやアセットを作成するのではなく、ユーザーにとって最適なコンテンツを整理して配置します。この整理は3つのカテゴリーに分類されます：

• コンテンツインベントリ—製品に含まれるすべてのデジタルコンテンツのリスト。
• コンテンツのグループ化—製品のコンテンツを整理するための論理的な構造で、異なる情報の関係性やそれらがどのようにつながっているかを定義します。
• コンテンツ監査—製品のコンテンツを定期的に見直し、更新が必要なものや新しいコンテンツが必要かどうかを判断すること。

UXアーキテクトは、各ページのコンテンツを整理し、タイトル、小見出し、リンク、ナビゲーションをどこに追加するかを決定し、ユーザーが探しているものを見つけやすくする必要があります。

階層構造、サイトマップ、ナビゲーション

情報アーキテクチャとは、製品やウェブサイトの階層、サイトマップ、ナビゲーションなどを整理するものです。これらの重要な要素が、アプリやウェブサイトの使いやすさやアクセスのしやすさを決定します。

• サイトマップ – アプリやWebサイトの全てのページのこと。
• 階層 – ページのコンテンツを重要度の高い順に並べる方法。
• ナビゲーション – ユーザーがアプリやWebサイト内をどのように移動するかを示すもの。

社内でのワイヤーフレーム作成とローフィデリティプロトタイピング

UXアーキテクトは、社内のUXチームが製品やWebサイトをデザインする際の参考資料として、ワイヤーフレームやローフィデリティプロトタイプを作成します。

UXチームはこれらのモックアップをデザインのためだけに使用し、通常はユーザビリティスタディやステークホルダー間での共有には使用しません。

UXデザイナーとは？

UXデザイナーとは、デザインとリサーチの役割を包括する幅広い用語です。しかし、UXデザイナーとUXアーキテクトの比較では、デザイナーはユーザーインターフェースの設計を担当します。最終的に、UXデザイナーは製品を使いやすくします。

UXデザイナーは、UXアーキテクトが作成したワイヤーフレーム、プロトタイプ、アーキテクチャーの指示を受けて、それを実際の製品に仕上げます。また、UXデザイナーはUXリサーチャーと協力して、どのようなフォント、色、ボタン、その他のデザイン要素を使用するかを決定します。

ペルソナ開発

UXデザイナーは、初期のリサーチとユーザーペルソナの作成を担当します。大規模な組織では、専任のユーザーリサーチャーやチームがいるかもしれませんが、UXデザインの役割を果たしていることに変わりはありません。

ユーザーペルソナは、ユーザーの属性情報、動機、欲求、潜在的な反応などをUXデザイナーに伝え、これらのユーザーニーズに対応したユーザーインターフェースを設計します。

ワイヤーフレーム、モックアップ、プロトタイプ

UXデザイナーは、初期のユーザーリサーチとUXアーキテクトの情報アーキテクチャをもとに、製品のページやフローのワイヤーフレームやモックアップを作成します。

研究チームは、これらのハイフィデリティ・プロトタイプを使用してユーザビリティ・スタディを行い、ユーザーが最終製品をどのように操作するかを学びます。

ユーザーテスト

専門のリサーチチームを持たない企業では、UXデザイナーが必要なユーザビリティ・スタディを行います。UXデザインの重要な部分であるこのテストは、ユーザーが最終製品をどのように操作するかについて、UXデザイナーに貴重なフィードバックをもたらします。

UXデザイナーは、ユーザビリティスタディの結果をもとに、ユーザーエクスペリエンスを向上させるためにデザインを調整します。

UXアーキテクトとUXデザイナーの主な相違点

UXアーキテクトとUXデザイナーの最も大きな違いは、UXアーキテクトは大局的に見るのに対し、UXデザイナーは細部にこだわることです。

UXアーキテクトはナビゲーションやユーザーフローを重視し、UXデザイナーは各画面やページのユーザーインターフェースやインタラクションを作成します。

UXアーキテクトもUXデザイナーもリサーチを行いますが、UXアーキテクトはユーザーがどのような機能やコンテンツを必要としているかを考えます。一方、UXデザイナーは、ユーザーがこれらの要素をどのように操作するのかを知りたいと考えています。

UXアーキテクトとUXデザイナーの役割をまとめると、以下のようになります。

• UXアーキテクト – ユーザーは誰で、何を必要としているのか？
• UXデザイナー – ユーザーは誰で、そのニーズをどのように満たすのか？

UXアーキテクトとUXデザイナーの連携について

多くの企業、特に中小企業では、UXデザイナーがUXアーキテクトの役割を担っていることに注意する必要があります。

これらの役割が分かれている場合、UXデザイナーはインターフェイスとインタラクションに焦点を当てるため、しばしばUIデザイナー（ユーザーインターフェイスデザイナー）と呼ばれます。

UXアーキテクトは、デザインに焦点を当てるのではなく、情報アーキテクチャに特化したUXのスペシャリストです。

UXアーキテクトとUXデザイナーは、コンテンツに関して緊密に連携します。UXデザイナーはコンテンツの詳細に焦点を当て、UXアーキテクトはコンテンツをどのように構成するかを決定します。このことを正しく理解するためには、デザイナーとアーキテクトが密接に協力する必要があります。

UXアーキテクトとUXデザイナーの典型的なワークフロー

以下のワークフローは、UXアーキテクトとUXデザイナーの責任の分担を示す大まかな概要です。

1. プロジェクトは、建築家が物理的な構造物を設計するのと同じように、UXアーキテクトが市場やユーザーリサーチを分析し、プロジェクトに必要なものやコンテンツの構成を決定することから始まります。
2. UXアーキテクトは、UXデザイナーが構築プロセスを開始するための青写真（ワイヤーフレームとプロトタイプ）を作成します。
3. UXデザイナーは、ユーザーリサーチとUXアーキテクトの設計図を分析し、各ユーザーインターフェースのデザインを開始します。
4. UXデザイナーは、ステークホルダーやユーザビリティ・スタディのために、ワイヤーフレーム、モックアップ、ハイフィデリティ・プロトタイプを作成します。
5. ユーザビリティスタディでは、UXアーキテクトは、ユーザーがどのようにコンテンツにアクセスし、製品内を移動するのかを知りたいと考えています。UXデザイナーは、ユーザーが各画面上の要素やコンテンツをどのように操作するのかを確認します。
6. 製品が発売されると、UXアーキテクトの仕事は、正確で最新のコンテンツを確保することです。また、アクセシビリティの問題にも目を配り、適宜アップデートを提案します。UXデザイナーは、UXアーキテクトの提案を受け、インタラクションデータを分析して、各画面を最適化し、ユーザーに最適なサービスを提供します。

あなたの会社には、UXアーキテクトとUXデザイナーが必要ですか？

UX/UIデザイナーとUXアーキテクトの役割を分けることで、製品やWebサイトの品質と効率を向上させることができます。

小規模なプロジェクトや資金力のあるスタートアップでは、専任のUXアーキテクトに十分な仕事がないかもしれません。ここで重要なのは、UXデザイナーがUXアーキテクトの役割を果たすことができるということです。

プロジェクトの規模が大きくなると、情報アーキテクチャが複雑になり、管理に時間がかかるようになります。このような場合、プロジェクトの成功にはUXアーキテクトの存在が欠かせません。

代理店は一般的に少人数のチームで仕事をしていますが、クライアントのために複数のアプリやWebサイトを制作することも少なくありません。UXアーキテクトがいれば、UXデザイナーに必要な情報を伝え、すぐに構築を開始できるので、生産性の向上につながり、技術的な生産ラインを作ることができます。

企業は、UXアーキテクトが必要かどうかを判断するために、いくつかの質問をしてみましょう:

• UXデザイナーはレイアウトや情報アーキテクチャの構築にどのくらいの時間を費やしているのでしょうか？
• これらの作業は制作の遅延を引き起こすのでしょうか？
• ユーザビリティ調査において、ユーザーはナビゲーションの問題で苦労することが多いですか？
• 品質と効率の向上から得られる利益に比べて、専任のUXアーキテクトのコストはどのくらいですか？
• 御社の製品では、ユーザビリティやアクセシビリティの問題が頻繁に発生しますか？
• 誰かが製品のコンテンツを監視していますか？古いコンテンツや使用されていない製品機能を定期的に見つけていますか？

UXPinがUXチームの生産性を向上させ UXPinは、UXチームが共同でより良い製品を作るための強力なデザインツールです。UXアーキテクトはUXPinを使用してレイアウト、ワイヤーフレーム、ローファイプロトタイプを作成し、ガイダンスとコンテキストのためのコメントを付けることができます。

UXデザイナーは、これらの情報をもとに、美しい画面やインターフェースを設計し、モックアップを作成して関係者に提示したり、ユーザビリティ・スタディに使用したりすることができます。

14日間の無料トライアルを提供

14日間の無料トライアルでは、UXチームが効果的にコラボレーションし、顧客のためにより良い製品を作るためにUXPinがどのように役立つかをご覧いただけます。ぜひコードベースデザインの世界をご体験ください！

The post UXアーキテクト とUXデザイナー、その違いは？ appeared first on Studio by UXPin.

UXデザイナー にとって、ポートフォリオの作成は重要な第一歩です。ここではあなたの最高の作品を紹介し、あなたのスキルと個性を輝かせることができます。 採用担当者や潜在的なクライアントはあなたを採用する前に、あなたのポートフォリオサイトを見たいと思うでしょう。これはあなたがこの業界に入ったばかりの人でも、次のステップを探している先輩でも同じです。 ポートフォリオで紹介する作品は、最終的に雇用者やクライアントがあなたをどのように見ているか、そしてあなたを採用するかどうかを決定します。しかし、UXデザインに関しては、何を提示するかだけでなく、どのように提示するかが重要です。あなたのウェブサイトは、実はあなたの仕事の一部なのです。

1. Alex Lakas

Alex Lakasは、誰もが使う製品に10年以上携わってきた経験を持つUXデザイナーです。彼はLinkedInのフィードのリニューアルに参加し、Google Mapsの検索ページを今日のようなモダンなデザインにしました。 Lakasはサイトにアクセスした瞬間に、彼の経験を示す1行のバイオグラフィーによって、彼の能力を明らかにしています。 スクロールすると短いながらも正確な顧客リストが表示され、そのほとんどが有名企業です。これは単なる名前の羅列ではなく、経験豊富なデザイナーのポートフォリオの重要な部分を占めています。慣れ親しんだものに興味を持ってもらうことは、自分の作品を見てみようという気にさせる最良の方法です。 このサイトでは素晴らしい経歴を誇っていますが、それだけに頼ることはありません。いくつかの短い行の後に、UXポートフォリオの最も重要な部分であるケーススタディが表示されます。Lakasのケーススタディでは、彼の最も有名な作品の背景にある思考プロセスが明確な切り口で分かりやすく紹介されています。 Alex Lakasのポートフォリオサイトは彼のUXの仕事を反映した洗練されたデザインで、デザイナーが目指すべきものの好例となっています。

2. Olivia Truong

Olivia Truongはプロダクトデザイナーです。彼女のポートフォリオに足を踏み入れた瞬間、彼女はそのことを明確にしています。彼女のウェブサイトや作品に通じるシンプルなファッションです。 TruongのUXポートフォリオには、引用文や証明書はありません。4つのプロジェクトが、美しくミニマルなデザインで展示されているだけです。また、「現場でイベントを管理するにはどうしたらいいか」といった疑問を投げかける見せ方は、まさにUXデザイナーが持つべき思考プロセスだと思います。彼女は一般的な問題に言及しながら質問を投げかけ、ケーススタディで解決策を提示しています。今回の事例では、イベントのチケット販売を管理するために開発されたアプリ「Ticket Manager」を紹介しています。 このケーススタディは、UXのケーススタディがどうあるべきかを示す完璧な例となっています。彼女は解決しようとした問題を説明しリサーチを行い、多くの画像を使ってデザインプロセスを詳細に説明しています。 Olivia Truongのポートフォリオは、 UXデザイナー が提示すべきものを的確に示しています。このポートフォリオは彼女のプロセスを示すだけでなく、これから始めようとしているデザイナーに大きなインスピレーションを与えてくれます。もしあなたが1つでも完成したプロジェクトを持っているなら、この方法でプレゼンしてみてください。

3. Ed Chao

Ed Chaoは、Dropboxでの仕事で最もよく知られています。彼はDropboxのウェブインターフェイス、モバイルアプリ、そしてデスクトップアプリのUIをデザインしています。 Chao氏のポートフォリオで最も効果的なのはミニマリズムです。画像はほとんどなく、テキストもさらに少ないです。彼が提供するいくつかのケーススタディは短く、あまり詳細には触れられていません。しかし、彼のDropbox UXデザインの背景にある主要な機能やアイデアはしっかりと紹介されています。これはChao氏が何が重要で、何を削ればいいのかを理解していることを示しており、 UXデザイナー としての素晴らしい特徴です。 小さなことですが、Ed Chaoが重要視しているのは連絡先の情報です。彼のポートフォリオにアクセスすると、まず最初にEメール、LinkedIn、Twitterへのリンクが表示されます。これは、潜在的な顧客や採用担当者ができるだけ簡単に連絡を取れるようにするための、ポートフォリオウェブサイトの最も重要な機能の一つと言えるでしょう。

4. Jung Hoe

Jung Hoeは、Wix.comのPlaygroundでUX/UIデザイナーとして活躍しています。彼のポートフォリオサイトは、言語を素早く切り替える挨拶文ですぐに目を引きます。 しかし、訪問者の興味を引くのはユーモアです。美しくアニメーション化された黄色い塊が跳ね回る背景で、彼は自分自身を「天才的な赤ちゃん」が「完全に成長したデザインオタク」に変身したものとして紹介しています。このセリフに込められた個性が、すぐにつながりを生み出し、もっと知りたいという気持ちを起こさせます。 スクロールダウンしていくと、このポートフォリオが、才能と遊び心にあふれたUXデザイナーのものであることがわかります。訪問者としては、UI/UXの仕事と「楽しい仕事」の間でスイッチを切り替えることができます。どちらも、彼がデザインしたさまざまなアプリや製品を紹介しています。プロジェクトをクリックすると、彼のリサーチ、思考プロセス、最終的なデザインや破棄されたデザインなど、詳細なケーススタディが表示されます。 UXプロジェクトを見るにしても、Hoe氏の「Fun Work」を見るにしても、最終的には「Make somethin’ fun together！」という目を引くコール・トゥ・アクションにたどり着き、遊び心のある「Hit Me Up！」ボタンで彼のEメールにつながることになります。 Jung Hoeさんのポートフォリオは、デザイナーが作品と同じように自分の個性をアピールする方法の一例です。しかし、それでも完璧にプロフェッショナルなUXポートフォリオサイトを維持しています。

5. Jamie Choi

Jamie Choiのウェブサイトは、目的を達成するだけでなく、それ以上のものでもない、優れたUXポートフォリオのもう一つの例です。 Jamie Choi自身のシンプルなイラスト、秋のカラーパレット、そしてプロジェクトの紹介のシンプルさが、彼女のウェブサイトをスクロールする際の癒しや楽しみとなっています。 地元のパン屋さんのオンラインプラットフォームをデザインしたことなど、彼女が提供するケーススタディは、完璧に正確で詳細なものです。課題、リサーチ、分析、作業プロセス、そして最終的なデザインのアイデアまで、読者に分かりやすく説明しています。これらのケーススタディは、採用担当者やクライアントが見たいと思うような、非常に詳細な内容になっています。 崔さんのポートフォリオサイトを完成させるのは彼女のアバウトページです。このページはケーススタディと同様に、お客様に興味を持っていただくために必要な詳細が記載されていますが、決して威圧的ではありません。 Jamie ChoiのUXポートフォリオは、ポートフォリオサイトに必要な最も重要な2つのことを完璧にバランスさせています。彼女のプロとしての仕事のプロセスを深く知ることができると同時に、個人的な親近感も醸し出しています。

6. Liz Wells

ブルックリン在住のデザイナーであり、Squarespace社のシニアプロダクトデザイナーでもあるLiz Wells。彼女のUXポートフォリオサイトは、驚くほどカッコ良いものです。 ホームページには5つのケーススタディが表示され、ユニークなタイポグラフィだけが使われています。プロジェクトの上にカーソルを置くと画像が表示され、カーソルを動かすとその画像がページ全体に広がっていきます。 Wellsのポートフォリオで最も印象的なのは、彼女のケーススタディです。例えば、「Sidewalk Toronto」のケーススタディは、短いビデオにまとめられています。さらに詳しく知りたい方は下にスクロールすると、手書きのサイトマップのスケッチがあり、続いてプロジェクトの説明、UXの課題と解決策が紹介されています。このケーススタディには、彼女のプロセスに命を与えるビジュアルが添えられています。 Liz WellsのUXポートフォリオは、デザイナーとしての彼女の個性を完璧に表現しながら、何の不満も感じさせません。

7. Jeremy Stokes

Jeremy Stokesは、Duolingoのプロダクトデザイナーで、GoogleでUXデザインのインターンをしていたこともあります。しかし、彼の仕事で最も特別なのは、彼の情熱的なプロジェクトである「Cultivate」です。 Cultivateでは、アフリカ系アメリカ人のメンタルヘルスを理解するための新しい方法を模索しています。このプロジェクトは他のケーススタディのように、問題の背景やプラットフォームのコンセプトを構築・設計するプロセスを詳細に説明しています。 またStokesのポートフォリオで際立っているのは、彼のプレゼンテーション能力です。彼のAboutページには、彼の好きなビデオゲームやアニメなどのイメージや参考資料がたくさん掲載されています。しかし、彼は経歴だけでは満足しません。彼のポートフォリオには見事な履歴書が含まれており、ケーススタディと同様にポートフォリオの一部となっています。 Jeremy Stokes氏のUXポートフォリオは、プロのポートフォリオと個人のウェブサイトの間を行き来し、見事にそれを実現しています。訪問者に自分の個性を示すことは、仕事を検討してもらえるか、何十人ものUXデザイナーの中で忘れられてしまうかの違いを生み出します。

8. Siriveena Nandam

Siriveena Nandamは、分析的な要素を取り入れた UXデザイナー です。心理学のバックグラウンドを持つSiriveenaは、彼女のウェブサイトにあるように「人間の経験を向上させるデータ駆動型のソリューション」を作成しています。 彼女のポートフォリオを見ると、データが彼女の作品を貫く重要なパラメータであることがよくわかります。そのデザインは他の多くのUXポートフォリオと比べても、より技術的な雰囲気を持っています。 彼女のサイトをスクロールしていくと、いくつかのケーススタディが出てきます。これらはNandam氏のポートフォリオのハイライトであり、非常に詳細なものです。 超党派のニュースアグリゲーターである “Our National Conversation “は、Nandamが取り組む問題の典型的な例であり、ケーススタディにはケーススタディのあるべき姿がすべて盛り込まれています。ケーススタディには、ケーススタディに必要なものがすべて含まれています。簡単な要約の後、彼女のリサーチ、分析、ワイヤーフレーム、UIデザインに飛び込んでいきますが、これらはすべて、テクニカルプロダクトデザイナーに期待されるような詳細な内容です。 SiriveenaのUXポートフォリオは、深刻なテーマや技術的な情報を、デザイナーがいかに面白く表現できるかを示す刺激的なものです。遊び心のなさが訪問者の体験をまったく妨げず、競合他社との差別化に成功しています。

UXPinでUXポートフォリオをデザインする

UXポートフォリオをデザインしたい方は、14日間の無料トライアルに申し込んでみてはいかがでしょうか？体験するとすぐに、あなたのポートフォリオに加えるべきデザインツールがまた一つ増えたと実感するでしょう。

The post 一度見るべきの8つの例 – UXデザインポートフォリオ appeared first on Studio by UXPin.

見た目の良いサイトや機能性の高いサイトもありますが、その両方を兼ね備えた魔法のようなインタラクティブなサイトもあります。

これらのサイトは、より深いレベルで私たちを惹きつけ、私たちの注意を引きつけ、私たちの想像力を定着させてくれます。私たちをその世界に引き込み、一瞬でも自分の世界を忘れさせてくれるのです。

この記事では、優れたデザインを持つ16のインタラクティブなウェブサイトを分析します。よりよいデザイナーになるために、これらのサイトからどのように学べばよいかを説明します。

インタラクティブ性と楽しさは、互いに影響しあっています。心理学者のEliot Aronson氏は、著書『The Social Animal』の中で、人は何かの作業を行う際に、その行為を頭の中で正当化する傾向があると説明しています。このことは、ユーザーが少しでも時間をかけてサイトを楽しむという自己実現の予言につながりやすいです。

これは必ずしもインタラクションに限ったものではありません。ビデオや心に響く映像など、感情を揺さぶるコンテンツでも同じ効果を得ることができます。この場合、コンテンツを見たり振り返ったりすることが、インタラクションでのユーザーの役割となります。このような体験は、映画を見たことがある人なら誰でも体験したことがあるように、没入感があり、同じようなつながりを形成することができます。

今年の新たなデザイントレンドにも注目していきましょう。

1. Nike Reactor

出典: Nike

まずはおなじみのNikeからご紹介します。このインタラクティブなウェブサイトでは、楽しくてシームレスなアニメーションと人目を引くビジュアルを使って、自分のReactランニングシューズを作ることができます。しかし、厳密な意味での靴作りではありません。ステッチや生地を選ぶ代わりに、シャボン玉、ストレスボール、スプリングなどを使うことができます。このような楽しいビジュアルを使用することで、ユーザーのエンゲージメントを高め、NikeのReactフットウェアが特別に快適であることをアピールしています。

出典: Nike

2. AirBnB Online Experiences

出典: AirBnB Online Experiences

人気の旅行サイトは、多くのリアルなインタラクションを伴わないインタラクティビティの完璧な例と言えるでしょう。AirBnBは、旅先で体験する日常の瞬間に潜む魔法を、注目を集めるさまざまな写真を通して描き出しています。 しかし、AirBnBのインタラクティブなウェブサイトは、従来の旅行サイトを超えて、他の人が主催するユニークなオンライン・インタラクションを提供しています。エキゾチックな場所へのツアーに参加したり、他のシェフから料理を習ったり、あるいはエスケープルームを解決したりと、これらのオンライン体験ができます。

3.  An Interesting Day

出典: An Interesting Day

このインタラクティブなウェブサイトは、最先端のグラフィックでなくても魅力的なデザインを作ることができることを示しています。「An Interesting Day」は、デジタルプロダクトスタジオ「Bakken & Bæck」がアムステルダムで開催した2018年のカンファレンスを記録したものです。すべてのアニメーションは手描きでシンプルに作られており、手作り感のあるサイトに仕上がっています。

出典: An Interesting Day

Webサイト全体が1つのページで構成されているため、ユーザーが必要とする情報をナビゲーションなしで得ることができます。

4. Chanel: Spring-Summer 2021 Haute Couture Show

出典: Chanel: Spring-Summer 2021 Haute Couture Show

シャネルは、雰囲気を作り出す方法をよく知っています。このサイトでは、動画、静止画、詩的な文章で書かれた商品説明が、インタラクティブなスクロールナビゲーションと一体となって、ブランドが誇るエレガンスとファッション性に満ちた環境にユーザーを没入させています。

5. Space Needle

出典: Space Needle

一般的にスクロールは、没入感のあるインタラクションのための優れた戦略です。シアトルを中心としたスペースニードルのサイトでは、美しいビジュアルと、スクロールで動くアニメーションのボックスでコンテンツを表示しています。ユーザーは通常、サイトを上方向にスクロールして詳細を確認することに慣れていませんが、このナビゲーションパターンは、画面上の旅にマッチしているため、この特殊な状況でも機能しています。

6. APPS

出典: APPS

APPSは、このリストの中で最もインタラクティブなサイトのひとつです。まず、サイダーの製造工程をガイドツアーで紹介します。数回ボタンを押すと、旅の続きをするように促されます。生き生きとした楽しいアニメーションと、ユーザーを飽きさせないインタラクティブな要素が特徴です。

7. Aquatic Macroinvertebrate Collection

出典: Aquatic Macroinvertebrate Collection

また、教育施設では、学習者の記憶に残りやすく、楽しみながら学習できるという価値を理解しています。「Aquatic Macroinvertebrate Collection」では、あまり知られていない生物を、体の各部分を拡大・縮小して説明文を読みながら観察することができます。それ自体は画期的なものではありませんが、何か新しいものを探求しているような不思議な気持ちにさせてくれます。インタラクティブなウェブサイトを作る際には、最高のデザインではなく、適切なデザインであることを忘れないでください。

8. The Happy Forecast

 出典: The Happy Forecast

私たちが好きなインタラクティブなウェブサイトの要素は、色の変化につながるホバーの状態や、インタラクティブ性を示すいくつかの動きです。美しい音楽とアニメーションは、感情的に没入し、魅力的な体験を生み出します。

9. Make Your Money Matter

 出典: Make Your Money Matter

私たちが好きなインタラクティブなウェブサイトの要素は、ストーリーを語り、ユーザーを教育的な旅へと誘うスクロール型のインタラクションです。スクロールするたびに、ストーリーの新しい部分が見えてきます。見事なイラストとアニメーションは、落ち着いたアースカラーのパレットで表現されています。

10. Mammut

 出典: Mammut 

山に登らずに山を登る。私たちが気に入っているインタラクティブなウェブサイトの要素は、ホームページ上で回転する360度のエベレスト山のアニメーションです。これは、奥行きを出すことでユーザーを引きつけます。また、スクロールすることで、インタラクティブでカスタマイズ可能な登山体験をユーザーに提供しています。

11. Hello Monday

 出典: Hello Monday

私たちのお気に入りのインタラクティブ要素は、ユーザーがメニューバーをクリックしたときに起こる水平方向のパララックス効果です。カーソルを置くとメニュー項目に動きが出るものや、2Dイラストのアニメーションなど、意外性のある要素が注目を集めています。

12. Ocean School

 出典: Ocean School

私たちが気に入っているインタラクティブなウェブサイトの要素には、ユーザーを海の奥深くへと誘うスクロール・インタラクションがあります。青と白のカラーパレットと3Dアニメーションは、アニメーションと色が変化するホバーの状態とともに、没入感のある体験を生み出しています。

13. Cyclemon

 出典: Cyclemon

私たちが気に入っているインタラクティブなウェブサイトの要素には、スクロールするインタラクションに垂直方向のパララックス効果があり、自転車のタイプによってユーザーが誰であるかを教えてくれます。大胆で楽しいカラーパレットは、それぞれのバイクタイプに合わせてカスタマイズされています。

14. Fontsmith

 出典: Fontsmith

私たちが気に入っているインタラクティブなウェブサイトの要素には、色や文字の大きさが変わる楽しいホバー状態があります。大胆でファンキーなカラーパレットは、最初からユーザーの注意を引きつけます。

15. Akita

 出典: Akita

イケアのお気に入りのインタラクティブなウェブサイト要素には、従来のトップダウンの方向性を覆すスクロールインタラクションがあり、インターネット上のデータの動きをグラフ化しています。また、ホバーするとポップアップで詳細情報が表示されます。

16. Pete Nottage

 出典: Pete Nottage

この声優さんのインタラクティブなウェブサイトは、ホバー・ステートや楽しいアニメーションを駆使して、印象に残るものになっています。

これらのインタラクティブなウェブサイトから学んだこと

私たちがこれらのインタラクティブなウェブサイトから見た最も一般的なインタラクティブ機能は、ホバー・ステートです。その理由は？幅広い業界で簡単に導入でき、気が散ることもありません。Ocean Schoolのようにシンプルなホバーやステートを試すこともできますし、Pete Nottageのようにアニメーションを使ったものにすることもできます。

スクロールインタラクションも、実装が簡単で、アニメーションを使わずに動きを表現できるため、人気のある要素です。Cyclemonのようにパララックス効果を利用したり、Akitaのようにストーリー性を持たせることもできます。ユーザーエクスペリエンスを向上させるために、これらのインタラクティブなウェブサイトでは、インタラクティブな機能やマイクロインタラクション以外にも様々な工夫がなされています。「Make Your Money Matter」のように楽しい配色を使ったり、「Fontsmith」のように感情を呼び起こして没入感を演出したりしている。また、MammutやHappy Forecastで使われているビデオやアニメーションは、ユーザーの注意を引く非常に深い映画のような体験を作り出すことができる。

インタラクションを促進し、エンゲージメントを高めるために、優れたインタラクティブサイトでは、一貫したデザインと、ストーリーテリングと優れたコピーライティングの組み合わせを用いて、好奇心を刺激し、エンゲージメントを獲得していました。インタラクティブな要素は、ただ目的のために使うべきではなく、その役割はユーザーの体験を高め、メッセージを伝えることにあります。

UXPinは、世界中の優秀なデザイナーが使用しているプラットフォームです。UX/UIプロジェクト全体をひとつのツールで管理することができます。デザインプロセスをシンプルにすることができます。UXPinを今すぐ完全なリスクフリーでお試しください。

The post 魅力的でインタラクティブなウェブサイト appeared first on Studio by UXPin.

UXデザインは、人間の心理を理解するプロセスです。 ユーザー中心設計やユーザーエクスペリエンスなどの用語がデザイン思考プロセスを支配するのはそのためです。

UXデザイン心理学とは、問題を解決しようとしている人々の行動を理解し、それらの人間の行動に合わせてユーザーエクスペリエンスを設計することです。

UXPinは、UX心理学とゲシュタルト視覚の原則に従ったすぐに使用できるプロトタイプの例もありますので、ぜひ実際にお試しください。

UXPinの14日間の無料トライアルにサインアップして、UXPinの革新的なデザインエディターと高度なプロトタイピング機能を探索し、顧客のユーザーエクスペリエンスを向上させましょう。

UXデザインにおける認知心理学とは？

認知心理学は、注意と知覚、記憶、問題解決、創造的思考など、人間の精神的プロセスを研究します。これは、ユーザーエクスペリエンスデザインの基盤となります。

優れたUXデザイナーは、これらの人間の精神的プロセスと、認知心理学が精神的障壁を克服して改善するのにどのように役立つかを理解しています。

• 使いやすさ
• ナビゲーション
• 読みやすさ
• アクセシビリティ

人間の脳は、デジタル製品を含む周囲の環境を理解するために、パターンや認識可能なオブジェクトを絶えず検索しています。

認知的負荷とUXデザイン

認知的負荷は、新しい情報を処理して学習するために必要な精神的な努力、つまり人間の処理能力です。

優れたUXデザインは、ユーザーインターフェースを最適化し、コンテンツを提示するための認知的負荷の限界を理解しているため、ユーザーは情報をすばやく吸収して処理できます。

デジタル製品の情報を吸収して処理するために必要な処理能力がユーザーの認知的負荷を超える場合、ユーザーはそれを使い続ける可能性は低くなります。

3種類の認知的負荷

3種類の認知的負荷と、それらがUXデザインにどのように影響するかを次に示します。

1. 本質的な認知的負荷は、タスクの固有の難しさに由来します。 ユーザーは、目前のタスクに集中しながら、どのように情報を吸収しますか？ 良い例はオンラインショッピングのチェックアウトです。 デザイナーはすべてのナビゲーションを削除し、ユーザーが購入を完了するために必要なコンテンツのみを提供します。 設計者は、固有の認知的負荷を軽減することにより、ユーザーが目前のタスクを完了する可能性を高めます。
2. 外部の認知的負荷は、脳がタスクの本質的でない問題（フォント、マイクロインタラクション、命令など）を処理する方法です。 フォントを読んだり、指示を理解したりするのに苦労しているユーザーは、UXでの無関係な認知的負荷を超える例です。
3. ゲルマンの認知的負荷は、スキーマの処理、構築、および自動化です。 ユーザーが情報のカテゴリと関係を整理する方法。 何か新しいことを学ぶとき、人間の脳はスキーマを構築するためにコンテンツのなじみを探します。

ゲシュタルトの原則とビジュアルデザイン

ゲシュタルトの原則は、人間の脳が視覚を認識して見慣れた構造を作成する方法を説明しています。

ゲシュタルト心理学の有名な例は、19世紀後半のイギリスの漫画家による若い女性または老婆のイラストです。 この「ゲシュタルトスイッチ」は、心がキャンバス上の要素をどのように解釈するか、そしてこれがビジュアルデザインに与える影響についての魅力的な洞察を提供します。

以下では、ビジュアルデザインに適用される6つの主要なゲシュタルト原則を紹介します。

1.フィギュアグラウンド -脳が前景と背景をどのように区別するか。 UXデザイナーは、認知的負荷を最小限に抑えるために、前景と背景を明確に区別する必要があります。

2. 近接の法則 – グループ化されたオブジェクトは、離れた場所にあるオブジェクトよりも関連性が高いように見えます。 複数のカテゴリの情報がある場合、これらのカテゴリ間にスペースを作成すると、ユーザーはコンテンツをより速く区別できるようになります。

3. 類似性の法則 – 類似のオブジェクトは関連しているように見えます。たとえば、類似の形状、色、陰影、サイズ、およびその他の品質のオブジェクトです。

4. 閉鎖の法則 – 不足している情報を埋めることによって完全な形を見る脳の能力。

5. 連続の法則 – 人間の目は、デザインのパス、線、または曲線を自然にたどります。 近接性と同様に、継続性はユーザーが関連コンテンツを識別するのに役立ちます。

6. 対称の法則 – オブジェクトを偶数の対称部分に分割するという脳の好み。

すべてのデザイナーが知っておくべき6つのUXデザイン心理学の原則

1.フォンレストルフ効果 (Von Restorff effect)

フォンレストルフ効果は、オブジェクトのグループ内で、異なるオブジェクトが目立つか、記憶される可能性が最も高いことを予測します。 ユーザーに明確さと方向性を提供するのに役立つため、UXデザイン心理学の最も重要な原則の1つです。

UXデザイナーは、CTAを拡大したり、色を変えたりするなど、目立つ召喚ボタンを強調しようとするたびにフォンレストルフ効果を適用します。

フォンレストルフ効果は、ユーザーインターフェイスの他の部分でも役立ちます。 たとえば、一連のタブがある場合、別の色にすることで、ユーザーが現在どのタブを使用しているかを示すことができます。 ナビゲーションの現在のページまたはユーザーフローの現在のステップを強調表示する場合も同様です。

2.ヒックの法則 (Hick’s Law)

ヒックの法則は、あなたが誰かに与える選択肢が多ければ多いほど、彼らが決定を下すのに時間がかかると推定しています。なぜなら、あなたは彼らの認知的負荷を増やしているからです。

ヒックの法則は、eコマースデザインの重要な心理的原則です。 まず、買い物客の選択肢が多すぎると、何を購入するかを決める前に何度も訪問する可能性があります。 経験は圧倒的すぎるかもしれません、つまり彼らは何も購入しないというにつながります！

UXデザイナーは、チェックアウトプロセス中にヒックの法則にも注意を払う必要があります。 販売を完了するために必要な手順、およびフォーム入力フィールドの数は、ストアのコンバージョン率に深刻な影響を与える可能性があります。

UXチームは、タスクまたは目標を完了するための選択肢の数が最も少ないことを確認するために、設計を継続的に評価する必要があります。

3. 最小努力の原則 (The Principle of Least Effort)

最小努力の原則は、ユーザーが最小量のエネルギーを必要とする選択または行動をとることを示しています。 製品が複雑すぎる場合、または学習曲線が急な場合、ユーザーはそれを使用する可能性が低くなります。

レイアウトやユーザーインターフェイスを変更する場合も、最小努力の原則が重要です。 ユーザーが製品を操作する方法を変更すると、新しいプロセスを学ぶのが面倒になる可能性があります。これを何度も行うと、ユーザーを失う可能性があります。

最小努力の原則は、設計者が問題を解決するために一度検討することではありません。 これは、ユーザーのテストと反復の継続的なプロセスであり、継続的に改善点を探します。

4. 系列位置効果 (The Serial Positioning Effect)

系列位置効果は、リスト、文、またはコンテンツの最初（主効果）と最後（最新効果）の項目を覚えている可能性が最も高いことを示しています。

心理学者は、人々が最も意味のある情報が最初と最後に現れることを期待しているため、系列位置効果が発生するのではないかと疑っています。

UXデザイナーは、系列位置効果を使用して、より優れたユーザーエクスペリエンスを作成できます。 たとえば、最も重要または最も使用されるナビゲーションリンクを最初と最後に配置します。

系列位置効果は、重要な情報を上下に表示することにより、画面レイアウトにも効果的です。

5. 永続的な習慣の原則 (The Principle of Perpetual Habit)

永続的な習慣の原則は、人々が身近な習慣や習慣に依存していると述べています。 新しい車を設計する場合、クリーンでミニマリストなダッシュが必要なため、ハンドルをトランクに入れません。

創造性と革新性を発揮できる分野はありますが、決して変更してはならない普遍的な基準がいくつかあります。

たとえば、ユーザーはヘッダーとフッターにナビゲーションリンクを見つけることを期待しています。 ハンバーガーアイコンは、モバイルユーザー向けのナビゲーションの場所を示しています。 この構造を変更すると、ユーザーは基本的なナビゲーションに問題を抱え、ユーザーエクスペリエンスが低下します。

優れた製品設計は、モバイルデバイスからデスクトップ、iOSからAndroidまで、デバイス間でのさまざまなユーザーの習慣を認識し、ユーザーのニーズに合わせて製品を調整することです。

6. 感情的な伝染の原則 (The Principle of Emotional Contagion)

感情的な伝染またはカメレオン効果の原則は、人間が動物やアニメーションを含む他の人の感情や行動を模倣または共感することを示しています。

UXデザイナーは、感情的な伝染の原則を使用して、魅力的で没入型のユーザーエクスペリエンスを作成できます。

良い例は、DuolingoがLanguage Birdを使用して、ユーザーにアプリに戻るように促す方法です。 ユーザーがレッスンを欠席すると、LanguageBirdの表情は泣いているように示されたり、クラスを終了すると明るい表情となるような反応を示します。

UXデザイナーには、ユーザーに害のある感情伝染の原理を乱用しないようにする必要があります。

まとめ

UX心理学を理解することで、ユーザーにとってより良い製品を構築できます。 デザイン心理学は、製品とインタラクションデザインの背後にある理由を理解するのにも役立ちます。

ユーザーエクスペリエンスを向上させるために、人間の行動から多くのUXデザイン原則を導き出します。 しかし、これらは強力な心理的ツールであり、善と同じくらい害を及ぼす可能性があります。

良い例は、ソーシャルメディア企業がデザイン心理学を使用して人々を操作し、利益の名の下にユーザーの注意を競う方法です。

デザイン心理学をよく理解して、ユーザビリティテストでのこれらの原則を認識することを学ぶことができます。 あなたが観察する非言語的な手がかりがあるかもしれません、それはより充実したフィードバックを収集するうえでユーザーと接することができます。

UXPinによるユーザビリティテストの改善

意味のあるフィードバックを得るもう1つの方法は、最終製品のように見え、機能する忠実度の高いプロトタイプを作成することです。 UXPinを使用すると、洗練されていながら直感的なオールインワンプロトタイピングソフトウェアを使用して、アイデアをエクスペリエンスに変えることができます。

この記事からUXの原則を取り入れて、UXPinの次のプロジェクトに適用してください。 14日間の無料トライアルにサインアップして、今日からより良いCXデザインを始めましょう！

The post 優れたUXデザインを生み出す心理的トリック appeared first on Studio by UXPin.

 UXデザインプロセス とは、製品のUX（ユーザーエクスペリエンス）をつくる上で必要な体系的、反復的、構造化された一連の行動のことです。チームが繰り返しやすいプロトコルに従い、組織の品質基準を満たした製品を提供することができます。

デベロッパーがアプリ構築で使用するのと同じコンポーネントを用いてプロトタイプを作成することで、デザインプロセスをスピードアップすることができます。厳しい納期にも対応可能で高品質な製品をリリースしましょう。こちらからUXPin Mergeについてぜひご覧ください。

UXデザインとは

UXデザイン（ユーザーエクスペリエンス・デザイン）とは、ユーザーがデジタル製品上で抱える課題を解決するためのデザイン手法です。この人間中心のデザインアプローチにより、デザインチームは単なる思い込みではなく、ユーザーのニーズに基づいた正確な意思決定を行うことができるのです。

ここで重要なのは共感で、人間中心のアプローチの核心でもあります。UXデザイナーは、ユーザーがデジタル製品を使って達成したいことや、その過程で遭遇する可能性のあるペインポイントを理解しないといけません。

UXデザインプロセスとは

UXデザインプロセスは、UXデザインチームがプロジェクトを完成させるために使用する、反復的なステップバイステップの方法論であり、デザイン思考プロセスから派生したものです。デザイン思考プロセス同様に、UXデザイナーはユーザーの目線に立ち、ビジネス内容や背景などについて把握しながら問題のスコープ（範囲）を確定することに時間をかけます。

UXデザインプロセス と デザイン思考プロセス

デザイン思考プロセスは、人間の問題に対するユーザー中心のソリューションを開発するための５段階のプロセスです。一方、UXデザインプロセスはUXプロジェクトを実現するためにデザイン思考を取り入れた、多くの段階からなるエンドツーエンドの手法です。

UXデザインプロセスは、デザイン思考の原則をベースにしていますが、その手順や方法は微妙に異なります。

 UXデザインプロセス の重要性

以下に、企業がUXデザインプロセスを標準化する理由を挙げてみましょう：

• プロジェクトが品質と一貫性の基準を満たしていることを保証する
• デザイナーが確実に偏見や思い込みにとらわれずにソリューションをデザインできるようにする
• デザイナーが多くのアイデアをテストして反復することで、最善策を見つけられるようにする
• チームや部門間の連携を促進する
• 決められたプロトコルに従うことで、手戻りのリスクを下げる
• ステークホルダーがプロジェクトの進捗状況を把握できるようにする
• 隠れたリスクと機会を特定する

UXデザインプロセスでの ７ステップ

典型的な UXデザインプロセスには、「製品の目標決定」から「デザインハンドオフ」、そして「すべてが意図したとおりに機能するかの確認」までの、７つのステップがあります。

ステップ１：プロジェクトと範囲の確定

UXデザインプロセスの最初のステップでは、チームメンバーと（通常は以下のような部署からの代表者で構成されるような）複数の部署のステークホルダーとプロジェクトの目標と範囲を決めます：

• ビジネス – プロジェクトのビジネス要件と目標を説明する
• デザイン – 製品に期待されることのデザインや管理の前に、すべきことを伝える
• 製品 – コンテクストを共有し、デザインに必要なタイムラインとリソースの計画を支援する
• 技術 – UX デザインの実現可能性と技術的制約を確定する

この初期のデザイン段階では、新製品または新機能が解決すべき問題を特定することを目的としています。製品チームは、プロジェクトの範囲、計画、成果物、納期の概要の説明もします。

ステップ２：リサーチの実施

次に、デザイナーはあり得るソリューションを見つけるために問題についてのリサーチをしますが、この段階では、UXデザイナーは以下のようなリサーチを行います：

• ユーザーリサーチ：ターゲットとするユーザーを調査し、どのような人物で、何が必要で、どのような状況で活動しているかを理解する。この調査の結果、ユーザーペルソナ、ジャーニーマップなどである。
• 市場調査：市場を分析し、市場のセグメンテーションと製品の差別化を決定する。
• 競合調査： 競合他社が同様の問題をどのように解決しているかを理解し、機会を特定するための競合分析。
• 製品調査： 既存製品のインサイトやアナリティクスを分析して、ユーザーの行動を理解する。

ステップ３：ソリューションの大まかな下書きを作成する

ユーザー、市場、競争環境を明確に理解することで、デザイナーはソリューションがどのようなものになるかの大まかな下書きを作成できます。これは「アイデア出し段階」とよく呼ばれ、デザイナーは、アイデア出しの初期段階で紙とペンを使い、多くのアイデアを手短に反復します。

その低忠実度テクニックには、以下のようなものがあります：

• スケッチ：UI（ユーザーインターフェース）の手描きスケッチ
• ペーパープロトタイプ： プロトタイプの紙版
• ワイヤーフレーム： 基本的な線と形を特徴とするペーパープロトタイプのデジタル版
• 忠実度の低いプロトタイプ： ユーザーフローと情報アーキテクチャをテストするのにワイヤーフレームを使うデジタルプロトタイプ

チームはまた、特定の問題を迅速に解決するためにデザインスプリントを使う場合もあります。

ステップ４：忠実度の高いモックアップとプロトタイプをデザインする

次に、UIデザインチームはワイヤーフレームをモックアップに変換し、最終製品のような外観と機能を備えた忠実度の高いプロトタイプを構築します。その際、会社にデザインシステムがある場合、デザイナーは コンポーネントライブラリを使用してインタラクティブなプロトタイプを作成します。

ステップ５：ユーザビリティテストの実施

忠実度の高いプロトタイプの主な目的は、ユーザビリティテストです。UXデザイナーは、以下のプロトタイプを実際のユーザーでテストします：

• アイデアの検証
• ユーザビリティの問題の特定
• アクセシビリティのテスト

なお、ステップ２から５は反復可能であり、テスト結果を用いて、デザイナーはステージ２や３に戻り、有用性、持続可能性、実現可能性の基準を満たすソリューションが見つかるまで、アイデアを反復します。

ユーザーテストは第５段階ですが、デザインチームはアイデアや仮説を検証すべく、UXデザインプロセスを通して複数のテストを実施することに注意しておくことが重要です。そしてそのテストには、チームメンバーとの内部テストや、ステークホルダーとアイデアやプロトタイプを共有してフィードバックを得ることも含まれます。

ステップ６：デザインハンドオフの実行

UXデザインプロセスも終盤に近づくと、『デザインハンドオフ』をするときがきます。デザインチームは、エンジニアリングのプロセスを始めるために、プロトタイプとドキュメントを開発チームに引き渡します。

デザインハンドオフは UX のプロセスの終盤に近いですが、デザイナーとエンジニアは、デザインから開発への移行を効率化すると同時に、デザインが確実に技術的制約を満たすようにすべく、アイデア出しの段階から連携を始めます。そして彼らの連携は、コミュニケーションをしやすくするような様々なツールによって促進されます。

デザイナーとデベロッパーの連携をダメにする５つの間違いについてもぜひお読みください。

ステップ７：製品の発売

UXデザインのプロセスの最終段階は、発売と新リリースの明確な検査であり、新しいリリースがプロジェクトのビジネス目標、ユーザー体験、アクセシビリティの要件を満たしていることを確認する時です。

優れた UX デザインプロセスのベストプラクティス

UXデザインのプロセスは、どの組織、プロジェクト、チームにとって全て同じというわけではないかもしれませんが、以下のようにプロセスを効率化するためにデザイナーが従うことができるベストプラクティスがあります。

ユーザー中心思考を適用する

デザイナーは、エンドユーザーをデザイン決定の中心に据えて、デザインが確実にユーザーのニーズを満たすようにしないといけません。この人間中心の考え方により、無関係なUIコンポーネントや機能のコストは削減され、ユーザーは本当に欲しいと思える製品を手に入れることができます。

共感を実践する

ユーザー中心の考え方を維持する方法の１つに「ユーザーへの共感」があります。デザイナーが UXデザインプロセスを進めるにつれて「ユーザー中心」から、「見た目は素晴らしいが特定のユーザーニーズを満たしていない機能のデザイン」に流れてしまうことがあります。

そのため、UXデザインプロセスを通じて共感を実践することで、デザイナーはユーザーのペインポイントの解決に集中し続けることができるのです。

デザインシステムを構築する

デザインシステムは、組織全体の一貫性と整合性を高めながら、市場投入までの時間を大幅に短縮することができます。デザインシステムをゼロから構築する余裕がない場合は、MUIや Bootstrapのようなテーマ設定可能なオープンソースのコンポーネントライブラリを使用することを検討しましょう。

ちなみに UXPinには、デザインチームがモックアップやプロトタイプを簡単にと作成できるように、Material Design UI、Bootstrap、iOS、Foundationなどのデザインライブラリが組み込まれています。

デザイナーが開発コンポーネントの完全に機能するプロトタイプを構築できるように UXPinのエディターとコンポーネントライブラリを統合する機能である UXPin Merge を使うと、プロトタイプのクオリティは高くなります。

デベロッパーとの連絡と連携

UXデザインプロセスを成功させるには、コミュニケーションと連携は必須であり、デザイナーは他のデザインチームと連携しながら、エンジニア、ビジネスマネージャー、プロダクトチーム、ステークホルダーとオープンなコミュニケーションを取らないといけません。

そこで、DesignOpsにより、円滑なコミュニケーションや連携が促進されると同時に、時間を要するその他の運用・管理タスクまでもが効率化されます。

UXPinによる UXデザインプロセス の強化

UXプロセスがうまくいくかは、デザインチームが速やかに変更を加えて反復できるツールにかかっています。UXPin はエンドツーエンドのデザインソリューションであり、UXデザインプロセスの各段階にも対応できる機能をお使いいただけます。

完全にインタラクティブなプロトタイプ

デザイナーは、UXPin にあるデザインライブラリのいずれかを使うか、デベロッパーのコンポーネントライブラリをインポートし、すぐにプロトタイピングを開始することができます。UXPin はコードベースのため、プロトタイプは画像ベースのデザインツールよりも忠実度が高く、より多くの機能が備わっています。

質の高いユーザーテスト

コードベースのプロトタイプを使うことで、UXデザイナーは正確でより包括的なテストを実施できます。テストの質が上がることで、最終製品で起きるかもしれないエラーやユーザビリティー上での問題が少なくなります。

洞察に満ちたステークホルダーのフィードバック

UXデザインのプロセスにおいて、ステークホルダーからのフィードバックは非常に重要ですが、プロトタイプが直感的でなければ、ステークホルダーは購買意欲や資金調達に影響を与える可能性のあるデザインコンセプトを理解するのが大変になります。

UXPinを使っているかどうかにかかわらず、プロトタイプには、他の一般的なデザインツールよりもはるかに高い忠実度とインタラクティブ性があります。その結果、デザイナーはステークホルダーから実用的なフィードバックを得ることができるのです。

UX デザインのプロセスのレベルを上げよう

UXPin Mergeにより、デザイナーはテスト中により良い結果を得ることができ、同時にデザインのハンドオフを効率化できるため、市場投入までの時間とコストが削減されます。

ゼロからデザインする代わりに、コンポーネントをドラッグ＆ドロップして、最終製品のように見えて操作性のある、完全に機能するコードベースのプロトタイプを構築してみませんか。 14日間の無料トライアルでぜひコードベースデザインツールの効率性を実感ください。

The post UXデザインプロセス – ７ステップ【実用ガイド】 appeared first on Studio by UXPin.