〜使いやすいデザインとは〜 ブロンクスの高校生から学んだこと

1 2

6時間目を告げるチャイムが鳴り、生徒たちはコンピュータ室の席に着く。 今度のNBAバスケットボールはどこのチームが優勝するかとにぎやかに雑談しながら、彼らはこの日のプレゼンテーションのためにCacooにログインした。

From ジャパン  To ブロンクス

先週ヌーラボNYチームは、ニューヨーク市ブロンクス区にある公立高校「Bronx Academy for Software Engineering 」(以下BASE)を訪れ、ブライアン先生率いる10年生(日本でいう高校1年生)のコンピュータサイエンスのクラスで、「デザインチャレンジ」なるものを行いました。

BASEとは、低所得ファミリーの学生のために作られた学校で、2013年に創立。4学年にまたがって、コンピュータプログラミング、ソフトウェアデザイン、アプリ開発などのIT教育を行っています。ブライアン先生が担当する生徒数50人で、2年後には彼らがBASE初の卒業生となる予定です。

アメリカは夏休み明けの9月が新学期。その学年最後のデザインチャレンジとして、私たちヌーラボチームはこの50人の生徒をコンサルタントとして“雇う”ことにしました。「教育の場で活用してもらために、どうしたらCacooをもっと使いやすいツールにできるか」という課題を解決してもらうためです。

前の週にも私たちは学校を訪れ、生徒らにはデザイン思考過程を参考に、使いやすいUIデザインとは何かについて考えてもらいました。

まずチームに分け、起床後に何をするかというフローチャートを、チームごとにCacoo上で作ってもらいました。そして、Cacooをもっと使いやすくするにはどうしたらいいかについて各チーム内でヒアリングを行い、その内容を元にCacooのデザインを作り直すという課題を与えたのです。

彼らに与えた期間は1週間。まさに2度目の訪問となったこの日は、彼らのプレゼンテーションの日だったのです。

2 2

使いやすさの鉄則No1: 考えさせないこと

著名な情報アーキテクトでありユーザーエクスペリエンス専門家のスティーブ・クルーグ氏(Steve Krugg)はしばしば、このような質問を受けると言っています。

「使いやすいウェブサイトにするには、何が一番大切ですか?」

クルーグ氏はこう答えるそうです。

「答えは簡単だ。『大切なのは2回以上クリックさせないことだ』とか『ユーザーと同じ目線で話せ』とか『矛盾を作るな』とか、そういうことではない」

「それは…『考えさせない』ことだ」

生徒たちのプレゼンテーションを聞きながら、彼らも分かりやすさや見つけやすさといったクルーグ氏が言ったようなことを、私たちに伝えようとしているのだと感じました。

1回目の訪問時、生徒たちがフローチャートを制作しようとCacooエディターを開いたとき、多くの生徒が混乱している様子でした。なぜなら、ステンシルがどこにあるのかすぐに見つけられなかったからです。何人かの生徒はこのように言っていました。

「僕たち(英語圏の人)は左から右に読むから、自然にまず左側を見たんだ。でもそこには何も見あたらなかった。慣れるのに最初は少し時間がかかった」

そして彼らがステンシルを見つけて制作をはじめようとしたところ、今度は次の問題が。

「上に配置されているボタンが小さくて見えづらいのと、各ボタンの配置も近過ぎるね。どのボタンを使っていいのか、ちょっと分かりづらいなぁ」

ボタンのアイコンが分かりにくいね。例えば『i』マークは普通「info」とか「help」を意味するから、Cacooを使ったことがない人はそれが『inspector』(インスペクター)を表すとはまさか思わないだろう。そうなると、インスペクターの中に入っているたくさんの編集ツールも見つけられないということになる」

Cacooエディターが初心者にとって使いづらいようで、生徒たちはCacooを実際に使いながらやや混乱しているようでした。

さて、1週間後のプレゼンテーションでは、全部で15チーム以上が発表したのですが、その中で特に2つのチームのアイデアや発表の仕方がズバ抜けていました。この2チームは特にユーザー側の利便性をよく考えて、私たちがこのデザインチャレンジの冒頭で掲げたどうしたら、Cacooをもっと学習の場で使いやすいツールにできるかという課題に対して、大変ユニークなアイデアを発表してくれました。

この2チームは自分たちのアイデアを分かりやすいモックアップにまとめ、新しいCacooエディターのデザインを見せてくれました。そしてそれは、多くを考えさせない、つまり使いやすさを考えたものだったのです!

プレゼンテーション後、生徒にはCacooの改善点をメモに書いて提出してもらったのですが、誰一人として豪華な機能やにぎやかなアニメーションなどについては触れていませんでした。彼らの提案は、本当にちょっとしたことでした。

例えば、ステンシルパネルを見つけやすくするために、現在の右側の位置からトップもしくは左側に移動してはどうかとか、もっと見やすくなるように、トップのボタンのサイズを5-10ピクセルぐらい大きくしてはどうかとか、ボタンとアイコンの間のパディング幅を広げてはどうかとか、どこの国でも分かりやすいようにユニバーサルアイコンを増やしてはとか、そういったことですこれらのフィードバックを生かすことができたら、多くのユーザーにとってもっともっと使いやすいツールになるでしょう。

一生懸命に考え素晴らしいアイデアを出してくれたことを讃え、この最優秀2チームには、景品として新学期に使ってもらえそうなリュックサックと筆記用具、そして夏休み中に勉強できるようJavaプログラミングの解説本を贈りました。

私たちヌーラボチームは、生徒一人ひとりからたくさんのことを学び、この2日間楽しく過ごすことができました。笑顔と楽しい思い出の余韻を残しながら学校を後にしました。

ではまた次回、

ニューヨークから愛をこめて。

3 2

4 2

Photos & Japanese translation:Kasumi Abe

チームのアイデアを、いつでもどこからでも視覚的に共有しよう