SlideShare une entreprise Scribd logo
1  sur  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/

Contenu connexe

Similaire à Elementos estructura de un sitio - Usabilidad

Similaire à 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
 

Plus 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
 

Plus 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
 

Dernier

Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaDecaunlz
 
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
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfPaolaRopero2
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxzulyvero07
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfNancyLoaa
 
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfEjercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfMaritzaRetamozoVera
 
Imperialismo informal en Europa y el imperio
Imperialismo informal en Europa y el imperioImperialismo informal en Europa y el imperio
Imperialismo informal en Europa y el imperiomiralbaipiales2016
 
Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxdkmeza
 
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í
 
Valoración Crítica de EEEM Feco2023 FFUCV
Valoración Crítica de EEEM Feco2023 FFUCVValoración Crítica de EEEM Feco2023 FFUCV
Valoración Crítica de EEEM Feco2023 FFUCVGiustinoAdesso1
 
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
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónLourdes Feria
 
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptxORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptxnandoapperscabanilla
 
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática4    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática4    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 

Dernier (20)

Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
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...
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
 
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptxACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
ACUERDO MINISTERIAL 078-ORGANISMOS ESCOLARES..pptx
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdf
 
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdfEjercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
Ejercicios de PROBLEMAS PAEV 6 GRADO 2024.pdf
 
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
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
Imperialismo informal en Europa y el imperio
Imperialismo informal en Europa y el imperioImperialismo informal en Europa y el imperio
Imperialismo informal en Europa y el imperio
 
Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptx
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.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
 
Valoración Crítica de EEEM Feco2023 FFUCV
Valoración Crítica de EEEM Feco2023 FFUCVValoración Crítica de EEEM Feco2023 FFUCV
Valoración Crítica de EEEM Feco2023 FFUCV
 
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
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptxORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
 
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática4    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática4    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdf
 
Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.Fe contra todo pronóstico. La fe es confianza.
Fe contra todo pronóstico. La fe es confianza.
 

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/