web-dev-qa-db-ja.com

iOSマルチステップフォームとユーザー入力の検証

3つまたは4つのステップで構成されるフォームをデザインする必要があります。すべてのステップで必須データとオプションデータの両方を要求します。フォーム全体には多くのデータ入力が含まれているため、縦方向のスクロールが長すぎないように、フォームをページまたはステップに分割することをお勧めします。

既存のiOSアプリでは、そのような長い形式の実用的な例は見つかりません。それらのほとんどは、アカウントを作成するために数個のデータを要求するだけですが、私のアプリはより多くのユーザー入力を収集する必要があります。

各フォームステップのビューを作成し、それらをすべてナビゲーションコントローラにプッシュするのは良い方法でしょうか?

ナビゲーションバーに戻るボタンを配置して前のステップに移動できるようにすることと、「次へ」ボタンを使用して進むことを目的としています。ナビゲーションバーにも配置するか、下部のエッジに配置するかはわかりません。現在のビューの。または、メールアプリのような矢印の付いたステッパーを使用できますか? iOSヒューマンインターフェイスガイドラインでは、それについて何も見つけることができませんでした。+ /-ボタン付きのステッパーだけです。または、ステップごとのセグメントを持つセグメント化されたコントロール?

ただし、iOSヒューマンインターフェイスガイドラインのナビゲーションバーセクションでは、「情報階層を介したナビゲーション」を意図していると読みました( iOSヒューマンインターフェイスガイドライン )。 AppleがドキュメントのガイドラインをApp Storeに送信するときに適用する場合、どのように厳密であるかわかりません。この方法のように、ピアビューにこのアプローチを使用すると、拒否されます。別のオプションとして、ページコントロールとスクロールビューを使用していたと考えましたが、ここでは入力の検証を行います。長いマルチステップフォームの場合は、続行する前に各ステップの入力を検証する方がよいと思います。最初のアプローチ(ナビゲーションコントローラーとバー)でこれを処理する方が簡単だと思います。ページコントロールアプローチ(実際にそれがわからない場合)よりも、入力が正しく満たされたときに「次へ」ボタンを有効にするだけです。ページの順方向スクロールを一時的に無効にすることができます)。

4
AppsDev

上部または下部の[次へ]ボタンについて:両方を実行してください!

特にいくつかの部分を検証してから他の部分に進む必要がある場合は、それを複数のステップに分割することをお勧めします。その場合、ステッパーまたはカスタムナビゲーションバーで[次へ]ボタンを無効にする必要があります。

IOS以降では、[戻る]ボタンは左上隅にあります。ここで、対応する「進む」または「次へ」ボタンをどこに配置しますか?

ナビゲーションバーの両方のボタンを上にしておくと、ページを簡単に切り替えることができます。ユーザーがページ間を行き来することを期待している場合は、そこに配置します。

ただし、フォームの上から下に向かって作業すると、次のボタンを下に配置するのが自然になります。ユーザーが各入力フィールドに上から下に1つずつフォーカスすることを期待する場合は、次のボタンを必ず下に配置します。画面に収まるページよりも高いページがある場合は、さらに高くなります。

また、続行する前に検証を明確にする必要がある場合、有益なテキストは、ナビゲーションバーの上部にあるよりも、下部の[次へ]ボタンの方が適切です。

例:左:スクロール可能なビューの上下にナビゲーションがあるスクロールビュー。真ん中:補足として、[次へ]ボタンをクリアし、ページの最後で待機します。右:検証。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

5
JOG