webサイトのモックアップで意気揚々とユーザーテストした結果、白目を剥きました。テスト結果と考察、改善方法

初めまして。かけだしUIデザイナーのガラナです。プライベートでE2D3のwebサイトをデザイン中です。

【E2D3とは】Excelのデータから、インタラクティブなグラフを作成できる無料アドインソフト。有志が非営利に開発中。E2D3メンバーにより、講演会やもくもく会などのイベントも定期的に開催されている。


sketchとFlintoでwebサイトのモックアップを作成し、意気揚々とユーザーテストした結果、フルボッコになったお話。テスト結果と、考察、改良点をまとめました。


現状のサイトの構成と各要素の目標はこんな感じです。

「2. E2D3概要、3. プロダクトの一部お試し、4. プロダクト詳細」できちんとコミュニケーションが取れるかどうかが肝です。

今回は「E2D3とは何かがきちんと伝わるか」を見ました。
そのため、あえて前提知識の少ない、デザイナーでもエンジニアでもない、常識人のMさんに協力いただきました。「カタカナの名前覚えられないから、ハリーポッターが見れん」とのこと。やばい、サイトはカタカナばっかや…

「E2D3」と検索して、サイトにたどり着いた想定です。

検証開始!


1

青のグラデーションの幕が上がると、地球儀が現れます。ここは目標も達成できました。いえーい。


2

概要紹介文にダダ萎えしている…
「ビジュアライズ」や「可視化」はあまり一般的に浸透している言葉ではないですよね…わからない単語が羅列されていると、流し読みすら面倒に。この時点で離脱される可能性が高いです。もう嫌な予感しかしない。


3

dot bar chart : 各年のオリンピックと、強豪国の金メダル数を表したドットバーチャートです。オリンピック開催年度をクリックすることで、ドットがインタラクティブにピョコピョコとうつろいます。

Mさんはプロダクトの一部に触れていたにもかかわらず、E2D3概要のProduct部分を読み飛ばしていたため、Excel上で使えるという肝心のメリットに気づかないまま。ここでは「あなたもExcelのデータをこんな風にリッチに可視化できますよ!」というアピールをしたかったのに、Mさんは置いてけぼり…


3-2

みんなで徒競走:「スタート」を押すと、自分の100mの記録、ボルト、チーター、新幹線、カタツムリなどが並走を始めます。

このグラフはキャッチーでわかりやすいと評判。ボルトと自分を並走させてMさんも楽しめた様子。
「このグラフをExcelで利用する(無料)」ボタンは、まったく目に入っておらず…E2D3とExcelがまだ結びついていません。


4

Mさんの顔に「?」が浮かびまくっており、だんだん辛くなってきた。
PCのイラストの中に、Excel上でE2D3を動かしているgifアニメを見て「ああ!そういうこと!」と理解した様子。
しかし、自分には無理そう、難しそうと感じてしまい、DLまではいたらず。うう…


5

イベントや開発者募集ページは、理解はしてもらえたもののエンゲージメントには繋がらず。


そして、E2D3ウェブサイトのユーザー検証を終えたMさんから衝撃の一言。

E2D3や!!!全体的に何も伝わってねぇ〜〜〜!


本当はあと2人に検証してもらう予定でしたが、初回のMさんの結果がやばすぎたため、急遽web全体のデザインを見直すことに。白目むいてる場合じゃない。
要素ごとの改良点を書き出してみました。

ユーザーの目線になってデザインすることがどれほど大変か、身にしみました…次回は、上記の改善点を反映したデザインで、ユーザーテストをしてみます。

開発メンバーのみなさん、申し訳ないけどまた構成を少し変えます…もっと早い段階でテストするべきでした。

改良がんばるぞ〜!



この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

82

山崎あやな

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
4つのマガジンに含まれています

コメント1件

・・・動画を使った方が一般的には解かりやすい気がします。
どうしても、文字の情報は読み飛ばされてしまう事が多いので
視覚的なアイコン、マーク、イラスト等が主流という現実・・・
にしても【R2D2】を真っ先に言うという事はスターウォーズ等は
見てるのかな・・・(汗
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。