Desarrollo Interfaces UT1

AI✦

Una web de reservas es visualmente atractiva, pero obliga a consultar cinco pantallas para conocer el precio final. ¿Qué actuación responde mejor al propósito del diseño de interfaces?. Mantener el flujo y reforzar la identidad mediante una nueva paleta. Reducir el texto de los botones sin revisar la información de cada paso. Añadir una animación entre pantallas para explicar que la operación continúa. Reorganizar el flujo para mostrar disponibilidad y coste antes de confirmar.

Los botones de una tienda son legibles y coherentes, pero los usuarios abandonan al descubrir gastos inesperados al final. ¿Qué conclusión es más precisa?. La IPO solo sería relevante si hubiera fallos de hardware. La coherencia de la UI permite concluir que la UX es satisfactoria. La calidad visual de la UI puede coexistir con una UX insatisfactoria. El abandono demuestra que el problema es exclusivamente tipográfico.

Se diseña una web para consultar y reservar pistas desde el móvil, a menudo durante trayectos cortos. ¿Qué decisión debería orientar primero la planificación?. Elegir primero las fotografías y distribuir alrededor la información restante. Ordenar las funciones según la estructura interna de los departamentos del centro. Reproducir la portada de escritorio y reducir proporcionalmente todos sus elementos. Priorizar disponibilidad, precio y una secuencia breve de reserva según las tareas del usuario.

En un listado, el precio de cada producto queda más cerca de la fotografía del producto siguiente que de la suya. Sin cambiar colores ni fuentes, ¿qué ajuste ataca directamente el problema?. Alinear todos los precios en el borde inferior de la página. Reducir el espacio entre los elementos del mismo producto y aumentar la separación entre productos. Igualar el espacio entre cualquier par de elementos del listado. Separar todas las fotografías de sus precios mediante un bloque común de texto.

Los botones «Guardar» de distintas secciones tienen estilos diferentes, mientras que un aviso estático copia el estilo de uno de ellos. ¿Qué corrección reduce mejor la ambigüedad?. Unificar el estilo de las acciones equivalentes y diferenciar visualmente el aviso estático. Dar a cada botón un color diferente para identificar su sección. Cambiar únicamente la posición del aviso, manteniendo todos los estilos. Aplicar el mismo estilo a botones, avisos y títulos para aumentar la uniformidad.

En una pantalla de confirmación, el enlace promocional compite con el botón «Confirmar reserva» por tamaño, contraste y posición. ¿Qué solución establece una jerarquía adecuada?. Destacar la confirmación y dar menor peso visual a la promoción mediante tamaño, contraste y espacio. Utilizar el mismo color de acento en todos los textos de la pantalla. Añadir más mensajes alrededor del botón para que el usuario mire esa zona. Aumentar por igual el tamaño de ambos elementos.

Una ventana de confirmación se confunde con la página situada detrás. ¿Qué intervención aplica de forma más directa el principio figura-fondo?. Alinear los botones de la ventana siguiendo la misma línea del menú posterior. Distinguir la ventana del fondo mediante una superficie contrastada y atenuación del contenido posterior. Repetir el mismo icono en todos los títulos de la página. Eliminar el contorno de todos los elementos para favorecer el cierre.

Un catálogo está organizado por códigos internos que los clientes desconocen. Estos llegan al sitio, pero no encuentran las categorías que necesitan. ¿Qué revisión es prioritaria?. Trasladar los mismos códigos al pie de página y retirar el menú principal. Reagrupar contenidos y revisar etiquetas y relaciones del mapa de navegación según las necesidades del público. Añadir fotografías a cada código sin revisar su agrupación. Cambiar la familia tipográfica conservando categorías y etiquetas.

El equipo necesita documentar qué páginas existen y cómo se enlazan, sin decidir todavía dónde colocar botones dentro de ellas. ¿Qué entregable corresponde a esa necesidad?. Un wireframe de la página de inicio con todos sus bloques. Un mapa de navegación con páginas y conexiones. Un mockup de alta fidelidad de la pantalla principal. Una guía de estilo con colores y tipografías.

Un portal permite explorar deportes mediante categorías y subcategorías. Al reservar, exige completar datos, revisar el resumen y confirmar en ese orden. ¿Qué estructura describe mejor el conjunto?. Lineal: todas las páginas del portal forman una única secuencia. Jerárquica pura: cada paso de reserva constituye una categoría independiente. Reticular: cada pantalla necesita enlazar directamente con todas las demás. Mixta: exploración jerárquica y reserva lineal.

Desde «Inicio > Deportes > Pádel > Pista 3», una persona quiere volver a la categoría Pádel sin reiniciar la búsqueda. ¿Qué elemento aporta ese acceso y muestra su posición jerárquica?. Un enlace contextual a las condiciones de cancelación. Migas de pan con enlaces a los niveles superiores. Un indicador con el número de paso del pago. Un pie de página con los datos de contacto.

Dos personas crean tarjetas y botones de reserva con márgenes y estados diferentes. ¿Qué medida reduce mejor la repetición de este problema?. Documentar reglas de espaciado y estados en la guía y aplicarlas mediante componentes reutilizables. Copiar manualmente cada tarjeta y corregir diferencias al finalizar el proyecto. Fijar solo el color del logotipo para mantener la identidad. Compartir una captura de la portada y dejar que cada persona deduzca los estados.

La guía exige conservar el tono azul y su luminosidad, pero hacer menos intenso el color de una superficie secundaria. ¿Qué propiedad se debe reducir?. El tono. El tamaño de la superficie. La luminosidad. La saturación.

Una propuesta utiliza varias versiones claras, oscuras y menos saturadas del mismo azul. ¿Qué descripción es correcta?. Es una paleta monocromática basada en variaciones de un mismo tono. Es una paleta complementaria porque el azul es un componente RGB. Es una paleta complementaria porque combina claros y oscuros. Es una paleta análoga porque toda variación de saturación cambia el tono.

Una interfaz usa el color de acento en casi todos los fondos y los botones principales dejan de destacar. ¿Cómo aplicar razonablemente la orientación 60-30-10?. Aplicar el reparto por separado a cada palabra para garantizar la proporción global. Reservar el acento para elementos prioritarios y dar mayor presencia al dominante, ajustando las proporciones al diseño. Convertir el acento en color dominante para que los botones compartan su fondo. Exigir que exactamente el 10% de los elementos del DOM tengan el color de acento.

Un párrafo de 16 px sin negrita presenta una relación de contraste de 3,8:1 con su fondo. Para alcanzar el mínimo AA de texto normal explicado en clase, ¿qué decisión es adecuada?. Ajustar los colores de texto o fondo y verificar una relación de al menos 4,5:1. Añadir una familia tipográfica distinta sin volver a medir el contraste. Conservarlo porque cualquier relación superior a 3:1 cumple para texto normal. Usar tonos complementarios y dar por cumplido el contraste sin medir.

Una página usa una fuente script en párrafos largos y subraya frases que no son enlaces. ¿Qué cambio mejora simultáneamente la lectura y la interpretación de la interfaz?. Mantener la script y subrayar todos los párrafos para unificar el estilo. Mantener los estilos y aumentar solo el tamaño del logotipo. Sustituir el cuerpo por una fuente decorativa y eliminar la jerarquía de tamaños. Usar una fuente legible para el cuerpo y evitar subrayados que puedan confundirse con enlaces.

Un botón de gestión usa un icono poco conocido sin texto y mezcla un trazo fino con el resto de iconos rellenos. ¿Qué solución responde mejor a las pautas del temario?. Cambiarlo por un icono decorativo aunque su significado no sea reconocible. Usar un icono coherente con la colección y acompañarlo de una etiqueta que aclare la acción. Eliminar la etiqueta de los demás botones para igualarlos al primero. Mantener el icono y ampliarlo hasta que ocupe más espacio que el contenido.

Antes de elegir fotografías y colores, el equipo necesita acordar la posición del formulario, el orden de la información y la ubicación de la confirmación. ¿Qué trabajo conviene realizar?. Crear un mockup acabado y considerar que su apariencia valida automáticamente la estructura. Redactar únicamente la paleta de la guía de estilo. Programar primero los estilos definitivos de todos los estados de botones. Crear un wireframe de baja fidelidad para revisar la estructura.

El cliente aprueba imágenes estáticas de las pantallas de reserva. El equipo necesita comprobar si una persona puede elegir pista, revisar el resumen y llegar a la confirmación antes de programar. ¿Cuál es el siguiente paso más adecuado?. Exportar las imágenes con más resolución y pedir otra aprobación visual. Conectar las pantallas en un prototipo interactivo y observar la realización de esa tarea. Dar por validada la navegación porque todas las pantallas están dibujadas. Cambiar el mapa de navegación por una lista de colores y fuentes.