PLANO DE ESQUELETO

EL DISEÑO DE LA INTERFAZ

1. Introducción

El diseño de la interfaz es una técnica compuesta por elementos gráficos, el cual traza una ruta que logra que la navegación del usuario sea más fácil, sencilla y eficaz. Actualmente se considera que tener un buen diseño de la interfaz es mejor que un buen contenido. Además, el sitio web debe ser intuitivo para el usuario, es decir, que se entienda sin necesidad de anteponer indicaciones. Debido a ello, la interfaz es diseñada para crear y mejorar la interacción entre el individuo y lo que ofrece la organización por medio de la plataforma. Mediante este informe hablaremos de los objetivos, la funcionalidad, los principios básicos, las técnicas de mejora y el cómo detectar posibles errores en su diseño.

2. Objetivos del diseño

La interfaz tiene como objetivo principal generar la interacción entre el individuo y la máquina, para que la información que se aloje en la plataforma web llegue y se entienda de la manera correcta.  Por esta razón, se deben tener en cuenta dos términos base que permiten que el objetivo se cumpla:

  • Simplicidad: al usuario le gusta entrar a un sitio web y comprender de manera instantánea. Además, ¿a quién no le gusta llegar a su lugar de destino en menos tiempo? Con el diseño de la interfaz no se pretende dar una sola ruta, por el contrario, se brindan diversas, pero todas intuitivas.

  • Coherencia: en todo momento se debe buscar que el usuario se familiarice con el sitio web, lo cual se logra mediante términos de fácil comprensión en los menús, que haya una diferencia entre el título, subtítulo y el desarrollo del contenido, además, que los enlaces se dirijan efectivamente a su destino. En otras palabras, cuanto menos sorpresas y disgustos tengan el usuario, mayor es la efectividad del diseño de la interfaz.

3. Calidad del diseño y estabilidad funcional

La estabilidad funcional depende específicamente de que todo en la plataforma se encuentre ordenado y que al momento de clicar los enlaces se dirijan al contenido esperado. Por ejemplo, si quiero realizar la compra de un producto online y clico en la imagen del producto, pero a la hora de clicar, el producto es otro, el usuario se sentirá engañado o si el enlace arroja un error una y otra vez la persona abandonará el sitio. Por esta razón la primera impresión que tenga el usuario frente al sitio web será crucial ya que de ello depende si se queda o no. La plataforma debe tener un orden y ese orden debe ser visible y fácil de comprender.

4. Principios básicos

Para poder diseñar interfaces de usuario, cualquiera es capaz de hacerlo siempre y cuando tenga en cuenta los 6 principios básicos sobre el diseño de interfaces de usuario.

1. Interfaces claras y precisas: Hay que evitar que el usuario tenga problemas para usar el sitio web, para ello es imprescindible que el usuario pueda reconocer bien lo que está viendo, saber para qué se usa, y entender cómo la interfaz le ayudará a interactuar con la aplicación. Para ello, se deben diseñar interfaces claras y precisas recordando qué es la interacción la función principal de la interfaz De nada sirve tener una interfaz que parezca obra de arte, si esta no cumple con lo mínimo de su objetivo.

2. Dar el control a los usuarios: Hay que garantizar que el usuario sienta el control de la situación, para ello se puede añadir en varias partes de la interfaz los estatus y pasos que conlleva el proceso que el usuario esté llevando. Se debe informar en todo momento al usuario de su estado.

3. Define bien tus acciones primarias y secundarias: Se debe mantener un proceso secuencial, tratando de mantener una acción primaria por pantalla permitiendo al usuario que aprenda de manera más fácil el proceso.

4. Da importancia a la consistencia: Hay que tratar de utilizar siempre diseños genéricos para que a partir de ahí se pueda ir especificando lo necesario para cada parte.

5. Utiliza la jerarquía visual: Al establecer una correcta jerarquía entre los elementos que componen la interfaz, se establecerán los niveles de importancia que ayudarán a determinar los estilos a aplicar.

6. Organiza tus elementos de manera adecuada: Se debe aprender a agrupar elementos, relacionarlos, para que de esta manera se pueda identificar la orientación y colocación adecuada. En consecuencia, el usuario no tendrá que ponerse a averiguar cuál es la relación que existe entre un elemento y otro, porque la misma interfaz le estará proporcionando esa información.

Teniendo en cuenta estos 6 principios básicos, a continuación en el siguiente apartado se encuentran algunas sugerencias para mejorar el diseño de la interfaz.

5. Técnicas para mejorar el diseño de la interfaz

En este apartado se definen los elementos de interfaz adecuados que permiten mejorar la experiencia que tenga el usuario al navegar por un sitio web. Las siguientes técnicas son algunas sugerencias para que el usuario navegue fácilmente por el sitio web.

COLOR

  • El color atrae la atención: la selección del color hace que el usuario preste más atención o menos al contenido. Por ello, se debe tener en cuenta el color que se elige. Por ejemplo, los colores cálidos como el rojo, amarillo y naranja son llamativos, por lo que tienden a atraer la atención y el ojo del usuario tiende a buscarlos.

  • Contraste para administrar la atención: está técnica permite ordenar los elementos jerárquicamente, por ejemplo resaltando con colores oscuros elementos del sitio web más importantes e ir utilizando colores más claros para los elementos que siguen en relevancia.

ESPACIADO

  • El espacio en blanco para relacionar: agregar un espacio en blanco considerado entre cada sección es importante para que el contenido del sitio web sea más legible.

  • Espacio entre letras: está técnica es útil si se quieren elaborar títulos con estética agradable u original. Un par de píxeles de espacio entre las letras hacen una gran diferencia en el estilo de la fuente.

SELECCIÓN DE OPCIONES

  • Casillas de verificación: permiten a los usuarios seleccionar opciones, independientemente unas de otras.

  • Botones de radio: permiten a los usuarios seleccionar una opción entre una serie de opciones mutuamente excluyentes.

  • Listas desplegables: ofrecen la misma funcionalidad que los botones de radio, pero en un espacio más compacto, permitiendo presentar un mayor número de opciones de manera eficiente.

  • Cajas de lista: ofrecen la misma funcionalidad que las casillas de verificación, pero en un espacio mas compacto, permitiendo presentar un mayor numero de opciones de manera eficiente.

  • Campos de texto: permiten a los usuarios introducir texto.

  • Botones de acción: ordenan al sistema que recoja la información que el usuario ha introducido a través de otros elementos de interfaz y que haga algo con ello.

Las técnicas que se han presentado son sugerencias para mejorar la experiencia al usuario, hay muchas técnicas más y es el creador del sitio web el que debe seleccionar qué técnica es la más adecuada en cada momento.

6. Interfaces de usuario más simples

En un principio, el objetivo del diseñador siempre es diseñar una interfaz fácil de usar, simple e intuitiva. Pero cuando se empieza a diseñar la página, la simplicidad se pierde y la página pasa a ser más compleja.

Cuando una página web es compleja los usuarios no logran manejarla bien y muchas veces acaban abandonando. Para que esto no ocurra y para que los usuarios naveguen con facilidad, conviene diseñar la página lo más simple. Para lograrlo, conviene tomar en cuenta las siguientes indicaciones:

  • Eliminación de elementos innecesarios: hay que poner únicamente lo necesario. Si se intenta poner todo en un mismo lugar, al final, no se termina haciendo nada bien.

  • Disminuir el ruido visual: cuánto mayor ruido visual tenga la web, más complejo será navegar en ella. Para reducir el ruido visual conviene utilizar espacios en blanco y contrastes.

  • Reutilizar elementos: utilizar los mismos elementos para diferentes propósitos tiene dos ventajas: requiere menor tiempo de diseño y se logra una interfaz de usuario más consistente y se mejora la experiencia de la persona que utiliza el sitio web.

7. ¿Cómo saber si el diseño tiene errores?

A continuación, se van a mostrar algunos ejemplos de errores que se suelen hacer en el diseño de la interfaz para evitarlos en futuros diseños de la interfaz.

  • Es una interfaz estridente: aunque para el diseñador haya algún factor importante que quiera resaltar en la página web, puede que esto no sea interesante para el usuario. No conviene resaltar ningún producto, servicio o dependiente si no es del interés del usuario. Recordad que lo importante es lo que necesita el usuario, no el diseñador.

  • Trata de ayudar demasiado: aunque los diseñadores quieran satisfacer todas las necesidades del usuario en una sola página, esto es prácticamente imposible. Es mejor hacer una selección de lo que le resulte más necesario al usuario y dejar de lado todo lo demás. También es importante evitar das sugerencias de manera constante o atormentar al usuario con información que no es necesaria en ese momento.

  • Es demasiado diferente: es muy común que los diseñadores quieran que su página web sea innovadora o diferente al resto, pero muchas veces, estas diferencias son tan grandes, que en realidad, en vez de ayudar al usuario, terminan haciendo más difícil la navegación en la página web.

8. Referencias

  • Andrés Fernández, El diseño de la interfaz