2006年10月05日（木）

コンピュータ > ユーザインタフェース

悪しきユーザインタフェースの黄金律

"Golden Rules for Bad User Interfaces"
http://www.sapdesignguild.org/community/design/golden_rules.asp

ユーザインタフェースを研究していた身として、
そして現システムエンジニアとして非常に面白い文章だったので
ぜんチックに和訳してみました。ちょっと長いですが、興味ある人は読んでみてください。

---

１．ユーザには不必要な作業だけさせておけ！

（例）

システムにとって既知の情報をユーザに入力させる。

（例）

データを入力した後に「そのデータは入力できません」と知らせる。

２．標準に流されるな！

（例）

「単一項目の選択」といったその目的に従わずに画面要素は使え！カッコいいからラジオボタンではなくチェックボックスを使うんだ！！

（例）

典型的なカテゴリや位置にメニュー項目は置くな！「保存」メニューは「編集」メニューの中に入れておけ。

３．遅くしろ！

（例）

ソフトウェアによる遅延の可能性を限界まで追求する。

• ユーザ入力の度に延々と続く確認や反復がある。
• ユーザにダイアログボックスの無限地獄を味あわせる事もできるぞΨ(｀▽´)Ψ

４．可能な限り略語を使え！特に十分な余白がある場合に。

【理由】

省略形はアプリケーションをよりプロ仕様に見せるからだ。 特に新略語や、一般的な略語を置換したものを使うとなっ！！

Ψ(｀▽´)Ψ

（例）

例え空間的な制約を受けなくても、フィールド名や、列名、ボタンのテキストには略語を使え。

• "date"の代わりには"dat"！
• "Tolerance Key"の代わりには"TolKy"あたりがよいかな。
• "Next Object"の代わりに"NxOb"なんて最高だ！

５．専門用語でユーザを教育せよ！

【理由】

生涯学習。なんて素晴しい！そんなユーザインタフェースに漬かりきりの生活なら一生学習できる！ その上、社会学者は日々、現代人の語学力の低下に嘆いているじゃないか。ボキャブラリーに対する知的刺激を与えてくれるアプリケーションは、この現代病の特効薬になるぞ！

（例）

常にURLをUTF-8形式で送信する。 （「UTF-8」とは1文字を1～6バイトのバイト列に置き換える文字表現形式）

６．重要な機能や頻繁に使う機能はユーザから隠せ！

【理由】

ユーザに貴方のアプリケーションを探索する楽しみを与え、 結果的にアプリケーションに対して多くを学ぶ事ができるからだ。

（例）

スクロールしないと見えない位置に重要な機能のボタンを配置する。

（例）

「そこにはないでしょ～(*｀▽´*)」と思うメニューに重要な機能を置いておく。

７．操作はマウスだけにし、キーボードショートカットなどには頼らせるな！

【理由１】

視覚障害者に対する完全なるアクセス拒否を行う事が可能だから。 故に、余計なアクセシビリティを提供する必要がなくなり、開発コストは大幅に減らす事ができる。

【理由２】

キーボードショートカットを利用する、多くのエキスパートを「凡人化」できるから。 ヤツらのスピードを落とし、初心者の気持ちを分からせてあげなさい。

８．アプリケーションの利用を真の「挑戦」とせよ！

【理由】

人々にリスクの大切さを理解させる事ができるから。これは特に経済的に厳しい時こそ重要です。

（例）

Undo機能なんぞ提供しない。

（例）

重大な結果をもたらす機能にも関わらず、操作前に警告を出さない。

注）これを最優先するのならば、重要な機能の名前を変えるなりして、アプリケーション操作を「ロシアンルーレット」のようにするのがよい。例えば「保存」と「削除」を入れ替えるとか。時々ね･･･

(▼。▼)y-~~~

９．エンドユーザから離れなさい！

【理由】

貴方が専門家であり、かつ、ユーザが何を求めているか理解しているからです。
貴方が欲しいものは貴方が知っているでしょ！？
つまり貴方が欲しい機能が、求められる機能なのです。

（例）

もし貴方が実装する必要がないなと思ったら、その機能は必要ない。何故、他人がそれを必要とするだろうか？

（例）

多くのエンドユーザは多くの要求を持つが、貴方は一つだけ。この事実は実装を容易かつ迅速な方向へ導く。

注）視野狭窄は、企業にとって大量のコスト削減に繋げます。

♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪

１０．悪しき利用例を表示なさい。

【理由】

例示こそ、完全な教育方法だから。
しかし自分達はそのアプリケーションについては全て知っている。
ゆえに悪い例こそ魅力的なのだ。

（例）

このページにある黄金律に遵守すれば、完璧です(^^)d

（例）

もしプレゼンテーションを作る必要があるのならば、そのプレゼンテーションに悪例が含まれているか確認すべきです。

注）逆に良い例というのは、見つけるのが難しい上に、時折それらを理解するまで批判される事もある。何故、そんな非生産的な議論に時間を使わなければならんのだ。

１１．悪しき初期値を設定する事に注力せよ！

【理由】

悪い初期値はユーザを直接、驚かせるのに効果的な方法だからです。予測不可能ならばベストです。

（例）

Webフォームのデフォルト値としてユーザが希望しないメールマガジンや申し込みのチェックがしてある。しかもそのチェックボックスの配置がバラバラ。

（例）

ダイアログボックスで「ファイルの削除」や「ハードドライブの初期化」といった、最大級に危険な項目がデフォルトでオンになっている。

（例）

フォームにおいて、日付などの項目に役に立たない値を入れる。例えば、日付欄に「その日と同じ曜日の休日」が入力されているなど。

１２．システム側の応答の後には、これまでの作業コンテキスト（背景や履歴）は破棄せよ。

【理由】

作業コンテキストを破棄することによって、ユーザに「その作業が本当に意味があるのか？」を自問自答させることができるからだ。

（例）

画面上の選択した項目を、応答後、非選択状態にする。

（例）

ユーザがスクロールしたHTMLページや表を、処理後に、初期位置に戻す。

（例）

検索結果ページのような、複数のページで構成されている場合なら、処理後、1ページ目に戻す。

１３．ユーザの生活を楽にするような機能は排除せよ！むしろイバラの道を歩ませよ！

【理由】

付加機能はユーザに多すぎる選択肢を与える事になり、混乱させるかもしれないからだ。

（例）

ユーザがリストに項目を追加したい時、リストの末尾にしか追加できないようにし、正しい位置にはその後で移動させるようにする。これにより「項目の挿入」機能を考慮しなくても済むようになる。ちょっとスパイスを効かせるなら、ユーザが項目を途中まで移動し終えているときに、項目を全て戻すようないいかげんなエラーを出すとよいかもね。

（例）

例えば項目の移動や削除を行う時などに、複数選択をさせてはいけない。単一選択で十分であり、ユーザの目的はユーザによってまとめさせるべきだ。ちょっと時間がかかるかもしれないけどね･･･(‘ー‘)/~~ｶﾞﾝﾊﾞﾚｰ

１４．時間やリソースを浪費する処理にユーザを割り込ませるな！

【理由】

コンピュータを操作できない状態に置くことで、ユーザに至福のコーヒーブレイクを与える事ができるからだ。

（例）

ユーザが気がつかないようにバックアップ処理やインデックス（索引付け）処理を起動させる。そして、この処理はキャンセルさせることができず、ユーザのマウスクリックやキー操作にも反応しない。

---

追記

本文によると元々、10個の黄金律が14まで増えたとの事。そして、まだまだ更新中らしいです。ちょっと楽しみｗ

---

2006年04月15日（土）

コンピュータ > ユーザインタフェース

[研究会]インタラクション2006レポート（６）

どうも、おはようございます。
リラックマを片手に寝てました。ぜんです。

そういえば、いままで書いていたインタラクション2006レポートで
一番印象に残って、スバラシイ！と思った発表を紹介するのを忘れていました。（爆）

位相操作可能なスケッチ入力インタフェースの試作 : 田中 良樹, 西川 玲, 川添 昌俊, 櫻井 将樹, 佐賀 聡人 (室蘭工大)

これはペン入力の革命とも言える気がしましたね。

位相操作と聞くとなんか難しそうに聞こえるのですが、
要は「なぞり書き」をすることによって描いた線を修正しながら、
直線、円弧、楕円弧などを入力していけるというインタフェースです。

こちらのムービーを
見てもらえば、わかるのですが、その入力のしやすさ、スピード感が素晴らしいなと感じました。

元々、この開発をした研究室は10年くらい、ず～とこのような研究をしてきていて、インタラクションにも
毎年出展している常連の研究室だったのですが、今年のこれが最も完成度が高かったですね。

ペン入力の欠点である、「指定する点のぶれ」を上手い形で補っていると思います。

早く実際のドローエディタなどにぜひ実装して欲しい技術ですね。
商業界でも設計図面を書く人にはかなり便利なのではないでしょうか？

---

2006年03月22日（水）

コンピュータ > ユーザインタフェース

[研究会]インタラクション2006レポート（５）

久しぶりにインタラクション2006のレポートですが、まだまだネタはあるので、
追記していきます。

PlantDisplay:植物が情報を表示する新しいディスプレイのかたち : 栗林 賢, 脇田 玲 (慶應大)

有用性という面では正直、イマイチですが、新たな可能性を秘めてて面白いと思いました。
普通では絶対にコントロールすることはできないと考えられる植物での
情報可視化にチャレンジしているところがスバラシイ。

任意のパラメータを照明装置（光）と水ポンプに対応づけて、
パラメータが上がると光や水を多くあげて、植物を元気づけ、
下がると、あげないことで植物を枯らす（（苦笑）としたいところだが、笑えん・・・）

例えば、街の人を入力パラメータとすることで、植物が人口を表示するようになります。
人口が増えると、葉が増え、生き生きとし、減ると朽ちていく・・・。
ブログへのコメント件数をパラメータにすると、書き込みがあればあるほど
生き生きと植物が生え、花が咲く。

そんなシステムなわけです。

質問してみると、まだ極端にコントロールはできないとの事（当たり前か）

ただ、論文の末文には「将来的には、環境デザインへと展開する予定」とあったので、
何かありそうですね。
風景が情報を持つ世界というのも面白そうです。

---

コンピュータ > ユーザインタフェース

[研究会]インタラクション2006レポート（番外編）

もうずいぶん前のことなので、レポートするのもどうかと思うのですが、
いちおう「ぜんぶろぐ」（ポリシーは上記ヘッダ部参照）という事で、掲載。

インタラクション1日目にその時会った、大学の先生や学生さん達と
うまいステーキ屋さんに連れて行ってもらった時に見つけた店（笑）

いや、ネタ的には行きたかったんですけどねぇ・・・。
時間なかたorz

---

2006年03月13日（月）

コンピュータ > ユーザインタフェース

[研究会]インタラクション2006レポート（４）

さて、しばらくお休みもしたところで、先週のインタラクションレポートの続きを書こうと思います。
3/3（金）の2日目のインタラクティブセッションの内容の方に行きましょう。

位相操作可能なスケッチ入力インタフェースの試作 : 田中 良樹, 西川 玲, 川添 昌俊, 櫻井 将樹, 佐賀 聡人 (室蘭工大)

この佐賀先生の研究室は
昔からペン入力による「曖昧さ」を利用した簡易スケッチインタフェースの研究を続けていらっしゃるのですが、
今回の発表は恐ろしく完成度が高かったので、絶賛でした！！


ベストインタラクティブ賞おめでとうございます！！って感じですね。

とりあえずこのムービーを見てもらえればわかるかと思うのですが、
いままでの細々としていた製図作業がウソのように楽にできます。
しかもペン入力で書きやすい！

なぞりがきによる修正がスピーディーに反映されていく様を見ると
いままで神経削るようにして書いてきた図とかが
こんなんでできちゃうんだ。と思ってしまいます。

早く公開してほし～な～。

これを考えた佐賀先生は偉すぎます。

---

2006年03月09日（木）

コンピュータ > ユーザインタフェース

[研究会]インタラクション2006レポート（３）

インタラクション報告レポートも、もう第３回です。そろそろ1日目から離れようかな・・・

両手マウスを利用した２次元形状の操作 : 五十嵐 健夫 (東大), Moscovich Tomer, Hughes John (ブラウン大)

私が「GUI研究ってすごい。ペン入力って面白い。」と思わせてくれた、東大の五十嵐先生の発表。
Teddyで有名な五十嵐先生はかならず「くまちゃん」に結びつけて発表内容を出してくる非常におちゃめな方なのですが、
研究者としてはかなり偉大な方で尊敬する人の一人です。

今回の発表では、研究「物体の堅さを表現した2次元形状の操作手法 」 をマウスを2つ用いて行うと言った形で出典されていました。
両手にマウスを持って、くまちゃんを自在に両手で伸ばしたり、縮めたりする事ができます。

まず、これ内部に骨のモデルとか持ってないのにも関わらず、くまの皮が伸びたりする所が面白いですね～。
こういう表向きはあまり凄そうに見えないけど、その裏側ではものすごい努力があるというのも
ユーザインタフェース研究の醍醐味です。

今回のこのインタラクション自体は遠隔医療とかで使えないですかねぇ。
遠隔地にいる患者の腹を切開！！とか。（＾＾；

---

2006年03月06日（月）

コンピュータ > ユーザインタフェース

[研究会]インタラクション2006レポート（２）

さて、先日に続いて第２弾行ってみましょ～。

Tilt-Stick & Spin-Stick：特定アフォーダンスに基づくペン型入力デバイス : 野中 秀俊, 栗原 正仁 (北大)

これは今回、私のツボにハマった発表でした。 「今すぐ欲しい！！」そう思わせたのがこのSpin-Stickです。

このSpin-Stick。はっきり言って、技術的な新規性とか、作るのにめちゃくちゃ苦労しているとか
そういったものではありません。
しかし、この研究はいままでの基本技術を魅せる形にした所がポイント大きかったですね。
学生の暇つぶしにしか使われない「ペン回し」動作をスライドの切り替えに使おうなんて・・・
盲点でした・・・。

実際、このSpin-Stickでプレゼンやっていたのですが、カッコイイんですよ！これがっ！！
「これがSpin-Stickでして、（くるっ）ここに水銀スイッチが使われており、（くるっ）回転させると、（くるっ）切り替わるわけです。」
なんてテンポよくやられた時には、「やられた～」と思いましたね。（笑）
胸ポケットからスッと出し入れできる点も評価高いです。

動画はこちら。(MPEG 約3.9MB)

新規性や利便性が求められる傾向が強いユーザインタフェースの研究としては大したことがないかもしれません。
が、この「ちょっとした工夫でいままで目が向けられなかったコトを形にする」姿勢が非常に共感できました。

もう一本、姉妹品でTilt-Stickというのもありました。

これは、片方の先端を任意の場所につけて、もう片方をぐりぐり回すとジョイスティックになるというペンです。
支点には手の甲とかを使っていましたが、結構よく動いていたので、これもいい応用例があれば、すぐ実用化できそうです。

胸ポケットにさせるペンが、UIデバイスってなんかｲｲ。

---

2006年03月05日（日）

コンピュータ > ユーザインタフェース

[研究会]インタラクション2006レポート（１）

昨日、書いたように3/2,3と行ってきたユーザインタフェースの研究会、
「インタラクション2006」についてレポートでも書いてみようかと思います。

方針としては、面白かったインタラクティブセッション（※）での発表を中心に書いていこうかと。
（※）インタラクティブセッションとは参加者がブース展示を行っている発表者を見て廻り、
発表者と直接対話しながら、成果物に直接触れ、議論するという形式のセッションです。

BiblioRoll:読書活動支援の為のポータブルデバイス : 柴田 樹, 落合 香里, 洲巻 和也, 奥出 直人 (Keio Media Design)

インタラクティブセッション（1日目）の中でのベストインタラクティブ賞に輝いたのがこちらです。

３段に分かれた筒状のデバイスの中に液晶ディスプレイが３つ入っていて、
筒をひねると、ディスプレイに表示されている本の文章を巻物のように読むことができるというモノ。

1段目・・・本の選択用、2,3段目・・・文書閲覧用となっており、
まず1段目で登録されている本の中から読みたいものを選び、
ボタンで選択すると、2,3段目に選んだ本の中身が見えます。

本の内容は全ページの画像が１枚にくっついていて、
筒をぐりぐり回すと、それがスクロールし、ず～と読んでいくことができるわけです。

面白いのは「文書を読む」ことを電子デバイス上で実現させようとしたときに
『ページをめくる・切り替える』ではなく、『1枚の書物を回しながら読む』という発想で行っている点。

ただし、この巻物メタファだと本のページ概念を失ってしまうので、
「○ページへジャンプする」といった操作が面倒となるかと感じました。
章や節といった文書構造さえ把握できれば、DVDの「チャプター送り、戻し」みたいな
機能で利便性を向上させることができそうですね。
ただ現状では、PDA、タブレットPC、PSP、NintendoDSなどのデバイスで読むのと比べ、
利便性を訴え切れていないような気もします。
あまり小型化すると、回す手で画面が隠れてしまう。といった問題点もありそうですし。

ユーザインタフェースの研究としては巻物ならではの
利点をもっと打ち出す必要があるかと感じました。
＃けれど、巻物の素晴らしさってなんだろう？むむむ・・・

でもデザインと完成度は高いかなと思います。

とりあえず、漫画とゲームブックは読んではいけなさそう（＾＾；

---

2006年03月04日（土）

コンピュータ > ユーザインタフェース

[研究会]インタラクション2006

3/2,3と開催されていた、インタラクション2006という研究会に行ってきました。

しばらくはこの研究会の報告トピックを綴って行こうかな～なんて思ったりしています。

---

2006年03月03日（金）

コンピュータ > ユーザインタフェース

ささるペン

「インタラクション2006」の懇親会でちょっとしゃべった学生時代の妄想が
意外と好評だったので、書いておこうと思います。

マジックで使う、ささったように見えるおもちゃのナイフがあると思うのですが、
それと同じような形でタブレットＰＣとかにささるペンというのが
あるとよいと思うんですよねぇ。

ささった部分はタブレット側に擬似的に描画されて、
ウィンドウの串刺しとか、串刺ししたままのドラッグができる。
複数のアイコンを串刺しにしておいて、ドラッグ＆ドロップすることで
複数のパラメタを一つのプログラムに渡してあげたりすることもできるんじゃないかなぁ。と。

串刺しする時にはペン側に触覚フィードバックが返ってくるといいという
話もありました。
使っている方が「今、１枚目、２枚目、３枚目・・・」と解るようなインタフェースデザインが
必要かと。

新しいタブレットの使い方にならないかな。

---