El diseño de la interfaz web

La interfaz web son elementos gráficos que permiten al usuario acceder a los contenidos, navegar e interactuar. Para lograr que un usuario se quede y vuelva, el diseño de la interfaz es importante.

Para que un diseño web sea efectivo, debe lograr que los usuarios del sitio puedan acceder con facilidad a los contenidos, interactuar con eficacia con todos los componentes y sentirse cómodo en forma permanente, y todo ello sin siquiera pensarlo.

El elemento que consigue que esto sea posible es la interfaz, en cuya preparación y diseño se debe poner especial atención.

Una parte importante de los éxitos o fracasos de los sitios depende en gran medida de este elemento fundamental del diseño. Además, el diseño de interface debe perseguir hacer webs usables.

¿Qué es la interfaz de una web?

El concepto de interfaz es muy amplio y se refiere a todo sistema que permite el contacto y la funcionalidad entre dos sistemas diferentes.

Por ejemplo, los botones y la pantalla del teléfono celular conforman la interfaz, ya que permite que el usuario pueda emplear las funciones que este aparato ofrece.

En definitiva, la interfaz web es el conjunto gráfico que permite la presentación y la navegación del sitio.

Esto se consigue con la inclusión de elementos comunes a toda la web que son estándares, haciendo que los usuarios tengan completo control sobre las funcionalidades del sitio desde el momento mismo de entrar a él sin que para ello deba tener amplios conocimientos ni preparación anterior alguna.

Una página web puede contar con los mejores contenidos en el género que se desarrolla, pero indefectiblemente fracasará si su interfaz no permite un rápido y cómodo acceso a los mismos por parte de los usuarios.

Por el contrario, una página web cuyos contenidos sean de menor calidad (sin que éstos sean malos, por supuesto) pero cuya interfaz permite que sus usuarios naveguen en forma sencilla, tengan acceso en forma inmediata al contenido que desean e interactúen de forma fluida, tendrá un mayor éxito.

¿Diseño Personalizado o plantillas?

En la actualidad la mayoría de diseñadores web utilizan plantillas predefinidas de gestores de contenido populares como Wordpress o Prestashop.

La utilización de plantillas de diseño web ahorra mucho tiempo a los diseñadores aunque no es tan personalizado como un diseño desde cero.

Encontrarás muchos profesionales y agencias de diseño web que apuestan por las plantillas para ahorrar en tiempo y recursos. Sin embargo, también existen empresas de diseño web como Lobocom que prefieren realizar diseños web personalizados y evitar las plantillas para dar un toque exclusivo a sus trabajos.

Un diseño personalizado nos desmarca de las páginas web con diseños estándar de plantillas muy conocidas por los diseñadores, aunque requiere un trabajo extra.

Objetivos al diseñar una interfaz web

La finalidad de un buen diseño de interface es proporcionar un marco de uso que permita realizar las tareas de la mejor forma posible. Por eso, los objetivos de un diseñador de interfaces deben ser dos:  la simplicidad y la coherencia.

El hecho de que una persona deba realizar una extensa navegación por el sitio para hallar lo que busca en él es totalmente contraproducente. Por el contrario, si alguien que visita un sitio cuenta con varias herramientas que le permiten acceder rápidamente a aquello que le interesa, seguramente volverá.

La simplicidad está dada por varios factores a tener en cuenta. El primer concepto importante es que los elementos gráficos o textuales que componen la interfaz deben ser claros y de fácil identificación.

Un ejemplo: el flujo de vehículos por las calles de una ciudad se encuentra regulado por una serie de sencillos elementos gráficos (la interfaz) que permiten un tránsito ordenado.

¿Qué sucedería si dichos elementos gráficos fueran de comprensión compleja? El caos dominaría el tráfico de la ciudad, ya que, mientras algunos conductores no respetarían la señalización, otros se detendrían a intentar adivinar que significa cada uno de aquellos jeroglíficos.

Volviendo a las interfaces web, un ejemplo de simplicidad lo encontramos en la página principal del buscador Google.

También es importante que la relación que exista entre los diferentes elementos que componen el sitio, como títulos, subtítulos, enlaces, menús, etc., sea coherente.

En el siguiente ejemplo, vemos una página cuya navegabilidad es muy sencilla e identificable, gracias a un simple pero efectivo menú, un buscador y links a varias secciones importantes:

Calidad del diseño y estabilidad funcional

Si ingresamos a una tienda física y nos encontramos con que el piso está sucio, cuelgan telas de araña del techo y los dependientes se encuentran desaliñados, seguramente permanezcamos poco tiempo, no compraremos nada y no volveremos a entrar. Lo mismo sucede con los sitios web.

Lo mismo sucede con el funcionamiento del sitio. Nada más desagradable que encontrarse con un sitio donde abundan los mensajes de error, tiene enlaces rotos, formularios que no funcionan, etc.

La funcionalidad del sitio debe permanecer siempre en o cercana al cien por ciento. El usuario debe tener claro que siempre que realiza una acción, esta tiene la respuesta que desea.

Principios básicos sobre el diseño de interfaces de usuario

Para poder diseñar interfaces de usuario, no hace falta de mucho, cualquier persona con acceso a un ordenador con conexión a Internet puede intentar hacerlo, se toman unos cuantos cursos online y en un par de meses podemos creernos listos y preparados para empezar a diseñar.

Pero el punto clave está en saber hacerlo correctamente, ya que si bien muchos se aventuran a realizar esta clase de proyectos, son pocos los que respetan los principios básicos que esto demanda.

Interfaces claras y precisas

Al diseñar elementos de manera clara creamos confianza en el usuario, pero si en vez de eso le entregas una página desordenada y además con una interfaz poco familiar, el usuario puede tener problemas para usar tu página web.

Recuerda bien que las interfaces son diseñadas para provocar la interacción entre el usuario y lo que tú ofreces, por ello deben ser elaboradas de manera que iluminen el sendero que este debe seguir.

Si bien las interfaces pueden ser modificadas en base a gustos y patrones, debes recordar que tienen a la interacción como función primordial, de nada nos sirve tener una interfaz que parezca obra de arte, si esta no cumple con lo mínimo de su objetivo.

Da el control a los usuarios

Las personas se sienten mucho más seguras cuando tienen el control de una situación, si el entorno de tu sitio no es seguro para el usuario, este optará por abandonar el lugar.

Para evitar esta clase de situaciones, debemos garantizar que el usuario sienta el control de la situación, para ello podemos añadir en varias partes de la interfaz los estatus y pasos que conlleva el proceso que están llevando.

Como complemento, trata de crear interfaces para cubrir todos los casos de uso, si el usuario ha llegado a un punto donde tú ya has obtenido lo que requerías, no te olvides de él y proporciona alguna clase de mensaje que le permita saber que sus metas en el proceso han sido alcanzadas.

Define bien tus acciones primarias y secundarias

Debemos definir bien cuales son las acciones principales que el usuario debe llevar a cabo en nuestro sitio, para que después, en base a eso, enfoquemos el diseño de la interfaz. Para lograr un proceso exitoso, debemos evitar que este tipo de acciones se vean interrumpidas por distracciones.

Trata de mantener una acción primaria por pantalla, no confundas al usuario con diversos caminos y mantén un proceso secuencial.

En caso de necesitar varias acciones dentro de una misma pantalla, estas se catalogarán como acciones secundarias. Una acción secundaria siempre dependerá de la acción primaria que se eligió previamente, por lo que su diseño no debe de resaltar más que la acción principal.

Da importancia a la consistencia

Siguiendo con la base de los principios anteriores, debemos establecer que el diseño de elementos debe realizarse de manera consistente, tratando siempre de utilizar diseños genéricos y a partir de ahí ir especificando lo necesario para cada parte.

Sin embargo, esto no significa que se debamos caer en el otro extremo y llevar esta práctica al abuso de estilos similares para cada caso de uso.

No debemos tratar de relacionar o emparentar elementos que no cuenten con un comportamiento coherente o relación lógica con los otros del grupo establecido.

Es decir, si agrupamos un conjunto de elementos dándoles una característica de diseño específica, no debemos añadir esta misma característica a otro elemento que no tenga absolutamente ninguna relación con los anteriores.

Utiliza la jerarquía visual

Cuando un usuario ve las mismas cosas, en el mismo orden y sin ninguna referencia, su interés se irá rápidamente. Para evitar esto debemos crear una visualización clara de los elementos que componen nuestra interfaz, estableciendo niveles de importancia que nos ayuden a determinar los estilos a aplicar.

Al establecer una correcta jerarquía entre los elementos que componen tu interfaz, darás un respiro a los usuarios que navegan por tu sitio y automáticamente tu estructura parecerá mucho más ordenada.

Organiza tus elementos de manera adecuada

Para poder llevar nuestra interfaz a la organización, debemos aprender a agrupar elementos, relacionarlos, para que de esa manera podamos identificar la orientación y colocación adecuada.

De esta manera, 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.

Además de esto, debes tratar de mostrar en pantalla únicamente lo que sea necesario, no trates de desplegar todo en unos cuantos píxeles, el usuario te lo agradecerá.

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

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.

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.

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.

Contraste para administrar la atención

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 del elemento.

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 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 está 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.

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: -2px;
    font-weight: normal;
}

Estilos a los elementos enfocados

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;
}

Cómo hacer interfaces de usuario más simples

Cuando realizamos la planeación de un sitio, en principio, el diseñador siempre busca diseñar una interfaz limpia, fácil de usar, amigable e intuitiva. Pero esto se va perdiendo conforme la elaboración del sitio va avanzando y la complejidad va aumentando.

Para evitar esto debemos tomar las medidas necesarias y reducir la complejidad del sitio, de tal manera el usuario será recompensado con una experiencia gratificante al navegar por nuestro sitio.

Eliminación de elementos innecesarios

Una de las primeras cosas que debemos hacer al evaluar nuestro sitio, es buscar utilidades y aplicaciones que la gente realmente no usa.

Esta demostrado que la mayoría de los usuarios que ingresan a un sitio sólo utilizan la llamada columna vertebral de este, dejando de lado funciones pequeñas y complementos que se pueden ir creando a la marcha para tratar de solucionar más problemas de los que en principio se plantearon.

Para llegar a obtener sitios y aplicaciones eficientes se debe recurrir a la eliminación de propiedades y funciones innecesarias.

Si algo no ayuda a la mayoría de los usuarios a realizar sus tareas en el sitio web, entonces probablemente se debe dejar fuera del proyecto.

Al principio este ejercicio te puede resultar difícil, ya que todo lucirá necesario, pero cuando empieces a observar la manera sencilla en que los usuarios se mueven a través de tu web, te darás cuenta que fue justo y necesario remover dichos complementos.

Disminuir el ruido visual

Las dos herramientas principales para reducir dicho ruido visual, son los espacios en blanco y el contraste.

El espacio en blanco, es aquel que existe como separación entre los elementos que componen el DOM de nuestro sitio. Este espacio debe considerarse nuestra principal herramienta de diseño, y se debe buscar utilizarlo siempre sobre cualquier otro elemento.

Una interfaz bien delimitada y con los espacios necesarios producirá una fácil comprensión por parte del usuario.

Mientras que el espacio en blanco se debe utilizar en abundancia, el contraste se debe utilizar lo menos posible, ya que en principio los diseñadores deben utilizar la menor variación visual para comunicar una idea de manera efectiva.

En la práctica, esto significa enfatizar únicamente lo que es importante.

Reutiliza elementos

Conforme va avanzando un proyecto, el sitio empieza a tomar forma y los problemas se tienden a repetir, nos encontramos con situaciones que se pueden resolver de manera similar y la reutilización de elementos empieza a ser un factor importante.

El éxito de la reutilización se basa también en el aprendizaje, si un usuario aprende a realizar las funciones en una parte de la aplicación, le resultará mucho más sencillo realizarlas en otra si mantenemos un estándar y reutilizamos estructuras.

Errores en el diseño de interfaces web

El diseño de interfaces en la actualidad es un trabajo complejo que requiere de estudios, análisis y toma de decisiones adecuada.

Atrás quedaron los días en donde un fondo bonito y algunos efectos bastaban para sorprender al usuario y lograr su aprobación, lo que a la postre llevaba al incremento de la popularidad del sitio.

La gran relevancia que han tomado las investigaciones realizadas en torno a la experiencia del usuario y la usabilidad de los sitios, ha hecho que los diseñadores tomen un rumbo distinto al momento de tomar decisiones relevantes a la estructura y comportamiento de una página.

En principio esto puede parecer complicado, pero la realidad es que puede ser tan sencillo como evitar caer en los excesos y manteneros en lo esencial.

¿Cómo saber si nuestro diseño de interfaz tiene errores? Aquí te exponemos 3 signos claros que te darán la respuesta.

Los ejemplos están sacados de Elegant Themes, puedes ir a su web a deleitarte con más ejemplos.

Es una interfaz estridente

Cuando un producto, servicio o dependiente resulta demasiado ruidoso termina siendo bastante molesto, para muestra te damos un ejemplo.

No es justificable que un sitio esté insistiendo en algo que no le interesa al cliente, sin embargo por alguna extraña razón algunos pueden a llegar a pensar que esto es normal en la web y que no tiene nada de malo hacerlo.

Trata de ayudar demasiado

Por más que lo deseemos, es imposible poner cada una de las secciones, páginas o aplicaciones de un sitio en un sólo lugar sin que resulte en un congestionamiento visual.

Sin embargo, muchos sitios aún optan por utilizar esta clase de presentación con el objetivo de ayudar al cliente a encontrar más fácilmente lo que busca, pero obteniendo como resultado todo lo contrario, páginas eternas y perdida de tiempo para el usuario.

Es importante evitar el dar sugerencias de manera constante, al menos de que el cliente así lo requiera, este es un principio básico del servicio al cliente.

No debemos atormentar al usuario con información que no necesita en ese momento, cuando llegue la necesidad esta se planteará y es en ese caso que el sitio debe responder correctamente.

Es demasiado diferente

No hay nada de malo con tratar de ser innovador, sin embargo el ser excesivo en los cambios aplicados a la manera tradicional de realizar las cosas, puede llevar a crear bastantes dificultades para el usuario.

Los diseñadores deben tener humildad para respetar las normas de interfaz de usuario y los principios de UX, no dejar de experimentar, pero sólo utilizar diseños fuera de lo estándar cuando estos realmente den un valor significativo.