miércoles

Ejercicio Gestalt, diseño web y publicidad en Internet

1- ¿Cómo se asocia la gestalt con el diseño de sitios web?

La Teoría de la Gestalt es una disciplina psicológica que estudia aspectos de la percepción visual. Aplicar sus descubrimientos es decisivo para obtener buenos resultados en la Web.

El centro de la pantalla ejerce la atracción más poderosa. Los ángulos y los bordes del marco también atraen a los elementos próximos, creando zonas de visión destacadas.

Los principios de la Gestalt se pueden aplicar a los diferentes elementos de interacción hombre/computador, como sigue a continuación.

Proximidad El agrupamiento parcial o secuencial de elementos por nuestra mente basado en la distancia. En un diseño de interfaz podríamos aplicar este principio a un grupo de botones que ejecuten comandos similares, o relacionados unos con otro como se puede vre en el siguiente ejemplo aplicado.

Semejanza Nuestra mente agrupa los elementos similares en una entidad. La semejanza depende de la forma, el tamaño, el color y otros aspectos visuales de los elementos. En la siguiente imagen de un sitio web, se puede observar cómo se han agrupado las noticias por dos categorías, las últimas agregadas y las más populares.

Continuidad Los detalles que mantienen un patrón o dirección tienden a agruparse juntos, como parte de un modelo. Es decir, percibir elementos continuos aunque estén interrumpidos entre sí. Manejar una buena continuidad en un sitio web, permite que se visualicen mejor los menús y elementos principales del mismo.

Cierre Nuestra mente añade los elementos faltantes para completar una figura. Existe una tendencia innata a concluir las formas y los objetos que no percibimos completos.

Utilizar formas aplicando el principio del cierre en los sitios web, puede permitir resaltar la información más importante del mismo, para que los usuarios accedan con mayor facilidad a ella. En la siguiente figura de una página web se ultiza una forma elíptica, que ayuda a enfocar y contener la información importante del sitio.



Relación entre Fondo y Figura Afirma que cualquier campo perceptual puede dividirse en figura contra un fondo. La figura se distingue del fondo por características como: tamaño, forma, color, posición, etc. El sistema de ventanas en cascada utiliza la organización figura/fondo para que sea posible distinguir por el usuario que la ventana que resalta más, es la que se encuentra activa actualmente.

Simetria

Las imágenes simétricas son percibidas como iguales, como un solo elemento, en la distancia.

En el explorador de archivos, estos se ordenan por simetría, los objetos asimétricos resultan molestos.

2. ¿Qué es la usabilidad? ¿Cuál es su relación con un sitio web?

Técnicas que ayudan a los seres humanos a realizar tareas en entornos gráficos de ordenador.

El diseño de sitios web deben seguir los siguientes principios:
1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario.
2. Autonomía, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situación en un entorno abarcable y no infinito.
3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total).
4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.
5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas.
6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas
7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón está en función de la distancia y el tamaño del objetivo. A menor distancia y mayor tamaño más facilidad para usar un mecanismo de interacción.
8. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de espera del usuario, permitiendo la realización de otras tareas mientras se completa la previa e informando al usuario del tiempo pendiente para la finalización de la tarea.
9. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.
10. El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero un uso inadecuado de estas puede dificultar enormemente el aprendizaje.
11. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error.
12. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande.
13. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida.
14. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.

Otros principios para el diseño de sitios web son:

a) Los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo esfuerzo y unos resultados máximos.
b) Un sitio web no ha de tratar al usuario de manera hostil. Cuando el usuario comete un error el sistema ha de solucionar el problema, o en su defecto sugerir varias soluciones posibles, pero no emitir respuestas que meramente informen del error culpando al usuario.
c) En ningún caso un sitio web puede venirse abajo o producir un resultado inesperado. Por ejemplo no deben existir enlaces rotos.
d) Un sitio web debe ajustarse a los usuarios. La libertad en el uso de un sitio web es un término peligroso, cuanto mayor sea el número de acciones que un usuario pueda realizar, mayor es la probabilidad que cometa un error. Limitando el número de acciones al público objetivo se facilita el uso de un sitio web.
e) Los usuarios no deben sufrir sobrecarga de información. Cuando un usuario visita un sitio web y no sabe donde comenzar a leer, existe sobrecarga de información.
f) Un sitio web debe ser consistente en todos los pasos del proceso. Aunque pueda parecer apropiado que diferentes áreas tengan diseños diferentes, la consistencia entre los diseños facilita al usuario el uso de un sitio.
g) Un sitio web debe proveer de un feedback a los usuarios, de manera que éstos siempre conozcan y comprendan lo que sucede en todos los pasos del proceso.

3- ¿Buscar a Jacob Nielsen y presentar:

a) Los errores comunes en el diseño de un sitio web?

* Malas búsquedas

Los buscadores comúnmente reducen usabilidad en cuanto a que no permiten el manejo de expresiones en plural, guiones, y otras variantes en la búsqueda de términos. Otro problema al que este se asocia es a que los buscadores priorizan resultados dependiendo del número de términos contiene, y no por la importancia que tienen dentro del documento.

Cuando el usuario no encuentra lo que está buscando, lo mejor es hacer uso de una barra de búsqueda que le permita orientarse, presentada de la manera más simple posible, ya que a eso es lo que se está acostumbrado.

* Archivos en formato PDF para leer en línea

Los usuarios suelen disgustarse cuando se “topan” con archivos PDF mientras están navegando, porque irrumpe el flujo que llevaban. Funciones como imprimir y salvar pueden complicarse porque los comandos estándares del navegador no funcionan. El formato PDF es adecuado para imprimir o distribuir manuales y grandes documentos que deben imprimirse. Se sugiere reservarlo para esos propósitos.

* No cambiar el color de los links visitados

Tener una buena idea de la navegación que se hizo anteriormente ayuda a entender tu posición actual, pues da cuenta de tu recorrido. Esto te facilita saber a dónde quieres ir. Los links son un factor clave en el proceso de navegación. Los usuarios pueden excluir en su búsqueda aquellos links que no les llamó la atención y revisar más a fondo aquellos que sí.

b) Los principios para realizar un correcto sitio web. Buscar ejemplos, para ambos casos.

Ubicar el nombre y logo en cada página y haga un hipervínculo en el logo hacia la página principal, excepto cuando se encuentra en ella.
Proveer un buscador si el sitio tiene más de 100 páginas.
Escribir encabezados y títulos directos y sencillos que expliquen claramente de que se trata la página, lo cual servirá para contextualizar al usuario.
Estructurar la pagina para facilitar su escaneo y ayudar a los usuarios a ignorar pedazos de la página con una sola mirada. Ejemplo: Agrupar y hacer uso de sub encabezados para partir el contenido en pedazos más pequeños.
En vez de “amontonar” todo el contenido bajo el mismo tema en una sola página infinita, utilice hipertexto para estructurar el espacio del contenido en una página de inicio donde se provee un resumen y varias páginas secundarias en las que, en cada una, se enfoca en un tema específico. La idea es permitir navegar sólo por donde el usuario esté interesado.
Utilizar fotografías de sus productos, pero sepa seleccionarlas bien.
Utilizar títulos para los links para proveer a los usuarios de una vista previa de a donde lo llevará cada enlace antes de que efectivamente haga click sobre ella.
Asegurarse de tener las herramientas adecuadas para no discriminar a nadie.
Hacer lo que hace todo el mundo: si en casi todos los sitios web hacen algo de una cierta forma, se espera que en tu página también se haga así. Se trata de ofrecer lo que el usuario espera.
4. Descargar la presentación con los tipos de publicidad: unidad 3 (http://mercadeo.creatis-tech.com/clases.htm). Para cada uno de los tipos de publicidad reseñado se debe escribir una definición del tipo de publicidad y presentar uno o dos ejemplos de sites que tengan el tipo de publicidad en cuestión.

Tipos de Publicidad en Internet

a) Anuncios y enlaces rectangulares y/o cuadrados (Banner Ads): La publicidad en banners es una de las formas más antiguas de hacer publicidad en internet y funciona de una manera sencilla, se coloca una imagen (banner) en un lugar preponderante de una página web que tenga una considerable cantidad de tráfico mensual para que tu banner sea exhibido ante todos los visitantes.

• Súper banner o leaderboard: El súper banner tiene un tamaño de 728×90 pixeles y está ubicado en la cabecera de las páginas. El gran tamaño de este banner deja mucho espacio a la creatividad. Gracias a esto y a su localización exclusiva en la cabecera, es inevitable atraer la atención de los clientes.

• Rascacielos o Sky craper: Esta pieza se presenta verticalmente en la parte derecha de las páginas. Sus dimensiones son 120×600 pixeles.

• Roba páginas o MPU: Son banners cuadrados ubicados en la parte central de la página, junto al contenido de la misma. El tamaño más usado es el de 300×250 píxeles.

• Top banner: Es un banner muy parecido al leaderboard pero con un tamaño de 468×60 píxeles.

b) Botones publicitarios: Son imágenes pequeñas que tiene publicidad, que darles clic redirigen a la página anunciada.

c) Anuncios y enlaces de texto (Text Ads): Son anuncios publicitarios realizados con texto, y tienen un título y un eslogan o idea de venta (siendo esto la breve descripción del producto), la dirección o URL de la web, y un enlace; puede ser sin imagen o con imagen (fotografía o ilustración).

d) Publicidad en Google: AdWords / AdSense

Google AdWords: Es el método que utiliza google para hacer publicidad patrocinada, cuenta con enormes cantidades de clientes con webs de todo tipo y de todas partes del mundo. Son anuncios que se muestran de forma relevante en los resultados de la búsqueda del usuario (por ejemplo, si el usuario buscó “coches”, a la derecha o arriba de las páginas indexadas por PageRank aparecerán anuncios referentes a “coches”). Google cobra al cliente por cada clic hecho sobre su anuncio. AdWords no solo aparece en el buscador Google, sino también en las patrocinadas por AdSense si el contenido de dichas webs se relacionan con el de la web del cliente y en Gmail.

Google AdSense: Es un sistema de publicidad ideado por Google; los webmasters pueden unirse a este sistema para activar textos e imágenes publicitarias en sus páginas web.

Estos anuncios están administrados por Google y generan ingresos basándose en los clicks de los visitantes de la página y en las visualizaciones de la misma (impresiones). Google utiliza su tecnología de búsqueda para incrustar anuncios según el contenido de la página web que se está visitando, la localización geográfica del usuario (mediante el ip) y otros datos como historia de búsqueda previa en Google o las páginas visitadas por el usuario, sus cookies, duración de la sesión, sistema operativo, browser utilizado, etc.

También es un método de poner publicidad en un sitio web con anuncios, generalmente, menos invasivos que la mayoría de los banners y con un contenido, normalmente, más relacionado con el sitio web donde aparecen.

e) Anuncios entre páginas web (Interstitials): Consiste en el intercambio de banners entre páginas web, para tener una mayor cobertura de público. Existen portales de internet que dedican a prestar estos servicios de forma gratuita, solo es necesario registrarse y empezar a intercambiar banners.

f) Ventanas que se abren automáticamente (Pop-Up Ad y Pop-Under): Son ventanas que aparecen inesperadamente frente al usuario de internet sin permiso alguno, generalmente son más pequeñas que la ventana de tu navegador para ser notadas mas fácilmente y no suelen tener barras de desplazamiento y en ocasiones no tienen opciones ni para cerrarlas.

Las ventanas emergentes no son el medio ideal para anunciarse, ya que son el tipo más odiado por los usuarios de la red por ser intrusivas y molestas, además están asociadas con virus o SpyWare dando al usuario la sensación de algo inseguro, pero aun así, hay quien las utiliza por los precios tan bajos que se pueden conseguir.

Las Pop Under utilizan la misma estrategia que las Pop Ups, solo que tienen la variante de aparecer bajo la ventana activa de tu navegador en vez de por encima haciendo que el usuario no se dé cuenta de su aparición hasta que cierra la ventana de su navegador o intenta cambiar de ventana para pasar a otra aplicación.



http://www.icesi.edu.co/blogs_estudiantes/robles2010/2010/03/02/ejercicio-gestalt-diseno-web-y-publicidad-en-internet/