これがひどい。ほんとひどい。

たいていのECサイトでの購入手続きには慣れている方だと思うけど、これは歴史に残るひどさ。
ここで僕がいろいろと書くよりも試してもらうのが良いかと思うのですが、僕の経験した中でイーッ！ってなった点をいくつか。
（ちなみに検証はfirefox.3.x）

購入する気を無くす点

町丁目番地/ビル・マンション名が（全角）

ここがんばって！全角も許してください！
ヨモツネットさんのところのこういうJSとか、サーバ側でもうちょっとがんばってください＞＜
できればハイフンとかの処理も。

配送先指定として「上記の住所に送る」にデフォルトでチェックが入っていない）

内容的にギフトに使えそうなのは確かにいっぱいだけど、サイト自体そういうコンセプトでもないはず。自分用で買う人も多いだろうに、しかもゲストだとメッセージカードとかも使えないのに、基本住所＝購入者の住所に送る前提でないのは謎。

むしろ「別の住所に送る」でチェック、追加入力画面表示的なのがいいなぁ。

町内番地・ビルマンション名が「全角14文字以内」という制限）

14文字超える住所には商品を送れないのですか？＞＜
ほんと誰得。案の定僕はマンション名が14文字超えで脱落です。

ちなみになぜか「配送先」の方のフォームでは上記の制限があてはまりません。どんだけ気まぐれ！

エラーの表示方法がたまに異なる）

フォーム上で明示されている条件に合わない入力情報で「次を進む」ボタンを押すと、ダイアログでエラーが表示されます。これだとそのダイアログが閉じられた後に、何のエラーだったかを確認できないので、ページ上部だとか入力エラーのあるフォーム周りにエラー内容を明示すべき。

で、たまにイレギュラーなエラーが発生すると「入力エラー」というページに遷移するのだけど、そこから表示されている「戻る」で遷移すると

フォームの内容がクリアされます。うおー。

※あといろいろこの記事のためにちょっといろいろと画面遷移しまくってたら、エラーページからの戻りのはずなのに確認画面に進むとか・・・気まぐれなんです、彼女。

修正のために全画面に戻るとすべて入力内容がクリアされる）

エラー多発させていただいた上で修正は最初からという。なんというECサイト購入トレーニング。
これらの過程をザ・パンチのノーパンチの方の気持ちでがんばったわけです。
※ザ・パンチとノーパンチの方がわからない人はYoutubeあたりで。

結局最終的には最後の確認画面までようやくたどり着いたけど一カ所不備に気づいて、 修正しようと遷移したらすべてがクリアになりギブアップ。 僕の忍耐力がないだけかもなのでしょうか。ちなみに逆に良い点も少し。

逆に良しとする点

会員登録しなくても買える

最近のECサイトは基本会員登録が必須なように思います。これは提供側からすれば顧客を囲い込みたいわけですからね。 一方、購入者側としてもこれからも色々買いたいときに毎回住所を入れたりするのは面倒だから、会員となって購入手続きを簡素化できた方がいい。
でも実際とりあえず単発で買いたいというのも多いわけなので、「ゲストとして購入する」というのは良い選択肢かと思います。

今思えばこれらはすべて「もう！これだったら会員登録だけ先にしちゃおう！」と思わせるワナだったのか！

購入のステップが明示されている

購入完了までにどういうステップを踏むのかがわかる。これももう今やどの購入・会員登録フォームでもありますね。

郵便番号入力で住所補完

これはここ数年でよく見かけるものですね。郵便番号7桁を入れると「住所を入力」ボタンとかで市町村区までの入力を済ましてくれます。

とまぁ・・・そんなものでしょうか

しかし自身をユーザーとして反省するとすれば、慣れてしまっているが故に、あまり注意書きなどを読まずにすすめてしまい、エラーを出してしまったこと。

でもそれって結局自分たちが提供しているサービスを利用しようとしているお客様でも同じことがありえるんですよね。 結局ユーザーは書かれている注意書きなんて読まない。入力に迷っても相談する店員なんて目の前にいない。

じゃあどうするかっていうのはシステム内部の処理だったりフォームのUIだったりとかで、いかにストレスのないものにするか、そしてユーザーに対して「寛容」であるか。それに尽きます。

しかし、ほんとに良い商品があるサイトなのになぁ・・・残念。

これはデザイナーの気質かもしれませんが、自分が描いているデザインが環境によって1pxでずれていると、なんだか不満に感じるのです。これは１年前ほどの僕なのですが、きっと同じ思いのデザイナーさんもいらっしゃるでしょう。

しかしクロスブラウザの本質は、”表示（見た目）”というよりも”操作性”のところにあるのではないかと思うようになりました。

操作性を損なう例

CSSでいえば

例えば旧バージョンのIEにおけるボックスモデルの解釈を考慮せず、サイドバーまたはメインコンテンツの配置が崩れてしまえば、”見た目”が苦しいこともありますが、ナビゲーションの役割を果たすサイドバーが思わぬところに配置されて”使いにくくなる”ということがあるでしょう。

これがページによってサイドバーの配置が崩れていないなど、サイト内で統一されていなければなおさらです。
もっとひどい場合にはナビゲーションリンクがクリックできないなんて場合もあるかもしれません。

これはCSSの使い方における例になりますが、javascriptであってもそうです。見た目の問題ではなく、javascriptを利用したナビゲーションが一部のブラウザで使えず、コンテンツページを閲覧できないのは大きな問題です。

javascriptでいえば

これもまた例にあげると、昨今流行？しているLightboxのように小窓やスライドショーを生成するライブラリがありますが、中にはモダンブラウザにしか対応していないものがあります。

こういうのも頑張ってハックして、どのブラウザでもLightboxの効果を見せるために時間的なコストをかけるよりも、レガシーなブラウザには単純に小窓を開くよう処理するか、またはtarget=”_blank”であっても良いと思います。

もちろんLightboxのように見せることがコンテンツとして重要な意味を持つのであれば、それだけのコストをかけるのは正しいとも思います。

ユーザーのためのクロスブラウザ思考

レガシーなブラウザを使うユーザーのために

IE TesterとCSSハック、そしてIE6ゼロ運動に提言というエントリでは、やむを得ずIE6を利用しているユーザーへの配慮についてコメントしていますが、こういった環境にあるユーザーに対しても、コンテンツを届けることを前提した上で、操作性を落とさない程度に見た目を整えることが重要だと思います。

これだけは絶対だと思うのは、「数pxのずれは妥協の範囲内だと考えた方が楽」ということです。

モダンなブラウザを使うユーザーのために

WebをWebらしく使ってもらうための工夫もそうですし、利用者が使っているブラウザのポテンシャルを最大限に活かして良い体験を提供するのも、ひとつのサービスなのかなと感じています。
Webサイトはまったく同じ見た目である必要はない : could

レガシーなブラウザを利用しているユーザーに対して、リッチな体験を提供するのも素晴らしいことだとは思いますが、新しい環境を持つユーザーに対しては使える技術を最大限に駆使して提供することも大事だと思いました。

見た目にこだわるというのも、デザイナーとして持っていなければいけないこだわりだと思ってますが、操作性ありきの見た目、デザインとコストのバランスを考えなければいけませんね。