コーヒー豆 ウェブショップ関連のユーザビリティを少しだけ、改良しました②
色々やってみるとアイディアが沸いてくるもので、先日ブログで書かせていただきました小変更をしているうちに、気付いた点をさらに改良しました。
と言っても、私はこういう風に表示させたいというようなアイディアとディテールの追い込みを考えるだけで、実際の作業は専門の方にやっていただいているのですけども。
今回で、Ver.2.2という感じでしょうか。
トップページのウェブショップ、メニューバー＞ウェブショップ（商品一覧ページ）のいづれのページでも、商品のタイル状ブロックにマウスオンしていただきますと、「黒い透明なレイヤー」が現れ、そこにコーヒー豆の情報が表示されるようにしたのが、前回までの変更です。
今回の改良は、コーヒー豆を同時に比較検討、購入までをしていただけるように、レイヤーを固定するスイッチ（オン、オフで色が変わります）、バリエーションを選択ボタンを付加しました。
デフォルトの状態では、ブロックタイルにマウスオン、オフだけでレイヤーの表示有無の切り替えができますが、固定スイッチをオンにすることにより任意のレイヤー常時固定表示することもできます。
もちろん、こちらのレイヤー からさらに商品詳細ページに飛ぶこともできます。
また、表示項目はスクロールすることにより、レイヤー内でコーヒー豆のスペック全項目閲覧することができるようにいたしました。（PCではスクロールバーをお使いください。モバイルではスワイプで操作できます。）
表示はPC、スマホ、タブレットでほぼ同じように動くよう設計してありますので、是非一度お試しください。
以下の画像は、ウェブショップ（商品一覧ページ）で３つの商品のレイヤーを固定させた例です。
