HERPのデザイナーSmithです。今回は、HERPのヘルプサイトをOOUIの考え方を取り入れて改善した事例についてまとめます。
リニューアル前のヘルプサイトは、複数プロダクトの記事が散らばっていたため、プロダクトをある程度理解していないと検索性に乏しく、初見では構造が理解しづらい状態でした。
今回、ユーザーが画面から見て取れる情報や画面に表示しているオブジェクトを元に分類し、画面に即した構造を用いることで検索性が向上するように努めました。
複雑な情報を整理するために、ユーザーが認識しているオブジェクトを基準に情報設計する、という考え方がヘルプサイトにも適用できる一例として参考になればと思います。
これまでのHERPヘルプサイトは、3つあるHERPのプロダクトの情報が混在していました。
158ものヘルプ記事が存在し、どれがどのプロダクトのものかも一見分からず、ユーザーが目当ての情報に辿り着けない状態になっていました。そのため、ヘルプサイトに載っている情報に関しても、ユーザーから頻繁に問い合わせがきていました。
そこで、問い合わせに対応するコストを削減するために、リニューアルを行うことになりました。
今回のリニューアルでは、ユーザーが目当ての情報に辿り着きやすくするため、プロダクト上で認識できるオブジェクトをもとにヘルプサイトに載せる情報を整理しました。
トップページは、プロダクトごとの「操作マニュアル」と「よくある質問」に分けました。
操作マニュアルは、ユーザーが実際にHERPのプロダクト内で触れる機能ごとに説明しています。
ソフトウェアは、用途が明確なリアルプロダクトに比べ、同じ機能を有していたとしても機能名が違ったりする場合があり、ユーザーの認知に差が生まれやすいと思います。
そのため、提供している画面と配置しているオブジェクトを基準に説明を行うことで、認知の差を最小限にできるのではないかと考えました。
ここからは、どのように大量のヘルプ情報の整理を進めたのかについて、ポイントをまとめます。
まず、ユーザーが認識できる(=画面に見えている)オブジェクトを基準に説明するために、実際の画面からオブジェクトを抽出していきます。
例えば、この画面で確認したオブジェクトには「応募情報」「応募経路」「選考ステップ」「メモ」、「ファイル」「タイムライン」「評価」「プライベート」「応募者メール」「エージェントメール」「選考予定」などがあります。
そして、確認できたオブジェクトとその関連性図に起こしていきます。
抽出したオブジェクトは、画面に配置されている順（左上→右下）に従い列挙し、オブジェクトごとに用意されている基本機能（「作成」「読み出し」「更新」「削除」）の有無を明記しました。
明記したオブジェクトと用意された基本機能に対して、操作手順がすでにあるもの・ないもの・曖昧なものを区別するために、既存記事の洗い出しとコンテンツを再確認し、すでにあるものは、どのオブジェクトのどの機能に該当するかをまとめていました。
既存記事の分類・配置が整ったので、サービスガイドの骨格を設定します。前述のとおり、課題は、混在した記事が故にどの場所にどんな記事が配置されているのかが不明瞭であったため、「できること」と「できない・わからない」に区分しました。
結果的には、できることは、操作マニュアルとして提供し、できないこと・わからないことは、お問い合わせいただいた声をよくある質問としてまとめました。
問い合わせいただく声も「できるのか、できないのか」「できるかどうかわからない」など操作に関すること、機能の有無や機能詳細に係る内容が多いため、未提供の機能や機能不足以外は、操作マニュアルに動線を設置する設計にしています。
上記の改善を行い、2022年10月に新しいヘルプサイトをリリースしました。
以前のものに比べて格段に情報が充実し、記事量も約2〜3倍になりました。ユーザーへのヒアリングや利用状況などの調査などはまだまだこれからですが、以下のような効果が生まれています。
==
・社内のCSから、情報が集約されたことでユーザーに案内しやすくなったという声が上がる
・特にオンボーディング期に、これまで都度Googleドライブ等のリンクなどで共有していたコンテンツもヘルプサイト内に集約され、一元化できたことで案内しやすく
・ヘルプ記事を利用したプロダクトの仕様の共有が行われるなど、プロダクトチーム内での情報共有にも利用されている
・サイト内の構造が整理されたことでメンテナンス性が向上し、機能がアップデートされた際のヘルプ記事の追加や編集もよりスピーディーに行えるように
==
今回のプロセスは、ヘルプサイトに限らず基本的なプロセスですが、HERPデザインチームとして、常にユーザーが認識しやすい形で構造・骨格から情報設計をしていくように心がけていきます。