アドバイザー/lite開発のたつかわです。
先日 ビザスクlite のアドバイザー検索機能のリニューアルを行いました。リニューアルするにあたりいくつかこだわったポイントがあったため、今回はそれらをまとめて記事を書こうと思います。また、ビザスクliteに未登録のユーザーでも利用できる機能となっていますので記事を読みながらご参照いただけるとありがたいです。アドバイザー検索ページには こちら からアクセスできます。
アドバイザー検索について
弊社はビジネス知見を持つ個人（以降「アドバイザー」）とビジネス課題を抱えている法人や個人（以降「依頼者」）をマッチングするサービスを提供しています。ビザスクlite は弊社の専任スタッフを介さずに依頼者自身がアドバイザーを探して依頼するサービスとなっています。
アドバイザー検索機能は依頼者が利用する頻度の高い機能です。この機能の中で課題となっていた部分がいくつかあり今回それらを解消するためにリニューアルするに至りました。
デザインの変更
リニューアル前は検索するとアドバイザーが登録した「話せるトピック」が 1 件ずつ表示される仕様となっていました。「話せるトピック」は 1 人のアドバイザーが複数登録できるものとなっており、同じアドバイザーが登録しているものでも別々に表示されていました。
リニューアル後はアドバイザー単位でキーワードにヒットした「話せるトピック」のみ複数表示されるようにして、ヒットしなかったものは表示されない仕様としました。これに加えアドバイザーが登録した「自己紹介」や「職歴」も併せて表示させるようにしました。これにより、依頼者は依頼しようとしているアドバイザーがどのようなアドバイザーなのか一目でわかりやすい仕様となりました。
検索結果表示速度の改善
リニューアル前は検索結果表示に時間がかかっていたこともあり、今回リニューアルするにあたり Vue Composition API のライブラリである Kong/swrv を使用して検索結果がキャッシュされるようにしました。これによりページを戻る際の UX が改善され、ユーザーのストレスを減らすことができたと思います。 Kong/swrv については先日小柳がZennに投稿した記事があるのでそちらも併せてご参照ください。
バックエンド側は検索チームにも協力いただいて検索 API の修正・改善をしていただきました。リニューアル前は検索結果を表示するまでに2秒前後かかっておりましたが、リニューアル後は検索結果がキャッシュされていない状態からでも0.5秒前後で表示できるようになりました。
その他UI/UXのこだわり
検索結果表示速度の改善以外にもUI/UXの改善をしました。
- Shift キーを押しながら検索すると別ウィンドウが開く
- Ctrl (Command) キーを押しながら検索ボタンをクリックすると別タブが開く
- Tab キーによる移動などのアクセシビリティ改善
- iOS Safari などでオンスクリーンキーボードの return キーを「検索」ボタンとして表示
- ページ遷移時のスクロールの調整
最後のスクロール調整については、キャッシュ済みのページに遷移する際に自然に見えるようにこだわりました。試行錯誤した結果、下記のようにすると自然な動きになりました。画面上部からの距離が 100px 以上の場合にはy座標が 100px のところまで瞬間的に移動させ、その後画面上部までスムーススクロールさせています（スムーススクロールには SweetScroll というライブラリを使用しています）
import SweetScroll from 'sweet-scroll';
const MAX_SCROLL_HEIGHT = 100;
if (window.scrollY >= MAX_SCROLL_HEIGHT) {
window.scrollTo(0, MAX_SCROLL_HEIGHT);
SweetScroll.create({ duration: 1000, easing: 'easeOutExpo' }, window).to(0);
} else {
window.scrollTo(0, 0);
}実際の動作は以下のようになります。
まとめ
冒頭でも触れましたが今回紹介したアドバイザー検索ページは弊社サービスに登録していないユーザーでも使用できる機能となっていますので読者の皆さんにも是非触っていただけるとありがたいです。今後もユーザー動向をチェックしながら本機能を改善していきたいと思っております。
