表紙

第1回 身の回りにあるマイクロインタラクションのヒント

マイクロインタラクションのインプット第1回目。
今回はWebサイトやアプリからではなく、自然と目にしている、又は生活に密着している、身の回りのものに焦点をあてて、マイクロインタラクションネタのヒントとなるコト、モノを探してインプットをしていこうと思います。最終的にはこのインプットに沿ったアウトプットがdribbbleなどで公開できたらなと考えています。

以前、下記の3アプリを対象としたマイクロインタラクションの考察をしました。

1.信号機

青信号に変わるまでどのくらい待てばいいのか、バーが減少するアニメーションで時間の経過、スピードを知らせてくれる。

2.ウォーターサーバー

水がタンクからなくなるとゆっくりとした点滅(音はなし)で知らせてくれる。水を入れるまで点滅し続ける。

3.エレベーター

現在地、次に止まる階、上に行くのか、下に行くのか。全て教えてくれる。
上下にいく矢印のアニメーションはなぜか見てしまう。(すごく重要だと思う。)

4.トースター

焼いている時はジリジリとダイヤルの音が鳴り、終わると鈴の音が鳴ります。

5.シートベルト

警告音と点滅で知らせてくれる。
緊急性があるので点滅と音のテンポが速く、強制感がある知らせ方をしてくれる。

6.ウインカー、走行距離、ガソリン残量

車のメーターパネルにはたくさん表示するものがあるので、
運転中でもなんの警告なのか一目でわかるようになっていないといけないですね。

7.ロック

リモコンキーで施錠をした場合、施錠は1回の点滅と電子音、解除は2回の点滅と電子音。

8.suica

タッチできる箇所は発光しています。逆から(出る側の方)の場合グレーアウトしています。タッチの有無は効果音で知られてくれる。早すぎるとエラーになり通れないようにドアが閉まる。

まとめ

日常生活では常に動いているので音と点滅が多く、待たなくてははならない場所などではアニメーションがよく活用されている印象でした。緊急性が高ければ高いほど催促するような音がする。重要度によって音の繰り返しや点滅のスピードが変わる。そうした気付きをデザインに反映できると良いと思いました。

---

つみきでは一緒に働く仲間を募集しています。アプリやWebサービスが好きな方、UIが好きでじっと観察してしまう方、お話ししましょう。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

31

小池 政幸 / TSUMIKI INC.

株式会社つみき http://tsumikiinc.com/  UI/UX事業部 デザイナー

TSUMIKI Designers

つみきのデザイナーの記事をまとめました。 UIデザイン、インタラクションデザインなどお気軽にご相談ください。 https://tsumikiinc.com/
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。