狠狠撸

狠狠撸Share a Scribd company logo
スジの良いインタフェース设计

       増井俊之
  慶應義塾大学 環境情報学部
    masui@pitecan.com
     http://pitecan.com/

       2012年7月3日
インタフェースは誰もが設計できる?

そう思っている人が多い
 実際その通りである
誰でも提案可能!
実情は?

素晴らしいインタフェースは登場しない
思考停止が原因?
 デジタルネイティブの弱み?
 生まれたときからGUIを使っている
試行錯誤+フィルタリング

いきなり良いものはできない
短期間の熟考やブレストでは無理
必要なもの

充分な知識と情報
バックグラウンドでの熟考
シンプルデザイン思考
繰り返しフィードバック
正しい最終判断
ソニーの社内展示会

15年前
  いろんなものが展示会に出ていた
   の楽器, の乗り物, のPDA, ...
  ほとんど発売されず
最近?
  厳選テーマ
  奇抜なものが無い
Appleの場合

天才が沢山いるわけではない
自分が偉いと思ってる奴は多い
まつひろ氏の本

「周囲が凄い奴ばかり」
 そんなことはないような...
 昔のGoogleやStanfordは秀才 い
Jobsの偉いところ

最終決定がだいたい正しい
天才を見抜く力がある
 喧嘩する力もある?
正しい最終判断

怖い最終責任者がいないと駄目
 松下幸之助、井深大、本田宗一郎、etc.
Eat your own dog food

auの社長はLismoを使ってるか?
JobsはiTunesを使ってる
センスは教えられるか?

たぶん難しい
ジョブズは稀有な存在
「そもそも」を考えるのが大事

そもそも
 銀行カードは必要か?
 セーブコマンドは必要か?
 切手は必要か?
 リモコンは必要か?
悪いインタフェース放置の理由

貧乏臭さ
慣れ
直感と慣れ

慣れているものを直感的と感じがち
e.g. ペン操作, プルダウンメニュー, ...
尝颈蝉补の骋鲍滨
GUIは全然進化してない!

進化する見込みも薄い
違う分野で勝負すべきかも
新しいインタフェースの普及は難しい

ほとんどの人は保守的
現状への適応を変えたくない
ケータイ入力システムの成功

トップダウンで指示
エバンジェリストの存在
従来インタフェースとの差異を最小に
インタフェース设计のポイント
          (増井式)

現在の問題点をみつける
解決するエレガントな解を捜す
長年考えてると解がみつかることがある
c.f. 未来指向な場合

SF的発想がいる
ある世界を想像してみて、そこで必要なものを考える
コロンブス指数

= システムのインパクト / システムの複雑さ
大きいほど良い
泥酔指数

泥酔してても使えるかどうか
Gyazo

画像のお手軽キャプチャ
もちろん現在の技術の理解も必要
コロンブス指数高い
泥酔指数もそこそこ
Dynamic Macro

予測インタフェース
「もう一度やる」だけ
コロンブス指数高い
泥酔指数高い
QuickML

メールを出すだけでMLを作る
面倒な設定が不要
泥酔していると使えない
今すぐ使う鲍产颈肠辞尘辫
今すぐ使う鲍产颈肠辞尘辫

Webと融合
安くて実用的なもの
Googleで捜せないもの

自宅の戸締まり
人気の店
下北沢で会った人
Ubicompなら捜せる!
Ubicompのチャレンジ

Webサービスとの融合
ハードの敷居 消滅
ソフトの敷居 消滅
Webサービスとの融合

サーバブログ
美釧 萌香たん
 記事




ikisaki_kun
ハードの敷居の消滅

Phidgets, GAINER, Arduino, Japaneno, mbed...
XBee, WiPort, ...
Phidgets

USB接続のセンサ
GAINER

USB + PIC
Arduino

USB/Serial + AVR
Processing環境でプログラミング可能
LilyPad

Arduinoをウェアラブルにしたもの
LilyPad
Japanino

「大人の科学」版Arduino
mbed

Web上でプログラミング可能なワンボードマイコン
XBee

ZigBee無線モジュール
WiPort

無線LAN+CPU+サーバ
Sun SPOT

無線センサネットワークデバイス
Java
加速度、温度、照度センサーと8個の3色LED
IOIO

Android ADIキット
Harpy

Android ADK+Arduino
ソフトの敷居

かなり低くなってきた
 JavaScript
 Processing
各種ハードやネットライブラリを利用可能
ユビキタス = ユニバーサルデザイン

いつでも/どこでも/誰でも
人間の能力の強化
 e.g. 眼鏡
直感的な操作が可能に
 目的と操作を一致させる
直感的なシステム実現の基礎技術

小型コンピュータ
ネットワーク
センサ
操作手法の工夫
直感的にする工夫

なめらかな操作性
 可逆的 / 連続的
目的と操作のわかりやすい対応付け
 e.g. 自動ドア
富豪的UbiComp

特殊なセンサを沢山利用
ディスプレイを沢山利用
特殊な計算機環境を利用
「Poor Man's UbiComp」 (PMUC)

特殊なセンサを沢山使わない
 ! カメラ、3次元位置センサ
特殊なディスプレイを使わない
 ! HMD
入手しやすいロバストな装置を少しだけ使う
 ? GPS携帯、USB傾きセンサ
PMUCの要件

インフラ
 インターネット、無線LAN, etc.
情報検索技術
 入出力デバイス
 各種センサ/アクチュエータ
PMUCの要件

インフラ
 インターネット、無線LAN, etc.
情報検索技術
入出力デバイス
 各種センサ/アクチュエータ

                全部ある!
リモコン?




明らかな問題点
 ボタンが多くて機能がわからない
 紛失しやすい
リモコン?

明らかな問題点
 ボタンが多くて機能がわからない
 紛失しやすい
本質的な問題点
 操作対象ややりたいことと関係ない方向を向けなければならない
  (直感からほど遠い)
正しいアプローチ
具体的な装置のことを考えずにどこでも目的を達成

 (例) 居間の壁で映画を観賞する
 (例) 台所でも風呂でも音楽を聞く
   DVDやネットワークのなどの実際のデバイスは気にしない
直感的でない操作

電灯のon/off
  スイッチが部屋の入口にある
DVD観賞
  プレーヤ/プロジェクタ/アンプ/スクリーン/スピーカ
  どれをどのように操作すればいいのか
ビデオ録画
  番組を見たいだけなのだが...
ウィンドウの開閉
直感的なCDプレーヤ

「置くだけ主義」による情報家電制御
CDを置くとその場所で音が鳴る
直感的なデータ転送

CDを挿すとコピーされて別のCDに焼かれる
CD-ROMはセンサ/アクチュエータ!
「障害者用レジ」

数字 硬貨 の変換が不要
の自动ドア
装置の必要性

機械の使用は絶対条件ではない
機械を使わないにこしたことはない
 自動ドアは機械として認識されていない
 期待通りの効果があれば何でもよい
理想のユビキタス環境

機械も制御装置も見えないのが本当のユビキタス
「Invisible Computer」
PMUC用入力デバイス

安くてロバスト
誰でも使える
なじみのある操作体系
装置の制約

単純な操作
過酷な環境への対応 (風呂、台所、etc.)
制限された入力手法 (片手、音声、etc.)
小さな画面
実世界GUI

グラフィカルインタフェース(GUI)操作を実世界で実行
ボタン、メニュー、スライダ、ドラッグ/ドロップ、... の操作を壁や机
の上で実行
“FieldMouse”, “MouseField”を使用
ITホワイトボックス (2011/6/19)
FieldMouse

ID認識装置 + 動き検出装置
壁や机の上でマウスのように使える
  Active絵本
  Active Hardcopy (Webページなど)
  紙リモコン
  Real-World GUI
ビジュアライゼーションの役割と鲍滨开発のイノベーション(2)
アクティブ絵本

普通の紙や本をタブレットとして使える
紙リモコン

バーコードを印刷した紙をリモコンとして利用
FieldMouseを使った実世界GUI




メニューやスライダのようなGUI要素を実世界で使う
バーコードを認識した後でデバイスを移動する操作 ==
マウスをクリックした後でドラッグする操作
MouseField

RFIDリーダと動き検出装置を一体化
MouseFieldの使用方法

「置いて動かす」だけで情報検索/制御
书斎の惭辞耻蝉别贵颈别濒诲
テーブル型惭辞耻蝉别贵颈别濒诲
笔濒补测厂迟补苍诲++の操作
GoldFish

Android用実世界GUIフレームワーク
NFCを読む ブラウザ開く JSが走る センサ利用
動作をJavaScriptのみで記述
  プログラムはWeb上
  簡単に修正可能
GoldFishのアーキテクチャ

骋辞濒诲贵颈蝉丑クライアント
  センサ+表示
GoldFishサーバ
  JavaScriptプログラム
  URLリダイレクト
骋辞濒诲贵颈蝉丑クライアント

NFCインテントによる自動起動
サーバに登録したURLのページを表示
ダウンロードしたJavaScriptでセンサを利用
骋辞濒诲贵颈蝉丑クライアント
GoldFishサーバ

http://ubif.org/(ID)からリダイレクト
   TinyURL, Bit.ly的な動作
実行例1: マニュアルの表示
実行例2: 時計の表示
実行例3: 回転インタフェース
ビジュアライゼーションの役割と鲍滨开発のイノベーション(2)
ドア开闭
ビジュアライゼーションの役割と鲍滨开発のイノベーション(2)
実世界コピペ
Goldfish応用例

汎用に利用可能
家電の制御
 机の上から音量調節
 Wifi or 赤外線
家電のコントロールパネル
ドア認証
文書の上に置いて文書編集
柵に置いてフォトフレーム
柵に置いて時計
どこでも掲示板
サイネージ連携

More Related Content

ビジュアライゼーションの役割と鲍滨开発のイノベーション(2)