使いやすいUIにするための整理整頓術。 インタラクション設計大事だね!編 | Dev Driven 開発・デザインチーム 使いやすいUIにするための整理整頓術。 インタラクション設計大事だね!編 | 働くひとと組織の健康を創る iCARE

BLOG

使いやすいUIにするための整理整頓術。 インタラクション設計大事だね!編

青木隆之
2018/05/04

 

使いやすいUIにするための整理整頓術

こんにちは。

UXを語っている江口です。
実はこのテーマ去年の今頃書いたんですが、内容が専門的になりすぎるかな?って躊躇していたんですが、、、専門的内容でも興味がある人に向けて書くことにします!笑

 

さて、早速「使いやすい」をテーマに「使いやすいUIにするための整理整頓術」について書いていきたいと思います。

 

「使いやすい」は色々な要素が絡み合って実現されている

一言に「使いやすい」と言っても、色々な要素が複雑に相互調和し合って「使いやすいなー」と感じてもらえるものです。

例えば

反応(インタラクション)、情報構成(IA)、ビジュアル、スペック(反応速度など) など、色々な要素が利用者にとって適切な状態で提供できるとやっと「これ使いやすいなー」って思ってもらえるものなのです。

たくさんの要因が絡み合って「使いやすい!」になっているので、少しずつお話しできればなぁと思います 。

 

今回はインタラクションについて書きます。

使いやすいを向上させる要素は色々ありますが、今回はインタラクション について書いて行きたいと思います。

インタラクションとは「ユーザーアクションに対するリアクション(反応)」

では、早速インタラクションについて軽くおさらい。

この記事に興味を持っているほとんどの方は「インタラクションとは何ぞ?」はご存知だと思いますが、一応。wikiから引用すると

インタラクションデザインは、人工物やシステムのユーザーへの反応を振る舞い(インタラクション)として定義する。

とのこと。要はアプリとかソフトウェア、ハードウェア関係なく道具を使うときに「ボタン押したらボタンがへこむ」とか「シャッター押したら『カシャ!』と音が出る」とか「フリックしたら、その方向にスライドする」とかユーザーのアクションに対しておきる、さまざまなリアクション(反応)全般のことです。

 

使いやすいインタラクションとは、ユーザーにとっての「当たり前」な反応。

インタラクションで「使いやすい」を実現するには、ユーザーが思っている当たり前のインタラクションを返してあげましょう。これが少しズレている(最悪なのは、この小さなズレが重なることだけど、これはまたいつか話します。)と、ユーザーは無意識下でストレスを感じてしまい「これ、(なんか)使いづらい。」と思われてしまいます。

色々な要素が利用者にとって適切な状態で提供できるとやっと「これ使いやすいなー」って思ってもらえるものなのです。

なんて書きましたが、ではインタラクションで言う「適切」ってなんでしょう?

それは、ユーザーが「これやったら普通こうなるよね。」と普段から認識している「当たり前な反応」を返すことです。

この「当たり前な反応」はユーザーにとってごく自然な反応なので、認知的な不整合からくるストレスがなく、受け入れる(気がついてはいないのですが)ことができ、ごく自然にあなたの作ったプロダクトを利活用できるのです。

「当たり前な反応」を「インタラクション」として間違いなく設計し実装できていれば、ほぼ間違いなく使いやすいプロダクトになると言って良いでしょう。

 

当たり前は体験上のデファクトスタンダード

では、インタラクションで気にするべき「当たり前」ってなんでしょう?
簡単に説明すると「当たり前」とは、日々の生活の中で体験しているあらゆる事柄です。例えばカメラのシャッター音は「カシャ!」のようなあれです。

「当たり前」は大きく3つに分けることができます。

  1. 物理的当たり前
  2. 文化的当たり前
  3. 思い込み当たり前
物理的当たり前

物理的な当たり前とは、慣性の法則や力の釣り合いとかの物理の話です。
自然界の中での当たり前の話ですね

例えば慣性。「車は急に止まれない」ってやつです。
物体がある地点からもう一方の地点へ移動するときには、徐々に加速し最高速に達してから、徐々に減速し止まります。私たちは自然とこの動きをするものだと予想しながら移動体を見ています。
何か物を動かすようなインタラクションを設計するときは、このことを意識すると良いしょう。

私たちの脳は自然界にある物理的な当たり前を、体験的に認識しています。
インタラクションデザインする際には、最低限の物理的当たり前を押さえましょう。

文化的当たり前

文化的な当たり前は、ユーザーが育った環境による当たり前に合わせることです。

国や世代差などのことです。

例えばボタンのインタラクション。世代差で考えてみましょう。

タッチパネルボタン世代。と、物理ボタン世代。の期待値の差を考えてみましょう。

その昔、券売機やATMは物理的なボタンの塊でできていました。(太古の昔は対人)
その時代を知っている世代がタッチパネルのボタンを押下時に期待しているインタラクションはどんなでしょうか?

このようにターゲット世代に合わせたインタラクション設計も必要です

 

ちなみに、このインタラクション考察の例。強引に結論まで持って言っています(笑)
実はこの考察例は、極端に示したので実際にボタンインタラクションとして採用するには次の考察が足りていません。

スタンダードなタッチパネルインタラクションに「物理ボタン世代」は慣れていないのか?

「物理ボタン世代」がもうすでに、最近のタッチパネルボタンインタラクションに慣れているとしたら、この部分を飛ばして古いスタンダードに合わせたインタラクションをデザインして採用すると、ターゲットにした「物理ボタン世代」にも使いにくいインタラクションになってしまうでしょう。

 

思い込み当たり前

普段の生活で繰り返し使っている物から受けている反応が正しいと思い込んでいる場合があります。この「思い込み」ってところが、なかなかの難敵です。

例えば「ON・OFF」のインタラクション。
明かりやテレビなどスイッチを変化(どちらかに倒すなど)させると目の前で、ついたり消えたりと、スイッチを触った後に直接状態が変化するものは、「明かりをつける」などの目的自体がインタラクションになっているので、強いてインタラクションを設計しなくても良いです。と言っても過言ではないでしょう。

このような明かりなどのスイッチの「目的 ≒ インタラクション」が当たり前の仕組みのインタラクションの場合、ユーザーは一般的に「スイッチONすると直接結果が出る(電球が光る)のが当たり前。」と知らないうちに経験で、認知に刷り込まれています。私たちの脳は「スイッチONすると、すぐに何かしら活性した状態になる。」ことが、スイッチをONした時の当たり前で自然なリアクションと認知して(思い込んで)います。

しかし、スイッチ類には必ずしも「スイッチONすると直接結果が出る。」ではないスイッチもあります。

アプリの設定やPCの主電源などは、スイッチのON/OFFを切り替えても直接その場(目の前)で目的の変化が把握できないスイッチってありますよね。
この時のインタラクション設計は結構重要です。

この時、ユーザーはなぜか自分でもわからないところで、「ON = 直接的な変化」を自然なことだと思っているので、変化があることを心の深層で期待しています。

このような、直接的な変化がないスイッチを設置する時は「OFF = 不活性」「ON = 活性」に感じるようなインタラクションになるように設計していくと良いでしょう。

 

以上。「当たり前」は上記のように3つくらいに分類できます。
インタラクションを設計する際は、ターゲットユーザーの「当たり前」にあった設計にするようにしましょう。

 

やりすぎない。グイグイ系は嫌われる

たまに、パネルを選択するとその中から追加要素が表示されるようなインタラクションで「パタ、パタ、パタ」
こんなやつ

dribbble.com

なかなか面白いアニメーションで、見ていてウキウキしますね。
でもこれ、ウキウキするのは「見ているなら」限定です。実際に自分が使っているシーンを考えてみると、次々に色々なパネルの中身が見たいので、パタパタする間が「時間の無駄」(しかも毎パネル)に感じてストレスになっているシーンしか思い浮かびません。

これは、色々な商品を次々見たい時に、この「パタパタ」邪魔になると思いませんか?

ユーザーは、インタラクションで楽しい気分になろうと思ってこのアプリ(実在しないアプリだと思いますが)を手に取ったわけではありません。もっと他の目的でこのアプリを利用しているんです。

dribbbleで「interaction」で検索結果を貼っておきますね。すると面白いですよ、映画の演出では使えると思うけど、、、なインタラクションのためにデザインされたと言う名のアニメーションが結構あって(嫌味すぎ??)

Search - Dribbble

本当にその美麗なインタラクションはユーザーにとって必要ですか?

「僕は好き」って思ったあなた!それは本当にユーザーのゴールに必要なインタラクション設計ですか?
ユーザーの目的達成にとって無意味(無駄)なインタラクションを表現しすぎると、ユーザーから「コントロールしている」という感覚を奪ってしまいます。

ユーザーの邪魔をしてしまうと、どんなに凝ったデザインを提供しても「使いづらいな」って思われてしまいます。

これでは本末転倒です。本来凝るべき場所は他にあったはずです
ユーザーの目的を見失わないようにしましょう。

ユーザーは決してあなたが豪華絢爛にデザインした美麗なインタラクション(アニメーション)を堪能したいわけではありません。

※自身のゴールに直接関係なく、栄光浴に似た「これを使っている自分」を求めているユーザー層もいる。この部分は別の記事で書く時が来ると思います。

 

インタラクションでユーザーに使いやすいを提供するためのポイントまとめ

  1. ユーザーの目的を明確にし見失わない
  2. ユーザーが(深層心理も含め)知っている「当たり前」な反応を返す
  3. ユーザーが欲しいのは「目的の達成」であって「楽しいインタラクションが見たい。」ではない

ユーザーがゴールに簡単に向かえるように、次の行動へ促せる適切な反応。それがインタラクション設計で重要なことです。

この記事を読んでいるカンタの中でも特に
UXデザイン(僕はUXのためのデザインと言いたい)を目指している方や、社内にいるデザイナーの語っている意味を理解するために読んでいる皆さん。インタラクション設計をする時が来たら「インタラクション設計大事」と思ってもらえたら幸いです。

 

UX戦略家 江口