こんにちわ、PHPエンジニアのエンジニア婦人（@naho_osada）です。
PHPエンジニアとして9年～の経験があります。
さて本日は「相手のことを想って作ろう」というお話です。
所謂UI / UXの話に若干絡んできますが、ここではUIやUXについて難しい話を論じるわけではありません。
ただ、普段UIやUXを専門に考える人ではなくてもWebサイトやブラウザを用いたツールを作るときに、どれだけ相手を想って作れるかのか、相手を想った設計にできるのか。そんなお話です。仕様は満たしていてもどこか不便な画面を作ってしまう人にこそ、ヒントになるかもしれません。私は画面設計のプロではありませんが、最低限ここで述べたようなことは考えて作っています。
Webサイトやブラウザを使ったツールを作るときに、あなたはどれだけ見た目を、操作性を気にしていますか？
画面の設計するときの考え方
作りたい画面の仕様
- 日付と時刻を設定する画面で、設定できる範囲をアクセス日から1週間後の20時59分59秒までとする
- 登録ボタンを押してエラーチェック、問題がなければそのまま登録する
という画面を作るとします。
仕様を最低限満たした画面
一番簡単な実装方法は以下の通りになるでしょう。
- 日付の入力フォームがある
- 時間の入力フォームがある
- 登録ボタンがある
シンプルな画面に起こすとこんなイメージになります。
カレンダーから日付が選択できて、時と分に分けて値を設定でき、且つアクセス日から1週間以内の20時59分までのエラーチェックができれば、仕様を満たしていると言えます。
例えば2020/10/1にアクセスしてきた場合、2020/10/7までは設定できます。2020/10/8は設定できません。エラーチェックを行い、登録できないようにしていれば問題ありません。
また2020/10/1にアクセスしてきた場合にそれよりも過去、例えば2020/9/30も設定できないようにしておく必要があります。
時間については最大の7日目だった場合、21時以降は登録できないようにしておきます。
仕様は満たしましたが、操作性について考えたとき、本当にこれでいいでしょうか？
ユーザーが起こすエラー
例えばフォーム上部に「本日から1週間以内の20時59分までに設定してください」と注意書きを書いておいても、全く注意書きを読まずに登録しようとする人は必ずいます（エラーになるので登録はできませんが…）。
そのあとフォーム上部の注意書きに気付いて修正してくれればまだいいですが、最悪「なんか登録できないんだけど！？」とクレーム電話が入るかもしれません。クレーム入れなくとも、ユーザーが登録をやめてしまうことも考えられます。なんだかよくわからないけど登録できなかった、とそのフォームを置いているところに悪印象を持つかもしれません。
作る側からすれば「入力する側がちゃんと読んで注意していればいいじゃない」、と思ってしまう話ですが、作る側はそもそも仕様にそぐわない値は極力入力できないようにするのが親切な設計だと思います。
作っている側はあまり意識しない部分でもありますが、エラーチェックに何回も引っ掛かるというのは入力側からするとあまり気持ちいいものではありません。それが余程重要な入力フォームでない限り、数回で嫌になって離脱してしまうでしょう。
製品の問い合わせフォームなどの場合、せっかくの顧客を取り逃すことにもなりかねません。
CMSなどの製品内部の画面の場合は、「この操作ができないんだけど」といった些事の問い合わせに「頻繁に」対応しなければならなくなるかもしれません。
親切な設計を考えてみる
顧客を取り逃したり、些事の問い合わせに頻繁に対応するのはできるだけ避けたいところです。
では「仕様にそぐわない値は極力入力できないようにする」設計はどのようにすればいいでしょうか。
どう考えたらいいのか。それは「相手のことを想う」です。入力する人の気持ちになってみましょう。
エラーメッセージ、何回もみたくないし、何回も操作したくないですよね。入力内容の余程の不備でなければ1回で完了したいですよね。
相手のことを想って考えると、ここでは
- カレンダーで選択できる日付を、アクセス日から1週間以内のみとする
- 時間のセレクトボックスに通常は0～23時だが、アクセス日から1週間後の日付の場合は20時までの選択とする
- 日付の選択を解除した場合、時間のセレクトボックスを0～23時とする
- 時間を先に選択し、且つ21時以降を選択した場合、カレンダーの日付はアクセス日から6日後までとする
- 時間の選択を解除した場合、カレンダーの日付はアクセス日から1週間後の日付までとする
という制限、処理を加えるのが良いかなと思います。
そうすれば入力側が「あれ？この日付は登録できないんだ」と先に気付くことができますし、何回も赤いエラーメッセージをユーザーに読ませる必要もなくなります（入力を制限する機能を入れたとしても、その後のエラーチェックはしっかりと行うべきです）
但し独断で入れない方が良い
恐らく詳細設計としても「日付は1週間以内しか入力できないようにする」などの細かい規定までは書いていないこともあると思います。
このような仕様が渡された場合、私としては「仕様外の値を入力させることを許さない、ユーザー側で入力ミスを極力起こさせないようにする」ことを考えます。
ですが、これを「独断で入れない方が良い」です。必ずチームの取りまとめの人に確認するべきです。
というのも、もしかしたらそこまで入力を制限していないのは別の理由があるかもしれません。
納期が異様に短いかもしれないし、予算がそこまで取れていないかもしれない。この場合はいずれにしても親切設計の実装に時間を割けないでしょう。
もしかしたら別の拡張要素が後ろに控えていて、そこでは1週間の制限が外れるのかもしれない。考えられることは色々あります。
そのため、
「こういった処理を入れた方が使いやすいと思いますが、どうでしょうか」
と実装する前に相談するべきです。
まとめ
プログラマが画面を考えると見た目が大変なことになりがちです。それでも、ただ相手のことを想って作ったら今よりもいいものが作れるかもしません。
仕様だけを文字通り受け止めた場合、入力する人はなんか不便だと感じるものができてしまう可能性が高いでしょう。
不特定多数が触る可能性があるものについては可能な限り、仕様に沿った入力を制限をする処理を加えるべきだと、私は思います。
但し予算や開発期間の問題もあるので、一人で勝手に入れるべきではありません。チーム開発の場合はリーダーなどの決裁権のある方に相談しましょう。
