参考にしてはいけないAppleのデザイン vol.1

UIデザイナーは様々な製品やサービスに触れ、より良いデザインを見つけてはいつでも取り出せるよう頭の引き出しに閉まっています。

そしてAppleはその中でも特に信頼できるブランドの1つであるため、他の開発者を説得する仕事でもあるUIデザイナーは
「Appleがこう言ってます」「Appleではこうなってます」と権威性バイアスをフル活用しているデザイナーも多いはずですし、私もその1人です。

ですがAppleだからといって全てが完璧なわけではありません。

どういった意図で行われたデザインなのかを判断せずに良いデザインを見つけてはブックマークやスクショし、考えなく採用しているデザイナーがいるとしたら考え方を改め直す必要があります。

App Storeでクレカ登録できない

ある日スマホを触っている友人にこんな事を言われました。

「App Storeでクレジットカードの登録がうまくいかないんだけど、有効期限内だよね？」

カードを見てみると有効期限は02/22となっていたので、「入力ミスでは？」と聞くと「間違いない」と返ってきました。

実際の画面を見てみるとこんな感じで、一見すると正しいように見えましたが、すぐに私は入力済みの項目を空にしてエラーの原因を特定する事ができました。

これが有効期限を空にした状態です。これを見ればなぜエラーが出ていたのか理解できますね。

そうです、彼は4桁で入力すべき西暦を2桁で入力していたのです。

そしてこのミスにUIデザイナーは真剣に向き合わなければなりません。

今回は私が隣にいたので解決できましたが、もし彼1人だったしたらそのまま離脱していたでしょう。

Appleはみすみす課金しようとしているユーザーを離脱させようとしていたのです。

解決方法を検討

彼はスマホが大好きで、LINE・Twitter・インスタ・TikTok・YouTube・ゲームを暇があれば常に利用しているユーザーです。

その彼でもこのようなミスが起きるなら、この事例を考慮したフォームをUIデザイナーは考える必要がありそうです。

ではどのような解決方法があったのかを検討してみましょう。私がすぐに思いつく方法は以下です。

①エラー内容を詳細に伝える
②エラーをすぐに伝える
③カメラで読み取る
④2桁にする
⑤2桁も4桁も許容する
⑥プレースホルダーを使用しない

①エラー内容を詳細に伝える

現在のエラーメッセージはこうです。
「クレジットカード有効期限は2020から2040までの間の値の数である必要があります」

この内容は完全に正しいですが、ユーザーはこのような長いテキストを読みません。

そして読んだとしても、人は経験から物事を無意識に判断するため、今回のように本人にとってイレギュラーな出来事は理解ができません。

シンプルに「4桁で入力してください」と表示すれば良かったのです。

ですがこの解決策には大きな問題があります。あらかじめ全てのエラーパターンを詳細に洗い出せることが前提だからです。

入力項目の種類や数によって現実的ではない可能性があります。

②エラーをすぐに伝える

これは①に書いた「4桁で入力してください」というエラーメッセージを出せる前提ですが、西暦を入力し終わった後にすぐ伝えるべきでした。

その方が全ての項目を入力して完了を押した後に初めてエラーが解るよりもユーザーフレンドリーです。

そしてこれはヤコブ・ニールセンによる1番目のユーザビリティヒューリスティックであるVisibility of system statusに当てはまります。

かんたんに説明すると「ユーザーに適切なタイミングで、適切な内容のフィードバックを行いましょう」という事です。

エラーが発生したタイミングは「22」と入力し終えたタイミングです。フォーカスがはずれたタイミングで伝える必要がありました。

③カメラで読み取る

最近では珍しくないUIですが、App Storeでもカメラを使ってクレジットカード番号を読み取るUIを採用しています。

ですが彼のiPhoneの外側カメラは故障していたため利用できませんでした。

これは非常に稀な例ではありますが、スマホのように高価なものは画面が割れたまま使用する人もいます。

UIデザイナーはあらゆるコンテキスト(利用状況のようなもの)を考慮したデザインをする必要があります。

手打ちで入力する方法があるのであれば、やはり手打ちでも正しく入力できるよう最大限に配慮するべきです。

④2桁にする

通常クレジットカードには2桁で西暦が書かれています。

ユーザーは必ずクレジットカードを見て入力する事を考えれば、むしろ4桁での入力が不自然だったと考えられます。

コンテキストを考慮していないデザインだった可能性があります。

そしてこれは2番目のユーザビリティヒューリスティックであるMatch between system and the real worldに当てはまります。

かんたんに説明すると「慣れ親しんだ言葉や概念を使用し、現実世界のルールに合わせましょう」という事です。

⑤2桁も4桁も許容する

2桁の方が4桁よりも優れている事はわかりました。ですが西暦は本来4桁であるため、4桁で入力したいユーザーもいるでしょう。

2桁よりも多い数は入力できないよう制限するのも良いですが、4桁入力のユーザーは「なぜ3つ目の数字が入力できないんだろう？」と立ち止まって考える必要があります。

考えさせないのがUIデザイナーの仕事です。どちらも許容してしまう方がユーザーフレンドリーでしょう。

これは5番目のユーザビリティヒューリスティックにあるError preventionに該当します。

かんたんに説明すると「優れたエラーメッセージよりも、エラーを未然に防ぐ方が優れている」という事です。

⑥プレースホルダーを使用しない

今回の事例はそもそも4桁で入力する事が入力前の状態でしか分からないのが事の発端です。

そしてこれはプレースホルダーの最大のデメリットであり、こうしたデメリットからプレースホルダーは使うべきではないという意見もあります。

例えばこれがパスワード入力だったとして、消えるテキストで「8桁以上、英数字含む、大文字」と書かれていたらどうでしょうか。

クレカの「YYYY」は、それと同じ役割の可能性があります。

プレースホルダーのメリット・デメリット

プレースホルダーを使うメリットはたった1つですが、デメリットは非常に多いことが分かっています。

メリット
・スペースの削減

デメリット
・入力後に内容が分からない
・入力済みの項目と勘違いして飛ばされやすい
・視覚および認知障害のあるユーザーへの負担が大きい
・空でないテキストフィールドは探すのに時間がかかる
・キーボードで移動するユーザーはフォーカスすると消えてしまう

それでもプレースホルダーを使用しますか？

プレースホルダーを使うタイミング

最もインターネットが利用されている機器がスマホである現在、スペースを削減できるプレースホルダーは非常に便利なUIです。

ですが先に書いたデメリットの多さから、使用には細心の注意を払う必要があります。

ではどのような場面でプレースホルダーは有効なのでしょうか。

それはログイン画面のように、既にユーザーが慣れ親しんだUIの場合です。

2つのテキストフィールドとボタンを見れば、ユーザーは何を入力すれば良いのか自ずと理解できます。

本来ラベルをプレースホルダーに利用するのは良くありませんが、このようなログインフォームは既に多くのサービスで採用されており、問題なく機能しています。

ですがもちろんラベルは外にある方が理解しやすい事は忘れてはいけません。

またその他、項目数が少なくテキストフィールドにしっかりと集中できる場合にも効果的です。

例えば検索窓などでの利用がそれに当たります。

まとめ

開発者とユーザーのリテラシーには大きな隔たりがあります。

つい素晴らしいデザインに目が行きがちですが、それよりもユーザーが戸惑うデザインにも注目し、なぜスムーズに利用できなかったのかを日々考えるクセをつけておきましょう。

例えばそれがAppleだったとしても鵜呑みにしてはいけません。