Enviar búsqueda
Cargar
Sp design2013 v2
•
22 recomendaciones
•
5,899 vistas
Yoshinori Wakizaka
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 61
Descargar ahora
Descargar para leer sin conexión
Recomendados
Sp design2013 v2
Sp design2013 v2
Yukio Andoh
Peanuts butterindenver ja
Peanuts butterindenver ja
Yoshinori Wakizaka
情報リテラシー論04スマートフォンの普及と課題・長岡造形大学
情報リテラシー論04スマートフォンの普及と課題・長岡造形大学
新潟コンサルタント横田秀珠
情報リテラシー論05スマートフォンの普及と課題・長岡造形大学2016
情報リテラシー論05スマートフォンの普及と課題・長岡造形大学2016
新潟コンサルタント横田秀珠
Webアクセシビリティセミナー1:障害当事者のWebの利用方法を知る
Webアクセシビリティセミナー1:障害当事者のWebの利用方法を知る
Web Accessibility Infrastructure Committee (WAIC)
情報リテラシー論04スマートフォン普及と課題2017長岡造形大学
情報リテラシー論04スマートフォン普及と課題2017長岡造形大学
新潟コンサルタント横田秀珠
Smart Narrow Field Communication (SNFC)
Smart Narrow Field Communication (SNFC)
Yutaka Arakawa
Kit 3 d pineal
Kit 3 d pineal
Fundacion Soliris
Recomendados
Sp design2013 v2
Sp design2013 v2
Yukio Andoh
Peanuts butterindenver ja
Peanuts butterindenver ja
Yoshinori Wakizaka
情報リテラシー論04スマートフォンの普及と課題・長岡造形大学
情報リテラシー論04スマートフォンの普及と課題・長岡造形大学
新潟コンサルタント横田秀珠
情報リテラシー論05スマートフォンの普及と課題・長岡造形大学2016
情報リテラシー論05スマートフォンの普及と課題・長岡造形大学2016
新潟コンサルタント横田秀珠
Webアクセシビリティセミナー1:障害当事者のWebの利用方法を知る
Webアクセシビリティセミナー1:障害当事者のWebの利用方法を知る
Web Accessibility Infrastructure Committee (WAIC)
情報リテラシー論04スマートフォン普及と課題2017長岡造形大学
情報リテラシー論04スマートフォン普及と課題2017長岡造形大学
新潟コンサルタント横田秀珠
Smart Narrow Field Communication (SNFC)
Smart Narrow Field Communication (SNFC)
Yutaka Arakawa
Kit 3 d pineal
Kit 3 d pineal
Fundacion Soliris
Oss on Azure, social mobile web
Oss on Azure, social mobile web
Microsoft Openness Japan
デブサミ2013【15D-3】Azureセッション資料
デブサミ2013【15D-3】Azureセッション資料
Shinichiro Isago
≪インテル x ブロケード 特別対談≫ 2020年。どうなる?車とデータセンタの関係 ~SDxの、その先へ~
≪インテル x ブロケード 特別対談≫ 2020年。どうなる?車とデータセンタの関係 ~SDxの、その先へ~
Brocade
モバイルWebアプリのこれまでとこれから
モバイルWebアプリのこれまでとこれから
dsuke Takaoka
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
Yasuhisa Hasegawa
ビジュアライゼーションの役割とUI開発のイノベーション(2)
ビジュアライゼーションの役割とUI開発のイノベーション(2)
BizCOLLEGE
Tablet 20121129 KnowledgeCOMMONS vol.18
Tablet 20121129 KnowledgeCOMMONS vol.18
Visso株式会社
"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014
Takashi Sakamoto
スマフォセキュリティセミナ(配付用) R 20110417
スマフォセキュリティセミナ(配付用) R 20110417
知礼 八子
MWC2016を歩いて分かったコト
MWC2016を歩いて分かったコト
Naoto MATSUMOTO
これからはじめるIoTデバイス mbed入門編
これからはじめるIoTデバイス mbed入門編
Naoto Tanaka
タブレットセミナ[八子] R 20110217
タブレットセミナ[八子] R 20110217
知礼 八子
The Mobile Frontier at HTML5 Conference 2013/11/30
The Mobile Frontier at HTML5 Conference 2013/11/30
Yukio Andoh
スマホ対応
スマホ対応
しくみ製作所
Cloud, why not?
Cloud, why not?
Osaka University
Ppt touya g
Ppt touya g
harmonylab
Ppt touya g
Ppt touya g
harmonylab
同好会発表資料
同好会発表資料
Satoshi Uno
Smart deviceとhtml5
Smart deviceとhtml5
html5j
Software for Edge Heavy Computing @ INTEROP 2016 Tokyo
Software for Edge Heavy Computing @ INTEROP 2016 Tokyo
Shohei Hido
情報デザインの多面性
情報デザインの多面性
Yoshinori Wakizaka
UX Design Lecture in TUAD 2014
UX Design Lecture in TUAD 2014
Yoshinori Wakizaka
Más contenido relacionado
Similar a Sp design2013 v2
Oss on Azure, social mobile web
Oss on Azure, social mobile web
Microsoft Openness Japan
デブサミ2013【15D-3】Azureセッション資料
デブサミ2013【15D-3】Azureセッション資料
Shinichiro Isago
≪インテル x ブロケード 特別対談≫ 2020年。どうなる?車とデータセンタの関係 ~SDxの、その先へ~
≪インテル x ブロケード 特別対談≫ 2020年。どうなる?車とデータセンタの関係 ~SDxの、その先へ~
Brocade
モバイルWebアプリのこれまでとこれから
モバイルWebアプリのこれまでとこれから
dsuke Takaoka
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
Yasuhisa Hasegawa
ビジュアライゼーションの役割とUI開発のイノベーション(2)
ビジュアライゼーションの役割とUI開発のイノベーション(2)
BizCOLLEGE
Tablet 20121129 KnowledgeCOMMONS vol.18
Tablet 20121129 KnowledgeCOMMONS vol.18
Visso株式会社
"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014
Takashi Sakamoto
スマフォセキュリティセミナ(配付用) R 20110417
スマフォセキュリティセミナ(配付用) R 20110417
知礼 八子
MWC2016を歩いて分かったコト
MWC2016を歩いて分かったコト
Naoto MATSUMOTO
これからはじめるIoTデバイス mbed入門編
これからはじめるIoTデバイス mbed入門編
Naoto Tanaka
タブレットセミナ[八子] R 20110217
タブレットセミナ[八子] R 20110217
知礼 八子
The Mobile Frontier at HTML5 Conference 2013/11/30
The Mobile Frontier at HTML5 Conference 2013/11/30
Yukio Andoh
スマホ対応
スマホ対応
しくみ製作所
Cloud, why not?
Cloud, why not?
Osaka University
Ppt touya g
Ppt touya g
harmonylab
Ppt touya g
Ppt touya g
harmonylab
同好会発表資料
同好会発表資料
Satoshi Uno
Smart deviceとhtml5
Smart deviceとhtml5
html5j
Software for Edge Heavy Computing @ INTEROP 2016 Tokyo
Software for Edge Heavy Computing @ INTEROP 2016 Tokyo
Shohei Hido
Similar a Sp design2013 v2
(20)
Oss on Azure, social mobile web
Oss on Azure, social mobile web
デブサミ2013【15D-3】Azureセッション資料
デブサミ2013【15D-3】Azureセッション資料
≪インテル x ブロケード 特別対談≫ 2020年。どうなる?車とデータセンタの関係 ~SDxの、その先へ~
≪インテル x ブロケード 特別対談≫ 2020年。どうなる?車とデータセンタの関係 ~SDxの、その先へ~
モバイルWebアプリのこれまでとこれから
モバイルWebアプリのこれまでとこれから
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
ビジュアライゼーションの役割とUI開発のイノベーション(2)
ビジュアライゼーションの役割とUI開発のイノベーション(2)
Tablet 20121129 KnowledgeCOMMONS vol.18
Tablet 20121129 KnowledgeCOMMONS vol.18
"UI Patterns for Smartphone" HCD-Net SD #6 2014
"UI Patterns for Smartphone" HCD-Net SD #6 2014
スマフォセキュリティセミナ(配付用) R 20110417
スマフォセキュリティセミナ(配付用) R 20110417
MWC2016を歩いて分かったコト
MWC2016を歩いて分かったコト
これからはじめるIoTデバイス mbed入門編
これからはじめるIoTデバイス mbed入門編
タブレットセミナ[八子] R 20110217
タブレットセミナ[八子] R 20110217
The Mobile Frontier at HTML5 Conference 2013/11/30
The Mobile Frontier at HTML5 Conference 2013/11/30
スマホ対応
スマホ対応
Cloud, why not?
Cloud, why not?
Ppt touya g
Ppt touya g
Ppt touya g
Ppt touya g
同好会発表資料
同好会発表資料
Smart deviceとhtml5
Smart deviceとhtml5
Software for Edge Heavy Computing @ INTEROP 2016 Tokyo
Software for Edge Heavy Computing @ INTEROP 2016 Tokyo
Más de Yoshinori Wakizaka
情報デザインの多面性
情報デザインの多面性
Yoshinori Wakizaka
UX Design Lecture in TUAD 2014
UX Design Lecture in TUAD 2014
Yoshinori Wakizaka
モバイルのためのUXデザイン
モバイルのためのUXデザイン
Yoshinori Wakizaka
Storytelling ux tokyo-en
Storytelling ux tokyo-en
Yoshinori Wakizaka
Storytelling workshop handout
Storytelling workshop handout
Yoshinori Wakizaka
Devlove1210 wackiesrock
Devlove1210 wackiesrock
Yoshinori Wakizaka
UI for UX_Aug2011
UI for UX_Aug2011
Yoshinori Wakizaka
#4_web_ux_wakizaka
#4_web_ux_wakizaka
Yoshinori Wakizaka
Más de Yoshinori Wakizaka
(8)
情報デザインの多面性
情報デザインの多面性
UX Design Lecture in TUAD 2014
UX Design Lecture in TUAD 2014
モバイルのためのUXデザイン
モバイルのためのUXデザイン
Storytelling ux tokyo-en
Storytelling ux tokyo-en
Storytelling workshop handout
Storytelling workshop handout
Devlove1210 wackiesrock
Devlove1210 wackiesrock
UI for UX_Aug2011
UI for UX_Aug2011
#4_web_ux_wakizaka
#4_web_ux_wakizaka
Sp design2013 v2
1.
第6回 スマホデザイン会議「UI/UX最前線」 モバイルが切り拓く マルチデバイスエクスペリエンスの未来 The mobile
frontier : Designing mobile experience Mar 19 2013 Yukio Ando, Yoshinori Wakizaka (UX TOKYO)
2.
なぜモバイルなのか?
3.
モバイル≒スマホ
4.
スマートフォン国内契約者数予測(2012.03)
(c)MM総研2012 http://www.m2ri.jp/data/news/image/20120313/1331622492-2.jpg 契約者の5割がスマートフォン
5.
スマートフォン国内出荷台数予測(2012.03)
(c)MM総研2012 http://www.m2ri.jp/data/news/image/20120313/1331622492-1.jpg 出荷台数の7割がスマートフォン
6.
国内モバイルトラフィックの変遷
(c)総務省2012 http://itpro.nikkeibp.co.jp/article/NEWS/20120319/387162/?SS=imgview&FD=1400632865&ST=network
7.
世界のモバイルトラフィック予測 (c)cisco 地域別にみた推移 http://www.cisco.com/web/JP/solution/isp/ipngn/literature/images/white_paper_c11-520862-03.jpg
デバイス別にみた推移 http://www.cisco.com/web/JP/solution/isp/ipngn/literature/images/white_paper_c11-520862-04.jpg
8.
メディアの進化
(c)copperval marketing http://www.copperval.com/index.html 印刷物からWebへ
9.
メディアの進化
(c)copperval marketing http://www.copperval.com/index.html PCメディアの進化
10.
メディアの進化 (c) yahoo!
(c) google PCからモバイルへ
11.
メディアの進化 (c) nhn
(c) path スマホ発のサービス
12.
メディアの進化
印刷メディア PC モバイル(スマホ) 企業 ブローシャ オンライン メディア モバイル コミュニケーション
13.
スマホの特徴
いつでもどこからでもインターネットに接続できる インターネットサービスの新しい利用端末になった 独自のI/F(タッチパネル、カメラ、GPS、加速度センサー) 新しいサービス体験
14.
モバイルのためのデザイン
15.
モバイルデザインのノウハウ Web、アプリデザインに関する良書、ガイドライン
コンセプト 設計手法
16.
モバイルUXデザインの可能性を探る
17.
モバイルフロンティア(Mobile Frontier) 2013年4月刊行予定
18.
モバイルUXのコンテクスト
19.
モバイルのコンテクスト モバイル=「いつでも、どこからでも」使える
(c) rosenfeldmedia
20.
モバイルのコンテクスト チャレンジングな状況でも気にしない
(c) rosenfeldmedia
21.
モバイルコンテクストの原則 いつでも、どこからでも な状況にのためのデザイン 1. モバイルならではの体験を作ることにフォーカスする 2.
注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
22.
モバイルコンテクストの原則 どこでも な状況に対処するために 1. モバイルならではの体験を作ることにフォーカスする 2.
注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
23.
1. モバイルならではの体験
PCとモバイルでの利用状況の違い スクリーンサイズ 大きい 小さい 利用状況 限定的 ばらばら 注意のレベル 高い 断片的 ネットワークへのアクセス 快適 限定的 (c) rosenfeldmedia
24.
1. モバイルならではの体験 モバイルならではのユニークな体験 既存のメディア(PC)の延長線上にあるeMail
モバイルでの新しい体験を提供しているShazam (c) rosenfeldmedia
25.
1. モバイルならではの体験
モバイルにおける3つの制約 デバイスの制約 人間の制約 スモールフォームファクター 無くしやすい T9/QWERTY英数入力 言語やメタファが適切ではない カメラ/ビデオ 認知に集中を要する バッテリー駆動 文字入力が難しい 無線通信、Wi-Fi、Bluetoothでのネットアクセス 文字やイメージが小さくて読みにくい場合がある マイク、スピーカー、ヘッドフォン コンテクストによっては聞き取りにくい場合がある 加速度センサ 作業記憶を多分に要する場合がある 環境の制約 ほぼどこでも使える、どこにでも仕舞える 明るい太陽光の下ではスクリーンのグレアが発生する 壊れやすい(水没、埃など) ある状況では利用が禁止されている ネットワーク圏外では使えない 電源が手に入らない状況がある 料金プランによる制約がある(ローミング、データ通信)
26.
モバイルコンテクストの原則 いつでも、どこからでも な状況に対処するために 1. モバイルならではの体験を作ることにフォーカスする 2.
注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
27.
2. 注意散漫・行動が遮られる
行動や制約に関する差異 スキューバーダイビング(連続的=視界良好、酸素もいっぱい) シュノーケリング(限定的=狭い視界、息継ぎが必要) (c) rosenfeldmedia
28.
2. 注意散漫・行動が遮られる 誰もに覚えがある「マルチタスク」
(c) rosenfeldmedia
29.
2. 注意散漫・行動が遮られる 電話がかかってくる、バスが到着する、、
マルチタスク 頻繁にタスクを切り替える 常にネットワークに繋がっている
30.
2. 注意散漫・行動が遮られる デバイスの機能や外部環境から常に遮られている状態
マルチタスキング 継続的注意力断片化 頻繁にタスクを切り替える (Continuous Partial Attention:CPA) 常にネットワークに繋がっている
31.
2. 注意散漫・行動が遮られる 継続的注意力断片化とは? 第一のキーワード、Wikipediaにも項目がある「Continuous Partial
Attention」(以下、CPA) は、かつてアップルに、そしてマイクロソフトの研究部門に在籍していた Linda Stoneが考案した用 語です。多種多様なメディアやコミュニケーションチャネルの動向に対して常に注意を払わずにはい られない状態を意味し、「継続的注意力断片化」などと訳されることもあります。 (c) IA Spectrum 2009 マルチタスク→継続的注意力断片化 能動的 受動的
32.
2. 注意散漫・行動が遮られる 継続的注意力断片化に対する対処方法 •
中断してもすぐに再開できるようにする • メニューを深くしない • すべてのコンテンツをみせない
33.
モバイルコンテクストの原則 どこでも な状況に対処するために 1. モバイルならではの体験を作ることにフォーカスする 2.
注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
34.
3. 認知的負荷や機会費用を減らす Contextual Design
により負荷や費用を減らす 認知的負荷 ワーキングメモリをコントロールするための負荷 機会費用 ある行動を選択することで失われる、他の選択肢を選んだ時に得られる利益
35.
3. 認知的負荷や機会費用を減らす コンテクストが変われば、代替案を選ぶ費用も変わる ニーズ: 近所のショッピングセンターでお買い物するために電車に乗りたい モチベーション/緊急性:
低い 利用環境: 自宅 代替手段: PCを使ってオンラインスケジュールを確認、車で運転して買い物に行く、駅まで行って駅 員に電車の時刻を聞く、友だちに電話する 平常時 緊急時 ニーズ: 土地勘がない場所での検索 モチベーション/緊急性: 非常に高い 利用環境: ストリート、混雑した駅 代替手段: BART(地下鉄の名称)の駅にある地図、駅で乗務員や乗客に尋ねる、友だちに電話する
36.
モバイルUXの足がかり モバイルの特性は時空間的な情報とダイナミクス Shazam:今、目の前にある音楽とユーザーの関係性を活用している。 IntroNow:ShazamのTV番組版。TVの音声を使って番組を検索し、ソーシャルでシェアできる。
(c) rosenfeldmedia
37.
コンテクストがトリガになる マップのエクスペリエンス PCでは現在地を自分で入力しなければいけない モバイルでは、現在地の情報を自然と利用することができる
(c) rosenfeldmedia
38.
メディアコンバージェンス
39.
デバイスエコシステム PC中心のエコシステムに変化が起きた モバイルを含めたマルチデバイス環境が構築され、UXデザインのルールが変化している
40.
デバイスエコシステム モバイルを含めたエコシステムが構築されている エコシステムの代表的なデザインパターン=モバイルデバイスの使い方 一貫性の保持
状態の保持 デバイス間の移動 (c)mobile frontier
41.
デバイスエコシステム 一貫性の保持 各タッチポイントのUX(デザイン、コンテンツ、インタラクション)に一貫性を持たせること
(c)mobile frontier
42.
デバイスエコシステム
(c)evernote
43.
デバイスエコシステム 状態の保持 どのタッチポイントでサービスを利用しても、同じ状態を保っていること
(c)mobile frontier
44.
デバイスエコシステム (c)amazon
45.
デバイスエコシステム デバイス間の移動 同じエコシステム内にあるデバイス間で情報をやり取りできること
(c)mobile frontier
46.
デバイスエコシステム デバイス間の移動 あるデバイスで利用しているコンテンツを他のデバイスでも利用できること
(c)Apple
47.
モバイルUXのデザインパターン
48.
モバイルUXのデザインパターン UXの定義、UI設計の参考にになるデザインパターン
UX UI 入力 I/F モバイルで提供すべきUXの考え方 モバイルの画面設計についての考え方 モバイル特有の機能を生かす
49.
モバイルUXのデザインパターン クラウドとアプリを基本単位としてデザインする
50.
モバイルUXのデザインパターン クラウドにあるデータをモバイル端末で利用する コンテンツを観る
データを操作する 日記、メモを共有する ニュースを共有する
51.
モバイルUXのデザインパターン スマホの画面は狭い&通信環境が良くない場合がある
52.
モバイルUXのデザインパターン
マトリョーシカパターン Hub&Spokeパターン Bento Boxパターン
53.
モバイルUXのデザインパターン
いろいろな入力メソッドを活用する (c) flickr
54.
モバイルUXのデザインパターン デバイスの機能 入力インターフェース候補 タッチ入力
音声入力 画像入力 位置情報・GPS
55.
UI / IxDの作り込み
56.
アニメーションの法則 multitasking woman
57.
ディズニーのアニメーションの12原則 ■スクオッシュ(潰し)とストレッチ(伸ばし) ■アンチシペーション(予備動作) ■ステージング(舞台演出) ■ストレート・アヘッド・アクション(逐次描き)とポーズ・ トゥ・ポーズ(原画による設計) ■フォロー・スルーとオーバーラッピング・アクション(あと 追いの工夫) ■スロー・インとスロー・アウト(両端づめ) ■アーク(運動曲線) ■副次アクション ■タイミング ■誇張 ■実質感のある絵
58.
ディズニーのアニメーションの12原則
http://www.youtube.com/watch?v=xqGL1ZLk3n8
59.
アニメーションの原則を生かす手法 1■ 良いアプリをたくさん自分で使い込む。たくさん探す。 2■ 良いものが、なぜ良いのか、自分の中で分析・分解する。 3■
常用アプリが更新したら、どこが変わったのか比較する。 4■ 必要なのは「意味のある」動きだけ。単一画面内での動き。 5■ コンテンツが王様。直接操作。UIは本来無くていいもの。 6■ インタフェースは媒介物、人々のインタラクションを考慮。 7■ 指が触れて操作する瞬間は画面が見えないことを考慮。 8■ 使っている人を観察する。5人の試用で85%の問題は解明。 9■ 情報の密度を落とす。着目すべきところを演出する。 10■ 中断されることが前提。途中から始まることが前提。 11■ iPhone と Android と同じにする必要無し。一人1台。 12■ 外に出て使う。ストレスフルな状況下で使う。速度重要。
60.
間違いなくモバイルの時代
61.
2013年4月刊行予定
Descargar ahora