読者です 読者をやめる 読者になる 読者になる

atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

colorisの3つのデザインスタンス

蜜葉的思考 MetroStyleApps Microsoft

世界中のMVPから素晴らしいと言って頂けたcolorisですが、多くのMVPが開発者でResourceDictionaryを出力してくれる機能が素晴らしいと思ってもらえたのかなぁと思っています。

でも、そのResourceDictionaryにたどり着くまでにcolorisをどう魅せていこうか。

開発者メンバーにもあんまり言っていなかったcolorisの3つのデザインスタンスです。

 

■1つ目はノンバーバル・コミュニケーション

「多くの開発者」をターゲットにするのは簡単です。開発者の欲しい機能をつければ、「多くの開発者」がターゲットになります。

この「多くの」を「世界中の」にランクアップさせるには方法が2つあります。

1つはローカライズをがんばること。でもこれはだいぶしんどいので好きじゃないです。

今回あたしがcolorisに使ったのが、ノンバーバル・コミュニケーション、非言語コミュニケーションとも言います。

ジェスチャーとかアイコンとか絵とか表情とか声色とか仕草とかスキンシップとか合図とかとか、、、、

言語に頼らないコミュニケーションのことですね。

 

開発時に、colorisの最初の画面で「choice color」という文言を入れようという話もありました。

が、断固拒否しました。案外ユーザーは文字なんて読んでなかったり、あるいは読めなかったりします。

そんなことしなくっても、後述する方法でユーザーの行動を制限したり会話できるはずだと思っているから。

ノンバーバル・コミュニケーションを目指すのであれば、ラベルなんてものはテプラと一緒です。

 

colorisではノンバーバル・コミュニケーションを使って、世界中の人々をターゲットにしました。

 

■2つ目は仕掛け学とマイナスのレイアウト

仕掛け学っていう学問があって、大阪大学の松村先生が提唱している、とっても興味深い学問で勝手に追いかけています。

http://togetter.com/li/173199

人工知能学会の学会誌が欲しいんだけど、まだ手に入れてない・・・。

 

松村先生は、仕掛け学を簡単に説明するときはトイレを例にあげています。

-------------------

トイレを清潔に心地良く使うという目的のために設計されています。ここで、人感センサーや洗浄システムは工学的機構なのでファンクション、形状や足場はインタフェースデザインに含まれるとします。

モチベーションデザインは、エイミングフライ(便器のあるスポットに描かれたハエ)などが相当します。ハエを見ると狙いたくなる心理を巧みに利用しており、これだけで飛散が大幅に減少すると言われています。

ここでの仕掛けは、便器や足場の形状からなるインタフェースデザインと、エイミングフライからなるモチベーションデザインを合わせたものになります。ファンクションを含まなくてもトイレを清潔に心地良く使うための機能を内包しています。

従来のアプローチではファンクションとインタフェースデザインによって実現することがメインでしたが、仕掛学ではインタフェースデザインとモチベーションデザインによって実現することをメインに考えます。

-------------------

 

で、あたしの理解としては、インタフェースデザインとモチベーションデザインで、ユーザーになんの障害も持たせずに、こちらが思った通りの行動を起こさせる。ユーザーの行動をデザインによって操作する学問だっていう風に認識しています。

 

あたしは仕掛け学を説明するときには、トイレの代わりに、テーブルと本の話をします。

友人を部屋に招き入れたとしましょう。

「お茶いれてくるから、ちょっとソファにでも座ってて」

そんなシチュエーション

ソファの前に置いたテーブルの上にグラスだったりゲームだったり漫画だったり人形だったり、色んなモノが置いてあると目移りします。

f:id:c-mitsuba:20131125203309j:plain

ガジェッターだったらnexusが気になるかもだし、眼鏡スキーだったら眼鏡!ってなるし、ワインがすきならエチケットアルバムを手に取るし、女子だったら右の冷え性改善本がきになるかも。文具が好きなら奥のペンを見るかもだし、開発者ならMacのシールを見るかもしれないですね。

その人がどういうクラスタなのかによって、次の一手が変わってくるし、こっちも予測できない。

 

テーブルの上が一冊の雑誌だったら。

たぶんきっと、手持ち無沙汰な友人は何気なくその雑誌を手に取るかもしれません。

少なくともほとんどの人がこの本に注目するはずです。

f:id:c-mitsuba:20131125203425j:plain

 

でも、もしかしたらケータイを取り出して、とりあえずついったーするかもしれません。

でもでもケータイが使えない、例えば飛行機の座席についた時とかだったら。

やっぱり目の前の雑誌をとりあえず手に取るかもしれません。

 

こんな風に、シチュエーションを作ってあげて、ユーザーが次に取るだろう行動がこちらの意図した行動になるようにデザインするのが仕掛け学だと思ってます。

それにはマイナスのデザインが手っ取り早くって、煩雑なテーブルよりも、一冊の雑誌が置かれたテーブルのように、画面レイアウトを可能な限り整理することが有効だと思っています。

もう少し画面レイアウトに寄せて言うと、空間とか余白って言葉にも置き換えられます。

 

colorisのどこが、これに当てはまるのかっていうと、ユーザーに初めて操作を求める画面です。

f:id:c-mitsuba:20131126121327j:plain

白の上に、扇状に広がるカラーマップ。画面の上にはこれしかありません。

綺麗なアニメーションとたった1つのコントロールで、ユーザーの視線をカラーマップに誘導します。

アプリはそれ以上のアクションを起こしません。

ユーザーをカラーマップに注目させるインターフェースデザインをしています。

そして、「とりあえずつついてみればいいのかな?」っていうモチベーションデザインを刺激しています。

タップすれば、次の画面に遷移します。

あたしの勝ちです。

 

ノンバーバル・コミュニケーションを実現するため、そしてより自然で直感的なインタフェースを実現するために、仕掛け学とマイナスのレイアウトを応用しています。

 

■3つ目はインタラクションとタップ数

 

たった3タップ!これがあたしがcolorisでもっともこだわっているところです。

3っていう数字は2の次で、2がクリアできれば3になります。

でもって、仕掛け学の応用で、最初の1を突破しています。

なにを言っているのかって言うと、あと3まであと1つなんですね。

 

カラーマップをタップすると、右からスッとカラーセットが表れます。

右っていうのを、次のステップを表します。

同時に、カラーマップは左に少しずれます。

左にずれるってことは、すでにそのステップは完了された、あるいは消費されたってことを表します。

f:id:c-mitsuba:20131126121511j:plain

 

Windows Store Appsは右へ右へとフリックしていく文化圏だしね。

こういうちょっとしたアニメーションやインタラクションで、ユーザーの意識をカラーセットに移します。

いわゆるリスト表示のカラーセットなので、ここはもう容易に選んでもらえることでしょう。

インタラクションで2タップ目を突破です。

 

3タップするころには、すでにゴールが見えています。

ユーザーには1タップするごとに抽象的な選択から、具体的な選択を求めます。

3タップ目にはもっとも具体的な情報を置いてあるので、タップするだけです。

f:id:c-mitsuba:20131126121516j:plain

 

3タップっていうのはとってもキリがよくって、2回タップさせれば終わったようなものです。

やっぱり0から1が難しくって、どうにかして1にする。

1にできたら、自然に2にしてもらう。そしたらいつの間にか終わってる。

その「いつの間にか」を実現するのがアニメーションとかインタラクションで、キリがよいのが3タップなんだろうなって。

ゴールまでのタップ数が多いとだらだらしてしまいます。

3タップが一番ユーザーにスッキリとか、簡潔さを与えるんだろうなと思ってデザインしています。

 

 

 

こうした3つのデザインスタンスが、colorisが世界中のMVPに評価が頂いた理由だと思っているし、この3つこそcolorisのUXだと思ってます。

 

ゆーえっくす、UXって、ことばでいうのは簡単だけど、UXなんていう甘えた言葉を使わずに、なにを考えてなにを狙ってどういう理由でどうデザインしてどう実現したのか。そういうことを伝えるのが重要だと思う。

それが説明できないのなら、そのアプリでUXは提案できてないんだと思う。

 

 

UXってむずかしいね。