comparte el articulo 

Técnicas para mejorar el diseño de nuestra interfaz: Parte 1

Actualizado el 05/10/2013 < > 1 Comentario

Resumen: Primera parte de un artículo donde presentamos una serie de técnicas que te serán de gran utilidad para tus proyectos de diseño de interfaz de usuario.

En la actualidad, el diseño de interfaces para usuarios se ha convertido en un tema tan relevante, que la mayor parte del tiempo destinado para llevar a cabo las tareas de diseño web, se asigna para buscar mejorar la experiencia del usuario y tratar de obtener las mejores formas de presentar información.

Todo el tiempo invertido en esta clase de proyectos tiene su justificación, ya que el diseño de interfaces es uno de los factores pilares para determinar si es correcto o no el desempeño de un sitio web. Es por esta razón, que para encaminar adecuadamente el diseño de un sitio se debe optar por técnicas que permitan la elaboración de interfaces bellos y funcionales.

En este artículo presentaremos una serie de técnicas que te serán de gran utilidad para tus proyectos de diseño de interfaz de usuario. En sí, estas técnicas no están vinculadas a un tema específico, simplemente son sugerencias que te permitirán mejorar la experiencia que tenga el usuario al navegar por tu sitio.

El color atrae la atención

El utilizar el color como herramienta para llamar la atención es una de las técnicas más fundamentales en el diseño de interfaces. El objetivo de utilizar esta técnica es centrar la atención del usuario sobre los elementos importantes, estableciendo sobre ellos un color que resalte sobre el resto, claro, siempre respetando el patrón con el que diseñamos el resto del sitio para que no desentone y cause una sensación de desconfianza.

Debes tener mucho cuidado con los colores que eliges para ciertos elementos y secciones de tu página, ya que si no haces una elección correcta puedes terminar dando más relevancia a ciertas partes que realmente no lo ameritan, y dejando en segundo plano secciones donde muestras contenido que tú consideras relevante para el usuario.

Por ejemplo, si en tu sitio manejas una paleta de colores oscura, digamos utilizas negro y gris en el 80% de la estructura, y un día deseas agregar un botón de registro o uno para realizar donaciones, no debes utilizar el color negro o un gris fuerte para el nuevo elemento, ya que la relevancia del botón se perderá. Para esa situación, un botón de color rojo servirá mejor, ya que atraerá más la vista y es muy probable que aumenten los registros o las donaciones gracias a ello.

Los colores en tonos cálidos como el rojo, amarillo y naranja son llamativos por naturaleza, por lo que tienden a atraer más la atención y el ojo del usuario tiende a buscarlos. Además de esto, cuando se ponen en contraste con colores fríos como el azul o el verde, tienden a crear la ilusión de ampliar el elemento que cuenta con colores cálidos.

Esto significa que un botón de color naranja sobre un fondo azul se ve como si estuviera fluyendo hacia fuera y toma el primer plano del espectador. Por el contrario, un botón azul en un fondo naranja crea la sensación de que el elemento desea permanecer en el fondo.

Contraste para administrar la atención

El simple hecho de manejar distintos colores hace que el usuario pueda hacer distinción entre elementos, pero si a esto le aunamos la propiedad del contraste, esto nos permitirá crear un patrón jerárquico dentro de nuestro diseño.

Lo que nos permitirá crear una sensación de jerarquía, será el uso de colores en tonalidades similares, dando colores en escala mayor a los que son más relevantes, e ir disminuyendo la escala según la importancia el elemento. Una de las maneras más adecuadas de llevar a cabo esta práctica, es añadiendo contraste mediante el uso de colores oscuros para resaltar los elementos importantes, y utilizar colores más claros para los que siguen en relevancia.

Si por ejemplo, tuviéramos un blog donde publicamos artículo a diario, nuestra portada lucirá sobrecargada de información si no aplicamos un contraste adecuado. Para ello, podemos optar por asignar un color negro para los títulos, mientras que las fecha de publicación, el número de comentarios, el nombre del autor, o algún otro meta data, puede ir de color gris; esto indicará que el título es mucho más relevante que el resto de la información.

Este efecto se logra gracias a que el color oscuro crea la ilusión de que el título esta enfocado, mientras que el resto de la información parece desvanecerse en el fondo. Si por ejemplo quisiéramos agregar más relevancia al nombre del autor, podemos utilizar un color gris más fuerte, que sea intermedio entre el color del título y el resto de los datos.

El nivel de contraste es una herramienta muy poderosa, si decidiéramos invertir los colores y utilizar el negro para la meta data y el gris para el título, veríamos como los titulares se desvanecen y esto puede hacer perder interés al usuario. Como ya mencionamos esta técnica se puede utilizar en blogs, pero no es exclusiva, cualquier sitio de grandes contenidos, como foros o las redes sociales, pueden hacer uso de ella para resaltar elementos fácilmente entre un montón de información.

Enlaces en bloques

Los elementos de tipo enlace, por defecto son desplegados de manera “inline” dentro de la estructura DOM de un sitio, es decir se muestran como un elemento alineado cuya área seleccionable sólo abarca la altura y el ancho del texto que contiene el link. Esta área es la única parte donde el usuario puede realizar el clic para poder llegar al destino, lo que puede causar molestías en caso de que el enlace sea muy pequeño.

Se puede buscar incrementar el área de clic de los enlaces para crear una mejor experiencia de usabilidad en nuestro sitio, para lograrlo basta con agregar unas cuantas propiedades CSS a este tipo de elemento. Primero podemos optar por añadir un cierto “padding” para agregar espacio alrededor de la palabra, y posteriormente de ser necesario, podemos convertir a bloque la manera en que se despliegan los elementos de tipo enlace.

a {
	display: block;
	padding: 5px;
}

Obviamente una mayor área de clic, hace que resulte más sencillo para el usuario el llegar al destino que apunta el enlace, ya que hay menos oportunidad de fallar.

Este factor se debe tener en total consideración al momento de realizar menús y desplegar listas con enlaces en barras laterales, ya que el encontrarnos con enlaces que contengan palabras muy largas y muy cortas en una misma lista, puede causar mal aspecto en el diseño y confusión en el usuario al no poder dar clic sobre toda una área que se encuentra vacía pero al mismo nivel que la palabra.

Generalmente cuando creamos una lista de enlaces dentro de nuestro sitio, omitimos el factor de la uniformidad, por lo que simplemente dejamos los elementos desplegarse en su forma natural, sin importar que a veces puede resultar confuso para el usuario.

Publicado el 22/06/2012, última actualización 05/10/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

Añadir Comentario (Subir al texto)

1 Comentario

  1. Napoleon Flores Salvatierra

    La explicación e clara y deja una motivación para seguir leyendo. Felicitaciones!!!

    Lunes, 2 de julio 2012

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras