あしたはもうちょっといい感じ

キャッチーでウィットでセンセーショナルな起業家目指します

ひよっこディレクターが贈る、3つの「インタラクション」

こんにちは。まつなおです。



自分はいま週末や夜の時間を使って、友人とアプリを作っているのですが、そこで出会ったデザイナーの方がとても優秀でして。もう一緒に仕事をしてて楽しくてしょうがないんですね。


僕のやりたいイメージを言葉で説明するより早く、もっというと僕の中ではまだイメージが固まっていないときですら、的確にそして想像を超える実装をSketchで形にしてバンバン持ってくるんですね。


もう僕は「んあああ〜〜〜〜!!!すんげえなあ!!なんでこんな言葉にするより早く俺のしたいことわかるの!?すんげえ!かっけえ!!!もう最高!!!!」ってテンションなわけです。


で、そんなデザイナーの彼と話をしていると、よく「インタラクション」という言葉が出てくるのですよ。


ほう…「インタラクション」とな…



…ほ??





インタラクションとは

優しい彼に、恥ずかしながら僕は尋ねました

僕「インタラクションって、、、なんですか、、、?」

デ「んー、一言で言ってしまうと『ユーザーとプロダクトの対話』ですかね」(たしかこう言ってたはず)

おお!!!なんかわかりやすい!!!わかった気になる!!!なんか雰囲気わかるよ!!!

よし、もっと詳しく知りたいなあ。教えてGoogle先生!

https://ferret-plus.com/929 出典

インタラクションとは英語の「 inter(相互に)」と「action(作用)」を合成したもので、その基本は「人間が何かアクション(操作や行動)をした時、そのアクションが一方通行にならず、相手側のシステムなり機器がそのアクションに対応したリアクションをする」ということです```

おお、、、、なんかちょっとわかってきた、、、wiki先生は何て言っとるやろか、、、

インタラクションデザイン(wiki)

例えば、ソフトウェア、各種製品、携帯機器、環境、サービスウェアラブルコンピューティング、組織自体などのシステムに適用される。インタラクションデザインは、人工物やシステムのユーザーへの反応を振る舞い(インタラクション)として定義する。IaD または IxD と略記されることもある。システム開発においてユーザーの人力操作に対するシステムからの適切な反応を設計することで利用目的に合致した両面転移や、グラフィカルユーザーインターフェースGUI)要素の肖然な振る舞いをデザインする専門的な作業である。

ハイ!むずい!!



初歩的な3つのインタラクション

wiki先生が難しかったので、開き直りました。


文字で理解するのは、ほどほどで諦めよう!!! そのかわり、実践して自分なりに理解を深めよう!!!!

そう思い、意識しながら日々の業務(平日は別の会社でディレクターとして働いています)に取り組んだり、いろんなアプリを使っていくなかで、自分的3つの初歩的インタラクションが固まってきました。

というわけで、使いづらいアプリの改善を目指すディレクターに向けて、今回はその3つのインタラクションを書きます。


1:見た目から機能が推測できる

人間、何が起こるかわからないものは、やりたくないもの。気づいていないものには、やるという可能性すらない。極端な例を出すと


  • ECサイトの商品詳細の画面で、「押す」と書いた丸い赤いボタンがある(何が起こるのかわからない)
  • 白い背景に、水色で「もっとくわしく」と書いた文字がある(押すためのアイテムなのか、くわしくの対象物が何なのかわからない)

上のような例のアイテムがあった場合、押すかどうか確実に悩むでしょう。僕なら絶対押しません。


  • 何かを入力するためのボタンは「鉛筆」のマークになっている

  • 押すことができるアイテムは、輪郭をはっきりと持った形をしていたり、影があり立体的に見えるようになっている

  • 重要な決定がなされるボタンは、赤いボタンになっている


こういった細かな工夫で、多少なりとも見た目からユーザーにその後に起こるであろうこと推測してもらうことができます。初歩的過ぎて、自分でも何書いてるんだろってなりますね。



2:自分が何をしたのかがわかる

もし、見た目から機能が推測できないから試しに何が起こるか押してみたのに、何が起きたのかわからないような反応が、画面から帰ってきたら不安になりますよね。例えば


  • あるアイテムのボタンを押したら、そのアイテムが画面から消えた(おそらくアイテムのステータスが変わって、表示される場所が変わった)
  • 誤ってボタンをタップしてしまったら、画面が瞬間的に切り替わってしまい、元いた画面に戻れなくなった


これは「ユーザー側の見え方や、ユーザー側がどこでプロダクトの仕組みを初めて知るのか、プロダクトと開発側の前提知識の差」このあたりを意識せずに作ると、かなり見落としがちな視点ですね。


お問い合わせに「以前まで表示されていたアイテムが消えた」「登録した覚えのないサービスに登録されている」などのお問い合わせがよくくるサービスは、このインタラクションが存在しない箇所が沢山ありそうです。


この問題は

  • ポップアップやトーストなどでフィードバックを明確に出してあげる(例:アイテムを削除しました!)
  • ユーザーが行動を選択したときに、確認のアラートを出す(例:この商品を購入しますか?)
  • 押したボタンやアイテムが沈み込む・色が反転する・色が変わるなどのアニメーションを入れる


これらでかなり改善されると思います!(登録とかはわざとわかりにくくやっている場合も多くあると思いますが...)


特にボタンがタップされたときに、何らかの動きをそのボタンがするという変化は、自分もやってみたのですがかなり「何が起きたのか」わかりやすくなったのでおすすめです!


Twitterなんかも、ツイートの詳細を見るためにタイムラインのツイートをタップすると、詳細画面に遷移する前にそのツイートの背景色が少し変わっていたりしますね。



3:次に何をすればいいかがわかる

これは離脱率の激しいサービスによくありがちなのですが、ユーザーがなんらかの行動を進行していく途中で、急に突き放すように、次に何をすればいいのかがわからなくなるサービスがあります。


極端な例を出すと例えば

  • ECサイトで商品をカートに入れたあと、どこで購入・決済できるのかわからない

  • 応募系のサービスで、どのボタンを押せば応募になるのか、あるいはもう応募されているのかわからない。


サービスを作るときに、ユーザーにはどこかしらの成果地点(がある場合)まで進んでほしいので、次の場所へ進むための喚起・動線はまだ割と優先的に実装されるように思いますが、それでもユーザーが次にその行動をしたい。と思うタイミングには表示されなかったりします。次に必要なその行動を一度見送ると、いざその行動をしようとしたときには、どこからできるのかわからなくなったりします。


なので、ユーザーが行わないと、なんらかの進行がストップするようなネクストアクション(応募・決済・購入・予約・会員登録etc)は

  • その行動が必要になったタイミングで毎回表示する

  • 表示する方法は、ポップアップなど後回しにできる・しがちな方法を取らない

  • 後回しにされることを想定するなら、その行動はどのページに行けばできるのかを、同時に示す

などを意識するとよいです。



まとめ

これらの配慮の見落としは、大抵が「作り手が知っているアプリの仕組みや工程を、ユーザーは知らない」ということが、いつの間にか軽視してしまっているゆえに発生するように思います。


アプリの中のある機能の存在や、あるビューの閲覧を、「ユーザーはいつ初めて行うのか」ということを意識しながら、各機能の細部設計をしてエンジニアに開発を依頼したいですね。



さいごに告知:最近作ったアプリ

というわけで、最後にひっそり告知です。


そんな僕にインタラクションという概念を教えてくれたデザイナーの人や、いろんな友人達と一緒に作ってきたアプリがリリースしました!

モヤモヤもチャットも、消えちゃうアプリ「Shabon(しゃぼん)」

f:id:mtno_ontm:20181117190609p:plainAppStore

  • アカウントなし完全匿名のチャットアプリ
  • 全く知らない人相手に
  • ランダムで2人だけの部屋が作成され
  • 最後に会話されてから24時間で、会話が消えちゃう
  • 周りの人や昨今クソリプや炎上まみれのSNSでは、言えないようなモヤモヤを
  • 会話とともに、シャボン玉のように消しちゃえ!!!!

というアプリです。


もっと日頃のモヤモヤが解消できたらいいな

インターネットってもっと自由がいいな

最近のSNSは、余計なお世話なんじゃああああ的案件が多すぎるんじゃああ!!!!

という気持ちから「遠い旅先や一人飲みをしていて、知らない人に悩みを打ち明けたら、気持ちが軽くなった!」という体験を作りたくて、このアプリを作成しました!


ぜひダウンロードして、日頃溜まっているうっぷんやら、くだらない話をしてみてください!僕とのチャットになる可能性は大ですが!!!

モヤモヤもチャットも、消えちゃうアプリ「Shabon(しゃぼん)」

f:id:mtno_ontm:20181117190609p:plainAppStore



では、今回はここまで!あもちょい!!!



▼こちらの記事もあわせてぜひ

amochoi.hatenablog.com

amochoi.hatenablog.com