Diseño de interfaces WEB

Ortografía

Esta página o sección necesita una revisión de ortografía y gramática.
Puedes ayudar editándolo

Resumen

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.

Aqui Encontraras

• ¿Que es la interfaz de una web?
• Los objetivos de diseñar una interfaz
• Los principios basicos de las interfacez de usuario
• Consejos para diseñar interfaz
• Tecnicas para mejorar el diseño de nuestra interfaz

Si no te interesa puedes regresar a la página principal

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

Fuente: Aqui encontraras mas contenido sobre este tema

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.

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 de google

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

Para poder diseñar Interfaz 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.

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

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

Importancia de la jerarquia visual aqui--> Importancia de la Jerarquia visual

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

Importancia del color en el diseño

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

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.