ビジネスアプリのためのUIエンタープライズコンポーネント

スマートフォンは日常生活に欠かせないものになりました。消費者と企業との関わり方が完全に変わったのです。しかし、企業との関わり方の変化はそれだけにとどまりません。この9ヶ月間で、ビジネスはほぼ完全に対面で行われていたものから、ほぼ完全にオンラインで行われるようになりました。RedHatは次のように説明しています。

「常時稼働のモバイルの世界では、スマートフォンを持っている現場作業員は、デスクにいる同僚と同じように接続されていることを期待しています。エンタープライズ・モバイル・アプリの開発は、大規模な組織のセキュリティと信頼性の要件を満たしながら、この接続性を可能にすることです。モバイルアプリは、顧客、従業員、利害関係者をサポートするテクノロジーを強化するための素晴らしい方法です。」と述べました。

ビジネスによっては、オフィスに戻ってシステムを使用するために、安定したインターネットやデータベースへのアクセスを従業員に頼ることができない場合があります。最高の状態では、モバイルアプリは、ユーザーがオフィスにいないときに必要とするコア機能へのアクセスを提供します。

これには、ナビゲーション、接続性、データ入力、情報アクセス、またはその他のコア機能の数多くが含まれます。より複雑なソフトウェアに取って代わるものではありませんが、現場や臨床環境にいる人、移動が必要な人、その他情報やツールへのモバイルアクセスの柔軟性を必要としている人の生活を楽にします。

しかし、モバイルアプリやWebアプリは、テクノロジーツールの延長線上にあるべきです。使用中の他のツールの延長線上にあるように見え、感じられなければなりません。アプリのデザインとテクノロジーのニーズをデザインシステムで考慮することで、開発がより効率的になり、デバイスやツール間でユーザー体験が合理化されることを保証することができます。

デザインシステム

デザインシステムの5W1H（「誰が」「何を」「どこで」「いつ」「なぜ」）とは？

デザインシステムとは、スタイルガイドのようなガイドラインやルールの集合ではありません。他の製品やウェブサイトのデザインシステムをすでに導入しているかもしれませんが、もし導入していなければ、それは素晴らしい投資です。現在のデザインシステムにアプリのコンポーネントが含まれていない場合は、更新する必要があります。これは、製品やツールのエコシステム全体で再利用できるコンポーネントの完全なライブラリまたはカタログであり、ブランドの一貫性を高め、ユーザーエクスペリエンスを向上させ、最も重要なことは、デザインと開発を可能な限り効率的にすることです。

ライブラリには、カラースキーム、タイポグラフィ、グラフィック、レイアウト、日常的なインタラクション、デザインパターン、およびそれらのコンポーネントを実装するためのフロントエンドコードが含まれます。データ分析、データベース統合、様々な環境に対応した通知構造、GPSのようなテクノロジーがサポートする機能など、主要なコンポーネントのバックエンドへのフックも含まれている場合があります。さらに、各コンポーネントをいつ使用し、設計に組み込むべきかについても記述しています。

デザインシステムをセットアップするための努力は広範囲に及ぶ可能性がありますが、長期的には品質の面でも、将来の設計や開発コストの面でも報われることになります。再利用可能なコンポーネントを標準化して構築することで利益を得るのは、設計および開発チームだけではありません。デザインシステムが適切に設計され、実装されていれば、品質保証、マーケティング、製品管理などの他のチームも恩恵を受けることができます。マーケティングからロゴなどの新しいアセットを受け取った場合、アセットライブラリを更新するだけで更新がスムーズになります。

新しい機能のアイデアやデザインは、テスト済みで実績のあるテンプレートやパターンのセットがあるため、より効率的に行うことができます。これらの他のグループの懸念やニーズについては、最初から議論し、デザインシステムに組み込むべきです。

すべての利害関係者にインタビューをして調べるのは以下を知ることができる良いアイデアです：

何が彼らのために働いているのか
どのようなデータが彼らの意思決定に影響を与えるのか
どのように働くのが好きなのか
これまでに直面した課題は何か
文書化とコミュニケーションをどのように処理するか
どんな期待を持っているのか

システムが開発されていく中で、これらのグループがループに入っていくようにし、コンポーネントの設計レビューでは、後からの手戻りを防ぐために、これらのグループが含まれていることを確認します。最終的な目標は、素晴らしいユーザー体験を提供し、内部プロセスをスムーズかつ効率的に実行し続けることです。

デザインシステムのメリットをいくつかご紹介します。

ブランドの一貫性 – すべての企業およびエンドユーザーの製品とアプリケーションで使用される単一のデザインシステムにより、外部と内部のすべてのユーザーがブランドと対話する場所で同じメッセージを受け取ることを保証します。
チームワーク – 設計システムは、すべてのチームと関係者のために一貫した言語を設定します。これにより、ミスコミュニケーションや混乱が減り、設計と開発プロセスにおけるすべての製品とビジネスの意思決定が合理化されます。
再利用と拡張性 – 標準コンポーネントはシステムの構成要素ですが、ユーザーのニーズや機能に合わせて無限の方法で組み合わせることができます。これらのコンポーネントはシステム全体の中核をなすものであるため、モバイルとウェブアプリのコンポーネントを考慮することは不可欠です。

デプロイされたコードとデザイン・ライブラリの間で、デザイン・システム・コンポーネントが一貫していることを確認したいですか？UXPin Mergeは、デザインワークフローやハンドオフを非常にシンプルにし、デザイナーと開発者が同じコードで動くコンポーネントを使用する際のコミュニケーションの断絶を解消します。その結果、デザインシステムを最大限に活用し、プロトタイプから実用的なアプリになるまでの時間を短縮することができます。デザインシステムを構築したい、または改善したい場合は、Merge の機能をご覧ください。

デザインシステムを構築するには？

デザインシステムやアプリ自体を作成するためのツールやサービスはたくさんあります。UXPinのようなツールはフレームワークを提供しますが、他の会社はデザインシステムの作成をサービスとして提供しています。どのツールを選択するかは、お客様のニーズと人員によって異なります。強力で安定したデザインチームがあれば、社内で仕事をしてくれるでしょう。

アプリやデザインシステムツールの検討を開始する際には、まず、エンタープライズツールに含まれる必要のある機能の種類を完全に把握することから始めましょう。現在のニーズや機能セットに含まれるものだけでなく、テクノロジーのロードマップについても考えてみましょう。デザインシステムはビジネスに合わせて拡張性を持たせたいものです。そのような機能と機能をサポートできるツールを選択するようにしてください。会社が配送サービスを行っている場合は、GPSのサポートが必要になります。従業員が現場で働く場合は、データ入力のためにオフラインでの利用が必要になります。選択するツールが、これらの分野でのコンポーネントのニーズをカバーしていることを確認してください。

データ処理
アナリティクス
バックエンドインフラへのフック
メッセージング
お知らせ
購入時の決済ゲートウェイ
地図、カメラ、マイク使用などのデバイス統合
カスタマイズと機械学習によるパーソナライゼーション
ソーシャルメディアとの連携
コンテンツ管理システムや顧客関係管理のフレームワーク

コンポーネント

モバイルアプリやウェブアプリは、他の種類の製品と比べて異なる要件や考慮事項があります。アプリは特定のサービスを提供し、必要なコア機能を搭載する必要があり、スペースは限られており、ユーザーの注目度は低いです。

素晴らしいナビゲーション

ナビゲーションはアプリの骨格です。ナビゲーションは、デザインシステムの中で考慮すべき、最初で最も重要なコンポーネントのひとつです。ナビゲーションは、シンプルでわかりやすく、ユーザーが重要なタスクを完了しやすいものでなければなりません。デザインで考慮すべき点は以下の通りです：

慣れ親しんだコントロールとアイコンでわかりやすい
片手で簡単にアクセスできる
上や下など、1つのエリアにまとめて配置されている
主なナビゲーション方法を1～2種類に制限する
コンテンツが豊富なアプリの検索オプションを検討する

役立つ通知

通知は、アプリを積極的に使用しているときも、そうでないときも、ユーザーにとって重要なインタラクションです。通知は、警告、エラー、情報、確認など、いくつかのカテゴリーに分類されます。AndroidとiOSの両方には、非同期および同期の通知をサポートするフレームワークがあり、プライバシーやパーソナライゼーションのためのユーザー設定もあります。通知を計画する際には、以下の点を考慮してください。

明確でシンプルな言葉を使う。
デバイスOSには主要なフィールドがあり、アプリ名、アイコン、タイムスタンプなどが含まれます。これはスペースを取るだけでなく、適切なフォーマットと表示のために完全なものでなければなりません。
各デバイスは、通知センターに表示するための短いバージョンと、完全な通知のための長いフォームの作成にも対応しています。
各通知は、ユーザーの全体的なワークフロー、特に同期メッセージをサポートする必要があります。非同期のメッセージは、ユーザーが効率的にフローに戻ることができるように、コンテキストを含むべきです。
色、アイコン、またはテキストを使って、ユーザーに通知の種類を示すことを検討してください。それは緊急性が高く、修正しなければならないものでしょうか？それとも、タスクが正常に完了したことを確認するためのものなのか？ユーザーは複数の感覚的なインプットに気を取られていますが、このようなシグナルは優先順位を決めるのに役立ちます。
通知の種類やモダリティごとに、一貫した要素を使用する。色、アイコン、テキストなど、これらのキューを通して、ユーザーは自分の行動についてより簡単に判断できるようになります。

シームレスなデバイス統合

ユーザーのデバイスですでに利用可能な機能や特徴を再現する必要はありません。少なくともiOSとAndroidという多様なプラットフォーム上でこれらの統合をサポートするために必要なバリエーションとコードスニペットを考慮してください。考慮すべき接続は以下の通りです：

カメラへのアクセス
ソーシャルメディアアプリ
ApplePayやPayPalなどの支払い方法
GPSナビゲーションと地図
チャット、メッセージング、電話へのアクセス

オフライン機能

WebサイトやWebアプリと比較した場合のモバイルアプリの大きな利点は、オフラインのコンテンツや機能を搭載できることです。最近は無制限のデータプランが安くなっていますが、サービスやWi-Fiが利用できない場所でユーザーがアプリにアクセスしたいと思うこともあるでしょう。位置情報の共有や購入手続きなど、ユーザーがアプリに接続する必要がある場合は避けられません。しかし、例えば、ユーザーが飛行機の中で座っているときに、どのような機能が便利で望ましいかを考えてみましょう。これは、ユーザーが遠隔地や厳しい職場環境でアプリを使用することが多い場合、特に重要です。ここでは、オフラインで使用する際に考慮すべき機能をいくつか紹介します。

医療・臨床現場などでアプリをデータ入力に使用する場合、重要な情報をタイムリーかつ正確に記録するためには、オフラインでのデータ入力と同期を可能にすることが不可欠な場合があります。
映画、書籍、音楽、その他のメディアなど、後で使用するためのコンテンツのダウンロードを許可する。
アプリ内の環境設定をローカルに保存し、後で同期できるようにする。

美しい映像表現

画面サイズはさまざまですが、どんなに大きなモバイル画面でも、アプリ内のスペースは限られています。すべての要素には目的があり、その目的が一目瞭然である必要があります。ビジュアライゼーションは単なる美学ではなく、ストーリーを語り、ユーザーのタスクを完了するための道筋を示します。画像、アイコン、標準的な要素を使用することで、長いテキストブロックを省略し、ユーザーのスペースと時間を節約することができます。アプリやその機能によっては、シンプルなグラフ、表、チャートを使用することで、小さなスペースでも多くの情報を伝えることができます。ビジュアライゼーションコンポーネントは、ユーザーフローを迅速にするか、魅力的なインタラクションを提供するかなど、その目的を慎重に検討する必要があります。

グラフィックはシンプルで分かりやすいものにしましょう。
ユーザーが全体像を見るためにスクロールする必要がないようにします。
フローやコンテンツを小分けにして、ユーザーが次の要素を徐々に拡大したり、ボタンをタップしたりして作業できるようにする。
複雑なデータや大量のデータをレイアウトする際には、テーブルを使用し、シンプルで分かりやすいラベルを付けましょう。

効率的なフォーム

フォームは、決済やアプリのセットアップ、サポートへの問い合わせなど、アプリ内のさまざまなやり取りに使用されます。フォームのデザインは、アプリの中ではよりシンプルであるべきですが、デザインシステムの既存の要素を活用することができます。

フィールドのラベルとドロップダウンの内容
アライメントとスペーシングを含むレイアウト
ボタンとボタンラベル
エラーの状態
説明書などの標準的なテキストコンポーネント。モバイル向けには、これらを削減し、可能な限りシンプルで分かりやすいテキストを提供する必要があります。

まとめ

エンタープライズデザインシステムは、関係するすべてのチームとステークホルダーを結びつけ、開発プロセス全体をより効率的にします。アプリには、独自のコンポーネント、既存のコンポーネントの縮小版、さまざまなバックエンドのニーズが必要です。アプリ開発プロジェクトに取り組む前に、UXPinを使ってデザインシステムがタスクに適しているかどうかを確認してください。アプリを作成する際の検討事項、決定事項、実際の実行方法については、こちらの詳細なガイドをご覧ください。

コード化されたコンポーネントとデザインの間に100％の一貫性を確保したい場合は、UXPin Mergeから始めましょう。UXPin Mergeは、ハンドオフプロセスにおけるドリフトを排除し、デザインシステムを最大限に活用することができます。Mergeは、デザイナーが既にインタラクティブなReactコンポーネントを使ってデザインすることで、最終製品との完全な一貫性を実現します。UXPin Mergeへのアクセスは以下から。