動きのあるユーザーインターフェース開発

Purutto Design

動きのあるユーザーインターフェース開発

ハードウェアの進展に伴い、ユーザーインタフェースの表現はデザインが機能的で美しいという要件は当たり前になりつつあります。そうした状況の中で、ユーザーインターフェースにより個性を持たせ、製品を使用した人の心を動かし、優越感を与える手段として、私たちは「動きのあるユーザーインターフェース」に着目し先行開発を進めています。操作にあった動きや振る舞いを与えることで、柔らかくプニプニしたボタンの触感や、逆にシャープで硬く切れ味のある触感など、様々な印象をユーザーインターフェースに持たせることが可能となります。ただし、この「動きのあるユーザーインターフェース」は「開発工数が伸びる」と「デバイス負荷が高い」というハードルにより、簡単な動きに限定されるか実装されない場合がほとんどでした。そこで私たちは、「開発工数が伸びる」のハードルについては、WOW独自の「動きのあるユーザーインターフェース」のライブラリを先行開発しておき、クライアントに提供することによってクリアしようと考えました。もう一つの「デバイス負荷が高い」というハードルは、近年のハードウェアの性能向上によってクリアできると捉えています。
本コラムでは、スマートホン向けの「動きのあるユーザーインターフェース」の開発スタディーを公開します。
 

Purutto Design

 

以下に提示するスタディーでは、普段から考えられている「使いやすさ」と「 美しさ」に加えて「愛着」という感覚的な要素を付加できないかを検討しています。アプリの振る舞いから、ユーザーがかわいらしさや遊び心を感じ、これまで以上に愛着をもってもらう製品の可能性を感じています。本コラムでは、プルットやモチットといった感覚の動きを中心にのスタディーしています。プルットデザイン、モチットデザインなどと呼んでいただければ幸いです（笑）。
 

サイドメニュー

スマートフォンにおいて代表的なサイドメニューのスタディーです。画面左上のメニュータップで、ムニュッと押し出すようにサイドメニューが現れます。動きにはゴムやゼリーのようなプルンとした触感を与えています。
 

こちらは、画面スクロールが長いキュレーションアプリなどでみられる引き出しタイプのサイドメニュースタディーです。画面左のプルタブを引っ張る動作にあわせてビヨンビヨンと伸縮し、一定の距離を過ぎるとサイドメニューが表示されます。
 

動きのあるユーザーインターフェースでは、各種パラメーターを設定し、操作にあわせたインタラクション（動きの速度、イーズなどの変化）を与える予定です。本スタディーは映像化しているためインタラクションによる動きの変化が見えない状態です。
 

リスト、アイコン、ボタン
 

メインメニューによるリスト切り替え表示のスタディーです。アイコンをタップすると、表示中のリストを押し出す形で次のリストが現れます。 メニューアイコンにタップ時のアニメーションをつけている点もポイントです。動きのあるアイコンについては、別途スタディーを進めています。
 

リストを上下にスクロールした際のスタディーです。ユーザーの動きにあわせて、柔らかく上下に揺れる動きを与えています。
 

 

サムネール
 

カメラアプリなどにみられるカードタイプのサムネール表示のスタディーです。画面下のプラスボタンをタップし、既存のカードがストンと一段落ち、新規サムネールが投げ込まれる動きを強調しています。

サムネール削除のスタディーです。×ボタンをタップ後に排水口に吸い込まれて消えるような動きを与えています。
 

画面スライドインのスタディーです。画面が天井部にぶつかった際に画面要素全体に揺れる動きを与えています。