ボタンの一生

(音楽)

(拍手) こんにちは ジュリアンです サウンドデザイン担当の ヒューゴも後で登場します なぜボタンの話をするか 最初に少し ご説明します 私は未来のハードウェアの ユーザインターフェイスを 設計しています 仕事の性質上 標準のUIKitを常には使えません スクロール ズーム ページング ボタンなど ユーザインターフェイスの 基本エレメントを構築します コントロールに関わる 詳細について 多くを学んできました

今日はその一端を 皆さんにお伝えします

単純に見えるボタンに 隠された― 配慮と複雑さを 知ってほしいのです

ボタンから学べることが あると思います 標準コントロールを もっと考えて使い

カスタムコントロールの 構築時期を検討してください

カスタムにするなら インタラクションが重要です

では始めます

我々はトーストApp帝国を 展開しようとしています

今 構築中の よりシンプルなAppは トースターと連動します

朝の支度を考えてください 朝食はタイミングよく できていてほしいものです

このアプリケーションを 起動してボタンを押せば キッチンでトーストが 焼き上がります

接続したトースターが 稼働します トースターは準備 焼くという 段階をへて 最終的にトーストが完成します

しかしトースターが この過程を進むのは アプリケーションを 使うからです パンを焼くリクエストを 出すことで トースターを動かします

完成したら 当然食べるでしょうが キャンセルする場合も あるでしょう トースターは常に 待機状態にしておきたいです 詳細は明かしませんが 性能は確実です

拡張現実トーストの構想も 描いています 各家庭の複数のトースターで トースト･ソーシャル ネットワークを作るのです

いろいろと進行中ですよ

今日はシングルスクリーンの 詳細を掘り下げます 我々のアプリケーションも 単一画面にボタンが１つです

重要なインタラクションの 詳細から全容が見えます

再び我々のシステムです

ここで最も重要な インタラクションは トーストをリクエストする時です もちろん他も重要ですが これが第一に来ます トースターが動かなければ 元も子もありません

最初にボタンとは何かという 話題に触れてから

インタラクティブコントロールに ついて考えましょう

最後にヒューゴが 音について話します

今日 取り上げるのは

ユーザインターフェイスを コントロールするボタンです

アクションを間接的に コントロールします

つまりボタンとは別の場所で アクションが起きます 直接的なインタラクションは

例えばレバーをつかんで コントロールします

直接的インタラクションは 体感できる面白さがあります しかし 間接的インタラクションは 離れているからこそ よりパワフルになり得ます

画面上のボタンがまねる 本物のボタンも 面白いことに 間接的に作用します

離れた場所にあるボタンが アクションを 制御しているわけです アクション同様に ボタンも設計が可能です 切り離して考えることも できます

ボタンの設計において デザインフィードバックは 非常に重要です

アプリケーションの動きを ユーザに伝えるため

皆さんもフィードバックを 活用していますね フィードバックには さまざまな形があります しかし大きく分けると ２つに分類されます

１つは言葉やアイコンです 今 起きていることを 画面の上で 文章やアイコンで説明します

もう１つは アクションの結果を 実際に体験してもらう フィードバックで よりリアルです 視覚 聴覚 触覚の変化を通して 徐々に体験します

インタラクションの３つの フェーズでフィードバックを

考えてみましょう フェーズは 本物のボタンと同じです

押す前は ただ そこにあるだけです

インタラクションの間は 押下され

押した後は指が離れ ボタンは元の状態に戻ります

ボタンのインタラクションを 始める前に フィードバックを出す 理由を考えます なぜ それが重要なのでしょう

iPhoneを 考えてみましょう iPhoneの画面は １枚のガラスです ガラスの下に 光るピクセルがあります 問題はピクセルの 意味の捉え方です

ガラスでなく画面上の何かが

タップできると伝えます

画面を移動したり

ドラッグしたり

タップしたりできることが 分かります

学術用語で言うと “知覚されたアフォーダンス”です “アフォーダンス”とは 人間とオブジェクトの関係性です 本物のボタンなら 扱い方は分かるでしょう しかし知覚されたボタンは 画面上のピクセルに 関する情報を示します ユーザのiPhone画面の 操作の知識は これまでのiOS体験に 基づきます 目の前の携帯の アプリケーションについては 知らないかもしれません

我々のトーストAppの場合は どうでしょう

タップすると 何が起きるのでしょう “OK”ボタンだけでは ダメですよね

我々はフィードバックとして ラベルを表示します 何が起きるかを 文字で示しています

この場合のラベルは “Toast” “パンを焼く”という 動詞の意味もありますが 名詞としての“トースト”の 意味もあります “Toast Toast” とすべきでしょうか

こんなアイコンを 表示する手もあります しかし予備知識がない状況で これを見ても 意味がよく分かりません “Make Toast”と してはどうでしょう 我々のダイアグラムでは トーストのリクエストですが ユーザは どう捉えるでしょうか 容易に理解できるでしょうか

次に これがボタンだと 分かるでしょうか 黒の背景に浮かぶ四角では 不十分でしょう iPhone画面など コンテキストが加われば 分かるかもしれません これまでに経験した ボタンの形や表示方法も

理解を助けるでしょう 一貫しているなら テキストの色でもいいでしょう

我々のアプリケーションは おなじみとは言えませんし 起動は多くて１日１回でしょう だから新たに考えるのでなく 標準のiOSボタンに注目します 画面で試してみます

ボタンを使い始める前に 考えられるもう１つのことは ボタンの関係性を どう認識するかです アプリケーションにおける 位置で変わるボタンの意味や

他のコントロールとの グループ化

あるいは 他のオブジェクトとの距離です

最後に示した例を 実際の画面で試してみます インターフェイスは Keynoteで書きました 朝の寝室で私は この携帯を手にしています このボタンの機能を 知っているのでしょうか

次にインタラクション中に 何が起きるかを考えます 本物のボタンなら 押すでしょう

フィードバックという言葉が 意味するのは 起きた結果について 伝えることです この場合 まだ 何もしていないので フィードフォワードという 言葉を使います

フィードフォワードは インタラクション中に 起きることを理解するのに 役立ちます

インタラクションを 滑らかにする要素です 3D Touch ピンチ スライドなどの動きの 応答の意味を 示すことができます

我々のボタンに当てはめる時 今起きていることを考えます 私の指は画面のボタンに 触れています

我々のトーストシステムでは トーストのリクエストを している段階です トースターの準備が整い パンを焼くプロセスに進みます

次の段階のヒントを与える方法も 考えるべきでしょう

ボタンに触れ始めたことは

どうしたら分かるでしょう 非常に重要です ボタンのヒットエリアが 予想と違って 実は触れてないのかも しれません

でもヒットエリアは 表示より大きいでしょう 小さいレバーを使う場合 特に重要な点です

ボタンに触れたと分かる方法は？ ボタンを徐々に明るくしたり 拡大してもいいですが 反応が遅くなるかもしれません 押している間は 反応し続けるのなら 3D Touchには適しています しかし画面に触れるのが 一瞬なら 動きも速くする 必要があります

だから聴覚 触覚 視覚の 変化で確認します この場合 即座に ハイライトにすると

速くなったと感じます ボタンが機能したことも 分かるでしょう

ボタンとトースターの フィードフォワードの連携で 次のプロセスのヒントを 出すことができます ボタンに触れるとトーストが 現れ始めるようにします このボタンには大げさですが やってみました

気が変わったら何が起きるか 考える必要があります 朝 まだトーストの リクエストはしたくないのに ボタンに触れてしまったら？ 多くのボタンでは指を外側に ドラッグすれば キャンセルできます

インタラクションを 滑らかにするには 猶予を与えることが 非常に重要です 別の画面に移行する場合 指を離すまで どんな画面か分かりません ボタンも同じです 指をボタンの上に戻し 同じフィードフォワードで ボタンの起動を表示します

フィードフォワードの内容が 少し決まりました デバイスで試します ボタンはとてもシンプルですが スクロールやピンチ ページングなど 多くのインタラクションで 非常に重要です

最後に指を離した後の フィードバックを考えます 本物のボタンなら元に戻ります 我々のボタンの場合は 画面から指を離します

皆さんになじみのある 古典的フィードバックです 我々が検討できるのは ボタンのフィードバックと アクションの フィードバックです ２つの連携で起きたことを 伝えることもできます

我々のシステムにおいて ここで注目すべきは トーストを作ることだけです

ボタンから指を離すと―

すぐに ハイライトが消えますか？ すばやいタップも分かるよう わずかに遅れるでしょうか ボタンがダブルタップに 対応しているなら 確認できるまで 少し待つ必要があります

２種類の フィードバックを使えば

何が起きているか 伝えられます 文字表示なら 分かりやすいですが 読む作業が必要になります

ボタンそのものの点滅も フィードバックに なるかもしれません

アクションを表すものでも いいでしょう 例えば トースターのアイコンで 作業開始を 示すことができます

両方 示すこともできます 文字もトースターも 同時に表示すれば 動きがなくてもトースターの 状態が分かります

ボタンの インタラクションと同様に 気が変わった場合も 考える必要があります

リクエストを キャンセルする場合に 中止ボタンに 置き換えることもできます しかし前にここにあった リクエストボタンと 酷似していて 分かりにくいです

新たに加えてもいいでしょう

赤はやりすぎに思えます だから リクエストボタンとは別に

ボタンを作ってみます 少し改善されました

もう一度デバイスで試します

ボタンそのものの フィードバックと 結果を示すトースターの フィードバックの関係は？

少し振り返ってみます

フィードバックでは アプリケーションの動きを 文字によってユーザに 伝えることができます あるいは変化を体験して もらうこともできます

簡単なボタンでも ３つのフェーズすべてに

フィードバックが使えます

ここで意図したのは 過不足を見極めるために 選択肢を試すことです 動きが適切かは 試さなければ分かりません

これで大きなシステムの 核の部分をデザインしました

しかし これがうまくいけば 残りのフローは 簡単に進められます

我々のボタンのデザインは 完了しました 次は音について考えます ヒューゴの登場です (拍手) ありがとう ジュリアン こんにちは

では― さっそく始めましょう ボタンにクリック音を 加えます (クリック音) どうでしょう　イマイチ？

もう少し早く私が 登場すべきだったでしょうか

サウンドデザイナーとして 少しお話しします

テーマは着想の源泉や サウンドのデザイン― デザインにおける 重要な構成要素です

なぜ音について話すのでしょう

携帯ユーザは しばしば 消音モードを使っています アプリケーションに音を 加える必要はあるでしょうか

もちろん 人それぞれでしょうが ジョージ･ルーカスによれば 映画体験の50％は音です 音楽やサウンドデザインです 我々の周りにあふれる音は 生きていく上で有用です

音はアプリケーション体験を 豊かにしてくれます

アプリケーション体験と ブランドを強く印象付けます 強烈なインパクトがあります

サウンドデザインの着想は どこから得るのでしょう 少し回り道をして 現実世界のボタンを考えます 安い原料で作ったものは こんな音がします (ボタンの音) 高品質の原料のものは こんな音がします (ボタンの音) 実はiPhone Xの 音量ボタンの録音です もちろん増幅しています

これらの音は 基本的に副産物です デザインされたのではなく 原料によって決まります

しかしソフトウェアでは とても自由です まったく音を加えないという 選択肢もあるでしょう

しかしUIエレメントに 音を加えるのが有効だと 判断した場合は？ 現実のアナログ音を 手掛かりに UIエレメントの音で ユーザの理解を助けるのです

アプリケーションに 音を加えるかどうかは カテゴリー次第と言えます ユーザは誰で何を求めるか コンテキストは何か アプリケーションは どこで使われるか 我々のアプリケーションは トースト好きが使います これからは家のどこにいても パンを焼くことができます

音は実際のトースターを ヒントにすることができます だからこのアプリケーションには 音をつけるべきなのです

トーストを作る過程を 参照しながら 音を聞いてみましょう

効果的か 採用すべきか 判断してください ジュリアンの タイムラインを使って

トースターの音を聞きます

最初はレバーを下ろす音です

(レバーを下ろす音) 次に押す音 (レバーを押す音) トースターが温まりコイルの ブーンという音が聞こえます (ブーンという音) 焼けるまで続きます (レバーが上がる音) トーストが飛び出します

このプロセスを １つずつ見ていきます

最初にレバーを引きます スプリングの抵抗を感じます アプリケーションで 起きることと比べると 音と触覚とアニメーションを シンクロさせた感じです でも我々のアプリケーションでは ここで音は必要ありません

ボタンを押しトーストを リクエストする時の音は ジュリアンに デザインを頼まれました 取り掛かりましょう

録音することもできます 電子楽器や シンセサイザーを使って 音を生成することもできます ソフトウェアで 調整してもいいでしょう 今日は詳細まで触れませんが 興味のある方は昨年の講演 “Designing Sound”をどうぞ

最後に３つの選択肢が 残りました オプションＡ (オプションＡの音)

オプションＢ

(オプションＢの音) オプションＣ

(オプションＣの音)

オプションＡは 必要最低限の音です シンプルなUIに とても合っています

(オプションＡの音) でも物足りない感じがします クリック音を２回にすると 格段によくなりました 押す時に１回と 指を離す時に１回です

オプションＢはこうです (オプションＢの音) よりリアルな音です 本物の音ではありませんが 特徴が出ています しかし同じ理由で 耳障りで金属的な感じがします

そしてオプションＣ

(オプションＣの音) 少し変わっていますが 特徴的です 一度 聞けば すぐ覚えられるでしょう

音によって確認ができるのも 良い点です アクションの成功を 伝えています もう一度聞いてください (オプションＣの音)

以上の理由から 私が勧めるのはＣの音です

シンプルですが 親しみやすい感じがして 他のアプリケーションにない 独自性もあります

少なくともクリック音は 決まったようですね

でも 焼く音はまだです サウンドを加える部分が 他にないか見てみましょう デザイナーとして 全体像を示したいのです ボタンを押すと トースターが温まり ブーンという音が聞こえます (ブーンという音) この音は役に立つでしょうか トースターの今の状態は 分かります これに似た音を 使うこともできます このような継続的な音でも いいですね (通知音) しかし数分の間に この音を何度も流すのは 望ましいとは思えません 30秒ごとにフェードで インアウトする音はどうでしょう (通知音) よさそうですが 本当に必要でしょうか 我々が待っているのは 焼き上がりです ユーザに知らせたいのは 重要な瞬間です だから分かりやすく シンプルな通知音がいいでしょう このように聞き逃さない音です (通知音)

では すべてを 聞いてみましょう 最初はボタンを押します

(ボタンを押す音) 次のステップである アクション中は 焼き上がりの通知音まで 音は不要です (通知音) これらの音を通して聞いて 調和を確認することが重要です これがアプリケーションの声と なるからです

アプリケーションは順調です 音をデザインする際に 用いる― 欠かせない要素について 話します まず最初の要素は音色です

これはすぐ分かりますね (ピアノの音)

ピアノです

なぜビブラホンでなく―

ピアノと分かるのでしょう (ビブラホンの音)

決め手となるのは 楽器が作られている素材や 形状や演奏に使う道具です マレットやハンマー 弓や手 音色は同じでも 聞こえ方は大きく違います 我々の アプリケーションにおいては 親しみやすい音色を 選びました

次の要素は 周波数あるいは音の高さです 周波数の高い楽器もあれば (周波数の高い楽器音) 低い楽器もあります (周波数の低い楽器音)

音楽でない音の周波数も 非常に高くも低くもできます 周波数の高低差によって オブジェクトのサイズが 分かります 実際にパンが飛び出す音を 例として挙げてみます 高い周波数にすると 小さなトースターを表します (周波数の高い音)

同じ音を低い周波数にすると 巨大なトースターを表します (周波数の低い音) (笑い声)

それでは―

次は音の長さを 考えてみましょう

非常に短くもできます (短い音) 長くもできます (長い音) UIの音をデザインする際 連続で何度も押されるボタンの音は 短く小さいことが重要です

しかし たまに押すだけなら 少し長く複雑でも いいでしょう

(通知音)

このアプリケーションでも 毎回１度しか使いません

次に考慮すべき要素は 音量です

着信音や警告音の場合は

聞き逃してはなりません 電話を取り損ねたり 寝坊してはダメです (通知音) オーディオエンジニアの ミッチからです はっきり聞こえます しかしUIの音が こんなに大きくては不快です

インタラクションに 色を添える程度でいいのです ミッチに返信します (キーボードを打つ音) (メッセージの表示音) 周りがうるさくて キーボードの音を聞き逃しても 大した支障はありません しかし着信音は違います

音の構成要素４つを おさらいしましょう 音色 周波数 長さ 音量です アプリケーションの音を デザインするなら 覚えておいてください

以上が音に関する話です セッションを終える前に

ジュリアンと私から 大事なことをお伝えします

当たり前に見えても 詳細のデザインは重要です ボタンやクリック音のように シンプルでもです

着想は現実の世界からも 得られますが そっくりまねる必要は ありません

ソフトウェアのデザインの 自由度と柔軟性を生かし 独自のものを作ってください

目で楽しむ画面上の動きと 肌で感じる触覚 そして耳にするサウンド これらが一体となって 経験となります

最後に一番 強調したいのは 試行錯誤から学ぶことです

我々は今日 いろいろと試しました 失敗もありましたが 成功もありました 道を開く唯一の方法は 試してみることです

刺激になったでしょうか 当たり前だと思う細部に 時間をかけてください

うまくいけば より良い アプリケーションになります

ありがとうございました (拍手)