10. Webとナビゲーション

一般的なWebナビゲーション

それ以外の可能性

操作が超単純なナビゲーション

受動的なナビゲーション

自動コンテンツのナビゲーション

自分コンテンツからナビゲーションを自動生成

芋蔓ナビゲーション

流れる情報と留まる情報

情報整理ナビゲーション

ブックマーキング

階層的ナビゲーション

現在の計算機で一般的

ファイル/フォルダ

デモ: Finderの階層的ナビゲーション

パンくずリスト

Webページに階層リストを表示

http://gyazo.com/f9708d395a528442f341dfadc5f24e0e.png

Gear: 最小操作でナビゲーション

ふたつの操作で階層情報をナビゲーション

2個のスイッチ

回転ダイヤル

https://gyazo.com/b4bd6e4b34e2c452ce756cd7d923a8bf

選択操作を行なわない

ノークリックナビゲーション

TVのザッピングのようなもの

能動的な人も受動的な人も楽しめる

受動的なナビゲーション

テレビとネットの違い

勝手にコンテンツが提示されるとネットはテレビ風になる

ネット

http://gyazo.com/e9d89889ac434d3f8b65ae59b3d94ebd.png

テレビ

http://gyazo.com/630ed5dcee05ae45ee432140e714b6d9.png

テレビ

http://gyazo.com/32087b1dce342dd540c7277b4b11a431.png

計算機ユーザの能動度

CLI = 非常に能動的

全てをユーザが入力

GUI = やや受動的

ユーザは選択を繰り返す

スクリーンセーバ = 完全受動的

ユーザは何もしない

ページの再訪率

閲覧の2/3は以前に訪れたページ

新しいページを見に行くことは稀

自動ナビゲーションで充分かも

回転寿司

http://gyazo.com/5639b602761069b8275732d8a00f721f.png

情報は自動的に提示される

ユーザは選ぶだけ

自動的に情報提示されるナビゲーション

眺めるインタフェース

提示型インタフェース

GyaTV

Wikipedia Saver

眺めるインタフェース

渡邊恵太氏@安村研 が提案

http://gyazo.com/ce0f8bcd0bea309d5a26a2a8e80fdf8f.png

「眺めるインタフェース」の実装

複数のキーワードウィンドウが浮遊

衝突するとGoogle検索 ⇒ 新しいキーワード出現

「パクリウム」

http://gyazo.com/7303773a70c301862607379bc1698c50.png

InfoGlobe

水口氏の「提示型インタフェース」

球面を操作して書籍を閲覧

球面は回転し続ける

急に回転させると検索を行なう

http://gyazo.com/a712f7346562cb6b12daba872dd42a15.png

スライドショー

Wikipediaスクリーンセーバ

Wikipedia記事をランダム表示

知らないことばかりで勉強になる

ユーザによるWeb情報配信

能動的な人

テレビ局のように自動的にページや動画を配信

受動的な人

沢山の「チャンネル」から見たいものを選択

https://gyazo.com/b4bd6e4b34e2c452ce756cd7d923a8bf

能動的な人も受動的な人も楽しめる

自分コンテンツのナビゲーション

手持ち情報をコンテンツとして活用

常に思わぬ発見がある

連想的ナビゲーション

近傍検索

位置情報ナビゲーション

Wikiキーワードナビゲーション

索引ナビゲータ

芋蔓検索

これは何でしょう?

http://gyazo.com/03435fbba38fe55a3572342c2bde1118.png

みつかった経緯

http://gyazo.com/03435fbba38fe55a3572342c2bde1118.png

絵に描く

⇒ 人に見せて聞く

⇒ 「花散里という図柄だ」

⇒ 「源氏香図」のひとつと判明

日付、内容、置き場所の近いデータを近くに表示

http://gyazo.com/49ff2980552894951bb1a1e0e12368a7.png

近傍関係の例

http://gyazo.com/9ff211e2c2f30b87fe047ecff7bd0f49.png

これは誰?

http://masui.org.s3.amazonaws.com/7/7/77116443ec4b8d574a00afca8bd2a5b8.jpg

写真管理システム

日付、タグ、位置情報で写真を管理

関連写真をたどれる

写真ナビゲーション (1)

「自転車」タグを選択

https://gyazo.com/7797e8828ee44667002f51a3922b7b28

写真ナビゲーション (2)

日付をクリック

https://gyazo.com/55c86dd21a233fb068fad7eaa3144fe4

写真ナビゲーション (3)

「夕日」タグをクリック

https://gyazo.com/20794890d4921eb1ce310936451d6910

写真ナビゲーション (4)

「富士山」タグを選択

https://gyazo.com/79862b348b6b8cb600ddb06ac6657120

写真ナビゲーション (5)

富士山写真を編集

https://gyazo.com/1adc3ae4ff1fcf032c1716ccf1e3c273

写真ナビゲーション (6)

富士山の近くの写真を検索

https://gyazo.com/974a0be6b6c12145650a85d422b521f7

Scrapboxでの写真管理

https://scrapbox.io/masui-photos/201910 https://gyazo.com/1a1d4430fce923162a35efd67b2bb636

索引ナビゲータ

関連キーワードをたどって情報フィルタリング/検索

http://gyazo.com/d74d5440966f0dd8461b36f8181387b4.png

キーワードナビゲーション

Blog Keyword Visualizer

http://gyazo.com/6dbfffc6784059c89d9c8911b672e25b.png

Scrapboxのキーワードナビゲーション

タグやキーワードでコンテンツが自動生成

情報間に無方向リンクを張る

巨大な無向グラフ

リンクのリンクを全部表示

孫情報, 兄弟情報が表示される

e.g. 「増井」⇒「人物」⇒「安村」

https://gyazo.com/010cc8b66f6e9697e7f24ed8ff3576f2

Gyazoの芋蔓検索

http://Gyazo.cool/ http://gyazo.com/2e2798faf5c9c689f87920a2c6dc6eff.png

電子書籍の購買情報から様々な属性でナビゲーション

http://gyazo.com/959052f3ff5de81a6551c7cfe51bc01c.png

デモ: dshelf

http://dshelf.nikezono.net/ http://gyazo.com/959052f3ff5de81a6551c7cfe51bc01c.png

https://gyazo.com/8e923ddd1199a46b44cc8d0deee11294

デモ: Pivotty

http://www.pitecan.com/tmp/Pivotty/ https://gyazo.com/8e923ddd1199a46b44cc8d0deee11294

ナビゲーションタイプの変換

ストック情報とフロー情報

フロー/ストック

もともと経済用語

所持金(キャッシュストック)

BS/貸借対照表

金の動き(キャッシュフロー)

PL/損益計算書

フロー/ストック

https://gyazo.com/3c088c173b1209073eba3a221eee0068.png

ストック情報

能動的に参照

リンク/連想を活用

例

Webページ

Wiki

まとめサイト

フロー情報

時折流れてくる

順番に眺める

例

メール

掲示板

RSS

twitter

ストックとフローの変換

フロー情報のストック化

聞いた話をメモ帳に書く

MLの議論をまとめサイトに書く

会話を脳に記憶

ストック情報のフロー化

手帳からネタを捜してブログを書く

RSS配信

脳内情報を利用して発言する

宴会時のコミュニケーション

開催を通知 (フロー)

だいたいの場所と日時を通知 (フロー)

日時/場所を決定 (ストック)

準備の詳細 (ストック)

参加者リストを管理 (ストック)

直前に緊急連絡 (フロー)

撮った写真を共有 (ストック)

メーリングリストにおけるストックとフローの融合

メーリングリストとWikiの組み合わせ

ストック情報とフロー情報の両者を適宜利用

http://gyazo.com/ea51bd3046b7eb70e99271cf1011f98f.png

写真の共有

http://gyazo.com/905439006893a9b1cc07485e1de4deff.png

Gyamm: メールとWebの変換

メール記事はブラウザで見られない

普通のメールをブラウズできると便利

ブックマークできたりする

情報整理ナビゲーション

新しいナビゲーション / 権威

ブックマーク

リブログ

ブックマークの活用

ソーシャルブックマーク

公開ブックマーク

履歴情報

ソーシャルブックマーク

もともとは情報管理に利用

用途が変化

自慢に利用

情報感度

気のきいたコメント

コメントに利用

ネット上のブックマーク

URLや文字列に短いURLを割り当て

c.f. TinyURL

ショートカット的に利用

GoQuick: パーソナルな3memo

情報が他人に見えない

https://gyazo.com/a7cad24bdebab4107bd84368425547dc

ブラウザ履歴の活用

閲覧した全ページを記録

ページ遷移履歴を活用

まとめ

まだまだ異なるブラウジング方法がある

見方を変えるだけで面白くなるかも!