web-dev-qa-db-ja.com

フォームのエラーメッセージ用のスペースを作成する必要がありますか？

フォームを含むiOSとAndroidの両方のモバイルアプリを設計しています。フォームには、ユーザーが続行する前に入力する必要があるいくつかの必須入力フィールドがあります。

ユーザーが必要なすべてを入力する前に[続行]をクリックすると、フィールドの下にエラーメッセージがポップアップ表示されます。これまでのところすべて大丈夫。

しかし、私のチームのiOS開発者によると、レイアウトに何かを表示して残りのコンテンツを押し下げることは不可能（または少なくとも難しい）です。これはAndroidでは明らかに問題ではありません。

私はiOS向けの開発について十分な知識がなく、iOS開発者のためのまともな代替案を見つけるのに苦労しているので、私の質問は次のとおりです。

  • IOS向けに開発する場合、これは本当に問題ですか？
  • 表示する前に、入力フィールドの下にエラーメッセージ用のスペースを確保する必要がありますか？
  • コンテンツを押し下げない、エラーメッセージを表示する他の良い解決策はありますか？

enter image description here

これが私の問題を紹介するスクリーンショットです。エラーメッセージ用にスペースを予約する例も作成しましたが、要素全体の間隔がアプリ全体で一貫していない場合は、要素間に多くのスペースを設けるのはあまり見栄えがよくないと思います。

user-expectationinput-fieldserror-messagevalidation
12
NBK

@colmcqに同意しません。エラーメッセージ用のスペースを与えることは、ケースの10％のようになるかもしれませんが、まったく良い選択肢ではありません。

実際、オプション2で示したように、フォーム検証メッセージを表示することは不可能でも困難でもありません。多くのアプリはその方法のみを使用します。

参照
-開発者チームに、stackoverflow.comまたはdeveloper.Appleで簡単な方法を確認するよう依頼してください
-役立つ情報がここにあります： https://www.davidbritch.com/2017/03/validating-user-input-in-xamarinforms-iv 。

ここに新しい直感的なフォーム検証があります： https://github.com/adamwaite/Validator

4
Kishan

入力フィールドの下にエラーメッセージを表示することは、最も一般的な方法の1つです。Googleの Material Design もこの方法の使用を推奨しています。

IPhoneでは、これらのエラーメッセージを表示するためにさまざまな方法が使用されます。それらのいくつかを以下に示します。

  1. ユーザーが必要なすべての入力フィールドに値を入力した場合にのみアクションボタンを有効にします-eg。 Whatsapp

    enter image description here

  2. アプリのナビゲーションバーの画面上部にトーストを表示します-eg。ミントラ

    enter image description here

  3. エラーメッセージを画面上部のナビゲーションバーの下にバナーとして表示します-eg。インスタグラム

    enter image description here

  4. 余分なスペースを取らずに入力フィールドの下に短いエラーメッセージ（主に1行）を表示しますつまり、メッセージはフィールドの下の使用可能なスペースに表示されるため、フィールド間の分離は、画面の無神論を傷つけません-eg。 BookMyShow

    enter image description here

3
Akhil Ashok

スペースのあるデザインは、2つの理由から理にかなっていると思います。

  • エラーメッセージが表示されてもレイアウトがジャンプしない
  • 余白が多いほど、デザインが雑然として見えなくなります

だからオプション3で行く

0
colmcq

最後のプロジェクトでは、ツールチップを使用してエラーメッセージを表示しました。その理由は、長い形式を使用し、表示されたエラーメッセージが論理コンポーネントを分割する空のスペースを作成したためです。

インスピレーションのために：ツールチップを反応させる- https://react-tooltip.netlify.com/

0
Matus William Horecny

Material Design Guidelines をご覧ください。クラシックスタイルを使用しているとのことですが、同じソリューションを適用できます。

テキストフィールドの入力ヘルパーテキストは、ユーザーがフォーム上の各フィールドを操作する前、操作中、または操作後に含めることができます。

ユーザーがフィールドを操作した後にのみエラーテキストを表示します。ユーザーが誤ったデータを入力すると、ヘルパーテキストがエラーテキストに変換される場合があります。

フォームのテキストを最小限に抑えます。すべてのテキストフィールドにヘルパーまたはエラーテキスト、あるいはその両方が必要なわけではありません。

仕様：

テキストフィールド間およびエラーテキストの下に16 dpの垂直方向のスペースを配置します。

enter image description here

enter image description hereenter image description hereenter image description hereenter image description here

0
Madalina Taina