優れたUIデザインと操作性
サンフランシスコ・デザイントーク。この番組は、サンフランシスコと東京に拠点を置くデザイン会社、BTRAXのCEO、Brandonと、
デザイナーのスージーが、日本で働くデザイナーや、デザインをビジネスに取り入れたい方向けに、様々なトピックについて深く話します。
今回のエピソードでは、優れたUXを構成する3つの要素について、お話をしていけたらなと思います。お願いします。
はい、よろしくお願いします。
これじゃあ、早速3つの要素について話していきたいなと思います。
UXデザインって、プロダクトとかサービスが心地よく使えるっていうものを作り出すっていうのが、UXデザインの役割じゃないですか。
それ、ざっくりしてるなと思って、優れたUIをデザインしましょうって言われた時に、
それ、要素分解していかないと、何が優れてるのかとか、何が使いよいかっていうのはわからないじゃないですか。
デザイナーからしても、これ正しいUXとか、いいUXだとかって言ったりするんだけど、
じゃあどういった項目で優れてるのかっていうのを、もうちょっとロジカルに分解していった方がいいんじゃないかなと思って。
優れたって言葉がだいぶざっくりしてますね。
彼は良い人ですって言った時に、その良い人の概念ってさ、何を持って正直であるとか優しいとか親切とかって分解していかないと、
良い人の要素って人によって変わってくるから、良いっていう、良い作れたっていう概念って本当に曖昧になるでしょっていうことで、
今回はUXデザインにおいて何を持って良しとするのかっていうので、3つの項目を紹介しようかなと思いますね。
では1つ目からいきましょう。
これ、心理的ハードルを超える感じ。ユーザーが使う時に、このハードルをクリアしてるといいものですよっていうもので、
ハードルって呼んでるんですけれども、1つ目が操作性のハードル。
操作性。
操作性、はい。当たり前なんですけど、ユーザーエクスペリエンスっていうのは、ユーザーが商品とかサービスとか何かしらインタラクトする、
やり取りする時の体験価値とされているので、そこにおいて操作するっていうかですね、
触ったりとか触れたりとかインタラクトするっていう状況が発生する中で、その操作性が良いクオリティなんて言ったらいいのかな、
使いやすいっていう。
使いやすい、ユーザビリティーですね。
ユーザビリティーとも言われるんですけど、使いやすさを担保しとく必要があるんですね。
それが使いにくいと、いきなりUX悪いっていう状態に、これ分かりにくいなっていう感じになっちゃうので、
一つ目が操作性のハードルっていうものがあって、これを上手にクリアしたことでヒットしたのがスマートフォンですね。
スマートフォン。
最初のiPhoneって、初代iPhoneっていうのは2007年に発表されたものなんですけど、
そのiPhone以前って、日本だったらガラケーっていうのがあって、
アメリカだとブラックベリーっていうのがあったんですけど、ネットに繋がってる電話としては。
両方ともガラケーもブラックベリーも、今写真を見るとものすごくボタンが多いんですよね。
操作するボタンが軽く見ても10キープラスいくつかあるので、15から20くらいの操作ボタンがあって、
その当時はそれが当たり前とされてたんですけど、
多分初めて触る人はガラケーとか、アメリカだったらブラックベリーみたいなデバイスっていうのは
使い方を学ばなければいけないので、操作性のハードルが高かったと思うんですよね。
日本の人って器用なのか、ガラケーとかを十音無尽に使ってた。
メール打つとか。
僕はアメリカにいたので、ガラケーあんまり触ったことないんですけど、
日本に行った時にガラケー操作してる人見るとすごいなと思って、
あんな使いにくそうなものを自由に使ってて、
それは無意識のうちにこんなもんだと思って諦めて学んだと思うんですけど、
その一方で、iPhoneのタッチスクリーンが出てきた時に、
多分これその当時一番話題になったのが、
言葉が喋れない子どもでも勝手に使ってるっていう。
iPadとかもそうなんですけど、
全く言語を発することすらできてない年齢の赤ちゃん、子どもでも、
このタッチパネルのiPadとiPhoneの操作性は、
本能的に使えるインテリティブだったので、
今でもYouTubeとかであるんですけど、
ちっちゃい赤ちゃんがiPadとかiPhoneを使いこなしてるっていう動画があるんですね。
すごい。
すごいでしょ。
これって使い方を学ばなくても勝手に使い始めてたってことで、
操作性が極端に高かったってことなので、
操作性のハードルを余裕でクリアしちゃったデバイスってことで、
まずユーザーエクスペンスの精度が高かったってことだと思うんですよね。
この操作性のハードルは、
使いにくいものを生み出してしまうと、
ここのハードルでまず引っかかってしまって、
UX価値が低い、UXのクオリティが低いので、
ユーザーが離れてしまうっていう、そういったものなんですよね。
なので、基本中の基本は、
この操作性を担保しましょうっていう。
UIデザイン、ユーザーインターフェースのデザインの精度を上げるとか、
ユーザーインターフェースを極力シンプルにするとか、そういうことですかね。
なるほど。
これ自動車とかもそうなんですけど、ボタンとかがたくさんあると分かりにくいので、
なるべく使いやすくしましょうとか。
操作画面のあるものは多くは、
この操作性ハードルをクリアするために、
極力使いやすさを担保しましょうというのが一つ目ですね。
スマートフォンの操作性のハードル
いろいろやり方ありますもんね。
操作性を上げる、ヒューリスティックバリエーションとか。
ありますね。ユーザビリティテストとかもそうなんですけど、
これでも厄介なのが、
一回ユーザーって使いにくいものでも慣れちゃうと使いやすいと思っちゃうのがあるんですよね。
うちの会社で以前に結構前なんですけど、
日本で使う経理ソフトのUIデザインをやったことがあって、
経理の業界って結構特殊で、
すごい古いレガシーのシステムをずっと使っている業界だったんですよね。
それを理論的には絶対正しいであろう、
シンプルで使いやすいUIデザインを提案したら、逆に使いにくいと言われて、
もうちょっと具体的に言うと、
パソコンで使う経理ソフトのUIだったんですけど、
それまで経理の業界って、
古いターミナルみたいなものを使っていて、
ファンクションキーをすごい使いまくるんですね。
Fキー、F1、F2とかキーボードに書いている。
これって今の時代使うことがすごい少ないんですけど、
ないない、私も。
あるでしょ。あるでしょ、キーボードの一番上に。
どうしたらいいのか。
F1であるでしょ。気づかないくらい、
これも明るさとかボリュームとかになっちゃってるじゃないですか。
そう、タッチバーが。
タッチバー?最新のものを使われているから。
僕の古いバージョンにはちゃんと付いていました。
物理的なFキーが。
そう、このFキーを最大活用して、
非常に使いにくそうな画面を、
会議の人とか会計士の人が余裕で使えている業界なんですね。
そこにより操作性が高いと思われるUIを提案したら、
今までと違いすぎて分かりにくいって言われたんですけど、
先週くらいかな、SNSで話題になった動画があって、
JRの発見機の動画っていうのがあって、見てない?
見てないです。
日本の緑の窓口っていう、駅にある緑の窓口で、
新幹線とか大阪まで一人とかってやると、
そこにいる担当者の方が画面をカチャカチャカチャカチャいじってるんですけど、
すごい縦横無尽に上手に動かしてるんですけど、
でもそれって操作性すごい低い端末なのに、
慣れすぎちゃって、余裕で使えちゃってるんですね。
でもこれって、新しく入った人、使ったことない人、
トレーニングするのすごい大変だったりとか、
その人しかできないですね。
その人しかできないし、誤作動も発生しやすいようなデザインだったりするんだけど、
職人さんだからできちゃうみたいな。
ここがUIデザインおよびユーザーエクスペリエンスの難しいところで、
飛行機の操作性とかもそうなんですけど、
古くてあまり操作性の良くないものに慣れすぎた
プロフェッショナルの人たちばかりが使ってるデバイスを新しくしたときに、
逆に一回操作性が落ちたと思われるっていうのがあるんですけど、
でもこれはフラットに全くそれを使ったことない人でテストしたら、
この操作性ハードルが高いのか低いのかっていうのが測れると思うので、
もちろん使ったことない人で評価したほうがいいなと思っているものでありますね。
UXって結構ターゲットとかPOVとか大事にするじゃないですか。
そのときに職人さんをターゲットにするか、
新しく入ってくる人をターゲットするかによって結構出てくる結果が違うし、
どっちに合わせようってなっちゃいますよね。
難しいですよね。難しいんです。
これは本当にそれこそターゲット・ペルソナによって変わってくるので、
UXデザインのコアになる部分かなと思います。
が、iPhoneは完全にスマホなれしてないというか、
誰もスマホを持ってなかったんですけど、
メルカリとヤフオクの認知的ハードル
使ったことない人向けに使いやすくしたことで一気に広がったという例ですね。
成功例ですね。
次のハードルね。認知的ハードルって言われるんですけど、
これ日本語だと難しい。分かりにくいね、認知的っていうのは。
英語だとCognitiveって言うんですけど、
Cognitiveって脳がどれだけ稼働しなきゃいけないかっていうハードルなんですね。
サービスとかを使うときに脳がどれだけ疲れるかみたいな感じ?
もしくは逆にあまり考えずに楽して使えるかっていう
操作性の1個上にあるハードルなんですけど、
簡単に言うと、プロダクトとかサービスを使ったときに
それを作業と感じるか、遊びと感じるかの違いでして、
それこそ柄系スマホもそれに近い部分はあると思うんですけど、
楽しいと思えるか面倒くさいと思えるかって簡単に言うとね、
それの差なんですよね。
これ例を元に話したほうが分かりやすいなと思ってて、
僕これ大好きな実例として、
なぜメルカリはヤフオクがある、
すでに存在してたのに人気になったかっていうのが、
このコグニティブハードル、認知的ハードルを
ヤフオクより上手にクリアしたからじゃないかなと思ってるんですね。
これヤフオクションとメルカリのユーザーエクスペリエンスを分析してみると、
非常に興味深かったんですよ。
っていうのは、ヤフオクションって、
アメリカだとeBayみたいなオンラインオークション。
あれって、僕は基本的には欲しいものが決まってからしか使わないんですね。
これ売ってないかなと思って、
ヤフオク行って欲しいものを文字で入れて検索して出てきて、
その値段とかを比べて、できるだけ安く買えるから。
あとは入札するとか、他の人より高く入れないと買えないからとか、
それをやっていかなきゃいけないみたいな。
これってすごいタスク感があったんですよね、実は。
一方でメルカリって、
それこそファウンダーの山田慎太郎と話した時に本人も言ってたんですけど、
メルカリが目指したのって、欲しいものを買いに行くサービスじゃなくて、
暇な時に見てて、何かいいなと思って買うとか。
ウィンドウショッピング?
ウィンドウショッピング、オシャレ通り。
ウィンドウショッピングのデジタル版を目指してる。
だからターゲットとしているユーザー層とか、
ユーザーがそのサービスを使う時に取る行動とか、
使ってる部分を全然変えようっていう、
そういう狙いがあるって話してて、
なるほどなと思ったんですよね。
インターネットを介して個人からものを買うっていう、
そこの仕組みは全く一緒なのに、
提供してるエクスペリエンスを180度変えることで、
よりそれまで未開拓だったユーザー層とかユースケースに
サーブしたっていう考え方。
これは非常に興味深い実例だなと思ったんですよ。
なのでビジネスモデルを文字で書くとヤフオクにすごい似てて、
プロトタイプとか実際のプロダクトに触ってない段階だと、
これヤフオクと何違うのとか、
もうヤフオクあるじゃんみたいなことで、
あまり興味もたれなさそうなイメージあるんですけど、
実際操作してみると全く違うものなんだなっていうのが分かると。
なるほど。こういうのはいつも聞くと思うんですけど、
もともとウィンドウショッピングとかって、
完全に新しいコンセプトではないじゃないですか。
心理的ハードル：操作性
普通に存在してるし。
そこにデジタルでウィンドウショッピングやろうみたいな、
その発想にたどり着くのがすごいですよね。
実際そうなんですよね。
多分、メルカリみたいなものが出てくる前までは、
インターネットで買い物するイコール、
欲しいものを探す、検索するっていう概念しか想像つかなかったんですけど、
オフラインの体験をデジタルに変換するっていうことを考えると、
ネットっぽくない使い方?
それまでのネットの操作とは違う体験を提供するっていうことで、
新しいマーケットが開けるっていう概念だと思うんですよね。
最初の冒頭の話に戻ると、
脳の疲れ具合っていうか、
多分タスクは疲れるんだけど遊びは疲れないみたいな概念で言うと、
メルカリはぼーっとしながら商品、スクロールして眺めるみたいな。
これって、もう一個違うタイプのサービスで言うと、
YouTubeとTikTokの違いかなと思ってて、
YouTubeって、おすすめとかはあるにせよ、
検索したりとか、動画を見るぞって感じで動画を見てくるんだけど、
TikTokって適当に開いて時間つぶしとかでスクロールで、
次、次、次、みたいな感じで見てるから、
そこに必要とされる脳のエネルギーが非常に少ない気がするんですよね。
恐ろしいですよね。
インフィニティスクローリング。
インフィニティスクローリング。
インスタグラムのストーリーとかも、動画とかリールとかも近いと思うんですけど、
何も考えずにぼーっとしながら、
ネクスト、ネクストで見ていく感じが、
コグニティブハードル、認知的ハードル、ものすごい低めに設定してあって、
誰でも超えられるようにしてあるだろうなと思ってて。
僕、一昨日まで日本に行ってたんですけど、
駅で電車待ってるときに、前に並んでる人のスマホをチラッと見たら、
大体みんなTikTokとかインスタの動画をスクロールずっとしずけてるんで、
完全にUXうまいこと設計しよったなと思って。
どんどん再生されてきますからね。
心理的ハードル：認知的ハードル
そうなんです。再生数高いと課金、課金というかレビニューが増えるので、
そこはうまいなと思ってて。
たぶんコンテンツ作る側もやりやすいようには設計されているので、
両方ともこのコグニティブハードルを上手にやったなと思ってますね。
そんで最後3つ目、一番上のハードルというのが、
エモーショナルハードルというよりは感情的ハードルで、
最初は操作性、その次はコグニティブ、認知的じゃないですか。
最後は感情になってくるんですけど、
もう最後の最後は楽しさフォーカスで、
感情がワクワクするっていうか、気が引けるっていうのをなくすっていう感じなんですよね。
この設計を上手にすると、その設計が上手じゃないときには、
ちょっとそれ気が引けるなみたいな、なんとなくやりたくないなっていうのを
とてもやりたくさせるっていう設計なんです。
これすごい上級テクなんですけど、
例として僕は2つあるんですけど、
1つはあれですね、Tinderスワイプってやつですね。
うんうん、右左の。
Tinderってマッチングアプリだから、
多分Tinderの前までマッチングアプリを使うっていうのが
感情的ハードルが結構あったんですよね。
自分がマッチングアプリ使うなんて、ちょっと気が引けるとか、
ちょっと恥ずかしいみたいなのがあって、
多分それまではプロフィールとか入れて、
自分のプロフィールに合う人が出てきて、
その人に連絡するみたいな感じだったと思うんですよ。
僕はあまり知らないんですけど。
なんかアメリカだとあって、
スタッフが使ってるのをチラッと見たときに、
気合い入れないと使えない雰囲気だったんですね、感情的に。
使ってる人同士も結構ガチ勢でやってるなって感じだったんですけど、
Tinderのこのカジュアルスワイプが出てきてから、
誰でも簡単にこれ使ってもいいもんだっていう。
分かりますよ、言ってること。
感情的にこれを使うのがカジュアルにできるよっていう感覚にさせてくれる、
ユーザーインターフェース、ユーザーエクスペリエンスを実現したんですね。
なのでTinderスワイプにも入れたことによって、
一般の人でもあまり気合い入れなくても簡単にやってもいいよみたいな感じ。
それはUIの見た目とかスワイプの動作のお話?
動作もあるし、大量にやれるじゃないですか。
一個一個にそんなに価値にならなくてもいい。
いろんな要素があると思うんですよ。
ブランド的なこととかラベリングとか操作性とか、
世の中の風潮とかっていうので。
確かに。
Tinderはあまりわかんない。
わかんない。
ヒンジなら。
わかんないけど、似たようなもんだと思うんですけど。
似てますね。
そういうふうに上手にやったと思うんですけど。
で、もう一個がさっき出てきたTikTokのあれですわ。
TikTokの動画をアップロードする側の感情的ハードルを
上手にエクスペリエンスデザインしたなと思うのが、
ほら、自撮りで踊っている動画をアップロードするって
結構なことじゃないですか。
結構恥ずかしいじゃないですか。
それも顔見せで。
自分の顔そのまま映っている状態で
踊っている動画をインターネットに載せるっていうのは
多分TikTokの前まではあんまりなくて、その文化が。
多分YouTubeとか日本だったらニコ動みたいので
踊ってみたっていうのがあったんですけど。
基本的に顔見えなくしたりマスクしてたりとかしてて
匿名性を高めてダンスを披露してたんですけど
TikTokになると顔見せたままダンスしている方々が
たくさん動画でいるじゃないですか。
逆に顔隠してTikTokで動画アップロードすることの方が
珍しい感じがするでしょ。
そういうことで気づいたら
自撮りのダンスをTikTokにアップロードするの
全然アリだよねっていう感覚になってるんですよね。
確かに当たり前な感じがしてました。
当たり前な感じがするじゃん。
そこに対してのちょっと引け目がなくなるっていう。
それを実現したんですよね。
どうやってやったか僕調べてないからわかんないんですけど
多分最初は誰かがやってもらったんじゃないかなと思うんですよね。
そういう動画をアップロードしてもらって
仕込みっていうかイニシャルコンテンツとしてアップロードして
それを見て他の人がこれ感覚的にやってもいいもんだって思って
一般ユーザーがやり始めたんじゃないかなって気がするんですけど
こうやってその行動を起こすことに対して
感情的なハードルが下がってる状態を作り出すと
人々がそれに誘導されるっていう。
心理的ハードル：感情的ハードル
下げすぎも怖いですけどね。
だからパパカツみたいな言葉とかそういうことだと思うんだよね。
感情ハードル下げてるみたいな。
確かに。
それこそさっきTinderとかマッチングの話で言ったと思うんですけど
あまりにもハードルが下がりすぎて
ガチな人がいないっていう問題が。
それなんかすごいリアルな声ですね。
だからちょっとガチな人はちゃんと一個一個タスクみたいな
しっかりしてる方が多分集まりやすい。
カジュアルに使いすぎちゃいすぎるとユーザーの質が下がる?
質というか目的もハードルが低い目的だから
どうしてもそうなりがちな気がします。
それはあれですよね。
リアルな生活で言うと
誰でも入れそうなお店では買い物しないけど
とりあえず入ってくる。
商品見て何も買わずに帰るけど
ブランド品のお店って入るのにすごいハードルあるじゃないですか。
ありますね。
グリビトンとかグッチとか
あれ入り口入ったからには買わないと出れない雰囲気っていう
その差ですよね。
それ感情的ハードルの差だなと思ってて。
高く設定することで
少ない人数で高いコンバージョンを狙うっていう
サービス設計もあると思いますね。
入ったからには。
でも多くの人を集めるっていう
インターネットを介したプロダクトの特性的には
高く設定するとハードルを下げた方がいい。
そういう差があるんだろうなと思いますね。
はい。
まとめましょうか。
1個目が心理的ハードルですね。
操作性。
ごめんなさい。
心理性はないんですよ。
全部まとめて心理。
心理的ハードルで1個目が操作性ですね。
2つ目が認知。
認知的ハードル。
そうです。
これを1つずつチェック項目として確認していくと
UXデザインをする際に
クオリティチェックができるかなと思いました。
なるほど。
うちの会社でUXデザインを
プロジェクトとしてやる際にも
この辺のハードル
ちゃんとデザインされているかを確認しながらやっていっているので
もしヘルプが必要だったりとか
UXデザイン
Vトラックスと一緒にやりたいなという方がいらっしゃいましたら
ご連絡いただければと思います。
はい。今回はこれぐらいで。
ありがとうございました。
このエピソードを楽しんでいただけた方は
ぜひ高評価、チャンネルフォローをよろしくお願いします。
また、サンフランシスコデザイントークは
番組に対する質問や取り扱ってほしいテーマを募集しています。
番組概要欄にあるGoogleフォーム
Spotifyでお聞きの方は
各エピソードのQ&A欄からお送りいただけますので
お便りお待ちしております。
最後までお聞きいただきありがとうございました。
次回もお楽しみに。
