SlideShare una empresa de Scribd logo
1 de 15
DISEÑO Y ADMINISTRACIÓN WEB 
Facultad de Estudios Superiores Acatlán 
División de Diseño y Edificación 
Licenciatura en Diseño Gráfico 
Ramón Patiño Trejo 
diseñador gráfico 
designoacatlan@gmail.com 
designoacatlan.blogspot.mx
Tema VI: Arquitectura de la información. 
MENÚ> CONTENIDO> SUBMENÚ> PROMOCIONES
Definición de arquitectura de la información 
El término "Arquitectura de la Información" (AI) fue utilizado por primera vez por Richard Saul Wurman en 1975, quién la definió como: 
“El estudio de la organización de la información con el objetivo de permitir al usuario encontrar su vía de navegación hacia el conocimiento y la comprensión de la información”. 
En el campo de la Web, Louis Rosenfeld y Peter Morville en su libro "Information Architecture for the World Wide Web", definen a la AI: 
“El arte y la ciencia de estructurar y clasificar sitios web e intranets con el fin de ayudar a los usuarios a encontrar y manejar la información”.
Concepto de arquitectura de la información 
 
El concepto "Arquitectura de la Información" no solo engloba la actividad de organizar información, sino también el resultado de dicha actividad. 
 
La arquitectura de la información de un sitio web, como resultado de la actividad, comprende los sistemas de organización y estructuración de los contenidos, los sistemas de rotulado o etiquetado de dichos contenidos, y los sistemas de recuperación de información y navegación que provea el sitio web.
Áreas de prioridad de una página web 
Para colocar el contenido de alta prioridad en una página, la regla mnemotécnica es que: el lugar donde las personas miran con mayor frecuencia es en la esquina superior izquierda del área del contenido, la cual es el área de mayor prioridad para cualquier diseño general de una página con un sistema de navegación en el borde superior y el lateral izquierdo, con un carril derecho.
Áreas de prioridad de una página web
Áreas de prioridad de una página web 
Cuando se reserva un alto porcentaje de una página a elementos que no miran los usuarios o que los mira muy poco, se habla de una "mala distribución de parcelas de la pantalla", es decir, no es un usos efectivo ni eficiente del espacio. Y constituye un problema serio si se considera que las personas pueden estar obviando información de la que podrían estar beneficiándose.
Áreas de prioridad del contenido web
Prioridad de la página de inicio 
Una página de inicio que muestre incontables banners, barras e imágenes inútiles es una mala elección, pues los usuarios pasan un 25% del tiempo visitando la página de inicio. 
Es necesario categorizar la prioridad y la importancia de los contenidos, así como las secciones de la página, para hacer coincidir la importancia de la información con el área de prioridad correspondiente y el orden con el que se examina la página.
Diagrama de flujo: mapa navegación
Prioridad de los elementos web 
 
Un espacio en blanco bien colocado es más útil que una imagen abarrotada, no relacionada con el contexto, de bajo contraste o difícil de descifrar al momento de funcionar como descanso visual o cognitivo. 
 
Menús, imágenes, vínculos y promociones compiten unos con otros por la atención del visitante, por lo que es importante definir cuáles deben prevalecer. 
 
Toda página web contiene elementos magnéticos que solicita a los usuarios que miren o selecciones por sobre los otros, así es obligación del diseñador conocer cuáles recogen la atracción con mayor fuerza de parte de los usuarios y cuáles elementos van a quedar fuera de su atención.
Importancia de las pistas falsas 
Nielsen y Pernice consideran que todas las pistas falsas tienen un precio: 
"Los elementos que engañan a los visitantes del sitio se conocen como 'pistas falsas'. Aunque los visitantes pasen por una página y completen sus tareas con éxito, las pistas falsas son un problema. Los usuarios deberían emplear su tiempo pensando y dedicando sus fijaciones a los comandos necesarios para sus tareas y no despistarse con elementos que no tienen nada que ver con sus necesidades".
Elementos de esparcimiento 
Las páginas web pueden incluir elementos de esparcimiento tales como una frase, un artículo o una imagen de interés o diversión para los usuarios, pero tentarlos con estos elementos en el momento equivocado, puede resultar contraproducente.
Parámetros cuantitativos 
Los autores proponen cuatro parámetros cuantitativos para entender como se relacionan las pistas falsas con las medidas tradicionales de usabilidad: 
 
Tiempo de la tarea.- tiempo transcurrido hasta que dicen haber terminado. 
 
Éxito.- número de usuarios que consiguen completar satisfactoriamente la tarea. 
 
Errores.- número de ocasiones en que los usuarios hacen clic hacia un camino que les lleva en la dirección equivocada. 
 
Satisfacción del usuario.- cómo valoran los usuarios su experiencia con la interfaz.
Definición de sitios exitosos 
Consideran que un sitio con éxito es aquél en el que las características más importantes son fáciles de ver y de utilizar. 
Por lo que hay que dejar de lado toda la información superflua que por cuestiones de políticas se quieran verter en una página web y que causarían ruido visual con demasiados comandos, banners, imágenes y otros elementos generados.

Más contenido relacionado

Destacado (7)

EL CLIENTE
EL CLIENTEEL CLIENTE
EL CLIENTE
 
Tipos de compradores
Tipos de compradoresTipos de compradores
Tipos de compradores
 
10 reglas de atencion al cliente
10 reglas de atencion al cliente10 reglas de atencion al cliente
10 reglas de atencion al cliente
 
Clasificación de los clientes
Clasificación de los clientesClasificación de los clientes
Clasificación de los clientes
 
Clases y tipos de clientes
Clases y tipos de clientesClases y tipos de clientes
Clases y tipos de clientes
 
Atención al Cliente
Atención al ClienteAtención al Cliente
Atención al Cliente
 
Tipos De Clientes
Tipos De ClientesTipos De Clientes
Tipos De Clientes
 

Similar a T06 dawebareas

Recomendaciones Para Comunicadores
Recomendaciones Para ComunicadoresRecomendaciones Para Comunicadores
Recomendaciones Para Comunicadores
guest3367c9
 
Expocision estructura
Expocision estructuraExpocision estructura
Expocision estructura
cintliac
 
Principios bsicos
Principios bsicosPrincipios bsicos
Principios bsicos
lopzrobrt
 
Principios básicos
Principios básicosPrincipios básicos
Principios básicos
lopzrobrt
 
Principios básicos
Principios básicosPrincipios básicos
Principios básicos
lopzrobrt
 

Similar a T06 dawebareas (20)

Seminario Usabilidad
Seminario UsabilidadSeminario Usabilidad
Seminario Usabilidad
 
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
Usabilidad y Arquitectura de Información, un pretexto para hablar de la satis...
 
Usabilidad en la web
Usabilidad en la webUsabilidad en la web
Usabilidad en la web
 
Fundamentos DiseñO Web
Fundamentos DiseñO WebFundamentos DiseñO Web
Fundamentos DiseñO Web
 
IA GUIDE
IA GUIDEIA GUIDE
IA GUIDE
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Diseño web samanta
Diseño web samanta Diseño web samanta
Diseño web samanta
 
Diseño e instalación de sitios web
Diseño e instalación de sitios webDiseño e instalación de sitios web
Diseño e instalación de sitios web
 
NSU
NSUNSU
NSU
 
Recomendaciones Para Comunicadores
Recomendaciones Para ComunicadoresRecomendaciones Para Comunicadores
Recomendaciones Para Comunicadores
 
Expocision estructura
Expocision estructuraExpocision estructura
Expocision estructura
 
Principios bsicos
Principios bsicosPrincipios bsicos
Principios bsicos
 
Principios básicos
Principios básicosPrincipios básicos
Principios básicos
 
Principios básicos
Principios básicosPrincipios básicos
Principios básicos
 
M2 DiseñO Web
M2   DiseñO WebM2   DiseñO Web
M2 DiseñO Web
 
Diseno web 2
Diseno web 2Diseno web 2
Diseno web 2
 
Diseño e instalación de sitios web (navegación del sitio / el usuario control...
Diseño e instalación de sitios web (navegación del sitio / el usuario control...Diseño e instalación de sitios web (navegación del sitio / el usuario control...
Diseño e instalación de sitios web (navegación del sitio / el usuario control...
 
Elaboración de documentos web mediante lenguajes de marcas
Elaboración de documentos web mediante lenguajes de marcasElaboración de documentos web mediante lenguajes de marcas
Elaboración de documentos web mediante lenguajes de marcas
 
Arquitectura del negocio en Internet y usabilidad web
Arquitectura del negocio en Internet y usabilidad webArquitectura del negocio en Internet y usabilidad web
Arquitectura del negocio en Internet y usabilidad web
 
Arquitectura de la información
Arquitectura de la informaciónArquitectura de la información
Arquitectura de la información
 

Más de Ramón Patiño Trejo

Más de Ramón Patiño Trejo (11)

A01 daweb curso
A01 daweb cursoA01 daweb curso
A01 daweb curso
 
T11 daweb massmediahipermedia
T11 daweb massmediahipermediaT11 daweb massmediahipermedia
T11 daweb massmediahipermedia
 
T10 dawebconsumerb
T10 dawebconsumerbT10 dawebconsumerb
T10 dawebconsumerb
 
T09 dawebuserx
T09 dawebuserxT09 dawebuserx
T09 dawebuserx
 
T05 dawebweb
T05 dawebwebT05 dawebweb
T05 dawebweb
 
T04 dawebeye
T04 dawebeyeT04 dawebeye
T04 dawebeye
 
T03 dawebdns
T03 dawebdnsT03 dawebdns
T03 dawebdns
 
T02 dawebredes
T02 dawebredesT02 dawebredes
T02 dawebredes
 
T01 dawebguis
T01 dawebguisT01 dawebguis
T01 dawebguis
 
T00 dawebintro
T00 dawebintroT00 dawebintro
T00 dawebintro
 
A00 dawebtemario
A00 dawebtemarioA00 dawebtemario
A00 dawebtemario
 

Último

Sofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design PortfolioSofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design Portfolio
sofiospina94
 
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
jose880240
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
Leo Florez
 
S7_ Grises y quebrados. semana 07 sesión 1
S7_ Grises y quebrados. semana 07 sesión 1S7_ Grises y quebrados. semana 07 sesión 1
S7_ Grises y quebrados. semana 07 sesión 1
eje12345ja
 
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptxADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
clinivalleu
 
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptxATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
EdisonCondesoDelgado1
 
tema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos Itema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos I
irenecarmona12
 
encuadre.docx. . . . . . . . . . . .
encuadre.docx.                 . . . . . . . . . . .encuadre.docx.                 . . . . . . . . . . .
encuadre.docx. . . . . . . . . . . .
ramosrodrigo0710
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
karendaza9506
 

Último (20)

Blue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdf
Blue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdfBlue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdf
Blue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdf
 
LA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptx
LA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptxLA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptx
LA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptx
 
Manual de uso Avanzado para Excel 2016.pdf
Manual de uso  Avanzado para Excel 2016.pdfManual de uso  Avanzado para Excel 2016.pdf
Manual de uso Avanzado para Excel 2016.pdf
 
La Bauhaus y la nueva tipografía en el diseño gráfico
La Bauhaus y la nueva tipografía en el diseño gráficoLa Bauhaus y la nueva tipografía en el diseño gráfico
La Bauhaus y la nueva tipografía en el diseño gráfico
 
Sofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design PortfolioSofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design Portfolio
 
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
S7_ Grises y quebrados. semana 07 sesión 1
S7_ Grises y quebrados. semana 07 sesión 1S7_ Grises y quebrados. semana 07 sesión 1
S7_ Grises y quebrados. semana 07 sesión 1
 
Metodo-cuadricula-HyST para medicion con luxometro
Metodo-cuadricula-HyST para medicion con luxometroMetodo-cuadricula-HyST para medicion con luxometro
Metodo-cuadricula-HyST para medicion con luxometro
 
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptxADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
ADMINISTRACION ADECUADA DE MEDICAMENTOS.pptx
 
Triptico de los derechos humanos pe señorees jaja
Triptico de los derechos humanos pe señorees jajaTriptico de los derechos humanos pe señorees jaja
Triptico de los derechos humanos pe señorees jaja
 
Fundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesFundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principales
 
LA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTAL
LA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTALLA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTAL
LA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTAL
 
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptxATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
 
Afiche Didáctico sobre el Manierismo.pdf
Afiche Didáctico sobre el Manierismo.pdfAfiche Didáctico sobre el Manierismo.pdf
Afiche Didáctico sobre el Manierismo.pdf
 
Tríptico-en-homenaje-por-el-día-de-la-madre.pdf
Tríptico-en-homenaje-por-el-día-de-la-madre.pdfTríptico-en-homenaje-por-el-día-de-la-madre.pdf
Tríptico-en-homenaje-por-el-día-de-la-madre.pdf
 
tema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos Itema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos I
 
encuadre.docx. . . . . . . . . . . .
encuadre.docx.                 . . . . . . . . . . .encuadre.docx.                 . . . . . . . . . . .
encuadre.docx. . . . . . . . . . . .
 
CATALOGO 2024 DIA DE LA MADRE, presentación.pdf
CATALOGO 2024 DIA DE LA MADRE, presentación.pdfCATALOGO 2024 DIA DE LA MADRE, presentación.pdf
CATALOGO 2024 DIA DE LA MADRE, presentación.pdf
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 

T06 dawebareas

  • 1. DISEÑO Y ADMINISTRACIÓN WEB Facultad de Estudios Superiores Acatlán División de Diseño y Edificación Licenciatura en Diseño Gráfico Ramón Patiño Trejo diseñador gráfico designoacatlan@gmail.com designoacatlan.blogspot.mx
  • 2. Tema VI: Arquitectura de la información. MENÚ> CONTENIDO> SUBMENÚ> PROMOCIONES
  • 3. Definición de arquitectura de la información El término "Arquitectura de la Información" (AI) fue utilizado por primera vez por Richard Saul Wurman en 1975, quién la definió como: “El estudio de la organización de la información con el objetivo de permitir al usuario encontrar su vía de navegación hacia el conocimiento y la comprensión de la información”. En el campo de la Web, Louis Rosenfeld y Peter Morville en su libro "Information Architecture for the World Wide Web", definen a la AI: “El arte y la ciencia de estructurar y clasificar sitios web e intranets con el fin de ayudar a los usuarios a encontrar y manejar la información”.
  • 4. Concepto de arquitectura de la información  El concepto "Arquitectura de la Información" no solo engloba la actividad de organizar información, sino también el resultado de dicha actividad.  La arquitectura de la información de un sitio web, como resultado de la actividad, comprende los sistemas de organización y estructuración de los contenidos, los sistemas de rotulado o etiquetado de dichos contenidos, y los sistemas de recuperación de información y navegación que provea el sitio web.
  • 5. Áreas de prioridad de una página web Para colocar el contenido de alta prioridad en una página, la regla mnemotécnica es que: el lugar donde las personas miran con mayor frecuencia es en la esquina superior izquierda del área del contenido, la cual es el área de mayor prioridad para cualquier diseño general de una página con un sistema de navegación en el borde superior y el lateral izquierdo, con un carril derecho.
  • 6. Áreas de prioridad de una página web
  • 7. Áreas de prioridad de una página web Cuando se reserva un alto porcentaje de una página a elementos que no miran los usuarios o que los mira muy poco, se habla de una "mala distribución de parcelas de la pantalla", es decir, no es un usos efectivo ni eficiente del espacio. Y constituye un problema serio si se considera que las personas pueden estar obviando información de la que podrían estar beneficiándose.
  • 8. Áreas de prioridad del contenido web
  • 9. Prioridad de la página de inicio Una página de inicio que muestre incontables banners, barras e imágenes inútiles es una mala elección, pues los usuarios pasan un 25% del tiempo visitando la página de inicio. Es necesario categorizar la prioridad y la importancia de los contenidos, así como las secciones de la página, para hacer coincidir la importancia de la información con el área de prioridad correspondiente y el orden con el que se examina la página.
  • 10. Diagrama de flujo: mapa navegación
  • 11. Prioridad de los elementos web  Un espacio en blanco bien colocado es más útil que una imagen abarrotada, no relacionada con el contexto, de bajo contraste o difícil de descifrar al momento de funcionar como descanso visual o cognitivo.  Menús, imágenes, vínculos y promociones compiten unos con otros por la atención del visitante, por lo que es importante definir cuáles deben prevalecer.  Toda página web contiene elementos magnéticos que solicita a los usuarios que miren o selecciones por sobre los otros, así es obligación del diseñador conocer cuáles recogen la atracción con mayor fuerza de parte de los usuarios y cuáles elementos van a quedar fuera de su atención.
  • 12. Importancia de las pistas falsas Nielsen y Pernice consideran que todas las pistas falsas tienen un precio: "Los elementos que engañan a los visitantes del sitio se conocen como 'pistas falsas'. Aunque los visitantes pasen por una página y completen sus tareas con éxito, las pistas falsas son un problema. Los usuarios deberían emplear su tiempo pensando y dedicando sus fijaciones a los comandos necesarios para sus tareas y no despistarse con elementos que no tienen nada que ver con sus necesidades".
  • 13. Elementos de esparcimiento Las páginas web pueden incluir elementos de esparcimiento tales como una frase, un artículo o una imagen de interés o diversión para los usuarios, pero tentarlos con estos elementos en el momento equivocado, puede resultar contraproducente.
  • 14. Parámetros cuantitativos Los autores proponen cuatro parámetros cuantitativos para entender como se relacionan las pistas falsas con las medidas tradicionales de usabilidad:  Tiempo de la tarea.- tiempo transcurrido hasta que dicen haber terminado.  Éxito.- número de usuarios que consiguen completar satisfactoriamente la tarea.  Errores.- número de ocasiones en que los usuarios hacen clic hacia un camino que les lleva en la dirección equivocada.  Satisfacción del usuario.- cómo valoran los usuarios su experiencia con la interfaz.
  • 15. Definición de sitios exitosos Consideran que un sitio con éxito es aquél en el que las características más importantes son fáciles de ver y de utilizar. Por lo que hay que dejar de lado toda la información superflua que por cuestiones de políticas se quieran verter en una página web y que causarían ruido visual con demasiados comandos, banners, imágenes y otros elementos generados.