iPhoneアプリで連続してデータを入力する画面レイアウトを考えてみる (後編)

iPhoneアプリ開発

連続入力画面後編1

前回に引き続き連続してデータを入力するiPhoneアプリの画面レイアウトを考えていきます。

iPhoneアプリで連続してデータを入力する画面レイアウトを考えてみる(前編) | Simple gadget life
もう一度自分の中で必要な要件を整理してみました。

・入力項目はタイトル、時間、通知の音の3つ。ユーザーによる必須入力項目は時間のみ。
・できるだけ指を動かすことなく連続してデータを入力していきたい。
・同じ条件のデータを簡単に複製したい。(例.2分間のタイマー設定で通知音パターンAのデータを10個作成する場合など)
・これまでに入力したデータは同じ画面内で確認出来たほうがよい。 (任意)
・できれば編集、並び変え、削除も同じ画面内で行いたい。 (任意)

小さな画面でこれら全てを満たそうとすると中途半端なものになりがち。
それは理解した上でもう少し考えてみました。

まずは任意の要件を一度除外した画面設計。

連続入力画面後編2

こちらはよくある画面の構成で、データの一覧の画面とタップした先にある詳細画面。

この場合、犠牲になるのが過去に入力したデータの一覧確認。
詳細画面から一覧画面にもどれば良いのですが、その場合入力したデータが消えてしまったりとユーザーにとって好ましくない状態が生じます。

それを解決するために、先日購入したモバイルデザインパターンの本を参考にレイアウトを考えてみることに。参考にしたのが以下のパターン。

2-4 Multi-Step (複数のステップ)
この問題へのシンプルな解決策としては「概要」あるいは「詳細」のようなボタンを常に表示するといったものが考えられます。 (AudiのiOSアプリの例)

1.2.1 Side Drawer (サイドドロワー)

データの複製、削除、並び変えは一覧画面、入力は詳細画面と役割ははっきりとしています。
詳細画面の左下にドロワーの開閉ボタンを配置して一時的にこれまでに入力したデータを閲覧できる機能を備えています。
データの複製はCOPYボタンを押すと新たにポップアップで画面が現れ、個数を入力できる仕組み。

連続入力画面後編3

今までの自分であれば、これで良しとしてましたが、今回はもう少しこだわります。
利用者が手軽に「連続して」データを入力するという当初の目的に立ち返った時に、それを満たせてるようには思えません。

 

再度考えなおしたのが以下の下書きと画面レイアウト

連続入力画面後編4

連続入力画面後編5

1周回って一番はじめに考えたような画面ですが、連続入力がし易いように工夫を施しています。
モバイルデザインパターンの本から参考にしたのは以下の部分。

2.2 Registration (登録)
登録のためのフォームでは入力フィールドの数を最小限に抑えるべきです。
(中略)
UXコンサルタント兼著述家のChui Chui Tanは重要な意味のない要素は思い切って削除するようすすめています。

2,5,3 ショートカットで時間を節約
「連絡先から住所を取り込む」のような選択肢を用意し、請求先や配送先を簡単に入力できるようにしましょう。

全体的なイメージとしては、LINEのようなチャットアプリをイメージしてもらえるとわかりやすいかと思います。1画面で履歴を確認しつつ、登録が行える。そこに編集と削除機能を加える。

必須で入力するのは時間の項目のみ。
であれば、その部分に特化した入力フォームにしようと考えました。
画面下には時間入力がもっとも早く行えるテンキーを標準で配置。数字入力とEnterキーを押せば連続して入力できるような画面です。
音のパターンとタイトルに関してはデフォルトで値が設定されており、それぞれテンキー横のボタンを押せば編集が可能となる仕組みです。

データの複製は該当の登録内容部分を長押し、またはこの後編の1つ目のパターンで記載したCOPYボタンを押すことによって新たにポップアップが現れて個数を入力できる仕組みを使います。

最終案ではひと通りやりたいこと(要件)を満たすことが出来ました。
この案で開発を進めていこうと思います。