web-dev-qa-db-fra.com

Formatage d'un écran de connexion

Je conçois une page de connexion pour le réseau de mon école. Je souhaite afficher le logo de notre école à côté du formulaire de connexion.

J'ai créé deux prototypes: Prototype 1


Prototype 2

Dans la première conception, l'image + la forme est centrée horizontalement. Cependant, certains de mes collègues étaient préoccupés par le fait que cela semblait décentré, dans l'ensemble, car le formulaire de connexion lui-même n'était pas au centre de la page.

Ainsi, dans le deuxième prototype, le formulaire de connexion est centré, avec le logo poussé en haut à gauche. Je crains ici que le logo ne soit pas aligné et soit trop petit.

En ce qui concerne la convivialité et la conception, est-ce que c'est préféré? Que recommanderais-tu?

Je suis également ouvert à toute autre suggestion UX.

4
baum

L'utilisabilité dicte que rien ne doit empêcher (ou ralentir) l'utilisateur d'effectuer l'action que vous souhaitez qu'il entreprenne. Dans ce cas, inscrivez-vous. La deuxième option est la meilleure des deux, car elle place le formulaire d'inscription à l'avant et au centre, là où les utilisateurs doivent le voir. L'icône est inhérente (il s'agit d'un site Web de l'école, après tout), alors gardez-la à l'écart (bien qu'elle soit visible) et faites de l'inscription le point culminant de la page, avec rien d'autre.

Tout le reste ajoute simplement une distance cognitive à votre objectif souhaité.

8
Jamezrp

Je n'ai aucune preuve fiable que ma version est meilleure, mais en me basant sur mon expérience (10 ans et plus) et concernant les règles d'utilisation courantes, je suggère de faire quelque chose comme cela montré ci-dessous:

  • supprimer les textes inutiles
  • rendre le logo plus petit et centré
  • agrandir le bouton

Updated version

9
Igor Gubaidulin

Je suis plus à bord avec @ la réponse de IgorGubaidulin si c'était mon site, mais en travaillant avec ce que vous avez, je déplacerais simplement le logo à l'intérieur et j'en aurais fini:

Option 1


Opt1

Option 2


Opt1

3
Code Maverick