Consejos para elaborar un buen diseño de interfaces web

Consejos para elaborar un buen diseño de interfaces web

Carlos Yañez

29-06-2016

El desarrollo de una buena interfaz web ha estado siempre ligado a la tecnología disponible en cada momento. En los inicios de internet la mayoría de páginas web eran estáticas y tampoco se disponía de la tecnología para dotar a dichas páginas de mayor atractivo.

Ahora tenemos muchos recursos para poder desarrollar interfaces web atractivos, usables y útiles. En este post te voy a dar una serie de consejos para poder desarrollar un buen interfaz web.

Primero conozcamos a los usuarios

Para realizar un diseño adecuado, debemos tener siempre presente el comportamiento de un usuario frente a un entorno web.

Los usuarios en una web se comportan de forma similar a cuando van a comprar en una tienda:

  • Echan un vistazo las páginas nuevas.

  • Leen por encima una parte del texto.

  • Hacen clic en el primer enlace que les llama la atención o se parece a lo que están buscando. 

  • Hay grandes partes de la página que ni siquiera miran.

  • Si la página no cumple con las expectativas la cierran y se van.

Conocidos estos puntos, debemos enfocar nuestro diseño a satisfacer este comportamiento

Realicemos diseños FUN (Funcionalidad-Usabilidad-Navegabilidad)

Una de las reglas de oro que hay que cumplir es la que sea un diseño FUN

Un interfaz web será FUNCIONAL cuando el usuario pueda llevar a cabo un proceso concreto de forma clara, rápida y accesible, sin rodeos innecesarios, ni trampas. Por ejemplo, si el usuario puede hacer algo en la web en dos pasos, no se lo hagamos hacer en siete. El peor error es hacer registros en la web de múltiples pasos.

La interfaz web ser USABLE si ofrecemos una experiencia de navegación agradable. Debemos usar colores que cansen la vista; evitar procesos que impliquen periodos largos de espera; conseguir que el usuario alcance un óptimo manejo del programa en el menor tiempo posible, etc.

Un interfaz web se considerará NAVEGABLE si permite que el usuario se mueva por toda la web de forma ágil, sencilla e intuitiva, con opciones de menú que sean claras y no inciten a la confusión.

Las claves para un diseño web eficaz

Ya hemos visto que debemos enfocar nuestro diseño a una experiencia FUN y ahora veamos las claves para conseguirlo.

  1. No hagamos pensar a los usuarios: La navegación y arquitectura de la página debe ser intuitiva, que sea fácil encontrar lo que se busca de forma clara y con una estructura limpia y no recargada.

  2. Elimina las barreras: Hay que permitir a nuestros visitantes explorar nuestro sitio web sin barreras. No podemos pedir a nuestros visitantes que para entrar en áreas de nuestro menú que se deban obligatoriamente registrarse pues eso hará que huyan inmediatamente.

  3. Mostrar claramente los elementos principales: Los elementos visuales o el texto remarcado en negrita o color atraen por si solos la mirada de nuestros visitantes. Si nos interesa que nuestro visitante se centre en algo concreto de nuestra página, deberemos destacar esa parte con los recursos mencionados.

  4. El texto si breve y claro, mejor: Es necesario ajustar el estilo de escritura a las preferencias de los usuarios y los hábitos de navegación. Es aconsejable seguir estas pautas:

  • Utilizar frases cortas y concisas.

  • Categorizar el contenido, utilizar múltiples niveles de títulos para clasificar la información y utilizar elementos visuales y listas con viñetas.

  • Utilizar un lenguaje claro y ofrecer a los usuarios una razón objetiva y razonable por la que deben permanecer en tu sitio web.

  1. Utiliza los estándares web: Para tener una experiencia de navegación agradable sobre cualquier navegador, lo mejor es seguir los estándares de desarrollo definidos por el W3C. Ello nos va a garantizar que casi cualquier plataforma y dispositivo pueda ser utilizado para navegar sobre nuestra web.

  2. Ojo a la estética y el color: un aspecto básico para que tu página web luzca profesional es el uso correcto del color y la tipografía. No uses colores chillones, fuentes tipo Comic Sans o similares. Restarán credibilidad a tu sitio web y pueden darle incluso un aspecto ridículo.

  3. Usa un lenguaje visual: Se conoce como lenguaje visual aquel que hace a los usuarios ver contenidos en pantalla y se fundamenta en 3 principios que deberemos intentar aplicar:

  • Organizar: proporciona al usuario una estructura conceptual clara y consistente. Consistencia, diseño de la pantalla y navegabilidad son conceptos importantes de la organización. Las mismas convenciones y normas deben aplicarse a todos los elementos.

  • Economizar: haz lo máximo con la menor cantidad de señales y elementos visuales. Cuatro puntos importantes a tener en cuenta: simplicidad, claridad, distinción y énfasis.

  • Comunicar: adapta la presentación a las capacidades del usuario. La interfaz de usuario debe tener equilibrio. La legibilidad, la tipografía, el simbolismo y el color o la textura deben estar adaptados de tal manera que comuniquen con éxito. Utiliza un máximo de tres tipos de letra en un máximo de tres tamaños distintos y un máximo de 18 palabras o 50-80 caracteres por línea de texto.

Podríamos seguir mencionando más claves y la verdad es que no todos los expertos se ponen de acuerdo en los fundamental de un buen diseño. Con lo que hemos visto en este post, seremos capaces de crear un interfaz agradable, funcional y usable.

¿Crees que hay algún otro aspecto a tener en cuenta para un buen diseño de interfaz web? Danos tu opinión.

Curso relacionado: Desarrollo de Aplicaciones Web

Profile picture for user Carlos Yañez
Carlos Yañez

Ingeniero Superior de Telecomunicaciones por la UPC. Director de Informática en un Laboratorio de Análisis con implantación nacional. Profesor de los cursos de Electrónica y Técnico en Sistemas Microinformaticos y Redes.