見出し画像

製造業マーケティングTV第25回 ウェブサイトのUIについて

こんにちは、デジタルマーケターのイミトモです。

本日も「ものづくりの現場にマーケティングの風を」ということで製造業マーケティングTVをお届けしました。

画像1

製造業マーケティングのスペシャリスト・大谷さんとお届けしました。

本日のメインテーマはUI

画像2

UIとは

UIとはUser Interfaceの略です。インターフェイスという英語を直訳すると、「接点」や「境界」。つまりUIを直訳すると「ユーザーとの接点」です。

UIは、ウェブサイトやスマホアプリだけでなく、チケット売り場や自動車の運転席など、人間と機械が向き合う様々なシーンで存在します。

今日は様々なシーンに存在するUIのうち、ウェブサイトのUIというくくりでお話しいたしました。


なぜUIが損なわれてしまうのか

ウェブサイトを作ろうとしたときに色んな人や企業が色んな思惑があります。誰の思惑を重視するかは、そのウェブサイトの在り方に大きく影響します。

画像3

UIを重視するなら、つまりユーザー視点を重視したウェブサイトにするなら

・見やすい
・使いやすい

など便利に使えるウェブサイトにする必要があります。


UIの悪いウェブサイト

製造業界のウェブサイトでUIの一番気になる点。それはモバイル対応がまだまだ少ないところですね。

みなさんご存じ
Yahoo!JAPANがモバイル対応していなかったら・・・

画像4

左の画像は、パソコン版がモバイルで表示されたと仮定した合成画像です。

もう、見づらくてうんざり(笑)


という感覚は、大事にしておきたいですね。



ちょうど昨日から緊急事態宣言の第4弾が東京都などに出たので、感染症対策を調べたら内閣官房のサイトがでてきました。

ファーストビューに知りたい情報が見つからない

感染症対策のサイトのファーストビューがこちら。

画像5

イミトモ「どこかおかしくありませんか?」

大谷「感染症対策のサイトなのに、感染症対策が載っていない?」

正解!

欲しい情報が見つからないというのは、悪いUIの特徴ですね。

ちなみにスマホでみると、もっと強烈でした。

画像6

UI設計では、ユーザーの便利を第一に考えます。だから、ユーザーが欲しい情報を第一に伝えるべきですね。


直感的に使えないナビゲーションメニュー

スクロールすると・・・

画像8

左が固定のナビゲーションメニューになっていて、ページをスクロールしていくと、右側の縦長ページが先に送られていきます。

左のメニューの問題点は何だと思いますか?

・項目が多い
・読みづらい言葉がある
・文字数が多い

などの意見がありました。すべて多くの方がもつ感想ではないでしょうか。

(実際このウェブサイトを作った方は色んな要件要望があるので大変かと思いますが、すべてのしがらみを一端無視するとして・・)
私がUI視点で改善した案を載せておきますね。

画像8

項目数と言葉の簡潔さ
心理学の実験によると、項目数が5±2ですと人間の短期記憶が機能すると言われています。今回のメニューですと、項目数が8で、ひとつの言葉も長いため、短期記憶が働きづらくなります。したがって、感覚的に使いづらいUIとは言えないです。項目数を減らし、言葉を簡潔にすることでUIを改善できます。

ユーザー視点の言葉に
ユーザーが最も知りたいであろう「感染症対策」を一番上に持ってきました。このウェブサイトの名前が感染症対策ですからね。
(内閣官房が)国民の皆さんにお伝えしたいことのポイントについては、国の対処方針と判断基準に変えてみました。ユーザーを第一にがUI設計の基本です。

不便なフォーム

一時期流行ったけど、実はUIが悪いフォーム

画像9

UIを改善した例

画像10

改善のポイントは

・必須 / 任意 などの説明は、項目のすぐ近くに表記

・必須をなるべく減らす

・「戻る」や「クリア」もなるべく減らす

・ボタンの色を不自然なほど目立たせない


などなどでした。

本日ご参加いただいたTさんから

「サイトを読み込んですぐに表示される動画のUIってどうなの?」

という意見をいただいて、それをディスカッションしていました。

サイトを作るときは

・サイトの見やすさ
・サイトの使いやすさ

その背景にあるユーザーの通信環境などを配慮したいものですね。


というわけで、本日はウェブサイトのUIについてお話ししました。

次回の製造業マーケティングTVは、5月17日月曜日の予定です。内容は1週間前にお知らせします。

それでは今月もマーケティングとものづくりを頑張りましょう~


★Facebookグループから最新情報を発信しています
https://www.facebook.com/groups/seizoumarketingtv


この記事が気に入ったらサポートをしてみませんか?