こんにちは！LiSMOtechデザイナーの山邉です。
最近UIやUXという言葉をよく聞きますが、「なんとなくは知ってるけどよくわからない」という方も多いのではないでしょうか？
今回の記事ではUIとUXの違いや、デザイナー・エンジニアが普段の業務で活かせるような改善例を紹介します。

UIってなに？

UIとはUser Interfaceの略です。
WEBサイトやアプリで使われる、フォントやボタンなど、視覚に触れるすべての情報のことです。
UIは使い勝手に影響を与えます。
フォントやボタンがすごーく小さかったら、使いにくいですよね。

UXってなに？

UXとはUser Experienceの略です。
エクスペリエンス（体験）の名の通り、ユーザー体験のことです。
「使いやすい」「わかりやすい」といった体験や印象のことを指します。
UXは体験価値に影響を与えます。
使いやすいアプリは継続的に使用する気がおきますよね。

UXがいいとどうなる？

UIは「できていて当たり前」と思われます。そのため、できていないとユーザーの離脱に繋がってしまいます。
一方UXは競合との差別化になるポイントのため、UXがいいと利益につながります。
普通に使えるアプリと、使いやすくて好感が持てるアプリ、ユーザーがどちらを選ぶかは一目瞭然ですよね。

ユーザーニーズについて

WEBサイトやアプリを制作するとき、製作者は「ユーザーが重要視するのはなにか？」を考えて、訴求内容を決めます。
ところが、訴求内容と実際のユーザーが求めるものがズレてしまうことがあります。
このズレはどうして起こってしまうのでしょうか？
それは、制作者が詳しくなりすぎてしまい、考え方が偏ってしまうためです。

制作担当者は入念な調査や下調べを行います。そのため、一般的なユーザーよりも知識がつきます。
ユーザーが疑問に思うようなことでも、制作担当者にとっては知っていて当たり前のこととなってしまい、結果として説明不足になったり、ユーザーにとってわかりにくい表現になってしまいます。
また、商品購入やサービスの利用をする前には、ユーザーは不安を抱くことがあります。
制作担当者は知識があるがゆえに、ユーザーが抱く不安感や購入までのハードルに気付けなくなってしまうのです。

そのため、実際のニーズやユーザーの感覚を掴むため、ユーザーテストを行ったり、インタビューを行うことが大切です。
アンケートフォームなどでユーザーの声を拾っていくことも大切ですね。

AD

入力フォームのUX向上

ここからは、普段の業務で活かせる入力フォームのUX向上について説明します。
会社の規模によっては、ユーザーテストを行うことの負担が大きく、実現が難しい場合があります。
そんな時でも、気を付けるポイントを押さえることで、UXを向上させることができます。
使いやすい入力フォームを作って、ユーザーの体験を良くしましょう！

①大文字・小文字、全角・半角

文字を入力するときに、大文字・小文字や全角・半角の指定があると、ユーザーにとってはストレスになります。
特に、WEBサービスを使い慣れていないシニア層向けの場合は注意が必要です。
ユーザーのITリテラシーによっては、そもそも全角と半角を認識していない場合があります。
そのため、フォーム側で自動変換するなど、ユーザーにとっての負担を軽減するような使用が望ましいです。

②ハイフンの有無

郵便番号や電話番号を入力するとき、ハイフンが必要なアプリと不要なアプリがあります。
入力後にエラーが出ると、ユーザーにとってストレスになってしまいます。
入力欄の側にハイフンの有無を記載することで、入力後のエラー発生を減らすことができます。

③項目名の表示位置

入力欄の中(プレースホルダー)に項目名を記載しているフォームが見られますが、これは良くありません。
実際に入力する際に、どの項目を入力するのかがわからなくなってしまうからです。
項目名はラベルとして常に表示して、プレースホルダーには入力例など、見えなくなってしまっても大丈夫な内容を記載しましょう。

④必須項目と任意項目

＊や※などの記号で必須項目を表すことがありますが、WEBサービスに慣れていない人にとって伝わりづらいです。
誰が見てもわかるように、文字で必須か任意かを記載しましょう。
必須を赤、任意をグレーなどで色分けすると、さらにわかりやすくなります。

⑤進捗を明示する

入力内容の多いフォームだと、数ページに別れている場合があります。
このとき、全体のどれくらいが終わっているのかがわからないと、ユーザーは不安になったり面倒になって離脱してしまいます。
ステップ表記やプログレスバーを表示することで、ユーザーに進捗率を知らせてあげましょう。

⑥送信後のエラー

送信ボタンを押した後にエラー表示が出てがっくりした経験を持つ人は多いのではないでしょうか。
各入力項目を入力し終わった時点でエラー表示を出してあげると親切です。
なお、一文字ずつエラー判定が出るのもストレスになります。

⑦エラーの理由を明記する

「入力内容に不備があります」といった抽象的なエラー文だと、ユーザーはどこを修正すればいいのかわかりません。
「メールアドレスが入力されていません」のように、具体的にエラー内容を表示しましょう。

⑧フォーム送信後のアクション

ユーザーはフォーム送信後、申し込みや購入ができているのか不安になります。
次のアクションや送信が完了した旨を明記することで、ユーザーの不安を解消できます。

AD

おわりに

UXデザインをよくすることは、他社との差別化に繋がります。
日頃の業務で「ユーザーにとって快適な体験はなにか？」を考え、活かすことでより良い成果を生み出していきましょう！
「ユーザーについてもっと理解を深めたい！」という方は、ユーザーを本当に理解するための調査に大切なことって？定性×定量的なアプローチを徹底解説！も併せてご覧ください！
最後までご覧いただきありがとうございました。