classblog

Otro blog ms de www.icesi.edu.co Inicio Informacin RSS 03.04.2010

Uso de la Gestalt en Diseo WEB

1. Cmo se asocia la gestalt con el diseo de sitios web? La teora de la Gestalt permite a los comunicadores predecir como las personas respondern a los elementos de diseo. Basados en la Teora de la percepcin, los principios de la Gestalt fueron desarrollados en los principios del siglo 20 por psiclogos que crean que las imgenes eran percibidas como algo ms que la suma de las partes. Conociendo y usando la Teora de la Gestalt en tcnicas de comunicacin, podemos ayudar y asegurarnos que nuestro mensaje va a ser comprendido, y as convertirse en dinmico. Esta presentacin ilustra en forma breve nueve principios de la Gestalt y evala como son aplicados para crear figuras e imgenes de modo efectivo. PROXIMIDAD: Es el principio de la organizacin perceptual, en donde gruops de elementos se perciben asociados por su proximidad SIMILARIDAD: Este es otro principio de agrupamiento en donde los elementos que poseen cualidades similares (color, forma, tamao) son percibidos como parte de la misma forma. BUENA CONTINUIDAD: El principio de buena continuidad nos indica que preferimos percibir contornos continuos suaves a aquellos que cambian abruptamente. CERRAMIENTO: El principio de cerramiento nos indica que, tendemos a encerrar formas completando contornos. Es un principio que deriva de la Buena Continuacin. Se podra decir que llenamos espacios vacios con formas o dicho de otro modo vemos formas en espacios vacios.- Tambin muchos especialistas creen que esta es la idea principal de la gestalt, de como entendemos el mundo ya que es una tendencia intencional. FIGURA Y FONDO: La organizacin de figura/fondo es un fenmeno interesante dentro de la gestalt. La figura/fondo radica en que tendemos a percibir ciertos elementos como figura, con formas y bordes y otros como fondo. Hay figuras que, aunque ocupen el mismo porcentaje de lugar dentro de una imgen, tienden a ser figura y no fondo. RODEAR: Rodear es otro principio que organiza la figura y el fondo. En este principio en particular, se hace ms dificil identificar cual es la figura y cual el fondo, ya que segn se perciba, una puede rodear a la otra AREA/PEQUEO: Este principio, tambin deriva de la organizacin figura/fondo. El principio radica en que el rea ms pequa sobresale por sobre el rea mas grande, transformandose as en figura SIMETRIA: Este principio nos demuestra que preferimos percibir con ms facilidad las formas combinadas de modo simtrico que aquellas combinadas de modo asimtrico. PREGNANCIA O EQUILIBRIO: La ley gestltica del equilibrio, referida a figuras claras, simtricas y armnicas, se denomina Ley de la Praegnanz. Afirma que la organizacin perceptual tiende a la mayor simplicidad posible. Las personas organizan los elementos del modo ms simple posible. En la pregnancia juegan mucho los conceptos de figura/fondo y rea/pequeo, como as tambin los dems principios de la gestalt. Para obtener mayor informacion e imagenes visitar: http://karpicius.freeflux.net/files/gestalt_patrones_de_disenio.pdf 2. Qu es la usabilidad? Cul es su relacin con un sitio web? Definicin segn: www.baquia.com: La usabilidad se refiere a la capacidad de un software o sistema interactivo de ser comprendido, aprehendido, usado fcilmente y atractivo para un usuario, en condiciones especficas de uso. Tambin es la efectividad, eficiencia y satisfaccin con la que un producto permite alcanzar sus objetivos especficos. En relacin con un sitio Web, la usabilidad permite que el interfaz sea amigable y sea entendido por el usuario de la pgina web. De tal forma, que el sitio se convierta atractivo, con informacin eficiente y un diseo logrado para cumplir con todos los requerimientos de los internautas. Entender el concepto de usabilidad dentro del diseo de pginas web, nos ayudara a: Facilitar el uso de la pgina web. Equilibrar diseo y contenido.

Adaptacin de web al medio. Accesibilidad de la a la pgina web. Utilizar los Textos de la pgina web. Enlaces: La regla general es escribir como si no hubiese enlaces, integrndolos as en el propio texto. Los grficos de la pgina Web: Su uso permite dotar a la pgina de una mayor vistosidad, a las empresas hacer publicidad y en general, permiten un mayor grado de comunicacin del mensaje que se quiere transmitir. Pero su uso indiscriminado tambin es perjudicial Navegacin por la pgina Web: permite al usuario sentirse cmodo dentro de la pgina web y poder llegar a toda la informacin de forma clara. 3. Jakob Nielsen. Jakob Nielsen (nacido en 1957, en Copenhague, Dinamarca) es una de las personas ms respetadas en el mbito mundial sobre usabilidad en la web. Este ingeniero de interfaces obtuvo su doctorado en diseo de interfaces de usuario y ciencias de la computacin en la Universidad Tcnica de Dinamarca. Su andadura profesional le ha hecho pasar por empresas como Bellcore, IBM y Sun Microsystems. Actualmente figura como co-fundador de Nielsen Norman Group con Donald Norman, otro experto en usabilidad 10 Errores del diseo en las pginas Web (2005). Para ver los 10 errores del diseo de weblog ver: http://www.useit.com/alertbox/weblogs.html No legibilidad: Muchos sitios webs utilizan un tipo de letra que n oes de fcil lectura. Dentro de este error, hay q tener en cuenta tambin el tamao de la letra y los contrastes que se usan dentro de la pgina web. Links: hay que hacer visible cuando existe un link hacienda un resaltado; del mismo modo, hacer que el usuario vea la diferenciacin entre un link ya visitado y uno que no haya visitado. Flash: No usar flash sin ningn sentido dentro de una pgina, puede llegar a ser molesto para el usuario. Y en caso de que se vaya a usar flash, este deber ser con buenas fotografas y no estar hecho a machetazos Contenido que no es escrito por la Web: Significa que el contenido debe ser corto e ir al punto; al igual, que el contenido debe contestar a las preguntas de los diferentes usuarios y usar un lenguaje comn y no inventar palabras. Mala Bsqueda: Aunque es el componente ms difcil de corregir, es muy importante arreglarlo, aunque puede ser costoso pues requiere investigacin y dinero en un nuevo software. Incompatibilidad con el Explorador de Internet: dado que en la actualidad hay diferentes plataformas de internet, y por tanto, debemos adaptar la pgina web para que pueda ser leda en cualquier explorador de internet. Formas Incomodas: Muchas pginas web tienen formas de contenido muy incomodas para el usuario, por tanto las recomendaciones son: hacer uso del autocompletar cuando haya que llenar usuarios por ejemplo; Quitar preguntas que sean innecesarias tales como: are you Mr, Mrs, Miss NO informacin de Contacto o otra informacin de la compaa: Aunque es importante publicar nmeros telefnicos y direcciones electrnicas dentro de las pginas web, adicionar una direccin fsica de la empresa es muy importante, pues esto se convierte en una clave de credibilidad para los usuarios. Diseos Congelados en diseos de pagina fija: En monitores grandes, es incomodo para el usuario pginas web que no se adapten al tamao del monitor y se mantengan pequeas, Inadecuada ampliacin de las fotos: Es importante que si se venden productos online, tener la posibilidad de ampliar la foto y no mostrar la misma foto en otra ventana; al igual, se afirma que es importante tener la posibilidad de ver los productos en diferentes ngulos para que el usuario se siente ms seguro y satisfecho con la compra. PRINCIPIOS para el buen diseo de una pgina web: Visibilidad del estado del sistema: El sistema siempre debera mantener informado a los usuarios de lo que esta sucediendo e informarle en un tiempo razonable. Relacin entre el sistema y el mundo real: usar un lenguaje entendible para todo tipo de usuario Control y libertad del usuario: Muchas veces el usuario se equivoca al entra a un sitio, y este debe tener una salida de emergencia. Hacer funciones de deshacer y rehacer. Consistencia y estndares: Se debe buscar que los usuarios sigan las convenciones establecidas y no cuestionarse por si situaciones o palabras diferentes significan la misma cosa. Prevencin de errores : Mejor que un diseo del error, es mejor corregirlo. Reconocimiento antes que recuerdo: los objetos deben de ser visibles, el usuario no tiene porque recordar la informacin que ha visto en el proceso para poder seguir adelante; al igual, que las instrucciones del uso del sistema deben de estar presentes para un fcil acceso del usuario. Flexibilidad y eficiencia de uso: si es posible la presencia de aceleradores, es bueno para el usuario pues permite una interaccin ms rpida con la pgina. Esttica y diseo minimalista: los dilogos no deben contener informacin que es irrelevante o sin un uso vlido. Solo debe de aparecer la informacin importante.

Ayudar a los usuarios a reconocer, diagnosticas y recuperarse de errores: Los mensajes de error, si existen se deben mostrar de forma clara y simple, y a la vez, indicar cul es el problema y cmo el usuario puede solucionarlo. Ayuda y documentacin: Aunque el sistema puede ser usado sin una documentacin, podra ser necesario ofrecer ayuda e informacin que sea fcil de buscar. EJEMPLO PGINA WEB BUENA: http://www.panasonic.com/ Cumple con los requerimientos de una buena pgina web, muestra informacin clara sobre los productos que venden al igual que se pueden ver especificaciones de cada producto especificando su tecnologa, al igual que el precio de cada uno de ellos. La informacin que muestra es justamente la necesaria para el usuario, pues muestra nicamente lo que el usuario requiere saber; al igual que acompaa cada uno con imgenes de buena resolucin que permiten al usuario identificar mejor el producto. Adicionalmente, La pgina web de Panasonic tiene mens sencillos e interactivos que permiten al usuario llegar fcilmente a la seccin que necesitan sin perderse. Finalmente, es importante resaltar que esta pgina con todos los principios establecidos por Jakob Nielsen al igual que no incurre en los errores ms comunes de las pginas Web. EJEMPLOS DE PAGINAS CON MUCHOS ERRORES Ejemplo 1: http://www.miauk.com/ Este es un claro ejemplo de una pgina web con un mal diseo, en este, el primer error es el mal uso de los contrastes, pues no permiten leer la informacin que aparece en la pgina de una manera cmoda para el usuario. Ejemplo 2: http://havenworks.com/ Este es otro ejemplo de pgina web muy saturada de informacin y con mucho texto y no hace una seleccin de que informacin mostrar y cual no. Ejemplo 3: http://www.vamosalantro.com/obregon.php Esta es otra pgina que muestra muchas fotos dentro de la pgina web, y satura al usuario con informacin y la hace muy incmoda para el lector. 4. Tipos de publicidad en internet Internet se ha convertido en la herramienta ms importante de las sociedades modernas ya que permite la bsqueda de grandes cantidades de informacin al igual que sirve como una fuente de comunicacin. Internet es una gran red de comunicaciones que vincula a millones de personas en todo el mundo y por ello ha sido el gestor de grandes cambios en la forma en que las personas se comunican ya que ha cambiado totalmente la estructura comunicativa de la humanidad; ya las personas no esperan a que un mensaje comunicativo llegue a ellas, se informan, crean y buscan sus propias formas de comunicacin. Por esta razn y por el gran alcance que tiene el internet es que se ha hecho cada vez as comn que los mercadologos traten de llegar a una gran cantidad de consumidores potenciales a travs de Internet por medio de campaas publicitarias en la red. Los canales de comunicacin tradicionales como la televisin, el peridico y la radio estn siendo desplazados cada vez ms por el Internet en especial porque en la informacin y las comunicaciones se pueden personalizar. La publicidad en Internet Existen varias formas que permiten publicitar un producto en internet para desarrollar una estrategia de promocin y comunicacin efectiva. Las ms relevantes son los blogs, los banners, los textos, botones, pop ups, animaciones y videos. Banners Son imgenes rectangulares que se presentan en forma horizontal o vertical y que tienen enlaces hacia otras pginas o portales relacionados con el producto al cual estn haciendo publicidad. Pueden ser imgenes estticas (JPG) o animados (GIF). Por lo general aparecen en la mayora de las pginas web y algunas veces en las pginas de motores de bsqueda. Esta forma de publicidad online consiste en incluir una pieza publicitaria dentro de una pgina web. Prcticamente en la totalidad de los casos, su objetivo es atraer trfico hacia el sitio web del anunciante que paga por su inclusin. El formato clsico de banner es horizontal y mide 46860 pxeles, aunque existen muchos otros formatos en funcin del soporte -el sitio web que los acoge-. De hecho, comnmente el trmino banner se emplea para referirse a todo tipo de formatos publicitarios online, aunque existen piezas de muy diferentes caractersticas. Entre otras:

Roba pginas, cuando el formato es cuadrado; Rascacielos o skyscraper, cuando el formato es vertical; Botn, en formatos pequeos; Layer, cuando la publicidad aparece sobreimpresionada en el contenido del sitio web; interstitial, para formatos de gran tamao que aparecen momentneamente antes de la carga de una pgina; leader, es un formato horizontal de gran tamao (normalmente 72890)

Blogs Son pginas especiales en donde las personas se hacen autores de artculos y comentarios que sirven de base para bsquedas de informacin en internet. En algunos casos la informacin de los blogs es especializada por lo que constituyen en una fuente de comunicaciones importante. La publicacin de los blogs es variada, en ocasiones es diaria, semanal quincenal o mensual. Publicidad en Redes Sociales Las redes sociales son uno de los fenmenos de mayor crecimiento en internet debido a todos los servicios gratuitos, utilidades y entretenimiento que proporcionan, el simple hecho de no tener costo es lo ms atractivo, pero las herramientas que proporcionan para crear tu propio espacio en la red como subir fotografas, msica, videos e intercambiar y compartir tus ideas con la comunidad ms grande del planeta y tus amigos, es el otro atractivo ms interesante. Utilizar publicidad en redes sociales, es tener presencia en 3 de las 10 pginas web ms populares del mundo. YouTube, FaceBook y MySpace en conjunto reciben ms de 500 millones de visitantes cada mes. Los visitantes son una cosa, y el nmero de usuarios cautivos es otra, solo para que te des una idea, FaceBook, tiene ms de 200 millones de usuarios activos. Por esta razn, la publicidad en redes sociales es sin lugar a duda un mercado sumamente atractivo. Cada una de estas redes sociales tiene su propio sistema de publicidad, el principal atractivo para los anunciantes es que la publicidad se puede segmentar de una excelente manera.

Textos Es una frase escrita que incluye un vnculo o enlace a un determinado sitio web que se quiere dar a conocer. Por lo general, la frase incluye adems del tema de inters palabras clave para que los motores de bsqueda tengan mayor acceso a estos. El texto tambin incluye informacin del producto y de la empresa. Este tipo de publicidad se maneja mucho en los motores de bsqueda y se conoce con el nombre de pago por click o adwords (google). Dentro de estos mensajes publicitarios de texto se pueden encontrar los clasificados online. Los anuncios clasificados gratis son publicados en la categora del portal que ms le convenga al interesado, ya que de esta manera las personas podrn encontrar ms rpido lo que estn buscando. Estos anuncios generalmente son cortos, pueden llevar fotografas, informacin de contacto y hasta un enlace hacia tu pgina web. En internet existen cientos de portales que se dedican a publicar anuncios clasificados gratis, al haber sitios con una gran cantidad de contenido, los motores de bsqueda suelen darles ms importancia. Por esta sencilla razn, muchos de estos anuncios clasificados aparecen en los primeros lugares de los buscadores. Google adwords adsense Adwords son anuncios que se muestran de forma relevante en los resultados de la bsqueda del usuario realizados en Google que aparecen al lado derecho de las paginas indexadas (pagerank) y que muestran informacin relevante a la bsqueda realizada y vinculan al usuario a una pgina comercial quien paga por la publicidad. Google cobra al cliente por cada clic hecho sobre su anuncio. AdSense es un sistema de publicidad creado por Google que permite introducir en las pginas web informacin publicitaria coherente con el contenido de la pgina.

Botones Son pequeas imgenes en formato JPG o GIF de baja resolucin (125125 pixeles) que pueden ser cuadrados o redondos. Son banners ms pequeos. Pueden ser estticos o dinmicos, fijos en secciones o Home Page, clickables en muchos casos y situados en puntos diversos dentro de la composicin de la pgina.

Pop Ups y Pop Under Son ventanas pequeas que se abren en el momento que se ingresa o se sale de una pagina o portal web. Estas ventanas por lo general contienen anuncios sobre un producto o una marca y contienen enlaces que llevan a la pgina web del patrocinador. La desventaja de usas este tipo de publicidad radica en que los navegadores web actuales bloquean la aparicin de ventanas pop up por lo que el impacto publicitario puede nunca llegar a ocurrir. Los Pop Under utilizan la misma estrategia que los 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 da cuenta de su aparicin hasta que cierra la ventana de su navegador o intenta cambiar de ventana para pasar a otra aplicacin. Las ventanas emergentes NO son el medio ideal para anunciarse, ya que son el tipo ms odiado por los usuarios de la red por ser intrusivas y molestas, adems estn asociadas con virus o SpyWare dando al usuario la sensacin de algo inseguro.

Animaciones y Video Una animacin es una sucesin de imgenes en forma secuencial que permite ver un mensaje publicitario de forma activa. Por lo general las animaciones se hacen en FLASH y contienen la informacin de la marca o el producto que estn auspiciando. Los videos son animaciones que se graban en formato multimedia o de pelcula que son muy similares a los anuncios o comerciales de televisin. Pueden tener textos, audio, imgenes y otros elementos de diseo. En la red, es muy comn que se encuentren videos personales y que promuevan el uso o el desuso de gran cantidad de productos que hay en el mercado gracias al continuo crecimiento de la comunidad prosumidora. Existen varios sitios en la web que nos permiten subir videos, compartirlos y promoverlos a todo lo ancho de la red, pero sin duda hay uno que sobresale por encima de todos desde sus inicios a finales del 2005 y se llama YouTube.com, fue tal su xito que en menos de 1 ao, (octubre del 2006) fue comprado por Google por la cantidad de $ 1,650 millones de dlares.

Rich-Media Ads Rich Media es un trmino de publicidad en Internet que se le asigna a una pgina Web que utilice tecnologa avanzada como el video por demanda, descarga de programas que interactan con el usuario, y publicidad que cambia cuando el usuarios se pasa por encima del anuncio con el cursor. Este tipo de publicidad est reemplazando a los banners antiguos e impacta de forma directa al usuario ya que este se vuelve un participante ms del anuncio.

Bibliografa http://www.gestiopolis.com/delta/term/TER307.html http://www.eyeblaster.com/content.aspx?page=rich_media

http://www.e-planning.net/es/productos/admagic/ http://internetmarketingmexico.com/publicidad-en-videos-en-internet-en-youtube-yahoo-aol-o-metacafe/ http://www.icesi.edu.co/blogs_estudiantes/andresbernalt87/2010/02/25/ejercicio-gestalt-diseno-web-y-publicidad-en-internet/ http://www.icesi.edu.co/blogs_estudiantes/marketingjulianaarenas/ http://www.icesi.edu.co/blogs_estudiantes/lavielle/ http://karpicius.freeflux.net/files/gestalt_patrones_de_disenio.pdf http://www.unal.edu.co/documentos/servicio_web/usabilidad_para_web.pdf http://es.wikipedia.org/wiki/Jakob_Nielsen http://www.useit.com/alertbox/designmistakes.html [!] Reportar Abuso Filed Under General Comments Leave a Reply Name (Required)

Email Address (Required)

Website

Submit Comment

Por favor confirma que eres humano antes de comentar

Cdigo CAPTCHA *

Meta
New Blog Acceder www.icesi.edu.co RSS RSS de los comentarios
Press enter to search.

Categories
General

Archives

abril 2010 marzo 2010 febrero 2010 enero 2010

Blogroll
WordPress.com WordPress.org

Meta
New Blog Acceder www.icesi.edu.co RSS RSS de los comentarios

Universidad Icesi, Calle 18 No. 122-135, Cali-Colombia | Telfono: 555 2334 | Fax: 555 1441 Copyright 2008 www.icesi.edu.co - Poltica de privacidad Powered by WordPress | Copyright 2013 classblog. | All Rights Reserved. | Design by Shea Media