カテゴリー: Web、GUI (page 17 of 24)

289. 直感的な分かりやすさ~ECサイトの情報デザイン~


インターネットショッピングは実物を手に取って確かめることができないので、購入に躊躇することがあります。カバンを探していたらちょっと親切な表示を見つけました。

それは、収納容量の目安になるように収納例が表示されていたのです。

カバンに入れられるモノのシルエットが並んだ図

実際の店舗のカバン売り場では、A4サイズなどの厚紙が用意されていて収納可能かどうかを確かめられますが、インターネットでは寸法表示のみであるため確かめにくいです。それを補う方法として、このサイトでは大きさを数字だけではなく実際の物を使って視覚的に表現し、イメージを沸きやすくしています。 この情報は購入検討に役立ちますし、且つ、サイト側の販促効果の向上にも有効だと思いました。 このカバン買っちゃおうかな〜。

■関連ページ
AssistOn
AssistOn 実際の提示例

265. パスワード間違い防止の工夫~WindowsXP


何度パスワードを入力しても認証ができない・・・間違って無いはずなのに!と思ったらキーボードのCaps LockがONになっていた・・・という経験は誰にでも(?)あるかと思います。

セキュリティ上、仕方がないのですが、パスワード入力画面ではパスワードが「●●●●●●」や「******」と表示されるので、Caps LockがONのまま入力していることに気付くことができません。

セキュリティに関わることですし、自分で気を付けるしかないのかなぁと諦めていたのですが、WindowsXPのログイン画面ではパスワード入力時にCaps LockがONになっているのを知らせてくれることに気付きました。

入力間違いを防止するうれしい工夫ですね。

Caps LockがONなのを知らせてくれます

247. 3D表示の検索エンジン


ネットサーフィン中に偶然発見したのですが、面白そうだったので紹介します。

検索結果を3Dで表示することが出来る検索エンジンです。「gooラボ」で実験中のもので 、現在はお試し版をダウンロードして使うことができます。

3Dウェブ検索の検索結果画面

例として中古車検索の画面を載せていますが、この場合X軸(赤)が価格Y軸(緑)が年式Z軸(青)が走行距離になっていて、同時に3つの項目を比較して中古車を探すことが出来ます。

価格はなるべく安くて年式は新しい方がよくて走行距離のなるべく少ない中古車」と思って探す場合、下図のように「画面左のほうに表示されている中古車が該当するものだ」という形で分かります。

探したい中古車をエリアで見ることができる

中古車は色々な条件を比較して折り合いをつけながら探すものなので、この検索エンジンのように複数の項目を比較しながら探せると便利だと思いました。

まだ実験段階なので検索できるものが限られていますが、僕は住宅物件検索でこの検索エンジンを使えたらいいなと思います。最初に最寄り駅だけ選択して、家賃と広さと駅からの所要時間で3軸になってたらすごく便利だと思うのですが・・・

関連ページ
gooラボ

231. 戻るがたくさん~auサイトのソフトキールールでの問題


最近、仕事でよくauの携帯を使用するのですが、EZwebをしている時に妙な画面に出くわしました。この画面、何か変だと思いませんか?

戻るが3つ表示された画面

そう、「戻る」が画面上に三つも存在しているのですよ。こんなに「戻る」があったら、どれを使ったらいいのか迷ってしまいますね。どうしてこんなことになっているのでしょう…

まず、(1)のエリアの「戻る」ですが、サイトの項目であることはおわかりですね。問題は (2)のエリアにある、「戻る」という二つのキー表示です。このように画面下部に表示されるキーは、「ソフトキー」や「ファンクションキー」と呼ばれ、携帯の画面に表示された項目を選択したり、機能を呼び出したりするために使います。 上記の画面では、

  • 左側のキー:「履歴で前の画面に戻る」
  • 中央のキー:「選択した項目を決定する」
  • 右側のキー:「ブラウザメニューを呼び出す」

という機能が割り当てられています。実はこの中央のキー表示、画面上で選択した項目の言葉が、反映されているのです。よって(1)のエリアで、「承諾する」という項目を選ぶと、以下のような表示に変わります。

他の項目を選んだ場合

こうしてみるとそれほどおかしい感じはしませんね。けれども、このサイトでは左側のソフトキーが「戻るキー」として存在したため、画面上の「戻る」項目を選択すると「戻る」が三つも現れてしまうのですねぇ・・・

そもそも、この中央のソフトキーは「項目を決定するキー」なので、「OK」や「決定」でも十分だと思います。そうは言っても、選択した項目が決定するキーに反映されれば、違う項目を誤って選ばないようにユーザも気をつけることができますね。ただし、サイト構築者がサイトをデザインする際に、どのようにソフトキーで操作させるかということを十分に検討する必要があります。さもなければ、今回の例のようにユーザを困惑させてしまうことになりますからね。

関連ページ
HDMLタグ一覧&注意事項(au公式ページ)
独自拡張タグと特徴のあるタグについて(au公式ページ)

222. 型番がコピーできない製品ページ


私は最近、インターネットを利用して買い物をする機会が増えました。また、購入するまでには至らないもの、気になる製品などの下調べ・吟味もインターネットを通して行っています。

世間一般の人々はどのような吟味の方法を行っているかはわかりませんが、私は製品ページで型番をコピーし、検索サイトでペーストして、価格やその製品にまつわるエトセトラを調べまくります。

そんな習慣が身に付いてしまったためか、非常に使いにくい場面に出くわしました。

DVDレコーダー
DIGA(ディーガ) HDD内蔵(ハードディスク)
[Panasonic.co.jp]

製品の型番が画像の一部となっているため、コピーできません。また、目につくようなところにもコピーできそうなテキストが記載されていません。

このときは、それなりに気になった製品だったので、仕方なく型番をメモにとりました。

上記リンク先ではちょっと分かりにくいかもしれないので、事例を作成しました。実際にコピーができない画像とできる画像とで、比べてみてください。

MA-200
型番がコピーできない例 型番がコピーできる例

コピーできなくて困るのは、下調べや吟味のシーンだけではありません。メールで「これどーよ?」なんて友達に教えてあげたり。そんなシーンなども想定できます。

今や、インターネットを通して製品情報を発信する場合には、このようなシーンを見逃してはいけないかと思います。インターネットショッピングという、新しい買い物の「カタチ」として定着してきているわけですから。型番が目立つよう、綺麗な画像としてウェブサイトに載せたい気持ちも分からなくもないですが、型番の「使い方」という要素も見逃してはいけないのかと思います。ひとたび手に取って(マウスに取って)ネットを渡り歩けば購買につながる場合もあるのですから。

« Older posts Newer posts »