web-dev-qa-db-ja.com

WebベースのUIはブラウザの戻るボタンに依存する必要がありますか?

戻るボタンは、ブラウザーが提供する優れた「フローの行き止まりから抜け出す」オプションです。ユーザーが前のページにアクセスできる唯一の方法として、UIは戻るボタンに依存するべきですか、それともUIは前の画面に戻るためにサイト固有の追加ボタンを提供するべきですか?

これで頭に浮かぶ一般的なシナリオは、製品のリストがあるeコマースサイトです。ユーザーはいずれかの製品をクリックして詳細ページを表示します。次に、詳細を表示した後、リストに戻って別の製品をクリックして詳細を表示します。 UIは、ユーザーがブラウザの戻るボタンを使用すると想定する必要がありますか、またはWebサイトにユーザーが「結果に戻る」ことを可能にするリンクまたはボタンを提供し、代替オプションとしてブラウザの戻るボタンを残す必要がありますか?

80
Benjamin S

Webアプリケーションはalwaysを使用して、ブラウザの戻るボタンとの互換性を保つ必要があります。つまり、戻るボタンを使用すると、そのアプリケーション内で、予想される動作(グローバルな一貫性)と一致する確定的な結果が得られます。

これで頭に浮かぶ一般的なシナリオは、製品のリストがあるeコマースサイトです。ユーザーはいずれかの製品をクリックして詳細ページを表示します。次に、詳細を表示した後、リストに戻って別の製品をクリックして詳細を表示します。 UIは、ユーザーがブラウザの戻るボタンを使用すると想定する必要がありますか、またはWebサイトにユーザーが「結果に戻る」ことを可能にするリンクまたはボタンを提供し、代替オプションとしてブラウザの戻るボタンを残す必要がありますか?

ただし、Webアプリケーションは通常、関連すると見なされる可能性のあるすべてのナビゲーションについて、ブラウザの戻るボタンだけに依存すべきではありません。

悲しいことに、これの主な理由の1つは、多くのAJAX重いWebで見られるブラウザの制御/状態関連の動作の破損または一貫性のないため、特定のWebアプリケーション内で戻るボタンを押すことを恐れていることです。アプリ。戻るボタンを使用しても、そのボタンを使用した人が期待した効果が得られない場合があります。

次に、ページが新しいタブ(またはブックマーク!)から生成された場合、[戻る]ボタンがない場合があります。アプリを使用するユーザーは、元のタブを開いたままにしておくのが理想的ですが、()の場合、元のページにアクセスできるようにするため、コンテキストからアクセスできるようにしてください。彼らが現在いるページの。


あなたの例を使って、リストが(動的検索の代わりに)静的販売ページであったとしましょう。サイトを閲覧している人が個々の製品をブックマークして、そのセッションを閉じた場合はどうなるでしょうか。ユーザーがそのブックマークをロードするときに、どのナビゲーションオプションを利用できるようにしますか? どのナビゲーションオプションが手元にあると思いますか?これらを一貫性のあるものにすることをお勧めしますUIのコンポーネントであるため、他のインスタンスでは[戻る]ボタンだけに依存する価値はありません。

これを少し拡張するには、UI内にバックナビゲーションオプションを提供することで、それらのプレゼンテーションを制御できます。これは、コントロールを使用して何を行うかを明確に示すことで、アクション結果がどうなるか不安を和らげることができることを意味します。

たとえば、次のことについて不確実性があるかどうかを検討します。

  • Back(Back towhere?は、ブラウザの戻るボタンにも当てはまります。 、ウェブアプリによっては、人々はyourアプリが試すまで何をするかわからないため、ためらいがちです)
  • Back to listings(どのリストですか?ブックマークからここに来た場合、私がここまでたどり着いたきっかけはありますか?)
  • Back to [associated product category](まあ、それはいいことです。機能的であり、決定論的であることに失敗することへの懸念ではありませんが、おそらく他の場所で表す必要があります)
  • Back to the January Sale Event(ねえ!これは私がここに来たときに私が見ていたものです!それは私が最終的に期待できるほど具体的です...どこに行くと期待するかです)(別名、このページに移動したナビゲーションコンテキストマップと一致します)

(そして、最終的にそのようなコントロールを使用する状況に応じて、また、そこからのナビゲーションが明確に相互に関連する結果に明確に関連付けられている場合、「戻る」ではなく「より多く」などの表現を使用したいと思うでしょう)

最後の例は、あなたが努力したいこと、つまり、関連する結果が何であるかを明らかにすることで、アプリケーションを使用する人々の不安を軽減することを示しています。

さらに、これにより、[戻る]ボタンだけで使用できる動作を超える動作が追加されます。戻るボタンは単純に機能するはずですが、このコントロールは、2か月後に誰かがページを開いた場合に表示されます。彼らがそれをクリックした場合、「1月のセールイベント」の関連ページを提示できますが、イベントが終了したことを上部にメッセージで表示し、申し訳ありませんでしたが、[これらの新しいイベント/製品/その他]。


これらのナビゲーションポイントは、アプリケーションを使用しているユーザーが快適に操作できることがわかっているバックアップのバックナビゲーションコントロールを提供する機会であるだけでなく、アプリケーションの移動先を制御し、かなり厳密に管理されたコンテキストでのユーザー。正しく管理されていれば、ブラウザの戻るボタンだけの場合よりも多くの機能を提供でき、直接複製されたコントロール/機能で画面を雑然とさせるのではなく、エクスペリエンスを向上させます。

バックナビゲーションコントロールを実装する場合は、それらを明確にし、一貫性があり、一貫して利用できるようにします(少なくとも、それらが意味のあるページタイプで)。あなた自身とあなたのアプリケーションを使用している人々の両方に、戻るボタンだけが何を表しているかについて追加の価値を提供するようにしてください。

ブラウザの戻るボタンの機能を文字通り複製するつもりである場合は、「戻る」または同様の代表的なアイコンがあるコントロールを使用してください...気にしないでください。ブラウザの戻るボタンの動作が適切に機能することを確認してください。 (とにかくあなたはいつもすべきです)

80
taswyn

はい。ブラウザの戻るボタンを使用してください。

ユーザーはボタンがそこにあることを期待しているので、ボタンが機能していることを確認してください。

しかし、同じボタンをその機能で模倣する必要がありますか?
アプリケーションまたはWebサイトで必要な場合、そうですが、必ずしも完全に同じであるとは限りません。
場合によっては、ウェブショップの例のように、「戻る」というボタンや矢印だけでは不十分な場合があります。この例では、ブレッドクラムナビゲーション、または「結果に戻る」と言うボタンまたはリンク(ユーザーのためにいくつかのコンテキスト)が用意されています。

27

信頼は間違った言葉です

ボタンに依存するべきかどうかを尋ねていますが、ボタンに依存するべきではありません。また、別のオプションを提供する必要があるかどうかも尋ねています。可能であり、特定の状況では、そうするべきです。

だからここにあるものです:

戻るボタン

戻るボタンの動作を壊してはいけません。常に、ブラウザの動作の一部であるため、機能性を損なわないように努める必要があります。これは、状況に対するユーザーのハンドルであり、エラーが発生した場合の支援です。

それはあなたが外すべきではない救命胴衣です。

独自のUI

多くの場合、クラムトレイルや「戻る」ボタンなどが役立ちます。ブラウザーの戻るボタンが特定のOSで非表示になっているためか、わずかに洗練されていないためか、ユーザーがブラウザーではなくアプリを見るようにするためかもしれません。

一般に、礼儀ナビゲーションを追加しても問題はありません。

結論

あなたはそれに頼るべきですか?あなたがそうしないときにそれを壊さないことを確認する限り、あなたはできます。自分で追加しますか?便利だと思えば、それを使用するのであれば、そうです。

そして最後に:測定。あなたがそれを追加した場合、人々がそれを使用するかどうかを確認してください。

9
Dirk v B

私は通常bothのオンスクリーンバックボタンとブラウザバックボタンのサポートを提供しようとします。

理由:

  • ユーザーがアプリのフローに没頭している場合は、画面上の戻るボタンを使用すると、フロー内でフォーカスを維持し、ユーザーの注意を失わないようにすることができます。

  • ブラウザの[戻る]ボタンをサポートすることは私にとって重要です たとえ高額であっても 。これは、ユーザーがブラウザの[戻る]ボタンではなく画面上のボタンを使用することを想定しているのは、大げさな設計だからです。

ボタンの動作を意図的に回避または解除するいくつかのまれな例外があることに注意してください(セキュリティフォームなど)。

5
tohster

ブラウザの戻るボタンだけに頼ってはいけません。

どうして?

なぜなら、スマートフォンは平均して人間の手のサイズよりも速い速度で成長しているからです。これらの戻るボタンが通常どこにあるか見てください。

右上(一般) Back Button for menus Iphone標準ビュー(左下) enter image description here Iphone 6の水平方向のビュー(左上) enter image description here

では、ユーザーがデバイスをどのように持っているかを見てみましょう enter image description hereenter image description here

ユーザーの手がすべての位置でデフォルトの戻るボタンを簡単に押すのに十分な大きさであるため、その戻るボタンに到達するのが難しい場合があります。したがって、トラバースするためのより簡単な方法を提供することが可能であれば、そうします。

画面サイズに関してこの傾向を見てください enter image description here

[戻る]ボタンに依存しないもう1つの理由は、Webサイトのデザインが原因で、ユーザーが戻って期待した結果を取得できないスクリプトがあるためです

2
Frank Visaggio
  • ブラウザの戻るボタンは期待どおりに機能する必要があります。
  • web UIの戻るボタンは、ブラウザーの戻るボタンと同じことを行わない限り、戻るボタンを提供してはなりません
    • 例:eコマースのフィルタリングされたカテゴリビュー-戻るボタンがフィルタリングされていないカテゴリビューに戻る場合、戻るボタンではなく、パンくずのように見える必要があります。
  • コンテキストナビゲーションリンクを提供する必要がありますが、それらは戻るボタンのように見えてはなりません

戻るボタンの動作の引数の背後にある主な理由-このシナリオの例を考えてみましょう:

  • 1000未満の価格で製品をフィルタリングします
  • 商品をクリックして詳細ページを表示します
  • 「ui」戻るボタンをクリックします
  • すべてのアイテムを含むカテゴリページが表示されます
  • お客様として、「戻るボタンをクリックしたため、フィルターが失われた」と思います(したがって、ブラウザーの戻るボタンを試す理由はありません)
  • 設定したフィルタリングの複雑さに比例して誓います
  • 「ui」の戻るボタンがない場合は、私が慣れているブラウザの戻るボタンを使用するだけです。
2
Tomáš Fejfar

私はブラウザの戻るボタンだけに頼るべきではないと思います。

  1. ユーザーがあなたのサイトを操作してどこかに移動した場合、同じ方法で戻ることができると期待するのは妥当だと思います。
  2. ユーザーがWebサイトのコンテキスト内のどこにいるかを表示することは重要です。ユーザーがサイト全体のどこにいるかの参照フレームをユーザーに提供するためです。

*明確にするために編集します。ブラウザの戻るボタンも必ずサポートする必要があります。それが明確であることを確認したいだけです。ブラウザーの戻るボタンだけに依存したくない理由を追加しました。

1

いいえ、ブラウザの戻るボタンでrelyを使用しないでください。

あなたはそれが存在することを期待でき、常に特定の方法で機能することを期待できると言うのは簡単ですが、それは単に事実ではありません。

戻るボタンは自分の外のアプリケーションに存在するため、特定の方法で存在または機能することを合理的に期待することはできません。レスポンシブデザイン革命が教えてくれたことがあるとすれば、それはユーザーのブラウジングのコンテキストについて何も予測できないです。

2017年に、Chrome)で[戻る]ボタンをサポートしたくないとGoogleが判断した場合はどうなりますか?

現在のところ、私たちはすべて異端に泣くことができますが、Google couldは、いくつもの理由で予測できませんでそれを行います。 M $、Apple、Mozilla、その他のブラウザベンダーも同様です。次に、もはや存在しない機能に依存します。

1
Jordan Foreman

ブラウザーの戻るボタンを削除または妨害しないことについては、ここにたくさんのことがありますが、それは質問者が尋ねていることではないと思います。

ブラウザの[戻る]ボタンはユーザーのためにあり、したがって、予測されるユーザージャーニーの一部を形成するべきではありません。ユーザーがブラウザをカスタマイズして、戻るボタンが表示されないようにしている可能性があります。これに依存していると、ユーザージャーニーが壊れてしまいます。

JavaScriptの "history.back"関数を使用する可能性のあるもの(実際には、戻るボタンを押すこと)には依存しません。

ユーザージャーニーで、ユーザーが検索結果ページや他の場所にスキップする可能性が高いことがわかった場合、これを行うための明示的な方法を提供する必要があります-「結果に戻る」

1
Andrew Martin

私はそれを独占的に使うつもりはありません。

頭に浮かぶ最初の例はGoogle Chromeです。すべての「タブ」は新しいインスタンスであるため、新しいウィンドウを開くことはまったく新しいセッションを開始することに似ています。これらのインスタンスでは、 [戻る]ボタンをクリックすると、実際に戻るのではなく、単にホーム画面に移動します。ユーザーが[新しいタブでリンクを開く]を選択した場合も同じことが起こります。

その機能により、ウェブサイト上にナビゲーション機能があると、ユーザーは物事の流れを中断することなく続行できます。

補足として:Chromeこのため、40-100のタブがあります。通常のブラウザを使用してタブを蓄積するのは非常に簡単です。すべてのユーザーが実際に方法を知っているわけではありません。この動作に対処します。

0
Thebluefish

デザイナーとしてではなく、ユーザーとして話すこと。 continueサイトをナビゲートするためにブラウザの戻るボタンをデフォルトにする必要があるときはいつでも、私はそれを考えざるを得ませんが、サイトのUXの障害。使用しなければならないほど、いらいらします。唯一の例外は、「最後のページの販売者の住所は何でしたか?」のようなインスタンスです。または、「最後のページのフォームフィールドにもう一度何を入れましたか?」、既に表示しているページに直接戻ることを意図しています。

私見、ネイティブの戻るボタンは決して前のリストページに戻ろうとしても、ユーザーがページから出る唯一の方法であってはなりません。ユーザーにナビゲーションを提供する無数のシンプルでテスト済みの効果的なオプションがあります-< back to listingページ上部のリンク、ブレッドクラム、またはその他の回答の提案が適切に機能します。

0
CodeMoose