web-dev-qa-db-ja.com

(モバイル)ネイティブアプリとWebアプリのバック機能

現在、Webアプリの検索/結果ワークフローのプロトタイプを作成しています。
何かを検索し、結果をクリックして、検索結果に戻ることができます。

それをどのように表示しますか?戻るボタンを実装するのですか、それともブラウザの戻るボタンに依存すべきですか?

しかし、最初にウェブアプリに関する情報と、私がすでに試した/検索したもの:

ウェブアプリ
ウェブアプリは仕事のためのツールです。つまり、代替手段はなく、ユーザーはこのツールを毎日複数回使用します。したがって、彼らは複雑な相互作用システムを時間をかけて学ぶことができました。

ユーザー
ユーザーは主にWebアプリを使用しますon Android devices。しかし、デスクトップとiPadを介してもツールにアクセスできる必要があります。デバイスの使用方法は次のとおりです。
Samsung Galaxy S4 mini:80%
デスクトップ:10%
iPad:8%
その他:2%

分析
そこで、私はいくつかのWebサイトを試し始め、ベストプラクティスを検索しましたが、興味深い事実に遭遇しました:ネイティブモバイルアプリは戻るボタン/リンクを実装していますが、Webアプリは実装していません。
ここにいくつかの例があります(左のウェブアプリ、右のネイティブアプリ。Androidのみ、iOSの例はありません):

ザランド
ネイティブアプリでは左上に戻る矢印が表示されますが、ナビゲーションは完全に削除されますが、ウェブアプリには戻るボタンはありません。そのため、モバイルユーザーはブラウザの戻るボタンまたはAndroid戻るボタンに依存する必要がありますが、引き続きナビゲートして検索できます。一方、ネイティブアプリユーザーはすばやく結果に戻りますが、それ以上進むことはできません。
Web-App 1Native App 1
下にスクロールすると、ネイティブアプリには常に戻ることができる固定ヘッダーがありますが、ウェブアプリには固定ヘッダーがありません。
Web-App 2Native App 2

興味
Zalandoと同様に、PinterestにはWebアプリに戻るボタンがありませんが、ネイティブアプリには戻る矢印があります。
Web-AppNative App

ネイティブアプリの例は他にもあります ここではmengto.com

結論
ネイティブアプリは唯一の焦点であるため、100%モバイル向けに最適化されています。 AndroidとiOSの間にも違いがあることを承知しています。iPhoneにはハードウェアに戻るボタンがなく、UIにそのような戻るボタンが必要なためです。しかし、ほとんどの場合Androidアプリはまだアプリケーション自体に戻るボタンを提供します。
それでは、ほとんどのネイティブアプリに統合されているため、Webアプリはモバイルサイズにそのような戻るボタンを提供しないのはなぜですか?

そして、私は私のウェブアプリで何を使うべきですか?追加の戻るボタンを提供する必要がありますか? (先に述べたように、Androidユーザー)に焦点を当てています。

記事を読んでも完全に満足しませんでした
UX-SE Q&A:
WebベースのUIはブラウザの戻るボタンに依存する必要がありますか?
ネイティブアプリとWebまたはハイブリッドアプリのユーザーエクスペリエンス認識に関するあらゆる調査
モバイルWebアプリの[戻る]ボタン
[戻る]ボタンはモバイルに適していますか?

ブログ/記事:
ネイティブモバイルアプリを設計するときに避けるべき6つのUXの間違い
戻るボタンの期待に違反する4つのデザインパターン

3
Michael Schmidt

この回答はAndroidに焦点を当てています。iOSに適用できる場合とそうでない場合があります。

Googleマテリアルガイドラインの Navigation に関する非常に完全なセクションには、ユーザーがアプリのナビゲーション履歴をどのように操作するかが説明されています。それはそこに明確に説明されているので、主にそれへの参照といくつかの考えを使用します。


2つの主なナビゲーションボタンは次のとおりです。

  • アプリ固有Upボタン

Up

「上へ」ボタンは、ユーザーが表示した前の画面に戻ります。アプリのホーム画面に到達するまで、アプリの階層を上に移動します。

  • Android OSメイン戻るボタン

back

「戻る」ボタンは、最近表示された画面の履歴を時系列順に移動します。

[上へ]ボタンを使用すると、ユーザーはアプリ内にとどまります[戻る]ボタンを使用すると、最近の画面に戻ることができますアプリの外部

このため、アプリにUpボタンを配置することをお勧めします。


提案する例では、2つのケースを以下に示します。

  • ブラウザアプリ

  • ネイティブアプリ

どちらの場合も、アプリはUpボタンを提供します。 Webケースのアプリはブラウザであり、すでにUpボタンを持っています。


アプリがユーザーのスクロールに応答する方法は、おそらく開発者の決定に依存します。 Googleは Toolbar がスクロールにどのように反応するかについてさまざまな方法を説明しています。

シートがツールバーの下でスクロールするとき、それらは切り取られ、反対側に通過できません。

シートは、画面外に移動するときにツールバーを覆うこともできます。

(...)ツールバーは別のシートとシームを共有できます。

それらがステップに変形する継ぎ目を共有する場合、それは滝と呼ばれます。


これがあなたの主な質問に答えたことを願っています。

2つ目について:Webアプリで何を使用すればよいですか?追加の戻るボタンを提供する必要がありますか? (先に述べたように、Androidユーザー)に焦点を当てています。

ブラウザのボタンに追加のUpボタンを提供することは良い考えではありません。ユーザーは両方の違いが何であるかわからないため、混乱を招く可能性があります( 両方が同じことを行う必要があるため )。

アドレスバーが非表示にならないようにする方法 を確認することをお勧めします。


編集

私にとっては、ボタンが実際にどのように機能するかについて少し混乱しています:

上ボタン:上ボタンを押すと、アプリの親(昇順ナビゲーション)に移動したり、兄弟(横方向ナビゲーション)に移動したり、後から移動したりします親(昇順ナビゲーション)。

戻るボタン:一部のアプリの戻るボタンは、親が前の履歴画面であったかどうかに関係なく、アプリの親に移動します。他のいくつかではそれは歴史の行を尊重します。例えば:

Playブックスアプリでホーム画面からアプリを開いて書籍のページを表示している場合、戻るボタンを押すとホーム画面に戻ります。

Google Keepアプリで、ホーム画面からアプリを開いて特定のメモ(シングルビュー)が表示されている場合、戻るボタンを押すと、ホーム画面ではなく、親(昇順ナビゲーション)に移動します。

主な違いは、[上へ]ボタンではユーザーがアプリを終了できないことですが、[戻る]ボタンでは可能性があります


コメントへの回答、Chromeアプリの[戻る]ボタンは、ユーザーをアプリ内の履歴に戻します(のみ実際のタブ)。そのタブの「最初にアクセスしたページ」に到達すると、ユーザーはOSのホーム画面に移動します。

私の推測では、Chromeアプリには親がいないため、[上へ]ボタンを表示する必要はありません。[戻る]ボタンをクリックすると、すべてのタブの履歴を移動できます。

4
Alvaro