comparte el articulo 

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

Actualizado el 05/10/2013 < > 1 Comentario

Resumen: En esta segunda parte del artículo exponemos técnicas un poco más minuciosas, las cuales nos ayudarán a continuar mejorando la interfaz de usuario de nuestro sitio web, enfocándonos en detalles que muchas veces pasamos por alto.

Continuamos con la segunda parte de las técnicas para mejorar el diseño de interfaces.

La atención que se pone sobre los pequeños detalles, es un factor determinante para que los grandes proyectos sobresalgan del resto< . Si no ponemos el interés necesario para llevar a cabo un cuidado adecuado de los detalles de nuestra interfaz de usuario, terminaremos entregando un producto funcional pero mediocre en estética.

Si bien al final del día, lo que en esencia importa es que el producto pueda realizar las operaciones que el cliente requiere, el resultado puede variar si no desplegamos de manera adecuada el proceso. Elementos de la interfaz como los botones, formularios y pestañas pueden ser omitidos o mal interpretados si no son presentados correctamente.

Es por este factor que en esta segund parte del artículo nos enfocaremos en técnicas un poco más minuciosas, las cuales nos ayudarán a continuar mejorando la interfaz de usuario de nuestro sitio web, enfocándonos en detalles que muchas veces pasamos por alto.

El espacio en blanco para relacionar

Uno de los elementos que tiene más influencia sobre la apariencia de una interfaz, es el espacio en blanco que existe entre los elementos de la página. Ese tramo que dejamos libre, y que se encarga de separar los elementos es muy importante para que el usuario pueda intuir relaciones.

Mediante la manipulación de los espacios en blanco, podemos indicar las relaciones entre ciertos elementos o grupos de elementos. Por ejemplo, si ponemos un título arriba de un párrafo, y estos se encuentran separados por un espacio normal, estamos dándole a entender al usuario que ese título corresponde al texto que le sigue en la parte inferior.

Pero si repetimos este proceso para otras secciones compuestas por títulos y párrafos, puede resultar confuso para el usuario si no agregamos un espacio adecuado. Por ello, debemos agregar un espacio considerado entre cada sección, para que de esa manera nuestro contenido sea más legible.

De esta manera definimos bloques de secciones únicamente modificando pequeños detalles de la interfaz, esto permitirá que las relaciones entre elementos sean identificadas más fácilmente por el ojo del usuario.

Espacio entre letras

Si tu eres un amante de la tipografía puede que el diseño web te resulte una profesión bastante frustrante, ya que por defecto son pocas las opciones con las que se cuenta para elegir la fuente con la que se mostrará el contenido de nuestro sitio.

Pocas fuentes web son seguras, ya que habrá algunas que se muestren bien en alguna máquina y otras no, dependiendo de varios factores que van desde el navegador hasta el sistema operativo.

A eso, tenemos que aunarle el hecho de que no existen muchas variantes para modificar su estilo, pero a pesar de eso tenemos la ventaja de que cada letra esta bajo nuestro nivel de control, por lo que podemos utilizar el espacio como aliado para tratar de dar un estilo más decente, y por consecuencia una mejor presentación.

“Tracking” es el término utilizado en el campo de la tipografía para describir el ajuste del espacio entre las letras que forman parte de una palabra, y gracias a la propiedad “letter-spacing” de CSS, tenemos la oportunidad de llevar a cabo esta técnica.

Si la utilizamos con moderación, esta propiedad puede resultar muy eficaz para mejorar el aspecto de nuestros títulos y cabeceras, pero si lo aplicamos en el cuerpo de un párrafo o bloque de texto muy largo, puede causar el efecto contrario. Si se utiliza con letras muy pequeñas o en textos de lectura continúa, puede que los haga perder la legibilidad que la distancia por defecto agrega.

Esta técnica puede resultar útil si se quiere elaborar títulos con estética más agradable u original. Un par de píxeles de espacio entre las letras hacen una gran diferencia en el estilo de la fuente, por lo que tienes que ser cuidadoso y no utilizar grandes distancias.

h2 {
    font-family: Century Gothic;
    font-size: 4em;
    letter-spacing: -5px;
    font-weight: normal;
}

Botones más ricos en contenido

Es común que al desarrollar una aplicación hagamos uso de ventanas emergentes, diálogos y cuadros, para condicionar una acción. En su mayoría, estos diálogos cuentan con botones de opción, los cuales al ser seleccionados determinan las operaciones que prosiguen al llamado, es por ello que la información que se despliega en ellos toma una relevancia considerable.

Por ejemplo, si en nuestra aplicación incluimos un bloque de código para que al momento de encontrar una decisión despliegue una ventana de confirmación, lo que generará por defecto será un pop up con opciones cortas y muy sencillas como “Sí” y “No”. Esto causará que el usuario tenga que leer completamente el mensaje de la ventana, para estar seguro que el botón que esta aplastando es el correcto.

Esto no tiene nada de malo, pero podríamos mejorarlo y sobre todo acelerar el proceso para el usuario, agregando cierta descripción para que enriquezca el contenido. De esa manera, en lugar de mostrar solamente un “Sí” podemos agregar algo como “Guardar” y en vez de un “No” utilizar “No Guardar”, de esta manera el usuario no necesita confirmar la manera en que hicimos la pregunta dentro del diálogo.

Con esto no queremos decir que debamos caer en una verborragia, ya que eso causaría un efecto totalmente contrario, perderíamos la atención del usuario y simplemente daría clic sobre el primer elemento que parezca adecuado. Como punto final para esta técnica, debes recordar que sólo estamos recomendado su uso para ventanas de opciones, los botones en una interfaz normal deben permanecer cortos en texto.

Estilos a los elementos enfocados

Es común que manejamos varios tipos de elementos a lo largo de un formulario, por ello es fácil que la atención del usuario se pierda si no incluimos una ayuda visual. Podemos agregar un estilo individual para el campo donde actualmente se encuentra colocado el puntero, esto ayudará al usuario a identificar la parte que sigue en el proceso, y donde debe de introducir la información.

input:focus {
    border-color: #000;
    background-color: #CCC;
}

El personalizar tus elementos de formulario agregará una cierta estandarización que persistirá en todos los navegadores, permitiéndote garantizar una imagen homogénea de tu sitio.

Publicado el 26/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. Fernando

    Muy interesante. Agradezco que compartan este conocimiento. Me parece importante el último punto, pues es algo que suele omitirse y que definitivamente marca la diferencia cuando se emplea bien.

    Hasta pronto.

    Domingo, 3 de febrero 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras