メディアインフォマティクスゼミ 第三回「gui: apple higを読もう」

44
GUI Apple HIG を読もう 第3回 メディアインフォマティクスゼミ 伏見 遼平

Upload: ryohei-fushimi

Post on 27-Jun-2015

1.125 views

Category:

Technology


3 download

DESCRIPTION

iii-edu で行われた自主ゼミ「メディアインフォマティクスゼミ」第三回の発表資料。

TRANSCRIPT

Page 1: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

GUIApple HIG を読もう

第3回 メディアインフォマティクスゼミ伏見 遼平

Page 2: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

まとめ

Page 3: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

わからん…

Page 4: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

User Interface とは?

Page 5: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

ユーザインターフェイス

ユーザと何かの界面

Page 6: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

意味が広すぎる

Page 7: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

「良いUI」の共通点を見つけるのは難しい

Page 8: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」
Page 9: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」
Page 10: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」
Page 11: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

「誰にとっても悪いUI」というものは存在する

Page 12: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

• 良いUIについて論じるのは難しい

• ノーマン「誰のためのデザイン?」

- 主に悪いUIについて論じたもの

Page 13: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」
Page 14: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

Apple Human Interface Guidelines

• Apple が制定した、Apple製品の上で動くソフトウェアのUIガイドライン

• 1986年初版

• 様々な「悪いデザイン」を踏まえた上で、デザインに必要な原則を整理した

Page 15: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

10の原則

• 比喩• 操作の直感性• See & Point• 一貫性• WYSIWYG

• コントロール感• フィードバック• 寛容性• 安定性• 美的完成度

Page 16: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

(少なくともAppleについて)「UIの進化」は1980年代で

止まっている

Page 17: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

世界最古のコンピュータは?

Page 18: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

紀元前

Page 19: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

パスカルの機械式計算機

Page 20: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

Tabulation Machine

• IBM• 1890• 国勢調査

Page 21: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

ENIAC

• 1946年完成• 弾道計算用に設計された

• 電子式コンピュータ

Page 22: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

IBM-360

• メインフレーム• 1964• IC式

Page 23: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

ARPANET

Page 24: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

Alto

• XEROX PARC• 1973

Page 25: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」
Page 26: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

APPLE Ⅱ

Page 27: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

APPLE Ⅱ 1977

Page 28: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

Macintosh

• GUI搭載 普及型PC• 1984

Page 29: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

• 1986年英語版初版

• 1989年日本語版初版

Page 30: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

10の原則

• 比喩• 操作の直感性• See & Point• 一貫性• WYSIWYG

• コントロール感• フィードバック• 寛容性• 安定性• 美的完成度

Page 31: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

比喩

• ある作業の内部モデルによる構成要素- ファイル・フォルダ = 書類バサミ

- ハードディスクもフォルダと同じように振る舞う

• 比喩の実体に制限する必要はない- ゴミ箱に入れる項目の数は、物理的なゴミ

箱に入る個数に制限されない

Page 32: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

一貫性

• OKボタンは右、キャンセルボタンは左- 副作用のある操作を行うボタン

- 操作を行わないボタンの2つがある

• 閉じるボタンは左上

Page 33: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

一貫性

• 同じ見た目のものが常に同じ機能を持っているか

• OSとアプリケーションの一貫性

Page 34: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

フィードバック

• 操作に対して結果を返し実感を持たせる

• 何かが起きたら必ずユーザに知らせる

- ボタンが押されたこと

- 処理を実行していること

- 状態の変化をアニメーションで

- 階層の変化は画面の遷移で

Page 35: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

WYSIWYGWhat you see is What you get

Page 36: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

WYSIWYGWhat you see is What you get

Page 37: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

寛容性

• 副作用に対する寛容性

• いろいろ遊んでも大丈夫

Page 38: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

See & Point

• Click & Drag

• Noun -> Verb の順

Page 39: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

User Control

• コントロールしてる感

• 操作してないときは動かない

Page 40: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

10の原則

• 比喩• 操作の直感性• See & Point• 一貫性• WYSIWYG

• コントロール感• フィードバック• 寛容性• 安定性• 美的完成度

Page 41: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

Apple HIG を読むべき理由

• GUIができてすぐに生まれた• 原則は今でも有効

Page 42: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

参考文献

Page 44: メディアインフォマティクスゼミ 第三回「GUI: Apple HIGを読もう」

参考文献楽しいBADUIの世界http://badui.meguri.org/

Graphical Interface Design Galleryhttp://www.guidebookgallery.org/