Arquitectura Web
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Arquitectura Web

  • 778 views
Uploaded on

El contenido de los sitios web es el actual protagonidsta en su producción. Los proyectos digitales disponen de un orden lógico que jerarquiza textos y elementos gráficos con la finalidad de......

El contenido de los sitios web es el actual protagonidsta en su producción. Los proyectos digitales disponen de un orden lógico que jerarquiza textos y elementos gráficos con la finalidad de persuadir al usurio y transformarse en una grata experiencia.

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
778
On Slideshare
774
From Embeds
4
Number of Embeds
2

Actions

Shares
Downloads
21
Comments
0
Likes
0

Embeds 4

http://www.slideshare.net 2
http://localhost 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. DISEÑO WEB Y ARQUITECTURA DE INFORMACI ÓN PARA SITIOS 2.0 Claudia Gutiérrez KeplerMedia S.A. Chile, 2008 PRESENTACIÓN: INGRID DÍAZ Y SYBILA OXLEY PUC, 2009
  • 2. PENSAR EN UNA EXPERIENCIA DE USO EXITOSA REQUIERE ARTICULAR RAZON EMOCI ÓN LÓGICA VISUALIDAD
  • 3. 1969 PRINCIPIO DE USABILIDAD
  • 4. Un diseño de arquitectura de informaci ón adecuados deben no sólo construirse en base a una estructura racional , sino también tomar en cuenta factores emocionales relativos a la experiencia de uso. Sólo la combinación de ambos permite que los usuarios se sientan cómodos, antes, durante y después de haber visitado un sitio Web. Emoci ón en la experiencia de uso
  • 5. CAFETERA PARA MASOQUISTAS RELACI ÓN ENTRE USO E INTERFAZ PÁGINAS WEB DESDE LO RACIONAL USABILIDAD: “el atributo de calidad que mide la facilidad en el uso de las interfaces. También está referida a los métodos que mejoran la experiencia de uso durante el proceso de diseño y rediseño de un sitio.” (JAKOB NIELSEN, 2003)
  • 6. RELACI ÓN ENTRE USO E INTERFAZ PÁGINAS WEB DESDE LO EMOCIONAL DE LA EXPERIENCIA USABILIDAD: “La verdadera belleza en un producto va más allá de lo superficial, más allá de la fachada. Para que un producto sea verdaderamente bello, emocionante y agradable, debe cumplir una función, trabajar bien, ser usable y entendible .” (DONALD NORMAN, 2002)
  • 7. DISEÑO Y REDISEÑO NO S ÓLO EN TÉRMINOS DE DISPOSICIÓN ESPACIAL EN PANTALLA DE LOS ELEMENTOS TEXTUALES Y GRÁFICOS, SINO TAMBIÉN RESPECTO A LA ARQUITECTURA DE SU INFORMACIÓN. USUARIOS NO S ÓLO LEEN SINO QUE INTERACTÚAN CON LA INFORMACIÓN QUE CONSUMEN Y CON LAS HERRAMIENTAS QUE LA PRODUCEN DISEÑO O REDISEÑO DE UNA WEB NOS S ÓLO UNA INTERFAZ USABLE ORDEN LÓGICO DISEÑO VISUAL ATRACTIVO QUE REFLEJE GRÁFICAMENTE LA JERARQUÍA DE LOS CONTENIDOS
  • 8. USABILIDAD + DISEÑO VISUAL EXPERIENCIA DE USO EXITOSA
  • 9. DISEÑO EMOCI ÓN Los seres humanos imprimimos significado a los objetos, asociados a un valor, incluso a un precio. Son una señal de identidad y nos evocan sentimientos. PENSAMIENTO LÓGICO Y PENSAMIENTO EMOCIONAL COMPONENTES GRÁFICOS EMOCIÓN EXPERIENCIA RACIONAL DE USO MENSAJE RÁPIDO Y CLARO DE LA GRÁFICA , Ej.: SEÑALÉTICA AEREOPUERTO (DONAL NORMAN, 2004)
  • 10. Un lector debe ser cap az de deducir la estructura de información de una página desde su diseño. Enfatizar lo importante Jerarquizar Ordenar lógica y asertivamente (códigos textuales y no textuales) (Tidwell, 2006) JERARQU ÍA VISUAL
  • 11. PAUTAS QUE REGULAN UNA HISTORIA VISUAL EN LA MENTE DE QUIEN NAVEGA COMPOSICI ÓN - EQUILIBRIO - PATRÓN DE MOVIMIENTO COLOR - TEXTURA - FORMA - POSICI ÓN - TAMAÑO - CONTENIDO TEXTUAL DEFINEN LA EFICIENCIA COMUNICATIVA DEL SITIO JERARQU ÍA VISUAL 1.- PROXIMIDAD : un elemento que se aleja del grupo se percibe como nuevo. 2.- SIMILITUD : elementos = tamaño, color, forma, posici ón, textura, se perciben como del mismo grupo. 3.- CONTINUIDAD : elementos similares, aunque Distintos en forma y tamaño. 4.- CERCANÍA : la mente agrupa aquello cercano. 5.- ASIMILACIÓN : lo conocido se asimila + fácilmente.
  • 12. LOS C ÓDIGOS LINGÜÍSTICOS GRÁFICOS CON LOS QUE GENERAMOS, LEEMOS Y PARTICIPAMOS EN EL CIBERESPACIO SE PUEDEN DIVIDIR EN DOS CATEGORÍAS: (Javier Royo, 2004) IMPORTANCIA DE LAS RELACIONES ENTRE ELEMENTOS DE LA WEB “ CONTAR UNA HISTORIA” JERARQU ÍA VISUAL 1.- C ÓDIGOS VISUALES: escritura alfabética, no alfabética, e imagen fija. 2.- CÓDIGOS SECUENCIALES: imagen en movimiento e hipertextualidad.
  • 13. Steve Krug: No me hagas pensar. “ Una p ágina debe ser evidente al mirarla. Debe ser obvia. Explicarse al mirarla.” (2000) UN SITIO USABLE REQUIERE MENOS ESFUERZO MENTAL PARA RECORRERLO, PUEDE SER NAVEGADO M ÁS RÁPIDAMENTE Y POSEE MENOS TASA DE ERROR Y ABANDONO
  • 14. PREGUNTAS B ÁSICA QUE SE HACE UN USUARIO CUANDO VISITA UNA PÁGINA WEB (KRUG) 1.- ¿DÓNDE ESTOY? 2.- ¿POR DÓNDE EMPIEZO? 3.- ¿DÓNDE ESTÁ TAL INFORMACIÓN? 4.- ¿QUÉ ES LO MÁS IMPORTANTE DE ESTE SITIO? 5.- ¿POR QUÉ LO LLAMAN ASÍ?
  • 15. James Kalbach Designin Web Navigation (2007)
    • Para Kalbach, la navegaci ón cumple diferentes funciones :
    • PERMITE ACCEDER A LA INFORMACIÓN: de acuerdo al contenido la forma.
    • INFORMA DEL LUGAR DE UBICACIÓN DENTRO DEL SITIO: dónde y qué.
    • INFORMA DE QUÉ SE TRATA EL SITIO: visión semántica.
    • IDENTIFICA A LA MARCA: además de logo, navegación debe reflejar promesa y servicio.
    • REFLEJA LA CREDIBILIDAD DEL SITIO: buena navegación disuade.
    • - IMPACTA EN LOS COSTOS: buena navegación, usuario que compra.
  • 16. ¿C ÓMO SABEMOS CUANDO UN SITIO ES, O NO , USABLE ? ¿Pueden los usuarios realizar tareas b ásicas en su primer encuentro con el sitio? ¿Cuán rápido pueden los usuarios llevar a cabo estas tareas? ¿Cuán fácil podemos reestablecer la productividad del sitio, una vez que los usuarios vuelven? ¿Cuántos errores cometen los usuario? ¿Cuán severos son? ¿Cuán rápido se recuperan? ¿Cuán agradable es el diseño? ¿El diseño es funcional? ¿Cumple con lo que los usuarios necesitan? APRENDIZAJE EFICIENCIA MEMORIA ERRORES SATISFACCI ÓN UTILIDAD
  • 17. PLANO SUPERFICIAL PLANO DEL ESQUELETO PLANO ESTRUCTURAL ÁMBITO DEL PROYECTO PLANO DE LA ESTRATEGIA MODELO DE EXPERIENCIA DE USUARIO DE J.J. GARRETT Marco conceptual : permite delinear problemas y soluciones acerca de la experiencia de uso
  • 18. CONCLUSIONES COEXISTENCIA DE FACTORES RACIONALES ( USABILIDAD ) Y EMOCIONALES ( VISUALIDAD ) LA FELICIDAD QUE EXPERIMENTE EL USUARIO ES CLAVE PARA LA FIDELIZACI ÓN CONSIDERAR OBJETIVOS, CONTENIDOS, DESTINATARIO Y PROYECTAR LA WEB CONSIDERANDO UNA ARQUITECTURA LÓGICA, SIMPLE, RÁPIDA Y UN DISEÑO QUE MOTIVE E IDENTIFIQUE EMOCIONALMENTE AL USUARIO