web-dev-qa-db-ja.com

サブスクリプションCTAボタンの更新

私たちのsaas Webアプリケーションには30日間のサブスクリプションモデルがあります。ユーザーはその日以内にミッションを完了することができ、サブスクリプションを手動で延長しない場合は自動更新サブスクリプションを使用しません。

私は現在、ユーザーがサブスクリプションを更新できるこの機能に取り組んでいます。更新オプションは過去7日間から利用可能で、先週はオプションが表示されません。

私はモックを作成しましたが、サブスクリプションを更新するために「クリックしてください」という感覚を提供しているとは確信していません。

サブスクリプションを更新するためのフローはモーダルであるため、ユーザーが[更新]をクリックすると、2つのステップのポップが開きます。

これは画面レイアウトですが、[更新]ボタンを配置できる他の可能性については無知です。現在の場所は、私が考えることができる必然的なロジックの場所です。

私は2つのことをチェックしようとしていると思います：

  1. ユーザーは更新がクリック可能であることを理解し、新しいフローを開くと思いますか
  2. ボタンの場所/方法について他にアイデアはありますか？

どうもありがとう

enter image description here

[〜＃〜] update [〜＃〜]わかりましたので、もう一度考え直します。ミッションを完了するか、サブスクリプションを更新する（最後の7日間のサブスクリプションの場合）ので、このオプションについて考えました： enter image description here コメント：

  1. 更新オプションに別の色を使用したかったのですが、ボタンを表す他の色がないため、スタイルガイドを制約として使用しています。緑か青を使います
  2. ポップアップの他のフローを開くアプリケーションの他の場所でもフラットボタンを使用します
  3. これら二つの行動は関連していると思いますので、近づけた方がいいです。

OK、これが最終的な解決策です。 @Alverosの入力、マテリアルデザイン、アプリの言語とデザインの組み合わせです

enter image description here

website-designbuttonsuser-expectationflat-designsubscription
6
noadavi

更新された質問について：

両方のボタンを重ねて配置すると、混乱が生じる可能性があります。そうでない場合、ユーザーは一方が他方を否定していると考えるかもしれません。更新アクションをさらに強調できますが、特定の更新セクションに残しておきます。サブスクリプションに同じ表現（残り日数）を使用する代わりに、別の表現を使用することをお勧めします。

この画像は、役立つ場合に備えて、以前のポイントの提案です。

enter image description here

私が目にする問題は、いくつかのテキスト要素の間にフラットボタンを使用しているため、ボタンとして識別されないことです。画像にある「結果を送信」と同じサイズ/フォームのボタンを、現在の場所の少し右側に配置できます。 「残りのサブスクリプション日数」には2行を使用する必要がある場合があります。

5                _______
SUBSCRIPTION    | Renew |
DAYS LEFT        -------

また、タイトルの横にあるコンテンツ関連のカウントダウン（今すぐ右側）を配置してみてください。そうすることで、わかりやすくなり、支払いのカウントダウンと混同されなくなります。

素材デザイン-浮き出しボタン

する

隆起したボタンは、フラットなボタンよりも目立ちます。

しないでください。

見づらいUIでフラットボタンを使用しないでください。

6
Alvaro

あなたのジレンマは正しいです。現在の「更新ボタン」は、サブスクリプションを更新するための「クリックしてください」という感覚を実際には提供しません。

ここで問題となるのは、ボタンの平面性、色の目立たない色、およびボタンに関する情報です。実際のCTAでより魅力的な色に置き換えることを検討しましたか？

ここでは、現在のモックアップに少し変更を加えた解決策を思いつきました。

enter image description here

0
Anunay Mahajan