web-dev-qa-db-ja.com

モバイルフォーム-保存ボタンとキャンセルボタンを配置する場所

レスポンシブウェブサイトを作成しています。サイトにフォームがあり、どのタイプの保存ボタンとキャンセルボタンをどこで使用するかわかりません。次の変数を使用して、図に示すようにいくつかのパターンを見つけました。-ボタンの位置(上/下、水平/垂直)-自動保存/保存ボタン-上のボタンのタイプ(テキスト/アイコン)

Action buttons input form mobile site

どのソリューションがベストプラクティスですか?

ユーザーは通常、フォームを上から下に記入し(この場合)、下部にあるボタンをサポートしますが、慣例として、上部のボタンを代弁する場合があります。または、上部のボタンは、モバイルサイトのナビゲーションではなく、(ネイティブ)アプリのナビゲーションに属していますか?画面の領域をめぐる戦いでは、ボタンの水平方向の配置(キャンセルして保存)が必要ですが、左利きの人をサポートする場合は、垂直方向の配置が必要です。キャンセルボタンを省略して、上部または背面のボタンの十字でこの機能を十分にカバーできますか?

2
Avadeha

この記事はあなたの質問に非常によく答えていると思います:
アクションバーに配置されたフォームボタンが表示されない理由

enter image description here

フォームに記入すると、目がページの上部から下部に移動します。
彼らがそれを完了すると、彼らの目はページの下部にあります。送信ボタンがないと、フォームの入力方法がわかりにくくなり、混乱します。

この答え でも指摘されていますが、これはZパターンで読んだことを示しています)

もう1つの重要な要素は、右上の「保存」ボタンがないと、ユーザーが保存し忘れることがあるためです。

ユーザーは設定を選択した後、戻るボタンをタップする傾向があります彼らは保存する必要があることに気づいていない。保存ボタンはタスクの主要なアクションですが、隅のチェックアイコンとして非表示になっています。


通知が重要なCTAをカバーしている可能性があるという別の懸念があるかもしれません iOS通知が私の結婚を台無しにしている理由

enter image description here


したがって、全体として、これらのボタンを下部に配置することには、多くの利点があり、画面のスペースが少し増える代わりにユーザーに安全性を与えると言えます。

3
Big_Chair

Luke Wroblewskiのモバイルフォームとウェブフォームのデザインに関する本は10年前に出版されましたが、読む価値はあります: https://www.lukew.com/ff/

上記の答えに同意します。ページの下部にある大きくて明確なボタンは、ヘッダーに配置されたコントロールよりも優れています。

両方持ってもらえますか?ページの下部にあるヘッダーおよびのコントロールを複製しますか?

私が尋ねる理由は、私は今より多くの単一画面の質問/フォームを見て、それらのヘッダーコントロールがすぐに見えるということです。

0
RobC