こんにちは、デザイナーのカシヤマです。
ニジボックスに入社後、Webデザインに関わって約1年。
Webサイトの改修や新規項目の追加など、既存のWebサイトからの更新デザインに多く携わりました。

Webデザイナーの前は紙のデザイナーをしていたのですが、Webに転向して分からない言葉が沢山ありました。
その中でも多く聞くワードが「UI」。
Webに関わっている方でなくても聞くことが多い言葉ですよね。
ただ、「UI」を漠然と理解していても『現状のサイトが使いにくい…、改善したくても具体的にどうすれば良いのかわからない！』そんな方もいらっしゃるのではないでしょうか？

そんな方々の為に、この記事では今までの業務で行ってきた「UI改善」を、具体的な内容やプロセスと共に解説していこうと思います。
※あくまで私の手順であり、全てのデザイナーに当てはまるわけではないので、その点はご容赦ください。

UIとは

直訳すると「User Interface = ユーザーとの境界・接触面」。
ユーザーとサービスの接点全てを、もしくは、ユーザーと道具を「つなぐ」ものを意味します。
Webサービスであれば、サイトのデザイン・文字のフォント・メディア（画像・動画）・サイト内検索機能など、ユーザーとの接点全てがUIにあたります。

引用元：今さら聞けない！ユーザーインターフェース（UI）とは？〜UIと関連キーワードの基本をやさしく解説〜

上記によるとUI=「ユーザーとサービスのつなぐもの」＝「ユーザーとサービスの接点」であるといえます。
つまり、UIを改善するということは「ユーザーとサービスが違和感なく接することができる」ということであり、「ユーザーにとって使いやすいサービスを提供する」ことがUI改善の目的であるということになります。

UI改善の４つのプロセス

私の場合、UIを改善する際の考え方は以下の順序になります。

①現状UIの問題点を考える

現状使用されているUIがどう使いにくいのか、どこを改善すれば良いのか、そもそも改善する項目は必要なのか、サイトの流れを阻害していないか、などの問題点を考えてみます。
その際、実際に使用するユーザーの側に立って考えることが大切です。

②どうすれば「ユーザーにとって使いやすくなるのか」考える

上記①の結果、問題箇所が判明したら、次はどうすれば「使いやすくなるのか」を考えます。
手間を減らす、説明をつける等、ここでも実際に使用するユーザーの側に立って考えることが大切になります。
（私は「ユーザーの立場に立って」を考えて製作しています。）

③デザイン製作

②で考えた改善案を基に製作していきます。
実際に形にすると違和感が発生することもあるので、その都度さらに改善を重ねることもあります。

④検証

③で製作したものが実装された場合、本当に使いやすくなったか、サイト全体の雰囲気と合っているか、流れを阻害していないかを確認します。
デザイナーだけでなく、ディレクター等の意見ももらい、問題があれば再度①に戻って修正します。

【事例】実際にメールフォームのUIを改善してみた！

STEP1「改修前のデザイン」

では実際に、UIを改善していきます。
改善する前のデザインはこちら。

問題点としては、「入力フォームを選択後に文字が消えてしまう」ところです。
これではフォームをクリックした後に何のフォームかわからなくなってしまいます。
とても不親切なUIですので、こちらを改善して行きます。

STEP2「入力例を入れてみる」

フォームを選択しても消えないように、「メールアドレス」項目をフォームの外に出しました。
また、入力例がわかるように、ダミーアドレスを薄くフォームの中に入れます。（フォームを選択したら消える想定です）
さらにメールアドレス入力は打つ文字量が長く、間違いが発生することが多い箇所という懸念があります。
そこで入力ミス防止の為、確認用に再入力のフォームも新規で追加しました。
STEP1と見比べると、だいぶ要素が増えましたね。

STEP3「分割してわかりやすく」

ここで「④検証」をします。
打ち間違いを防ぐために追加した「確認用のフォーム」ですが、STEP2の改善では同じフォームを二つ連続で設置するとコピー&ペーストされる危険性があります。
それでは「打ち間違いを防ぐ」という目的は果たされません。

そこで確認用の入力フォームは「＠」の部分で区切り、前と後ろで入力場所を分割させる仕様に修正しました。
前後を区切ることでコピー&ペーストの防止だけでなく、ユーザーが自然と入力に注意する効果も期待できます。

STEP4「入力の手間を無くす」

さらに「④検証」をします。
そもそも、メールアドレス入力でネックなのが「確認の為、再度入力しなければならない」というところ。
「メールアドレス自体長いのに、また同じものを入力するのか…」と思ったことのある方も多いのではないでしょうか。
STEP3の改善では、間違い発生防止のために二重入力の方法を取っていますが、ユーザーに手間を発生させてしまいます。
これでは「ユーザーにとって使いやすいサービス」は提供できません。
そこで、下記のサイトを参考にして修正してみました。

■参考サイト
そこそこ使いやすいフォームを作った

メールアドレスのフォームのみでなく、様々なフォームが載っています。
どれもユーザービリティが高いUIばかりなので、是非ご覧ください。

メールアドレスを入力しようとすると「入力ミスが多くなっておりますので、一度ご確認ください」と表示され、文字を入力するごとに確認欄に大きな文字が表示されます。
これなら二度手間も省け、同時にチェックもできる、とても使いやすいUIではないでしょうか。
その他にもJavaScriptを使用した簡易チェックをするという方法もあります。

今回はメールアドレスの入力フォームのみというシンプルな改善でしたが、
サイトやユーザーの特性によって、様々な情報や方法を取捨選択する必要があります。

まとめ

一つの入力フォーム改善だけで、こんなに考えることができます。
今回の改善は一つだけでしたが、サイト全体の雰囲気や、システムの流れと合わせたデザインをする必要があるので、上記の案が合致しないことも多々あるでしょう。

ここで大切なのは「ユーザーにとって使いやすいサービスを提供すること」であり、UIはその手段として役立つことができるということです。
デザインの改変ばかりに目が行きがちになりますが、「そもそもユーザーは使いやすいのか」「これは何をする為のUIなのか」など、大切なことを忘れないようにしていかなければなりませんね。

おわりに

UI改善方法について解説してきましたが、いかがでしたか？

ニジボックスではサイト制作や開発における、情報設計やビジュアル設計といったUIデザイン面に加えて、ユーザーテストなどによるUX観点でのご支援も可能です。

下記資料にて、人間中心設計の考え方をベースとしたUXリサーチ結果に基づいた、ニジボックスのユーザー課題解決型のUIデザインフローや、支援事例を一部紹介しています。
ご興味を持たれた方はぜひ、下記ダウンロードリンクよりご参照ください。

参考書籍

現場のプロが教えるWebデザイン＆レイアウトの最新常識知らないと困るWebデザインの新ルール3