Enviar pesquisa
Carregar
マイクロインタラクションとUXについて
•
5 gostaram
•
1,427 visualizações
Kentaro Tsutsumi
Seguir
2016/01/31に行われてたUI FukuokaのMeetup0回目の時の資料です。初回ということもあり、主にインタラクションについてざっくりと説明しています
Leia menos
Leia mais
Design
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 22
Baixar agora
Baixar para ler offline
Recomendados
今時の試験やさんの気持ち
今時の試験やさんの気持ち
高見 知英
IAD Kyoto
IAD Kyoto
Shigeru Kobayashi
江戸川大学講義資料20140422
江戸川大学講義資料20140422
Osamu Ise
Rethinking hx uxtokyo_jam
Rethinking hx uxtokyo_jam
Satoru MURAKOSHI
Prototyping for micro interactionマイクロインタラクションのためのプロトタイピング
Prototyping for micro interactionマイクロインタラクションのためのプロトタイピング
Shunsuke Kawai
アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?
アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?
Takahiro YAMAGUCHI
UXD教育の実態と課題
UXD教育の実態と課題
Masaya Ando
UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?
UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?
Masaya Ando
Recomendados
今時の試験やさんの気持ち
今時の試験やさんの気持ち
高見 知英
IAD Kyoto
IAD Kyoto
Shigeru Kobayashi
江戸川大学講義資料20140422
江戸川大学講義資料20140422
Osamu Ise
Rethinking hx uxtokyo_jam
Rethinking hx uxtokyo_jam
Satoru MURAKOSHI
Prototyping for micro interactionマイクロインタラクションのためのプロトタイピング
Prototyping for micro interactionマイクロインタラクションのためのプロトタイピング
Shunsuke Kawai
アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?
アプリ時代はデザイナーとエンジニア! 一方その頃ディレクターって?
Takahiro YAMAGUCHI
UXD教育の実態と課題
UXD教育の実態と課題
Masaya Ando
UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?
UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?
Masaya Ando
VRとわたし
VRとわたし
Jun Iio
土石流シミュレーション結果と 3D都市モデルを組み合わせて Unityで可視化する
土石流シミュレーション結果と 3D都市モデルを組み合わせて Unityで可視化する
裕規 山本
横浜での「まちを考える仕事」って?
横浜での「まちを考える仕事」って?
Kimi Kataoka
エンジニアがUXに興味を持った経緯と初期衝動
エンジニアがUXに興味を持った経緯と初期衝動
fumicos
ひとりの心の内を「ことば」にして、間合いをはかる。 #1on1カンファレンス
ひとりの心の内を「ことば」にして、間合いをはかる。 #1on1カンファレンス
chachaki chachaki
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
c-mitsuba
体験をデザインするとは何か
体験をデザインするとは何か
Sunami Hokuto
Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
Atomic Design デザインと実装の狭間
Atomic Design デザインと実装の狭間
takanori sugawara
Experience Design Out of Screen:これからのエクスペリエンスデザイナーの生きる道@UX TOKYO Jam
Experience Design Out of Screen:これからのエクスペリエンスデザイナーの生きる道@UX TOKYO Jam
Akihiko Kodama
ユーザエクスペリエンス~それは何か・どう捉え・どう開発につなげるのか?
ユーザエクスペリエンス~それは何か・どう捉え・どう開発につなげるのか?
Masaya Ando
20141210 オープンデータカフェ@大阪 in ラウンドおおさか
20141210 オープンデータカフェ@大阪 in ラウンドおおさか
FandroidKansai
本当は怖いUXデザイン~あなたはスマホにコントロールされている?
本当は怖いUXデザイン~あなたはスマホにコントロールされている?
Akihiro Moriyama
パッションがとっても大切だった話
パッションがとっても大切だった話
Mutsumi Okano
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
DevLOVEkosien2014_itow_ponde
DevLOVEkosien2014_itow_ponde
英明 伊藤
参加型デザインとソーシャルファブリケーション
参加型デザインとソーシャルファブリケーション
hiroyeah
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
Hub DotnetDeveloper
UX0,1,100
UX0,1,100
UX Tokyo
『UXデザインの教科書』を書きました
『UXデザインの教科書』を書きました
Masaya Ando
Mais conteúdo relacionado
Semelhante a マイクロインタラクションとUXについて
VRとわたし
VRとわたし
Jun Iio
土石流シミュレーション結果と 3D都市モデルを組み合わせて Unityで可視化する
土石流シミュレーション結果と 3D都市モデルを組み合わせて Unityで可視化する
裕規 山本
横浜での「まちを考える仕事」って?
横浜での「まちを考える仕事」って?
Kimi Kataoka
エンジニアがUXに興味を持った経緯と初期衝動
エンジニアがUXに興味を持った経緯と初期衝動
fumicos
ひとりの心の内を「ことば」にして、間合いをはかる。 #1on1カンファレンス
ひとりの心の内を「ことば」にして、間合いをはかる。 #1on1カンファレンス
chachaki chachaki
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
c-mitsuba
体験をデザインするとは何か
体験をデザインするとは何か
Sunami Hokuto
Schoo講演資料130409
Schoo講演資料130409
schoowebcampus
Atomic Design デザインと実装の狭間
Atomic Design デザインと実装の狭間
takanori sugawara
Experience Design Out of Screen:これからのエクスペリエンスデザイナーの生きる道@UX TOKYO Jam
Experience Design Out of Screen:これからのエクスペリエンスデザイナーの生きる道@UX TOKYO Jam
Akihiko Kodama
ユーザエクスペリエンス~それは何か・どう捉え・どう開発につなげるのか?
ユーザエクスペリエンス~それは何か・どう捉え・どう開発につなげるのか?
Masaya Ando
20141210 オープンデータカフェ@大阪 in ラウンドおおさか
20141210 オープンデータカフェ@大阪 in ラウンドおおさか
FandroidKansai
本当は怖いUXデザイン~あなたはスマホにコントロールされている?
本当は怖いUXデザイン~あなたはスマホにコントロールされている?
Akihiro Moriyama
パッションがとっても大切だった話
パッションがとっても大切だった話
Mutsumi Okano
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
DevLOVEkosien2014_itow_ponde
DevLOVEkosien2014_itow_ponde
英明 伊藤
参加型デザインとソーシャルファブリケーション
参加型デザインとソーシャルファブリケーション
hiroyeah
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
Hub DotnetDeveloper
UX0,1,100
UX0,1,100
UX Tokyo
『UXデザインの教科書』を書きました
『UXデザインの教科書』を書きました
Masaya Ando
Semelhante a マイクロインタラクションとUXについて
(20)
VRとわたし
VRとわたし
土石流シミュレーション結果と 3D都市モデルを組み合わせて Unityで可視化する
土石流シミュレーション結果と 3D都市モデルを組み合わせて Unityで可視化する
横浜での「まちを考える仕事」って?
横浜での「まちを考える仕事」って?
エンジニアがUXに興味を持った経緯と初期衝動
エンジニアがUXに興味を持った経緯と初期衝動
ひとりの心の内を「ことば」にして、間合いをはかる。 #1on1カンファレンス
ひとりの心の内を「ことば」にして、間合いをはかる。 #1on1カンファレンス
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
体験をデザインするとは何か
体験をデザインするとは何か
Schoo講演資料130409
Schoo講演資料130409
Atomic Design デザインと実装の狭間
Atomic Design デザインと実装の狭間
Experience Design Out of Screen:これからのエクスペリエンスデザイナーの生きる道@UX TOKYO Jam
Experience Design Out of Screen:これからのエクスペリエンスデザイナーの生きる道@UX TOKYO Jam
ユーザエクスペリエンス~それは何か・どう捉え・どう開発につなげるのか?
ユーザエクスペリエンス~それは何か・どう捉え・どう開発につなげるのか?
20141210 オープンデータカフェ@大阪 in ラウンドおおさか
20141210 オープンデータカフェ@大阪 in ラウンドおおさか
本当は怖いUXデザイン~あなたはスマホにコントロールされている?
本当は怖いUXデザイン~あなたはスマホにコントロールされている?
パッションがとっても大切だった話
パッションがとっても大切だった話
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
DevLOVEkosien2014_itow_ponde
DevLOVEkosien2014_itow_ponde
参加型デザインとソーシャルファブリケーション
参加型デザインとソーシャルファブリケーション
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
UX0,1,100
UX0,1,100
『UXデザインの教科書』を書きました
『UXデザインの教科書』を書きました
マイクロインタラクションとUXについて
1.
マイクロインタラクションと UXについて KENTARO TSUTSUMI, SEREAL @UI
FUKUOKA meetup 31, January, 2016
2.
自己紹介 KENTARO TSUTSUMI, SEREAL UI
Designer (&iOS Developper) 堤健太郎。 愛媛県出身、佐賀育ち。ドイツに1年半。 大学では工業デザインを学ぶ。 独学でグラフィック、UIを勉強。デザイナー歴3年。 DJ歴10年。 音楽とカルチャーとデザインの話が好きです。
3.
本日の流れ マイクロインタラクションとは? 考え方 実際の参考例 参考・出展 1. 2. 3. 4.
4.
マイクロインタラションとは? 1
5.
インタラクションとは? マイクロインタラクションとは? 人間とモノ、相互間のアクションとリアクションのペア。 場合によっては連続的なコミュニケーション。 INTER-ACTION
6.
概要 OS アプリケーション 機能 マイクロインタラクションの領域細かい動作 マイクロインタラクションとは?
7.
どこで効果を発揮するか? タスク量、作用する範囲の点においても “機能”(マクロインタラクション)とは別物 • 単一タスクの処理 • 機器同士の接続 •
テレビのチャンネル切り替えなど、現在進行中のプロセスの制御 • 特定の設定の変更 • ステータスメッセージなど、小さなコンテンツの表示や生成 所作、演出 マイクロインタラクションとは?
8.
アプローチの仕方 2
9.
構成要素 トリガー ルール フィードバック
ループとモード アプローチの仕方
10.
MVC構成要素 Controller Model View トリガー ルール フィードバック アプローチの仕方
11.
トリガー 可視トリガー 不可視トリガー 手動トリガー システムトリガー(自動トリガー) { ※不可視トリガーは学習可能でなければならず、 極めて重要な機能を割り当ててはならない アプローチの仕方 ボタン/スイッチ/スライダーなど、マイクロインタラクションを開 始するためのきっかけとなるもの
12.
ルール アプローチの仕方 マイクロインタラクションが起動された時に、どのように動作する のかという取り決め 例) 別名で保存のルール [Mac
OS 10.7(Lion)で変更されるまで] 1. ファイルに変更を加える 2. ファイルに別名を付けて保存する。 3. その後の変更は新しく作られたファイルに加えられる。以前のファ イルは最後に保存された時の状態で残る
13.
ルールの考慮点 • マイクロインタラクションが起動された時に、どう応えるか? • ユーザーが進行中のマイクロインタラクションをどう制御できる か? •
操作の順番とタイミング • どこから取得するどのデータが利用されるのか? • 使われるデータのアルゴリズムとパラメータ • いつどのようなフィードバックが返されるのか? • マイクロインタラクションの条件分岐とループ • マイクロインタラクションが終わると何が起こるか?...など アプローチの仕方
14.
フィードバックの種類 何かが起きた ユーザーが何かを実行した 処理が始まった 処理が終了した 処理が続行中 ユーザーにそれは出来ないと伝える アプローチの仕方 ○
15.
フィードバックの原則 • フィードバックでユーザーに負担をかけない • 的はずれなフィードバックであってはならない •
最小のフィードバックで最大限のメッセージ • 既にあるものを使ってメッセージを伝える アプローチの仕方
16.
ループとモード アプローチの仕方 マイクロインタラクションの条件分岐や発動サイクル。
17.
まとめ アプローチの仕方 • マイクロインタラクションはプロダクトの世界観 • 不可視トリガーを利用する際は慎重に •
ルールはシンプルに • フィードバックは必ずしも視覚的である必要はない
18.
実際の参考例 3
19.
実際の参考例 おむすび 現在どういう状態で どうすれば問題が解決できるのかを優しく提示する 0件というネガティブな状態を簡単に解決できるよ うに、親しみの持てるアイコンを使って演出 実際の参考例 ユーザーが何かを実行した https://itunes.apple.com/jp/app/omusubi/id1057119265?l=ja&ls=1&mt=8
20.
実際の参考例 Evernote ユーザーの行動を予測して、タスクに集中させる カレンダーに予定が入っていると、その予定内に 作成された新しいノートのタイトルにイベント名 が自動で入力される 実際の参考例 ユーザーが何かを実行した http://littlebigdetails.com/post/135048273517/evernote-when-you-have-an-event-in-your-calendar
21.
実際の参考例 Mailchimp チンパンジーの腕を利用してユーザーに「何が出来ないのか」が示される 改行のない幅広(600px以上)のメールメッセージを送ろうとすると、伸びた腕が もげてしまう 実際の参考例 ○ ユーザーにそれは出来ないと伝える http://littlebigdetails.com/post/4983862770/mailchimp-as-you-stretch-the-browser-window-the
22.
参考・出展 http://littlebigdetails.com/page http://www.amazon.co.jp/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD %E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3- %E2%80%95UI-UX%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E7%A5%9E %E3%81%8C%E5%AE%BF%E3%82%8B%E7%B4%B0%E9%83%A8-Dan-Saffer/dp/4873116597 little big details マイクロインタラクション
―UI/UXデザインの神が宿る細部
Baixar agora