PeaceJet

証券会社で証券外務員をやりながら、マーケティングやデータ分析・UI/UX改善などを行っています。

UX改善ってどういうこと?と、思う人のために。

f:id:PeaceJet:20180403210035p:plain

UX改善ってナニ?

こんにちは、PeaceJetです。
今回は、UX改善についてお話をさせていただければと思います。

最近、UIとかUXという言葉がよく聞かれますけど、なかでもUX改善ってナニコラタココラ🐙っていう人もいるかと思います。
私が実践しているUX改善について、実際に学んだ事実なども含めながらお話したいと思います。

UX

そもそも、UXとは「User eXperience」の略でユーザー体験などと呼ばれます。本来ならUEとかになりそうですが…Xなんですね。
余談ですが、これと似たことにFX(外国為替取引)があり、これも「Foreign eXchange」の略です。

ユーザー体験?

ユーザー体験とは、あなた自身が、あるコンテンツに触れた時に感じること全てです。

例えば

刑事ドラマを見ていて、早く犯人捕まえろよ!なんて思ったことあると思います。あるいは、釣り番組を見ていて、「この人、全然つれてないやん」と感じる瞬間や、バラエティー番組を見ては「この子、体張って頑張ってるなぁ」などと思う。

これらも、立派なユーザー体験(UX)になります。

犯人が捕まらないとか、釣れないというじれったさは、製作者が意図的に行っている場合もあります。
これは、導入→困難・苦境→解決→フィナーレのようにストーリー仕立てにすることで感情移入しやすい作りにし、番組を見終わったあとに「いいものみたなぁ」と思って貰えることを期待した「演出」だったりします。

ウェブの場合は?

では、Webの場合はどうでしょう?
ショッピングサイトで買い物をしていて、買い物かごに商品を入れて、いざ注文確定しようと思ったけど…あれ?購入ボタンを押したけど画面変わらないし、購入完了メールも来ないよ!
なんて嘆いたことありませんか??

これらも、全てユーザー体験(UX)です。

これら、コンテンツに触れて生じた不満や、購入ボタンを押しても反応がないなどの不備を改善することをUX改善と呼ぶのです。

表記のゆれ&文字サイズ

それでは、改善の具体例を見ていきましょう。
まずは、表記の揺れから。

表記の揺れ

先程、見出しをウェブと書いたのに、その冒頭でWebと書きましたが、気が付きましたでしょうか?
これは、表記の揺れといいますが、潜在的に違和感を感じて不快に思う方もいるようです。
自分も気をつけて、書いていますが知らずうちにカッコが全角なのに一部が半角だったりすると、「ん?」となってしまいます。

これがエスカレートすると、ページを閉じられてしまったり、人によっては信頼のおけないサイトだなぁと結論づけられてしまったりするでしょう。

取引の制限に関する記載事項

上記の様に半角全角による表記の揺れの場合もあれば、

〇〇証券(以下、当社)では、取り扱い金融商品・・・・
・・・本文・・・
・・・また、〇〇証券・・・

冒頭で、(以下、当社)と書いているにも関わらず、再び本文中に社名が出てきている。
些細なことかもしれません。
しかし、これらのことが何箇所も出現してしまうと、ユーザーは自然と違和感を感じるようになります。
そして、それが積み重なってしまった結果として「この会社、大丈夫かな?」と、不信感を抱かせる原因にもなり得るのです。

ですから、表記の揺れに関しては、2重チェックなどの体制を作って、しっかり統一するようにしましょう。

文字のサイズ

「このサイト、スマホで見ると文字が小さいなぁ」なんて思ったことがありませんか?

私は、結構あります。

なかでも、スマートフォン用サイトが用意されておらず、PC表示用サイトが表示されてしまう場合に思うことが多いです。
ピンチアウトして文字を拡大しないと文字が見えないというのは、ユーザー体験としては「見ずらい」という体験が残ってしまいます。

以下に、文字サイズの比較を載せてみました。

xx-small


JULES:No, I mean where did you get'em?
BRETT:MacDonald's, Wendy's, Jack-in-the-Box, where?
BRETT:Big Kahuna Burger.
JULES:Big Kahuna Burger. That's that Hawaiian burger joint. I heard they got some tasty burgers. I ain't never had one myself, how are they?
BRETT:They're good.
JULES:Mind if I try one of yours?
BRETT:No.
JULES:Yours is this one, right?

x-small


BRETT:Yeah. Jules grabs the burger and take a bite of it.
JULES:Uuummmm, that's a tasty burger. Vince, you ever try a Big Kahuna Burger?
VINCENT:No. Jules holds out the Big Kahuna.
JULES:You wanna bite, they're real good.
VINCENT:I ain't hungry.

small


JULES:Well, if you like hamburgers give'em a try sometime. Me, I can't usually eat 'em 'cause my girlfriend's a vegetarian.
Which more or less makes me a vegetarian, but I sure love the taste of a good burger.
You know what they call a Quarter Pounder with Cheese in France?

normal


BRETT:No.
JULES:Tell 'em, Vincent.
VINCENT:Royale with Cheese.

large


JULES:Royale with Cheese, you know why
they call it that?
BRETT:Because of the metric system?
JULES:Check out the big brain on Brett. You'a smart motherfucker, that's right. The metric system. (he points to a fast food drink cup) What's in this?
BRETT:Sprite.


x-large


JULES:Sprite, good, mind if I have some
of your tasty beverage to wash this down with?
BRETT:Sure. Jules grabs the cup and takes a sip.
JULES:Uuuuummmm, hit's the spot!

(出典:パルプ・フィクション

文字のサイズは、WEBページにおけるユーザー体験の大部分を占めていると言っても過言ではありません。
なぜなら、WEBページは文字なくして物事を伝えることが出来ないからです。
確かに、ムービーや音声を流せば伝えられることもあるでしょう。
しかし、ユーザーが見ているその瞬間、電車の中だったらどうしますか?
音を出せない環境では伝えたかったことも伝えられません。

特に、パソコン用のサイトしか用意していない場合は、表示された瞬間に文字が小さく表示されてしまうため、「サイトが見ずらい、文字が小さい!」と言うことで、離脱されてしまうこともあるでしょう。

スマートフォンサイトを持っているか否かで、検索結果にも違いが出てきます。
Googleでは、サイトの評価項目にモバイルユーザビリティという概念を導入しており、モバイル端末で見るウェブサイトの評価を行うようになりました。

対策

解決策としては、スマホサイトの導入や可変するようにフォントサイズ指定する。
例として、フォントサイズにvhやvwを指定したり、フォントサイズを変更できるようにするボタンなどが挙げられるでしょう。

フォントサイズを変更するボタンについては、手前味噌ですがCodePenに実装例を作ってみました。
(※サンプルなので、デザインは適当です)

See the Pen フォントサイズを変更するボタン by OneWorld (@OneWorld) on CodePen.

特に、金融機関などでは免責事項やリスク文言など書くことが本当に沢山あるので、大中小ボタンが設置されているサイトも多く見かけます。

pxやemなどの詳細についてMDNを参考にしてみてください。
developer.mozilla.org

また、スマートフォン表示用ウェブサイトをもう1つ作るというのは、かなり工数を要することでしょう。

私は、CSSフレームワークであるBootstrapを使用することで、現状のサイトデザインを活かしつつ、一定の幅以下になるとスマートフォン対応デザインに切り替わるようにレスポンシブデザイン化して乗り切ったこともありました。

リダイレクトしてスマートフォン用サイトへ誘導するという手もありますが、私はあまりやっていません。

アナリティクスで分析する場合に、リダイレクトされたのか判断が付きにくい場合があり、正しい数値が得られない可能性があるからです。

日本語がおかしい

WEBサイトに書かれている日本語が分かりずらい!と、感じたことはありませんでしょうか?

matome.naver.jp

上記はNAVERまとめなのですが、すこし目を通してみると変な日本語がたくさん出てきます。

ギャグしか載っていないって?
でも、私が今まで見たものの中で記憶に残っているものでも、ギャグに匹敵するものはいくつもあります。

誤字・脱字

パソコンを使用して文章を作成する際に気をつけなければいけないことは、誤字・脱字です。

たとえば、こんな間違いをしたことがありませんか?
「ハサミを仕様して、紙を切る」
パソコンの予測変換による誤りですが、「使用」と「仕様」って、なんとなく似ている気がしませんか?
結構、気が付かないものです。

私は、「同意」と「動意」をよく間違えて怒られました。

www.weblio.jp

パソコンの変換では、「同意」のほうが上位に表示されますので。

桁区切り

桁区切りに誤りがある文章も見かけたことがあります。

「7,000,0000」

ん?

桁区切りを無視してゼロの数だけで判断すると「70000000」=「ななせんまん」です。
しかし、額面通り理解していいのでしょうか?
もしかすると、上記の場合だと一の位の0はタイプミスによって偶然ついてしまった誤りの可能性もあります。

ですから、7,000,000が正解かもしれません。
決算公告などで発生したら事故になってしまいます。

ボタン

みなさんは、どのようなボタンを使っていますか?

CSSフレームワークに備わっていたボタンですか?
それとも。こだわりを持ってスクラッチで作ったものですか?

※ スクラッチとは英語で「削り出す」ということから、初めから作るという意味です。

ボタンへのこだわり

ボタンのデザインについては、毎回、悩みながら設置しています。
絶対にボタンだと分かるデザインにこだわって、押した感覚や物理的な感触なども考えながら設置しています。

最も心がけること

私が最も心がけているのは、老若男女、どのような人が見ても、ボタンだと認識できることです。

その理由

職場では、若い人から年配のお客様とお話をする機会があり、フィードバックを得て開発に活かしています。
ユーザーを迷子にさせないためです。

Webページでは表示されるまでの時間が、3秒かかると60%以上が離脱すると言われています。

実際、自分もそうです。
遅いWEBページでは、ブラウザバックをすることが多いです。

冒頭のところで述べましたが、サーバーへリクエストしてからレスポンスを得るまで、ユーザーは何秒か待たなければいけません。

押しても反応がない場合、もう一度、ボタンを押してしまうというのが常だと思います。

これは人間が発生している問題について、今ある材料をもとに分析しまうためです。

ボタン連打

ですから、押した感触がないボタンの場合、二重に送信されるリスクが高まります。

二重送信はフロントエンドバリデーションやサーバーサイドで弾けるから大丈夫☺と思った人もいると思いますが、それは技術者から見た場合でありユーザーから見た感覚ではないので、以下のようなことが起こりえます。

すると、データベースに二重登録されてしまう可能性が発生したり、登録完了メールが大量に届いたりといったことが起こり得るわけです。

ボタンを押した感覚があっても、サーバーの応答速度が遅い場合、何度もボタンが押される可能性があります。
すると、リクエストが大量に送られることになり、よくブラウザである「固まる」状態になることがあります。こうなると、ユーザーは混乱してしまいブラウザバックボタンを押して、「あとでやろう」と離脱してしまう可能性があります。

このような状態になる可能性が高いのは、海外にサーバーを借りている場合などです。
国内サーバーと比べてレイテンシが落ちやすいため、注意した方がいいでしょう。

レスポンスが長い場合は、ローディング画面を表示することで凌げると思いますが、先々のことを考えてインフラの見直しを行った方がいいかもしれません。

※自分のウェブサービスをHerokuにあげていますが、無料枠なので起動時間がかかってしまうことを完全に棚上げしてしまっています(>_<;)

peacejet.hatenablog.com

押し心地の良いボタン

そのなかでも押し心地が良くて、押したと認識できるものを使用するようにしています。

具体的には

私が心がける「押し心地」とは、しっかり「凹んで」即座に元へ戻ること。
「凹んだ」ボタンだとしっかり認識できること。

これは、私が実際に作ったものの一部です。
ボタンも設置してありますので、押して見て下さい。

See the Pen 【Bootstrap】申込みフォームのテンプレート by OneWorld (@OneWorld) on CodePen.


実装例を見てみよう

いくつかのWEBサービスで、これは!と思ったものを紹介させていただければと思います。

DODA

doda.jp

転職支援サービスを提供するDODAさんのWEBサイトです。

ログインボタンが物理的に凹むようになっており、サーバーリクエストを行ったときに発生する遅延などによって、ユーザーが離脱しないように施策をした結果なのかなと思っています。

weblio

ejje.weblio.jp

インターネット外国語辞書で有名なweblioさんのホームページです。
検索ボタンが「凹む」ボタンとなっているのが、分かるかと思います。

トイレのドア

皆さん、こんな経験はありませんか?
「押しても引いても開かないドア」

これは、とある施設のトイレです。

さて、どのように入りますか??

人間の行動として、初めに考えることは「押すのか、引くのか」だと思います。

なぜなら、引き戸のトイレって珍しくないですか??
(※多目的トイレ以外のことを指しています。)

自宅が引き戸のトイレなら、馴染みがあるかもしれませんが…私自身、他のお宅にお邪魔した時に引き戸だった経験の方が少ない。

では、押してみます。
正解です。

このドアは、押すことで開きます。

「押すこと」を想定した作り

実は、私ははじめ多目的トイレなどに用いられているスライド式ドアを開けるときと同じ要領で左方向へ引いてしまいました。

だって、このドア…左に引けそうじゃないですか?

こうした混乱もユーザー体験(UX)であり、事実として少数かもしれませんが、私がトイレに入るときに混乱してしまったという事実が残りました。

これも改善が必要な事例と言えるでしょう。
だからといって、トイレのドアを変えるなんてコストが掛かりすぎますよね。

シールで「押す」と貼っておけば解決しそうです。

これは、WEBページでも起こりえます。

ソーシャルログイン

これはあくまで持論です。
このページに書かれていることは、事実を除いて持論なのですが、
私自身、ソーシャルログインがあまり好きではないです。

なぜかと言えば、一度、別のページに遷移しますよね。
その場所で完結しないことに対して、ユーザーは、どのように思うでしょうか?

ソーシャルログインが分かるターゲットに対して、これを設置することでコンバージョンがあげられそうだというのなら、それでも良いと思います。
たとえば、プログラミングの問題を解決するためのWEBサービスなど、ある程度ITリテラシーが高い人が利用するものでしたら納得できます。

しかし、リタイア層向け休日の旅行クラブといった種類のWEBサービスでは、ちんぷんかんぷんかもしれません。

CAPTCHA

これと同じことに、ボットなどからの不正なアクセスをブロックする目的で配置される「CAPTCHA」があげられると思います。

CAPTCHA(キャプチャ)は チャレンジ/レスポンス型テストの一種で、応答者がコンピュータでないことを確認するために使われる。

https://ja.wikipedia.org/wiki/CAPTCHA
ぐにゃぐにゃ文字の羅列

おそらく、一度はどこかで見たことがあるのではないでしょうか?
ぐにゃぐにゃに曲がった、あの文字の羅列を・・・。
f:id:PeaceJet:20180403201237p:plain

不正アクセス目的で作成されたボットから攻撃を受けないために、読みにくい文字を入力させることで防止しようとする試みです。
しかし人間にとっても読みにくく、さらにアルファベットの場合は大文字なのか小文字なのかさえ判別しにくいものとなっているので、誤爆が多発して離脱率が上昇するという負の側面もあったりします。

ですから、現在ではアルファベットではなく日本語のひらがな・カタカナで表現されることが多くなってきている印象です。

reCAPTCHA

それでも、入力を促すことに変わりはありません。
金融システムのように強固なセキュリティが必要であれば、毎回の認証が必要と考えます。
しかし、掲示板に書くだけとかメールをチェックするといった用途に、毎回難しい認証は考えものです。
そこで、GoogleはreCAPTCHAというボタンを押すだけで認証できるシステムを公開しました。
f:id:PeaceJet:20180403201356g:plain
このボタンは、最近になってよく見かけるようになったのではないかと思います。

www.google.com

犬・猫・看板・お店

しかし、認証を短時間に何度も行なうと以下のように看板やお店を選べといった案内が表示されます。
f:id:PeaceJet:20180403203046p:plain

表示された選択肢から何種類か選んで回答するわけですが、稀に認証を通過しないことがあり、これが原因で実装を見送った過去があります。
Googleが開発したreCAPTCHAは確かに素晴らしいシステムですが、使いようによってはユーザーを混乱に陥れる危険性も含んでいることを天秤にかけるべきだなと感じています。

最後に

ここまでお読み頂き、本当にありがとうございます。

いかがでしたでしょうか?
ユーザー体験(UX)について、知っていただくことが出来ましたでしょうか?
会社などで、CVが横ばいだから改善してほしいとのミッションが下ったときに、真っ先にLPOやEFOという言葉が頭に浮かんでくることもあると思います。
確かに、そのような施策も必要ですが、あくまでも小手先になってしまっている可能性を考える必要があるでしょう。
本当に必要なのは、ユーザーがどの様に考え、感じるかなのです。
人間だれでも、自分にされたら嫌なことを他人にはしませんよね?
それと同じで、自分が使ってみて嫌なら使わない。
それは、簡単でもっとも根本的なマーケティングでもあると考えています。

Not UX, But UH

だから、私はUH(User Happiness)という考え方で動いています。
WEBサービスであれ、集客のためのLPであれ、提供するコンテンツやサービスによってユーザーが幸せになっているかを調べて改善する。
ユーザー体験(UX)は、その一部でしかありません。
ですから、ユーザー幸福(UH)を高めるためには、どのようにしたらよいかを考えると、より良いものが作れるのではないでしょうか。

免責事項

当ブログに掲載されている記事の内容につきましては、正しい情報を提供することに務めてはおりますが、提供している記事の内容及びリンク先からいかなる損失や損害などの被害が発生したとしても、当ブログでは責任を負いかねます。主義・主張・意見につきましては当ブログ運営者の個人的見解です。効能・効果を保証するものではありません。 ご利用は読者様個人の判断により自己責任でお願いいたします。

わかばちゃんと学ぶ Webサイト制作の基本

わかばちゃんと学ぶ Webサイト制作の基本

/* ブログタイトルを取得 */