注目すべきUXデザインパターン

UXデザイナーの目標は顧客に「シームレスでポジティブな経験を届けること」です。UXデザインパターンは、デザインチームがユーザビリティの問題を解決し、親しみやすさを生み出すために使用する普遍的な構成要素です。

私たちの日常の中でも見慣れたデザインパターンがいくつもあります。例えば、日常生活で目にする道路は実線や縞模様で車線を区切っています。道路をナビゲートするために、信号機や道路標識があります。もし、国ごとにシステムが異なっていたら運転する人は行く国々で新しい運転パターンを学ばなければならず実用的ではありません。これはUXデザインパターンも同じことが言えます。UXデザインパターンは、デジタル製品やウェブページをユーザーにナビゲートするために「親しみやすさ」を与えます。 UXPinでは一般的なUXパターンを含むデザインシステムライブラリがいくつか組み込まれているので、デザイナーは忠実度の高いプロトタイプをすぐに取り組み作ることができます。14日間の無料トライアルに登録して、UXPinを使ったデザインのパワーとその多様性をぜひご体験ください。

UXデザインパターンとは？

UXデザインパターンは、ユーザーがインターフェースを構築するための構成要素です。デザイナーは、ユーザビリティに関する共通の問題を解決するために、再利用可能なコンポーネントとしてUXデザインパターンを使用します。例えば、私たちが日常的に目にするデザインパターンに「ブレッドクラム」があります。ブレッドクラムは、ユーザーが今いるページと、ホームページに戻るための経路を示すものです。

UXデザインパターンがユーザーエクスペリエンスを向上させる理由

デザインパターンは、デザイナーにユーザーインターフェースをより速く作成するためのビルディングブロックを提供するだけでなく、ユーザーエクスペリエンスを向上させるためのものでもあります。

UXデザインパターンは、通常、ユーザーにとって馴染みのある普遍的なデザイン基準に沿っているため、新しい製品やウェブサイトの学習やナビゲートに必要な時間などの認知的負荷を軽減することができます。

また、「How We Decide」の著者であるJonah Lehrerは「人間は見慣れたパターンを認識すると、モチベーション・報酬・記憶・注意に関係する化学物質であるドーパミンが放出される」と述べています。UXデザインにおいて、このドーパミンはUXのパターンが期待通りに機能することでより多く放出されるのです。

デザイナーにとって慣れ親しんだUIデザインパターンのような効果的なUXデザイン心理学のテクニックを使ってユーザー体験を向上することができ、製品のインタラクションをより面白みがあるものにすることができるのです。

無料電子書籍の参考資料：UIでより良いUXをデザインする。DribbbleやQuora、MailChimp、Mediumなどがあります。

UIデザインパターンを適用するタイミングと方法

実際どのような場合にデザインパターンを用いるかを学ぶことは、プロダクトデザインとユーザーエクスペリエンスを高めるためには不可欠です。デザイナーがデザインのパターンを使用するというのは、ユーザビリティに正当な理由がある場合に限られます。

ここでは、ユーザーニーズを特定・UXデザインパターンを適用するために4ステップの要点における手法を紹介します。

問題を特定する：アナリティクスとユーザビリティ・テストを組み合わせることで、問題を特定することができます。例えば、あなたの製品の登録手続きは、顧客の詳細情報を取得する際に、高いドロップオフレートを持つことに気づきました。登録画面では、氏名、メールアドレス、年齢、性別、都市名、携帯電話番号などを入力する必要があります。（これらの情報の多くは、製品の使用には関係ありません）
市場や競合の調査を通じて解決策を見つける：競合他社や人気のあるデザインライブラリーを調べて、問題を解決するための共通のUIパターンを見つけます。上記の例に戻ると、競合他社は通常、登録時にユーザーのフルネームとEメールアドレスのみを入力してもらうようになっていることがわかります。また、ソーシャルメディアのアカウントを使って登録やログインができるようにし、オンボーディングプロセスを効率化しています。
デザインパターンのカスタマイズ：新しいUXパターンは、自社のブランドと既存のデザインシステムに合うようにカスタマイズする必要があります。ユーザー登録の例では、このカスタマイズでは入力、ソーシャルメディアボタン、送信ボタンの角の半径を調整することが含まれる場合もあります。プレースホルダーのテキスト、入力ラベル、エラー/サクセスメッセージは、スタイルガイドの色を使用します。
デザインパターンのテスト：新しいデザインパターンの実装がユーザビリティとブランドの条件を満たしていることを確認するために、常にテストを行う必要があります。

上記の例では、ユーザビリティテストの重要性を表しています。ユーザーインターフェイスのデザインパターンを識別し適用することは「テストに始まり、テストに終わります」ということです。

競合他社が採用しているから、あるいはそれが正しいと思ったとしても、デザインパターンを追加しない方が無難でしょう。それに関して、自身のウェブデザインにブレッドクラムは必要だとお考えですか？Eコマースの場合はユーザーが商品カテゴリに戻ったり、チェックアウトの順序を把握したりするために必要かもしれませんが、それ以外の多くのWebサイトでは、ユーザーが処理すべきデータポイントを追加するだけです。

必要以上に多いパターンはユーザーインターフェイスを複雑にし、ユーザーがコンテンツを吸収して意思決定するのを難しくしてします。

UXパターンとUIパターンの違い

ほとんどのデザイナーは、UXパターンとUIパターンを同じように使っています。なぜなら、その違いは微々たるもので、似ている箇所が多く、混乱してしまう可能性があります。

UXパターン：ユーザーフローとナビゲーションのための再利用可能なパターン-ソーシャルメディアプラットフォームやウェブサイト上の無限または連続スクロール。ユーザーは、ページを更新するためにスクロールダウンすることができると認識する。
UIパターン：ビジュアルデザインとインタラクションデザインのための再利用可能なパターン-ハンバーガーアイコン。ユーザーは、ハンバーガーアイコンがナビゲーションを開くことを認識しています。

UXデザインパターンの一般的な事例

デザインパターンは、主に6つのカテゴリーに分類されます：

データの入力と出力
コンテンツの構造化
ナビゲーション
ソーシャルメディアと共有
インセンティブ
ヒエラルキー

データ入出力について

データの入出力は、ユーザーと製品の間で最もよく行われるインタラクションの一つです。ユーザーは情報を入力し、システムはデータを届けてアクションを完了させる。

多くのウェブサイトやアプリケーションで使用されている日付ピッカーがその良い例です。見た目は若干異なりますが、ほとんどの日付ピッカーは、ヘッダーの月/年、曜日、日付のレイアウトと機能が類似しています。

ユーザーが日付をクリックすると、ハイライトで表示され選択範囲が示されます。最後に、入力が終わって次に進む際はクリックできるCTA（キャンセルボタンもある）があります。

データの入出力には、他にも以下のような例があります。

フォームの送信
成功/失敗のメッセージ
アプリの通知
プログレスバー/ステップ

コンテンツの構成

多くのギャラリーが、画像のサムネイルと同じようなブロックレイアウトを使用していることにお気づきでしょうか？あるいは、管理画面の左側にナビゲーションパネル、右側にコンテンツが配置されていることにお気づきでしょうか。

このような見慣れたコンテンツ構造とUIパターンを利用することで、ユーザーは新しいデジタル製品やウェブサイトを素早くナビゲートできるようになります。目標は、新しいインターフェイスを覚えるなどの摩擦を最小限に抑え、シームレスで楽しいユーザー体験を提供することです。

例えば、デスクトップのWebサイトやアプリケーションでは、主要なナビゲーションはヘッダー内または左側にあります。一方、モバイルアプリでは、主要なナビゲーションバーはフッターにあり、親指で触れる程度の距離にあります。

無限スクロールや連続スクロールは、InstagramやPinterestで使用されている典型的なナビゲーションデザインパターンです。ユーザーがスクロールすると、システムが更新され、より多くのコンテンツが表示されます。このデザインパターンは親しみやすく、ユーザーがより多くのコンテンツを見るために次へボタンやページネーションをクリックする必要がないため、ユーザーエクスペリエンスを向上させることができます。

おまけ： 4種類のクリエイティブなスクロールパターン。

ソーシャルメディアと共有

デザイナーが利用できるソーシャルメディアと共有のデザインパターンとしては以下のようなものがあります。

リンク用のブランドが持つソーシャルメディアアイコン
共有のアイコン – 右にカーブした矢印、または三角形と3つの点が開いた共有アイコンのいずれか
お客さまの声-逆カンマで引用し、人物の名前と画像を表示

これらの身近なデザインパターンは、ユーザーがソーシャルプルーフを見つけ出し、製品やブランドに対する信頼感を醸成するのに役立ちます。

これらのデザインパターンは心理学を活用し、ユーザーが望ましい行動を取るように促します。ここでの目標は、ユーザーと製品との間に絆を作ることです。これは、フックの使用によって達成することができます。フックについては、こちらの記事「ユーザーをフックする6つの説得力あるUIデザインパターン」で詳しく解説しています。

インセンティブ

デザイン心理学を活用し、ユーザーのタスクやアクションを促してユーザーとプロダクトの関係を構築するものです。

デザイナーは、ポジティブフィードバック・認知・ゲーミフィケーションなどを通じて、デザインパターンを使ってユーザーにインセンティブを与える。

例えば、ゲーム化されたデザインパターンではユーザーが友達を招待して報酬を得ることを促す。UIパターンにおいては、ユーザーの現在のポイントを表示し、より多くの友人を招待して報酬を得るためのCTAを表示します。

階層構造

階層のパターンは、ユーザーがインターフェイスを素早くスキャンし、目的のアクションを完了する方法を知るために視覚的な親しみを即座に作り出すという点で、コンテンツ構造と類似しています。

ブログでよく使われる階層パターンは、ヘッダーと目次の2つです。ユーザーは、ページをスクロールして必要なものをすばやく探したり、目次を使って特定のセクションにジャンプしたりすることができます。

ブレッドクラムは、eコマースサイトでユーザーが商品ページやチェックアウトフローをナビゲートするために使用するもうひとつの階層パターンのことです。

追加資料：モバイルデザインパターンのエッセンシャルガイド。

プロトタイピングとデザインパターンのテスト

デザインパターンのプロトタイピングとテストは、ユーザビリティの問題を特定し、それを解決するための効果的なパターンデザインを発見するためには不可欠な作業です。

問題は、ベクターベースのデザインツールでは、登録フォームや日付ピッカーなどの一般的なデザインパターンをデザインする方法がないことです。つまり、ユーザビリティの参加者と一緒にこれらをテストすることができないのです。

UXPinはコードベースのツールで、最終製品のような外観と機能を持つプロトタイプを作成することができます。これで、完全に機能するデザインパターンをテストして、デジタル製品やWebサイトに適しているかどうかを確認できます。

UXPinは、Javascriptのような機能を持つ高度なインタラクションを特徴としています。デザイナーは、ステート、条件付き書式設定、変数、データ取得と検証、関数などを使用して、プロトタイプの忠実度を高めることができます。

これらの高度なインタラクションを使用して、完全に機能するサインアップフォームを作成することができます。このフォームはユーザーの個人情報を取得し、そのデータを保存して、ユーザーがログインしたときに、コード化されたアプリケーションとまったく同じように検証を行います。

UXPin Mergeの力

日付選択ツールは、モバイルアプリケーションやWebサイトにおいて最も一般的なデザインパターンのひとつです。しかし、一般的なベクターベースのツールは、このパターンを再現して動的なユーザー入力を可能にするのに苦労しています。

UXPin Mergeでは、デザインエディタをリポジトリと同期させ、エンジニアが最終製品の開発に使用するのと同じコードコンポーネントでプロトタイプを構築することができます。

これらのコードベースのコンポーネントを使用して、デザイナーは完全に機能する日付ピッカーを追加し、ユーザーが入力したデータをキャプチャすることができるようになりました。UXPin Mergeを使用すると、コードベースの製品とまったく同じように機能するホテル予約のユーザーフローを作成できます。

Merge の詳細と、Git または Storybook 統合による UXPin との接続方法について書かれていますのでそれぞれのリンクをご覧ください。

まとめ

UXデザインパターンは、製品の学習曲線と人間の認知負荷を最小限に抑えるため、ユーザーエクスペリエンスにおいて重要な要素です。ただ習慣的に実装したり、競合他社の真似をするのではなくデザイナーは、これらのUXデザインパターンをいつ使うのかを知っておいた方が良いでしょう。

分析とユーザビリティ調査は、デザイナーがインターフェイスに欠けているUXパターンを特定し、正しいパターンを実装できたかどうかをテストするのに役立ちます。今使っているデザインツールは、様々な面で機能するUXデザインパターンをテストすることができますか？UXPinを試して、プロトタイプの忠実度とテストを強化するための高度なインタラクションの作成をご体験されてみてはいかがでしょうか。無料トライアルに登録して、世界で最も先進的なコードベースのデザインツールでデザインを始めてみましょう！