web-dev-qa-db-ja.com

複雑な製品構成のための確立された設計パターンはありますか？

見てくれてありがとう！

バックグラウンド

私はソフトウェアエンジニア（UXデザイナーではありません）であり、非常に優れた製造業のクライアントがオンラインストアを再設計するのを支援しています。

この特定の製造元は、構成可能であり、それぞれ付属品および構成可能である製品を販売しています。場合によっては、アクセサリに構成可能なアクセサリがあります。したがって、3〜4レベルの構成です。

問題

ユーザーに負担をかけないインターフェースを設計するためのクリエイティブな方法を見つけるのに苦労しています。実際には、ユーザーはさらに製品をドリルダウンしていきます=>構成=>アクセサリーA =>構成=>サブアクセサリーA.1 =>構成=>アクセサリーB =>アクセサリーB構成など。

質問

複雑な多層構成を処理するための確立された設計パターンはありますか？私はおそらく間違った検索語を使用していますが、オンラインで多くの例を見つけることができません。

もちろん、NikeのWebサイトやさまざまな自動車ブランドなどを見てきましたが、通常、その構成は1レベルの深さ（靴の配色が異なる場合があります）ですが、複数のレベルが必要です（ウィジェットの内容が異なる場合があります。 whosits）。

どんな助けでもありがたいです。

interaction-designuser-centered-design
3
Matt Cashatt

興味深い質問です。

追加の詳細をたくさん付けずに完全な答えを出すのは非常に難しいので、私はいくつかの思考点を与えようとします。

考慮すべきいくつかの質問

  1. 主な製品

    • [〜＃〜]または[〜＃〜]がそれぞれ独自の付属品を持つ多数の製品がありますか
    • アクセサリーのカスタマイズ範囲を備えた1つまたは2つの製品ですか[〜＃〜]または[〜＃〜]
    • 真ん中のどこかに。

  2. アクセサリー

    • 彼らはパーソナライズを容易にしますか？スペシャライゼーション？既存の機能または新しい機能の改善??
    • 常にアクセサリーを購入する可能性はありますか？
    • より多くのアクセサリーを販売するための特別なマーケティング要件はありますか？
    • アクセサリーには多くのオプションがありますか、それとも製品ごとのほんの一部ですか？

これらの質問に対する回答はソリューションに大きな影響を与えるため、慎重に検討してください。

考えられる答えと影響

  1. 非常に少数の標準的な製品だけがあり、それらは多種多様な最終製品にカスタマイズ可能です。したがって、2層の決定プロセスを持つことができます。

    • 最初の決定-プロダクトヘッドを選択してください
    • 2番目の決定-カスタマイズします。

    この2層システムは、UIに反映される必要があります。つまり、プロダクトヘッドを選択し、（おそらくライトボックスにあるのでしょうか）ティア2のすべての決定を行います。

    ここでは、意図的に、他のプロダクトヘッドとのすべてのコンテキストを失います。これは、アクセサリーが製品ほど重要ではないことを想定しており、アクセサリーごとに行うことができる決定が製品の選択に影響を与えることはありません。


  1. すべてのアクセサリは製品間で交換可能であり、決定的にかなりの重量をもたらす可能性があります。たとえば、私は最も高価なアクセサリーを選択します。それにより、より安価なメイン製品に変更される可能性があります。そのため、必要なアクセサリーを予算に合わせることができます。

    これは実際には、付属品が主要製品よりももっと重要であり、最初に決定する必要があることを意味します。ここでの主な製品は、構成するケースまたは家の機能にすぎません。

    ここでは、最初にアクセサリを選択します。おそらく、それらを段階的に「収集」し（「追加」ボタンを使用するなど）、最終的に最終的に私のケースを選択します。


  1. 中間的な方法：アクセサリが最も適合する複数の製品がある場合（つまり、それぞれが同じディスプレイまたはキーボードを使用できるデスクトップPCの多くの構成のように）：

    これは最も複雑な状況です。一部のアクセサリのみがすべての製品に適合しない場合、最終決定としてそれらを入手することはできません。ただし、すべてに当てはまるものもあるので、製品を変更せずに変更するものはあきらめた方がよいでしょう。

    これには、より複雑な「スマート」ソリューションが必要です。おそらく交換不可能なアクセサリーの代替品を提案しますか？単にそれらを削除するか、製品の変更を許可しないと、使用量が大幅に制限されると思います。フォームを考え出して、そのフォームに加えられた変更に対する賢い解決策を考え出してください。すべてのケースをハードプログラミングするだけの方法はありません。


最後の発言

ここでプレゼンテーションについて考えてください。各決定を視覚化し、それに各アクセサリを追加し、必要に応じて強調表示し、基本的に決定決定の効果を示します。

これは簡単な質問ではなく、私は最終的なソリューションを提供していません。

幸運を！

3
Navot

パンくずリストはあなたの友達です。ユーザーが既に行ったことを表示できるようにすることで、選択が現在の結果にどのように影響するかをユーザーに示すことができます。パンくずに簡単な言語を含めることは賢明かもしれません。可能であれば、カスタム製品の画像を表示することは確かに興味とコンテキストを提供します。

3
TheDrPfeffer

これは古い質問ですが、とにかく2セント投入します。

構造と構成を切り替えることによってドリルを記述する方法は、ユーザーを混乱させるでしょう。別のアプローチは、構造と設定を別々のパネルで左右に並べることです。これは、IDEに似ています。ファイル/オブジェクトの階層が左側に、コンテンツが右側に表示されます。

構造パネルはコンポーネントの階層を表示し、すべての構造操作はそこで行われ（追加/削除/移動など）、特定のコンポーネントが選択されると、その構成が構成パネルに表示され、構成操作は設定パネル。

コンポーネントに構成以外の側面がある場合、または複数の構成側面がある場合は、構成パネルをタブして側面を切り替えることができます。たとえば、サブコンポーネントまたは製品全体の画像またはスケッチを表示するには、タブを使用します。

テンプレート/デフォルト設定（OPでは言及されていません）は、ポップアップリストから選択することにより、構造パネルのコンポーネントに適用できます。

0
Basel Shishani