エンタープライズアプリのマテリアルデザイン
コールセンターで使用されているエンタープライズWebアプリケーションの再設計プロジェクトを開始しようとしています。このプロジェクトにはマテリアルデザインを使用する予定です。
同様のプロジェクトを実施した（または現在実施している）場合、以下の詳細を共有していただけますか？
- Googleのガイドラインから逸脱したこと、およびそうした理由は何ですか。
- もう一度時間があったら、どうしますか？
ご協力いただきありがとうございます。
あなたが尋ねる質問は、組織のニーズや、エンタープライズ、デザインチーム、エンジニアリングチーム、実際のユーザーが変更についてどのように感じているかに主観的なものです。
最初にアプリケーションの実際のユーザーと話し、再設計しようとしているアプリの使用方法を観察し、ブレークポイントとフラストレーションを確認し、何が最も厄介だと思うか、何が完璧かなどを尋ねることを強くお勧めします。
この後、再設計がMDでどのように見えるかをいくつかのモックアップを描き、ユーザーに話します。必要に応じて Pixate を使用して小さなプロトタイプを作成し、それをユーザー、クリエイティブチーム/ UI-UX /エンジニアリングに表示します。それについて彼らの考えを得てください。
私はこれを1つのクライアントに対して行いましたが、クリエイティブ＆エンジニアリングチームからは非常に高く評価されていましたが、トップマネジメントは異なる見解を持っていたことがわかります。これは、保険会社のエージェントが使用する保険会社のタブレットアプリケーション用でした。
企業は一般的に、マテリアルデザインガイドラインのアニメーションや複雑な要素、特によりプロフェッショナルな外観を好むエグゼクティブを好まない。企業のニーズを満たすために、どのルールを曲げなければならないかを判断する必要があります。一般に、幹部はいくつかの要素または一般的なMDの原則に関しておしっこをしているだけであり、ほとんどの時間、アプリケーションに取り組んでいる実際のアプリケーションのユーザーの声に常に耳を傾けているわけではありません。
私の場合、技術チームは、Radio Buttonsを使用しないよう警告しました。エグゼクティブが混乱しているように見えたためです。そこで、2つのオプションを使用した性別固有の情報についてはTogglesを、複数のオプションについてはSlidersを先に進めました。それとは別に、他の要素には、背景の白の視認性を高めるために色の微調整が必要でした。 MDで従来の日付ウィジェットを使用する代わりに、日付のフィールドをクリックしたときにカレンダービューが必要でした。また、エージェントがエラー警告をすぐに確認できるようにして、フォームの最後に達した後に編集する必要がなく、フロー自体で編集できるようにする必要がありました。
私の場合、彼らはそれを実装することを先に進めましたが、私はそうは思わないので、それはエグゼクティブの決定よりも先にそれを作りました。モックアップの内容は変更しませんが、デザインをスキップするようになったのは、色と時間と学習のおかげだと思います。
特にコールセンターでは、従業員が日常的に使用するエンタープライズアプリケーションは、ユーザーのエクスペリエンスと思考パターンを心理的に即興できるように、少し色を付ける必要があると思います。また、夜勤で働くコールセンターの従業員には、ナイトモード/ダークモードを実装する必要があります。 Material Colors Doc を確認し、色を適切に選択することをお勧めします。
また、Web用に設計しているため、マテリアル要素が組み込まれている Polymer を使用することを強くお勧めします。
エンタープライズアプリケーションでのマテリアルデザインの使用について詳しく説明しているので、 この投稿はKyle Ledbetterによる を必ず参照してください。
いくつかのエンタープライズプロジェクトでマテリアルデザインを使用しました。それは非常に良い基準点だと思います。私が行った唯一の変更は、パディングと入力スタイルに関するものです。マテリアルデザインの入力には下の境界線が1つしかありません。これは電話では本当にうまく機能しますが、デスクトップでは入力が少し失われており、ユーザーがそれらを識別するのは困難です。
アクティブなときの強調表示スタイルは好きですが、非常に明るいボーダーを追加しました
パディングの問題です。多くのcssフレームワークに大量のパディングがあり、エンタープライズアプリの場合、非常に広くなり始めています。
Uがcssライブラリにどのソースを使用するかわからない、materializecssは良いです、私はbootstrapプラグインも使用しましたが、これは広く知られているbootstrapクラス。