この記事はGoodpatch Advent Calendar 2020の13日目となります。
グッドパッチでエンジニアリングマネージャーをしております、nktnfです。
ここ最近、NeonodeのzForceを使ってプロトタイピングしており
現在進行ではありますが、そちらについて触れつつ、プロトタイピングについて
少し感じたことを記載しようと思います。
話したいこと
zForce AIRとReactJSでプロトタイプというのは簡単に作れる。
が、もしタッチレスなものを作ろうとしたときは、必要とする機能があるならばLeap motionや画像認識を使い
ユーザテストをしながら作っていくのがいいということを伝えたい。
前提
パッとプロトタイピングしたかったので、zForce AIRがPlug and Playに対応しているWindows10でシステム構築します。
https://support.neonode.com/docs/display/AIRTSUsersGuide/Getting+Started+with+Sensor+Evaluation+-+Plug+and+Play+with+USB
zForce AIR
zForce AIRは現在digikeyなどで購入できる、タッチセンサーです。
主にDigi-Keyで販売されており、約８０００円くらいで買うことができます。
IRレーザーベースのマルチタッチセンサで、あらゆるディスプレイ、任意の表面もしくは、赤外光の送受信であれば空中での使用が可能です。
そのため、タッチレスについてプロトタイピングが可能となります。
＊ https://products.neonode.com/us/touch-sensor-modules/#applications より
ReactJS
特段ReactJSじゃなければならない、ということはないですが
さっとプロトタイプするならば、慣れ親しんだもので実装を進めていくのが良いと思います。
(今回は、タッチイベントで取れるだろうということでReactJSを選択)
SyntheticEvent
基本的には、zForce AIRをWindowsにつなげた場合、タッチセンサーになるため
Touch eventsのonTouchCancel onTouchEnd onTouchMove onTouchStartの中に入ってくる形で
要素を操作することができます。
タッチの場合
<button onTouchEnd={() => console.log("touch")}>タッチ</button>
スワイプみたいなある範囲を動かす場合
<div onTouchMove={() => console.log("move finger")} >
ほげほげ
</div>
なので、React Swipeableやreact-swipeable-viewsなども使うことができます。
プロトタイプはタッチなのかタッチレスなものか
ここでいうタッチは、何か物理的なものに指でタッチする。
タッチレスは、空中でタッチするということです。
タッチなものであれば、旧来の原則ルールを使って進めていくことで簡単にプロトタイプを作れると思います。
もし、タッチレスなものを作成するならば
最初は世の中のタッチレスインターフェース設計ガイドラインといった先人の知恵を借りながら進めていく形が、闇雲にすすめるよりかは進めやすいと思います。
ultraleapのtouchless-interfaces（ https://docs.ultraleap.com/touchless-interfaces/ ）は
Leap motionといった製品向けですが、参考になります。
しかし、作るものが使いやすいものなのか、扱うテクノロジーが違うのでガイドラインをそのままというわけにもいかず、
自分も含めいろんな人に作ったものを触ってもらうのが良いと思います。
zForce AIRで気をつけるべき点
zForce AIRを空中面に対して活用する場合、ユーザはなれるのですが、もどかしく感じます
-
タッチ
- センサーが感知しないところから、センサーが感知し押し込まれたときに反応する。
- CSSでは、activeでマウスのhoverのような役割ができるので、そちらを活用する。
-
タッチムーブ
- センサーがどこを感知しているか、感覚を得るまで上手く操作ができない。
- どこで感知しているかチュートリアル・TIPSを見せてあげると良いと思います
インタラクションデザインをする上で
Gestural Interfaces:A Step Backward In Usabilityの下記のキーワードが参考になりました。
- Visibility
- Feedback
- Consistency and Standards
- Non-destructive operations
- Discoverability
- Scalability
- Reliability
引用： https://www.academia.edu/2850361/Gestural_interfaces_a_step_backward_in_usability
また、最近は、下記本が参考になるなーと読み進めています。
Brave NUI World: Designing Natural User Interfaces for Touch and Gesture
最後に
アイディアをユーザーテストをしながら検証していこう
実際にそれを動かしてみないとどれだけ良いアイデアかわからないので、なんか思いついたり
フィードバックもらったら、作って触ってもらっています。
空中でそのタッチパネルの世界をそのまま持ってくるというのも、最初にやってみて
触ってもらったときに、スムーズに操作をすることができるということが確認できました。
そのため、旧来の原理を念頭におきユーザーのフラストレーションにつながらないように、
zForce AIRからLeap motionや他のテクノロジーでのインタラクションに徐々にシフトを進めていっています。
いきなり新しいハンドジェスチャーなどを考えていたら、もしかしたらスルーしてしまっていたかもしれません。
小さな学びも一歩一歩大切に、早く物づくりを進めていくのが良いと思います。
モノは完成しましたら、どこかで発表できればと思います。では、またどこかで。