「かっこいい画面」と言われても正直よくわからないのでユーザーインターフェース設計を勉強することにした
こんにちは。ソリューション開発部の佐々木（悠）です。最近、思うところあってユーザーインターフェース設計について勉強しています。
今回はユーザーインターフェース設計について勉強してみようと思った背景から、研修に参加しこと、学んだことを元に実践してみたことについてまとめました。
そもそものキッカケ
Webアプリの開発をする中で、お客様からこんなことを言われることはありませんか？
「この画面、もうちょっとかっこよくならない？」
私は、あります！
そして、こう思います。
かっこよくって、何だろう？
- 流行のフラットデザインというものを取り入れればいいの？
- Googleで「Webデザイン かっこいい」と入れて検索した結果を真似すればいいの？
でも、どれもなんとなく違うような気がします。
実を言うと、学生時代に少しだけデザインの勉強をしていた経験のある私。当時、私にデザインのいろはを教えてくれた方はこう言っていました。
「デザインというのは、色がどうとか、形がどうとか、そういうことじゃないんだよ」
「デザインというのはモノの付加価値だ。だから、『デザインは良いけど使いにくい』なんてものはありえない！」
あの頃は何を言われているのかよくわかっていませんでしたが、今はなんとなくわかります。
- 見た目はかっこいいけど、次の画面に進むボタンが見つからないサイト
- 見た目はかっこいいけど、知りたい情報がどこに書いてあるのかよくわからないサイト
……ありますよね？
なんとなく見た目がかっこいいサイトを真似したって、それは真にかっこいい画面にはならないのではないか！それならば、一度画面デザインについてちゃんと勉強してみよう。
と、思いました。
ユーザーインターフェース設計って何？
画面設計、画面デザイン設計について調べてみると、「ユーザーインターフェース」という言葉が出てきます。
ユーザインターフェースとは、機械、特にコンピュータとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェースである。
ユーザインタフェース – Wikipedia
と、書いてあります。
つまり、Webアプリの画面もユーザーインターフェースの一種ということですね。
Webアプリにおいては、「ユーザーインターフェース設計」とは「画面の設計」と考えればよさそうです。
研修に行ってみよう！
ということで、9/20、21の二日間に渡り、ユーザーインターフェース設計の研修に参加してきました。
参加した研修はこちらの「ユーザーインターフェース設計基礎」です。
参加者は15名程度で、3つのグループに分かれての研修でした。
初日は主に講義がメインで、簡単なグループ演習を挟みながらユーザーインターフェース設計の考え方と、考え方に基づく具体的なテクニックについて勉強しました。
人間工学的な視点での考え方にも言及されており、「なるほど確かに！」という発見がたくさんありました。
二日目は、午前中に初日の復習を簡単に行い、午後は各グループごとに画面設計を行う演習に取り組みました。演習では初日に教わったユーザーインターフェースの考え方やテクニックを取り入れていくだけでなく、画面設計を行うにあたっての方法論も学ぶことができました。
学んだことを実践してみよう
折角研修に行ってきたので、学んだことを実践して画面設計に取り組んでみましょう！
今回は、最近私が見た中で「これはちょっと使いにくいな……」と感じたWebサイトの画面を模した仮の入力フォーム画面を例にして、画面デザインの改善案を考えてみることにします。
画面デザインを改善しよう
こちらの「ボランティアスタッフの応募フォーム（仮）」が今回改善する画面です。
パッと見は特に問題なさそうに見えますが、実際に入力しようとしてみるといろいろと使いにくいところがあります。
どこがどのように使いにくいか、どのように改善したら良いかを早速検討していきたいところですが、その前に、まずはこの応募フォームを利用するユーザーや利用目的から画面に求められる条件を考えてみようと思います。
画面に求められる条件はなんだろう？
この画面はボランティアの応募フォームです。なので、この画面を利用するユーザーは「Webからボランティアに応募しようとしている人」ということになります。
ボランティアスタッフのメインターゲットとして考えているのは大学生なので、この画面のメインの利用者も大学生を想定します。今どきの大学生はほぼ100%スマホから入力するでしょうから、この応募フォームも「スマホから入力しやすいこと」が画面に求められる条件の1つになりそうです。
画面の利用目的は、当然「ボランティアに応募するため」です。なるべくたくさんの人に応募してもらいたいので、応募フォームへの入力のハードルはできるだけ下げたいところです。
入力フォームへのハードルを下げるとは、「入力の手間を少なくすること」「次に何を入力するかがわかりやすいこと」と言い換えることができるかもしれません。
ということで、この画面に求められる条件は以下の3つです。
- スマホから入力しやすいこと
- 入力の手間を少なくすること
- 次に何を入力するかがわかりやすいこと
今の画面はどこが使いにくい？ どう改善する？
それでは、上述の3つ視点から今の画面のどこが使いにくいか、どう改善すれば良いかを検討していきます。
まずは入力欄から見てみましょう！
登録番号
説明文によると、登録番号は保存、もしくは送信の後に自動採番されるので、ユーザーが入力する必要はなさそうです。
画面から入力できないテキストボックスが置いてあるというのは、どうなんでしょうか。後からユーザーに知らせたい情報ということであれば、登録番号を採番した後で画面上に表示すればいいのではないかと思います。
なので、ここは思い切って削除してしまうことにします。ただし、ここのテキストボックスの下にはさりげなく重要なことが説明文として書いてあるので、説明文はどこか別の場所に表示することにします。
国籍
様々な国の方が応募できるボランティアなので、ユーザーには国籍の情報を入力してもらいます。
国はドロップダウンリストから選択できるようになっており、デフォルトで「日本」が選択された状態になっています。なお、ドロップダウンリストを開くと200以上の国名（！）が表示されます。
ほとんどのユーザーが日本国籍だと考えられるので、デフォルトで「日本」が選択されているのは親切だと思うのですが、日本以外の国籍の人からすれば200以上の国から自分の国を探さなければいけないので、とんでもない手間がかかります。
ドロップダウンリストから探すよりも、別の検索画面を使って国名を検索できるようした方が手間を減らせるはずです！
ただ、前述の通りほとんどのユーザーは日本国籍だと考えられるので、国籍に日本を選択する場合はもう少し手間を省きたいところです。
ということで、こんなフォームを考えてみました。
トグルボタンで国籍が「日本」か「日本以外」であるかを選択できるようにします。
「日本」を選択した場合は、入力終了です。
「日本以外」を選択した場合は、「国検索」ボタンと国を入力するテキストボックスを表示します。
「国検索」ボタンから国検索の画面を表示し、国検索の画面で選択した値をテキストボックスに表示するという流れです。ユーザーにもその流れがわかるようにテキストボックスの中に薄いグレーで説明文も表示しました。
※ 国検索画面の画面イメージは割愛させていただきます。
氏名
姓と名を分けて入力していますね。
よく見かける入力形式ですし、私自身も「氏名といえば姓と名でわけるもの」くらいに思っていました。しかし、それで本当によいのでしょうか？
今回、画面に求める条件の一つに「入力の手間を少なくすること」がありますので、入力の手間という視点で考えてみます。
姓と名を分けた場合、入力には以下の4つのアクションが必要になります。
- 「姓」のテキストボックスをクリック
- 「姓」のテキストボックスに手打ちで入力
- 「名」のテキストボックスをクリック
- 「名」のテキストボックスに手打ちで入力
これだったら、姓と名を1回で入力できるようにした方が入力にかかるアクションが少なくなり、その分入力の手間も省けそうですよね。ということで、姓と名はまとめて1つのテキストボックスにしてしまいます。
姓と名の間に全角スペースを入れておけば、姓と名で分けて管理することもできそうです。
性別
性別は、ドロップダウンリストで「女性」「男性」「その他」の中から選びます。（「その他」はパスポートに記載がある場合のみ選択できます）
これも特に問題なさそうですが、「氏名」と同様に入力の手間という視点で考えてみます。
ドロップダウンリストから選択する場合、以下の2つのアクションが必要です。
- ドロップダウンリストを開く
- 開いたリストから選択する
これを見て、「国籍」のようにトグルボタンを使用すれば、1アクションで選択できるのでは？ と考えました。
これなら、該当するボタンをクリックするだけで選択完了です。
生年月日
これだと、一体どういう形式で生年月日を入力すればいいのかがわかりません。スラッシュ区切り？ ハイフン区切り？
説明文に入力形式を記載して、テキストボックスに薄いグレーで入力例を書いておけばユーザーも迷わずに入力できそうです。
……いや、でもあともう一工夫できそう。
「年」「月」「日」でテキストボックスを分けてしまえば、形式を気にする必要もないかもしれません。
あれ？ 「氏名」の入力のときに、テキストボックスを分けると入力にかかるアクションが増えるから一つにまとめようという話をしていなかったっけ？
そう言われると思っていました。
「生年月日」は「氏名」と違って入力する文字数が決まっています。ですので、テキストボックスに必要な文字数分入力したら、自動で次のテキストボックスにカーソル移動するように設定すれば、入力にかかるアクションは増えずに済むので問題なしです！
本人確認証
「本人確認証」には、「パスポート」「日本のマイナンバーカード」「日本の運転免許証」のいずれかを選択します。「パスポート」を選択した場合は「有効期限」の入力が必要です。
これも「性別」と同じようにトグルボタンで選択するのが良さそうです。
「有効期限」は「パスポート」を選択したときだけ入力が必要な項目なので、「パスポート」を選択したときにだけテキストボックスを表示するようにしてしまいます。「有効期限」は日付なので、「生年月日」のように「年」「月」「日」でテキストボックスを分けることにしましょう。
と、ここでもう一工夫です。
パスポートの有効期限を入力するとしたら、パスポートを開いてそこに記載されている有効期限を入力しますよね？
パスポートをお持ちの方は、是非ご自分のパスポートを開いてみていただきたいのですが、パスポートには有効期限が「日」「月」「年」の順に記載されています。
画面のテキストボックスが「年」「月」「日」の順に入力するようになっていたのだとしたら、一度頭の中で日付を並べ替える必要がでてきます。この手間を減らしましょう！
パスポートに記載されている有効期限を見たまま入力できるようにします。つまり、画面上もパスポートと同じように「日」「月」「年」の順にテキストボックスを並べます。
これで入力欄はすべて確認できました。次は画面処理を進めるボタンを見ていきましょう。
次の画面処理に進むボタン
「登録番号」のテキストボックスの下に「STEP1～5の各項目に入力をお願いします。」と説明がありましたので、おそらく次は「STEP2」の画面に進むのでしょう。
次画面に進むボタンは……
どれだ！？
「登録番号」のテキストボックスの下にある説明によると、「保存」ボタンは入力内容を一時保存するボタンのようです。
「送信」ボタンはどこにも説明がありませんでしたが、おそらく応募フォームを送信するボタンだと考えられます。
「キャンセル」ボタンも同じく説明がありませんが、入力を保存も送信もせずに終了するボタンでしょう。
この3つのボタンはどれも「STEP2」の画面に進むボタンではなさそうです。それでは「STEP2」の画面にはどこから進めるのでしょう……。
あ、もしかしてこれか？
画面上部にあった「STEP2」の文字にカーソルを合わせてみると、タブが切り替わりそうな動きをしました。そうか、これか。
これはなかなか初見ではわからない仕様です。画面の一番下までスクロールするとタブ部分は見えなくなってしまいますし、そもそもこの部分がタブで切り替えられることに気づくのにも時間がかかります。実際私が一番困ったのもこの「STEP2」の画面にどうやって進むかでした。
ここからは想像になりますが、おそらくこの画面はSTEP1～5の入力項目のうちどこからでも入力を始めることができて、いつでも一時保存・中断ができて、すべての項目が埋まり次第いつでも送信ができるようにしたかったのでしょう。
確かにその機能はあれば便利かもしれません。ですが、その結果ユーザーにとって操作しにくい画面になってしまっては本末転倒。途中で入力に挫折して応募自体を止めてしまう可能性すら出てきます。
それならば、機能はもっとシンプルにして、ユーザーにとって使いやすい画面を目指した方が良いと考えて、ボタンはこのようにしてみました。
まず、タブで画面切り替えを行うのはやめて、「STEP1」→「STEP2」→……と一本道で画面が進んでいくようにしました。画面上部に今どこまで進んでいるか、この後どれくらい画面が残っているかがわかるような表示を入れて、一本道で進んでいくことがわかるようにしています。
ボタンも次画面に進むための「STEP2へ進む」ボタンを追加しました。
また、「保存」「キャンセル」ではそのボタンをクリックしたときにどのような処理が行われるかがわかりにくいように感じたので、ボタンの表示名を「ここまでの入力内容を保存して入力を終了する」と「ここまでの入力内容を保存せずに入力を終了する」に変えてみました。
ただ、ボタンの表示名が長いのでスマホで表示したときにレイアウト崩れを起こしそうだという懸念があります。このあたりは実際にスマホで表示してみたり、他の人にも意見を聞いてみたりして、検討し直してもいいかもしれません。
これで、ひととおりの画面デザインの見直しが終わりました！
画面の改善案の全体像はこちら
まとめ
ユーザーインターフェースについて勉強してみて、大きく3つのことを感じました。
1つ目は「これまで自分は開発者目線でしか画面設計をしていなかった」ということ。
氏名の入力テキストボックスなどが代表的な例ですが、作る側の都合で画面設計をしていたなと思います。まずはその画面をどんなユーザーが、どんな目的で使うかを念頭に入れなければ、画面設計はできないと実感しました。
2つ目に感じたのは「便利な機能＝ユーザーにとって使いやすい画面ではない」ということ。
画面についてお客様と打ち合わせをしていると、どうしてもいろんな機能を盛り込みたくなります。ですが、実践編でもわかる通り、便利な機能のせいで画面が使いにくくなってしまうこともあります。
そんなときに、お客様に納得していただけるような画面設計と説明ができるようにしていきたいと思いました。
そして3つめは「使いにくい画面は機会損失に繋がる」ということ。
実践編の元になった入力フォームは、結局途中で入力を諦めてしまいました。例えばこれが通販サイトだったり、資料請求の画面だったりしたとしたら、画面が使いにくいということが理由で顧客を逃してしまうことに繋がります。画面設計をする立場としては、これは絶対に避けたいところです。
