はじめに
「株式会社ビットキー Advent Calendar 2024」6日目の記事は、Software QCチーム所属の田上が担当します。
Software QAチームでは、業務で参照するドキュメントを「Notion」に集約しています。
集約したページは「Software QA Anything」と呼び、チームのポータルページとして活用しています。
以前まで、ポータルページの整理が細部まで及ばず、ページのカテゴライズが曖昧な状態でした。
取り扱う情報が多く、日々の業務において、さまざまな用途のページが追加されるからです。
しかし、ポータルページの使いやすさは作業の効率を左右します。
そこで今回、これらの課題を解決するべく、筆者がポータルページの刷新を担当しました。
ただ作り替えるだけではなく、使い心地を追求したいと考え、様々な工夫を行いました。
本記事では、ポータルページ刷新で行った工夫についてご紹介します。
対象読者
- Notionを活用したドキュメント作成を行う方
- 社内ポータルの作成を行う方
この記事を読むことの効果
- Notionを使った表現の一例を知り、ドキュメント作成の参考にできる
- 使い心地を意識した社内ポータルを作成できる
どのように変わったか
刷新の結果、ポータルページは以下のように変わりました。
◼︎ Before
▲ 刷新前のサンプルです
◼︎ After
▲ 刷新後のサンプルです
工夫したこと
今回の取り組みで工夫したことは以下です。
- Webデザインについて調べてみた
- 課題を洗いだした
- 対象のページを洗い出した
- 階層構造を考えた
- ページをカテゴライズし、グルーピングした
- グループを包括するページを作成した
- 階層を決定するマトリクス図を作った
- ページのタイトルを具体的にした
- 包括ページで動線を分岐させた
- 重要な情報をファーストビューに配置した
1. Webデザインについて調べてみた
「ポータルページを整理する」という目的を達成するには、具体的な解決策が必要です。
まずは発想の手がかりとなる知識を得ることが重要だと考えました。
そこで、Webデザインに関する簡単な情報を調べました。
その結果、Webデザインにはさまざまな用語や考え方があることを知りました。
以下は知ったことの例です。
- 「広く浅い」階層と「狭く深い」階層
- インタラクションコスト
- ファーストビュー
- ナビゲーション
2. 課題を洗いだした
ポータルページを刷新するにあたり、課題を洗い出しました。
目的を達成するには、課題を整理し、道筋を立てる必要があるからです。
そこで、Notionにタスク管理用のデータベースを作成し、簡易的な課題管理を行いました。
これにより、目標達成に向けた具体的な行動が明確になりました。
3. 対象のページを洗い出した
ポータルページの構成を考えるため、対象のページを洗い出しました。
ページの総量によって、適している構成が変わります。
既存のページを数えたところ、81ページあることが判明しました。
ページの総量が多いため、以下を意識したいと考えました。
- ユーザーが迷わない階層構造を作る
- ページのカテゴライズを明確にする
- ページのタイトルを具体的にする
4. 階層構造を考えた
階層構造は2つのパターンがあります。「広く浅い」と「狭く深い」です。
🌟「広く浅い」階層の特徴
目的のページに到達するまでの操作が少なく、ユーザーへの負荷が低いです。
1ページに複数のページが並ぶため、タイトルを具体的にする必要があります。
🌟「狭く深い」階層の特徴
目的のページに到達するまでの操作が多く、ユーザーへの負荷が高いです。
1つのカテゴリに複数のページが連なるため、カテゴリの抽象度が高くなります。
🌟 階層構造を考えた結果
ユーザーへの負荷が少ない「広く浅い」階層が適していると考えました。
5. ページをカテゴライズし、グルーピングした
整理された構造を作るには、ページを適切にカテゴライズする必要があります。
カテゴリによってページの関連性が示され、配置場所を推測できる状態が理想です。
そこで、ページの属性を抽象化し「テスト活動」「チーム運営」「タスク管理」に分類しました。
次に、それぞれのカテゴリに連なるページを以下のようにグルーピングしました。
| テスト活動 | チーム運営 | タスク管理 |
|---|---|---|
| プロダクト QAチーム | 運 営 | To Doリスト |
| 議事録 | アセット | 周 知 | ー |
| 計 画 |
文 化 | ー |
| 資 料 | 教 育 | ー |
| 備 品 | 技 術 | ー |
| ー | 記 録 | ー |
| ー | 整 理 | ー |
6. グループを包括するページを作成した
グルーピングしたところ、特定のグループにページが偏りました。
全てのページを1階層目に集約すると、画面に収まらず、スクロールの手間が発生します。
そこで、ページが多いグループは「包括ページ」を作成し、まとめました。
しかし「包括ページ」により、グループ間で階層の深さに差異ができました。
これらを踏まえ、ページの階層を決定する規則を定義したいと考えました。
7. 階層を決定するマトリクス図を作った
ページの配置規則を定義し、各自で管理できるよう「階層を決定するマトリクス図」を作成しました。
その際「分類」と「重要度」の概念を作り、ページに割り当てました。
分類が管理系かつ、重要度が高いページを「グループA」とし、1階層目に配置しました。
「グループB,C,D」に該当するページは、2階層目に配置しました。
このマトリクス図は、階層の決定のみに限らず、ページの並びを判断するための材料になります。
| 分 類 | 説 明 |
|---|---|
| 管理系 | 情報の運用や管理を行うページです 繰り返し参照されます |
| 詳細系 | 情報の解説を行うページです 特定の場面で参照されます |
| 重要度 | 説 明 |
|---|---|
| 影響度 | ページの有無によって及ぼす業務への影響度です |
| 頻度 | ページの参照頻度です |
8. ページのタイトルを具体的にした
「広く浅い」階層は、1つのページに複数のページが並びます。
したがって、タイトルから用途を推測できるようにしたいです。
そこで、ユーザーに誤った認識や曖昧な印象を持たせるタイトルがないかを精査しました。
該当するものは、より具体的なタイトルへ変更しました。
9. 包括ページで動線を分岐させた
参照するページはユーザーの立場によって異なります。
そこで、ユーザーを「メンバー」と「特定のメンバー」に分類し、包括ページで動線を分岐させました。
これにより、ページを探す際に発生する「精神的な負荷」を低減させました。
▲「包括ページ」のサンプルです
10. 重要な情報をファーストビューに配置した
Webサイトを開き、最初に目に入るエリアを「ファーストビュー」といいます。
ファーストビューの構成によって、ユーザーの離脱率が変わるそうです。
この考えは、ポータルページの刷新においても活かせると思いました。
これらを踏まえ、重要な情報をファーストビューに配置しました。
🌟 重要な情報の例
❶ Software QAチームの目標
当初、ページのトップに「目標を掲載してほしい」というご要望がありました。
しかし、ファーストビューに目標を含めると、参照頻度が高い情報を配置できません。
そこで「Software QAチームの目標」を掲載したカバー画像を作成しました。
カバー画像とは、ページのトップに任意の画像を表示させるNotionの機能です。
これにより「ユーザーが求める情報」と「チームが伝えたい情報」の双方を両立できました。
❷ ページの紹介
初めてページを訪れたとき、ユーザーは瞬時に「自身に必要な内容であるか」を判断します。
そこで、判断の手助けができるよう、ファーストビューに「ページの紹介」を配置しました。
判断は直感的に行われるため、シンプルな説明を心掛けています。
❸ ナビゲーション
ヘッダーとフッターに、クリックで各カテゴリに移動できる「ナビゲーション」を配置しました。
ナビゲーションはページを案内する役割を持ちます。
これにより、目的のカテゴリへ素早く移動できるようになりました。
意識したこと
今回の取り組みで意識したことは以下です。
- インタラクションコストの低減
- バイアスに囚われない
- 記憶に残る3つの要素
1. インタラクションコストの低減
ポータルページの刷新では常に「インタラクションコスト」の低減を意識しました。
🌟 インタラクションコストとは
サービスを利用する上で、ユーザーにかかる負荷の総量を「インタラクションコスト」といいます。
負荷は「精神的な負荷」と「身体的な負荷」に分類できます。
| 負 荷 | 説 明 | 負荷が高い例 |
|---|---|---|
| 精神的な負荷 | 「読む、覚える、理解する」など、ユーザーの精神面にかかる負荷です | - 文章が長い - 目的の場所が分かりにくい - 内容が理解しにくい |
| 身体的な負荷 | 「クリックする、スクロールする、入力する」など、ユーザーの身体面にかかる負荷です | - 階層が深い - スクロールが長い - 手順が多い |
🌟 インタラクションコストを低減するには
以下の意識が大切です。
| 意識すること | 説 明 |
|---|---|
| 一貫性を保つ | デザインルールに一貫性を持たせることで、操作が予測しやすくなります |
| シンプルにする | シンプルにし重要な情報を際立たせることで、選択にかかる負荷を低減できます |
| 共通概念を使用する | 星マークは「お気に入り」虫眼鏡は「検索」など、共通概念を使用することで、解釈にかかる負荷を低減できます |
2. バイアスに囚われない
ポータルページの刷新に役立てるため、Software QAチームでは事前に「ポータルページの使いやすさ」に関するアンケートが行われました。
アンケートの結果には、メンバーから頂いた意見が集約されています。
しかし、具体的な意見に注目すると、バイアスに囚われてしまう恐れがあります。
そこで、大まかな素案が完成するまで、アンケートの結果を参照しないようにしました。
その結果、自由な発想を活かすことができました。
3. 記憶に残る3つの要素
筆者は情報を提示する際、3つの要素に分けるよう意識しています。
「3」という数字は美しく、安定感があるからです。
さらに、3つの要素を繰り返すことで、リズム感が生まれ、人の記憶に残りやすくなります。
これらを踏まえ、以下を行いました。
🌟 三幕構成で展開する
「三幕構成」とは、物語の表現に使われる手法です。
物語の構成を「始まり」「中間」「終わり」の3つに分けて展開します。
この手法は、情報の整理においても活用できると考え、ポータルページを以下の三幕構成にしました。
| 構 成 | 説 明 |
|---|---|
| 始まり | ページの自己紹介に該当する情報を配置しました - カバー画像 - ページの紹介 - ヘッダー (ナビゲーション) |
| 中間 | ページの内容に該当する情報を配置しました - ページ |
| 終わり | ページの最終地点であることを示唆する情報を配置しました - フッター (ナビゲーション) |
🌟 短期記憶に配慮する
人が一時的に保有できる記憶を「短期記憶」といいます。
記憶の保有期間は数十秒であり、意識しないと「長期記憶」に移行されません。
また、記憶の容量には限りがあり「7±2」もしくは「4±1」の情報単位が限界とされています。
そこで「4±1」の最小値である「3」を使い、以下の場面で情報を3つに絞りました。
| 場 面 | 説 明 |
|---|---|
| ページをカテゴライズするとき | 「テスト活動」「チーム運営」「タスク管理」の3つに分類しました |
| カバー画像に目標を掲載するとき | 「Software QAチームの目標」に焦点を当て、3つの目標を掲載しました |
メンバーから頂いた声
新しいポータルページの使い心地をメンバーに聞いてみました。
感想
ポータルページの刷新を通して「使い心地の良さ」を追求できたと思います。
活動の中でも、学んだ知識を形にする過程が新鮮であり、楽しかったです。
目前の課題を解消するだけではなく、能動的に取り組むことが、より良い成果を生むのだと思いました。
最後に
今回の活動によって得た経験は、あらゆる場面で活かせると思います。
これからも、過程を楽しみながら、新しい経験を糧に成長していきたいです。
以上、ポータルページ刷新で行った工夫についてご紹介させていただきました。
Discussion