Kの技ログ

モバイルソフトウェア開発者の技術記録

行(アイテム)追加のインタフェース

薬の服用時間をアラートしてくれるアプリを製作中で、デザインも実装も自分でやっており、実装は何とかなるものの、デザインの考え方が慣れていないので難しい。今日はアプリで必要になった機能、行(アイテム)の追加のUIについて。

同じ薬でも服用タイミングが異なる場合がある

僕が薬を服用する場合は、大抵が風邪かインフルなどの季節性の病気。この場合、薬の服用期間は大体3日〜1週間くらいだと思う。朝・昼・晩の3食後に飲む場合が多いのかなという印象。だから基本的に1つの薬を服用するタイミングは1日3回とか寝る前とかかなと思っていた。
よくよく聞いてみると、中には「週2回、日曜の夜と月曜の朝」というタイミングで服用しなければならない薬もあるとのこと。お年寄りの方で、たくさん薬を飲んでいる方もいるけど、もしかしたらいろいろ複雑な飲み方をされているのかもしれない。

1つの薬に複数の服用タイミングが必要

当初は「薬Aは毎日、朝・昼・晩」とか「薬Bは週1回日曜日、寝る前」とかを想定していた。今回考える必要があるケースは「薬Cは週2回、日曜日の夜、月曜日の朝」というもの。曜日(もしくは毎日)と時間(朝・昼・晩)が1セットなので、薬Cの場合は2セット必要になると考えた。そこで、2セット以上設定できるようなUIを考える。

アラート設定画面のレイアウト

f:id:kinosi:20151106043058p:plain:w200
上記服用タイミングを設定する画面を用意する。ブログ用にデザインはざっくり作ったので適当です。
「服用設定」より下でタイミングの設定をする。曜日と時間帯を選択するだが、ここを複数個設定できるようにする必要がある。自分の解としては、最低1つは登録してもらう必要があるので、リストの一番上はデフォルトで表示。さらに、3段目のプラスアイコンから始まる行もデフォルトで表示しておき、複数設定が可能なことを示している。ここでプラスアイコンをタップして2個以上設定しようとした場合、リスト2段目のように左端に削除用のアイコンを置いておく。このように追加と削除を行えるようにした。

「保存」ボタンを上に配置

服用タイミングの設定数が少ないことを想定していた当初は、画面下部に保存ボタンを配置する予定でした。しかし複数設定できる以上、画面下部にボタンを配置するのは良くないかなと思い(画面が長くなるのと、戻る・ホームボタンなどを誤タップしてしまうのではないかと思い)、アクションバーに保存ボタンを、その隣にキャンセルボタンを配置しています。

「追加」と「削除」のアイコン

この画面のタイトルにもあるが、「新規作成」というからには、前の画面で何かしら作成を促すアイコンをタップして遷移させている。プラスの記号を使ったシンプルなアイコンを使用する予定だが、それではこの画面内のプラスアイコンと被ってしまう。これは少し変える必要があると思う。
また削除のアイコンは、この画面ではバツ印を使用している。しかし、バツ= 削除というのもしっくり来ない。ゴミ箱アイコンやマイナスアイコンを考えたが、素直に伝わるかは使ってもらってみないと分からない。

単純なアプリでも考えること多い

デザインの経験が少ないせいでもあるのでしょうが、考えるべき点が多いなと感じる。いろいろ気にしてしまうこともあるが、とにかくざっと作って、誰かに使ってもらってフィードバックをもらって修正して、というのを繰り返すのも大事だろう。