スペースが限られている場合の効果的なビューの切り替え
スペースが非常に重要な領域があり、郵送先住所と請求先住所を切り替えるための非常に小さいスペースがあります。
アドレスビューを切り替えるために、タイトで効果的なUIメカニズム/マイクロインタラクションを決定するのに苦労しています。
これは、トレーニングやオンボーディングなどを備えたエンタープライズシステム上にあり、パワーユーザーが使用します。もちろん、可能な限り自己発見できるようにする必要があります。
最初の例は、住所の横にあるアイコンの垂直方向の配置です。 2番目のアイコンは、特定の住所行と整列しないように意図的にオフセットされています。目標は、請求アイコンと住所行2の間の特定の視覚的な関連付けを解除することです。
2番目の例も同じですが、トグルスタイルの要素の視覚化をさらに追加しています。
最後に、最後の例では、垂直方向の配置を取り除き、水平方向に移動します。
外観は一般にGMDにインスパイアされていることがわかりますが、少なくとも私の場合、GMDがエンタープライズシステムに最適なアプローチだとは思わないため、大まかに使用しています。
私が何をしても、おそらく何年も経ってからUXの注目を集め、UIの標準化が進んでいるエンタープライズシステムで時折繰り返されるパターンになるでしょう。
下線付きの（トップレベルのタブではなく）セクションタブを使用できます。
活版印刷のバランスの必要性を感じた場合、別のオプションは連絡先セクションの上にサブヘッダーを追加することです（この代替案についてあまり確信がありません）：
ユーザーはアイコンを識別する必要はありませんが、現時点では明確ではありません（大胸筋はコメントでこれを指摘しました）。連絡先セクションを押し下げて住所の内容に合わせましたが、タブ線は左側のセクションの終わりを示しています。
また、ただ疑問に思います。これらの包含パネルがある場合、「顧客の編集」と言う必要がありますか？ 「編集」だけに短縮してみました。少なくとも私の目には、含まれているパネルが編集される内容を示唆しています（ちょうど私の意見です）。
私は、活字の区別のためにすべて大文字を使用しました。これは、マテリアルのタブやモバイルに似ています。
テストではアイコンがボタンとしてスキャンされないことを理論化します。したがって、2番目の設計では、アイコンをより認識しやすいもの（トグル）に配置することで、3つのうち最良のものをテストする可能性があります。別のオプションは、タブを使用することです。古い使い慣れたタブを使用することを弁護するために：
どんなタイプのイノベーションでも、ユーザーとデザイナーにコストがかかります。ユーザーにとって、それは彼らが学ばなければならない新しいパターンであり、それは彼らを未踏の、ゆっくりとした道に連れて行くので。デザイナーにとっては、ユーザーが新しいパスをナビゲートするのに役立つコンテキストのヒントや段階的な開示などの追加の足場を提供する必要があるためです。これらのツールを実装するコストは、かなりの額になる可能性があります。あなたが達成しようとしていることを2度考えてみてください—打たれた道から離れる価値はありますか？革新することは理にかなっていますか、それともあなたは伝統的なデザインによって同様に役立っていますか？
これはタブの完全な使用例です。Material Design タブの設計仕様には、レイアウトのオプションがいくつかあります。あなたはこのようなことを試すことができます：
またはこのように：
例で使用したアイコンは、明確なナビゲーション補助ではなく、電話やメールのアイコンのように見えます。おそらくパワーユーザーはそれらを理解するようになるでしょうが、その機能は明らかではありません。