楕円を組み合わせてアヒルを描画する課題が出されたので、androidのスケッチアプリを作成した
課題の説明
プリミティブベースの形状モデリングインタフェースの実装と評価
ユーザインタフェースを自分でデザインして実装し、それを他人に操作してもらう経験をする。
プリミティブを配置することで形状モデリングを行うユーザインタフェースをデザインして実装する。
簡単のため、２次元の楕円を配置して、位置と大きさと傾きを調整するタスクとする。
具体的には、以下のアヒルをモデリングしてもらう。
最初の実装
以下のようなUIになった。
デモ動画
５人ほどのユーザに使ってもらって意見を聞いた。
良かった点
- 手書きでできるので直感的
悪かった点
- ellipseの意味がわからない
- 線だけを書いても円ができてしまうので、そのやり方でしか円がかけないと思い込んでしまう
- 灰色になっている方が現在のモードだと思ってしまう
- ellipseの状態でタップして図形を選択しようとしてしまう
- 削除がやりにくい、どうやって消せばいいのかわからない
- 小さな図形ができたときに選択ができなくて消せない
先だけで円を描画してしまう例
小さな円を消せない例
改良した実装
新しいUI
最初の実装での問題点を修正
- ellipseという言葉を使わず、イラストで表示
- 円を書こうとしなかった場合はそもそも何も描画しないようにする
- エラーメッセージで円を書くようにフィードバックを行う
- 選択している方のモードをカラーアイコンにし、選択していない方を白黒にする。
- 描画と選択モードを同じモードに変更
- 削除用のモードを追加
- 回転のアルゴリズムを少し変更
今回の実装のデモ動画