(原文) The UI Enterprise Components You Need to Design Your Business App
スマートフォンは日常生活に欠かせないものになりました。消費者と企業との関わり方が完全に変わったのです。しかし、企業との関わり方の変化はそれだけにとどまりません。この9ヶ月間で、ビジネスはほぼ完全に対面で行われていたものから、ほぼ完全にオンラインで行われるようになりました。RedHatは次のように説明しています。「常時稼働のモバイルの世界では、スマートフォンを持っている現場作業員は、デスクにいる同僚と同じように接続されていることを期待しています。エンタープライズ・モバイル・アプリの開発は、大規模な組織のセキュリティと信頼性の要件を満たしながら、この接続性を可能にすることです。
モバイルアプリは、顧客、従業員、利害関係者をサポートするテクノロジーを強化するための素晴らしい方法です。ビジネスによっては、オフィスに戻ってシステムを使用するために、安定したインターネットやデータベースへのアクセスを従業員に頼ることができない場合があります。最高の状態では、モバイルアプリは、ユーザーがオフィスにいないときに必要とするコア機能へのアクセスを提供します。これには、ナビゲーション、接続性、データ入力、情報アクセス、またはその他のコア機能の数多くが含まれます。より複雑なソフトウェアに取って代わるものではありませんが、現場や臨床環境にいる人、移動が必要な人、その他情報やツールへのモバイルアクセスの柔軟性を必要としている人の生活を楽にします。しかし、モバイルアプリやWebアプリは、テクノロジーツールの延長線上にあるべきです。使用中の他のツールの延長線上にあるように見え、感じられなければなりません。アプリのデザインとテクノロジーのニーズを設計システムで考慮することで、開発がより効率的になり、デバイスやツール間でユーザー体験が合理化されることを保証することができます。
デザインシステム
デザインシステムの「誰が」「何を」「どこで」「いつ」「なぜ」？
デザインシステムとは、スタイルガイドのようなガイドラインやルールの集合ではありません。他の製品やウェブサイトのデザインシステムをすでに導入しているかもしれませんが、もし導入していなければ、それは素晴らしい投資です。現在のデザインシステムにアプリのコンポーネントが含まれていない場合は、更新する必要があります。これは、製品やツールのエコシステム全体で再利用できるコンポーネントの完全なライブラリまたはカタログであり、ブランドの一貫性を高め、ユーザーエクスペリエンスを向上させ、最も重要なことは、デザインと開発を可能な限り効率的にすることです。ライブラリには、カラースキーム、タイポグラフィ、グラフィック、レイアウト、日常的なインタラクション、デザインパターン、およびそれらのコンポーネントを実装するためのフロントエンドコードが含まれます。データ分析、データベース統合、様々な環境に対応した通知構造、GPSのようなテクノロジーがサポートする機能など、主要なコンポーネントのバックエンドへのフックも含まれている場合があります。さらに、各コンポーネントをいつ使用し、設計に組み込むべきかについても記述しています。設計システムをセットアップするための努力は広範囲に及ぶ可能性がありますが、長期的には品質の面でも、将来の設計や開発コストの面でも報われることになります。
再利用可能なコンポーネントを標準化して構築することで利益を得るのは、設計および開発チームだけではありません。デザインシステムが適切に設計され、実装されていれば、品質保証、マーケティング、製品管理などの他のチームも恩恵を受けることができます。マーケティングからロゴなどの新しいアセットを受け取った場合、アセットライブラリを更新するだけで更新がスムーズになります。新しい機能のアイデアやデザインは、テスト済みで実績のあるテンプレートやパターンのセットがあるため、より効率的に行うことができます。これらの他のグループの懸念やニーズについては、最初から議論し、デザインシステムに組み込むべきです。すべての利害関係者にインタビューをして調べるのは良いアイデアです。
- 何が彼らのために働いているのか
- どのようなデータが彼らの意思決定に影響を与えるのか
- どのように働くのが好きなのか
- これまでに直面した課題はなにか
- 文書化とコミュニケーションをどのように処理するか
- どんな期待を持っているのか
システムが開発されていく中で、これらのグループがループに入っていくようにし、コンポーネントの設計レビューでは、後からの手戻りを防ぐために、これらのグループが含まれていることを確認します。最終的な目標は、素晴らしいユーザー体験を提供し、内部プロセスをスムーズかつ効率的に実行し続けることです。
デザインシステムのメリットをいくつかご紹介します。
- ブランドの一貫性 - すべての企業およびエンドユーザーの製品とアプリケーションで使用される単一のデザインシステムにより、外部と内部のすべてのユーザーがブランドと対話する場所で同じメッセージを受け取ることを保証します。
- チームワーク - 設計システムは、すべてのチームと関係者のために一貫した言語を設定します。これにより、ミスコミュニケーションや混乱が減り、設計と開発プロセスにおけるすべての製品とビジネスの意思決定が合理化されます。
- 再利用と拡張性 - 標準コンポーネントはシステムの構成要素ですが、ユーザーのニーズや機能に合わせて無限の方法で組み合わせることができます。これらのコンポーネントはシステム全体の中核をなすものであるため、モバイルとウェブアプリのコンポーネントを考慮することは不可欠です。
設計システムを構築するには？
デザインシステムやアプリ自体を作成するためのツールやサービスはたくさんあります。UXPinのようなツールはフレームワークを提供しますが、他の会社はデザインシステムの作成をサービスとして提供しています。どのツールを選択するかは、お客様のニーズと人員によって異なります。強力で安定したデザインチームがあれば、社内で仕事をしてくれるでしょう。
アプリやデザイン・システム・ツールの検討を開始する際には、まず、エンタープライズ・ツールに含まれる必要のある機能の種類を完全に把握することから始めましょう。現在のニーズや機能セットに含まれるものだけでなく、テクノロジーのロードマップについても考えてみましょう。設計システムはビジネスに合わせて拡張性を持たせたいものです。そのような機能と機能をサポートできるツールを選択するようにしてください。会社が配送サービスを行っている場合は、GPSのサポートが必要になります。従業員が現場で働く場合は、データ入力のためにオフラインでの利用が必要になります。選択するツールが、これらの分野でのコンポーネントのニーズをカバーしていることを確認してください。
- データ処理
- アナリティクス
- バックエンドインフラへのフック
- メッセージング
- お知らせ
- 購入時の決済ゲートウェイ
- 地図、カメラ、マイク使用などのデバイス統合
- カスタマイズと機械学習によるパーソナライゼーション
- ソーシャルメディアとの連携
- コンテンツ管理システムや顧客関係管理のフレームワーク
コンポーネント
モバイルアプリとウェブアプリは、他のタイプの製品と比較して、異なる要件と考慮すべき点があります。アプリは特定のサービスを提供し、必要とされるコア機能を含んでいる必要があります。
素晴らしいナビゲーション
ナビゲーションはアプリの骨格です。ナビゲーションは、デザインシステムに考慮し、含めるべき最初で最も重要なコンポーネントの1つです。ナビゲーションはシンプルで明確で、ユーザーが重要なタスクを完了するのを容易にするものでなければなりません。デザインの考慮事項には次のようなものがあります。
- 慣れ親しんだコントロールとアイコンでわかりやすくする
- 片手で簡単にアクセスできる
- 上や下など、1つのエリアにまとめて配置されていること
- 主なナビゲーション方法を1～2種類に制限する
- コンテンツが豊富なアプリの検索オプションを検討する
役に立つ通知
通知は、アプリを積極的に使用しているときもそうでないときも、ユーザーにとって重要なインタラクションです。通知は、警告、エラー、情報、確認などのいくつかのカテゴリーに分類されます。AndroidとiOSの両方には、非同期と同期の通知をサポートするフレームワークがあり、プライバシーとパーソナライズのためのユーザー設定も可能です。通知を計画する際には、以下のことを考慮してください。
- 明確でシンプルな言語を使用します
- デバイスOSにはキーフィールドがあり、アプリ名、アイコン、タイムスタンプなどが含まれます。これはスペースを取り、また、適切なフォーマットと表示のために完全である必要があります
- 各デバイスは、通知センターでの表示用に短いバージョンを作成し、完全な通知用に長いフォームを作成することもサポートします
- 各通知は、ユーザーのための全体的なワークフロー、特に同期メッセージをサポートする必要があります。非同期メッセージには、ユーザーが効率的にフローに戻ることができるように、コンテキストが含まれている必要があります
- ユーザーに通知の種類を示すために、色、アイコン、テキストを使用することを検討してください。それは緊急で修正が必要なものなのでしょうか？それとも、タスクが正常に完了したことを確認するだけのものなのか？ユーザーは複数の感覚的な入力に気を取られているので、これらのシグナルは優先順位を決めるのに役立ちます
- 通知の種類やモダリティごとに一貫性のある要素を使用します。色、アイコン、テキストのように、ユーザーはこれらのキューを通じて、自分の活動についての意思決定をより簡単に行うことができるようになります
シームレスなデバイス統合
ユーザーのデバイスですでに利用可能な機能や機能を作り直す必要はありません。少なくともiOSやAndroidなど、さまざまなプラットフォームでこれらの統合をサポートするために必要なバリエーションやコードスニペットを考慮するようにしてください。検討したい接続の例としては、以下のものがあります。
- カメラアクセス
- ソーシャルメディアアプリ
- ApplePayやPayPalのような支払いオプション
- GPSナビゲーションと地図
- チャット、メッセージング、電話へのアクセス
オフライン機能
WebサイトやWebアプリに比べてモバイルアプリの大きな利点の1つは、オフラインコンテンツや機能を含めることができることです。最近では無制限のデータプランは安くなっていますが、サービスやWi-Fiが利用できないときに、ユーザーがアプリにアクセスしたい、またはアクセスする必要がある場合もあります。位置情報の共有や購入など、ユーザーが接続している必要がある場合は避けられません。しかし、例えば、ユーザーが飛行機の中で座っている場合、どのような機能が便利で望ましいかを考えてみてください。これは、ユーザーが遠隔地や困難な作業環境でアプリを使用することが多い場合に特に重要です。ここでは、オフラインでの使用のために検討したほうがよい機能をいくつか紹介します。
- アプリを医療/臨床などのデータ入力に使用する場合、オフラインでのデータ入力と同期を許可することは、重要な情報をタイムリーかつ正確に記録するために不可欠な場合があります
- 映画、書籍、音楽、その他のメディアなど、後で使用するためにコンテンツをダウンロードできるようにします
- アプリ内の設定や設定をローカルに保存し、後で同期できるようにします
美しいビジュアライゼーション
画面サイズは様々ですが、最大のモバイル画面でも、アプリの領域は限られています。すべての要素は目的を果たす必要があり、その目的はすぐに明らかでなければなりません。ビジュアライゼーションは単なる美学ではありません。ストーリーを伝え、ユーザーのタスクを完了させるための道筋を示します。画像、アイコン、標準的な要素を使用することで、長いテキストブロックをスキップしてユーザーのスペースと時間を節約することができます。アプリとその機能にもよりますが、シンプルなグラフ、表、チャートは、利用可能な小さなスペースで大量の情報を伝えることができます。可視化コンポーネントは、ユーザーの流れを促進するのか、魅力的なインタラクションを提供するのか、その目的に応じて慎重に検討する必要があります。
- グラフィックはシンプルでわかりやすいものにしましょう
- 全体像を見るためにユーザーにスクロールを要求しないようにします
- フローやコンテンツは、ユーザーが次の要素を徐々に拡大したり、ボタンをタップしたりして作業できるように、小さな断片に分割します
- 複雑なデータや大量のデータをレイアウトする場合は表を使用し、シンプルで明確なラベルを使用します
効率的なフォーム
フォームは、支払い、アプリのセットアップ、サポートへの連絡、その他アプリ内での無限のインタラクションに使用されます。フォームデザインはアプリ内でよりシンプルであるべきですが、デザインシステムの既存の要素を活用することができます。
- フィールドラベルとドロップダウンの内容
- アラインメントと間隔を含むレイアウト
- ボタンとボタンのラベル
- エラー状態
- 説明書のような標準的なテキストコンポーネント。モバイル用には、これらを削減し、可能な限りシンプルで明確なテキストを提供する必要があります
概要
エンタープライズデザインシステムは、関係するすべてのチームや関係者を結びつけ、開発プロセス全体をより合理化します。アプリには、独自のコンポーネント、既存のコンポーネントの分解バージョン、バックエンドのニーズの違いなどが必要です。アプリ開発プロジェクトに取り組む前に、UXPinを使ってデザインシステムの性能を確認しましょう。アプリを作成するための検討事項、決定事項、実際の実行については、この詳細なガイドをご覧ください。
UXPinは、世界中のプロダクトチームがアイデアをより早く製品に変えることを支援するデザインプロセスツールです。
UXPinの革新的なテクノロジーである Merge を使用すると、PayPalのような企業はDesignOpsの課題を簡単に解決することができます。UXPin Mergeは、最終製品との完全な一貫性を達成するためにReactコンポーネントを使用してデザインすることを可能にします。
本記事は2020/12/23投稿を翻訳したものです