SlideShare uma empresa Scribd logo
1 de 12
ESTRUCTURA DEL SITIO
Usabilidad Web
Usabilidad Web
El término usabilidad hace referencia a la facilidad que tienen los
usuarios para navegar por un Website, es decir, se trata de que los
potenciales clientes accedan de forma fácil a los contenidos y no
abandonen la navegación sin ver o comprar los productos o
servicios ofrecidos.
La página principal o Index debe ser atractiva, fácil de visualizar y
muy comunicativa del contenido interior del resto del sitio.
Cabezote
Es un elemento grafico que aparece en la parte superior de las páginas
web. Generalmente están acompañadas del distintivo visual de la
empresa, y por información general sobre ella o algún producto o
servicio que se ofrece.
Es muy común encontrar en el cabezote el botón de búsqueda y las
opciones de inicio de sesión.
Botones
Características de los botones:
• Deben estar siempre visibles para facilitar la navegación en el sitio.
• Deben tener el mismo tamaño (ancho y alto)
• Deben utilizar el mismo tipo y tamaño de letra
• No deben tener degradados y utilizar colores planos.
• Si tienen animación que no sea muy exagerada.
• al abrirse la página del botón seleccionado, éste debe cambiar de color o de
forma, con el fin de indicarle al usuario que está activo dicho botón.
Tipos de Botones
Textuales:
Sólo llevan texto y se recomienda que sea una sola palabra,
máximo dos. Son los más usuales y están dentro de una forma
geométrica.
Cuando se quiera realizar una acción se debe utilizar verbos en
infinitivo, como por ejemplo: Guardar, Buscar, Eliminar, entre otros.
Tipos de Botones
Icónicos:
Transmiten información a través de un imagen, no necesitan texto.
Se utilizan para ahorrar espacio y deben conservar todos el mismo
tamaño.
Índices
Son menús ordenados por niveles o subniveles, se utilizan para
catálogos de productos para visualizar de forma ordenada, los
productos o servicios ofertados por la empresa.
Ejemplo: http://www.falabella.com.co/
Mapas Web
Representan de forma gráfica la estructura del sitio, permitiendo al
usuario fácilmente ubicarse en un lugar dentro del sitio.
Ejemplo: http://www.exito.com/
Buscadores
Son herramientas que se insertan en algunas Páginas Web para
localizar contenidos.
Hay dos tipos de buscadores:
1. Direcciona a Google
2. Buscador interno con una Base de Datos
Ejemplo: http://politecnicojic.edu.co
Widgets
Son miniprogramas o pequeñas aplicaciones que facilitan al usuario
tareas dentro de la Web. Ejemplo: Calculadoras – Videos de
Youtube – El tiempo
Ejemplo: http://www.13.cl/
Redes sociales
Son un conjunto de botones que permiten al usuario
desplazarse hasta las comunidades sociales del sitio que
esta visitando.
Generalmente estos botones tienen vínculos a Facebook,
twitter, google +, youtube, pinterest, entre otras redes
sociales.
EJEMPLOS DE SITIOS WEB
• http://www.degusta.com.co/
• http://www.cssmania.com/

Mais conteúdo relacionado

Semelhante a Elementos estructura de un sitio - Usabilidad

Semelhante a Elementos estructura de un sitio - Usabilidad (20)

Guia html2
Guia html2Guia html2
Guia html2
 
DISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdfDISEÑO DE INTERFACES.pdf
DISEÑO DE INTERFACES.pdf
 
Usabilidad del sitio web
Usabilidad del sitio webUsabilidad del sitio web
Usabilidad del sitio web
 
T08 dawebnavega
T08 dawebnavegaT08 dawebnavega
T08 dawebnavega
 
Interfaces Gráficas de Usuario.pptx
Interfaces Gráficas de Usuario.pptxInterfaces Gráficas de Usuario.pptx
Interfaces Gráficas de Usuario.pptx
 
Qué es el diseño web
Qué es el diseño webQué es el diseño web
Qué es el diseño web
 
¿Qué es el diseño web?
¿Qué es el diseño web? ¿Qué es el diseño web?
¿Qué es el diseño web?
 
Kingston team final - Venta de Casas
Kingston team final - Venta de CasasKingston team final - Venta de Casas
Kingston team final - Venta de Casas
 
01 lineamientos pm
01 lineamientos pm01 lineamientos pm
01 lineamientos pm
 
Analisis web
Analisis webAnalisis web
Analisis web
 
Determinación de la información del sitio web
Determinación de la información del sitio webDeterminación de la información del sitio web
Determinación de la información del sitio web
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Guía de evaluación heurística de sitios web
Guía de evaluación heurística de sitios webGuía de evaluación heurística de sitios web
Guía de evaluación heurística de sitios web
 
Retículas para pantalla
Retículas para pantallaRetículas para pantalla
Retículas para pantalla
 
Lalalalala lalalalala lalalala
Lalalalala lalalalala lalalalaLalalalala lalalalala lalalala
Lalalalala lalalalala lalalala
 
Portafolio evidencias unidad 1 manual de word
Portafolio evidencias unidad 1 manual de wordPortafolio evidencias unidad 1 manual de word
Portafolio evidencias unidad 1 manual de word
 
Pagina web mia_2
Pagina web mia_2Pagina web mia_2
Pagina web mia_2
 
Menu y footer
Menu y footerMenu y footer
Menu y footer
 
Menusfooter
MenusfooterMenusfooter
Menusfooter
 
Menu de Navegacion y footer
Menu  de Navegacion y footerMenu  de Navegacion y footer
Menu de Navegacion y footer
 

Mais de profecesde

Community manager y redes sociales
Community manager y redes socialesCommunity manager y redes sociales
Community manager y redes socialesprofecesde
 
Qué es la publicidad online?
Qué es la publicidad online?Qué es la publicidad online?
Qué es la publicidad online?profecesde
 
Tipos de publicidad online
Tipos de publicidad onlineTipos de publicidad online
Tipos de publicidad onlineprofecesde
 
Modulos y funciones en VBA
Modulos y funciones en VBAModulos y funciones en VBA
Modulos y funciones en VBAprofecesde
 
Principios de ordenamiento
Principios de ordenamientoPrincipios de ordenamiento
Principios de ordenamientoprofecesde
 
Recursos basicos del archivo
Recursos basicos del archivoRecursos basicos del archivo
Recursos basicos del archivoprofecesde
 
Clasificacion documental
Clasificacion documentalClasificacion documental
Clasificacion documentalprofecesde
 
Presente progresivo en inglés
Presente progresivo en inglésPresente progresivo en inglés
Presente progresivo en inglésprofecesde
 
Community manager
Community managerCommunity manager
Community managerprofecesde
 
Importancia de la conservación de la información
Importancia de la conservación de la informaciónImportancia de la conservación de la información
Importancia de la conservación de la informaciónprofecesde
 

Mais de profecesde (17)

Tema 2 ley
Tema 2   leyTema 2   ley
Tema 2 ley
 
Community manager y redes sociales
Community manager y redes socialesCommunity manager y redes sociales
Community manager y redes sociales
 
Qué es la publicidad online?
Qué es la publicidad online?Qué es la publicidad online?
Qué es la publicidad online?
 
Tipos de publicidad online
Tipos de publicidad onlineTipos de publicidad online
Tipos de publicidad online
 
Future tenses
Future tensesFuture tenses
Future tenses
 
Modulos y funciones en VBA
Modulos y funciones en VBAModulos y funciones en VBA
Modulos y funciones en VBA
 
Principios de ordenamiento
Principios de ordenamientoPrincipios de ordenamiento
Principios de ordenamiento
 
Recursos basicos del archivo
Recursos basicos del archivoRecursos basicos del archivo
Recursos basicos del archivo
 
Archivo
ArchivoArchivo
Archivo
 
Clasificacion documental
Clasificacion documentalClasificacion documental
Clasificacion documental
 
Simple past
Simple pastSimple past
Simple past
 
Presente progresivo en inglés
Presente progresivo en inglésPresente progresivo en inglés
Presente progresivo en inglés
 
Web 2,0
Web 2,0Web 2,0
Web 2,0
 
Community manager
Community managerCommunity manager
Community manager
 
Importancia de la conservación de la información
Importancia de la conservación de la informaciónImportancia de la conservación de la información
Importancia de la conservación de la información
 
Documento
DocumentoDocumento
Documento
 
Diseno web
Diseno webDiseno web
Diseno web
 

Último

5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONALMiNeyi1
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Alejandrino Halire Ccahuana
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSYadi Campos
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docxEliaHernndez7
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdfValeriaCorrea29
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfMercedes Gonzalez
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxYadi Campos
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptxdeimerhdz21
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdfMiNeyi1
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...JonathanCovena1
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptAlberto Rubio
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfpatriciaines1993
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dstEphaniiie
 
Infografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfInfografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfAlfaresbilingual
 
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdfMiguelHuaman31
 

Último (20)

5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdf
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
 
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdfTema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
Infografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfInfografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdf
 
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
 

Elementos estructura de un sitio - Usabilidad

  • 2. Usabilidad Web El término usabilidad hace referencia a la facilidad que tienen los usuarios para navegar por un Website, es decir, se trata de que los potenciales clientes accedan de forma fácil a los contenidos y no abandonen la navegación sin ver o comprar los productos o servicios ofrecidos. La página principal o Index debe ser atractiva, fácil de visualizar y muy comunicativa del contenido interior del resto del sitio.
  • 3. Cabezote Es un elemento grafico que aparece en la parte superior de las páginas web. Generalmente están acompañadas del distintivo visual de la empresa, y por información general sobre ella o algún producto o servicio que se ofrece. Es muy común encontrar en el cabezote el botón de búsqueda y las opciones de inicio de sesión.
  • 4. Botones Características de los botones: • Deben estar siempre visibles para facilitar la navegación en el sitio. • Deben tener el mismo tamaño (ancho y alto) • Deben utilizar el mismo tipo y tamaño de letra • No deben tener degradados y utilizar colores planos. • Si tienen animación que no sea muy exagerada. • al abrirse la página del botón seleccionado, éste debe cambiar de color o de forma, con el fin de indicarle al usuario que está activo dicho botón.
  • 5. Tipos de Botones Textuales: Sólo llevan texto y se recomienda que sea una sola palabra, máximo dos. Son los más usuales y están dentro de una forma geométrica. Cuando se quiera realizar una acción se debe utilizar verbos en infinitivo, como por ejemplo: Guardar, Buscar, Eliminar, entre otros.
  • 6. Tipos de Botones Icónicos: Transmiten información a través de un imagen, no necesitan texto. Se utilizan para ahorrar espacio y deben conservar todos el mismo tamaño.
  • 7. Índices Son menús ordenados por niveles o subniveles, se utilizan para catálogos de productos para visualizar de forma ordenada, los productos o servicios ofertados por la empresa. Ejemplo: http://www.falabella.com.co/
  • 8. Mapas Web Representan de forma gráfica la estructura del sitio, permitiendo al usuario fácilmente ubicarse en un lugar dentro del sitio. Ejemplo: http://www.exito.com/
  • 9. Buscadores Son herramientas que se insertan en algunas Páginas Web para localizar contenidos. Hay dos tipos de buscadores: 1. Direcciona a Google 2. Buscador interno con una Base de Datos Ejemplo: http://politecnicojic.edu.co
  • 10. Widgets Son miniprogramas o pequeñas aplicaciones que facilitan al usuario tareas dentro de la Web. Ejemplo: Calculadoras – Videos de Youtube – El tiempo Ejemplo: http://www.13.cl/
  • 11. Redes sociales Son un conjunto de botones que permiten al usuario desplazarse hasta las comunidades sociales del sitio que esta visitando. Generalmente estos botones tienen vínculos a Facebook, twitter, google +, youtube, pinterest, entre otras redes sociales.
  • 12. EJEMPLOS DE SITIOS WEB • http://www.degusta.com.co/ • http://www.cssmania.com/