この季節になるとチキンの予約が、あちこち色んな企業で始まります。
そこで、今ではパソコンよりも利用する人が多いスマートフォンから、チキンの予約がどんなプロセスで行われるのかユーザー評価を自身がユーザーになってやってみました。
利用したサイトはケンタッキーさんのスマートフォンサイト。
利用シーンの設定
今回、予約シートがあったので、そのシートを見てクリスマスに食べる商品を選んで、選んだ商品をwebから予約をするという設定で行いました。
シートにはQRコードがあったのでそこからスマートフォンを利用して予約をするといった手順で行います。
下記の様に設定して操作しました。
画像をクリックすると大きな画像が表示されます。
わかりやすい注文ボタン、しかし・・・。
早速シートにあるQRコードをスマートフォンのアプリで読み取りサイトにアクセスしました。
「注文する」ボタンが大きく表示されここから予約ができるというのがすぐにわかります。
が、ボタンをタップすると「ログイン画面」へ遷移しました。
自分の心理としては予約シートの商品を見てスマートフォンサイトへ来ているので、まず「欲しい商品を選びたい」という心理が働いていたのですが、商品を選ぶ前に会員登録をまずは行うというプロセスだったので、ここでかなり自分の中での予約への敷居が高くなりました。
会員登録へ進むと以外な盲点が
会員登録画面へ進んで入力項目を埋めていったのですが、入力する事に集中しすぎて入力フォーム付近をあまり見ない行動をしている事に気付きました。
何を入力する項目なのかラベルには視線がいくのですが入力フォームへは視線がいかず、メールアドレスを入力するフォームのところでフォームとフォームの間に@があることに気づかず、一つのフォームに@以降のドメインを含んだメールアドレス全てを入力していました。
パソコンでは問題ではないのですが、スマートフォンでは入力したものを部分的に消すカーソルの移動が非常に面倒です。
英数字の最初が大文字で入力される
これはOSの初期設定の問題なのですがメールアドレスを入力しようとするとiOSの初期設定では一文字目が大文字で入力されます。
これが意外と手間で、例えば前述しているメールアドレスが@を挟んで二つ入力項目があった場合、メールアドレスの入力だけで二度最初に小文字にするボタンを押さなければいけなくなります。
細かなですが実際に操作すると、その手間の大きさに気づきます。
本登録そして予約へ
無事に会員登録する為の入力を済ませ、本登録用のメールを受信し本登録完了。
そして「注文」へ進もうとするとログイン画面。
できれば本登録した時点でログインもして欲しかったのですが、再度前述している最初が大文字で入力される問題で入力を済ませ無事にログイン。
「注文ボタン」をタップして迷ったのがボタンのラベル表記。
「クリスマスメニューを予約する」「ご来店注文する」「お届け注文する」とあって「クリスマスメニューを予約する」「ご来店注文する」どちらも自分に該当するので、ご来店注文をタップ。
すると場所の選択画面へ遷移後メニュー選択になるのですがクリスマスメニューは出てこない。
色々画面を遷移していると、クリスマスメニューと通常メニューは同時に注文はできないというのを確認。
同時に注文する予定はないのですが、どうやら「ご来店注文する」を選択したのが間違いで「クリスマスメニューを予約する」というのが正解という事でした。
が、一度「ご来店注文する」を選択すると表示されていた「クリスマスメニューを予約する」ボタンが表示されません。どのページへ遷移しても表示されません。
これは一度ログアウトしないと表示されないのだと思いログアウトして再度ログインしなおすと表示されました。
いよいよ予約
「クリスマスメニューを予約する」ボタンをタップしていよいよ予約。
「商品選択が表示されるんだろうな」と思っていたのですが場所の選択、次に受け取り日時の選択、そして次に商品の選択という流れで、「いつ商品を選ぶ画面がくるんだろう」と心理的に少々不安になりつつの選択でした。
Google map も2本指でスクロールできる仕様になった為、地図が小さいと2本指が入るスペースが必要になる為、少し操作しづらい印象を受けました。
このあと、決済へ進み確認画面が表示され完了となるプロセスでした。
操作して気になった点と自分なりの改善方法
画面遷移はユーザーが必要としている情報から設計する
ユーザーが購入したいと思って行動に移した時に、まずその購入したいものの情報が先にないと購入まで大きな障壁になると思いました。
今回の場合、ユーザーがやらないといけないタスクとして個人情報を登録するというタスクは遅かれ早かれ必ずやらなければならないタスクなのですが先にこのタスクが来ると心理的負担が大きく離脱するユーザーが多いのかもしれないと思いました。
商品をカートに入れて個人情報登録して完了だと心理的に安心できたんだろうなと推測しました。
人が何かを購入したり予約したりする場合は実店舗であっても最初にモノを選んで最後に会計という手順なので、この原理が心的要因に影響したのかと思います。
オートコレクト、大文字自動変換をオフにする
メールアドレス入力の際にgmail.comと打つとGmail.comと勝手に大文字に変換されたり、最初に入力した文字を勝手に大文字になるのは、文字を入力するのが面倒なスマートフォンではかなりのストレスになりました。
「autocorrect=”off”」「autocapitalize=”off”」の属性値をフォームタグに指定すると入力のストレスがかなり軽減されます。
ラベル表記の検討
同時にできないものなどがあれば、その条件分岐が起きる画面へその旨を記載する事でユーザーの混乱が少なくなるかと思いました。
また、今回の場合クリスマスメニューでも通常メニューでも「ご来店注文する」というユーザーのタスクが発生する為、こちらがクリスマスメニューの「ご来店注文」こちら通常メニューの「ご来店注文」とデザインで表現されていると選択を誤る事が少なくなる対処ができたのではと思います。
まとめ
webを作って動作確認して正常な動きをすれば問題なしとして終わる事が多いと思います。
ユーザーの利用シーンを想定して実際に操作をするテストをすることで、更に良いサービスが提供できると思います。
下記は今回のサービスを利用した実際のジャーニーマップです。
画像をクリックすると大きな画像が表示されます。
システム実装の前にプロトタイプを作成し、ユーザーのシーンを想定してテストしてサービスの問題を発見して改善する。
プロトタイプツールが一般的になってきた昨今、これを使わない手はないと思います。
余計な工数がかかるとかでなく、これによりサービスの品質の向上になり手戻りが小さくなります。