アプリでお店などを探す際、駅名から探すこともあると思います。路線を選んで次に駅を選んで、、というあれです。
最近では駅名を直接入力して設定できることが多くなりましたので、今回はその直接入力により駅を選択する際のUIを細かく見ていきたいと思います。
タウンワーク(iOS)
バイトアプリのタウンワークのお仕事検索です。
比較的オーソドックスなUIに見えますが、早速見ていきましょう。
検索窓に駅名を入力しようとして検索窓をタップします。
検索窓をタップするとキーボードが表示されます。
渋谷に近い東急田園都市線の駅をいくつか選択しようとして、まずは桜新町から入力していきます。
「さくら」と文字を入力していくと、候補が表示されていきます。
桜新町駅を選択します。
桜新町を選択した後は、キーボードの「確定」をタップ。
桜新町を確定したら、キーボードのボタンが「完了」に変わったので、タップしてみます。
キーボードが消えて、赤いボタンが出現。OKって何だろうと思いつつも、ボタンには件数も表示されてるので主導線なのは分かります。
次は二子玉川を追加したいと思い、テキストボックスをタップ。
テキストボックスに先ほどの検索ワードが残っているので、削除します。
ふた、と入力すると候補の中に二子玉川を発見。選択します。
二子玉川を選択した後、先ほどは確定を押したが、次の駅を早く検索したいと思い、テキストボックスに残ったテキストを削除して検索しようとしてみる。
検索窓のテキストを全て消したら、路線リストに変わった。
先ほど選んだ二子玉川が消えてないか不安になる。
検索窓にテキストがなくなると、キーボードの「確定」が「完了」に変わったので完了をタップ。
ボタンのところの件数が増えているので、二子玉川もちゃんと選択されていることが分かって、安心する。
みぞ、と入力したところで溝の口が表示されたので選択。
再び「完了」を押さなくても次の選択ができるかどうか、トライしてみたくなったのでやってみる。
二子新地も加えてみる。
「ふたこ」と入力すると、二子新地が表示された。
候補には先ほど選択した「二子玉川駅」も表示されるが、ちゃんとチェックが入っている。
確定を押すとキーボードが下がって、ボタンが出現。OKボタンを押して検索へ。
検索結果画面です。
上部に検索条件が表示されていますね。
ちょっと心配だった溝の口もちゃんと条件に入っています。
バイトル(iOS)
バイトアプリのバイトルのお仕事検索です。同業種のタウンワークと違いはあるのでしょうか。
検索窓に駅名を入力しようとして検索窓をタップします。
検索窓をタップすると路線リストの画面を覆うかたちで、画面が表示されます。
さくら、と入力すると候補が絞られて下に表示されていきます。
駅名の後ろに路線名も表示されてますね。
駅を選択すると、検索窓の下に選択した駅が表示されます。
桜新町が選択されたのでキーボードの「確定」をタップします。
キーボードのボタンが「完了」に変わったので、タップしてみます。
キーボードが消えて、みどり色のボタンが出現しました。ボタンには件数が表示されていて、決定する検索に反映できることがわかります。次の駅を追加するために検索窓をタップ。
候補の駅名が消えても、選択した駅は残っているので、これまでに選んだ駅がすぐに分かります。
新しい文字を入力していきます。
「ふた」と入力すると、二子玉川駅が見つかったので、二子玉川駅を選択します。
二子玉川駅を選択すると、駅名が追加されました。
次の項目を追加する際に、今度はキーボードの確定を押さずに操作を行ってみます。
検索窓にテキストがなくなると、キーボードの「確定」が「完了」に変わりました。
ここで完了を押してみます。
キーボードが消えて検索件数が確認できます。
溝の口を追加するために検索窓をタップします。
選択する駅が増えると、駅は画面の右にはみ出していく。
沿線名はここでは表示されなくても良さそう。
今度はキーボードの「完了」を押さない状態で別のテキストを入力してみます。
「ふた」と入力します。
選択済みの「二子玉川駅」にはチェックが入っていることが確認できます。
新しく「二子新地駅」を追加で選択します。
キーボードがなくなり、検索件数と「決定する」のボタンが確認できたので、このまま「決定する」ボタンをタップします。
「沿線・駅から選ぶ」の先頭画面に戻ります。
アコーディオンが開かれた状態になっており選択した駅が分かります。神奈川県の文字が赤になってますが神奈川の駅も選んだためでしょう。
Retty(iOS)
レストラン検索・予約アプリのRettyです。レストランを検索するために、駅から検索してみます。バイトアプリと違いはあるのでしょうか?
Rettyは、そもそも路線リストからの選択は無いですね。
直接入力により駅を選択するかたちです。
検索窓をタップ。
さくら、と入力すると候補が返ってくるので、桜新町を選択。
バイトアプリと違い、桜新町が上に表示されています。位置情報も加味しているようですね。
検索窓のところに桜新町が追加される。
駅を追加する場合は「エリアを追加」を押します。Rettyでは複数の駅を選択するような使い方ではなく、一つの駅を選択したら目的やジャンルを選択して検索、という流れがメインなのでしょうね。
駅を追加すると、再度カーソルが下段に移動し、「エリアを追加」・「この条件で検索」の欄が表示されます。
再度「エリアを追加」をタップします。
「みぞ」と入力し、「溝の口駅」が出てきたので、そのまま選択します。
溝の口が追加されました。後ろに駅名が追加され、入力の古い順に、検索窓の左に見切れていきます。
二子新地を追加するため、「エリアを追加」をタップします。
「ふた」と入力し、確認できた「二子新地」を選択します。
現在選択している二子玉川には特に印はありません。
キーボードに検索ボタンがあるので、すぐに検索できます。
また、検索窓の下にある「この条件で検索」からも検索できます。
バイトアプリには、検索ボタンに抽出件数の表示がありましたがRettyでは件数表示はありません。
検索結果画面です。
選択した駅が二駅表示されていますね。
まとめ
以上、駅名検索から駅を選択して検索するUIを見てみました。今回はバイトアプリとグルメアプリを見てみましたが、バイトアプリは駅名検索からの場合でも複数選択を可能にしていることで、確定という手間が増えてしまうようですが、ユーザーの使い方を想定してくれてるからこそ、なのでしょうね。