web-dev-qa-db-ja.com

テキストとアクションを変更するボタン。良いかひどいですか?

enter image description here ユーザーがイベントにRegistersした後(カートに行って支払いなど)、次にページにアクセスしたときに、イベント彼が現在登録しているボタンには、それほど強調されていないUnregisterボタンが表示されています。

同じボタンで機能を変更することは良い習慣ですか、それとも悪い混乱を招くのでしょうか?

更新:
それが誰かを助けるなら、私はこのレイアウトで行きました: enter image description here

40
Dennis Novac

使用可能なアクションのみを反映するようにボタンを変更できますが、状態の表示を分離できます。

ボタンのラベルを、使用できる唯一のアクションである、元に戻す(登録解除)に置き換えました。

少し混乱するところは、ボタンのラベルの横にチェックマークがあることです。

1つのアプローチは、それらを分離することです。アクションから「参加中」のステータスを切り離します。

リストをスキャンするときの主要なアクションはRegisterであるため、Unregisterボタンをより微妙にすることができます。

enter image description here

ビジネス目標に応じて、登録抹消の動作を重視しない場合は、おそらく微妙なリンクを作成できます。

enter image description here

この例では、現在の状態 'Attending'を強調しているため、一目でわかります。

これはまた、行動から状態をより明確に区別するために異なる言語を使用します。

74
Mike M

一貫性を保つために、ボタンの一般的なスタイルを維持します。ただし、最も重要なことは、登録されていることを確認することであり、「Un」を除いて、登録されていない状態と混同されないようにしてください。重要なことは、あなたがすでに登録しているということなので、私はそれを上に置き、その下にある登録解除ボタンを使います。ライタースタイルを使用すると、簡単な閲覧で登録の必要があると誤解される可能性も低くなります。このような:

Suggested layout

10
Nick Gammon

比較のために、ソーシャルメディアサイトには通常、フォロー/フォロー解除のボタンのようなものがあります。

いくつかの例:

  • タンブラー:

    Follow / Unfollow

  • Reddit:

    subscribe / unsubscribe

  • ツイッター:

    Follow / Following / Unfollow

  • YouTube:

    Subscribe / Subscribed / Unsubscribe

  • フェイスブック:

    Follow / Following / Following with dropdown menu where "Unfollow this page" is one of the menu items

6
ahiijny

要件でない限り、「あまり強調しない」でください。

アクションを思いとどまらせるために、ユーザーのエクスペリエンスを危険にさらさないでください!

これらはtwo 2つの異なる機能を持つ異なるボタンですユーザーにとってまったく重要です。

どうやらユーザーはRegisterおよびnregisterを実行できるはずです。同様に、Amazonから購入することができ、返品または注文をキャンセルすることができます。 Amazonは返品/キャンセルの発生を少なくすることを望んでいますが、do/should notReturn/Cancelボタンがわかりにくくなり、アクセスしにくくなります。

*それほど強調しないしないユーザーを混乱させ、タスクを作成することを意味する達成するのが難しい。

※「登録」ボタンを「登録解除」ボタンに変更しても問題ありません。

推奨:

  • すでに登録されていて、ページに再度アクセスするユーザーに"Already registered"ラベル(チェックマークを付けたもの)を表示します。
  • 「登録」ボタンと同じように「登録解除」ボタンを青色で表示および削除「登録解除」の横に追加したチェックマーク

ここで、「登録解除」タスクを強調しないことが要件である場合:

下の更新セクションの提案を参照してください。

更新(1):

私はマイクの答えに気づきました(それは私の数分前に投稿されたと思います)。私は彼の考えを繰り返します。「ビジネス目標に応じて、登録抹消の動作を強調する必要がなければ、おそらく微妙なリンクを張ることができます」。

アップデートの終了(1)


更新(2):

このアップデートは、OPアップデートとその他の回答に基づいて設計の改善を提案するものです。

enter image description here

更新終了(2)。

4
Mo'ath