人とコンピュータの関係を考えると、二者間には常にインタフェースが存在します。本連載では人とコンピュータを介在するインタフェースに着目し、インタフェースとそれらを世に生み出すプロダクト開発について議論します。Helpfeelは、独自のインタフェースを実装しながら、便利さと楽しさを備えたWebサービスをどのように開発しているのかについてお伝えします。

こんにちは、エンジニアのdaiizです。エンタープライズサーチ「Helpfeel」の機能設計・開発を行っています。Helpfeelは、FAQをはじめ、社内ナレッジの検索や商品の推薦など幅広い用途でご利用いただいています。本稿では、導入先のさまざまな場面での検索体験を向上し、ユーザー自身での問題解決を手助けするためのUI設計について、当社での取り組みの一例を紹介します。

検索を構成する技術

検索サービスを開発する際に多くの労力を割く重要な技術は、当然ながら検索アルゴリズムです。当社では、思いつくままの言葉で答えを探せるサービスを実現するため、質問に対する最適な文書を探す「意図予測検索アルゴリズム」を一から開発しました。

弊社テクニカルフェローの増井俊之が発表した「展開ヘルプ」の論文をベースにして、曖昧な言葉やスペルミスだけでなく、幅広く拡張された表現力でユーザーからの問いかけに応えるべく、今も日々研究を続けています。

もう一つ、アルゴリズムと同じように重要で常に試行錯誤が欠かせないのは「検索UI」です。サービスを訪問して答えを探している最中から、無事に結果を得て次の行動を起こすまで快適に操作してもらうためには、相当な工夫が必要です。

検索するユーザーは「自分の疑問解決ツールとしてこのサイトは最適だろうか?」「自分が入力した内容がシステムにうまく伝わっているだろうか? 」「自分が知らないだけで、より良いキーワードがあるのではなかろうか?」といった不安や不満を抱えながら探しているということを意識して、こうした不安や不満に寄り添えるUIを探究するのも検索エンジニアの重要な任務だと思います。

今回は後者をテーマとして、Helpfeelで実際に開発したUIとその狙いを3つ解説します。

言葉のヒント

最初の例は、検索キーワードの発想を支援する仕掛けです。思い付いたことを直感的に検索ボックスに入力できればよいのですが、困り事に直面したり何かを知りたいと思った際に、適切な検索語をすぐに思い浮かべるのは難しいでしょう。また、最初に思い浮かんだキーワードが必ずしも正しいとは限りません。何度か試行を重ねているうちに、次第に自分が本当に言いたかったことに気付くかもしれませんし、実は勘違いして別のことを熱心に調べていた、というケースもあり得ます。

このような状況において役に立つのが、「類似キーワードの提案」と「再検索のしやすさ」です。Helpfeelはこの2つを同時に提供して検索体験を向上させる「言葉のヒント」というUIを備えています。この機能は下図のように画面の下部に表示されている単語集であり、必要に応じて検索しながら使います。

  • 登録された重要な単語が提示されている様子

    登録された重要な単語が提示されている様子

ここに並んでいるのは検索対象に関する重要単語集であり、書籍の巻末に掲載されている索引と同じように活用できます。対象への理解が浅い場合は、探しものを始める前に軽くこれらの単語に目を通すだけで、その後の結果リストからの情報が選択しやすくなります。自分が知りたい事象に最も近い単語をクリックすると、それがすぐに検索ボックスに入力されるため、キーボード操作をすることなく素早く結果を得られます。

また、検索と同時に、下図のように現在の検索語に関連性が強いキーワードが青色でハイライトされます。この仕掛けが、周辺知識の理解の促進と再検索のしやすさを実現しています。入力クエリの内容に連動して単語のハイライトも変動するので、自身のクエリと検索データセットとの関連性(距離感)をリアルタイムで視覚的に確認でき、検索者に安心感を与えられます。

  • 選択したキーワードの関連語が強調される、より適切な単語を選び直すのも簡単

    選択したキーワードの関連語が強調される、より適切な単語を選び直すのも簡単

ある単語で検索した際に、自分の関心事とずれた結果が得られたり、微妙に絞り込みきれていないと感じたりした場合は、ハイライトされた言葉を選択してもう一度検索することで、ユーザー自身と検索システムとの表現の差を徐々に縮められるようになっています。

また、検索語に派生する関連範囲に足を伸ばして再検索できると考えると、現在の疑問の解決にとどまらず検索対象への理解を自然と深めていけます。つまり、関係する問題への対処法の発見や新しい知識の獲得などを経て、将来直面するかもしれなかった問題の予習的な解決も支援できるということです。キーワードをポチポチと適当にクリックしていくだけで楽しみながら学習できる点で、興味深いUIではないでしょうか。

ランダム表示

次に紹介するのは「ランダム表示」です。ユーザーに検索の勘をつかんでもらうためには、サービス側が自己開示していくことが重要です。先ほどの「言葉のヒント」機能とも似た考え方なのですが、検索する側とされる側との知識量のギャップを小さくしていくことで、より適切な情報の取捨選択が可能になります。

例えば、キーワード入力までの時間に収録されているコンテンツを可能な限り多く目にしてもらうことは、今後の検索に備えた背景知識の獲得に大いに役に立ちます。繰り返し登場する固有の単語を発見できたり、理解の助けとなる基礎知識を学習できたりする絶好の機会になります。

Helpfeelは、画面を開いた直後の初期状態の結果リストに毎回ランダムなページタイトルを表示する機能や、検索ボックスのプレースホルダーとして重要単語を順繰り提示する機能を備えています。また、ある一つの回答ページのタイトル表記を複数パターンの表現に拡張できる仕組みがあり、結果リストを構築する際にランキングアルゴリズムに影響しない範囲でこれらをランダムに選出する仕組みも存在しています。

  • 効果的なキーワードにランダムに触れてもらう仕組み(赤枠内)

    効果的なキーワードにランダムに触れてもらう仕組み(赤枠内)

このように、異なる言い回しに数多く接してもらう過程で、自然と対象への理解が深まり、次回以降のクエリ入力時に使える語彙が充実してくると期待できます。さらに、ランダム表示の恩恵は検索者だけでなく回答ページの執筆者も享受できます。

オプション機能である「オートコンシェルジュ」を用いることで、重要単語集から無作為に選ばれた言葉に関する検索結果が自動で切り替わりながら再生されるので、これを眺めているだけでもページの作成漏れや分かりにくいタイトル表現の早期発見につなげられます。

  • 数秒ごとにランダムなクエリで検索される様子を流し見できる仕組み、右上のピンク色に着色して示した箇所でカウントダウンされる

    数秒ごとにランダムなクエリで検索される様子を流し見できる仕組み、右上のピンク色に着色して示した箇所でカウントダウンされる

見た目の面白さや派手さはあまり無いかもしれませんが、システムとそれを利用するユーザーとのコミュニケーション(情報検索)を円滑にするという意味で、UIの本質を捉えられているような気がします。

書きながら探す

Helpfeelでは、ここまで紹介したようなキーワードの検索に加えて、自然文(日常の会話や作文で使われるような人間にとって自然な文章)をクエリとする検索機能も提供しています。この機能は主にお問い合わせフォームでの活用を想定しています。基本的にはHelpfeelのキーワード検索によって自己解決できる問題が多いですが、それでもなお解決できずに最終的に問い合わせをする、というケースも存在します。

このような状況でも、最後にもう一度だけ探してみることで、お問い合わせフォームの送信ボタンを押す前に解決できる疑問があるのではないか?という思いから開発しました。

この機能では、下図に示すように、フォームに設置されているカテゴリを選ぶセレクトボックスや、テキストエリアでの問い合わせ本文の入力内容に連動して関連する回答ページがサジェストされます。

  • 質問を書いているそばで有益な情報を提示する例

    質問を書いているそばで有益な情報を提示する例

これも、キーワード検索のと同様に、一文字入力するたびにそれに呼応して自動で再検索を実行し、結果が随時変化する仕組みです。あくまで、ユーザーは問い合わせのために文章を書いているだけなのですが、そのそばに目を通してほしいページをさりげなく提示することで「書きながら探す」ことができる仕掛けになっています。

さらに加えて、「入力欄に余裕があるので文章が長くなりがち」や「自分の入力したどの単語に反応して答えが提示されているのか分からない」というような自然文ならではの問題にもUIで対処を試みています。

下図に示したものがその工夫の一つです。

  • アルゴリズムが重要視した言葉を書き手にフィードバックする仕組み、入力文章が長くなるに連れて効果を発揮する

    アルゴリズムが重要視した言葉を書き手にフィードバックする仕組み、入力文章が長くなるに連れて効果を発揮する

上の図のテキストエリアにはユーザーの書きかけの問い合わせ文章があり、この文章の一部分に青色の下線が表示されていることが分かります。ここで下線で強調されているのは、検索アルゴリズムが文脈を考慮して重要であると判定した単語です。

つまり、これはシステム内部で重要視された情報をユーザーに対してフィードバックする仕掛けです。内容に応じてこの下線の位置もリアルタイムに更新されるため、入力中に自分の質問の本質の箇所にシステムが反応できているかを確認しながら書き進められるのです。

そのため、フォームに意図が汲み取られたときに重点的に結果リストを眺めるだけでよく、求める答えが存在するか(質問がシステムに適切に理解されているか)が分からない状況でのリストの探索負荷を軽減できます。また、逆に期待する箇所がハイライトされているにもかかわらず、提示された結果に納得できない場合は、ユーザーは「これ以上長い文章を書かずに、とりあえず問い合わせを送ってみよう」という決断を素早く下せるようになります。

自然文での入力の特徴として、気の向くままに書いた結果、同時に複数の質問が混在してしまうケースがあります。これに気づいた時点で書き直してサジェスト結果の様子を見直すのもよいですが、もっと手軽に文章の一部分に関連する情報を探せると嬉しいものです。

そこでHelpfeelのフォームでは、下図のようにテキストを選択するだけでその範囲に含まれる内容をクエリとして再探索できるようにしました。先ほど紹介した下線フィードバック機能による重要語の抽出に関しても、選択された範囲内で行われます。

  • 文章を再構成することなく聞きたいことを一つずつ解決できる工夫

    文章を再構成することなく聞きたいことを一つずつ解決できる工夫

複数の文章をまとめて移動するため、または削除するためにテキストを選択した瞬間、という、ユーザーが最も必要としていそうなタイミングでこの仕掛けが発動することで、自然な流れでこの機能に気付いてもらえることを期待しています。

ここまで、検索アルゴリズムの力を最大限に生かすためのHelpfeelでのUIの工夫をいくつか紹介しました。本稿を通して、ユーザーに寄り添い、目的達成までのガイドに徹するインタフェースの考え方や作り方が伝わっていたら嬉しいです。

文:daiiz