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.
Sin embargo, en este artículo nos referiremos exclusivamente a la interfaz web, que es un sistema gráfico que permite a los
usuarios acceder a los contenidos, realizar tareas, comprender las funcionalidades y navegar por las diferentes páginas del
sitio.
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.

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.
La simplicidad con que se desarrolle esta interfaz es crucial para determinar que un usuario se sienta satisfecho y desee
regresar a un sitio.
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.
Todos los elementos que permitan al usuario interactuar y navegar deben ser coherentes con el cometido que
desempeñan, de forma que la comprensión y búsqueda de los contenidos sean accesibles por el usuario sin que deba
realizar complejos razonamientos.

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.

La primera impresión que un usuario recibe de un sitio web es extremadamente importante, por lo que la interfaz gráfica
debe ser cuidada en extremo, de forma tal que logremos convencerlo de que se trata de un sitio ordenado, cuidado y
profesional.

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

Antes que cualquier otra cosa el usuario debe 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.
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.

Debemos evitar forzar a la gente a realizar interacciones imprevistas. Evita elementos que salten en pantalla sin aviso, que
se muevan o suenen sin la opción de ser suprimidos por el usuario.

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 cuáles 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.

El utilizar una sola acción primaria por página, permitirá al usuario aprender de manera más fácil el proceso, además de que
será más sencillo su uso evitando la confusión.
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.

Tenemos que evitar diseñar cada página o módulo de nuestro sitio como si fuera algo totalmente distinto a lo que fue
desarrollado anteriormente. Una interfaz que no respete esto, se verá parchada y llena de inconsistencias lo que puede
afectar en gran manera la experiencia del usuario.

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 lucirá mucha más ordenada.
Organiza tus elementos de manera adecuada
Una interfaz bien organizada permite al usuario aprender más rápido y de manera sencilla, lo que tú estás tratando de
ilustrar.
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.
Debes tener mucho cuidado con los colores que eliges para los elementos 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.
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.
Una de las maneras más adecuadas de resaltar elementos, 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, pero debe usarse con moderación porque si caemos en la tentación
de sobre utilizarla, al final no tendrá efecto y sólo generará ruido, causando el efecto contrario al deseado.

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 blancoque 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.

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

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.

1 input:focus {
2     border-color: #000;
3     background-color: #CCC;
4 }

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.
Una interfaz compleja puede llevar consigo una desorientación del usuario, provocando confusión y falta de iniciativa para
interactuar con el sitio, llegando incluso a provocar el abandono del sitio por parte del visitante.
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.
Las webs que intentan hacer todo en una mismo lugar, generalmente no terminan haciendo nada bien. Para que una web
sea exitosa se debe aislar un solo problema y tratar de resolverlo de la mejor manera posible y con el mayor ingenio que se
pueda aplicar, facilitando la vida al usuario, no poniéndoselo más difícil.
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.
l 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

La cantidad de ruido visual en una interfaz tiene un gran impacto en la complejidad percibida por el usuario, mantener el
ruido visual al mínimo hará que una interfaz parezca más fácil y sencilla de usar.
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.
La reutilización de elementos para diferentes propósitos tiene dos ventajas, la primera es que se requiere menor tiempo de
desarrollo y la segunda es que se logra una interfaz de usuario más consistente mejorando la experiencia de la persona que
va a utilizar el sitio.
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.

La interacción se ha convertido en el principal factor a pensar durante el proceso de planificación de una web.
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.
Existen muchos diseñadores que razonan de esta forma, elaboran sus aplicaciones pensando en mostrar al cliente lo
importante que es su página o función para él, cuando lo importante es lo que necesita el usuario.

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.

Muchos diseñadores tratan de satisfacer todas las necesidades del cliente mediante el menor número de acciones posibles,
esto causa que se termine por truncar lo importante y ninguna de las necesidades quede completamente satisfecha, el
ofrecer soluciones parciales sólo llevará a la frustración del 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.

Este es un caso que se presenta comúnmente en los sitios que dictan de ser reformistas o “chic”, con la intención de hacer
que el sitio destaque, pero en realidad termina haciendo que el sitio sea inutilizable porque no se entiende.

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.
 Índice de contenidos 
 1 ¿Qué es la interfaz de una web?
 2 Objetivos al diseñar una interfaz web
 3 Calidad del diseño y estabilidad funcional
 4 Principios básicos sobre el diseño de interfaces de usuario
o 4.1 Interfaces claras y precisas
o 4.2 Da el control a los usuarios
o 4.3 Define bien tus acciones primarias y secundarias
o 4.4 Da importancia a la consistencia
o 4.5 Utiliza la jerarquía visual
o 4.6 Organiza tus elementos de manera adecuada
 5 Técnicas para mejorar el diseño de nuestra interfaz
o 5.1 El color atrae la atención
o 5.2 Contraste para administrar la atención
o 5.3 El espacio en blanco para relacionar
o 5.4 Espacio entre letras
o 5.5 Estilos a los elementos enfocados
 6 Cómo hacer interfaces de usuario más simples
o 6.1 Eliminación de elementos innecesarios
o 6.2 Disminuir el ruido visual
o 6.3 Reutiliza elementos
 7 Errores en el diseño de interfaces web
o 7.1 Es una interfaz estridente
o 7.2 Trata de ayudar demasiado
o 7.3 Es demasiado diferente