SlideShare una empresa de Scribd logo
MIGUEL CARDENAS
 PAOLA VARGAS
1.DUPLICA LOS ELEMENTOS DE NAVAGACION
Si la página va a tener un tamaño superior a dos tres
ventanas, conviene situar los elementos de navegación
en el encabezado y pie de la misma.
2. AÑADE ENLACES AL PRINCIPIO DE LA PÁGINA
Si la página es larga, es necesario situar al
final de ella e incluso por el medio hipervínculos que
apunten al inicio de la misma.
3. Define una estructura sencilla de navegación
Es recomendable utilizar una estructura jerárquica sencilla
a partir de una página índice evitando abusar de los
enlaces que saltan de una rama a otra.
4. AÑADE UNA PALETA DE NAVEGACIÓN TEXTUAL
Si utilizas una paleta de navegación a base de gráficos,
incorpora otra paleta adicional a base de enlaces de
texto. De esta forma el usuario no tendrá que esperar a
que se carguen las imágenes para saltar a otra página.
5. PROPORCIONA SIEMPRE ÍNDICES
Sitúa siempre que sea posible un índice con el contenido
del sitio. Sitúalo al principio, lateral o final de cada una de
las páginas para que sea siempre accesible
1.TAMAÑO DE LAS PÁGINAS
Las personas no suelen hacer scroll. Por este motivo las páginas
no deben ser más largas del doble de la pantalla. Fracciona el
texto en varias páginas cuando el tamaño del mismo sea
excesivo para una página.
2. IDENTIFICACIÓN DE LAS PÁGINAS
Es interesante situar información del centro o proyecto
en el pie o encabezado de todas las páginas. Incluso con
posibilidad de acceder a un email de contacto o a la página
índice
3. Enlaces
-Escribe el texto como si no tuviera enlaces. Evita enlaces con el
texto:
"Pincha aquí" porque alteran la normal lectura del texto.
-Evita textos demasiado largos como enlace. Para no dificultar
la lectura.
1. negrita: no abuses del uso de la negrita destacando
gran cantidad de texto ni del uso de mayúsculas porque
son más difíciles de leer.
2. Tipos de fuente: Utiliza fuentes habituales porque el
usuario debe tenerla instalada
en su equipo para poder ver el texto con ella a través del
navegador web. Si utilizas
una fuente enlazada para edades tempranas (Edelfont,
Memima, etc.) recuerda que el
texto no se mostrará con ella si el usuario no tiene
instalada esta fuente en ella.
3. Tamaño de la fuente: Utiliza los estilos de párrafo para
modificar el tamaño de los
textos.
4. Capitalización. Un título es más atractivo con todas las
iniciales en Mayúsculas y el resto en minúsculas que todas
en Mayúsculas.
5. Variedad de fuentes. No conviene abusar del número
de tipos de fuente distintas a
utilizar en un documento. Basta con una o dos (texto y
titulares)
1. Tamaño de una imagen enlazada: Si se inserta un
enlace a una imagen de cierto
peso conviene situar una vista en miniatura de escaso
peso indicando el tamaño del
archivo que la contiene.
2. Imágenes de fondo: Utiliza imágenes de fondo de
colores adecuados que no oculten
el texto de la página. Tendrán una tonalidad parecida al
color de fondo y de baja
calidad para que se descarguen rápidamente.
3. Imágenes decorativas: No abuses del uso de imágenes
no significativas. Dosifica el
número de imágenes de una página para evitar las
esperas durante su descarga.
4. Dimensiones de una imagen: Indica la altura y anchura
de la imagen al insertarla en
una página. De esta forma al descargarse la página
ya se reserva el espacio para
mostrarse una vez se complete la imagen.
5. Descarga progresiva: Configura tus imágenes de cierto
peso para que realicen la
visualización progresiva conforme se vayan descargando.
6. Ahorro de imágenes: Trata de usar el mismo archivo de
imagen tantas veces como
sea posible para acelerar la visualización.
7. Formato de imágenes: Usa GIF y PNG siempre que sea
posible. Para las fotografías es
mejor el formato JPEG.
Usabilidad de las paguinas web

Más contenido relacionado

Similar a Usabilidad de las paguinas web

Usabilidad de las paguinas web
Usabilidad de las paguinas webUsabilidad de las paguinas web
Usabilidad de las paguinas webmyguel100
 
Actividad n3
Actividad n3Actividad n3
Actividad n3marcos_77
 
8 Ideas Escribir Contenidos
8 Ideas   Escribir Contenidos8 Ideas   Escribir Contenidos
8 Ideas Escribir ContenidosGonzalo Suárez
 
Fondo y contenido
Fondo y contenidoFondo y contenido
Fondo y contenido
Yadith Gomez Nolasco
 
Fondo y contenido
Fondo y contenidoFondo y contenido
Fondo y contenido
Yadith Gomez Nolasco
 
Diapositiva Exitosa.pptx
Diapositiva Exitosa.pptxDiapositiva Exitosa.pptx
Diapositiva Exitosa.pptx
FoxDesing
 
DiseñO Web
DiseñO WebDiseñO Web
5 segundos
5 segundos5 segundos
5 segundos
Fer Ibarra
 
Diseño de paginas web
Diseño de paginas webDiseño de paginas web
Diseño de paginas webIgnacio Reyes
 
Prezi
PreziPrezi
Prezi
yomari10
 
Notas Taller Diseño Web para OSC´s
Notas Taller  Diseño Web para OSC´sNotas Taller  Diseño Web para OSC´s
Notas Taller Diseño Web para OSC´s
Guillermo Hsz
 
Principios elementales de maquetación WEB
Principios elementales de maquetación WEBPrincipios elementales de maquetación WEB
Principios elementales de maquetación WEB
Javier Navarro
 
10-reglas-oro-crear-presentacion-diapositivas-exitosa.ppsx
10-reglas-oro-crear-presentacion-diapositivas-exitosa.ppsx10-reglas-oro-crear-presentacion-diapositivas-exitosa.ppsx
10-reglas-oro-crear-presentacion-diapositivas-exitosa.ppsx
InversionesNahianair
 
Idsaia mendoza- airamvier-doc
Idsaia   mendoza- airamvier-docIdsaia   mendoza- airamvier-doc
Idsaia mendoza- airamvier-doc
airamvier mendoza
 
20 leyes heuristicas usabilidad
20 leyes heuristicas usabilidad20 leyes heuristicas usabilidad
20 leyes heuristicas usabilidad
Angel Sánchez Cáceres
 
Manual de creacion de una página web
Manual de creacion de una página webManual de creacion de una página web
Manual de creacion de una página web
Jonathan160597
 
Hipervinculo
HipervinculoHipervinculo
Hipervinculo
MnicaABC
 
Guía de escritura en Medios y Redes
Guía de escritura en Medios y RedesGuía de escritura en Medios y Redes
Guía de escritura en Medios y Redes
Medios y Redes
 
Taller Urbanidad Blogs[1]
Taller Urbanidad Blogs[1]Taller Urbanidad Blogs[1]
Taller Urbanidad Blogs[1]askubia25
 

Similar a Usabilidad de las paguinas web (20)

Usabilidad de las paguinas web
Usabilidad de las paguinas webUsabilidad de las paguinas web
Usabilidad de las paguinas web
 
Actividad n3
Actividad n3Actividad n3
Actividad n3
 
8 Ideas Escribir Contenidos
8 Ideas   Escribir Contenidos8 Ideas   Escribir Contenidos
8 Ideas Escribir Contenidos
 
Fondo y contenido
Fondo y contenidoFondo y contenido
Fondo y contenido
 
Fondo y contenido
Fondo y contenidoFondo y contenido
Fondo y contenido
 
Diapositiva Exitosa.pptx
Diapositiva Exitosa.pptxDiapositiva Exitosa.pptx
Diapositiva Exitosa.pptx
 
DiseñO Web
DiseñO WebDiseñO Web
DiseñO Web
 
5 segundos
5 segundos5 segundos
5 segundos
 
Diseño de paginas web
Diseño de paginas webDiseño de paginas web
Diseño de paginas web
 
Prezi
PreziPrezi
Prezi
 
Notas Taller Diseño Web para OSC´s
Notas Taller  Diseño Web para OSC´sNotas Taller  Diseño Web para OSC´s
Notas Taller Diseño Web para OSC´s
 
Principios elementales de maquetación WEB
Principios elementales de maquetación WEBPrincipios elementales de maquetación WEB
Principios elementales de maquetación WEB
 
10-reglas-oro-crear-presentacion-diapositivas-exitosa.ppsx
10-reglas-oro-crear-presentacion-diapositivas-exitosa.ppsx10-reglas-oro-crear-presentacion-diapositivas-exitosa.ppsx
10-reglas-oro-crear-presentacion-diapositivas-exitosa.ppsx
 
Idsaia mendoza- airamvier-doc
Idsaia   mendoza- airamvier-docIdsaia   mendoza- airamvier-doc
Idsaia mendoza- airamvier-doc
 
20 leyes heuristicas usabilidad
20 leyes heuristicas usabilidad20 leyes heuristicas usabilidad
20 leyes heuristicas usabilidad
 
Manual de creacion de una página web
Manual de creacion de una página webManual de creacion de una página web
Manual de creacion de una página web
 
Hipervinculo
HipervinculoHipervinculo
Hipervinculo
 
Guía de escritura en Medios y Redes
Guía de escritura en Medios y RedesGuía de escritura en Medios y Redes
Guía de escritura en Medios y Redes
 
Escritura web
Escritura webEscritura web
Escritura web
 
Taller Urbanidad Blogs[1]
Taller Urbanidad Blogs[1]Taller Urbanidad Blogs[1]
Taller Urbanidad Blogs[1]
 

Último

Plantilla_PPT UNIATLÁNTICO_2022 (1) (2).pptx
Plantilla_PPT UNIATLÁNTICO_2022 (1) (2).pptxPlantilla_PPT UNIATLÁNTICO_2022 (1) (2).pptx
Plantilla_PPT UNIATLÁNTICO_2022 (1) (2).pptx
samuelcarrillow
 
Desarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdfDesarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdf
marianamadronero578
 
Elaboración, implementación y evaluación del PCI para la gestión pedagógica d...
Elaboración, implementación y evaluación del PCI para la gestión pedagógica d...Elaboración, implementación y evaluación del PCI para la gestión pedagógica d...
Elaboración, implementación y evaluación del PCI para la gestión pedagógica d...
moshe jonathan
 
MODELO DE PPT PARA LA SUSTENTACIÓN DEL TSP.pptx
MODELO DE PPT PARA LA SUSTENTACIÓN DEL TSP.pptxMODELO DE PPT PARA LA SUSTENTACIÓN DEL TSP.pptx
MODELO DE PPT PARA LA SUSTENTACIÓN DEL TSP.pptx
JosephCruz580440
 
Portfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina BalmacedaPortfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina Balmaceda
ValentinaBalmaceda2
 
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
SarahVzquezVsquez
 
Porfolio livings creados por Carlotta Design
Porfolio livings creados por Carlotta DesignPorfolio livings creados por Carlotta Design
Porfolio livings creados por Carlotta Design
paulacoux1
 
Mueble Universal la estantería que se adapta a tu entorno
Mueble Universal la estantería que se adapta a tu entornoMueble Universal la estantería que se adapta a tu entorno
Mueble Universal la estantería que se adapta a tu entorno
Artevita muebles
 
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANOMOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
gonzalezdfidelibus
 
mapa de macuspana tabasco por centro integrador
mapa de macuspana tabasco por centro integradormapa de macuspana tabasco por centro integrador
mapa de macuspana tabasco por centro integrador
Richard17BR
 
informecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docxinformecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docx
IsabellaCortes7
 
Catalogo General Durstone Distribuidor Oficial Amado Salvador Valencia
Catalogo General Durstone Distribuidor Oficial Amado Salvador ValenciaCatalogo General Durstone Distribuidor Oficial Amado Salvador Valencia
Catalogo General Durstone Distribuidor Oficial Amado Salvador Valencia
AMADO SALVADOR
 
Porfolio de diseños de Comedores de Carlotta Design
Porfolio  de diseños de Comedores de Carlotta DesignPorfolio  de diseños de Comedores de Carlotta Design
Porfolio de diseños de Comedores de Carlotta Design
paulacoux1
 
etiqueta que se utiliza en un restaurante .pdf
etiqueta que se utiliza en  un restaurante  .pdfetiqueta que se utiliza en  un restaurante  .pdf
etiqueta que se utiliza en un restaurante .pdf
Vhope6
 
mapa mental gestion del capital humano.pdf
mapa mental gestion del capital humano.pdfmapa mental gestion del capital humano.pdf
mapa mental gestion del capital humano.pdf
andreakathe12
 
Manual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computoManual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computo
mantenimientofresita
 
Proyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdf
Proyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdfProyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdf
Proyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdf
RicardoArayaLobo
 
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
62946377
 
Analisis del usuario y programa arquitectonico.pdf
Analisis del usuario y programa arquitectonico.pdfAnalisis del usuario y programa arquitectonico.pdf
Analisis del usuario y programa arquitectonico.pdf
FARITOMASSURCOCRUZ1
 
soporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computosoporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computo
mantenimientofresita
 

Último (20)

Plantilla_PPT UNIATLÁNTICO_2022 (1) (2).pptx
Plantilla_PPT UNIATLÁNTICO_2022 (1) (2).pptxPlantilla_PPT UNIATLÁNTICO_2022 (1) (2).pptx
Plantilla_PPT UNIATLÁNTICO_2022 (1) (2).pptx
 
Desarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdfDesarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdf
 
Elaboración, implementación y evaluación del PCI para la gestión pedagógica d...
Elaboración, implementación y evaluación del PCI para la gestión pedagógica d...Elaboración, implementación y evaluación del PCI para la gestión pedagógica d...
Elaboración, implementación y evaluación del PCI para la gestión pedagógica d...
 
MODELO DE PPT PARA LA SUSTENTACIÓN DEL TSP.pptx
MODELO DE PPT PARA LA SUSTENTACIÓN DEL TSP.pptxMODELO DE PPT PARA LA SUSTENTACIÓN DEL TSP.pptx
MODELO DE PPT PARA LA SUSTENTACIÓN DEL TSP.pptx
 
Portfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina BalmacedaPortfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina Balmaceda
 
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
 
Porfolio livings creados por Carlotta Design
Porfolio livings creados por Carlotta DesignPorfolio livings creados por Carlotta Design
Porfolio livings creados por Carlotta Design
 
Mueble Universal la estantería que se adapta a tu entorno
Mueble Universal la estantería que se adapta a tu entornoMueble Universal la estantería que se adapta a tu entorno
Mueble Universal la estantería que se adapta a tu entorno
 
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANOMOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
 
mapa de macuspana tabasco por centro integrador
mapa de macuspana tabasco por centro integradormapa de macuspana tabasco por centro integrador
mapa de macuspana tabasco por centro integrador
 
informecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docxinformecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docx
 
Catalogo General Durstone Distribuidor Oficial Amado Salvador Valencia
Catalogo General Durstone Distribuidor Oficial Amado Salvador ValenciaCatalogo General Durstone Distribuidor Oficial Amado Salvador Valencia
Catalogo General Durstone Distribuidor Oficial Amado Salvador Valencia
 
Porfolio de diseños de Comedores de Carlotta Design
Porfolio  de diseños de Comedores de Carlotta DesignPorfolio  de diseños de Comedores de Carlotta Design
Porfolio de diseños de Comedores de Carlotta Design
 
etiqueta que se utiliza en un restaurante .pdf
etiqueta que se utiliza en  un restaurante  .pdfetiqueta que se utiliza en  un restaurante  .pdf
etiqueta que se utiliza en un restaurante .pdf
 
mapa mental gestion del capital humano.pdf
mapa mental gestion del capital humano.pdfmapa mental gestion del capital humano.pdf
mapa mental gestion del capital humano.pdf
 
Manual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computoManual.pdfsoporte y mantenimientode equipo de computo
Manual.pdfsoporte y mantenimientode equipo de computo
 
Proyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdf
Proyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdfProyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdf
Proyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdf
 
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
 
Analisis del usuario y programa arquitectonico.pdf
Analisis del usuario y programa arquitectonico.pdfAnalisis del usuario y programa arquitectonico.pdf
Analisis del usuario y programa arquitectonico.pdf
 
soporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computosoporte y mantenimiento de equipo de computo
soporte y mantenimiento de equipo de computo
 

Usabilidad de las paguinas web

  • 2. 1.DUPLICA LOS ELEMENTOS DE NAVAGACION Si la página va a tener un tamaño superior a dos tres ventanas, conviene situar los elementos de navegación en el encabezado y pie de la misma. 2. AÑADE ENLACES AL PRINCIPIO DE LA PÁGINA Si la página es larga, es necesario situar al final de ella e incluso por el medio hipervínculos que apunten al inicio de la misma. 3. Define una estructura sencilla de navegación Es recomendable utilizar una estructura jerárquica sencilla a partir de una página índice evitando abusar de los enlaces que saltan de una rama a otra.
  • 3. 4. AÑADE UNA PALETA DE NAVEGACIÓN TEXTUAL Si utilizas una paleta de navegación a base de gráficos, incorpora otra paleta adicional a base de enlaces de texto. De esta forma el usuario no tendrá que esperar a que se carguen las imágenes para saltar a otra página. 5. PROPORCIONA SIEMPRE ÍNDICES Sitúa siempre que sea posible un índice con el contenido del sitio. Sitúalo al principio, lateral o final de cada una de las páginas para que sea siempre accesible
  • 4. 1.TAMAÑO DE LAS PÁGINAS Las personas no suelen hacer scroll. Por este motivo las páginas no deben ser más largas del doble de la pantalla. Fracciona el texto en varias páginas cuando el tamaño del mismo sea excesivo para una página. 2. IDENTIFICACIÓN DE LAS PÁGINAS Es interesante situar información del centro o proyecto en el pie o encabezado de todas las páginas. Incluso con posibilidad de acceder a un email de contacto o a la página índice 3. Enlaces -Escribe el texto como si no tuviera enlaces. Evita enlaces con el texto: "Pincha aquí" porque alteran la normal lectura del texto. -Evita textos demasiado largos como enlace. Para no dificultar la lectura.
  • 5. 1. negrita: no abuses del uso de la negrita destacando gran cantidad de texto ni del uso de mayúsculas porque son más difíciles de leer. 2. Tipos de fuente: Utiliza fuentes habituales porque el usuario debe tenerla instalada en su equipo para poder ver el texto con ella a través del navegador web. Si utilizas una fuente enlazada para edades tempranas (Edelfont, Memima, etc.) recuerda que el texto no se mostrará con ella si el usuario no tiene instalada esta fuente en ella. 3. Tamaño de la fuente: Utiliza los estilos de párrafo para modificar el tamaño de los textos.
  • 6. 4. Capitalización. Un título es más atractivo con todas las iniciales en Mayúsculas y el resto en minúsculas que todas en Mayúsculas. 5. Variedad de fuentes. No conviene abusar del número de tipos de fuente distintas a utilizar en un documento. Basta con una o dos (texto y titulares)
  • 7. 1. Tamaño de una imagen enlazada: Si se inserta un enlace a una imagen de cierto peso conviene situar una vista en miniatura de escaso peso indicando el tamaño del archivo que la contiene. 2. Imágenes de fondo: Utiliza imágenes de fondo de colores adecuados que no oculten el texto de la página. Tendrán una tonalidad parecida al color de fondo y de baja calidad para que se descarguen rápidamente. 3. Imágenes decorativas: No abuses del uso de imágenes no significativas. Dosifica el número de imágenes de una página para evitar las esperas durante su descarga.
  • 8. 4. Dimensiones de una imagen: Indica la altura y anchura de la imagen al insertarla en una página. De esta forma al descargarse la página ya se reserva el espacio para mostrarse una vez se complete la imagen. 5. Descarga progresiva: Configura tus imágenes de cierto peso para que realicen la visualización progresiva conforme se vayan descargando. 6. Ahorro de imágenes: Trata de usar el mismo archivo de imagen tantas veces como sea posible para acelerar la visualización. 7. Formato de imágenes: Usa GIF y PNG siempre que sea posible. Para las fotografías es mejor el formato JPEG.