ユーザーを引き付けるデザイン: 明確なモバイルアプリフォーム

[編集者注] この記事は@elya妞の個人ブログから転載したものです。より多くの設計者がモバイル アプリケーション フォームの特殊性を真剣に考慮できるようにし、フォーム設計エクスペリエンスを最大化し、効率を改善し、満足度を高めます。この記事では、明確な視覚的な垂直線、情報のグループ化、極端な減算、入力の代わりに選択を使用する、ラベルとテキストのレイアウト、パスワードの確認にプレーンテキストを使用する、適切なキーボードの使用、検証のちょっとした秘密など、8 つの側面からモバイル アプリケーション フォームのデザインに関するヒントを紹介します。

1. 明確な垂直視線

ユーザーが情報を閲覧する際、強調する要素が足りないと、上から下、左から右へと閲覧することになります。Web 側は「F」字型の視線で、モバイル側は「L」字型の視線（ナビゲーションや重要な操作は下部にあることが多い）になることが多いです。そのため、フォームの視覚的な閲覧順序がこの「L」字型のルールに合致していれば、基本的にユーザーの心理的な期待に応え、検索や思考の必要がなくなり、フォーム項目の記入と送信が簡単かつ効率的に完了します。

これは、ログイン フォームの視覚的な垂直線の例です。ユーザーは最初にユーザー名入力ボックスに注目し、次にパスワード入力ボックスに注目し、その後自然にログイン ボタンを見つけます。

次の 2 つの例のように、否定的な例も多数あります。

最初の反例はより一般的です。ユーザーがユーザー名とパスワードを入力した後、直接表示されるアクション ボタンは「ログイン」ではなく「登録」です。この左右レイアウトでは、色分けを使用しても、ユーザーの目が「登録」ボタンに落ちるのを防ぐことはできません。したがって、簡単な視線移動テストを行うと、ユーザーが「登録」ボタンを見つめて考えるのを止めざるを得ないことがわかります。

2番目の反例は、フォームラベルとフォームの相関関係があまり良くないため、より顕著です。ユーザーはまずフォームラベルの内容を読んでから、入力ボックスのガイドテキストの内容を読む必要があります。視線は左→右→左→右と進んでおり、十分に親切ではありません。最後に、送信するときに、視線全体を右上隅に移動してログインボタンを見つける必要があります。もちろん、iPhoneのデザインに挑戦しているわけではありません。グローバル操作バーにこのような操作バーがある場合は、フォーム項目を右上隅に送信しても問題ありませんが、これはキーボードが送信ボタンをブロックする場合にのみ適用されます。

2. 情報のグループ化

フォーム項目は単純に上から下にリストアップするのではなく、整理する必要があります。同じ種類のフォームはまとめることができます。フォームが長すぎる場合は、複数のグループに分割できます。このように、ユーザーがフォームに入力するときに、タスクの分解に似ており、グループでフォームを完了できます。

ログインと登録はまったく異なる目的なので、レイアウトで明確にグループ化します。ユーザーがログインしたい場合は、フォームに入力するだけです。ユーザーが登録したい場合は、登録ボタンをクリックして新しいインターフェイスに移動し、操作を完了する必要があります。

記入の際、自分の考えを全部羅列すると当然負担が大きくなりますが、グループごとに2～3項目ずつ記入すると負担が軽減されます。

3. 究極の引き算

不要な情報を削除するだけです。本当に必要だが頻繁に使用されない情報は、特定の入り口を通じて隠したり追加したりすることができます。

ユーザーに基本的な情報のみを入力させたい場合は、他のすべての情報をアドイン エントリに非表示にして、ユーザーが必要なときに見つけられるようにすることができます。

4. 入力ではなく選択を使用する

モバイル アプリケーションの入力コストは非常に高く、特にタッチ スクリーンでは、入力効率と精度に改善の余地が大いにあります。この場合、入力する必要があるコンテンツを最小限に抑え、入力ではなく選択を使用するようにしてください。簡単に言えば、性別、生年月日、都市などのコンテンツはすべて選択の形式で送信できます。

もちろん、入力の代わりに選択を使用できる、入力候補に関連するシナリオもいくつかあります。たとえば、ユーザー名を登録すると、システムからユーザー名の候補がいくつか表示され、選択できるようになります。また、自分自身にタグを付ける場合は、よく使用されるタグが表示、選択できるようになります。

メールアドレスを入力すると、よく使うメールアドレスの候補を表示してくれます。ただし、よく使うメールアドレスはたくさんあるので、候補が多すぎてスクロールしなければならないと非常に煩わしいので、候補は表示しない方が良いでしょう。したがって、提案をトリガーするタイミングを合理的に定義できます。たとえば、@ の後の最初の文字を入力した後、基本的に「h」は基本的に hotmail を意味し、「g」は基本的に gmail を意味するなど、少数のメールボックスを基本的にロックできます。

5. ラベルとプロンプトテキストの配置

モバイル アプリケーションのインターフェイス スペースは限られていますが、フォーム項目には、フォームの種類を示すラベルを付けたり、プロンプト テキストでフォームの形式を示すラベルを付けたりすることがよく必要になります。では、情報の表示を最もわかりやすくするには、ラベルとプロンプト テキストをどのように配置すればよいのでしょうか。

利点: 視線は常に垂直下向きになり、入力時にキャプション テキストが遮られません。

デメリット: 1 インチのスペースも貴重な携帯電話の画面では、このレイアウトは貴重な垂直スペースを占有しすぎます。キーボードが上がって視界を遮ると、基本的にすべてが失われます。

利点: 各フォーム項目の入力を迅速に処理し、視覚的な垂直線に適合させることができます。

デメリット: 貴重な垂直スペースを占有します。

利点: 基本的に上記の垂直方向のスペースを占有する問題を解決します

デメリット: デメリットは、やはり横方向の視覚の不安定性です。

利点: 垂直視線の問題を解決し、垂直画面スペースを節約し、要素が比較的安定します。

これが最高の配置です。

6. パスワードの確認にはプレーンテキストを使用する

多くのアプリケーションでは、登録時に、誤操作を防止したり、間違ったパスワードを入力してログインできなくなることを防ぐために、パスワードを 2 回入力する必要があります。しかし、この問題を防ぐために本当にパスワードを 2 回入力する必要がありますか? この問題を回避する他の方法はあるのでしょうか?

実際には、パスワードを 2 回入力する以外にも、次のような方法があります。1. 最後の桁をプレーン テキストで表示する 2. すべてプレーン テキストで表示する 4. デフォルトの暗いテキスト、オプションでプレーン テキストを表示する 5. デフォルトの暗いテキスト、オプションで暗いテキストを表示する 6. ダイアログ ボックスで、パスワードが正しく入力されたことを確認します。 小規模なユーザー調査では、デフォルトのプレーンテキストとオプションの隠しテキスト形式が最も受け入れられていることがわかりました。

入力ボックスには隠しボタンがあります。クリックすると暗いテキスト表示に切り替わります。

7. キーボードの適切な使用

1. キーボードの種類と呼び出し

テキスト ボックスの種類によって、呼び出すキーボードが異なります。たとえば、URL 入力ボックスでは、URL 入力キーボードを呼び出して、.com を便利かつ迅速に入力できます。純粋な数字入力ボックスでは、数字キーボードを呼び出すことができます。電話番号入力ボックスでは、数字に加えて *#+ も入力できる電話番号キーボードを呼び出すことができます。名前の中国語入力ボックスでは、中国語キーボードを呼び出すことができます。電子メール入力ボックスでは、電子メールキーボードを呼び出して、@ を簡単に入力できます。

ただし、ここで注意すべき点が 1 つあります。テキスト ボックスを数値入力ボックスとして定義すると、数値キーボードを呼び出すことはできますが、入力ボックスは浮動小数点倍精度数しか認識しません。つまり、「0123」と入力すると、「123」などの自然数としてカウントされます。検証コード入力ボックスとして使用する場合は、0 を補完するためにフロントエンドまたはバックエンドの処理を実行する必要があります。ここで言及しておかなければならないのは、iPhone でパスワード保護を設定している場合、4 桁のパスワードを入力すると、1 つのボックスではなく 4 つのボックスが表示され、純粋な数字キーボードが呼び出されるということです。これで、その理由がわかりましたね。

もちろん、iPhoneだけでなくAndroidでもキーボードの種類を定義できます。

これはあくまでも大まかな調査です。実際にはテキストボックスやキーボードの種類は多岐にわたるため、具体的な状況に応じた分析が必要となります。たとえば、確認コードが完全にデジタルでない場合は、数字キーボードを呼び出すことはできません。

2. キーボードのファンクションキー

キーボードの右下にあるファンクション キーを定義できます。フォームに入力するとき、この機能キーは PC のタブ キーに少し似ています。フォーム項目を下方向に切り替える役割を果たします。最後のフォーム項目にあるとき、この機能キーは対応する操作になります。

例えば、ログインフォームでは、カーソルはユーザー名ボックスにあり、次の項目は右下隅にあります。フォームの最後の項目にフォーカスがあるが、入力されていない必須項目がある場合は、ボタンはグレー表示され、クリックできません。必須項目がすべて入力され、フォームの最後の項目にフォーカスがある場合は、操作ボタンをクリックできます。このとき、操作ボタンは青色でなければならないことに注意してください。

3. キーボードのアクションバー

フォームに 3 つ以上の項目がある場合は、基本的にキーボードにアクション バーを追加することを検討できます。このアクション バーは、ユーザーが前の項目や次の項目に切り替えたり、キーボードを閉じたりするのに役立ちます。最初のフォーム項目にフォーカスがある場合、前の項目はグレー表示され、クリックできません。

8. 検証の小さな秘密

1. 垂直検証シーケンス

フォームの内容がフォーマット要件を満たしているかどうかを確認するときは、上から下の順番に確認してください。

例えば、このフォームは、1 ユーザー名 -> 2 パスワード -> 3 携帯電話番号 -> 4 メールアドレス -> 5 性別の順にチェックする必要があります。ユーザー名の形式が正しくない、ユーザー名が重複している、ユーザー名がブラックリストに登録されているなどの問題は、最初にリマインダーされます。ユーザー名に問題がなければ、パスワードがチェックされます。パスワードに問題がなければ、携帯電話番号がチェックされます...これにより、エラーリマインダーが確実に見つかり、従うべきパターンがあることが保証されます。

2. 即時検証フィードバック

理想的な状況は、フォーム全体に入力して送信し、その後で修正が必要な点を通知するのではなく、フォーム項目の入力が完了すると、システムがその項目が正しく入力されているかどうかをすぐに通知してくれることです。ウェブ上では、即時検証フィードバックはすでに非常に一般的ですが、モバイル デバイスでは、即時検証にはまだ時間がかかります。主な理由は、即時検証がネットワーク速度によって制限されることです。ネットワーク環境が良くない場合、検証に長い時間がかかり、進行中の次のフォームの入力に影響する可能性があります。

米国と日本のモバイルインターネット速度は、中国よりも優れています。Twitter と Evernote のモバイルクライアントは、フィードバックの問題に対してすでにインスタント認証を採用しています。ただし、中国で使用する場合、エクスペリエンスは特にスムーズではありません。おそらく、中国でモバイルフォームのインスタント認証が利用できるようになるまでには、もう少し時間がかかるでしょう。

実際、明確な視覚的な縦線、情報のグループ化、極端な減算、入力の代わりに選択を使用する、ラベルとテキストの配置、パスワードの確認にプレーンテキストを使用する、合理的なキーボードの使用、検証の小さな秘密に加えて、明確な手順、ユーザーの声、モバイル端末での特別なシナリオ、合理的な指示、タイムリーなフィードバック、アンカーポイントの固定、アクションのアクティブな場所、提案の提供、制限の提供、適切なヘルプ、タブのデザイン、色による情報の伝達、ステップバイステップのフォームなど、書かれていない秘密が数多くあります。

オリジナルリンク: モバイルアプリケーションフォームのデザインのヒント

(この記事は、Warlial が Leifeng.com に提供したものです。転載の際は、出典として Leifeng.com と著者を明記し、このページにリンクしてください)

元のタイトル: ユーザーを魅了するデザイン: 明確なモバイル アプリ フォーム

キーワード: 把握、ユーザー、明確、モバイル、アプリケーション、フォーム、エディター、この記事は、@e、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化から転送されています