web-dev-qa-db-ja.com

この印刷ボタンを実装するには?

Webサイトに新しい印刷機能を追加するように求められました。

現在の設定

  • このページでは、ユーザーが情報を検索できます
  • 情報は表に表示されます
  • 各テーブル行を展開して、追加の詳細を提供できます
  • ユーザーは結果のリストを印刷できます(行が展開されていても、追加情報は印刷されません。リストのみが印刷されます)

結果の表:

enter image description here

行が展開されたときの追加の詳細:

enter image description here

理想的なセットアップ

新しい印刷機能は、スター付きの結果のみを印刷できるようにすることです(追加の詳細を含む)。

それをUIに実装する方法を研究しています。これは次のように機能します。

  • ユーザーがページにアクセスしました。印刷ボタンが1つだけ表示されます(印刷リスト)
  • ユーザーはスターをクリックして結果をお気に入りに追加します。 2番目の印刷ボタンが表示されます(詳細を印刷)。
  • ユーザーがすべての星をクリックすると、「詳細を印刷」ボタンが再び非表示になります

2番目のボタンの例:

enter image description here

質問

これは良いアプローチですか?

開発にはしばらく時間がかかります。この実装がひどいものにならないようにしたいと思います。

どんなフィードバックでも心から感謝しています!

4
sol

流れはこのようなものでなければなりません。

  1. ユーザーは「印刷リスト」をクリックします。
  2. その後、通常の印刷設定と同じように、オプションを選択します。
  3. ユーザーが確認して印刷します。

enter image description here

今、コメントに基づいて、お気に入りには選択だけでなく別の機能があることがわかっているので、その変更を提案しません。

次に、2番目のステップを設計する方法を示します。下の画像を参照してください。

これは、明確なタイトルがあり、テキストとオプションを説明するダイアログです(デフォルトを使用します。デフォルトのオプションはどうあるべきか考えてください)。

enter image description here

このフローの唯一の問題は、ユーザーが印刷をクリックすると、お気に入りのみを印刷するオプションが表示され、キャンセルして再選択する必要があることです。たぶん、印刷ボタンの横に「クイックヒント」のテキストを表示するのがいいでしょう。これは、初めてのユーザー、またはおそらく「チュートリアルポップアップ」として使用してください。

enter image description here

5
Nick Groeneveld

2つの個別のCTAの使用について具体的である場合は、以下のモックアップに示すように、現在のUIにわずかな変更を加えることができます。

enter image description here

スター付きのアイテムがない場合は、CTAリンク/ボタンを無効にしておくことができます。

NGAFDのアプローチの方がいいと思いますが。したがって、その場合、ユーザーは完全なリスト(デフォルト)またはスター付きアイテムリストを印刷するための適切なオプションを選択できる単一の印刷ドロップダウンを保持できます。お役に立てれば。

2
prazor9