web-dev-qa-db-ja.com

「ユーザー名とパスワードをお忘れですか?」を置き換えるアイコンがありますか?

アイコンがリンクテキストに置き換わったインスタンスを誰かが見つけましたか。

「ユーザー名やパスワードをお忘れですか?」

私はWebサイトの上部を行き来し、テキスト形式の場合はどこに配置するかわからないログインバーを設計しています。提供されているデザインは次のとおりです。

Log in fields as supplied

これを実装すると、検索バーがなくなり、順序が変わって見え、忘れられたユーザー名のリンクを考慮する必要がなくなります。テキストがバーの下に配置されている場合、ページ上で目立ちすぎています。

Log in fields in development

すべてのコメントと考えを歓迎します

19
J4G

私はあなたに3つの可能な解決策を考えることができますが、アイコンを含むものはありません。代わりに、次のいずれかの解決策を検討してください。


1。失敗したすべてのログイン試行を別のログインページにプッシュします。

エラーとログイン失敗のメッセージをトップバーに表示する代わりに、送信した情報と新しいエラー状態がフォームに入力されたログインページにユーザーをプッシュします。この集中ログイン画面では、「パスワード/ユーザー名をお忘れですか?」に追加する余地があります。リンク。これがどのように見えるかの例です:

Login Page

長所:

  • このようなセカンダリリンクのためにより多くのスペースを許可します。
  • ログインを1か所に集中化するため、Webサイト/アプリ全体で異なるエラー状態を再現する必要がありません。

短所:

  • ユーザーは一時的にユーザーがいたページから離れてしまい、ユーザーを元の場所に再ルーティングする必要があります。これは大きなハードルではありませんが、複雑さをもたらします。
  • ログインに失敗するまで、パスワードを忘れた場合のリンクは表示されません。一部のユーザーは、自分のパスワードを思い出せないことを知っている場合があり、リンクの検索に不満を感じています。

2。ポップアップを使用してエラーメッセージを表示し、そこに[パスワードを忘れた]リンクを挿入します。

トップバーの高さを変更する代わりに、ポップアウトウィンドウ内で失敗したリンクを表示します。

Link in error popout

長所:

  • デザインを変更する必要はありません。
  • ユーザーは表示されているページにとどまります。

短所:

  • 前の例と同様に、ユーザーはログインに失敗するまで、パスワードを忘れた場合のリンクは表示されません。一部のユーザーは、自分のパスワードを思い出せないことを知っている場合があり、リンクの検索に不満を感じています。
  • 画面サイズが小さい(モバイルなど)と、このようなポップオーバーで問題が発生する可能性があります。つまり、画面の領域が限られている場合は、別のソリューションを考え出す必要があるかもしれません。
  • ログインフォームは一元化されていません。より多くのメンテナンス。

。トップバーのポップアップウィンドウにミニフォームを提供します。

ユーザーをリダイレクトしたり、何かが失敗するのを待つ代わりに、「ログイン」ポップアップウィンドウの後ろにフォームを隠します。

Login Popup

長所:

  • トップバーの最初の視覚的な複雑さは単純化されています。
  • ユーザーは「完全な」ログインフォームにアクセスできます。
  • これは、より小さな画面(つまり、モバイル)に適しています。

短所:

  • フォームはクリックの背後に隠されています。
  • ログインフォームは一元化されていません。より多くのメンテナンス。

個人的にはオプション3を選択します。ほとんどのユーザーはWebサイトにログインしたままになる傾向があります。ユーザー名とパスワードを覚えるのは面倒です。ポップアップ内でフォームを非表示にすることで、フォームを簡単に利用できるようになりますが、ユーザーが対処する方法を理解する必要がある最初の視覚要素ではありません。また、これにより、「サインアップ」CTAをより強調することができます。アカウントを持つユーザーは、アカウントがないユーザーよりも欲求不満のしきい値が高くなります。外向きのページでは、コンテンツは多くの非ユーザーをアクティブユーザーに変換できるようにする必要があります。

フォームフィールド内にプレースホルダーコピーとしてラベルを配置しないようにしてください。見栄えはいいかもしれませんが、ユーザーがフィールドの目的を忘れた場合、ユーザーに気づかせるラベルがなくなります。

49
Hynes

明確な意味のないアイコンには注意してください。アイコンは、従来の(メタ)情報を伝えるときに非常に役立ちます。しかし、アイコンに従来の意味がない場合、テキストなしでアイコンを伝達することは非常に困難です(同時にシンプルにすることは困難です)。

これは、数年前の言語アイコンプロジェクトを少し思い出させます: http://www.languageicon.org/ 。アイコンはまだ広く実装されていないため、(新しい)アイコンを導入するのがいかに難しいかがわかります。

入力フィールドを新しいページへのテキストリンクに置き換えることが考えられます。そこには、目立たせずに読みやすいテキストを表示する余地があります。また、「remember me」機能を実装して、すべてのページでのログインフォームの必要性を減らすこともできます(一度しか必要ないため)。

18
Ruudt

常に「?」を使用できますアイコン Question mark スペースに問題がある場合、ユーザーが「?」マークアイコンは、詳細情報を確認するためにクリックする明らかなアイコンです。 (ただし、これはユーザーに別のクリックをもたらします)

2
MeeMMeeM

MeeMMeemの発言を踏まえると、このデザインは直感的であることがわかりました(実際には、SCLogin Enhancedと呼ばれるJoomla拡張機能です)。入力にインラインで疑問符アイコンを配置できます。 Bootstrapは、これを行うための巧妙な方法をいくつか提供します。

Question mark icon inline with field

2
avi