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

DETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIORDETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIORGonella
 
EDUCACION FISICA 1° PROGRAMACIÓN ANUAL 2023.docx
EDUCACION FISICA 1°  PROGRAMACIÓN ANUAL 2023.docxEDUCACION FISICA 1°  PROGRAMACIÓN ANUAL 2023.docx
EDUCACION FISICA 1° PROGRAMACIÓN ANUAL 2023.docxLuisAndersonPachasto
 
MODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docxMODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docxRAMON EUSTAQUIO CARO BAYONA
 
cuadernillo de lectoescritura para niños de básica
cuadernillo de lectoescritura para niños de básicacuadernillo de lectoescritura para niños de básica
cuadernillo de lectoescritura para niños de básicaGianninaValeskaContr
 
periodico mural y sus partes y caracteristicas
periodico mural y sus partes y caracteristicasperiodico mural y sus partes y caracteristicas
periodico mural y sus partes y caracteristicas123yudy
 
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdfEstrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdfAlfredoRamirez953210
 
Contextualización y aproximación al objeto de estudio de investigación cualit...
Contextualización y aproximación al objeto de estudio de investigación cualit...Contextualización y aproximación al objeto de estudio de investigación cualit...
Contextualización y aproximación al objeto de estudio de investigación cualit...Angélica Soledad Vega Ramírez
 
PROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docxPROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docxEribertoPerezRamirez
 
Técnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materialesTécnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materialesRaquel Martín Contreras
 
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJOTUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJOweislaco
 
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...fcastellanos3
 
CIENCIAS NATURALES 4 TO ambientes .docx
CIENCIAS NATURALES 4 TO  ambientes .docxCIENCIAS NATURALES 4 TO  ambientes .docx
CIENCIAS NATURALES 4 TO ambientes .docxAgustinaNuez21
 
Los Nueve Principios del Desempeño de la Sostenibilidad
Los Nueve Principios del Desempeño de la SostenibilidadLos Nueve Principios del Desempeño de la Sostenibilidad
Los Nueve Principios del Desempeño de la SostenibilidadJonathanCovena1
 
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdfOswaldoGonzalezCruz
 
05 Fenomenos fisicos y quimicos de la materia.pdf
05 Fenomenos fisicos y quimicos de la materia.pdf05 Fenomenos fisicos y quimicos de la materia.pdf
05 Fenomenos fisicos y quimicos de la materia.pdfRAMON EUSTAQUIO CARO BAYONA
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxYeseniaRivera50
 
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfFisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfcoloncopias5
 
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdfFichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdfssuser50d1252
 

Dernier (20)

Earth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversaryEarth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversary
 
DETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIORDETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIOR
 
EDUCACION FISICA 1° PROGRAMACIÓN ANUAL 2023.docx
EDUCACION FISICA 1°  PROGRAMACIÓN ANUAL 2023.docxEDUCACION FISICA 1°  PROGRAMACIÓN ANUAL 2023.docx
EDUCACION FISICA 1° PROGRAMACIÓN ANUAL 2023.docx
 
MODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docxMODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docx
 
cuadernillo de lectoescritura para niños de básica
cuadernillo de lectoescritura para niños de básicacuadernillo de lectoescritura para niños de básica
cuadernillo de lectoescritura para niños de básica
 
periodico mural y sus partes y caracteristicas
periodico mural y sus partes y caracteristicasperiodico mural y sus partes y caracteristicas
periodico mural y sus partes y caracteristicas
 
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdfEstrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
 
Contextualización y aproximación al objeto de estudio de investigación cualit...
Contextualización y aproximación al objeto de estudio de investigación cualit...Contextualización y aproximación al objeto de estudio de investigación cualit...
Contextualización y aproximación al objeto de estudio de investigación cualit...
 
PROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docxPROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docx
 
Técnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materialesTécnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materiales
 
DIA INTERNACIONAL DAS FLORESTAS .
DIA INTERNACIONAL DAS FLORESTAS         .DIA INTERNACIONAL DAS FLORESTAS         .
DIA INTERNACIONAL DAS FLORESTAS .
 
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJOTUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
TUTORIA II - CIRCULO DORADO UNIVERSIDAD CESAR VALLEJO
 
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
 
CIENCIAS NATURALES 4 TO ambientes .docx
CIENCIAS NATURALES 4 TO  ambientes .docxCIENCIAS NATURALES 4 TO  ambientes .docx
CIENCIAS NATURALES 4 TO ambientes .docx
 
Los Nueve Principios del Desempeño de la Sostenibilidad
Los Nueve Principios del Desempeño de la SostenibilidadLos Nueve Principios del Desempeño de la Sostenibilidad
Los Nueve Principios del Desempeño de la Sostenibilidad
 
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
 
05 Fenomenos fisicos y quimicos de la materia.pdf
05 Fenomenos fisicos y quimicos de la materia.pdf05 Fenomenos fisicos y quimicos de la materia.pdf
05 Fenomenos fisicos y quimicos de la materia.pdf
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
 
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfFisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
 
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).pdfFichas de MatemáticA QUINTO DE SECUNDARIA).pdf
Fichas de MatemáticA QUINTO DE SECUNDARIA).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/