Cntlog > スキルアップ・ノウハウ > デザイン > ユーザーの思考を見落としたデザインから見えてきたもの

ユーザーの思考を見落としたデザインから見えてきたもの

ふとECサイトを見ていたら、ユーザーを誤解させるページを見つけました。

悪意があったり、ダサいからダメという類のデザインではなく、初心者が陥りやすい例かなと思いました。
また、小馴れたデザイナでも陥りやすい失敗だと思い、少し自分の中で考察してみました。

ユーザーが先入観を持ってしまうページ

何も考えずにまずは下記の楽天のページを見ていただけますか?(できればPCで見てもらったほうが良いです)
※下着とかじゃないので、会社で開いても大丈夫ですよ。

https://item.rakuten.co.jp/mobacaba/m3269/

https://item.rakuten.co.jp/mobacaba/m1931/

上記のURLは同じモールの別の商品です。
商品以外で、なにか大きな違いが見つかりましたか??

 

 

実はひっかけでページ自体の構成に大きな違いはなくて、違うのは商品に対する先入観です。

一度ページを思い返してほしいのですが、パジャマの方も「パンツ単品」のページというのに気が付いたかたはいますか?

私はこのパジャマのページの口コミ(コメント)を見るまで、この商品は上下セットのものだと誤解をしていました。

ユーザーが誤解したところ(もともとの欲求)

このパジャマのページを見たユーザーは、おそらく「パジャマを購入したい」という欲求があってそのページにたどりついたと思います。

その中でまさか「パジャマが上下別」で販売しているという事を想像はしていなかったと思います。
アパレル業界で衣類を上下別で販売されるのは珍しくありませんが、パジャマは上下セットで買うという先入観があるのではないでしょうか。

実際にコメントをみると誤解されたユーザーの意見が投稿されています。(これ見てると自分がこのページのデザイナだったら辛いです)

中でも注目したコメントが下記の方です。

ありとあらゆるパジャマのサイトをチェックしましたが、
こんな書き方、売り方してるところはありませんよ!

私はパジャマ業界では素人なのですが、このパジャママイスターの方の意見を信じると私が持っていた先入観は他のユーザーも持っていると想定しても良さそうです。

さらにユーザーを誤解させる要因として、イメージ画像を上下セットの状態で多様している(PC版の場合)のでさらにユーザーには上下セットで販売しているイメージがついたと考えられます。

運営がやりたかった事(予想)

別に私はこのモールの人が「わざと誤解させて販売している」とは思っていません。

この商品でやりたかった事はおそらく、「パジャマ」でもパンツのみでショートとロングで選ばせたかったんだと予想しています。(上は自分で合わせろ的な)

一般的にパジャマが上下セットで売られてるからと言って、単品で購入したい(選びたい)ニーズがあるのであれば、それが悪いことではありません。

または使い込んで、新しく買い直したい用の商品かな?と想像しています。

なぜこんなことが起きてしまったか

ユーザーが買いたいものと、運営が売りたいものが異なっていて、コミュニケーションが取れていなかったのが原因かなと想定しています。

実際ユーザーの意向を汲み取れれば(コミュニケーションを取れば)、このページの作り方にはならないと思います。

普段と同じページのデザイン構成でいつも上下セットで販売されているものを別々に販売した事で、双方のコミュニケーションが破綻したからだと思っています。
(実際、長袖&ショートパンツや半袖&ロングパンツみたいな組み合わせってどのくらい需要があるんでしょうね。私は長袖&ロングパンツのようなよくある組み合わせで良いです)

実際私もECに関わったことがあるので、わかるのですがECのデザインはとにかく数が多いので一つ一つにこだわるよりはスピード勝負
そして、商材やユーザーは似たものなので、慣れにまかせて、考える機会を自然と減らしてしまうものです。

これはデザイナに限らず、開発/運営全体に言えるものかもしれませんが。

そういったスピードを重視したことで招いた結果だと思います。

このデザインからデザイナが学ぶこと

  • ユーザーは文字を基本読まない(読むことを前提で考えない)
  • ユーザーは自分の都合の良い風に解釈する
  • 自分の意図にかかわらず写真による印象操作は効果絶大
  • ユーザーがどんな欲求をもってそのページを見るのか考える
  • PCとスマホでユーザーがみる情報は違う
  • 「普通」と違うUIの場合は注意が必要

とかですかね。(多分もっとありそう)

書き出してみると「当たり前」と言われてしまうかもしれませんが、結構デザイナ初心者や慣れでデザインしている方は見落としがちなところかなと思いました。

デザイナはユーザーありきでページを作るもので、モノ/コンテンツだけでページを考えてしまうと色々見落としてしまうのはあると思います。

一度自分でこのページがどう作られたか、なぜこうなったか考えると非常に良い学びになりました。
デザイナ経験の浅い人にも、良い解説ができる気がします。

そしてここから一番学ぶことは「自分が良いと思ってみても、使ってみないとユーザーの反応はわからない」ということです。

誤解してほしくないのですが、私はこのデザイナがダメだとかクソとか思ってないです(本当に)
(いまでもちょっと思ってるのは、なんでこんなにユーザーからクレームがついてるのに直さないんだろうということです。これで直したあとなら…すみません)

どうすればよかったのか

色々対処法はあるのですが、私ならダサくても目立つように赤色のでかい文字サイズで「この商品はパンツのみの販売です!」とか注意喚起したり、商品名に「パンツのみ」とか追加します。

他にも使う画像組みことでと量を変えることで、印象は変えれるかなと思います。

最後に

実は今回あえて「UX」という言葉を使わずに考えました
「UX」という言葉は便利なのですが、中身が曖昧できちんとコミュニケーションをとろうとすると不適切な使い方や捉え方をするケースが多いからです(※個人の経験です)
今回はユーザーとのコミュニケーションの課題が焦点にあったので、自分も同じミスに陥らないように気をつけた結果です。
(いつも思うのですが「UXが悪良い」ってよく言う人って何が言いたいんでしょうね?わたしいつもわかんないんですよ)

今回は他の人のデザインなので、違和感に気がつけましたが自分もデザインしたもので、今でもいっぱいユーザーを誤解させて迷惑をかけているんじゃないかという不安にかられました。(自分の耳に届いていないだけで、実際はあると思います)

当たり前の事かもしれませんが、初心に返れる良い機会でした。

あらためて、デザインって一人で完結するものじゃなくて、関係者やユーザーからレビューをもらうだけで良いものに仕上がるので、もっと人の意見を取り入れやすいようにしないといけないなって思います(ゝω・)

追伸
私が女性もののパジャマを見てたからって、誤解しなくて大丈夫です。

関連記事

ロゴの価格と価値についての私の考え方... ロゴはいくらなのかというアンケートがtwitterに流れてきて、普段から自分でも思ってる疑問だったので、興味があって自分の中で深掘りしてみました。 考えだしたきっかけ こちらのツイートがきっかけです。 ロゴデザインをデザイナーにお願いしようと思った時、いくらぐらいかかるとい...
Sketchでワイヤー/デザインテンプレートを作る時に便利なUIキット... SketchはUIデザインのツールですが、ワイヤーやモックを作ときも便利です。 簡単すぎて打ち合わせの中で画面を作りながら話をすることもあります。 やはりクライアントさんと話を進めるときは対面しながら同じものを見てやれると話が進めやすいです。 本記事では、ワイヤーを作るときに私が使って...
色選び苦手な人に勧めたい、マテリアルデザインのカラーパレットの活用方法(初心者向け)... Google のマテリアルデザイン良いですよね。 特にカラーパレットがいいなと思っています。 サイトを作る際に「何色を使おう」、として色を決めても「じゃあこの色の濃いバージョン、薄いバージョン」などより複数の色が必要になってきてある程度組み合わせの検証の時間が...
ワイヤーフレーム作成用のUIパーツを作りました(DL可能)... WEBサイトを作る際に使用するワイヤーフレームのパーツ集を作りました。 Fireworksに特化して使えるようにしています。 個人・商用の利用は自由なのでディレクタさん達に利用いただけると嬉しいです。 ダウンロードする...
デザイナーなら抑えておきたい著作権の勘どころ... 著作権って名称はよく聞くけど、実際はどんなものについているのかよくわからない。 私もそんな一人です。 デザインの仕事をしていると著作権関係の話が時々聞こえてきますのでちょっと調べてみました。 制作者には自動的に著作権がある。 小説、イラスト、写真、音楽などの著作物を制作した場合は自動...
【サンプル有】日本語の明朝体で使えるWebフォント Noto Serifの使い方... 4/10はなんの日かご存知ですか? そう、フォントの日です。 本記事では2017年4月に公開となった明朝体で使えるWebフォント Noto Serifの使い方を紹介します。 とりあえず見たい方はデモを用意しているのでそちらをご覧ください。 Noto Serif CJKのデモ ...