コーヒー豆 ウェブショップ関連のユーザビリティを少しだけ、改良しました②

色々やってみるとアイディアが沸いてくるもので、先日ブログで書かせていただきました小変更をしているうちに、気付いた点をさらに改良しました。

と言っても、私はこういう風に表示させたいというようなアイディアとディテールの追い込みを考えるだけで、実際の作業は専門の方にやっていただいているのですけども。

今回で、Ver.2.2という感じでしょうか。

トップページのウェブショップ、メニューバー>ウェブショップ(商品一覧ページ)のいづれのページでも、商品のタイル状ブロックにマウスオンしていただきますと、「黒い透明なレイヤー」が現れ、そこにコーヒー豆の情報が表示されるようにしたのが、前回までの変更です。

今回の改良は、コーヒー豆を同時に比較検討、購入までをしていただけるように、レイヤーを固定するスイッチ(オン、オフで色が変わります)、バリエーションを選択ボタンを付加しました。

デフォルトの状態では、ブロックタイルにマウスオン、オフだけでレイヤーの表示有無の切り替えができますが、固定スイッチをオンにすることにより任意のレイヤー常時固定表示することもできます。

もちろん、こちらのレイヤーからさらに商品詳細ページに飛ぶこともできます。

スクリーンショット 2014-11-09 12.17.42

マウスオンもしくはタップしますとレイヤーが現れます。

 

また、表示項目はスクロールすることにより、レイヤー内でコーヒー豆のスペック全項目閲覧することができるようにいたしました。(PCではスクロールバーをお使いください。モバイルではスワイプで操作できます。)

表示はPC、スマホ、タブレットでほぼ同じように動くよう設計してありますので、是非一度お試しください。

以下の画像は、ウェブショップ(商品一覧ページ)で3つの商品のレイヤーを固定させた例です。

スクリーンショット 2014-11-09 11.41.57

Find your favorite ご使用方法

皆様のお好みのコーヒーに出会えることを目指し、WEB上でサポートするしくみを考えました。 どうぞお試しください。


  1. favorite(左または上ボタン)の▼ボタンでお客様にとって優先度が高くご参考にされたい項目を選んでください。
  2. favoriteをお選びください(右または下ボタン)でお選びいただいた項目の官能項目の質感の目安5〜1を選択します。(5が高く、1が低い. ただし、ローストの深さのみ強度を示す.)表中にあります官能項目以外も選択できます。
  3. 選択項目を増やす場合は ”+”ボタンを押してください。(Xで削除できます.)
  4. 絞り込み検索をしていただく項目数はいくつでも追加可能ですが、最大で3〜4程度をおすすめします。
  5. 項目数が多いほど、結果として選ばれるコーヒーは少なくなる傾向になります。
  6. 希望される価格レンジもスライドバーを左右に操作することにより加えることができます。(初期設定はすべての価格が適応/価格スライドバーは、PCのみ対応)

*各項目の評価はより客観的なものを目指しておりますが、弊店のローストの考え方(弊店の商品)、カッピングに基づく評価であり 絶対的なものではありません。 あらかじめご了承ください。

Close