Las mejores prácticas para el desarrollo de aplicaciones web (parte 2)

Por

Sigamos con los mejores consejos para tener mucho éxito en el desarrollo de aplicaciones web. Si estás perdido y no sabes de lo que estamos hablando, te recomiendo que primero revises el post de la semana pasada para que entres en contexto.

Bueno, nos habíamos quedado que la mayoría se enfrenta al dilema de no saber qué sacrificar si la calidad de la imagen o la velocidad de descarga y más puesto que la mayoría siempre quieren tener los famosos carruseles en su página web.

Pero hay otras maneras de diseñar de manera atractiva, sin usar dichos elementos, y esto nos lleva a nuestra siguiente práctica.

 

Usa iconos


Si se usa de manera adecuada, la iconografía puede sustituir grandes bloques de texto, lo cual es demasiado útil para cuando los usuarios utilizan pantallas pequeñas.

Te recomiendo que utilices el formato de gráficos vectoriales escalables (SVG), puesto que estos pueden cambiar de tamaño según las dimensiones del dispositivo, y sin tener que aumentar el tamaño de archivo de las imágenes mismas. Además, este tipo de archivos pueden ser animados con CSS para añadirles algún efecto.

 

Presta atención al tamaño de fuente


La tipografía es una parte importante del diseño responsivo o no responsivo; pero cuando lo es, tienes que prestar todavía más atención cuál será tu elección. Debes asegurarte de que tu fuente seleccionada funciona bien y mantiene la sensación que buscas, sin importar si se utiliza una escala grande o pequeña. 

Algunas tipografías que están conformadas por letras delgadas que pueden verse bien en pantallas grandes, pero que se deforman o carecen de claridad cuando se dimensionan para tamaños pequeños.

 

responsive.png

 

Si de todas maneras quieres usar una fuente con letras finas, asegúrate de que sea legible incluso en su tamaño más pequeño, o considera sustituirla por una diferente para esos casos.  

Tips:

  • Entre más ancha sea la columna, necesitarás más line-height (altura vertical entre cada línea de texto).
  • El tamaño de letra por defecto todos los navegadores, es de 16pt.
  • Asegúrate de que tus títulos sean 1.6 más grandes que el cuerpo de texto.
  • Tiene que haber contraste entre el color del texto y los links con el tamaño de fondo del sitio.

 

Métodos de entrada


Diferentes dispositivos significan, diferentes métodos de entrada.

Para los usuarios de computadoras de escritorio es muy común que utilicen un ratón y un teclado para introducir información en un formulario, pero la experiencia es muy diferente para las personas que están utilizando una tablet, Smartphone o cualquier otro dispositivo con pantalla táctil.

Así que:

  • Sé generoso con el tamaño de los botones y las zonas se puede hacer clic.Para los viewports de smartphones, los botones deben ser de aproximadamente 44 puntos cuadrados, así como nos lo recomiendan Apple en su guía iOS Human Guidelines
  • Prueba tu aplicación con al menos cinco usuarios en los dispositivos reales que serán utilizados para acceder a ella.

 

Tests de usabilidad 


Planear la forma en que tu app se escalará para diferentes tamaños, es una parte fundamental para el diseño de la misma.

Ser capaz de interactuar con tus diseños en tiempo real, te mostrará cómo trabaja realmente y por lo tanto podrás analizar qué sirve y tomar decisiones en base a cómo mejorar aquellos elementos o funciones que no se desempeñan como deberían.

test.png

Además de tus propias pruebas, se recomienda que realices otros tipos de tests pero ahora con usuarios reales. Haz que utilicen tu aplicación en diferentes dispositivos; si bien esto multiplica el número de usuarios necesarios para la prueba, es la forma más segura de evitar el sesgo debido al diseño de la familiaridad.

Prueba cada punto de ruptura y luego analiza el desglose porcentual de usuarios en función del tipo de dispositivos. Descubre la mayoría de los problemas de usabilidad y resuélvelo.

Hay servicios como UserTesting que te apoya en este tipo de pruebas a precio accesible, y manejan el reclutamiento, la creación de la tarea, la moderación y el análisis.  Y no tienes el suficiente tiempo o dinero, puedes probar varios puntos de ruptura con los mismos usuarios, sólo asegúrate de que cada uno lo pruebe con un orden diferente de dispositivos para como dijimos anteriormente; minimizar el sesgo de la familiaridad de diseño.

 

Y eso es todo, ya estás listo para desarrollar increíbles aplicaciones web. Si has encontrado los útiles consejos, echa un vistazo a las mejores prácticas para un excelente diseño de interfaz.


 

cta-apps