« (山だけは)雪国のような朝 | トップページ | サクラの花びら舞い散る道で »

2010/04/04

Adobe Store の UI に戸惑った

会社で使うフォントを Adobe Store で買った。
そのとき、うまくクレジット決済できず、サポートに電話した。
電話の対応は丁寧で、無事にフォントを購入できたのだが、やっぱりサイトの UI (ユーザーインターフェース)が良くないと思う。

……ということで、どこが良くないと思うか、以下に示す。
ちなみに、ワシはアンケートや申込などの Web アプリケーションの開発に係わったことがあるので、ユーザビリティにはちょっとウルサイのだ。

まず、Adobe Store でフォントを選択、カートに入れた(「By now」をクリックする)。
フォントも単品で買うのが面倒で、何度も戻ってクリックする必要がある。
セットを売りたいのだろうか……。

それはさておき、レジへ進み、請求書送付先住所を入力すると、次の画面になる。

Adobestore_2

支払方法の選択画面だが、「クレジットカードでのお支払い」のラジオボタンが選択されていて、「銀行振込」と「コンビニ決済」はグレーアウトされている(選択不可の状態)。
これも良くない。
選択できないのであれば、表示しないほうが良い。

じつは、会社で購入するソフトウェアの支払いは銀行振込のほうが良いので、サポートに問い合わせたところ、フォントの単品購入の場合はクレジットカード決済しかできないのだそうだ。
そういうことなら、最初から「支払方法はクレジットカード決済のみとなります」といった表示にしたほうが良い。

さて、上の画面で選択肢はクレジットカード決済しかなく、すでにラジオボタンはオンになっている。
アナタなら、次のアクションはどうする?

ワシは、[次へ]ボタンをクリックした。
すると、次の画面となった。

Adobestore_1

セキュリティコードと名義人が入力されていない、というアラート(警告)画面であるが、ここまでにセキュリティコードや名義人を入力する画面はなかった。
「クレジットカードの番号および有効期限をご確認ください」と表示されているが、番号も有効期限も入力していないので、確認のしようがない。

何度か住所入力画面とアラート画面を往復した後、あきらめてサポートに電話した。
もしも個人での購入だったら、面倒になってやめてしまうところだが、仕事に必要なので仕方がない。
ワシは電話を掛けるのも受けるのも嫌いなのである。

幸い、サポートの担当者は丁寧に教えてくれたが、それはすでにラジオボタンが選択状態にある「クレジットカードでのお支払い」をもう一度クリックしろというものだった。
クリックすると、次のようにクレジットカード番号などの入力画面が現れた。

Adobestore_3

いや、これは気付かないよ。
ラジオボタンは「選択」のための UI オブジェクトであって、何かアクションが起こってしまってはならない。
ページ遷移などのアクションが期待されるのは、ボタンかリンク(リンク文字列)である。

逆に言うと、ボタンかリンク以外のオブジェクトをクリックしたとき、ページが遷移したり画面表示が大きく変わることは、ユーザをビックリさせてしまう。
JavaScript で選択リストをクリックするとページ遷移するようなスクリプトを書いて得意がっている人もいるが、はっきり言ってアレは邪道である。

じつは、上の画面のラジオボタンの左側をよくよく見ると、小さな三角形がある。
この三角形が右向きの状態のとき、クリックすると下向きになって隠されていた内容が展開する……というのが、Macintosh のファインダなどで用いられている UI である。

これも、昔(10年以上前)は洗練された UI だと思っていたが、老眼の中年になってみると煩わしい。
まず、小さい三角形が見づらい。
その小さな三角形にマウスを合わせるのが面倒くさい。
画面解像度が上がって、ボタン類が小さくなり、マウスの移動が細かくなってしまっているのでなおさらよろしくない。
Windows のショートカットキー操作に慣れていると、マウスまで手を伸ばすことすら面倒くさかったりする。
その意味では、Web アプリケーションそのものがうざったいものなのだが。

……というわけで、Adobe Store の UI には改善の余地がある。
「次に何をすれば良いか」がハッキリわかるようにしたほうが良い。
まず、クレジットカード決済しかできないなら、その旨と、「[次へ]をクリックしてカード番号等の入力画面に進んでください」のように表示する。
とにかく、次のページへ進む(新しい入力項目を表示させる)には、[次へ]をクリックというように統一したほうが良い。
そして、[次へ]をクリックするとカード番号等の入力画面になり、そこには紛らわしい▼などは表示しない。
だって、ユーザはフォルダを展開する感覚で「クレジットカード決済」を選択するのではないのだから。

Web アプリケーションのユーザビリティを向上させる鉄則は、操作を単純にし、「ユーザに学習を強いない」ことである。

|

« (山だけは)雪国のような朝 | トップページ | サクラの花びら舞い散る道で »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック


この記事へのトラックバック一覧です: Adobe Store の UI に戸惑った:

« (山だけは)雪国のような朝 | トップページ | サクラの花びら舞い散る道で »