web-dev-qa-db-ja.com

iOSモバイルフォームのどこに行動を促すフレーズを配置しますか?

簡単なパスワード変更フォームを用意しました。行動を促すフレーズのボタンをどこに配置すればよいか迷っています。

1つのオプション:

enter image description here

  • 大きな青い行動を促すフレーズがテキストフィールドの下に表示されます
  • 最初のテキストフィールドにフォーカスします-キーボードに「次へ」ボタンを表示して、ユーザーを次のテキストフィールドに移動します
  • 3番目のテキストフィールドにフォーカスします-キーボードに「保存」ボタンを表示します

2つのオプション:

enter image description here

  • リンク保存はヘッダーの右側に配置されます
  • 最初のテキストフィールドにフォーカスします-キーボードに「次へ」ボタンを表示して、ユーザーを次のテキストフィールドに移動します
  • 3番目のテキストフィールドにフォーカスします-キーボードに「保存」ボタンを表示します

オプション:

enter image description here

  • キーボードの行動を促すフレーズを除いて、他の行動を促すフレーズはありません
  • 最初のテキストフィールドにフォーカスします-キーボードに「次へ」ボタンを表示して、ユーザーを次のテキストフィールドに移動します
  • 3番目のテキストフィールドにフォーカスします-キーボードに「保存」ボタンを表示します

最適なソリューション:

ユーザーが行動を促すフレーズのボタン「保存」に到達するのが容易になるため、最良の解決策は最初の解決策だと思います。行動を促すフレーズがキーボード上またはヘッダーの右側にある場合、次のようにCTAに到達するのは困難です。

enter image description here

5
steppenwolf

2番目のオプションが最適で、AppleのUIガイドラインに準拠しています。自分自身の言葉で; ナビゲーションコントローラの中央にはビューの名前が含まれている必要があります。右ボタンは、何かを作成するための「+」や保存のための完了など、ビューに関連する重要なものを示す必要があります

その後、多くの一般的なアプリケーションが続きます。例えば:

instagram password change viewTwitter edit profile view

私の答えはここで終わりです、以下はあなたが使用できると思う別のユーザーフローです。

別のアプローチ:

これを少し変更したい場合は、フォームにパスワードを再入力するようユーザーに要求しないでください。フォームには、新旧のパスワードフィールドのみが含まれます。 new passwordフィールドの後の[次へ]または[送信]をクリックして、入力がconfirm passwordのモーダルボックスを開きます。このように、送信ボタンはユーザーの目の前にあり、どこにも隠されています。

これをアプリケーションで見たところ、非常に興味深いことがわかりました。あなたはそれを試すことができます。しかし、ユーザビリティの利点についてはよくわかりません。それは別の方法です。

1
leo

私は提示されたオプションのどれも選びません。 CTAが遠すぎて、提出するアクションから切り離されているため、後者の2つは問題外です。最初のオプションではCTAが2倍になり、必須コントロールを2倍にするとユーザーが混乱します。

また、「次へ」を表示する必要はありません。ユーザーは、確認の段階になると、シーケンスであり、一種のウィザードです。前の手順を完了せずに最後のステップにジャンプすることはできません。次の順序で実行できます。1。既存のパスワードを入力します。2。新しいパスワードを入力します。3。新しいパスワードを確認します。4。送信します。

他のすべてのフォームが正しく入力されるまで、保存ボタンを無効にするだけです。

enter image description here

1
Zoe K

1つ目は最適なオプションです。到達しやすく、色によって「保存」オプションの場所が非常にわかりやすくなっています。オプション2は問題ありませんが、iOSに精通していない人は、青色のブロックほど明確ではないため、ボタンをすぐに表示しない場合があります。 3つ目は、私にとって大きな問題ではありません。ユーザーがボタンを見つけるのに時間がかかりすぎます。

0
lg365

ユーザーが何をすべきかが非常に明確であり、右利きと左利きのどちらのユーザーにとっても、リーチゾーンにぴったり収まる唯一のオプションであるという点で、オプション1が好きです。オプション2を使用するフォームは、フォームの下部に到達したときにCTAが私の目ではないため、混乱することがよくあります。検索する必要があります。左利きの親指が不条理に長い場合を除いて、左利きが手を伸ばすことも困難です。 IMO、オプション3もオプション2と同じトラップに分類されます。

0
meaghancon

最初のビューは、このタイプのビューで最も予想される場所です。他の2つでは、「完了」ボタンを探していますが、すぐには見つかりません。誰かがブーブーを作ったと思います。

0
Evan Lange

2番目のオプションは他のオプションよりも少し優れていると思います。最初のものはかなり良いですが、2-3以上の入力を持つフォームがある場合、「保存」ボタンはキーボードの下に隠されます。また、iPhone 4またはAndroid電話では、ディスプレイの高さがさらに短くなる可能性があります。

0
Michal