UIを切り替えることで商品検索の利便性を増す
【1】ポートレートでは、サムネイルメインの商品リストと、サムネイルに商品解説を付記したリストという2タイプから、ユーザーが好みに応じて切り替えることができる。
ビッダーズでは、商品一覧の見せ方としてさまざまなUIを実装している。
まず、【1】はポートレート(縦位置)で閲覧した場合の商品リスト画面だ。商品リストは、画面上部のボタンによって2種類の表示方法を切り替えることができる。
これは、できるだけ多くの商品イメージを比較しながら探したいユーザーにはサムネイルをメインとした商品リストを提供し、ある程度の説明を読みたいユーザーにはサムネイルに商品解説が付記されたリストが利用できるようにするというもの。切り替えは瞬時に行われるため、ストレスなく操作できるようになっている。
ポートレート/ランドスケープ切り替えでリッチな体験を
ポートレートでは、一般的にイメージされる商品リスト画面としてデザインしている一方、ランドスケープではイメージをガラりと切り替えている。これは、ポートレート/ランドスケープで画面が切り替わるというスマートフォンならではのインターフェイスを活用し、よりリッチな体験を提供したいという狙いだ。
具体的には【2】のように、ランドスケープではデザイン性もまったく異なるカルーセル方式で商品リストを提示している。カルーセルでは、ほかの商品をチラ見せすることでフリックのモチベーションを引き出す効果も狙っているが、商品を探す楽しさをさらに高める演出を加えているといえる。
ポートレートとランドスケープでは、サムネイル画像の大きさが異なるため、画像のリロードが発生してしまうが、カルーセル方式のため、ストレスはそれほど感じずに商品を探すことができる。
【2】商品検索による商品リストはポートレートからランドスケープに変えると、UIデザインもガラリと切り替わる。ランドスケープではカルーセルによるリッチなUIを提供している。
タイムセールコーナーではさらにリッチに
ビッダーズでは、期間限定商品を掲載するタイムセールコーナーがある。このコーナーは、よりリアルに近い商品との出会いを体験してもらうため、ポートレート、ランドスケープともにリッチなUIで商品リストを展開している。
前述の商品リストでは横並びのカルーセルであったが、タイムセールコーナーでは仮想3D空間を設定して、奥から前面に回転しながらサムネイルが登場する手法を取り入れている【3】。
ポートレートでは画面幅が狭くなるため、横並びのカルーセルでは、次の商品イメージをあまり見せることができないが、3D空間における回転方式であれば、次の商品サムネイルをある程度“チラ見せ”することが可能だ。
また、ポートレートでは画面下部に、ランドスケープでは画面右横に商品カテゴリを切り替えるボタンを配置している。画面形状に合わせた使い勝手を考慮した設計を行っている。
【3】タイムセールコーナーでは、ポートレート、ランドスケープともにリッチなUIを採用。フリック操作によって、仮想3D空間で商品サムネイルを回転させながら表示することができる。
次回は、jsonとlocalStorageを活用した検索キーワードのアシスト機能とスマートフォン向けのパフォーマンスアップなどについて
紹介しよう。