Análisis y definición
¿Quién participa en la instancia de análisis y definición?
El diseñador UX tiene dos tareas: revisar los nuevos flujos de pantallas o funcionalidades añadidas a la app y clasificar sus componentes y, a continuación, definir si los componentes configurables disponibles satisfacen sus necesidades o si es necesario crear nuevos componentes configurables o actualizar los existentes.
¿Dónde trabajas?
Para trabajar en este paso, debes utilizar dos documentos: en primer lugar, el documento Screens Flows y, a continuación, el Design System, ambos disponibles en el repositorio de documentación Figma creado previamente durante la fase Sistema de diseño. Si decides actualizar componentes configurables o crear otros nuevos, deberás utilizar la plantilla Documentación técnica de componentes configurables y añadir los componentes configurables nuevos o modificados en la sección Organisms de la tercera instancia.
La primera instancia en la fase de nuevos componentes configurables implica dos pasos:
Revisión de los nuevos flujos de pantallas que se añadirán a la aplicación, lo que incluye el análisis de todos los componentes de las mismas y la definición de cuáles se construirán utilizando componentes nativos o componentes configurables.
Análisis de los componentes configurables necesarios y definición de si el proyecto puede utilizar componentes configurables preconstruídos sin ningún cambio, o si debe utilizar nuevos componentes configurables o actualizar los existentes.
Etapa 1 - Análisis de los nuevos flujos de pantallas
Componentes configurables o componentes nativos
Esta instancia requiere comprender los conceptos de componente nativo y componentes configurables:
Componente nativo: componentes simples instalados en Studio por defecto. La estructura de estos componentes no puede modificarse mediante parámetros.
Componente configurable: Conjunto de componentes nativos que cumplen una función específica y pueden reutilizarse. La estructura de los componentes configurables puede modificarse cambiando sus parámetros. Estos componentes se añaden al ambiente de Studio a través de un módulo .
Aviso
El conjunto de componentes configurables está disponible a través del módulo Configurable Components. Si el módulo no está añadido en su ambiente de Studio, ponte en contacto con el equipo de UX para obtener ayuda.
Los componentes configurables de Veritran se clasifican en cinco tipos:
Tipo
Identificador en Studio
Descripción y ejemplos
Input
IPT
Permite obtener los datos introducidos por el usuario.
Input (campo de entrada de texto)
Selector de fecha
Menú desplegable Opciones
Navigation (navegación)
NAV
Permite al usuario navegar por secciones, pantallas o contenidos.
Menú principal
Pagination (paginación)
Sidebar
Container (contenedor)
CTR
Se utiliza para organizar y mostrar información de forma estructurada, jerárquica o repetitiva.
Carrousel (carrusel de tarjetas)
Lista de productos o promociones
Banner con botón de acción
Modal
Indicator
IDR
Muestra información al usuario relacionada con su progreso, ubicación o estado dentro de la aplicación.
Loader (cargador)
Progress indicator (indicador de progreso)
Steppers
Selector
[en] SLR
[en] Allows the user to select one or more options.
Importante
Los identificadores de nombre son obligatorios y no pueden modificarse. Siempre que se documente un componente configurable en Figma o se construya en Studio, su nombre debe empezar por el identificador correspondiente a su tipo.
Para conocer los componentes configurables de la plataforma Veritran, ve a la lista de componentes configurables del repositorio de proyectos y al archivo de Design System en Figma.
Ejecución de tareas
Importante
Antes de comenzar a trabajar en estos pasos, el líder técnico debe solicitar al equipo de Solución de Caja la instalación de los módulos de componentes configurables en el ambiente de Studio del proyecto y compartir la documentación técnica respectiva de cada componente.
Para llevar a cabo esta instancia, el Diseñador UX debe ejecutar las siguientes tareas:
Duplicar el repositorio de documentación en el Sharepoint del proyecto. El repositorio consta de tres documentos:
Lista de componentes configurables: lista de componentes configurables creados en Veritran y disponibles para su uso.
Plantilla de documentación técnica: documentación que debe completar el implementador antes de configurar el componente configurable en Studio. Esta plantilla contiene los parámetros que deben cumplimentarse y un caso de uso a modo de ejemplo.
Lista de comprobación de componentes configurables: lista de comprobación que contiene los pasos y tareas que deben realizar los miembros del equipo a lo largo de la fase de componentes configurables.
Actualizar el documento Screens Flows con los nuevos flujos de pantallas añadidos o actualizar los flujos existentes con los cambios realizados en las pantallas que incluyen nuevas funcionalidades.
Revisar los componentes de cada pantalla, comprobar los datos de los componentes en el documento Design System y determinar cuáles pueden construirse utilizando componentes nativos y componentes configurables. En este punto, el diseñador de UX ejecutará distintas tareas en función de los componentes necesarios:
Sugerencia
En la mayoría de los casos, los flujos de pantallas requerirán el uso de componentes nativos y componentes configurables.
En el caso de los componentes nativos, el diseñador UX arrastrará y soltará el componente desde la biblioteca Figma al documento de flujos de pantallas. A continuación, el implementador lo construirá utilizando los componentes nativos disponibles en Studio. Una vez utilizados estos componentes, el equipo del proyecto pasará a la tercera fase del proceso de creación de la aplicación: flujos funcionales.
Si un componente es configurable, el diseñador UX pasa al segundo paso de esta instancia, donde definirá sus características, y determinará si utilizará componentes configurables disponibles, creará nuevos o actualizará los existentes, y lo mapeará en el documento de flujos de pantallas.
Paso 2 - Definición de los componentes configurables
Este paso sólo aplica a los componentes configurables que se utilizarán en las pantallas de la aplicación.
Ejecución de tareas
El diseñador UX ejecutará diferentes pasos en función de sus conclusiones sobre los componentes configurables. Para ello, el diseñador debe utilizar la documentación disponible y comprender cuándo deben crearse o actualizarse los componentes configurables.
Revisar cada nueva pantalla e identificar si es posible construirla con los componentes configurables disponibles en el archivo Design System (sección Organisms, dividida por tipo):
Si existe en la sección Organisms y se puede construir utilizando un componente configurable preconstruido con todas sus características configuradas, arrastrar y soltar el componente configurable desde la biblioteca de Figma.
Si se puede construir utilizando un componente configurable preconstruido pero es necesario realizar cambios, pasar a la segunda instancia para definir su anatomía y complejidad y revisar si los cambios requieren la creación de un nuevo componente configurable o una actualización de la configuración de los parámetros del componente configurable.
Si no puede construirse utilizando un componente configurable preconstruido, definir que debe crearse un nuevo componente configurable y pasar a la segunda instancia para definir su anatomía y complejidad.
Nota
La actualización del componente o la creación de un nuevo componente debe documentarse en la sección Organisms y crearse como componente en la biblioteca de Figma. A continuación, el diseñador UX tendrá que arrastrarlo y soltarlo en el documento de flujos de pantallas.