デザイン知識がないプログラマーが「見つけやすさのデザイン」を考える

ここまで で Railsアプリケーション構築のフロントエンドの設定まで完了。ここからはWebアプリケーションのサイト構成とページ構成を検討する。

l-chika.hatenablog.com

検討にあたっては、サイト・ページ構成をーから構築した経験がないので、取っ掛かりとして 情報アーキテクチャ 第4版 ―見つけやすく理解しやすい情報設計 の内容を参考に進めてみた。

最初のサイト・ページ構成案 (「シンプルすぎる」情報モデル)

ザックリ前提・要件

• だれ向け：電子工作に興味がある人が訪れるサイト
• どんなサイト：電子工作にまつわる製品が網羅できるページがある

サイト構成

ページ

Bootstrapを学習するついでに、ワイヤーフレームではなく、いきなりviewを作成。

メイン

---

製品一覧

---

製品詳細

---

と、これでは全然イケてないので改修を試みる。

ユーザの「情報ニーズ」を考える

「ユーザーが何を求めているのか？」を考え、その特性を分類し整理してみる。

それにより、

ユーザーの主要情報ニーズと情報探索行動の典型を知ること。ユーザがシステムに何を求めているかの理解。

を体感。

本書から引用。

• 既知情報検索：探しているものが何か、誰に聞けばいいか、どこで探せばいいのかを知っている
• 探求探索：自分が本当に探しているものを把握してない。ユーザは検索やブラウジングのプロセスで自分が何を求めているかを知る。「正しい」答えに対する明確な期待もなければ、探しているものをはっきりと知る必要もない。ユーザはいくつかよい結果を得られれば満足で、それを踏み台として次の検索を繰り返す
• 全数探索：「あらゆる物を手に入れたい」。ユーザーは特定のトピックに関する何もかも、一つ残らず探している。ユーザーは多様な言い方で探しているものを表現でき、さまざまな用語を駆使して忍耐強く検索を続ける。他の情報ニーズに比べてより多くの検索結果を辛抱強く渡り歩く
• 再検索：これまでに見つけた便利な情報の断片を再検索する。「あとで読む」サービスを使って、もっと時間のある時にページに戻る

で、そこから自分なりに解釈。

分類	ザックリと表現	必要な機能
既知情報検索	能動的な人	フリーワード検索
探求探索	目的がふんわり	選択肢や何かの括りでの検索
全数探索	とにかく見る	???
再検索	再訪者	お気に入り

当初の自分が想定したユーザーとその動きを考えると、「探求探索」が該当するユーザーのような気がしてきた。 本来は全分類について検討するのだろうが、まずは「探求探索」に対してどうすれば良いかを考える。

そこで、

1. オーガニック検索で「電子工作 キット 入門」のようなワードで流入
2. メイン or 製品一覧にランディング。
3. 興味が湧く製品詳細に導く

というアウトラインを決めて、「探求探索」のユーザーの目的(ゴール)を設定する。

そうした時に、現状の構成では、製品に興味をもってもらい、サイトを回遊するたのフックが弱いと感じた。 そこで製品の「括り」のような取っ掛かりが良い気がした。

改変後

製品を「特徴」で分類し、分類での絞込ができるようにしてみる。

• メインに「特徴」導線を追加。特徴での絞込結果に遷移
• 製品一覧に「特徴」での検索を追加

サイト構成

ページ

メイン

---

製品一覧

---

という、大したことない改修ですが、なんか漠然と導線を作ったのではなく、体系的に自分で考えて実装をしたことで「 構成を真剣に考える 」良い経験になった気がする。

最後に

ユーザーの主要情報ニーズと情報探索行動の典型を知ること。ユーザがシステムに何を求めているかの理解。

とりあえず、情報アーキテクチャ 第4版 ―見つけやすく理解しやすい情報設計 からヒントをえて、気づいた点から対応。 これから更に読み進めて

• 情報の組織化
• ラベリング
• ナビゲーション
• 検索

という要素を検討していく。

本書は若干内容が発散的にも感じる部分もあるが、情報アーキテクチャという観点から、サイトを構成する前提、要素整理やアプローチの方法等のアイデアを得るには良い本だと思った。

こういった事に疎かった自分にとっては新たな気づきが得られた。

近い内容で 情報アーキテクチャ 第4版 ―見つけやすく理解しやすい情報設計 も参考になりそう。

関連する本

情報アーキテクチャ 第4版 ―見つけやすく理解しやすい情報設計

IAシンキング Web制作者・担当者のためのIA思考術