Webデザイン勉強会@Tokyo #3

参加してきました。
実際のWebサイトをユーザ視点で利用してみて、そのサイトの使いやすさについてディスカッションしてみるという内容でした。

前提: 作り手視点とユーザ視点

デザインだけを見てると作り手本位になりがち
ユーザの属性や利用状況を見ると、必要とされているデザインが導き出される
点ではなく線で見る必要がある

例として出されたケースがとてもわかりやすかったです。

例)

新しい皿を作るためにメーカーが、何人かユーザを集めて新商品のアイデアについて意見を出してもらう >>作り手視点
結果的に、黒の四角い皿がカッコイイという結果に落ち着く
協力してもらったユーザに、お土産としてメーカーの皿の中から気に入った物をお持ち帰りいただく >>ユーザ視点
ユーザはみんな、白の丸い皿を持って帰る。

というオチ。

ウォークスルー1

お題)体験ギフトをプレゼントしたいので、ネットで購入したい。

【対象サイト】
[Sow Experience GIFT:title=http://www.sowxp.co.jp/]

私たちのグループは、両親へ体験ギフトを送りたいという設定でサイトを体験しました。
大体の流れは、以下の感じです。

サイトの検索から始める
体験ギフトでググるとトップにでる
コースの違いがわからん
戻ろうとしたらサイト内で迷子に(ry

【一通り操作してみての感想】

ぱっと見て商品の魅力が伝わってこない
商品の内容がわかりにくい
なんのサイトなのかぱっと見てわかりにくい
地域で絞り込める範囲が細かくない
サイトから体験の直感的なイメージが湧かない
コースの比較がしにくい、コースの違いが分からない
サービスの説明が少なくて、内容がわかりにくい
結局違うサイトでプレゼントを探そうとした
ブルー、グリーン、レッドとかのランク分けの意味がわからない。(ブルー、グリーン、レッドの色の順位はイメージしにくい。ゴールド、シルバーならわかるけど)

「わかりにくい」という声が圧倒的に多いです。
確かに使いづらいです。見ていて、自分がどこにいるのかわからない、何を買っているのかよくわからない、という。:-(

逆に、良い点としては以下の意見が上がりました。

トップのでかいイメージがサイトを利用する前に期待感を与える。
ロゴのサンタ帽。ディティールに凝ってる。
選ぶ基準を提示してくれてる。(予算、用途、カテゴリ)

以上を踏まえて、このサイトの改善点を洗い出しました。

【改善点】

クチコミと利用可能店舗は順番入れ替えた方がいい
クチコミが薄い(いちいち開かないとみれない)
テキストにメリハリをつける
ギフト券パッケージの写真はいらん、体験が主役なんだから
トップページの「カートに入れる」は微妙。もっとイメージを見せた方がいい
ナビゲーションの情報を整理する。大杉
画像の「押せる感」がない
商品の階層がおかしい
何買ってんのかわからない
先に商品詳細を見せてからの方が購入しやすそう

個人的な感想としては、商品のランクとして色(ブルー、グリーン、レッド・・・)を使うなら
もっと前面に出すべきかな、と思いました。
現状、タブ内にテキストと小さい頭文字のアイコンだけなので、もっと視覚的に表現するとか。
ディティールのアイコンなどは綺麗なのに、全体としてみるとやけにパっとしないなぁ、というのが印象として残ってしまいました。

ケーススタディ

六本木ヒルズのサイト

時期訴求イベントのエリア(トップページの左上のエリア)のデザインを改善

訪問者がすぐに引きつけられるデザインにしたい
時期訴求イベントエリアであることが伝わるようにしたい
複数のイベント告知をしたい
写真が栄えるようにしたい

普通に六本木ヒルズに行こうとしてこのサイトを見れば、あら綺麗な感じ。と感じますが
改善せよ。というお題があると、色々と出てくる物ですね。

自動で次の写真に行ってしまい、文章を読んでる最中に移ってしまうので、もっとインタラクティブにする
文字が小さい
文章が写真にかぶって来るので写真が死んでる
メニューと連動した開催時期の情報を見せる
白背景の方が写真が栄える

話の中で紹介されていたマクドナルドのサイトの見せ方がすごい良いです。

感じたこと

デザインばかりではなく、ユーザがどの様な操作を行うのかということも考えないと、わけが分からないものになる
普段、デザインが気に入ってチェックしているサイトでも、改善しようという視点で見てみよう
デザインのメリハリ大事
キーになる部分はちゃんと突出させた方が良い