designing interfaces book reading #3: chapter 5
DESCRIPTION
第3回デザイニング・インターフェース勉強会 録画: http://www.ustream.tv/recorded/23415252TRANSCRIPT
下北沢オープンソース Cafe
デザイニングインターフェース勉強会第3回 5章 - リストで表現する
マクラケン直子 (naokomc)httpswwwfacebookcomgroupsdi2estudy
デザイニングインターフェース 第2版
パターンによる実践的インタラクションデザインhttpamzntoLfZuHZ
naokomc現 ハピネスエンジニア 元 デザイナー
勉強会詳細は Facebook グループで darrhttpswwwfacebookcomgroupsdi2estudy
今日の発表について
5章に書いてあること
「インタラクティブな状況でリスト項目をいかに表示するか」
5章に書いていないこと
bullメニュー（6章）bullリスト項目内の複雑なデータ（7章）bullリンクやナビゲーション（3章）bullモバイルでのリスト（10章）
リストを使う場所
bull全体の概要を表示bull項目をひとつずつブラウジングbull特定の項目を検索bull項目の移動追加削除再カテゴライズ
情報アーキテクチャ再考
bull長さbull順序bullグループ化bull項目のタイプbullインタラクションbull動的なふるまい
2パネルのセレクタ Two-Panel Selector
Picasa デスクトップアプリ
他の例 FinderWindows エクスプローラーメールクライアントなど
1ウィンドウでのドリルダウン One-Window Drilldown
WordPressorg フォーラム
他の例 iPhone メールアプリRavelry フォーラムPicasa アプリなど
リストのインレイ List Inlay
Twittercom
他の例 Kayakcom (航空チケット検索)Google リーダーAmazon モバイルサイトなど
サムネイルのグリッド Thumbnail Grid
SideWinder for WordPress - Dynamic Grid Portfolio
カルーセル Carousel
Beautiful Creative Portfolio - 3D Carousel
Book Store Magento Theme
行のストライプ配色 Row Striping
Converse - Premium Support Theme for Vanilla Forums
ページネーション Pagination
Avenue Continuum Book Store
ThemeForest
Kayakcom Google
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
デザイニングインターフェース 第2版
パターンによる実践的インタラクションデザインhttpamzntoLfZuHZ
naokomc現 ハピネスエンジニア 元 デザイナー
勉強会詳細は Facebook グループで darrhttpswwwfacebookcomgroupsdi2estudy
今日の発表について
5章に書いてあること
「インタラクティブな状況でリスト項目をいかに表示するか」
5章に書いていないこと
bullメニュー（6章）bullリスト項目内の複雑なデータ（7章）bullリンクやナビゲーション（3章）bullモバイルでのリスト（10章）
リストを使う場所
bull全体の概要を表示bull項目をひとつずつブラウジングbull特定の項目を検索bull項目の移動追加削除再カテゴライズ
情報アーキテクチャ再考
bull長さbull順序bullグループ化bull項目のタイプbullインタラクションbull動的なふるまい
2パネルのセレクタ Two-Panel Selector
Picasa デスクトップアプリ
他の例 FinderWindows エクスプローラーメールクライアントなど
1ウィンドウでのドリルダウン One-Window Drilldown
WordPressorg フォーラム
他の例 iPhone メールアプリRavelry フォーラムPicasa アプリなど
リストのインレイ List Inlay
Twittercom
他の例 Kayakcom (航空チケット検索)Google リーダーAmazon モバイルサイトなど
サムネイルのグリッド Thumbnail Grid
SideWinder for WordPress - Dynamic Grid Portfolio
カルーセル Carousel
Beautiful Creative Portfolio - 3D Carousel
Book Store Magento Theme
行のストライプ配色 Row Striping
Converse - Premium Support Theme for Vanilla Forums
ページネーション Pagination
Avenue Continuum Book Store
ThemeForest
Kayakcom Google
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
naokomc現 ハピネスエンジニア 元 デザイナー
勉強会詳細は Facebook グループで darrhttpswwwfacebookcomgroupsdi2estudy
今日の発表について
5章に書いてあること
「インタラクティブな状況でリスト項目をいかに表示するか」
5章に書いていないこと
bullメニュー（6章）bullリスト項目内の複雑なデータ（7章）bullリンクやナビゲーション（3章）bullモバイルでのリスト（10章）
リストを使う場所
bull全体の概要を表示bull項目をひとつずつブラウジングbull特定の項目を検索bull項目の移動追加削除再カテゴライズ
情報アーキテクチャ再考
bull長さbull順序bullグループ化bull項目のタイプbullインタラクションbull動的なふるまい
2パネルのセレクタ Two-Panel Selector
Picasa デスクトップアプリ
他の例 FinderWindows エクスプローラーメールクライアントなど
1ウィンドウでのドリルダウン One-Window Drilldown
WordPressorg フォーラム
他の例 iPhone メールアプリRavelry フォーラムPicasa アプリなど
リストのインレイ List Inlay
Twittercom
他の例 Kayakcom (航空チケット検索)Google リーダーAmazon モバイルサイトなど
サムネイルのグリッド Thumbnail Grid
SideWinder for WordPress - Dynamic Grid Portfolio
カルーセル Carousel
Beautiful Creative Portfolio - 3D Carousel
Book Store Magento Theme
行のストライプ配色 Row Striping
Converse - Premium Support Theme for Vanilla Forums
ページネーション Pagination
Avenue Continuum Book Store
ThemeForest
Kayakcom Google
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
5章に書いてあること
「インタラクティブな状況でリスト項目をいかに表示するか」
5章に書いていないこと
bullメニュー（6章）bullリスト項目内の複雑なデータ（7章）bullリンクやナビゲーション（3章）bullモバイルでのリスト（10章）
リストを使う場所
bull全体の概要を表示bull項目をひとつずつブラウジングbull特定の項目を検索bull項目の移動追加削除再カテゴライズ
情報アーキテクチャ再考
bull長さbull順序bullグループ化bull項目のタイプbullインタラクションbull動的なふるまい
2パネルのセレクタ Two-Panel Selector
Picasa デスクトップアプリ
他の例 FinderWindows エクスプローラーメールクライアントなど
1ウィンドウでのドリルダウン One-Window Drilldown
WordPressorg フォーラム
他の例 iPhone メールアプリRavelry フォーラムPicasa アプリなど
リストのインレイ List Inlay
Twittercom
他の例 Kayakcom (航空チケット検索)Google リーダーAmazon モバイルサイトなど
サムネイルのグリッド Thumbnail Grid
SideWinder for WordPress - Dynamic Grid Portfolio
カルーセル Carousel
Beautiful Creative Portfolio - 3D Carousel
Book Store Magento Theme
行のストライプ配色 Row Striping
Converse - Premium Support Theme for Vanilla Forums
ページネーション Pagination
Avenue Continuum Book Store
ThemeForest
Kayakcom Google
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
5章に書いていないこと
bullメニュー（6章）bullリスト項目内の複雑なデータ（7章）bullリンクやナビゲーション（3章）bullモバイルでのリスト（10章）
リストを使う場所
bull全体の概要を表示bull項目をひとつずつブラウジングbull特定の項目を検索bull項目の移動追加削除再カテゴライズ
情報アーキテクチャ再考
bull長さbull順序bullグループ化bull項目のタイプbullインタラクションbull動的なふるまい
2パネルのセレクタ Two-Panel Selector
Picasa デスクトップアプリ
他の例 FinderWindows エクスプローラーメールクライアントなど
1ウィンドウでのドリルダウン One-Window Drilldown
WordPressorg フォーラム
他の例 iPhone メールアプリRavelry フォーラムPicasa アプリなど
リストのインレイ List Inlay
Twittercom
他の例 Kayakcom (航空チケット検索)Google リーダーAmazon モバイルサイトなど
サムネイルのグリッド Thumbnail Grid
SideWinder for WordPress - Dynamic Grid Portfolio
カルーセル Carousel
Beautiful Creative Portfolio - 3D Carousel
Book Store Magento Theme
行のストライプ配色 Row Striping
Converse - Premium Support Theme for Vanilla Forums
ページネーション Pagination
Avenue Continuum Book Store
ThemeForest
Kayakcom Google
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
リストを使う場所
bull全体の概要を表示bull項目をひとつずつブラウジングbull特定の項目を検索bull項目の移動追加削除再カテゴライズ
情報アーキテクチャ再考
bull長さbull順序bullグループ化bull項目のタイプbullインタラクションbull動的なふるまい
2パネルのセレクタ Two-Panel Selector
Picasa デスクトップアプリ
他の例 FinderWindows エクスプローラーメールクライアントなど
1ウィンドウでのドリルダウン One-Window Drilldown
WordPressorg フォーラム
他の例 iPhone メールアプリRavelry フォーラムPicasa アプリなど
リストのインレイ List Inlay
Twittercom
他の例 Kayakcom (航空チケット検索)Google リーダーAmazon モバイルサイトなど
サムネイルのグリッド Thumbnail Grid
SideWinder for WordPress - Dynamic Grid Portfolio
カルーセル Carousel
Beautiful Creative Portfolio - 3D Carousel
Book Store Magento Theme
行のストライプ配色 Row Striping
Converse - Premium Support Theme for Vanilla Forums
ページネーション Pagination
Avenue Continuum Book Store
ThemeForest
Kayakcom Google
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
情報アーキテクチャ再考
bull長さbull順序bullグループ化bull項目のタイプbullインタラクションbull動的なふるまい
2パネルのセレクタ Two-Panel Selector
Picasa デスクトップアプリ
他の例 FinderWindows エクスプローラーメールクライアントなど
1ウィンドウでのドリルダウン One-Window Drilldown
WordPressorg フォーラム
他の例 iPhone メールアプリRavelry フォーラムPicasa アプリなど
リストのインレイ List Inlay
Twittercom
他の例 Kayakcom (航空チケット検索)Google リーダーAmazon モバイルサイトなど
サムネイルのグリッド Thumbnail Grid
SideWinder for WordPress - Dynamic Grid Portfolio
カルーセル Carousel
Beautiful Creative Portfolio - 3D Carousel
Book Store Magento Theme
行のストライプ配色 Row Striping
Converse - Premium Support Theme for Vanilla Forums
ページネーション Pagination
Avenue Continuum Book Store
ThemeForest
Kayakcom Google
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
2パネルのセレクタ Two-Panel Selector
Picasa デスクトップアプリ
他の例 FinderWindows エクスプローラーメールクライアントなど
1ウィンドウでのドリルダウン One-Window Drilldown
WordPressorg フォーラム
他の例 iPhone メールアプリRavelry フォーラムPicasa アプリなど
リストのインレイ List Inlay
Twittercom
他の例 Kayakcom (航空チケット検索)Google リーダーAmazon モバイルサイトなど
サムネイルのグリッド Thumbnail Grid
SideWinder for WordPress - Dynamic Grid Portfolio
カルーセル Carousel
Beautiful Creative Portfolio - 3D Carousel
Book Store Magento Theme
行のストライプ配色 Row Striping
Converse - Premium Support Theme for Vanilla Forums
ページネーション Pagination
Avenue Continuum Book Store
ThemeForest
Kayakcom Google
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
1ウィンドウでのドリルダウン One-Window Drilldown
WordPressorg フォーラム
他の例 iPhone メールアプリRavelry フォーラムPicasa アプリなど
リストのインレイ List Inlay
Twittercom
他の例 Kayakcom (航空チケット検索)Google リーダーAmazon モバイルサイトなど
サムネイルのグリッド Thumbnail Grid
SideWinder for WordPress - Dynamic Grid Portfolio
カルーセル Carousel
Beautiful Creative Portfolio - 3D Carousel
Book Store Magento Theme
行のストライプ配色 Row Striping
Converse - Premium Support Theme for Vanilla Forums
ページネーション Pagination
Avenue Continuum Book Store
ThemeForest
Kayakcom Google
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
リストのインレイ List Inlay
Twittercom
他の例 Kayakcom (航空チケット検索)Google リーダーAmazon モバイルサイトなど
サムネイルのグリッド Thumbnail Grid
SideWinder for WordPress - Dynamic Grid Portfolio
カルーセル Carousel
Beautiful Creative Portfolio - 3D Carousel
Book Store Magento Theme
行のストライプ配色 Row Striping
Converse - Premium Support Theme for Vanilla Forums
ページネーション Pagination
Avenue Continuum Book Store
ThemeForest
Kayakcom Google
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
サムネイルのグリッド Thumbnail Grid
SideWinder for WordPress - Dynamic Grid Portfolio
カルーセル Carousel
Beautiful Creative Portfolio - 3D Carousel
Book Store Magento Theme
行のストライプ配色 Row Striping
Converse - Premium Support Theme for Vanilla Forums
ページネーション Pagination
Avenue Continuum Book Store
ThemeForest
Kayakcom Google
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
カルーセル Carousel
Beautiful Creative Portfolio - 3D Carousel
Book Store Magento Theme
行のストライプ配色 Row Striping
Converse - Premium Support Theme for Vanilla Forums
ページネーション Pagination
Avenue Continuum Book Store
ThemeForest
Kayakcom Google
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
行のストライプ配色 Row Striping
Converse - Premium Support Theme for Vanilla Forums
ページネーション Pagination
Avenue Continuum Book Store
ThemeForest
Kayakcom Google
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
ページネーション Pagination
Avenue Continuum Book Store
ThemeForest
Kayakcom Google
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
項目へのジャンプ Jump to Item
ldquosrdquo とタイプすると一致する項目に移動する
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
アルファベット式スクローラー Alphabet Scroller
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
カスケーディングリスト Cascading List
Evernote デスクトップアプリ
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
ツリー表示テーブル Tree Table
Chrome ブックマーク管理
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
新規項目の入力行 New-Item Row
BaseCamp
Remember The Milk
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom
パターンライブラリいろいろ
httpui-patternscomhttpdeveloperyahoocomypatterns
httpweliecompatternshttpquinceinfragisticscomhtmlAllPatternsaspx
httppatternrycom