HCI設計論 (1) 検索と入力のインタラクションデザイン 2016/10/12

検索と入力のインタラクションデザイン

増井俊之

慶應義塾大学環境情報学部

masui@pitecan.com

2016年10月12日

講義資料

http://3memo.com/hci/1

Gyazz(Wiki)で作成

"Start presentation" で開始

https://gyazo.com/72834995c45706020fbd5eab883fe359.png

自己紹介

シャープ、ソニー、産総研などに勤務

ケータイの予測変換(POBox)などを開発

2008秋まで米国Appleに勤務

フリック入力システムなどを開発

2009より慶應義塾大学

ユーザインタフェースの研究開発

各種Webサービス運用中

Gyazo (Desktop screen capture)

Gyazz (Wiki)

本棚.org

論文、雑誌記事、Web記事多数

POBox

https://gyazo.com/ac2b347a7042f920edd576ee07c4b7f4.png

「フリック」入力

https://i.gyazo.com/1691febad27439d3bf44232c54dcb1e8.png

新書

「スマホに満足してますか? - ユーザインタフェースの心理学」

光文社新書

2015/2/17発売

https://Gyazo.com/64c56d9c3e67745e95bc038487d09c98.png

煽り

https://i.Gyazo.com/bf3bc7510fdb74c8db4bb058fd3ed6d6.png

その他の著書

http://hondana.org/%E5%A2%97%E4%BA%95/4756102816 https://i.Gyazo.com/4f415439da4a838af43a73bf8325df55.png

http://hondana.org/%E5%A2%97%E4%BA%95/4756146627 https://Gyazo.com/d7e6378a56a03c4c183185b475feeacc.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873113784 https://i.Gyazo.com/b5d8dcb8b3161e03a4ba6bf83ab3bbd8.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873114616 https://Gyazo.com/e6137ea90f398f83394f44435eab97f0.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873114861 https://Gyazo.com/715cc3421c8b50897f8afa7efa38ee0f.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873115043 https://Gyazo.com/027dca09083cb76869c874bcdcb01dd9.png

連載

「コロンブス日和」

技術評論社「Software Design」

古い記事を公開

https://gyazo.com/c2df1e93677b155229ea17bec0e7864d.png

研究テーマ

情報検索

情報視覚化

予測/例示インタフェース

テキスト入力

コミュニケーションシステム

ユビキタスインタフェース

認証手法

Web

http://pitecan.com/

「増井」でググる

他の講義

インタフェース設計論

次世代Webプラットフォーム論

ビジュアライゼーション

プログラミング方法論

全世界インタフェース (研究会)

研究テーマ

情報検索

情報視覚化

予測/例示インタフェース

テキスト入力

コミュニケーションシステム

ユビキタスインタフェース

認証手法

ビデオ: 実世界インタフェース

https://Gyazo.com/d3e79a8b457bc1544f0f5dc399e7c10b.png

研究会

ユビキタスコンピューティング

ユーザインタフェース全般

Webサービス

IT業界知り合い多数

大学系

学会系

ベンチャー系

Web商売

事例: Gyazo

https://Gyazo.com/12f732583b5ea7e5b440baa3f2ddd5b4.png

Gyazo (2010/7)

https://Gyazo.com/765bc52757dc9b5ce5a613aee9a1c771.png

Gyazo (2012/1)

https://Gyazo.com/4c35c873fcce18c60c335d337c5e2a9c.png

Gyazo (2014/1)

https://Gyazo.com/0780f93a7992fdeca48cdda7a5ca6dcf.png

Gyazo (2015/1)

https://Gyazo.com/bde4e61c85ebeeb357e1705b2a0a9fb3.png

Alexaデータ (2013/11/14)

https://Gyazo.com/426f5616b89d741d5edca122e4f68b26.png

Alexaデータ (2014/1/15)

https://Gyazo.com/73548f7c10a1148e4ac475945c66f947.png

Alexaデータ (2014/10/27)

https://Gyazo.com/cecd0d5b1e47514518cd97f627b88d2e.png

Alexaデータ (2014/11/14)

https://Gyazo.com/609db17ad3929ea27b0bf81edb899a06.png

Alexaデータ (2015/1/26)

https://Gyazo.com/c49dfb0cb4926fd0365e4c590c04b562.png

Alexaデータ (2015/3/3)

https://Gyazo.com/59823b38bca6e8f59b38d01a391ed34c.png

Alexaデータ (2015/4/9)

https://Gyazo.com/c4a8b16e548b665f650eacb016659d7a.png

Alexaデータ (2016/9/25)

https://gyazo.com/097a51e78a361c04f2aec1b1ac990161.png

資金ゲット!

https://gyazo.com/a99458e321aa5be81557b3387150b464.png

余談

Silicon Valley というドラマが面白い

TechCrunch DISRUPT

https://gyazo.com/556addbce56e26031b4c5046c0676df4.png

https://gyazo.com/c96a672637cf34ae7e948cd9df10479d.png

名前に悩んでいるところ

https://gyazo.com/cf8dc83613129ade2262dbbd49572146.png

検索と入力

インタラクションの基礎

コミュニケーションの基礎

あらゆるタスクの基礎

検索と入力は関連している

デザイン上重要なこと

連続的 / 可逆的

単純さ

直観性

「直観的」の注意

単なる慣れかもしれない

e.g. ペン操作、マウス

慣れによって上手く使えるようになった

セブンカフェ by 佐藤可士和

https://gyazo.com/182a24c8bc2b1322accaabcdfc0d8437.png

デザインの敗北

https://gyazo.com/92be5ee1a15f21b8c9b557e0215fe775.png

デザインの敗北

https://gyazo.com/b81ff77125b286c600bc609fd19b1421.png

検索システムのデザイン

人生における検索

仕事や生活のかなりの部分は情報検索

本質的に情報を生成/加工することは少ない

ネット時代の最も重要な要素

例1: メールの送信

メールソフトを捜す

メール作成ボタンを捜す

送り先アドレスを捜す

送るべきメッセージを捜す (入力する)

添付ファイルを捜す

送信ボタンを捜す

例2: 趣味

良いレストランを捜す

面白い番組を捜す

面白い映画を捜す

面白いニュースを捜す

聞きたい音楽を捜す

面白い展覧会を捜す

例3: 計算機操作における検索

メニュー

プログラムや機能を捜す

アイコン

プログラムやデータを捜す

フォルダ

階層的分類にもとづいて情報を捜す

スクロールバー

画面に入りきらない情報から必要な部分を捜す

例4: Unixにおける検索

ls, find, locate

ファイルを検索

grep

ファイルの中身を検索

人は何故整理するのか?

検索のために整理している

検索可能なら整理は不要!

検索技術のいろいろ

キーワード検索

人力を利用した検索

リンク検索

情報視覚化

キーワード検索

文字列を検索

e.g. 「増井」を検索

Googleが代表的

キーワード検索の歴史

テキスト全文検索

Unixの「grep」

キーワード検索の歴史

10年前

一般人が検索システムを使うことは稀

研究は枯れてきていた印象

現在

再び研究が盛んになっている

キーワード検索の種類

ブーリアン検索

ベクトル空間モデル

確率モデル

LSI(Latent Semantic Indexing)など

ベクトル空間モデル

文書と検索文字列を単語ベクトルで表現

ベクトルの内積で類似度を評価

https://gyazo.com/5d8bf7d946262da0b78887494b276900.png

小規模検索

パタンマッチアルゴリズム

KMP, Boyer-Moore, ...

正規表現

曖昧マッチ

インクリメンタル検索

なめらか化の一貫

中規模検索

シグネチャ法

大規模検索

インデクス作成

キーワード検索の問題

良いキーワードを考える必要がある

漠然とした検索が不可能

固有名詞は良いのだが

現在のところ主流だが

将来は不明

人力検索

人に聞くのが最も有効

人力パワーは常に有効

人力をこっそり利用

ページランク

Google = テキスト検索 + 人力検索

集合知利用

データマイニングに利用

推薦システム

リンク検索

Webのリンク

「連想検索」

近傍検索

Gyazz的検索

「連想検索」

情報学研究所の高野氏が提案

ベクトル空間モデルの検索システム+Flash

GETAを利用

GETA

単語/文書行列WAM(Word-Article Matrix)ライブラリ

連想検索ライブラリ

クラスタリングライブラリ

Demo: 新書マップ

https://i.gyazo.com/23ca7dede7d0f58677ece506f6fd0417.png

Demo: 想-IMAGINE Book Search

https://i.gyazo.com/ce482951a5a90407d1abfc1f02eda035.png

近傍検索システム

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

http://masui.org/3280e44d32b77d6c1b61cb6f25adab61.jpg

近傍関係の例

http://masui.org/b57cb4f99906b02790a4477bcdf0cc22.jpg

IvySearch

Gyazoの近傍検索

関連画像をどんどんたどる

http://gyazo.com/72e43e1b762e5b846553ab62a475532a.png

Demo: IvySearch

Gear

超単純な操作で情報ナビゲーション

デモ: Gear

ファセット検索

ユーザーが利用する絞り込み条件をシステムが用意

メーカー、値段、etc.

様々な条件で徐々に絞り込む

http://gyazo.com/13d047dd83955b6d5ea69bdae0390aea.png

位置情報からの検索

位置情報は忘れにくい

大変強力だが個人の努力が必要

他のサービスとの連係で変わってくるかも

Demo: 写真検索

PhotoBrowser

Demo: Gyazz

双方向リンクを検索に利用

http://gyazz.com/UIPedia/Ben+Fry https://gyazo.com/8b743d43fafe85174dd07f16369ac6a6.png

情報視覚化

大量の情報を対話的に効果的に表示

情報検索に有効

なめらかに大規模データをブラウズ

ビューティフル・ビジュアライゼーション

http://www.oreilly.co.jp/books/9784873115047/ https://gyazo.com/b689416174e357353d5482e828a2bbfa.png

Visualizing Data

Processingの本だが情報視覚化の話が沢山

https://Gyazo.com/43c0779e5a0eb64f52c0258868cd5ab8.png

情報視覚化の本棚

https://gyazo.com/bb92d74a06e9df356a5f6ae1bd60b860.png

情報視覚化の特徴

抽象的情報を扱う

視覚化手法が自由

対話的に情報発見/検索/実感

なめらかな操作

必要な技法

フィルタリング技法

必要なもののみ表示する

全体と詳細を同時に見る方法

画面へのマッピング方法

自動レイアウト

操作しやすいインタフェース

表示技法

自動配置

3次元視覚化

ズーミング(線型/非線型)

アニメーション

インタラクション技法

直接操作

動的検索

連続的/可逆的操作

検索手法

情報視覚化システム例

TreeMap

HyperbolicTree

Pad

LensBar

TreeMap

階層構造を2次元平面にマッピング

縦分割/横分割を繰り返す

http://masui.org/e69bddb95b4af03df36ea1bf0d273857.gif

TreeMap応用システム

http://masui.org/166ff6e8a2c4d4a29793e4d3e56e0eeb.jpg

Disk Inventory X

http://masui.org/6de715e2f04317dde976e89a8732ec53.png

HyperbolicTree

Hyperbolic Space''(非ユークリッド空間)に情報を配置

円周近くほど小さく見え、全ての情報を表示可能

StarTree

HyperbolicTreeの商品化

http://masui.org/e70b1929f403dc0f44d290751a360693.gif

デモ: TreeVis

https://gyazo.com/c233444d864cb09b2cdd02d60213caa2.png

Pad

ズーミングインタフェースの先駆

平面を無限に連続的に拡大/縮小して文書等を表現

巨大な階層をなめらかにブラウジング可能

http://masui.org/386e0f22c8e89ecf82c5abbd5e1b642d.gif

Pad++

Padの拡張

フィルタ機能 / Overview+Detail / etc.

ツールキット化

Java版 = "Jazz", "Piccolo"

http://masui.org/466c3cadfa0bd0d9ef20f5875a863ddb.gif

ズーミング+動的検索

LensBar

ピテカン辞書

Demo: LensBar

対話的フィルタリング + ズーミング

Flash version

HTML5 version

http://masui.org/6efd73c401b3a01e941f18c7e7697c9a.gif

検索システムのデザイン

様々な工夫の組み合わせが重要である

連続的、対話的な工夫

視覚化の工夫

入力システムのデザイン

入力装置のいろいろ

キーボード

タッチパネル

マウス

各種センサ

キーボードの問題点

場所をとる

安定した机と椅子が必要

両手が必要

かなり練習が必要

修業を積んだ器用な人が、他人の迷惑にならない場所で、机の上で使う場合に限って効果的

文字入力のトレンド

特殊キーボード

ペン

文字認識

曖昧入力

予測

特殊キーボード

分割キーボード

片手キーボード

特殊ポジションキーボード

http://masui.org/666a3d8f888c4455e8d49fcf04618dc2.gif

http://masui.org/7c8a8405f08c6830e901d44dcab6f0dd.gif

http://masui.org/92a27f85561116354aebae6e071462b5.gif

http://masui.org/447bce426d96c28a2129da3e92b348b5.gif

http://masui.org/9705c76e7ffbd7e8c663d1b175accef6.gif

http://masui.org/67be8ee9844462e7c67f4b43efd8e5a5.gif

http://masui.org/12815d37e2df20e8b0ec3fc91ba59305.gif

http://masui.org/0d75fa654ced71cb69f31a1249f08f53.gif

http://masui.org/c64b9e9943417cc7fe9c5a5edfccb84d.gif

http://masui.org/dd37db63d67c16d28b522f5dfbc6dd06.gif

http://masui.org/f07886b328bf67cdb076fedbd83c4398.gif

http://masui.org/4d26720a3a9d1460e00319e499463c90.gif

http://masui.org/41024bdd240ddc932d5903a8aee3f1af.gif

http://masui.org/d76d63f9fc7beca2992fec2e2c821018.gif

http://masui.org/8700499e2e3cf3973a940783c9b8b230.gif

http://masui.org/8bd257004420ffee336a041661b6ae3d.gif

http://masui.org/d825d423c7ee8db8894c2635341a5824.gif

http://masui.org/ac6895ddca8fcd557b81fa19875e8993.gif

http://masui.org/9ab0352f3475c0664e2e6a3b2e4e294b.gif

http://masui.org/3b6cc5006b3fa01a73e5b41a101e18e0.gif

http://masui.org/1fba8099ea050d5b1dd39018219cd4b3.gif

http://masui.org/09fa6289584ccc086f169098a4fd648d.gif

http://masui.org/eba76e9884d38856cb7ab50fcf530583.gif

モバイルキーボードのテキスト入力

SHK

複数の文字をひとつのキーに割りあて

「曖昧解消キー」

Palm版など

http://masui.org/f1592d402e66428d1b464e6229676b72.gif

http://masui.org/bab31e9e53b3aaac4f14b74edbb2bab2.gif

Half-Qwerty

キーボードの右半分を左に折り返した配置

http://masui.org/16d6ec88a1299afc690687495b23ef33.gif

http://masui.org/9b2cb511b0cd04990039b05a728ee854.jpg

FrogPad

よく使うキーを15個に割り当て

http://masui.org/40036745699bd4ca0ea34436eb356426.gif

CUT Key

子音と母音の組みあわせでかな入力

http://masui.org/5d8d929211ab6de0ea59c31cc20f2096.gif

MessageEase

同じキの2度押しで高頻度文字入力

複数キーの組み合わせでそれ以外の文字入力

http://masui.org/f63e28d9dfbf634b63f8d91230f4cbd4.gif

TagType

母音と子音を左右に配置

http://masui.org/5ffeb469de0f6761b64235ede345c61f.jpg

テンキーで文字入力

曖昧性の自動解消

欧州携帯電話で普及

http://masui.org/5d338924f5ca09866bd1ec4ee5cc505c.gif

WordWise

何度も同じキーを押さずに文字を入力 (c.f. T9)

「補助キー」使用(「1」)

http://masui.org/5da954da0d677604afe0cec28439355c.gif

タブレット計算機のテキスト入力

タブレット計算機の特徴

立って使える

小さい計算機でも大丈夫

壁かけメモ/伝言板になる

流行ってないのは入力が遅いから?

歴史的必然としてのタブレット計算機

インターネット/Webが家庭で必須となる

→ 沢山の計算機が家庭で必須となる

→ ある程度大きな画面が必要だが、置く場所が無いし、居間/台所/玄関など狭いところで使いたい

→ 壁かけにするか、薄くして普段はしまっておく

→ タブレット計算機が流行る

現状

確かにタブレットやスマホは流行っている

しかし何故指を使うのか?

スマホ?

ジョブズに騙されているだけ

スマホ

知的生産活動に使えない

馬鹿のための時間つぶしツール

やりたいことがすぐできない

従来のGUIの延長

苦労してシンプルに見せている

実際はシンプルでない

新刊

「スマホに満足してますか? - ユーザインタフェースの心理学」

https://gyazo.com/64c56d9c3e67745e95bc038487d09c98.png

煽り

https://gyazo.com/bf3bc7510fdb74c8db4bb058fd3ed6d6.png

簡易文字認識手法

T-Cube

Unistroke

Graffiti

Quikwriting

Cirrin

Octave

T-Cube

http://masui.org/31e82879bb85f639fcf6e1054e66fecb.gif

パイメニュー方式

1ストロークで1文字入力可能

かな入力に適用可能

iPhoneの「フリック入力」

Unistroke

アルファベットを一筆書きにマッピング

http://masui.org/2a950057ea640beed8344d4bd481368a.gif

Graffiti

Palmで採用されていた一筆書き文字認識システム

Unistrokeより字形に近いので覚えやすい

http://masui.org/f7f29b4b83847082ea478d34b531bc1a.gif

Quikwriting

中心領域を除く部分を角度で8分割

ペンの領域間移動により入力文字を選択

中心/右/中心 → t''

中心/右/右上/中心 → u''

ペンをタブレットから離さず入力可能

http://masui.org/12008f521d63e0b3a7c1f617c8820446.gif

http://masui.org/17b6722824d6b7e03f99691a2332c823.gif

Octave

Quikwritingと同様のペンストローク

ペンを8方向になぞって字形で文字を選択していくと候補単語が予測され、正しい単語が予測されたところでペンを離す。

http://masui.org/53925286349e681282ec52727d1d03fe.jpg

Swype

http://www.youtube.com/watch?v=1bibCui3lFM

ShapeWriter

https://gyazo.com/88b989d4aa02b82c767ae6b059438fa8.png

ソフトキーボード

楕円キー配列

Fitaly配列

Metropolis配列

楕円ソフトキーボード

ソフトキーボードを楕円形に配置

ソフトキーボードの入力効率改善

Fitalyキーボード

ペン移動を最小にするキー配置

http://masui.org/db6a2ca00373ac04aff0b2128aec4605.gif

Metropolisレイアウト

ペン移動を最小にするキー配置

http://masui.org/fc2fb8db0dc1361ac75ed8dd5cd126c5.gif

POBox

http://masui.org/43da8e84b189a054393a8288e1d18b80.gif

なるべく楽に文字入力

検索技術を活用

曖昧入力

予測入力

POBoxの具体的手法

読み/綴りの一部を指定

辞書を曖昧検索

マッチする単語を頻度順に侯補表示

前の単語から次の単語を予測

POBox搭載製品

http://masui.org/272a6836e04de9833a7a30472b377e8c.gif http://masui.org/9d38e39656105070745f995491a8783e.gif http://masui.org/aaf3fb879a6e54f2771226ac2d5ab027.jpg http://masui.org/20ee6501116f0cd36fb111792002cc7d.gif http://masui.org/1065faf9f717a6919ac1939440b57a4a.jpg http://masui.org/8b7c6b80aa2ca7be59193a208eb280cc.png

Demo: POBox

Slime - Android入力

https://gyazo.com/522d27862b5cc8b8819c52a7fbef8435.png

様々な統合的デザインの実例

実例1: Migmo

検索と入力の共通化

POBox辞書を検索に利用

入力できるものは必ず検索できる!

Migemoの手法

「増井」を入力する場合

「ま」を入力し、「また」「真面目」「増井」などから「増井」を選択

「増井」を検索する場合

「ま」を入力し、(また|真面目|増井)というパタンでテキストを検索

Demo: Migemo

実例2: Gyazz

お手軽Wikiシステム

http://gyazz.com/UIPedia/Ben+Fry https://gyazo.com/8b743d43fafe85174dd07f16369ac6a6.png

Gyazzの特徴

文字をクリックすると編集モードになる

アウトライン編集

双方向リンクで検索