intive Argentina Blog

Diseño IU-UX

Este artículo es una forma de centralizar y unificar los pensamientos y las buenas prácticas que FDV Solutions realiza durante el desarrollo de una aplicación, ya que es muy importante para FDV centralizar el conocimiento para futuros desarrolladores en una fuente local no dependiente de Internet.

El desarrollo de aplicaciones de iOS abarca los siguientes temas:

  • Deferencia. La interfaz de usuario ayuda a entender e interactuar con el contenido, pero nunca compite con ella.
  • Claridad. El texto es legible en todos los tamaños, los iconos son precisos y lúcidos, los adornos son sutiles y apropiados, y un enfoque más preciso en la funcionalidad motiva el diseño.
  • Profundidad. Las capas visuales y movimiento realista imparten vitalidad y aumentan el deleite y la comprensión de las personas.

Ya sea que estés rediseñando una aplicación antigua o creando una nueva, considera enfocar eltrabajo de esta manera:

  1. Mirar más allá de la interfaz de usuario para la funcionalidad principal de la aplicación y afirmar su relevancia.
  2. El uso de los temas de iOS para informar el diseño de la interfaz de usuario y la experiencia del usuario. Añadir detalles y adornos con cuidado y nunca a título gratuito.
  3. Asegúrate de diseñar la interfaz de usuario que se adapte a diferentes dispositivos y modos para que los usuarios puedan disfrutar de la aplicación en tantos contextos como sea posible. Durante todo el proceso, estate preparado para desafiar a los precedentes, cuestionar los supuestos, y dejar que un enfoque en el contenido y la funcionalidad motiven cada decisión de diseño.

 

Formato del contenido

Crear un diseño que se ajuste a la pantalla de un dispositivo iOS. El contenido debe ser visible sin otra interacción (es decir: zooming, scrolling). Las inserciones y contentMode imagen dentro de los widgets también deben ser coherentes en la aplicación entera. De lo contrario, en la aplicación se verá como que algunos ImageViews están recortando parte de la imagen, cuando en realidad están mostrando la parte de la imagen cuya relación de aspecto permite que se muestre.

 

Controles Touch

Utiliza elementos de la interfaz que están diseñados para gestos táctiles para crear interacción y hacer que su aplicación sea fácil y natural. Mantenla fresca pero no intentes reinventar la rueda.

 

Elementos interactivos

Para señalar la interactividad, las aplicaciones integradas utilizan una variedad de señales, incluyendo la respuesta a la presión, el color, la ubicación, el contexto e iconos y etiquetas significativas. Los usuarios rara vez necesitan decoraciones adicionales para mostrarles que un elemento en pantalla es interactivo o sugerir lo que hace. Los diseños planos y simples son buenos, pero recuerda que es muy importante tener feedback en cada evento (es decir: Cuando se pulsa un botón hay varios estados que se pueden ser personalizados.

 

Targets pulsables

Crea controles que midan al menos 44 x 44 puntos, para que puedan ser pulsados con un dedo de forma precisa. UX es algo más que seguir las reglas estáticas, se trata de hacer feliz al usuario durante el uso de la aplicación. Una regla mental puede ser: «Si no acierto dos veces, tengo que solucionarlo». Esto se aplica a todo tipo de widgets presionables.

 

Texto, Ícono, Imágenes y Tamaño

El texto debe ser de al menos 11 puntos, para que sea legible a una distancia de visión normal sin la necesidad de hacer zoom. Una regla general puede ser: «Si no puedo entender lo que estoy leyendo en mi dispositivo con una posición normal de brazos, entonces, no está bien».

 

Contraste

Asegúrate de que hay un amplio contraste entre los colores de las fuentes y el color de fondo para que el texto sea legible. Esto aplica también a todos contraste entre el primer plano, medio y widgets de fondo ya que por lo general todos ellos son solapados por alfa. Comúnmente, vemos fondos borrosos con valores alfa pequeños, pero no es la mejor solución disponible.

 

Espaciado

No permitas la superposición de texto. Mejora la legibilidad mediante el aumento de altura de la línea o el espaciado entre caracteres. Consejo: No tengas miedo de dejar espacio entre widgets. La compresión es ruidosa para los ojos.

 

Alineación

Alinear texto, imágenes y botones para mostrar a los usuarios cómo se relaciona la información. Esto requiere un cuidado especial debido a que la distribución automática puede modificar los diseños entre diferentes dispositivos y complicar las cosas. Podemos concluir que el desarrollo de una aplicación móvil es un arte y también una moda. Esto significa que el desarrollador tiene que ser muy consciente de las tendencias actuales y la estética en el loop. Pero, sobre todo, siempre tiene que estar atento a la UX y nunca olvidar que no importa qué tan bonito es un widget. Si no es utilizable, no vale la pena.

Daniel Antoriano Takagaki

Daniel Antoriano Takagaki es desarrollador de software en intive desde Octubre 2012. Taka es Técnico en desarrollo de videojuegos, egresado de la Escuela Multimedial Leonardo Da Vinci. Además de desarrollarlos, también los juega, dado que el gaming es uno de sus hobbies. En la compañía, integra la brigada IOS.  

Deja un comentario