Diseño de un perfil de usuario: Cómo usar las anulaciones

Independientemente del tipo de proyecto de software que los diseñadores de UI/UX tengan en sus manos (aplicaciones para fintech, blockchain o comercio electrónico), casi todos los proyectos comparten una pantalla en común. En este caso, estamos hablando de la parte de una aplicación que contiene la información personal del usuario... su perfil.

Sí, en la superficie, todo parece pan comido. Debemos incluir una imagen, un nombre, una contraseña y un botón para guardar, además de varias opciones de configuración. Si bien todo esto es cierto, esta simplicidad solo se aplica a escenarios comunes y corrientes. Al profundizar en un caso de negocio concreto de un producto de software, es probable que la pantalla del perfil de usuario se vuelva un poco más complicada. Desde los niveles internos hasta la facturación y la verificación, cuando se trata de la pantalla de perfil, el diablo está en los detalles.

Si tiene que diseñar un caso de perfil de usuario rico en componentes, es hora de prepararse; te enfrentarás a algunos desafíos para definir el mejor escenario de UX y elegir los componentes óptimos para representarlo. Luego, después de realizar pruebas de UX en la iteración inicial del prototipo, es hora de cambios y mejoras de los wireframes. Y sí, tendríamos que hacer las mejoras de la estructura alámbrica lo antes posible.

Además, vamos a ceñirnos a esta conocida frase, "¡Tan pronto como sea posible!", y permítanme mostrarles cómo utilizar los componentes de Indigo.Design Sketch predefinidos y perfectos para construir nuestro concepto de UX.

Let’s Begin

Con los bocetos iniciales en papel ya hechos, estamos frente a la pantalla y listos para comenzar con Sketch. Aquí viene la primera sorpresa ordenada (limitémonos a usar sorpresa solo para vibraciones positivas):

No tenemos que perder tiempo pensando en cómo empezar desde la mesa de trabajo en blanco cuando usamos Indigo.Design UI Kits, porque simplemente podemos insertar uno de los patrones más cercanos a nuestro concepto de diseño.

Como miembro del equipo de productos de Indigo.Design, estoy emocionado de crear más patrones que ayudarán en una variedad de casos de uso. Por lo tanto, si necesita un caso de uso específico, no dude en escribirnos. Incluso puedes adjuntar una maqueta para ilustrarlo mejor.

El siguiente paso es configurar el patrón de perfil de usuario existente de acuerdo con nuestros requisitos específicos. Voy a mantener el patrón inicial junto al modificado para realizar un seguimiento de los cambios:

Este es el resultado después de elegir una representación de imagen de perfil diferente.

Desde la opción situada debajo de Avatar, podemos definir rápidamente el color de fondo del icono en la esquina inferior derecha, el tipo de icono, el color del texto, el texto del marcador de posición, etc.

Como puede ver, el patrón inicial proporciona varias entradas, la primera de las cuales se representa en el estado de foco, mientras que el resto está en el estado relleno. Por supuesto, si queremos cambiar el estado, se puede hacer fácilmente desde las opciones de Estado.

Para el ejemplo actual, elegí el estado inactivo, por lo que recibo ese resultado. Lo que es bastante útil al especificar una entrada es describir claramente su comportamiento. Por ejemplo, anotar si una contraseña se ha escrito incorrectamente o se ha escrito correctamente. Eso se puede configurar desde el menú desplegable Estado nuevamente. Después de elegir el estado que queremos, las entradas se distribuyen perfectamente verticalmente.

¿Qué pasa si queremos cambiar el diseño de la entrada para mostrar cuadros en lugar de líneas? No te preocupes, solo cámbialo así...

… y recibes una entrada en caja de píxeles perfectos. No hace falta decir que si prefiere ese diseño, es mejor ceñirse a él para todas las demás entradas.

Continuando, ¿qué pasaría si quisieras tener entradas más complicadas, como sufijos, prefijos o iconos? Nuestra biblioteca proporciona plantillas fácilmente editables que cubren varios casos. Empecemos por la condición inicial.

A continuación, puede ver cómo obtener la entrada con iconos de prefijo y sufijo.

Es probable que solo necesite editar el ícono, que puede editar tanto para el prefijo como para el sufijo, el color y el tipo de ícono.

Si queremos ir aún más lejos y usar otro componente en lugar de una entrada, tendremos que separar nuestro patrón de perfil y editar los componentes más pequeños.

Muy a menudo necesitamos una opción de cambio al editar un perfil, así que agreguemos y editemos dicho componente de la biblioteca de Indigo.

Dado que el patrón ya está separado, recomiendo eliminar una entrada después de agregar otra opción, para usarla como punto base para la alineación.

Después de una alineación precisa, puede estirar el componente del interruptor para que encaje entre el desplazamiento.

Finalmente, simplemente elimine la entrada o el campo que no necesita y edite la etiqueta del interruptor.

En el caso de configuraciones de perfil más complicadas, es posible que necesitemos agregar un elemento que lleve al usuario a otra pantalla o a un nivel más profundo. Si nos enfrentamos a este caso, recomiendo utilizar un elemento de lista.

Primero, lo añadimos como un componente de la biblioteca, luego lo colocamos donde queramos en la pantalla y simplemente ajustamos su ancho para fijar el tamaño de la pantalla. Por último, no olvides cambiar la etiqueta.

Una nota importante que me gustaría agregar: No agregue un componente desde el menú Anulaciones. Sé que es muy tentador ya que se coloca en la parte superior de la lista de componentes, pero es mejor agregar primero la forma inicial del componente que configurarlo desde el panel de opciones de la derecha.

¡Es todo! Como prometimos, el uso de nuestra biblioteca de interfaz de usuario Sketch acelera su productividad. Pero eso es solo el comienzo, ya que en los próximos artículos se revelarán capacidades de Indigo.Design más interesantes (como la forma de generar código para generar su diseño).