Appearance
Vistas de la aplicación
A partir de las funcionalidades definidas anteriormente, identifica las principales vistas que necesitará la aplicación.
Componentes para generar vistas
Clasificación y descripción de diversos componentes que podemos utilizar para componer las vistas:
Como mínimo deberán diseñarse las siguientes:
Landing page
Página de presentación de la aplicación destinada principalmente a usuarios que todavía no han accedido a ella.
Su objetivo es presentar de forma clara qué ofrece la aplicación y facilitar que el usuario realice las principales acciones de entrada, como registrarse o iniciar sesión.
Habitualmente puede incluir:
- Nombre, logotipo e identidad visual de la aplicación.
- Una presentación breve de su finalidad.
- Descripción de sus principales funcionalidades.
- Ventajas o características destacadas.
- Imágenes o ejemplos que permitan entender cómo funciona.
- Llamadas a la acción.
- Acceso al registro y al inicio de sesión.
- Información sobre precios o planes, si existen.
- Preguntas frecuentes.
- Información de contacto y enlaces legales.
No es necesario utilizar todos estos elementos. Selecciona aquellos que tengan sentido para la aplicación que estás diseñando y establece una jerarquía clara entre ellos.
Landing page de Opentaller
La landing page de Opentaller estará orientada a presentar el servicio a propietarios de talleres mecánicos y facilitar la creación de una cuenta.
Incluirá:
- Presentación de Opentaller como aplicación para la gestión de talleres mecánicos.
- Acceso directo al inicio de sesión.
- Presentación de la aplicación tanto para su utilización desde un ordenador como desde un dispositivo móvil.
- Sección dirigida a nuevos usuarios desde la que podrán crear una cuenta.
- Información de ayuda para comenzar a utilizar la aplicación.
- Presentación de los principales módulos disponibles.
- Sección de preguntas frecuentes.
- Información de contacto y enlaces legales.
Login o registro
Vista que permita al usuario identificarse o crear una cuenta.
Los formularios de acceso suelen ser sencillos y contener únicamente la información necesaria para identificar al usuario. Dependiendo de la aplicación, el inicio de sesión y el registro pueden presentarse en una misma vista o mediante vistas independientes.
Habitualmente pueden incluir:
- Correo electrónico, nombre de usuario u otro identificador.
- Contraseña.
- Confirmación de contraseña durante el registro.
- Opción para mostrar u ocultar la contraseña.
- Recuperación de contraseña.
- Opción para mantener iniciada la sesión.
- Aceptación de las condiciones de uso o política de privacidad.
- Enlace para crear una cuenta si el usuario todavía no dispone de ella.
- Mensajes de validación y errores.
El formulario de registro podrá solicitar además aquellos datos iniciales que sean necesarios para configurar la aplicación.
Login y registro de Opentaller
Opentaller dispondrá de las vistas necesarias para acceder a una cuenta existente o crear una nueva.
Para crear una cuenta se solicitará:
- Correo electrónico.
- Contraseña.
- Confirmación de la contraseña.
- Tipo de taller.
- Aceptación de la política de privacidad.
La contraseña podrá mostrarse u ocultarse y el usuario dispondrá de las acciones necesarias para crear la cuenta o cancelar el proceso.
Dashboard
Vista principal a la que accede el usuario una vez identificado y desde la que puede consultar información relevante y acceder a las principales funcionalidades.
Un dashboard suele proporcionar una visión general del estado de la aplicación y presentar de forma prioritaria aquella información que el usuario necesita consultar con mayor frecuencia.
Dependiendo del tipo de aplicación, puede contener:
- Indicadores o métricas relevantes.
- Resúmenes de información.
- Actividad reciente.
- Tareas o elementos pendientes.
- Avisos y notificaciones.
- Gráficos o estadísticas.
- Accesos rápidos a las funcionalidades principales.
- Acciones frecuentes.
El contenido del dashboard debe seleccionarse en función de las necesidades reales del usuario. No es necesario que una vista principal incluya estadísticas o gráficos si estos no aportan información útil para la aplicación.
Dashboard de Opentaller
En Opentaller se utilizará el dashboard principalmente como un menú de acceso rápido a las diferentes áreas de gestión.
Desde esta vista se podrá acceder directamente a secciones como:
- Clientes.
- Vehículos.
- Reparaciones.
- Proveedores.
- Pedidos.
- Facturas de proveedor.
- Operaciones.
- Materiales.
- Listados de totales.
Cada área estará representada mediante un elemento visual fácilmente identificable y podrá incorporar accesos directos a algunas de sus acciones más habituales, como consultar listados, realizar búsquedas o crear nuevos elementos.
El objetivo será que el usuario pueda acceder rápidamente a las principales funcionalidades del taller sin necesidad de recorrer toda la navegación de la aplicación.
Listado de objetos
Vista que muestre una colección de los principales objetos gestionados por la aplicación.
El concepto de objeto dependerá de cada aplicación. Por ejemplo, pueden ser productos, viviendas, películas, vehículos, cursos, reservas, clientes, etc.
Los listados permiten localizar, consultar y gestionar conjuntos de información. Dependiendo de la naturaleza de los datos y del dispositivo, pueden representarse mediante tablas, tarjetas, listas u otros componentes.
Habitualmente pueden incluir:
- Información básica que permita identificar cada objeto.
- Buscador.
- Filtros.
- Criterios de ordenación.
- Paginación.
- Número de resultados.
- Acciones sobre cada elemento.
- Acceso al detalle de un objeto.
- Acción para crear nuevos objetos.
Debe seleccionarse únicamente la información necesaria para reconocer y diferenciar los objetos. La información más detallada se mostrará en su correspondiente vista de detalle.
Listado de clientes de Opentaller
El listado de clientes de Opentaller se mostrará mediante una tabla que permita consultar un número elevado de clientes de forma compacta.
Para cada cliente podrá mostrarse información como:
- Nombre e identificación.
- Correo electrónico.
- Teléfono.
- Número de vehículos asociados.
- Fecha de alta como cliente.
- Fecha de la última reparación.
- Dirección.
El listado permitirá ordenar la información, filtrar los resultados y desplazarse entre diferentes páginas cuando el número de clientes sea elevado.
Desde el listado se podrá acceder a la información de un cliente concreto para consultar sus datos con mayor detalle.
Detalle de un objeto
Vista que muestre información completa sobre uno de los objetos del listado.
La vista de detalle permite consultar la información de un elemento concreto y, cuando corresponda, acceder a otros objetos o acciones relacionados con él.
Habitualmente puede incluir:
- Información principal del objeto.
- Información complementaria organizada por secciones.
- Imágenes o documentos asociados.
- Relaciones con otros objetos de la aplicación.
- Historial o actividad relacionada.
- Acciones para editar, eliminar o realizar operaciones sobre el objeto.
- Navegación hacia elementos relacionados.
Cuando existe una cantidad elevada de información, puede organizarse mediante secciones, pestañas, paneles desplegables u otros componentes que faciliten su consulta.
Detalle de un cliente de Opentaller
El detalle de un cliente de Opentaller permitirá consultar su información principal y los elementos relacionados con él.
Podrá incluir:
- Nombre e identificación del cliente.
- Correo electrónico.
- Teléfono.
- Fecha de alta.
- Fecha de su última reparación.
- Dirección.
- Vehículos asociados.
- Documentos.
- Imágenes.
La información se organizará en diferentes secciones para evitar mostrar todos los datos al mismo nivel.
Desde el detalle también se podrá acceder a los vehículos asociados al cliente y consultar posteriormente la información específica de cada uno de ellos.
Opentaller dispondrá además de una vista de edición en la que los datos del cliente se organizarán mediante formularios agrupados en secciones como datos personales, dirección y contacto.
Vista para visualizar el detaller de un cliente
Vista para editar el detaller de un cliente
Página 404
Vista mostrada cuando el usuario intenta acceder a una página que no existe.
Su objetivo no es únicamente informar del error, sino ayudar al usuario a continuar utilizando la aplicación.
Habitualmente puede incluir:
- Indicación clara del error 404.
- Mensaje explicando que la página o recurso solicitado no se encuentra.
- Enlace o botón para regresar a una ubicación conocida.
- Acceso a la página principal.
- Navegación básica de la aplicación, cuando resulte apropiado.
La página debe mantener, en la medida de lo posible, la identidad visual del resto de la aplicación.
Página 404 de Opentaller
La página 404 de Opentaller será una vista sencilla centrada en comunicar claramente el error.
Mostrará:
- El código 404 como elemento principal.
- Un mensaje indicando que no existe contenido en la dirección solicitada.
- Un botón para volver a la página principal.
Utilizará una presentación visual sencilla para que el usuario identifique inmediatamente que ha abandonado el flujo normal de la aplicación y pueda regresar fácilmente.
Además de estas vistas mínimas, identifica aquellas otras que sean necesarias según las funcionalidades definidas para tu aplicación.
Mapa de navegación
Define cómo se relacionan las diferentes vistas mediante un mapa de navegación sencillo.
El mapa debe permitir entender los principales recorridos que puede realizar un usuario dentro de la aplicación.
No es necesario representar cada posible acción. Deben aparecer las vistas principales y las relaciones necesarias para comprender cómo se desplazará el usuario entre ellas.
Mapa de navegación de Opentaller
Un mapa de navegación simplificado podría establecer las siguientes relaciones:
- Landing page → Login o registro.
- Login → Dashboard.
- Dashboard → Clientes.
- Clientes → Detalle de cliente.
- Detalle de cliente → Vehículos del cliente.
- Dashboard → Vehículos.
- Vehículos → Detalle de vehículo.
- Dashboard → Reparaciones.
- Reparaciones → Detalle de reparación.
- Dashboard → Proveedores.
- Dashboard → Pedidos.
- Dashboard → Facturas de proveedor.
- Dashboard → Operaciones.
- Dashboard → Materiales.
- Dashboard → Listados de totales.
El dashboard funcionará como uno de los principales puntos de entrada a las diferentes áreas de gestión, aunque estas también podrán estar disponibles desde la navegación general de la aplicación.
Dispositivos
La aplicación deberá estar pensada para poder utilizarse en diferentes dispositivos. Durante el diseño trabajaremos con dos referencias:
- Desktop.
- Mobile.
En las siguientes partes de la actividad se estudiará cómo adaptar las vistas y sus componentes a estos dos tamaños de pantalla.
El objetivo no será simplemente reducir el tamaño de los elementos, sino analizar cómo debe reorganizarse y adaptarse la interfaz cuando el espacio disponible cambia.
Al realizar esta adaptación habrá que considerar aspectos como:
- Distribución y número de columnas.
- Sistema de navegación.
- Tamaño y disposición de los componentes.
- Presentación de tablas y listados.
- Formularios.
- Imágenes y contenido multimedia.
- Espaciados.
- Acciones que deben permanecer visibles.
- Información que puede reorganizarse o mostrarse de forma progresiva.