1

いくつかの入力を評価するユーザビリティの問題が少しあります。

私のサイトの最初のページには、ユーザーがログインするためのコントロールと、新しいユーザーがアクティブ化するためのコントロールの2つのグループが含まれています。

問題は後者にあります。ユーザーがサービスにサインアップすると、XXXX-XXXX-XXXX-XXXXの形式のアクティベーションコードを受け取ります。現時点では、これを4つの別々のテキストフィールドに入力する必要があります。これにJavaScriptを追加して、テキストフィールド間を単一のコントロールであるかのように自動的に前後に移動します(これは非常にうまく機能します)が、問題は、ユーザーがデータをそこに貼り付ける方法がないことです。これは少し苦痛です。

これは大きな問題ではありませんが、私のサイトを初めて体験する人は少しイライラするものであり、アクティベーションコードを含む電子メールと私のページの間を行ったり来たりする必要があることを意味する可能性があります。それは明らかに最適ではありません。

この時点で、明らかに明白な答えは、アクティベーションコードを1つのテキストフィールドに入力することだと考えているでしょう。そして、あなたは正しいでしょうが、これを行うと、1つの非常に重要なことが失われます。1つのフォームと他のフォームの間の主要な視覚的差別化要因を失います。何かを分析します。現時点では、事実上、ページには2つの異なる形状の穴があり、ユーザーデータは明らかにそのうちの1つにしか適合しないため、ある程度、どちらの形式がそれらに関連するかは簡単です。

それで、誰かがこれに対する良い解決策を持っていますか?唯一の制限は、すべてのコントロールを1つのページに保持する必要があるということです。

助けてくれてありがとう。

編集:

これまでのすべての入力に感謝します。そのすべてのビットが貴重でした。私は現在、最善の解決策は単一のものではなく、実際には全体をより使いやすくするためのさまざまなアプローチの融合であると考えています。

その上で、あなたのすべての提案に基づいて、これが私がやろうとしていることです:

  • 購入メールで、クエリ文字列にアクティベーションコードが含まれるように、最初のページへのリンクを設定します。これを確認するために最初のページを設定し、それらをまっすぐに転送します。これはおそらく、大多数のユーザーが最初のページを見ることさえできないことを意味しますが、それでも人々が他の手段でコードを受け取り、直接入力しなければならない場合があります
  • インラインラベルとして「XXXX-XXXX-XXXX-XXXX」を使用して、4つのテキストフィールドを1つのテキストフィールドに変換します。
  • エラー画面にダンプするだけでなく、誤ってアクティベーションコードをここに入力したユーザーを転送するように、ログインコントロールを設定します。

そもそもなぜそれを含めなかったのかはわかりませんが、現在の実装を確認したい人のためのURLは次のとおりです(イタリア語であるという事実を許さなければなりませんが、何が何であるかはかなり簡単なはずです)。

私が使用しようとしているもののほとんどを含むブライアンに答えを与えました。私が必要な評判を持っていれば、彼らがすべて助けてくれたので、私はあなたのすべての答えに投票するでしょう。再度、感謝します。

4

3 に答える 3

1

ユーザーが2つのテキストボックスを混同するという問題があるように思えますが、1つのテキストボックスを4つに分割することでさらに悪化しています。たとえば、フィールドを自動タブで移動するのは使い勝手が悪いです。「<a href="https://stackoverflow.com/questions/1959398/moving-a-focus-when-the-input-text-field -reaches-a-max-length / 1959579#1959579">入力テキストフィールドが最大長に達したときにフォーカスを移動します。」

これが架空の問題ではなく、実際に人々が間違ったフィールドを使用しているのを観察したと仮定すると、フィールドを混乱させるユーザーのための別の解決策を見つける必要があります。

  • 簡潔なフィールドラベルを使用します。「サインアップ時に送信した電子メールから16文字のダッシュで区切られたアクティベーションコードを入力してください」ではなく、「アクティベーションコード」フィールドにラベルを付けます。アクティベーションコードの入手先を説明するために必要なテキストは、テキストボックスの後にある必要があります。

  • テキストボックスの外側にキューテキストまたはグラフィックデザインを使用して、4つのサブストリングがあることを示します。たとえば、テキストボックスの下に「XXXX-XXXX-XXXX-XXXX」と入力します。

  • ページから無関係な要素をすべて削除します。ページ上のグラフィックやテキストの邪魔になるものが多いほど、2つのテキストボックスの違いがわかりにくくなります。

  • ユーザーがどのテキストボックスを使用してもかまわないようにします。[ユーザー名]テキストボックスに入力した文字列がどのユーザー名とも一致しない場合は、アクティベーションコードと一致するかどうかを確認し、その逆も同様です。

  • アクティベーションコードのテキストボックスを削除します。代わりに、アクティベーションリクエストを送信するときに、パラメーターとしてアクティベーションコードを含むサインアップURLを含めます(詳細については、bryanjonkerによる回答を参照してください)。

申し訳ありませんが、これはおそらくコメントであり、回答ではありませんが、適合しません。

于 2010-01-29T14:49:19.817 に答える
1

貼り付けた文字列を4文字のブロックに切り刻むonpaste関数をJavaScriptで記述し、それらをdomを介して適切なテキストボックスに書き込むことができます。

于 2010-01-28T15:55:39.433 に答える
1

いくつかの簡単なオプション:

  1. アクティベーションコードを送信するときにクエリ文字列を変更するだけで、同じ物理ページを維持できます。クエリ文字列が使用可能な場合は、1セットのコントロールを非表示にします。両方のセクションを表示する必要がある場合は、クエリ文字列情報に基づいて1つのセクションをグレー表示します。

  2. コントロールを1つのテキストフィールドを持つように変更しますが、新規ユーザーアクティベーションのデフォルトテキストとして「XXXX-XXXX-XXXX-XXXX」を含めます。ユーザーがテキストボックスをクリックした場合は、テキストを削除して、アクティベーションコードにプロンプ​​トテキストが含まれないようにします。人々はデフォルトのテキストを見て、そのパターンを期待している場合はそれに引き寄せられます。ログインしているユーザーには、デフォルトのテキストが表示され、ブロックされます。

于 2010-01-28T15:57:29.997 に答える