インタラクションコストを✅

自宅のwifiが酔っていたおかげで武蔵小杉のテレワークができる場所に詳しくなりつつある23期スバルです。

今日は技術面談を行い、暖簾の表示非表示の方法とカレンダーにクリックイベントを付与する方法のヒントを獲得できたのでダイソンさんに感謝です。

さて、今回はインタラクションコストに関して学習したいと思います。22期の井上さんがtimesで共有をしていて、自分もUIの勉強もしないとなと思ったので要点をブログに残しておこうとおきます。

 

インタラクションコストとは

インタラクションコストとは、使用者が目的を達成するために必要な、精神的・肉体的な負荷の総量のこと。例えば精神的な負荷には読む・覚える・理解する・待つ等があり、

身体的な負荷にはクリックする・タップする・スクロールする・スワイプする・入力する・拡大縮小する等が存在する。ユーザーが支払うコスト(労力)が少なければ少ないほど、そのサービスは「使いやすい」といえる。

ざっくり、ユーザーがアプリを使用する際に払うコストという事みたいですね。

広告デザイン業界用語辞典

インテラクションコストは下記の二つから構成されます。

  • 身体的コスト
  • 精神的コスト

身体的コスト

クリックする・タップする・スクロールする・スワイプする・入力する・拡大縮小する等

アプリを使っているだけで指が疲れる時って確かにありますね。画像が小さくて拡大縮小をしたり、入力項目が多くて次へと確定を繰り返し押す必要があったり。

「クリックするだけで次の項目に遷移されること」や「SNSログインを設置すること」を行うことでユーザーの身体的コストを削減できそうですね。

精神的コスト

読む・覚える・理解する・待つ等

脳の感じるコストを指すようですね。

チュートリアルをサイトに設置すること」や「スクロールするだけでコンテンツが勝手に読み込まれてくれる」といった一手間を加えるだけでユーザーの精神的コストを格段に削減できそう。

「行動デザイン」を学ぶ~精神的コストの削減が、人の行動原理だ | マーケの強化書

インタラクションコストを減らす方法

それは、「一貫性」「シンプルさ」「共通概念」です。

AはBである。BはCである。じゃあ、AはCだよね〜といったシンプルさを提供してくれるとありがたいという事でしょうか。

下記のような特徴があると楽な印象がありますね

  • ボタンがクリックしやすい
  • ぱっと見てそのボタンがクリックできるかどうかわかる
  • ボタンなどの各パーツの機能が見ただけでわかる
  • 読みやすい行間、各セクションのマージンが確保されている
  • サイトの構造や導線が適切でユーザーが必要な情報を取りに行きやすい
  • お問い合わせフォームなどの入力が簡単である

一貫性

色、コンセプト、そして世界観に一貫性があると使っていて楽。

あるページでは文章が横書きだが、違うページにいったら文章が縦書きになっている場合とか、かなり使いづらいですね。

一貫性が保たれたサイトは、ユーザーが操作を予測しやすくなるそうです。

UIデザインをする上で重要な「インタラクションコスト」とは? | FASTCODING BLOG

シンプルさ

シンプルにするとは「単純にする」では無く「明快」にするという事です。要は何が起っているのかを即座に理解でき、次にどうするかスムーズに決定できる状態にする事

アプリのコンセプトに一貫性があると、必要な機能が明確になる。つまり、一貫性があるとシンプルさの向上につながるという事ですね。インスタグラムやTwitterは良い例ですね。

UIデザインをする上で重要な「インタラクションコスト」とは? | FASTCODING BLOG

共通概念

Twitterマーク=Twitterに共有する」「上矢印=画面最上部に移動」など、一般的に認知されている標準的なルールの事を指す。

「なんとなくこのボタンってこういうことかな?」と既に持ち合わせている知識を動員するだけで使えるサイトって確かにサクサクっと使えて良いですよね。

UIデザインをする上で重要な「インタラクションコスト」とは? | FASTCODING BLOG

所感

UI UXって調べ出したらキリがなさそうなので、診断系のアプリに使われてそうな色やアプリ設計を厳選して調べていきたいものです。。

後書き

彼女とは破局せずに済みました。

本音を言うと、今は彼女との時間よりコードを書いている時やハードルを跳んでいる時の時間の方が楽しいので今は距離を置きたいんですけどね、、

24歳の上手な可処分時間の使い方を知りたいものです、、