昨年時点でのランキングとはなりますが、上位の企業と下位になってしまった企業のUX/UIを比較してみましょう
＜UXランキング評価基準と配点について＞
まず上位となった「JINS」のサイトから見ていきましょう。
サイトカラーである赤を中心に統一感を持たせながら、トップページには商品を目立たせるレイアウト。非常にクリーンな印象を与えるサイトデザインです。
また、ヘッダーとフッターに『送料無料・返品OK』とあることで、ユーザーにオンラインショッピングを安心して楽しんでもらおうとする工夫が見られます。
加えて、オンライン購入ガイドのページでは、アイコンや動画を使用し、丁寧にわかりやすく説明しています。”メガネをオンラインショップで買う”という、ひと昔前では考えられなかった行動に対する不安を、どうにかして取り除こうとする企業努力が随所に見られるのも、ランキング上位となった一因です。
欠点としてはショッピングカート内の文字が小さく見づらいこと。内容に関しては丁寧に説明されているのですが、「読もう」とする気が起きないテキストレイアウトとなっています。トップメニューはわかりやすいため、Look&feelで合わせることで、ますますのUX改善につながるでしょう。
次にランキングで下位となってしまった「パリミキ・メガネ」についてです。
まず、オンラインでの購入ができないので、ウェブサイト内で商品選択から購入までの動作を完結できないもどかしさがあります。メガネの試着予約サービスを設けていることから、店舗購入が前提にあるようです。
UI的な観点から見ると、トップページにあるサイドメニューの情報量、さらにバナーの文字数も多く、サイトのフォーカスポイントが見当たりません。
また、トップページには店舗検索などのサイドメニューが左側にあるのですが、なぜか他のページに行くとサイドメニューが右側に移動してしまいます。ナビゲーションに一貫性がなく、ユーザーが混乱してしまう恐れがあります。
＜トップページ＞
＜他ページ＞
「パリミキ・メガネ」ではメガネの他、コンタクトレンズ、補聴器やコスメなど多くの商品やサービスを取り扱っています。そのため、必然的に各ページの階層が深くなってしまいます。そこで、表示しているページまでの経路情報をフッターの上部に設置する、ブレッドクラムナビゲーションのような、ユーザーを迷子にしない工夫が必要です。
ところで、同社「酸素メガネ」という商品について、特設サイトを開設して商品情報などを提供しています。
独自の技術により、フレームの周辺に酸素や水蒸気を集めることで、目の潤いを保てるという商品なのですが、サイトにエンベッドされたYouTube動画をみても、何一つ、この技術の仕組みや効果は理解・実感することはできません。
また、この特設サイトでは、3Dグラフィックで表示されたメガネをクリック&ドラッグすると、360℃で商品を俯瞰して見られるようにしていますが、利用者の視点に立って考えると、サイトの読み込み速度を犠牲にしてまで、訴求すべきポイントは、そこ(デザイン)ではないことは明らかです。
また、特設サイトの画面上に散らばったメニューは直感的に使うことができず、ユーザビリティとしてもかなり残念な仕上がりとなっています。「購入」を押すと、楽天の商品ページに誘導されますが、果たして、この程度の情報で購入を決断する人がどのくらいいるのでしょうか。
ドイツのインダストリアルデザイナーであるディーター・ラムスが提唱している『良いデザインの十ヶ条』の中の一つに、「良いデザインは可能な限りデザインをしない』という言葉があります。
この二社のサイトは、掲載されている情報量としては大して変わりはありません。ですが、二社のサイトを比較してみると、利用者の視点に立って、情報を、どう分かりやすく整理・デザインして見せるかによって、サイトに訪れた人の印象やエクスペリエンスが大きく変わってしまう、ということがよく分かると思います。