¬ŅC√≥mo dise√Īar un avatar?

¬ŅAlguna vez te has preguntado c√≥mo debe ser un avatar para que cumpla con todo lo necesario para una fant√°stica experiencia de usuario? En este art√≠culo te explicar√© paso a paso c√≥mo conseguir un avatar de 10 para tus proyectos.

Antes que nada debemos saber para que se utiliza el avatar, así que primero definamos este simpático componente:

Un avatar  es un componente que se utiliza para representar a usuarios u organizaciones, en él se suele mostrar la imagen de perfil, aunque también es posible que se ilustre este mediante iniciales o iconos.

Para dise√Īar este componente deberemos tener en cuenta lo siguiente:

  • ¬ŅC√≥mo se mostrar√° el avatar cuando el usuario todav√≠a no ha subido ninguna imagen?
  • ¬ŅC√≥mo le indicaremos al usuario que puede actualizar su avatar?
  • ¬ŅQu√© tipo de recursos gr√°ficos le permitiremos subir y cu√°l ser√° el tama√Īo m√°ximo?
  • ¬ŅC√≥mo podr√° modificar la imagen subida?
  • ¬ŅC√≥mo le informaremos de que el avatar se ha actualizado?

Muestra como se ver√° el avatar cuando no tiene imagen

Este es uno de los primeros casos que deberemos dise√Īar, para ello, existen varias alternativas. La primera de ellas, cuando el usuario no tiene subida ninguna imagen podemos mostrarle un icono de avatar, o una ilustraci√≥n simple para indicarle que ese espacio est√° reservado para una imagen que lo identifique.

Otra opción sería utilizar las iniciales de su nombre para configurar este avatar por defecto.

Indica al usuario que es posible modificar el avatar

La gran mayoría de aplicaciones utilizan el icono del lápiz para representar que el elemento es editable, así que una buena opción sería esa, para ello podremos introducirlo, en el estado normal del avatar, o como hover, es decir, que aparezca cuando el usuario pasa el cursor sobre el avatar.

Dile que tipo de archivo puede utilizar

Para todos los usuarios es muy frustrante equivocarse, as√≠ que ens√©√Īales que tipo de archivo es v√°lido para utilizar como avatar y cu√°l es el l√≠mite de tama√Īo.

Facilita la edición

A los usuarios les encantará poder modificar su imagen, recortarla y ajustarla para que se vea correctamente en su  perfil, para ello facilítale algunas herramientas como la de recortar, realizar zoom in y zoom out para ajustarla al espacio del avatar. Con esto le permitirás conocer cómo será el resultado antes de publicarla.

Informa que el cambio se ha realizado correctamente

Parece de libro pero es muy posible que se nos olvide, siempre que nos sea posible deberemos informar al usuario de que la tarea que estaba realizando se ha completado con éxito. A mi particularmente no me gusta utilizar el componente para reflejar esto, así que puedes apoyarte en otros componentes como son las alertas.

Este componente puede ser todavía más complejo, por ejemplo si reflejamos el estado de conexión del usuario, o alguna insignia distintiva por rol. Espero que este artículo te haya servido de ayuda para que crees un componente de diez.