web-dev-qa-db-ja.com

モバイルで新しいタブまたはウィンドウを開く代わりの方法

Originのページ/画面をそのままにする必要があるため、デスクトップ設定では通常、新しいウィンドウまたはタブで開くようなUXについて、モバイルで疑問に思っています。

例:このサイトで新しい質問をする場合、テキスト領域の右側に「フォーマット方法」ボックスがあり、マークダウンの書き方の概要が表示されます。その要約には、より詳細な説明へのリンクがあり、クリックすると新しいタブで開きます。これは良いことだと思います。ユーザーがすでに情報を入力したフォームなどから移動したくない場合があるからです。このようなケースは他にもたくさんあります。

しかし、そのシナリオをモバイルに取り入れましょう...

リンクは新しいタブを開きます...しかし、ユーザーは元のタブに戻るために、そのタブを閉じる(またはタブの変更インターフェイスを通過する)必要があることを理解していますか?混乱が生じる可能性のある場所を確認でき、フラストレーションのために、質問(またはそれが何であれ)を送信するという本来のタスクは放棄される可能性があります。

これを分析しすぎていますか? Originのページ/タスク画面を失わずにモバイルに「詳細情報へのリンク」を実装するためのベストプラクティスはありますか?

4
GWR

フルスクリーンモーダルがソリューションになります。以下のProducthuntの例を参照してください。

このアプローチでは、モーダルページに独自のURLがあるため、左上隅の閉じるボタンとブラウザの戻るボタンの両方を使用できます。

検索結果ページ: https://www.producthunt.com/search
モーダル: https://www.producthunt.com/tech/stack-overflow-jobs

Producthunt Modal

1

要件が合っている場合は、アコーディオンオプションを試してください。

モバイルでは、詳細画面を別のページとして開き、元のページに戻るための戻るボタンを提供します。

0
Ranganatha .D

多くのモバイルブラウザーは、ユーザーがbackボタンを押すと、新しく開いたタブページを閉じるため、元のページに移動しますが、ヘルプ/読み取りを表示するのは悪魔の考えで​​はありません-現在のページの動的セクション(例: "div")のより多くのコンテンツ-長すぎず、詳細でもなく、リンクもない場合本の章のように、独自のページに値するように、他のコンテンツ自体に追加します。

html5では、この目的のための「新しい」アクティブ要素detailsがありますが、そのサポートはモバイルブラウザではまだ制限されています- link

0
Attila