web-dev-qa-db-ja.com

Close要素なしでポップオーバーを閉じることに関するアイデア

場所を検索するための初期フォームを表示しているデザイナーのモックがあります。場所(ビジネス)の名前と都市(事前入力)、および[次へ]ボタン(最初は無効)のフィールドがあります。ユーザーが[場所名]フィールドに入力を開始すると、検索結果を含むdivが[場所名]フィールドの下にリアルタイムで表示されます。場所を選択するには、ユーザーは自分の選択の結果をタップし、リストが消え、選択が[次へ]ボタンの下に表示されます。

QAの同僚は、ユーザーがリストから選択し、もう一度検索することに決めて、気が変わって最初の選択に進みたいと考えている場合、リストから別の選択を選択せず​​に結果リストを却下して再実行する方法を懸念しています。 -彼の最初の選択を検索しますか?現在、それがリストを却下する唯一の方法です。ちなみに、結果リストには[次へ]ボタンが含まれています。 1つのオプションは、検索結果リストに「閉じる」または「X」アイコンを追加することですが、これは視覚的な課題です。別の同僚は、Mobile Safariのフォームアシスタントバーに表示される[次へ]または[完了]ボタンの使用を提案しましたが、[次へ]はフォーム要素間のタブのみで、[完了]はフォーム要素のフォーカスを解除してキーボードを非表示にします。

少しデザインを変更したり、Mobile Safariのフォームアシスタントをカスタマイズしたり、結果のdivを閉じるためにボタンタップアクションを関連付けたりする方法がある場合に、検索結果を閉じる方法についての提案を探しています。 (例:完了ではなくキャンセル)。ソリューションは他のデバイスでも機能するはずです。例として、iPhoneを使用しています。これもネイティブアプリではありません。それはウェブサイトです。

オリジナルのモック-

original mocks

2
sueanna

上記の私のコメントから。

これを実装する1つの方法は、入力領域の最後に小さな灰色の「x」記号を追加することです。クリックすると、入力領域とドロップダウン結果の両方がクリアされます。このシステムはかなり広く普及しているため、ユーザーはそれを理解している可能性があります(たとえば、Windowsエクスプローラーの検索ボックスでこれが使用されています)。ただし、いつでも検索ボックスの上にキャプションを追加して、アイコンをクリックすると検索がクリアされることを示すことができます。

それを行う2番目の方法もよく知られています。ボックスの外側でクリックを検出し、これをトリガーとして使用して入力と結果をクリアできます。ただし、前者の方法はJavaScriptなしで実装でき(タイプ「リセット」フォームコントロールを使用)、JavaScriptが有効になっているかどうかに関係なく、すべてのユーザーが常に使用できるため、より優れていると思います。

2
ArtOfCode

2つのオプション

  1. 入力ボックスと検索結果の外側でタップ/タッチ/クリックを検出する(xボタンを避けたい場合)
  2. 従来のxボタンで移動

しかし、オプション1のみが実装されている場合、ユーザーは、試すまでは閉じる方法を知らない可能性があります。

0