ドミノピザのサイトで経験値ガッポリ
2011年1月9日(日曜日)
ドミノピザのサイトで経験値ガッポリ
公開: 2011年1月12日0時35分頃
ドミノピザのチラシを見て電話で注文しようかと思ったのですが、「ネット注文で5%引き」と書いてあるのに気付いたので、ネット注文を試みました。ドミノピザは食べたことはありますが、サイトから注文するのは初めて。
この注文までの手順がなかなか面白かったので、記録をかねて書いておきます。
スタート～トップページを表示するまで
- Googleで「ドミノピザ」を検索してアクセス。
- 「必要利用環境について」という画面が表示される。どうもスクリプト無効なのがいけないらしい。
- 信頼済みサイトゾーンに追加してリロード。……画面変わらず。
- 外部ドメインのJSを読んでいる可能性を考えてソースを確認。
- 外部ドメインのJSは使われていない模様。もう一度リロードするも画面変わらず。
- ふとアドレスバーを見ると、http://www.dominos.jp/error/noscript.html になっている事に気付く。
- URLの末尾を削って http://www.dominos.jp/ にアクセス。するとそれらしいトップページが表示された。
※ここまでのポイント: トップページを表示するまでに苦労するサイトは珍しいですね。スクリプト無効時の挙動はおざなりにされがちですが、重要なのは、実際に無効でアクセスした人がサイトを使えるようになっているかどうかです。無効時にリダイレクトするような設計では、上記のようなことになってしまいます。
メニューを選択するまで
- 「Cセット」を注文したかったが、トップページの「おすすめ」にはなぜかCだけがなかったので左メニューの「すべてのセット」をクリック
- Cセットを発見し、「このセットメニューを選ぶ」をクリック
- 「セットの内容を選択してください」という表示が出て、ピザ、サイドメニューがいくつか表示された下に「サイドメニュー: ×まだお選びいただいていません」という表示。サイドメニューを選ぶ必要があるのだろうと考えてその箇所をクリックしてみたものの、何も起きず。この表示は何だろう?
- 下の方にスクロールして行くと「サイズを選ぶ」「生地を選ぶ」という項目があってラジオボタンが表示されている……が、選択肢がひとつしか表示されていない。他の選択肢が折りたたまれているのかと考えてクリックしてみたものの、何も起きず。
- その下の「トッピングの追加・削除する」はクリックすると展開して、隠れていたチェックボックスが表示された。トッピングがずらずらと。
- 値段によってはトッピングを追加してみても良いかも……と一瞬思ったものの、金額などは全く表示されていないため、どのトッピングがいくらなのか分からず。他のページに探しに行くのも面倒なのでトッピングは追加しないことに決定。
- その下に「セットのピザを決定する」ボタンが。上には「サイドメニュー: ×まだお選びいただいていません」と表示されているのに決定して良いのだろうか……と悩むものの、悩んでいてもしようがないのでクリックして進むことに。
- 「セットの内容を選択してください」という表示のいちばん下が、「サイドメニュー: ただいまサイドメニューを選択中です」という表示に変化。……ああ、これはステップ表示だったのですか。
- 下の方にスクロールすると「サイドメニューを選択してください」という表示があり、ラジオボタンがいくつかあってドリンク数種と「選択しない」という選択肢が選べる……が、これまた価格が表示されていない。「追加しますか?」ではなく「選択してください」と言われているのだから、ドリンクはセットに含まれているのかもしれないと考えて、とりあえずアイスティーを選択してみる。
- アイスティーを選択しても特に金額は変化しない。が、金額の横に「ご注文金額を更新する」ボタンがあるのに気付く。クリックしてみると、金額がアップした!
- 有料ならドリンクは要らないので、「選択しない」を選択して「ご注文金額を更新する」をクリック。金額が元に戻った事を確認して、「ショッピングカートに入れる」ボタンをクリック。
- 「ご注文を続けるにはログインするか、お店を探していただく必要があります」という警告のダイアログが出る (左上に「!」と出ていたので警告なのでしょう)。ログインはできないので「お店を探す」を選択。
- 「住所から探す」「郵便番号から探す」の2種類がある模様。「住所から探す」は、ラベルからは住所入力を連想しますが、表示されたのは日本地図……。「郵便番号から探す」はちゃんと郵便番号の入力欄。郵便番号の方が早そう気がしたので郵便番号を入力。
- そこそこ絞られた番地が表示される。「都道府県を選び直す」「市区町村を選び直す」などというリンクが表示されますが……郵便番号を入れているのに郵便番号の入力し直しではなく都道府県を変えたりするニーズがあるのだろうか……などと思いつつもスルーして丁目を選択。
- 店が決定したようなので確認して「ご注文を続ける」をクリック
- すると、トップページに戻りました。
※ここまでのポイント: UIのデザインの重要性に気付かされますね。ステップ表示は、ステップ表示と分かるような見た目に。選択肢が一つしかないときはラジオボタンを表示しないように。そして、値段が分からないメニューを追加する勇気がない人でも使えるように、サイドメニューの価格を表示したほうが良いでしょう。
ユーザー登録フォームを表示するまで
- 「ご注文を続ける」をクリックしたつもりなのにトップページに戻ってしまって、しばし、たたずむ。
- ……よく探すと、右側のバナーがありそうなエリアに「商品を追加しました」という表示と「ショッピングカートを見る」というボタンが。これがまたご丁寧なことにバナーっぽい見た目なのでなかなか気付きませんでした。ともあれクリック。
- カートの中身は問題ないので下の方にスクロール。ここで時間指定ができるようだったので時間を指定。
- 「レジに進む」をクリック。すると、「必要利用環境について」という画面が表示される。最初に見た画面です。何が起きたか一瞬分かりませんでしたが、HTTPSに変わったために信頼済みでないゾーンになったのだと理解。あらためてHTTPSを信頼済みサイトゾーンに登録して、リロード。
- ……何も起きず……ああ、このエラー画面はリロードしてもダメなのでした。既に一度経験したはずなのに学習していない……。履歴からエラーが出る前の画面に戻って、もう一度レジに進む。
- レジに進むと、「ログイン」と、「まだご登録されていない方」という選択肢があったので、「まだご登録されていない方」をクリックしてみたものの何も起きず。クリックしてから、これはボタンぽい見た目だがボタンではなく見出しだと気付く。下の方にある「レジに進む」ボタンをクリック。
- すると「お客様情報の入力」という巨大なフォームが出現。
※ここまでのポイント: UI部品のビジュアルデザインやレイアウトの重要性に気付かされます。押せるボタンに気付かなかったり、押せないものを押してしまったり。重要なボタンを目立たせたつもりでも、バナーっぽいデザインでバナーがありそうな場所に配置されていればバナーに見えてしまいます。また、見出しのデザインが立体感のある角丸デザインなので、見出しのラベルによってはボタンのように見えてしまう場合があります。
ユーザー登録～完了まで
- フォームにちくちく入力するも、パスワードで詰まる。こう書いてあります。
使える文字種は? 長さは? いずれも無制限? ……と思いつつ入力してみると、きっちり maxlength="10" が設定されていました。設定しようと思ったパスワードは長すぎたので急遽変更して、パスワードと確認入力の両方に入力。
パスワード *
お届け先を登録して次回から手軽にご注文いただけます。
次回ログイン時のパスワードを決定してください。
- 支払い方法が選択できたのでカード払いにして、カード番号、セキュリティコードなどを入力。
- 「入力した内容を確認する」と、エラーになった。パスワード入力欄の色が変わっていて、どうもパスワードと確認入力が一致しなかったらしい。パスワードはフィルされていないので (これは当然)、パスワードと確認入力を注意深く再入力。
- するとまたエラー。今度は何だ? と思ったら、カード番号が入力されていない模様。さっきは入力したはずなのに。ともあれ再入力。
- するとまたエラー。今度はパスワードが未入力……と、ここへ来て、カード番号未入力でエラーになった原因が分かりました。パスワードとカード番号は両方ともフィルされないようになっていて、他の項目でエラーが出ると入力がクリアされてしまうのです。しかし、エラーになっていない箇所は強調表示されないので、空欄になっていることに気付かないまま進んでしまってエラーになったというわけです。両方を慎重に入力して何とかクリア。
- 登録したメールアドレスに「◆ドミノオンライン本店◆ ご注文確認のお手続きについて」というメールが届く。そのURLをクリックしてはじめて注文が確定するようです。……これ、メールが遅延したらどうするつもりなんだろう……と余計な心配をしつつもクリック。
※ここまでのポイント: パスワードの長さや文字種は人間に読めるように表示しましょう。また、フィルできない入力項目が同一画面に複数あると、上記のような失敗を招くおそれがあります。パスワードの入力、カード番号の入力は、個人情報の入力とは別にそれぞれ画面を設けた方が良いでしょう。
おつかれさまでした! あとは指定時間になったらピザが届いてウマーですよ! しかもWebサイトのUIの勉強にもなって経験値ガッポリ、合わせてウマウマです。
※特にオチはありません。:-)
- 「ドミノピザのサイトで経験値ガッポリ」にコメントを書く
- 前(古い): 空飛ぶタイヤ
- 次(新しい): WEBインベンター、XSSを修正か
