優れたUIに不可欠！聴覚に訴えかけるSUI(Sound User Interface)入門

2018年01月31日

デザインCMS・Webサイト制作

2017年9月に発売が発表されたApple Watch Series 3では、Siriによる音声コマンドがより一層強化されました。
音を使ったコミュニケーションは、これまで以上に重要になってくるかもしれません。

昨今、私たちはこれまでにない膨大な量の情報に囲まれるようになりました。
人間は本来、五感を用いてまわりの様々な情報によって情報を獲得しますが、現在の情報機器におけるほとんどの情報は視覚メディアによって表示されます。

しかし、近年では、アプリケーションやWebサービスにおけるユーザー体験は、視覚的なUIに加えて音、特に音声を加えて非言語音を最大限に活用するユーザーインターフェイス＝SUI(Sound Unser Interface)に注目が集まっています。

そこで本稿では、UIとしての聴覚メディアである「SUI」(Sound User Interface)について、基本的な概要からアプリケーションへの応用例などをご紹介していきます。

UIとしての聴覚メディア

画像引用元：stock.io

スマートフォンやウェアラブルデバイスなど、機器の小型化が加速してくると、一つ大きな問題点が浮上します。
それは、視覚ディスプレイの大きさには限界があり、またディスプレイを凝視し続けるという目的もだんだんと薄れてしまうということです。
機器の小型化によって、視覚情報に代わる情報表示手段が望まれるようになっています。

実は、UIとしての音は、これまでも私たちの多くが耳にしています。

例えば、WindowsやMacOSなどのデスクトップでは、ゴミ箱を空にすると、「クシャクシャ」という音が発生します。
この音が発生しなければ、ユーザーはゴミ箱が本当に空になったのかを、一度ゴミ箱を開いてみないと分かりません。
しかし、音がしっかり発生していることで、ユーザーはゴミ箱が空になるというアクションが完了したことを確信することができるのです。

LINEやFacebook Messengerなどのコミュニケーションアプリでも、音によってメッセージを受信したことを知らせる機能が実装されています。
これにより、ユーザーが別の作業を行なっていても、音を拾うことで瞬時にメッセージが来たことを確認することができるのです。

SUIの特徴とSUIデザインの3要素

画像引用元：stock.io

SUIには、視覚的なUIと比べて優れている部分もあるので、効果的に利用することが大切です。
ここでは、SUIの特徴とSUIをデザインするために必要な3つの要素を確認していきましょう。

SUIの特徴・長所

まず、SUIの特徴や長所を確認していきましょう。

非言語による情報伝達手段として、SUIは対象を注視する必要がありません。
先ほどのメッセンジャーアプリの例で言えば、別の作業をしていたり、別のものを見ていても、瞬時に検知することができます。

また、音が発生していないのに急に音が発生するので、警告性にも優れています。
これにより、ユーザーの興味を引きつけることができるので、効果的なタイミングでユーザーに対してメッセージを送ることができます。

SUIデザインの3要素

アプリケーションなどでSUIを取り入れる際には、「何を」「いつ」「どんな音で」知らせるかを定めることが重要です。
「表示情報のデザイン」「タイミングのデザイン」「音のデザイン」と言い換えることもでき、この3つの観点がうまくいってはじめて、音による情報伝達がうまくいくと言えます。

情報表示のデザイン

SUIは何らかの情報を伝えるためにあり、そこには表示すべきメッセージ(情報)が存在します。
SUIデザインの第一歩として、無駄な情報を省き、表示すべき情報の本質を見極めることが重要です。

音による情報表示には、「うるささ」や「ユーザーの識別能力の限界」といった短所も存在するので、伝えるべき情報数は最小限にとどめる必要があります。
情報の重要性や緊急度のランク付けを行うことも、伝える情報を整理する上で役立ちます。

タイミングのデザイン

「いつ」音を発生させるか、というのも非常に大切な要素です。

例えば、パソコンのエラーを知らせる警告音は通常エラーが発生した時に発音されますが、ダムの放水を知らせる警告音は放水の一定時間後に発音されなければ意味がありません。

また、家に備え付けてあるエアコンは、リモコンの設定ボタンが押されたことをトリガーとして電子音が鳴ります。
エアコン本体に信号が届こうが届くまいが音が鳴るため、ボタンを押したことの確認にはなっても、指示が正確にエアコンに届いたかどうかは分からないようになっています。

つまり、常に表示される視覚メディアとはことなり、SUIはタイミングを誤ると情報を正しく伝えることができない、という点に留意しておくべきでしょう。

音のデザイン

どんな音で伝えるか、というのも非常に重要です。
警告音に関する規格(ISO-7731)によれば、知覚しやすく、識別しやすく、曖昧性が少ないものが警告音の条件であるといいます。
こうした条件は認知的な観点からの必要条件とも言えそうですが、一方で、どのような種類の音をどのように使うべきか、といったデザイン的な観点でも考える必要があるでしょう。

FacebookのSound Kitを使ってみよう

音を取り入れたアプリケーションを配布している企業はたくさんありますが、その中でも特に音に対するこだわりをもっているのがFacebook社です。
2014年8月に、サウンドデザインのスタートアップ企業であるWaveGroupを買収し、その後Facebookアプリがあらゆるインタラクションに合わせて効果音が鳴るようになった、という話はよく知られています。

スクリーンショット：2017年9月

そのFacebookが、2017年6月末にSound Kit for Prototypesを発表しました。
名前の通りプロトタイプ用で、再配布が禁止されているので本番環境に使うことはできませんが、Sound KitによってさまざまなSUIの効果を確認できると思います。
プロトタイピングツールのOrigamiやFramerでもSound KitによるSUIの追加が可能です。

スクリーンショット：2017年9月