こんにちは。この頃、検索機能の増強に余念がない広報部1号です。
前回の記事では、検索ボックスに2つのポップアップを実装したことをお知らせしました。今回は、モバイル環境でそれがどこまで使えるようになったのかをお知らせします。
モバイル環境での実装には苦戦していた!
またまた技術的な話になって申し訳ないんですが、以下の2つがよく引っかかるのです。
- トリガー
- スペース問題
トリガーとは?
よく映画などで銃の引き金のことを「トリガー」と言います。弾丸が飛び出す切っ掛けになるそれは、しばしばプログラミングでも使用されます。
トリガーは「何かのきっかけ」または「その切っ掛けで発生したもの」を指す言葉なんです。・・・と、テキストだけでお話してもイメージが浮かび辛いので具体例を挙げます。
- トリガー1:虫眼鏡のアイコンを押す
- トリガー2:検索ボックスをタップする
- トリガー3:検索ワードを入力
これらが、トリガーです。そしてデスクトップ環境と比べると、虫眼鏡のアイコンを押すという1プロセスぶん多いこともわかります。
トリガーが1つ多いと、プログラム構文もそのぶん複雑になり組み込みが困難になりやすいです。
全く干渉せず問題なく動作してくれるものがあれば、してくれないものもありまして・・・今回の場合、問題があったので暫く「検索候補」機能は出現しない仕様にしておりました。
それでも決定ボタンを押せば検索結果にはジャンプするので、一応これでもサイトとして成り立ってはいるのですが、やはりデバイスによるUI/UXの格差は極力減らしたかったので、今回はソースコードを見直して検索候補機能を追加した次第です。
スペース問題について
モバイル端末は、画面内にキーボードをしばしば表示します。画像を見ると、ポップアップされた検索候補とキーボードがある程度の距離が空いているのがわかると思います。
これがもしも重なっていたら、スクロールしたら見えるかもしれないけどややストレスがかかることがよくわかると思います。誤タップをしてしまったり、やり直しをする必要が出てきたらスマートどころか逆に横着になってしまいますよね。
ユーザーにそのつもりがないのに勝手に検索キーワードがポップアップされたり、画面がズームアップされたり・・・。
「意図せぬ動作」が起こるとストレスがたまります。だから、こういった動作が起こる温床は排除していたのです。
まとめ
画面が広いと沢山のものが一度に置けます。
逆に画面が狭いと、畳んだり、何をどれだけ見せるのかをよりシビアに選定していく必要があります。
また、畳んだことで新たなトリガーが生まれ、それが原因で他のデバイスでは出来る動作が難しくなることもあります。
現在、モバイル環境でも検索候補機能は動きました。なので本実装をしたのですが、クイックリンク機能は調整の結果、リリースをするのはデスクトップ環境のみとし、モバイル環境では見送る形となりました。検索候補機能同様、マストな機能ではない「あれば便利な機能」だからです。
言い訳がましくなってしまうかもしれませんが、それでも弊社のWEBサイトはどんどんレベルアップを続けていますので、これからも楽しみにしていてくださると幸いです!
では本日も読んでくださり、誠にありがとうございます。