奥行きを意識したプロダクト-iOS9で変わる体験-

2015.11.25 1
奥行きを意識したプロダクト
三橋正典
iOS9で変わる体験

2015.11.25 3
2013.11-
三橋正典
UI Designer
(3284)

2015.11.25 4
受託チームのUI Designer
Flat 株式会社ディー・エヌ・エー Niid 日経新聞

2015.11.25 5
リサーチ・サービス設計
リーンキャンバス作成
デザインテイスト
UI設計
プロトタイピング
ビジュアルデザイン
実装
</>
Flow

2015.11.25 6
UI設計
実装
</>
Flow

2015.11.25 7
Todays Content
iOS9がリリースされてデザイナーが何を感じたか
デザイナーの変わり続ける制作環境

2015.11.25 8
Agenda
01.
iOSとハードウェアのアップデート
02.
新機能をデザイナーの視点から考察する
03.
デザイナーとエンジニアの関わり方

2015.11.25 92015.11.25 9
iOSとハードウェアのアップデート
Topic 01

2015.11.25 12
Apple Pencil
(240 times per second)
サンプリングレート

2015.11.25 13
Apple Pencil
反応速度は20ms(0,02秒)

2015.11.25 14
iPad Pro+Pencil
iPhone5
iPhone4
Galaxy S4
Lumia 928
HTC One
Moto X
0 35 70 105 140
Minimum app response time 2013∼
Agawi test results
スクリーンに対しての反応速度

2015.11.25 15
Apple Pencil
ペンで紙に書いている感覚にかなり近づいた

2015.11.25 18
3D Touch
Peek,Pop

2015.11.25 19
3D Touch
Quick Actions,Pressure Sensitivity

2015.11.25 21
Human Interface Guidelines

2015.11.25 222015.11.25 22
今回のアップデートで感じた事
Topic 01-1

2015.11.25 23
気になった点をあげる
考察する
Keynote見る

2015.11.25 24
まず見るのは

2015.11.25 26
気になった点

2015.11.25 30
Apple TV Home Screen

2015.11.25 31
Apple TV Home Screen

2015.11.25 33
デバイス、スクリーンにレイヤーの概念が強調されている

2015.11.25 34
Quick ActionのUIはどうなっているのか

2015.11.25 36
Quick Actions
Direct
Search
View Activity
New Post
01
02
Layering
レイヤーを意識したインタラクション

2015.11.25 37
デバイス、スクリーンにレイヤーの概念が強調されている

2015.11.25 38
レイヤーを意識したアイコン、UI

2015.11.25 39
平面なモノに対して意味を持たせた
フラットなスクリーンに奥行きを感じるUI
今まではスクリーンは触れるモノという印象が強かった

2015.11.25 40
?
概念が追加された事でユーザは迷わないのか
奥行き、紙のように扱えるスクリーン、複雑な概念？

2015.11.25 41
複雑性を持つということ

2015.11.25 42
複雑性を持つということ
テスラーの複雑性保存の法則
あらゆるプロセスには本来備わっている複雑性があるというものである。
プロセスには、それ以上単純化できない「臨界点」があり、それ以降は、
本来備わっている複雑性を移動できるだけだというものである
※インタラクションンデザインの教科書参照

2015.11.25 44
複雑性
最初複雑に感じたものでも学習し習得する
(例)プログラミング

2015.11.25 45
ソフトウェアユーザ

2015.11.25 46
Skeuomorphism
ユーザに馴染みのないものの外見を、写実的に表現して
馴染みのあるものにすることが目的

2015.11.25 48
Skeuomorphism Flat

2015.11.25 50
現実世界の電話らしさ
複雑性はソフトウェアが持っていた
凹みのあるボタン

2015.11.25 51
現実世界の電話らしさ
凹みのあるボタン
スクリーンサイズの多様化や、
グラフィック要素の情報量の多さによる
学習コストの増加

2015.11.25 52
そもそもユーザはコンテンツの情報そのものを得たい
ユーザが求めるのはその中にあるコンテンツであり
写実的な表現が情報を得る上でノイズになっていた

2015.11.25 54
学習することでユーザは複雑性を理解する
電話
実在するものの素材感や形を似せなくても既にそのものが何か理解している
ソフトウェアではなくユーザが複雑性を持っている

2015.11.25 55
ユーザは常に複雑性を理解し適応していく
質感を持ったUIからフラットなUIになった時のように
最終的にはユーザがその複雑性を理解していく

2015.11.25 56
iOS9,iPhone 6S
Peek,Popできる
何の情報も無くてもすでにPeek,Popできる

2015.11.25 57
iOS9以前はスクリーンを平面として捉えてた

2015.11.25 58
レイヤードされいるように認識し奥行きがあるように感じる

2015.11.25 59
iOSは平面なスクリーンの中に一度Skeuomorphismを取り入れ、
後にFlatなUIとなった。
今そのFlatなUIの中に内包するように立体、奥行きの概念を
取り入れ、Appleは新しいことにチャレンジしているように
感じる
平面から奥行きへ

2015.11.25 602015.11.25 59
新機能をデザイナーの視点から考察する
Topic 02

2015.11.25 61
標準のアプリを参照
考察する

2015.11.25 62
まず見るのは

2015.11.25 63

2015.11.25 64

2015.11.25 65
標準のアプリを参照する
News

2015.11.25 66
Peek,Pop
Spotlight
Quick Action

2015.11.25 69
Quick Action
アプリの先にあるユーザがしたい行動を呼び出す
何ができるアプリなのかよく考えなければならない

2015.11.25 71
Spotlight
OSとアプリの連携が強化され、呼び出したい時に任意のアプリが呼び出せる環境ができてきた
ユーザの行動に合わせて使える設計となり直接コンテンツにもアクセス出来る

2015.11.25 72
Proactive Assistant

2015.11.25 73
Proactive Assistant
音楽を聴く
ヘッドフォンを差し込むと、プロアクティブアシスタント
は以前にかけたアルバムを再生したいのだなと認識します。
ロック画面からあなたの音楽を再生できる状態にします。
または左下に表示された「ミュージック」アイコンを上に
スワイプすると、ロック解除後に「ミュージック」App を
開いてくれます。

2015.11.25 74
Proactive Assistant
メールやイベントを作成する
メールやカレンダーのイベントに連絡先を入力し始めると、以前のメールやイベントに
含まれていた人を候補として表示してくれます。
電話を受ける
不明な電話番号から電話がかかってくると、メールにある電話番号に基づいてだれから
かかってきたのかを知らせてくれます。
イベントに向けて出発する
カレンダーのイベントに場所が設定されている場合、交通状況を考慮して、
出発する時刻になると通知してくれます。

2015.11.25 76
体験の変化
ソフトウェア側がユーザに寄り添い行動をサポートしてくれる
Spotlightの強化でユーザは気づかないレベルでOSからサポートされている
ソフトウェア側がユーザに寄り添い行動をサポートしてくれる

2015.11.25 77
体験の変化
操作が複雑化していく中でアプリはシンプルにOSに順応した形
Peek Pop、Edge Press、OS側で制御するインタラクションが増えている中で、
アプリケーションはOSに順応した形が良い。

2015.11.25 78
体験の変化
Quick Actionはそのアプリ内のユーザがメインに
使う機能をすばやく起動させるもの
アプリの設計を明確に
ユーザに何をさせたいのかアプリのコンテンツを
明確にする

2015.11.25 80
最近気になっているニュース

2015.11.25 81
Force Touch Table
Apple Store Force Touch Table/ Grate App Youtube

2015.11.25 84
高齢者向けアプリケーションの提供

2015.11.25 85
高齢者向けアプリケーションの提供
iPadから薬を飲む時間や運動、ダイエットのお知らせや、コミュニティ活動、
食料雑貨の買い物支援、就業支援などの各種サービスに直接アクセスできる。
画像参照:iPadで高齢者を見守り、日本郵政＋IBM＋アップルが発表／TECH.ASCII.jp

2015.11.25 86
今後デバイスだけでなく壁とかに3D Touchが搭載された空間とかありそう
企業や高齢者向けアプリなどに力を入れているのを見ると今後公共サービスが増えそう
デバイスを持たない時代が来るとしたら
公共空間にある壁とか机から知りたい情報にアクセスできるようになる日も…
余談まとめ

2015.11.25 872015.11.25 87
デザイナーとエンジニアの関わり方
Topic 03

2015.11.25 88
製作環境の変化
OSやハードのアップデートは
ユーザ側に与える影響のみだけではなく
製作者側にも大きな影響がある

2015.11.25 89
最近色々なツールが出てきていて
UIデザインの製作環境も変わってきてる
実機で確認しないとわからない事が多くなった
実機確認の重要性

2015.11.25 90
UI設計
実装
</>
素早くアイディアを形にでき、素早く試作できる

2015.11.25 91
UI設計
実装
</>

2015.11.25 92
ここでコミュニケーションロスが生まれる事が多い

2015.11.25 93
Designer Engineer
Style guide
レイアウト指定
を渡す
実装
不明点の確認

2015.11.25 94
Designer Engineer

2015.11.25 95
実装して実データを入れてみたら何か違う
問題
デバイスサイズによって見え方が違う

2015.11.25 96
エンジニアさんとのコミュニケーションには具体的なものが必要だと感じている

2015.11.25 99
実装して実データを入れてみたら何か違う

2015.11.25 100
JSONデータをデザインに取り入れる

2015.11.25 102
デバイスサイズによって見え方が違う

2015.11.25 103
Adaptiveレイアウトを意識する

2015.11.25 104
Fluid for Sketch 1.6.1

2015.11.25 105
常に実機を意識しながらデザインしエンジニアさんと
コミュニケーションロスをなくす

2015.11.25 106
実装を想定したプラグイン、プロトタイピングツールが増えつつある。

2015.11.25 108
Silver
Sketchのプラグインで、遷移やインタラクションを付けれる

2015.11.25 110
フェーズによってツールを使い分けて
コミュニケーションロスを無くしたい

2015.11.25 111
デザイン上のどんな問題も解決できるという自信と、
自分の最初の思いつきはほとんどが使い物にならないという事を
理解できる謙虚さでしょうね。
優れたインタラクションデザイナーとは？という質問に対しての回答
Larry tesler

2015.11.25 112
常に実践的に試作しながらものづくりをしていきたい
絶賛Xcodeの基礎勉強中

2015.11.25 1132015.11.25 113
まとめ

2015.11.25 114
iOSは愛着のわく道具として
ユーザと対話し続けているが今はまだ
学習し始めであり複雑性をはらんでいる
奥行き

2015.11.25 115
ユーザは複雑性を時間をかけて理解している
複雑性を感じさせないよう設計する事で
本当に使いやすいアプリケーションができる
複雑性

2015.11.25 116
実装を意識したデザインを行い、
エンジニアさんとのコミュニケーショ
ンを密にとれる環境を
制作環境の変化

2015.11.25 117
OSから提供されている機能を理解した上で
ユーザに複雑と感じさせないように提供する
エンジニアさんと協力して何度も
試作し本当に使いやすいアプリケーションを作っていきたい

2015.11.25 118
ご清聴ありがとうございました

奥行きを意識したプロダクト-iOS9で変わる体験-

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (12)

Similar to 奥行きを意識したプロダクト-iOS9で変わる体験-

Similar to 奥行きを意識したプロダクト-iOS9で変わる体験- (20)

奥行きを意識したプロダクト-iOS9で変わる体験-