デザイニング・インターフェイス勉強会 第6章「アクションとコマンド」

下北沢オープンソース Cafe

デザイニング・インターフェース勉強会6章 - アクションとコマンド

安川 要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/

デザイニング・インターフェース 第2版

パターンによる実践的インタラクションデザインhttp://amzn.to/LfZuHZ

@yasulabUIデザインを勉強したいエンジニア

勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/

今日の発表について

6章で学ぶこと

1. 正しいアクションを利用できるようにして,2. それらによいラベルを付け,3. 見つけやすくし,4. アクションのつながりをサポートすること.

ユーザに対してアクションを提示する一般的な方法について学ぶ.

アクションを提示するための,具体的なデザインパターンを学ぶ.

ユーザに対してアクションを提示する一般的な方法について学ぶ.

アクションを提示するための,具体的なデザインパターンを学ぶ.

アクションを提示する一般的な 8+4 の方法

８つの見えるアクション＋

４つの見えないアクション

1.Button

2.Menu Bar

3.Popup Menu

4.Dropdown Menu

5.Toolbar

6.Link

7.Action Panel

8.Mouseover Tool

８つの見えるアクション

1. Button

「ここをクリックしてね！」と訴えるためのもの

Google Docs におけるボタン

2. Menu Bar

アプリケーション内で用いるアクションの完全な集合.

Keynote

3. Popup Menu

マウスの右クリックやジェスチャで呼び出せるもの.

Mac OS X (desktop) keynote

4. Dropdown Menu

フォームで選択肢を選ぶためのもの（ ≠ アクションを実行するためのもの）

Facebook Post

5. Toolbar

アイコンを用いたボタンが並んだ細長い行

Blogger - Post

6. Link

クリッカブルだという印象を高めるもの色つき(主に青色）のテキストや、Mouseoverでポインタの形状を変えて下線を引く、など

7. Action Panel

画像でアクションを示すもの

iPhoto

8. Mouseover Tool

複数のアクションを何度も表示させないためのもの

Tail Gamershttp://tail-gamers.herokuapp.com/

1.Button

2.Menu Bar

3.Popup Menu

4.Dropdown Menu

5.Toolbar

6.Link

7.Action Panel

8.Mouseover Tool

８つの見えるアクション

9. Double Click

10. Keyboard Action

11. Drag & Drop

12. Input Command

4つの見えないアクション

9. Double Click

この項目を開く or デフォルトの処理を実行するもの

Keynote

double click

10. Keyboard Action

‘Ctrl-s => save’ のような周知の keyboard shortcut

keynote -> File

11. Drag & Drop

あるファイルをそのアプリケーションで開くためのもの

Gmail -> Compose email -> D&D file

e.g. これをここに移動する，この操作をそれに対して行う.

12. Input Command

全てのアクションに対して自由な形式でアクセスさせるもの

Gmail -> type ‘?’(vim-like shortcuts)

9. Double Click

10. Keyboard Action

11. Drag & Drop

12. Input Command

4つの見えないアクション

アクションを提示する一般的な 8+4 の方法

８つの見えるアクション＋

４つの見えないアクション

活用例：GrageBand におけるアクション

ユーザに対してアクションを提示する一般的な方法について学ぶ.

アクションを提示するための,具体的なデザインパターンを学ぶ.

ユーザに対してアクションを提示する一般的な方法について学ぶ.

アクションを提示するための,具体的なデザインパターンを学ぶ.

1. Button Groups

2. Hover Tools

3. Action Panels

4. Prominent ‘Done’ Button

5. Smart Menu Items

6. Preview

7. Progress Indicator

8. Cancelability

9. Multi-Level Undo

10.Command History

11.Macros

アクションを提示する際のデザインパターン

1. Button Groups

2. Hover Tools

3. Action Panels

4. Prominent ‘Done’ Button

5. Smart Menu Items

6. Preview

7. Progress Indicator

8. Cancelability

9. Multi-Level Undo

10.Command History

11.Macros

アクションを提示する際のデザインパターン

1. Button Group / ボタンのグループ

MS Word / Adobe Flash Builder

関連のあるアクションをグループ化して整理するワザ

2. Hover Tools / マウスオーバー表示ツール

favtile

対象となる項目に行うアクションを、マウスオーバーするまで非表示にするワザ

3. Action Panels / アクションパネル

Picasa

どの項目にもすべてのアクションを表示したいが,ポップアップで表示するには数が多すぎるときのワザ

1. Button Groups

2. Hover Tools

3. Action Panels

4. Prominent ‘Done’ Button

5. Smart Menu Items

6. Preview

7. Progress Indicator

8. Cancelability

9. Multi-Level Undo

10.Command History

11.Macros

アクションを提示する際のデザインパターン

4. Prominent ‘Done’ Button / 目立つ「完了」ボタン

JetBlue / Kayak / Southwest

視覚的な流れの終了地点に、目立つボタンを配置するワザ

5. Smart Menu Items / 動的なメニュー項目

Gmail Menu

メニューのラベルを動的に変更するワザ

1. Button Groups

2. Hover Tools

3. Action Panels

4. Prominent ‘Done’ Button

5. Smart Menu Items

6. Preview

7. Progress Indicator

8. Cancelability

9. Multi-Level Undo

10.Command History

11.Macros

アクションを提示する際のデザインパターン

6. Preview / プレビュー

Mac OS X - Print

あるアクションを実行したら何が起こるが、事前に知らせるワザ

7. Progress Indicator / プログレス表示

Mac OS X - Copy

時間を要する処理において、どれくらい進行したかをユーザに示すワザ

8. Cancelability / キャンセル機能

Adobe AIR - Install Dialog

時間を要する処理において、副作用を起こすことなく即座にキャンセルするワザ

1. Button Groups

2. Hover Tools

3. Action Panels

4. Prominent ‘Done’ Button

5. Smart Menu Items

6. Preview

7. Progress Indicator

8. Cancelability

9. Multi-Level Undo

10.Command History

11.Macros

アクションを提示する際のデザインパターン

9. Multi-Level Undo / マルチレベルのアンドゥ

Photoshop

ユーザが実行した一連のアクションを、逆順に戻せる方法を用意する

10. Command History / 操作の履歴

Mac OS X - Terminal

アクションを見える形で記録しておく

11. Macros / マクロ

Max OS X - Terminal

連続するアクションを「記録」し、いつでも「再生」できる方法を用意する

1. Button Groups

2. Hover Tools

3. Action Panels

4. Prominent ‘Done’ Button

5. Smart Menu Items

6. Preview

7. Progress Indicator

8. Cancelability

9. Multi-Level Undo

10.Command History

11.Macros

アクションを提示する際のデザインパターン

ユーザに対してアクションを提示する一般的な方法について学ぶ.

アクションを提示するための,具体的なデザインパターンを学ぶ.

6章で学ぶこと

1. 正しいアクションを利用できるようにして,2. それらによいラベルを付け,3. 見つけやすくし,4. アクションのつながりをサポートすること.

@yasulabUIデザインを勉強したいエンジニア

勉強会詳細は Facebook グループで ↓https://www.facebook.com/groups/di2e.study/

今日の発表について

下北沢オープンソース Cafe

デザイニング・インターフェース勉強会6章 - アクションとコマンド

安川 要平 / @yasulabhttps://www.facebook.com/groups/di2e.study/