Errores más comunes del diseño Web II

 

 

 

 

 

 

 

La semana pasada hablamos sobre los errores más comunes del diseño Web Madrid, sin embargo el tema no está agotado y la lista se extiende. Por eso decidimos continuar con todo aquello que NO se debe hacer en el momento de crear una página:

 

 

Usar bloques de texto entero, sin cortar la uniformidad, lo que provoca aburrimiento para el lector. Lo mejor es usar subtítulos, viñetas, palabras en negrita, o cualquier recurso que permita el escaneo del texto.

 

Usar Java en los enlaces: ya que no es lo que el usuario espera y, a la vez, dificulta la navegación.

 

No utilizar políticas de privacidad: si bien en Estados Unidos y en algunos países de Europa existe legislación con respecto a la privacidad del e-mail, en América Latina la cuestión es diferente. Es por eso que hay que diseñar la página con principios éticos.

 

Enlaces largos: Los enlaces son una manera de difundir la información, sin embargo cuando son muy largos lo más probable es que se corten, y los usuarios no puedan acceder al mismo. Lo mas recomendable es hacer enlaces cortos que se redireccionen (el enlace largo no debe ser visto por los usuarios, solo por los diseñadores).

 

Muchas páginas no avisan que enviarán un correo al visitante, lo que provoca una gran sorpresa. Por este motivo se aconseja avisar que esto ocurrirá.

 

Cambiar la dirección de alguna publicación también es un error muy frecuente ya que rompe los enlaces que existían sobre ella y por lo tanto se derrumba todo el trabajo realizado al respecto.

 

No agregar fechas al contenido también es una falla grave ya que los usuarios no saben en que momento se publicó y si la información es actual o ya ha caducado.

 

No permitir cambiar a los usuarios determinados atributos a lo que buscan, o si se lo permiten tienen que volver a empezar desde el principio. Un ejemplo de esto es cuando intentamos registrarnos en algún sitio y el nombre de usuario no está disponible, se debe volver a empezar desde cero.

 

Muchos sitios no poseen los filtros adecuados para ofrecer a los usuarios los resultados que están buscando. Los sitios tienen que permitirle al que ingrese, la posibilidad de excluir o incluir determinados atributos para que la lista ofrecida sea lo más corta y lo más manejable posible.

 

Páginas que se auto-enlazan: aunque parezca difícil de creer muchas páginas de inicio se enlazan con ellas mismas y el usuario hace click sobre el vínculo y no obtienen respuesta (o si, pero la respuesta es esa misma página).

 

Errores más comunes del diseño Web

 

Las personas que conocen el término usabilidad, tienen que conocer el nombre de Jakob Nielsen. Este reconocido doctor en diseño de interfaces de usuario ha escrito gran cantidad de libros y artículos con respecto a las pautas para redactar en la Web.

 

Si tomamos como base las observaciones de Nielsen y agregamos los nuevos descubrimientos con respecto a los errores en el diseño Web Madrid, tendremos una idea acabada sobre que cosas no hay que usar si se quiere mantener la atención de los usuarios en nuestra página:

 

Una de las cosas más odiadas por los cibernautas es que en los sitios se utilice Flash. Hoy los usuarios intentan acceder lo más rápido posible a la información que están buscando, y Flash es sinónimo de lentitud y pérdida de tiempo cuando se carga una página.

 

Otro de los problemas usuales es la falta de legibilidad. Muchos diseñadores con el afán de innovar se animan a utilizar nuevos colores y nuevos fondos para sus sitios, el problema es que muchas veces el contraste con el color de la tipografía no es suficiente y los artículos resultan imposibles de leer.

 

Además los usuarios marcan como problema la falta de compatibilidad en el código para diseñar un sitio. La mayoría utilizaba Internet Explorer para probar sus páginas, pero en el momento que recurrían a Firefox se desorganizaban o determinadas partes no funcionaban.

 

Un error muy común es que se abran nuevas ventanas sin el consentimiento de los navegantes. Para este error que viene arrastrándose desde hace muchos años, Nielsen tiene una frase lapidaria: “El usuario es el dueño del mouse”.

 

Por otra parte si una página Web intenta promocionar un comercio y tiene productos a la venta el error más frecuente es que no se incluye la descripción detallada del artículo y que además los precios no figuran, o aparecen en lugares de difícil acceso. Por eso hay que tener en cuenta esto ya que el comprador potencial necesita conocer el precio y las funcionalidades del producto en el momento de comprar.

 

Otra de las fallas frecuentes es que las páginas tengan desplazamiento horizontal. Hay que evitar que los contenidos superen la medida estándar (800×600 píxeles), y en todo caso hacer que el desplazamiento sea vertical, que es más aceptado por parte de los usuarios y a la vez más legible.

 

Así que hay que tener en cuenta estos errores que se vienen marcando desde los orígenes de Internet para no volver a cometerlos ya que ahuyentan a los usuarios.

F: El patrón de comportamiento visual

 

En la imagen superior se puede observar un mapa de colores denominado heat-map que es un procedimiento utilizado en los estudios de Eyetrack para analizar las zonas de la pantalla que más observan los usuarios de Internet. Con el color rojo se señalan las zonas en donde se centra más la mirada, y con el azul los lugares que dejan de lado los usuarios.

 

Por lo tanto a la hora de diseñar nuestro sitio Web es importante tener en cuenta el patrón de lectura que tienen los usuarios en el momento de leer el monitor.

 

Según el estudio de EyeTrack realizado en 2006 existe una zona con forma de F que es la que más se observa en la pantalla. Con este comportamiento el usuario primero realiza una lectura horizontal completa en la parte superior, después una realiza una mirada también horizontal, pero más pequeña en la parte media y después la vista se dirige hacia una posición vertical descendente.

 

Este patrón puede cambiar, y la F puede adquirir forma de E o de L invertida. En estos casos se hacen 3 lecturas horizontales o una lectura horizontal, seguida de una vertical.

 

Ya, con anterioridad a este estudio, se sabía que el ojo de los usuarios se detenía en primera instancia en la parte superior e izquierda de la página o que la vista se dirigía hacia el titular principal.

 

Generalmente los titulares captan la atención de los lectores menos de 1 segundo, y si las primeras palabras no los enganchan el tiempo es aún menor.

Otros métodos que utilizan los usuarios en el momento de mirar una pantalla son:

  • Exploración: para buscar información en general
  • Localización: este método tiene una meta específica, por lo tanto la atención de los usuarios es mayor.
  • Recolección: de diferentes extractos o sectores dentro de un mismo texto.

 

Según los estudios de la empresa Xerox PARC, los principales comportamientos de los usuarios son ´comparar y escoger´ (en este caso evalúan muchas páginas para ver cual le resulta más convincente y apropiada a sus fines) ´adquirir´ (esto significa que han localizado o encontrado lo que estaban buscando) y por último ´entender´ (que quiere decir que comprendieron lo que la página les ofrecía).

 

Es importante recordar y conocer la manera en la que los usuarios de Internet se comportan frente a un monitor ya que deberá ser un punto clave en el momento de planificar el diseño Web Madrid de su página.

Las 6 fases del diseño Web

 

 

 

 

No existen recetas o fórmulas mágicas para realizar una buena página Web, sin embargo los mejores diseñadores Web recomiendan tener en cuenta 6 fases durante el armado de una página:

 

 

1. DETERMINAR OBJETIVOS E IDEA DEL SITIO: este paso es fundamental ya que se debe precisar y tener bien en claro las metas que se quieren alcanzar con la página, y el público o destinatarios a los cuales se apunta.

 

2. PLANIFICAR EL ÁRBOL DE LA NAVEGACIÓN: para ello los especialistas en diseño Web Madrid aconsejan establecer en una hoja de papel la estructura general del sitio. Esto incluye determinar el número de páginas, los enlaces, los contenidos, etc. Además deben asignarse un nombre para cada página, asi como todos los archivos que estén incluidos en la misma. Esta rotulación y asignación de lugares y contenidos ayudará a aportar innovaciones o servirá para enmendar errores o realizar modificaciones.  Generalmente los buenos diseñadores además asignarle  un nombre a cada página, las numeran para que el trabajo sea más fácil.

 

3. REALIZAR LA PÁGINA: es la concreción de los pasos anteriores. Si se utiliza html lo primero que se diseña son los gráficos., después deben recortase las imágenes y escribir el código html (estas tareas se pueden realizar con la ayuda de los programas específicos). En esta fase es necesario, hacer los enlaces entre las diferentes páginas, entre imágenes, o todo tipo de material que esté incluido en ella. El consejo más común para simplificar las tareas es guardar todo lo que se vaya a utilizar en la página dentro de una carpeta y nombrar a la home page  como index.html.

 

4. REVISIÓN: hay que tener en cuenta lo siguiente:

  • Que la velocidad de carga de la página sea rápida: lo ideal es que el peso sea igual o inferior a 50k
  • Que el código de la página sea compatible con navegadores distintos: principalmente con los más utilizados como lo son Internet Explorer, Netscape, Safari, Firefox y Opera.
  • Que los enlaces funcionen correctamente y que el contenido sea el indicado: en este caso la recomendacion es que una persona ajena abra la página en otro ordenador.
  • Que los videos puedan ser visualizados correctamente: Con respecto a la resolución la más utilizada es 1024×768

 

5. ELECCIÓN DEL DOMINIO: debe ser fácil de entender, atractivo, que se adapte al proyecto y que el impacto a nivel marketing sea positivo.

 

6. PUBLICACIÓN: Es la fase final en donde se transfiere la página al servidor remoto por medio del protocolo ftp.

La teoría del color aplicada al diseño web

 

 

 

 

Existe toda una teoría acerca de las sensaciones y emociones que transmiten los colores. Por eso es necesario tener en cuenta determinadas cuestiones a la hora de pensar en el diseño Web de nuestro sitio.

 

Quizás en alguna oportunidad se hayan cuestionado por qué la mayor parte de los sitios Web utilizan en su fondo colores claros. La respuesta es simple: los colores claros son más legibles, y en consecuencia provocan un menor esfuerzo visual por parte de los lectores. Pero además estos tonos, como el blanco, provocan un efecto de expansión a diferencia de los oscuros que comprimen las figuras.

 

Por otro lado los especialistas en diseño Web recomiendan utilizar colores que formen parte de una misma gama para dar armonía al sitio.  Sin embargo si se desea destacar algún sector especial se debe recurrir a colores contrastantes, como por ejemplo los efectos que causa la combinación de los claros con los oscuros, o los fríos con los cálidos.

 

Pero lo más interesante en la teoría de los colores es el significado que se le atribuyen a cada uno. Aquí una pequeña guía para su uso en el diseño web Madrid:

 

•    Blanco: es el color universal utilizado en la gráfica. Está dentro de la gama de los grises y representa la paz, la pureza, la felicidad, etc. Su principal fortaleza es que potencia los colores que lo acompañan.

 

•    Negro: se encuentra en el extremo opuesto de la tonalidad de grises. Simboliza el silencio, y el misterio. Es un color que sirve para otorgar elegancia y distinción.

 

•    Gris: Representa la indecisión y la duda. Dan la sensación de frialdad metálica, sin embargo por su asociación con los metales preciosos también puede dar sensación de brillo, lujo y estilo.

 

•    Amarillo: es un color luminoso, cálido y expansivo. Es de los más energéticos por lo tanto se desaconseja utilizarlo como fondo de un sitio, ya que esto provocaría fatiga visual.

 

•    Naranja: al igual que el amarillo posee gran fuerza expansiva, aunque es más acogedor y estimulante. Posee una gran fuerza energética.

 

•    Rojo: este color simboliza la vitalidad, se asocia con el color de la sangre, de la vida, del fuego. Sugiere sensualidad y el erotismo, aunque su uso excesivo puede resultar agresivo.

 

•    Azul: expresa armonía, sosiego, se relaciona con el mar, el aire y el cielo. Genera un efecto de calma.

 

•    Verde: es el color más relajante. Simboliza la naturaleza y la vegetación.

 

•    Marrón: es un color agradable, ya que recuerda al ambiente de los otoños y la madera. Es un color realista que da la sensación de equilibrio.
 

CONTACTENOS
info@equiposcreativos.comEspaña: +34 902 009 797USA: +1 305 4249966Argentina: + 54 351 4232052