情報システム技術論’02 ＃ 4
久野靖∗

2002.6.13

1

はじめに

2.1

□ 「ホームページ」って何ですか?

□ 今回の内容…

□ (1) ブラウザの「ホーム」ボタンで行くページ• 3 章「サイトデザイン」□ (2) Web サイト/Web プレゼンテーションの起点のページ• デザイナはどういう風に Web を作っているのか?

2ホームページ←☆
□ 機能その 1…

サイトデザイン• 「ここはどこ?」「このサイトは何?」に答える□ とある調査• これらがはっきり分かるように→大きなロゴ、目的の説明• 「簡単な問題の回答をホームページで探す」→できた人 42%• はじめてのユーザがターゲット• 「Web サイトで」かと思ったが「ホームページで」み □ 機能その 2…
たいだ!
• ナビゲーションの起点• 「求人広告を探して申し込む」→ 26%• 階層構造のトップ…とは限らないかも• もちろん、ダメなサイトを特に用いたわけではない• よく訪れる人のための機能を入れ込んでしまう (例:• 50% × 50% = 25% → 1 個所でもダメなら全体はも航空会社→予約機能)
っとだめ• ニュースや宣伝→まあ分かるがあまり多くしないの□ もし、ホームページだけで済まない作業だと→さらにが吉ずっと悪い!
• 例外: ニュースサイトのホーム (しかしそれでも、特定事項の記事を探しに来る人は多い)• WWW は文書を読むための環境としてデザインされている□ ユーザは検索が好き、リンクを辿るのは嫌い• 何らかの作業を行なうための環境ではもともとない• 従って検索機能は必須 (そうなの?)• (「何らかの作業を行なうための環境」だったらどう□ まとめると…(1) サイトの内容、(2) ニュース、(3) 検したと思うか?)

索、が 3 大機能

□ ゆえに、「何かをうまく行なってもらう」には→「シン• ダメな例…p146〜p150

プル」を何よりも優先する必要がある□ よくない例…

ページの幅はどうする?

• 「工事中です」のページ (p143)

2.2• 「?」が検索機能を表しているページ (p143)□ 「幅を決めてはいけない」(イントラネットを除く)• どうしてもやりたければ 600 ピクセル以下に• 1995〜1997 年の調査→ 525〜598 ピクセルが平均であった• 「liquid デザイン」→幅がいくつでもいいように作るのがよい∗ 筑波大学大学院経営システム科学専攻

1

2.3

スプラッシュページ

• メタファに合わせてサイトを作るのはいまいち…
□ メタファの利点…

□ …「Enter」とかだけ書いてあるページ…ナゼ?
□ スプラッシュページを作る理由• デザインの統一感• ユーザの理解を助ける• ウェルカムメッセージを見せる• ナビゲーションなどの要素なしにロゴなどを見せる□ 例:• 一定時間待っていると「自動的にホームへ移動」

e コマースでの「ショッピングカート」• カートに入れた商品はまだ購入はしていない→スー□ そんなものは無駄だから作らない方がよい

パーと同じ• しかし完全に同じというわけではない…

• 最初のページから直接有効なページであるべき□ 完全に同じでないところが色々ある

2.4

ホームページと内部ページ• 5 個買うのに、5 買い取り出してカートに入れる必要はない□ ホームページではサイト名などを大きく示す• キャンセルするのに元の棚に戻す必要はない• では他のページではサイト名は要らないか?

• これらの違いが混乱やトラブルをもたらすことがある□ 他のページでもよそからそこへ到達することはある□ 意味のないメタファの例 (p158〜p161)• 従って「何のサイトか」は分かるようにするべき□ 「ショッピングカート」は広く使われているのでもはや• しかし大きく表示する必要はない→本来の内容を重視

メタファというよりインタフェース標準□ ホームページへのリンクはどのみちすべてのページに入• その標準的な動作に一致している限りにおいて、ユーザは何も新たに学習しなくて済む→大きな利点

れる (ホームページそのものには入れない!)• 逆に、「ショッピングカート」が適していなくても標• ロゴマークも入れるのだったら、それをホームへのボタンにするといいかも準として確立しているためそれに従わざるを得ないケースも• しかし気が付いてもらえないかも→ボタンやリンクはやはり要る□ 「Shoping sledge」(ウインタースポーツのサイト) →ユーザは???

□ 有名でないサイトほど「ここは何」という情報を少し増
やす

2.7
2.5

深層リンク

ナビゲーション

□ Web は広大な空間→「単にクリックするとどっかへ行く」
ではうまく活用することが難しい□ 「直リン禁止」はよくない…前に出た□ 3 つの質問に答えられる必要• 入口は多数あってよい• ここはどこ?

• ホームページを通ることを強制→ユーザにそのサイト特有の規則を学習することを強制していることに• 今までどこにいたの?

なる• ここからどこへ行くの?

• affiliate program

2.8
2.6

メタファ

ここはどこ?

□ 最も重要な質問 (これが分からないと他の質問も無意味)□ ウェブデザインではメタファの使用が多い□ 2 通りの形で答えを示す必要• 見た目楽しい、ひきつける• WWW 全体の中でどこにいるのか→各ページのロゴ等• 一方で本来の目的 (ユーザに使いやすい) を置き去りにする危険• サイト内のどこにいるのか→色々な工夫

2□ 普通のサイトと大幅に違うことをすると評判が悪い

2.11• ユーザの予想を裏切ってはいけない

サイト構造□ 情報アーキテクチャ(information architecture) →コンテンツとその提示構造の両方からの構造 (設計) →• 極端に変わったインタフェースはよくない

使いやすさのために本質的□ WWW 中のどこ→全ページにロゴマークを□ ほとんどのサイトは階層構造→単に階層になっていれば• いつも同じ位置に表示されるべき→左上隅がよい

いいというものではない→どういうことが問題?

□ サイト内のどこ→• 直線構造も部分的にはあってよい• マップを常に表示し、その中で「あなたは今ここ」を □ 構造を設計すること (成行きまかせが実はとっても多い)
ハイライト□ 組織図をそのまま構造にしないこと• 階層構造サイトなら「ルートからここまでの経路」を• 責任分担は楽だろうが、ユーザはあなたの企業がど表示
んな部署に分かれているかは知りたくない• アイコンバーなどで「今いる位置」が分かるようにする□ ユーザの視点からの分類・階層構造が重要「製品」「人材」「投資」など

今までどこにいた?

2.9• 各ページで階層の各段階の分類がすべて表示されていると現在位置が分かりやすい□ どこから来たかは単純な HTML ページでは表示しようが• 各階層での他の (隣の) 選択肢まで見られるとなおす
ばらしいない• ブラウザの「戻る」ボタン/履歴リストは有効な機能• 訪問したリンクは色が変わるのも有効 (標準の色の2.12ままにするのがよい)

階層の幅と深さ• 同じページに何回も行ってしまうことを防ぐのはと □ 幅優先デザイン→例: news.comても有効• 全ページ左側にトップレベル選択肢のリストが並ん□ ブラウザでもっと 2 次元的な「地図」を作ってくれるとでいる
いいと思う…
• このために 20%もの領域を全ページで割く価値はあるのか?

• 中村さんの研究?

• ロゴマークとしての役割は確かにある□ 深さ優先デザイン→例:

これからどこへ行く?

2.10

useti.com• breadcrumbs(パンくず) →ホームからここまでの経□ 見えているリンク、見えていない行き先まで含めて提示

路を常に表示できると有効• 階層関係がきちんとしていないと効果がない□ ハイパーリンクの分類□ 幅と深さと両方入れることもできる→スペースを取る• 埋め込みリンク→文章の中に埋め込まれている• 構造リンク→サイト構造に従ったリンク。「上」「次」
より具体的な内容つきにした方がよい• 階層メニューのように DHTML を利用する方がよさそう□ Fisheye View →現在いる付近だけクローズアップして• 連想リンク→これも関係ありますよ、という情報

詳しく□ スタイルは「青い下線つき」という標準に従うのがベ□ Sun MicroSystems の例→ L 字型→上のバーでトップのスト

選択肢、左側でその中の選択肢を表示→巨大だが構造が• ボタンやメニューなどはよく見ないと分からないし、訪問しても色が変わってくれないという問題がある。

3

整理されたサイトむけ2.13

ユーザコントロール

検索機能

2.17

□ 従来のインタフェース→デザイナがユーザの動きをコン □ 調査→ユーザの 50%は検索優先、20%はリンク優先、残トロール

り 30% は混合型□ WWW →どのサイトも一瞬しかいない→学習してもらうこ• 検索する人が多いからといって、構造がいい加減でとは無理→ユーザがコントロールするように→標準的ないいわけはないスタイルに従う• 検索で見つけた後動き回るのにも構造が重要• サブサイト限定の検索はあまりよくない (サイトの2.14構造を分かっていないユーザが多い) ←どうかな?

情報の山の管理□ GUI → Alto や Mac の文化→システム内のドキュメント

2.18

数はごく少なかった□ WWW → 10 億ページ、数億のユーザ→現在のブラウザが□ 「あなたは犬と猫を飼っています。あなたのペットたちによいかは?
□ もっとソフトの機能によるサポートが必要では (例:高度な検索関する情報を検索するには?」→「cats AND dogs」→失敗

動的サイトマップ)• 論理式を用いた検索はしない方がよい• サイトマップ情報を XML で配付してブラウザがマッ• 簡単な検索機能とは別に用意するのならそれでもよいプを表示するとか…

2.19
2.15

ナビゲーションを散らかさない方法

検索結果の表示□ 確率の高いページから順に表示する (ユーザは上から見て行く)□ 集合化→複数のものを 1 つにまとめる (サイト自体がそう)□ 同じページが複数回出てこないようにする□ 要約→縮小版や抜粋を見せる• よい検索結果を出すのは工夫必要□ 絞り込み→あまり価値がないものは削る• 例:

Google のページランク/グループ化□ 切り取り→先頭だけ見せる等→詳細はリンクをたどると見える

2.20□ 例→サンプルだけ見せて「残り○○個」

Meta タグによる指定□ 要 約 →<meta name="description" content="要 約文">

2.16

サブサイト

□ 検索語→<meta name="keywords" content="語 …">□ 巨大なサイト→それを 1 つの構造で統一するのは難しい• 人間が指定したものの方が自動抽出よりもずっとよいから□ まとまった部分構造→サブサイトとして分離• 親サイト側からはホームページで代表させられる

2.21• サブサイト内ではそれ単独で自立した構造を持ってよいキーワード□ 従来の情報検索と比べて、WWW ではユーザが入れる語数• スタイルやナビゲーションの仕組みなどは親サイトと共有できるが多くなっている• WWW は情報量が巨大なので、語数を多くして絞る必要□ 検索語の入力欄は十分幅広くした方がよい→語数を多く入れてくれる→精度が高まる□ 結果の提示時に「検索語があった個所」を強調表示しつつその周辺を見せてくれる→実際に行ってみなくても判断できる

4

2.22

URL のデザイン

2.26□ 「/」を使ったのはよくなかった…Tim

まとめ□ サイトデザインの問題の多くは技術の進歩で解決が可能□ 「http://」は省略されてしまうことが多い (USA では。

• 現在のところはまだ実現していないだけいいのか?)• (本当にそうなのかどうなのか、久野は疑問)□ 「www.company.com」と「company.com」と両方用意し□ 問題は「ユーザビリティが人の手を借りていること」←

た方がよい

本は誤訳?

□ 分かりやすいドメイン名を押えることはとても重要• すべてのデザイナーとライターが協力する必要がある□ ユーザは URL を頼りにナビゲーションする• どんなに検索が進歩しても内容がヘタレだったらどうにもならない• URL の先はどうなっているか示せるといいのだが…
• 意味のある名前を各要素に使うのがよい□ 会社のニーズではなくユーザのニーズを指針とするべき• 途中から先を削除すると上の階層のページになるのがよい• よい (ユーザ指向の) インフォメーションアーキテクチャ□ URL の規則

• よいリンクのつけ方• できるだけ短くする。短いほど誤りが起きにくい• よい見出しのつけ方• 一般的で自然な言葉を使う。知っている言葉は覚えやすい□ 今日は「悪いサイト」だらけ→「良いサイト」が増えて• すべて小文字に。混在すると記憶が大変。

ユーザが悪いサイトを拒否するようになって欲しい• 特殊文字は避ける。区切りはハイフンだけ使う等。
• 「o」と「0」、「l」と「1」

2.23

URL の保存□ URL が腐ってたどれなくなってしまうのは最低

3

各自のサイトデザイン発表4実践編□ だいたいテキストの指示どおりにナビゲーションデザインしたプレゼンテーションを作ってみた→スタイル指定• 内容を変更したければ URL は同じで内容だけ差し替してみるえる□ 演習方法:• 定期更新コンテンツは恒久版 URL と対で広める• 「cd」でホームディレクトリに行く

2.24

URL の広報• 「tar xvpf /u1a/kuno/work/ist03.tar」を実行• 各自のディレクトリ WWW の下に「lang」ができるの□ すべての製品にその製品紹介ページの URL を入れるべし

で、この下のファイル「std.css」を色々手直しして• パッケージに印刷で入れるのは簡単

みる• 「http://w3in/ ユーザ/lang/」で見られる□ 古い URL もサポートはしないといけない• 古い URL のアクセスに対して自動的に別ページに誘導できる (サーバの機能)

2.25

4.1

□ まずはページ群をひととおり見てください

掲示板は…?

• どのような構成になっているか分かりますか?

□ ユーザとスタッフが議論できることがよいとする意見も…

• ナビゲーションのやり方は分かりましたか?
• どのような問題があると思いますか?

• 巨大サイトではとても全部に対応しきれない、大変すぎ• ユーザどうしで議論してもらったら?
れて大変

準備 1

→喧嘩とか荒5

4.2

準備 2

4.6

仕上げ…

□ まず各ページが大きく 3 つに分かれていることを確認→ □ 位置ぎめや詰め物などを調整
std.css に次の 3 行を入れる□ ここまでにやったところも気に入るまで直す
div.main { border: solid black 2px }div.navmenu { border: solid blue 2px }div.navbar { border: solid red 2px }□ 枠を表示させている 3 行を「/* ...

*/」で囲んでコメントアウト□ その他気に入るまで調整…

□ 本体のマージンが邪魔なので 0 にする
body { margin: 0px }5□ これを見て本体をどこに置き残り 2 要素をどこに置くか

次回までの課題□ ニールセン本は今回までにして、最終回は別の論文や決める本から取り上げようと思います。次の 3 つの論文を配4.3付しますので、(1) は必ず読んで来てください。(2) は各要素の位置ぎめ50%くらいの濃さで読んで来てください (カンタンです
からすぐ読めるはず)。(3) は興味があれば読んで来て□ 本体の上マージン、左右マージンを決めるください。

div.main { margin-top: 5ex; margin-left: 20% }• (1) Mark W. Neman, James A. Landay,□ ナビメニューを左側に縦に詰める

Sitemaps, Storyboards, and Specifications:
A Sketch of Web Site Design Practice,div.navbar { position: absolute; top: 0px }div.navbar { width: 20%; height: 100%; padding-top: 6ex } Proc.

pp.

□ ナビバーを上に詰める• (2) Mark W. Neman, Jason I. Hong, James
A. Landay, DENIM: Finding a Tighter Fit

div.navbar { position: absolute; top: 0px }div.navbar { width: 100%; height: 4.8ex }4.4

Designing Interactive Systems 2000,
263-274, 2000.

Between Tools and Practice for Web Site
Design, Proc. CHI 2000, pp. 510-517,

色の調整

2000.
• (3) James Lin, Michael Thomasen, James A.
Landay, A Visual Language for Sketching□ 各領域の色を調整する
body { background-color: 色 } ←既にあるのを修正
div.navmenu { background-color: 色 }div.navbar { background-color: 色 }Large and Complex Interactive Design,
Proc. CHI 2002, pp. 307-314, 2002.
□ 各自の「10 ページ程度の Web プレゼンテーション」は4.5

次回完成をめざして作成してください。まあ間に合わな配置の調整と記号

いかも知れませんが、できているところまでで発表して□ ナビメニューの並びを縦に変えて記号を入れるいただきます。

span.menu1, span.menu { display: block;□ レポート予告: 「10 ページ程度の Web プレゼンテー
position: relative; left: 1ex }ションを作成し、その内容を報告せよ。またそこにおいspan.menu1:before { content: "☆" }て本科目で学んだことやその他 Web ユーザビリティにspan.menu:before { content: "→" }関する事柄をどのように活用しているかについても論ぜ□ ナビバーの中も同様によ」→〆切は 7/15(月) 一杯とします。

div.navbar { padding-left: 2ex }span.navbtn { position: relative; top: 1ex }span.navbtn { border: green outset 6px; padding: 2px }span.navbtn:befer { content: ">>" }6