初めまして。かけだし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全体のデザインを見直すことに。白目むいてる場合じゃない。
要素ごとの改良点を書き出してみました。

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

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

改良がんばるぞ〜！