web-dev-qa-db-ja.com

同じアプリ内の同じアクションの異なるデザインパターン

私は大規模なWebサイトエディターアプリケーションに取り組んでおり、「最高の」初期デザインを実現するために、使用されているコンテキストに応じてUIパターンのバージョンがわずかに異なっています(私たちが使用する限り「最高」)ユーザーテストのデータはまだありません)。これは、パターンの一貫性に関して必ずしもユーザビリティと一致しないことを知っているので、慎重に使用しています。

たとえば、お問い合わせページで、ユーザーは独自のフォームフィールドを持つ新しいフォームを追加したり、選択したテンプレートに含まれている現在のフォームを編集したりできます。新しいフォームを追加するには、ユーザーはドロップダウンからフォームタイプを選択し、[追加]ボタンをクリックして新しいフォームを作成します。この新しいフォーム内のフィールドを編集できることに加えて、ユーザーはフォーム自体内で同じドロップダウン+追加機能を使用してフィールドを追加できます。すべての操作はサイドバーで行われますが、ウェブサイトは右側にリアルタイムで更新されます。このコンポーネントにはより多くのオプション/アクションがありますが、簡潔にするために、必要な詳細だけに省略しています。

私の質問はこれです-一貫性または視覚的な明快さを持つことがより重要ですか?わずかに異なるコンテキスト内で一貫性がありますが反復的なUIはより良いですか、またはコンテキストを反映するように調整する必要がありますか?

私には、フォームとフィールドの追加は同じ相互作用/アクションで行われますが、フィールドはフォームよりも小さな単位であるため、この小さな単位のコンテキストを反映するようにパターンを微妙に変更する場合があるかもしれませんやえかね?

添付ファイルでは、UIパターンが同じであることを示していますが、問題は同じです。

enter image description here

enter image description here

1
rlawrence86

一貫性+階層性= mo betta

コントロール間の一貫性に問題はありません。君が感じている問題は階層だと思う。この例では、フィールド(低レベルのアイテム)を追加する方が、フォーム(高レベルのアイテム)を追加するよりも目立ちます。コントロールは同じですが、フォーム編集モジュール内のグラウンドコントラストが大きくなっています。

いくつかのマイナーな調整により、一貫性はまったく問題ではないことがわかると思います。この例では、「フォームを追加」のヘッダーが強く、ボタンのコントラストが大きくなっています。フィールドを追加すると、プレースホルダーテキストのみが取得され、ボタンは主なアクションに従属するようにスタイル設定されます。

また、フィールド編集コントロールを1つの「設定」アイコンにまとめて、ホバーしてスペースをクリーンアップし、順序を強化するまで非表示にしました。

Revised form editor UI

警告

他のUXユーザーが問題を起こすことは間違いありませんが、いくつかの決定がありますが、このソリューションはデスクトップ設定でうまく機能すると思います。タッチデバイスでは、すべてのフィールドの編集コントロールを公開します。そして、私はおそらく他の異論に反対するでしょう;-)

1
plainclothes

あなたが提示したUIも一貫していません。視覚的な一貫性があります。しかし、相互作用は一貫していません。

ユーザーがフォームを追加すると、ドロップダウンの下に追加されますが、新しいフィールドが追加されると、フォームの上に追加されます。これは一貫性にも影響します。ユーザーは、このパターンのいずれかに慣れる必要があります(上または下に追加)。そうしないと、ユーザーが何かを追加するたびにユーザーが意識的に意識する必要があるため、認知負荷につながる可能性があります。

Interaction consistency issue

この矛盾を解消するための提案を以下に示します。また、フォームとフィールドに階層感を追加する方法も紹介しました。

  • このフォームの背景は灰色で、アクション用の長方形のボタンが付いています。
  • フィールドの背景は白で、アクションのアイコンが付いています。

この方法でパターンを維持し、同時に混乱を避けることができます

enter image description here

0
Gautham Raja

ここにいくつかの良い答えがあります。ウェブ用なので、意味のあるインタラクションを定義するためにメディアの力を使用してみます。添付は一例です。ホバー時に編集/削除フィールドがどのように表示されるか、そして新しいフィールドの追加が新しいフィールドを追加する迅速で明確な方法を提供/示していることに注目してください。 (注-フォームには、全体的に保存、キャンセルなどの機能があると想定されています)。

enter image description here

0
Amit Jain

理想的な答えは「両方をテストする」ことであり、どちらがユーザーに適しているかを確認します。

テストを行わずに選択をしなければならない場合、明快さalwaysは一貫性よりも優先されます。

あなたの具体的な答えに焦点を当てて、フィールドを追加してそれを均一にするための別のUXパターンを提案しますmoreフォームを追加するのとは異なります。たとえば、ドロップダウンを完全に削除し、フォームにドラッグできるすべての使用可能なフィールドを表示する「編集」ボタンに置​​き換えます。

0
UXUiOS