ハイパーリンクを使用してモーダルを閉じることは、設計上の決定として不適切ですか？
ですから、私はUXデザイナーと少しの間を行き来しています。UXデザイナーは、フィールドについての彼の優れた知識を与えようと思ったのです。しかし、彼のデザインの一部は私とうまく合わず、私はそれを飲み込むことができないので、私は自分より明るい心からの意見を求めています。
本質的に、特定のボタンをクリックするとサイドバーモーダルが表示されます。このサイドバーには、ユーザーがテキストを入力できるさまざまなフィールドが含まれています。サイドバーがアクティブになると、背景がグレー表示になり、どこかをクリックしても何も起こりません。このモーダルの下部には、[キャンセルして閉じる]ハイパーリンクがあり、クリックすると、モーダルは非表示になり、情報は保持されません。
この「キャンセルして閉じる」がハイパーリンクであるという事実は、私にはうまく合いません。ハイパーリンクは、どこかに連れて行かれることを意味します。この場合、元のコンテキストに戻るので、ボタンの方が適切だと感じます。しかし、前述のように、私はおそらく私の意見では完全に古くなっています。
追加情報
私の頭にはこれに似たものがあります- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_js&stacked=h
基本的には、その「閉じる」ボタンを「閉じる」ハイパーリンクと交換することで同じ状況になりますが、その例は、見た目を考えると自分の意見に適しています。
@Renはそれを完璧に呼び出し、ユーザーをモーダルに保つために控えめにされています。ボタンとして正しくコーディングされていませんが、なぜ今のスタイルになっているのか理解できます。これは一般的なパターンのようです。私には、これは基本的な基本原則に違反していると思いましたが、私は間違っていたようです。私を教育してくれてありがとう！
ボタンの代わりにテキストリンクが使用される理由は、ユーザーが意図せずに削除またはキャンセルすることをやや困難にするためです。フォームの主なボタンは[送信]ボタンです。ユーザーがデータを保存できるようにするという主要なアクションにさらに注目を集めるために、[キャンセル]ボタンと[削除]ボタンをテキストリンクとして配置し、より低い視覚的階層を表示できます。これは視覚的にのみ行われます。後ろでは、<button>透明な背景。
まるで、特定の目的に合った特定のボタンパターンに関する定型的な答えを求めており、この目標が達成されていないと感じているようです。
すぐに、そのような公式はありません。ただし、考慮すべき点がいくつかあります。
リンクボタンは重要
テキストのみの縁なしボタンは、ハイパーリンクの唯一の目的に制限されることなく、かなり一般的なインターフェース要素になりました。リンクボタンはアプリケーションの他の場所で使用されていますか？それらはボタンとして容易に識別できますか、つまり、適切なアフォーダンスを持っていますか？それを実際のユーザーでテストしましたか？
UX同僚が指定した可能性が高いリンクボタンは、単独で使用するとハイパーリンクと同じではありません。 2つの間の混乱は、本当のハイパーリンクが埋め込まれている多くの本文テキストを持つページ（wikiなど）でのみ発生する可能性があります。ただし、その場合でも、リンクボタンは、ラベルの間隔と簡潔さによって、ハイパーリンクが散在しているテキストの本文と区別できます。
優れた知識へのお辞儀
コントロールのアフォーダンス（検出可能性または検出可能性）について懸念がある場合は、コラボレーションしているUX'erに、彼または彼女の決定の根拠を尋ねるのは完全に正当です。オピニオンバッシングパーティーとユーザーとのテストから撤退します。演習の唯一の目的にせず、参加者が追求する本格的なワークフローを考案し、observe適切なコントロールを見つけるかどうか、アフォーダンスの質問を幅広いユーザビリティテストセットアップに組み込んでください。彼らがためらいを引き起こすかどうか。
モーダルに関する簡単な説明
真のモーダル動作を使用します-サイドパネルとして実装するかフローティングダイアログとして実装するかは二次的なものですが、私はbehaviour-について話しているので、他のすべてのインタラクションを意図的に停止し、ユーザーに重要な断続的な手順を強制します。モーダルゾーンの外側にあるものはすべて、モーダルで提示されたタスクが完了するか放棄されるまで機能しなくなります。メイン画面の内容とインタラクティブに機能する拡張/縮小サイドパネルとは対照的に、真のモーダルの違いを説明するために、これを少し独断的なトーンで説明します。その違いはささいなことではありません。
言語に関するもう1つの短いこと
あなたの説明では、「閉じる」というラベルでは不十分な場合があります。ユーザーが提供した情報は消去されるようですので、中止機能に似ています。たとえば、「すべてクリアして閉じる」というラベルを付けるなどして、私の心へのその影響を明確にする必要があります。それがモーダルの主な目的であるとは思えないので、あなたの同僚はおそらく中止機能をトーンダウンする理由があったでしょう。
したがって、別のことを考慮する必要があります。
行動を促すフレーズ、アフォーダンス、意思決定階層
断続的なタスクを完了する必要性についてユーザーを疑いなく残すために、モーダルは明確な行動を促すフレーズ（CTA）を提示する必要があります。モーダルが入力する一連のフォーム、または作成するプロファイルタイプの選択を提示する場合、それは「送信」機能になります（コンテキスト駆動型のボタンの実際のラベル付けに関係なく）。
その「送信」機能が「キャンセル」と「OK」のような単純な双方向の決定を伝える場合、アプリケーションのコンテキストによって2つのCTAを均等に（バイアスなしで）表示する必要があるか、または1つが意図的なパス。この場合、強調のためにボタン階層を使用できます：意図的なパス-通常確認オプション-中止オプションよりも視覚的特徴が高い必要があります：両方が利用可能ですしかし、ユーザーを望ましい結果に導きます。同じことが、3つ以上のCTAがある多方向の決定にも当てはまります。そのうちの1つ（存在する場合）のみがプライマリとして提示され、それが問題の真実を反映している場合に限られます。それ以外の場合は、すべてのCTAをフラットな階層で等しく提示します。
モーダルに単一の行動を促すフレーズがある場合（たとえば、「完了」、つまり完了して閉じるを意味します）、CTA階層はそのように無関係になります。その場合、他のコンテンツに適切な単一のCTAの視覚的な強さを設定します。
一般的な3層CTA階層では、プライマリの塗りつぶされたボタン、セカンダリのアウトラインボタン、リンクのボタン（ラベルテキストのみ）を第3層の重要レイヤーに使用することがよくあります。 3層の階層をモーダルで扱う場合は注意が必要です。
コンテキストの問題
CTAにとって重要なのはsalience：残りのモーダルコンテンツのコンテキストで、モーダルのyou-must-finish-this要件がどの程度断定的に伝えられているか？
モーダルコンテンツが複雑で視覚的にノイズが多い場合、CTAがモーダルの残りのUIの煩わしさを「叫ぶ」必要があるため、パンチのあるボタンデザインが実際に必要です。 CTAを無効にしておくと、完了まで保留されます。
ただし、視覚的に控えめなモーダルコンテンツの場合、リムレスリンクボタンは、十分な空白またはパディングでオフセットされ、同じ目的を果たします。その場合、過度に太字のCTAは、ユーザーが注目するコンテンツを実際に支配します。
テストをスキップしないでください
CTAのdiscoverabilityに対する簡単なユーザビリティテスト（他の開発者や他の社内の協力者ではなく）を使用して、CTAが十分に顕著かどうかを明確にする必要があります。その場合、議論を勝ち取り、リンクボタンオプションで開始するという衝動を抑制し、-observe（そして、どちらも証人を率いてください）行動を促すフレーズがユーザーに十分なアフォーダンスを持っているかどうかタスクを完了する方法を知っています。アフォーダンスが弱すぎる場合は、最小でこれを確認してください。 5人の公平なユーザー、視覚的にパンチのあるボタンのケースが実際にあるかもしれません。
ユーザーはページコンテンツ全体を消費し、行動を促すフレーズのデザインをどのように強化または減衰させるかは、ページの全体的な構成に合わせる必要があります。
モーダルが達成することとの関連で上記を確認してください。必ず、顕著性、発見可能性、アフォーダンスに関する懸念を表明してください-ここにGoogleへの語彙があります-ユーザーのテストを奨励して、どちらも単なる意見にとらわれないようにします。ただし、その際は、一緒に開発しているものがタスクに応じてユーザーのニーズを満たすことを確認するのはUXerの専門的責任であることに注意してください。
私が見つけた4つのオプションとほとんどの場合の使用は次のとおりです。
- キャンセルボタン
- 閉じるボタン
- エスケープキー
- 窓の外をクリックします
ここでモーダルの詳細を読むことができます： https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c
これがあなたが話しているWebページである場合、ハイパーリンクに問題はありません。明確なラベルがある限り。おそらく「閉じる」だけでは不十分であり、「閉じる形」またはユーザーが理解しやすいものです。これで私は質問の中心的な問題に行きます：それは私たちに尋ねられるべきではなく、実際のユーザーに尋ねられるべきです、それをテストしてください、そしてあなたは知っているでしょう。しかし、より直接的な答えを与えるために...最近では、ハイパーリンクが他のページに移動するためだけに使用されているのではないことがよくあります。 Googleの次のログインフォームをご覧ください。
アカウントの「リンク」を作成すると、小さなメニューが開きます。
情報はおそらくここでは完全ではありません。スクリーンショットが役に立ちました。
とにかく、私はフォームフィールドの下に主要な[行動を促すフレーズ]ボタンがあるはずだと思います。 「ハイパーリンク」または三次ボタンを閉じると、上の主ボタンほど注目されなくなります。
これはかなり一般的です。お役に立てれば。