下北沢オープンソース Cafe

デザイニング・インターフェース勉強会第10章 - モバイルへの対応

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

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

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

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

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

今日の発表について

第10章で学ぶこと

モバイル用サイト制作に関する環境的な課題およびアプローチについて理解する．また，その具体的なデザインパターンについて学ぶ．

モバイルサイト制作に関する課題・アプローチ ついて学ぶ.

モバイルサイトを制作するための,具体的なデザインパターンを学ぶ.

モバイルサイト制作に関する課題・アプローチ ついて学ぶ.

モバイルサイトを制作するための,具体的なデザインパターンを学ぶ.

1. ちっぽけな画面サイズ

2. さまざまな画面サイズ

3. タッチスクリーン

4. テキスト入力の難しさ

5. 物理的な厳しい環境

6. ソーシャルな影響と限られた注意力

モバイル向けデザインの６つの課題

1. ちっぽけな画面サイズ

贅沢品を並べる余裕はない。本質に関わらない部分はきっぱり捨てるか、サイトの奥にしまっておこう。

2. さまざまな画面の幅

ページをスクロールしながら見るのは面倒ではないが，平均的な画面の横幅については十分に考える必要がある.

cf. Effective Design Multiple Screen Sizehttp://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

3. タッチスクリーン

“小さなターゲットに指で正確に触れるのは大変だ. リンクやボタンは楽にタッチできるくらい大きくしよう.”

4. テキスト入力の難しさ

タッチスクリーンのキーボード入力を好むユーザは少ない (*).積極的に Auto Completion や Good Defaults を採用しよう.

* 日本では、逆にモバイル端末のキーボード入力を好むユーザの方が多いかもしれない。

≧

5. 物理的に厳しい環境

モバイルデバイスはあらゆる場所で使われている.光量や周囲の騒音の違い, 振動の影響について考えよう.

大事なことは、ミスを許容して、ミスを簡単に直せるようにデザインすること.

6. ソーシャルな影響と限られた注意力

モバイルユーザは，大抵, 他のことをしながらサイトを見る.簡単に素早く, 中断/再開が出来て, 一目で分かるようにする.

1. ちっぽけな画面サイズ

2. さまざまな画面サイズ

3. タッチスクリーン

4. テキスト入力の難しさ

5. 物理的な厳しい環境

6. ソーシャルな影響と限られた注意力

モバイル向けデザインの６つの課題

1. モバイルユーザには、実際のところ何が必要なのか？

2. 無駄を減らしてサイトやアプリの本質を示す.

モバイル向けデザインへの５つのアプローチ

1. モバイルユーザには、実際のところ何が必要なのか？

2. 無駄を減らしてサイトやアプリの本質を示す.

3. 可能ならば、デバイスのハードウェアを利用する.

4. コンテンツをリニアライズする.

5. よく実行される一連のインタラクションを最適化する.

モバイル向けデザインへの５つのアプローチ

参考にすべき事例

JetBlue RuthsChris Boston Fidelity

モバイルサイト制作に関する課題・アプローチ ついて学ぶ.

モバイルサイトを制作するための,具体的なデザインパターンを学ぶ.

モバイルサイト制作に関する課題・アプローチ ついて学ぶ.

モバイルサイトを制作するための,具体的なデザインパターンを学ぶ.

1. Vertical Stack

2. Filmstrip

3. Touch Tools

4. Bottom Navigation

5. Thumbnail-and-Text List

6. Infinite List

7. Generous Borders

8. Text Clear Button

9. Loading Indicators

10.Richly Connected Apps

11.Streamlined Branding

モバイルサイト/アプリのデザインパターン

1. Vertical Stack

2. Filmstrip

3. Touch Tools

4. Bottom Navigation

5. Thumbnail-and-Text List

6. Infinite List

7. Generous Borders

8. Text Clear Button

9. Loading Indicators

10.Richly Connected Apps

11.Streamlined Branding

モバイルサイト/アプリのデザインパターン

1. Vertical Stack / 縦方向のスタック

ESPN / Google News / REI

コンテンツを縦１カラムで構成する.横並びの要素を極力使用しない.

1. Vertical Stack

2. Filmstrip

3. Touch Tools

4. Bottom Navigation

5. Thumbnail-and-Text List

6. Infinite List

7. Generous Borders

8. Text Clear Button

9. Loading Indicators

10.Richly Connected Apps

11.Streamlined Branding

モバイルサイト/アプリのデザインパターン

2. Filmstrip / 映写スライド

iPhone の天気アプリ

トップレベルの複数のページを横並びにして,左右のスワイプ操作で１度に１ページずつ見せるワザ

3. Touch Tools / タッチ表示ツール

iPhone Image Viewer

画面タッチやキーを押す操作に応じて，ツールをオーバーレイで表示するワザ

1. Vertical Stack

2. Filmstrip

3. Touch Tools

4. Bottom Navigation

5. Thumbnail-and-Text List

6. Infinite List

7. Generous Borders

8. Text Clear Button

9. Loading Indicators

10.Richly Connected Apps

11.Streamlined Branding

モバイルサイト/アプリのデザインパターン

4. Bottom Navigation / 下部ナビゲーション

At the bottom of Amazon.com Google Image Search

グローバルナビゲーションを,ページの一番下(スクロールしないと見えない)に配置するワザ

1. Vertical Stack

2. Filmstrip

3. Touch Tools

4. Bottom Navigation

5. Thumbnail-and-Text List

6. Infinite List

7. Generous Borders

8. Text Clear Button

9. Loading Indicators

10.Richly Connected Apps

11.Streamlined Branding

モバイルサイト/アプリのデザインパターン

5. Thumbnail-and-Text List / サムネイルとテキストのリスト

Yahoo! News Boston.com Mashable

選択可能な項目のリストを, 項目ごとにサムネイル画像＋テキストで表示するワザ

5. Thumbnail-and-Text List / サムネイルとテキストのリスト

iPhone App Store

選択可能な項目のリストを, 項目ごとにサムネイル画像＋テキストで表示するワザ

6. Infinite List / 無限リスト

Facebook iTunes

長いリストの一番下に，さらに多くの項目を読み込んでリストに追加するためのボタンを配置するワザ

1. Vertical Stack

2. Filmstrip

3. Touch Tools

4. Bottom Navigation

5. Thumbnail-and-Text List

6. Infinite List

7. Generous Borders

8. Text Clear Button

9. Loading Indicators

10.Richly Connected Apps

11.Streamlined Branding

モバイルサイト/アプリのデザインパターン

7. Generous Borders / ゆとりのあるボーダー

Best Western

タッチスクリーン搭載デバイスで、ボタンやリンク、その他のタップ可能なコントロールの周囲の感覚や余白を広く持たせるワザ

8. Text Clear Button / テキスト消去ボタン

Safari URI Input

ボタンを１回タップする操作によって,テキストフィールドの内容を消去するワザ

9. Loading Indicators / 読み込み中のインジケーター

iPhone の株価アプリ

ページまたはページ内の要素を読み込むときに,それが表示される場所でプログレス表示を行うワザ

10. Richly Connected Apps / 豊富なアプリ連携

Freedom Trail

電話機能や地図，ブラウザといった他のアプリを直接呼び出すリンクを配置して，ユーザの現在の状況に見合ったデータを予備入力するワザ

11. Streamlined Branding / スリム化したブランディング

Mobile vs. Website of JetBlue

組織のロゴや色，その他のブランディング要素を,素早く読み込める状態にして再利用するワザ

1. Vertical Stack

2. Filmstrip

3. Touch Tools

4. Bottom Navigation

5. Thumbnail-and-Text List

6. Infinite List

7. Generous Borders

8. Text Clear Button

9. Loading Indicators

10.Richly Connected Apps

11.Streamlined Branding

モバイルサイト/アプリのデザインパターン

モバイルサイト制作に関する課題・アプローチ ついて学ぶ.

モバイルサイトを制作するための,具体的なデザインパターンを学ぶ.

第10章で学ぶこと

モバイル用サイト制作に関する環境的な課題およびアプローチについて理解する．また，その具体的なデザインパターンについて学ぶ．

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

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

今日の発表について

下北沢オープンソース Cafe

デザイニング・インターフェース勉強会第10章 - モバイルへの対応

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