Mas de lo mismo
Si nunca ha oído hablar de un patrón de interfaz de usuario, aquí tiene una explicación rápida: como ocurre con la mayoría de las cosas, especialmente durante el desarrollo de software, a menudo se puede agrupar un gran conjunto de elementos, ya que forman un patrón reconocible. Un ejemplo de software sería la definición de patrones arquitectónicos o patrones relacionados con un lenguaje de programación específico.
Sin embargo, también existen patrones comunes al diseñar la interfaz de usuario. Con solo echar un vistazo rápido a algunas aplicaciones en el dispositivo en el que estás leyendo este artículo, ciertas cosas se repiten eventualmente:
- vistas modales con una acción de guardar, cancelar y / o eliminar
- secciones de elementos que contienen texto, por ejemplo, listas con una acción de deslizar para cada elemento de la lista
Entonces, pensando un paso más allá, ¿hay algún recurso que pueda aprovechar al diseñar una interfaz de usuario usted mismo? ¿Quizás una colección de patrones que otros diseñadores ya han reconocido y formalizado? Bueno, ¡no haría esta pregunta si no tuviera la respuesta ya! ¡Hora del capítulo dos!
Capítulo dos (el anunciado)
En busca de una definición formal, el equipo de diseño de carbono de IBM tiene una excelente: los patrones son soluciones de mejores prácticas sobre cómo un usuario logra un objetivo. Muestran combinaciones reutilizables de componentes y plantillas que abordan los objetivos comunes del usuario con secuencias y flujos.
Echemos un vistazo a algunos ejemplos. Las siguientes entradas se han extraído del sitio Carbon Design de IBM, así como de la página de patrones Material UI de Google. No pude encontrar un sitio para Fluent Design de Microsoft, pero vinculé su página de inicio en el apéndice.
Buscar
La búsqueda de contenido es uno de los pilares básicos de la mayoría de las aplicaciones, por lo que es una opción perfecta para definir un patrón de interfaz de usuario para él. Independientemente de su uso final (ya sea una búsqueda global o una búsqueda específica en una página de contenido), la interfaz de usuario de búsqueda tiene que ofrecer
- una entrada de texto
- un marcador de posición textual si aún no hay ninguna entrada disponible
- un icono que indica claramente el propósito de la entrada de texto, por ejemplo, mediante el uso de una lupa, además de actuar como disparador para una nueva búsqueda
En ciertos casos, una etiqueta de sugerencia puede ayudar a distinguir entre diferentes tipos de contenido o brindar ayuda en caso de entrada no válida. Cuantas más condiciones tenga que manejar una búsqueda, mejor podrá adaptarse una búsqueda a este requisito agregando menús de filtro explícitos.
Diálogo
Uno de los patrones de interfaz de usuario más destacados. Los cuadros de diálogo permiten que una aplicación muestre información sin perder el contexto general de un sitio. Esto se logra al no cubrir toda la ventana, sino solo una parte más pequeña. Los diálogos interrumpen el flujo de trabajo actual del usuario y, por lo tanto, solo deben considerarse necesarios cuando una parada en el flujo de trabajo es realmente válida. Solo deben manejar tareas pequeñas y tener un enfoque claro en lo que deben lograr. Por ejemplo, deshaga los cambios no guardados o realice una acción importante.
Estados vacíos
Aunque pueda parecer extraño al principio, los estados vacíos son muy comunes en las aplicaciones. Es importante comunicar al usuario que no hay datos disponibles y, idealmente, explicar por qué es así. Dependiendo del contexto, una pista sobre cómo resolver el estado vacío puede ayudar mucho a crear una buena UX. Por ejemplo, un usuario buscó algo pero no pudo encontrar nada. Este podría ser un caso de uso en el que sugerir una consulta de búsqueda diferente podría ayudar al usuario a realizar la tarea. En todos los casos, cada vista que representa un estado vacío tiene que ser contextual. Un ejemplo negativo sería algo como "Esto no funcionó. Inténtelo de nuevo más tarde ”.
No trate los estados vacíos como una ocurrencia tardía en el proceso de diseño de su interfaz de usuario. Si se implementan correctamente, permiten a los usuarios continuar con el flujo de trabajo sin problemas. Los estados vacíos que detienen todo el flujo de trabajo son en realidad el peor de los casos, aparte de los bloqueos de aplicaciones.
Solo un comienzo
Este fue un vistazo rápido a algunos patrones de IU que elegí de Carbon Design de IBM, así como de la página de patrones de Material UI. La aplicación de patrones de IU a su aplicación también puede ayudar en gran medida a reducir la fricción entre el flujo de trabajo de un usuario y la interfaz de usuario para realizar la tarea. El diseño de la interfaz de usuario puede ser bastante desafiante, por lo que apoyarse en los hombros de gigantes aprendiendo de los estudios de UX existentes ayuda mucho a mejorar la percepción de los usuarios sobre el comportamiento de su aplicación.
