t-robop / spica-poster

プログラミング思考教育ツール ポスター
0 stars 0 forks source link

androidアプリのUI UXについて #13

Open y-ogawara opened 5 years ago

y-ogawara commented 5 years ago

なにを意識したかなど

TaigaNatto commented 5 years ago

UI

コンセプト

今回開発したSpicaのアプリケーションは、基本的には小学生に扱ってもらうことを想定しています。なので操作性や色などのUIは小学生を基準に作成しました。 デザインのコンセプトは「思考と挑戦」です。

思考

概要

小学生が「思考する・できる」ことを目的として、小学生が理解して考えながら進めていけるようなアプリケーションにしました。

ブロックを考えて置けるように

Spicaの前段階のアプリケーション「Atlas」ではブロックを押したらすぐに追加されて、連打するとぽんぽん配置できるデザインでした。これはこれで、すぐにブロックが出てくる楽しさやテンポの良さなどがあって子供達からも好評だったのですが、それと同時に問題もありました。それは、考えないでロボットを動かす子供達が何人か出てきたことです。テンポ良くブロックが配置できるということは、逆に言えば何も考えなくても連打すればロボットを動かせるということです。また、触れただけで配置できてしまうため間違えて配置されたブロックも多く、これでは子供達に伝えたいことからズレてしまっていると考え、変更しました。 今回のSpicaではブロックを配置するタイミングでブロックを選択する画面を出しています。ワンテンポ挟むことでブロックを配置することに対する「面倒さ」をあえて助長しました。これによって一つ一つのブロックを考えて配置するように促し、効率的な課題解決の思考を身に着けてもらいたいと考えました。

集中させるフローづくり

前アプリケーション「Atlas」ではブロック編集時の値変更にテキスト入力をさせていました。テキスト入力だとユーザに数値と小数点を入力してもらうため、開発的には容易に実装できます。しかし、編集時に何度も変更する項目であり、かつ間違いが直接ロボットの動きに関わってくる部分でした。小学生にこの操作をしてもらう必要はないとして、変更しました。 変更点としては、テキスト入力を完全撤廃し、ツマミをスワイプすることでロボットの動く時間を変えられ、かつ視覚的に変わっていることを分かりやすくしました。また、子供達のフローとして最終的にはロボットの動きを変更する動作を繰り返すことになるので、利用頻度からツマミを目立たせて操作しやすくしました。これらの変更によって子供達がロボットを動かすフローに集中できるのではないかと考えました。

挑戦

概要

小学生がある程度ロボットを操作することに慣れてきても、やりたいことを増やし「挑戦」していけるようにしたいと考えました。

追求しやすい環境づくり

今回は一つ一つのブロックにただロボットを操作するだけでなく、そのブロックが何をしているのかの説明を付けて何度も見る場所に配置しました。それによって子供達はふとした時にそこを読むことで、自分がいま何をしているのか、このブロックで何ができるのかを少しでも考えて追求して開発していってほしいと考えました。