web-dev-qa-db-ja.com

Webアプリでのユーザー入力用のポップアップフォームとインラインフォーム

私はUI/UXの人ではありません。私はウェブアプリを構築しています。ユーザー入力用のUIを設計するのに苦労しています。

例えば:

一部のWebアプリ(Slack、Asana、MS Teams、MS SharePointなど)では、情報を入力する必要があるたびに、モーダルポップアップ(フォーム付き)が表示されます。

ただし、他のWebアプリケーション(Githubなど)は、ページ自体にインラインでフォームを表示します。これは設計が難しくなりますが、利点は、フォームがメインコンテンツと適切に「流れる」ことであり、より直感的で、複雑さや混乱が少なくなります。ユーザー。

私が知ることができることから、ポップアップは次の場合に使用されます:

  • あなたは怠惰です...ポップアップのデザインは簡単で、基礎となるページをいじる必要はありません
  • 収集する情報の量が多い
  • 情報はページに関連しないため、ユーザー入力をページに埋め込むことは意味がありません(したがって、情報を収集してから非表示にします)
  • 以下の答えから:マスター/詳細の種類のテーブルを扱う場合
  • 他のシナリオはありますか?

しかし、ポップアップが原因で、モバイルでの反応を良くし見栄えを良くすることが難しくなっています。

この分野で一般的なアドバイスはありますか?特定の状況を考えると、ある方が別の方が好ましいですか?

問題は上記の例にあります-彼らはサイト全体で何らかの方法で物事を行うように設計上の決定をしました。彼らはこれらのトピックの調査に何百万ドルも費やしたに違いないので、私はベストプラクティスをコピーしたいと思います。

3
grokky

多くのアプリケーションでは、特定のプロパティを持つエンティティ/レコードを見つけます。たとえば、フリートスケジューリングアプリケーションでは、スケジュールする「ジョブ」があります。ジョブのプロパティ(時間枠、場所、期間など)は、他のジョブまたは他のエンティティ(ドライバーなど)のプロパティから独立しています。このような場合、ジョブのデータを編集するためのポップアップダイアログは、ユーザーが自分のタスクに集中するのに役立ちます。エンティティの編集は別のサブタスクであり、ダイアログはアプリケーションの他のデータとの混乱や混乱を避けるのに役立ちます。

そのような場合でもポップアップは問題ありませんが、これは他の適切なデザインソリューションがないことを意味するものではありません(たとえば、 フォームデザインのさまざまなバリエーションがあります )。用途によって異なります。

モバイルデバイスでは、ポップアップはまったく必要ないと思います。次のように、上部の「戻る」矢印を使用してフォームを別の画面に配置できます。

enter image description here

1
Anna Prenzel