SlideShare una empresa de Scribd logo
1 de 14
Unidad 4
Patrones de Diseño Web.
INGENIERÍA DE SOFTWARE II
Principios de Usabilidad Web.
Definición:
 La usabilidad se considera como la capacidad que tiene el
producto software para permitir que los usuarios puedan
realizar tareas específicas de forma productiva, con
efectividad, seguridad y satisfacción.
 El objetivo que tiene un producto software es que posea
la calidad necesaria básica para que satisfaga las
necesidades de los usuarios.
¡PIENSA EN EL
USUARIO!
Principios de Usabilidad Web.
 En el diseño de productos y software, los usuarios pagan de antemano y
experimentan la usabilidad después.
 En la web, los usuarios experimentan primero la usabilidad y pagan
después.
 Las expectativas infladas de los usuarios de la tecnología Internet puede
ser difícil de satisfacer.
 Un sitio web puede atender una infinidad de perfiles de usuario.
Construir un sitio web orientado a audiencias no es fácil.
 La mayoría de los sitios web requieren estar operativos en un corto lapso
de tiempo y esto dificulta el nivel de rigor de varias actividades del proceso.
Sitios Web – Situación Actual.
 Un sitio web es una entrada a la
información de las organizaciones, sus
productos y servicios.
 Debe ser un reflejo de las necesidades de
los usuarios-clientes a quienes sirve.
 Pero el diseño y desarrollo web,
generalmente es hecho en base a la
tecnología o estructura, objetivos del
negocio; más que por lo que el usuario
necesita.
 Recientemente han comenzado a
comprender la importancia de la usabilidad.
¿Cómo los usuarios utilizan la web?
 No leen las páginas, las exploran.
 No hacen elecciones óptimas.
 No aprecian cómo trabajan las
cosas.
Objetivos específicos de la
Usabilidad.
EFECTIVIDAD EFICIENCIA SATISFACCION
Precisión y plenitud con
la que los usuarios
alcanzan los objetivos
especificados.
También se considera la
facilidad de aprendizaje,
tasa de errores del
sistema y facilidad del
sistema para ser
recordado.
Es en relación con la
precisión y plenitud con
la que los usuarios. Se
asocia la facilidad de
aprendizaje, una
asimilación inapropiada
puede traducirse en
errores de usuario.
Ausencia de
incomodidad y la actitud
positiva en el uso del
producto.
Se trata de un factor
subjetivo.
5 características de la Usabilidad.
1. Facilidad de aprender.
2. Eficacia de uso.
3. Facilidad del sistema para ser recordado.
4. Frecuencia y severidad del error.
5. Satisfacción subjetiva.
Errores más comunes de
Usabilidad.
 Indefinición del sitio: ¿Qué es esto?
 Indefinición de las funciones a realizar: ¿Dónde está lo
que busco?
 Búsquedas que no ofrecen resultados.
 Mala navegación.
 Enlaces perdidos.
Diseño Web Líquido o Fluído.
Liquid or fluid layout.
 Una web tiene diseño líquido o fluído cuando su tamaño se ajusta
a la dimensión horizontal de la pantalla de forma automática y sin
necesidad de una barra de desplazamiento horizontal (scroll).
 El diseño se expande al ancho disponible en la pantalla, porque el
tamaño de los distintos elementos es un porcentaje del total
disponible de la pantalla.
Layouts.
Diseño Web Híbrido.
 Es híbrido cuando en una web se combinan áreas con
ancho fijo y otras con ancho variable.
 El resultado final es una web de diseño líquido que
conserva las proporciones en determinadas áreas.
Diseño Web para Móviles.
 En el caso de crear un sitio web para ser accedido desde
dispositivos móviles o en pantallas pequeñas, se debe considerar un
diseño y otros aspectos como: la disposición de contenidos, cantidad
de contenidos, criterios de accesibidad, pero de imágenes y archivos.
 Criterios de accesibilidad: menús y rutas de navegación.

Más contenido relacionado

La actualidad más candente

Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño webConceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño webCésar Jodra
 
Unidad 4 patrones de diseño web. (1)
Unidad 4   patrones de diseño web. (1)Unidad 4   patrones de diseño web. (1)
Unidad 4 patrones de diseño web. (1)wiinyzepeda
 
Principios básicos de usabilidad y accesibilidad
Principios básicos de usabilidad y accesibilidadPrincipios básicos de usabilidad y accesibilidad
Principios básicos de usabilidad y accesibilidadPercy Negrete
 
Usabilidad Web - Jhonatan Pinzón
Usabilidad Web - Jhonatan PinzónUsabilidad Web - Jhonatan Pinzón
Usabilidad Web - Jhonatan PinzónJhonatan Pinzon
 
Curso de Usabilidad en web
Curso de Usabilidad en webCurso de Usabilidad en web
Curso de Usabilidad en weblaminarrieta
 
Usabilidad (web)
Usabilidad (web)Usabilidad (web)
Usabilidad (web)Vladimir
 
Pruebas de accesibilidad: Técnicas de filtrado y evaluación con herramientas ...
Pruebas de accesibilidad: Técnicas de filtrado y evaluación con herramientas ...Pruebas de accesibilidad: Técnicas de filtrado y evaluación con herramientas ...
Pruebas de accesibilidad: Técnicas de filtrado y evaluación con herramientas ...Lisandra Armas
 
Seminario Taller: Usabilidad
Seminario Taller: UsabilidadSeminario Taller: Usabilidad
Seminario Taller: UsabilidadElsa Canto
 
Buenas practicas en programacion web
Buenas practicas en programacion webBuenas practicas en programacion web
Buenas practicas en programacion webCésar Jodra
 
Video animado diseño web adaptativo o responsivo
Video animado diseño web adaptativo o responsivoVideo animado diseño web adaptativo o responsivo
Video animado diseño web adaptativo o responsivodavidstiven14
 
Usabilidad Web
Usabilidad WebUsabilidad Web
Usabilidad WebAriazu
 
Usabilidad1
Usabilidad1Usabilidad1
Usabilidad115220201
 

La actualidad más candente (20)

Usabilidad web
Usabilidad webUsabilidad web
Usabilidad web
 
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño webConceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
 
Usabilidad / Page Rank
Usabilidad / Page RankUsabilidad / Page Rank
Usabilidad / Page Rank
 
Unidad 4 patrones de diseño web. (1)
Unidad 4   patrones de diseño web. (1)Unidad 4   patrones de diseño web. (1)
Unidad 4 patrones de diseño web. (1)
 
unidad 4
unidad 4unidad 4
unidad 4
 
Principios básicos de usabilidad y accesibilidad
Principios básicos de usabilidad y accesibilidadPrincipios básicos de usabilidad y accesibilidad
Principios básicos de usabilidad y accesibilidad
 
Usabilidad ( diapositivas)
Usabilidad ( diapositivas)Usabilidad ( diapositivas)
Usabilidad ( diapositivas)
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Usabilidad Web - Jhonatan Pinzón
Usabilidad Web - Jhonatan PinzónUsabilidad Web - Jhonatan Pinzón
Usabilidad Web - Jhonatan Pinzón
 
Usabilidad y accesibilidad web
Usabilidad y accesibilidad webUsabilidad y accesibilidad web
Usabilidad y accesibilidad web
 
Curso de Usabilidad en web
Curso de Usabilidad en webCurso de Usabilidad en web
Curso de Usabilidad en web
 
Usabilidad (web)
Usabilidad (web)Usabilidad (web)
Usabilidad (web)
 
Pruebas de accesibilidad: Técnicas de filtrado y evaluación con herramientas ...
Pruebas de accesibilidad: Técnicas de filtrado y evaluación con herramientas ...Pruebas de accesibilidad: Técnicas de filtrado y evaluación con herramientas ...
Pruebas de accesibilidad: Técnicas de filtrado y evaluación con herramientas ...
 
Seminario Taller: Usabilidad
Seminario Taller: UsabilidadSeminario Taller: Usabilidad
Seminario Taller: Usabilidad
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
UX y UI
UX y UIUX y UI
UX y UI
 
Buenas practicas en programacion web
Buenas practicas en programacion webBuenas practicas en programacion web
Buenas practicas en programacion web
 
Video animado diseño web adaptativo o responsivo
Video animado diseño web adaptativo o responsivoVideo animado diseño web adaptativo o responsivo
Video animado diseño web adaptativo o responsivo
 
Usabilidad Web
Usabilidad WebUsabilidad Web
Usabilidad Web
 
Usabilidad1
Usabilidad1Usabilidad1
Usabilidad1
 

Similar a patrones de diseño web.

Herbert mauricio leiva portafolio.
Herbert mauricio leiva portafolio.Herbert mauricio leiva portafolio.
Herbert mauricio leiva portafolio.Herbert Arevalo
 
Universidad gerardo barrio portafolio
Universidad gerardo barrio portafolioUniversidad gerardo barrio portafolio
Universidad gerardo barrio portafolioEnrique Reyes
 
Usabilidad Web: ¿Capricho o Necesidad?
Usabilidad Web: ¿Capricho o Necesidad?Usabilidad Web: ¿Capricho o Necesidad?
Usabilidad Web: ¿Capricho o Necesidad?Searchmediafb
 
openclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptxopenclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptxGorkyGabrielAriasDaz
 
openclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptxopenclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptxGorkyGabrielAriasDaz
 
Errores en la usabilidad
Errores en la usabilidadErrores en la usabilidad
Errores en la usabilidadsullinsan
 
Arquitectura de la información y Usabilidad
Arquitectura de la información y UsabilidadArquitectura de la información y Usabilidad
Arquitectura de la información y UsabilidadIvan Aguilar
 
Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...
Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...
Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...Lisandra Armas
 
Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...
Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...
Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...Argentesting
 
Principios de Usabilidad para Dominar la Red
Principios de Usabilidad para Dominar la RedPrincipios de Usabilidad para Dominar la Red
Principios de Usabilidad para Dominar la RedJose Maria Diaz
 

Similar a patrones de diseño web. (20)

Usabilidad web
Usabilidad webUsabilidad web
Usabilidad web
 
Herbert mauricio leiva portafolio.
Herbert mauricio leiva portafolio.Herbert mauricio leiva portafolio.
Herbert mauricio leiva portafolio.
 
Universidad gerardo barrio portafolio
Universidad gerardo barrio portafolioUniversidad gerardo barrio portafolio
Universidad gerardo barrio portafolio
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Usabilidad y el desarrollo de software
Usabilidad y el desarrollo de software Usabilidad y el desarrollo de software
Usabilidad y el desarrollo de software
 
Portafolio
PortafolioPortafolio
Portafolio
 
Usabilidad Web: ¿Capricho o Necesidad?
Usabilidad Web: ¿Capricho o Necesidad?Usabilidad Web: ¿Capricho o Necesidad?
Usabilidad Web: ¿Capricho o Necesidad?
 
openclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptxopenclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptx
 
openclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptxopenclass_ semana 1_bienvenida_usabilidad.pptx
openclass_ semana 1_bienvenida_usabilidad.pptx
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Errores en la usabilidad
Errores en la usabilidadErrores en la usabilidad
Errores en la usabilidad
 
Articulo2
Articulo2Articulo2
Articulo2
 
Interfaces de usuario
Interfaces de usuarioInterfaces de usuario
Interfaces de usuario
 
Arquitectura de la información y Usabilidad
Arquitectura de la información y UsabilidadArquitectura de la información y Usabilidad
Arquitectura de la información y Usabilidad
 
Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...
Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...
Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...
 
Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...
Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...
Argentesting 2018 - Usabilidad: un peldaño fundamental para el éxito o fracas...
 
Principios de Usabilidad para Dominar la Red
Principios de Usabilidad para Dominar la RedPrincipios de Usabilidad para Dominar la Red
Principios de Usabilidad para Dominar la Red
 
Webinar 5 principios de usabilidad para hacer tu sitio web exitoso
Webinar 5 principios de usabilidad para hacer tu sitio web exitosoWebinar 5 principios de usabilidad para hacer tu sitio web exitoso
Webinar 5 principios de usabilidad para hacer tu sitio web exitoso
 
Usabilidad: Definiciones
Usabilidad: Definiciones Usabilidad: Definiciones
Usabilidad: Definiciones
 

Último

PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLOPARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLOSelenaCoronadoHuaman
 
Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3AlexysCaytanoMelndez1
 
Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Opentix
 
Introducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTERIntroducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTEREMMAFLORESCARMONA
 
Manual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdfManual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdfmasogeis
 
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...ITeC Instituto Tecnología Construcción
 
Unidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacionUnidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacionarmando_cardenas
 

Último (7)

PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLOPARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
PARTES DEL TECLADO Y SUS FUNCIONES - EJEMPLO
 
Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3Segmentacion Segmantica_Modelos UNET and DEEPLABV3
Segmentacion Segmantica_Modelos UNET and DEEPLABV3
 
Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200
 
Introducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTERIntroducción a Funciones LENGUAJE DART FLUTTER
Introducción a Funciones LENGUAJE DART FLUTTER
 
Manual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdfManual de Usuario APPs_AppInventor-2023.pdf
Manual de Usuario APPs_AppInventor-2023.pdf
 
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
BREEAM ES Urbanismo como herramienta para un planeamiento sostenible - Miguel...
 
Unidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacionUnidad_3_T1_AutomatasFinitos presentacion
Unidad_3_T1_AutomatasFinitos presentacion
 

patrones de diseño web.

  • 1. Unidad 4 Patrones de Diseño Web. INGENIERÍA DE SOFTWARE II
  • 2. Principios de Usabilidad Web. Definición:  La usabilidad se considera como la capacidad que tiene el producto software para permitir que los usuarios puedan realizar tareas específicas de forma productiva, con efectividad, seguridad y satisfacción.  El objetivo que tiene un producto software es que posea la calidad necesaria básica para que satisfaga las necesidades de los usuarios.
  • 4. Principios de Usabilidad Web.  En el diseño de productos y software, los usuarios pagan de antemano y experimentan la usabilidad después.  En la web, los usuarios experimentan primero la usabilidad y pagan después.  Las expectativas infladas de los usuarios de la tecnología Internet puede ser difícil de satisfacer.  Un sitio web puede atender una infinidad de perfiles de usuario. Construir un sitio web orientado a audiencias no es fácil.  La mayoría de los sitios web requieren estar operativos en un corto lapso de tiempo y esto dificulta el nivel de rigor de varias actividades del proceso.
  • 5. Sitios Web – Situación Actual.  Un sitio web es una entrada a la información de las organizaciones, sus productos y servicios.  Debe ser un reflejo de las necesidades de los usuarios-clientes a quienes sirve.  Pero el diseño y desarrollo web, generalmente es hecho en base a la tecnología o estructura, objetivos del negocio; más que por lo que el usuario necesita.  Recientemente han comenzado a comprender la importancia de la usabilidad.
  • 6. ¿Cómo los usuarios utilizan la web?  No leen las páginas, las exploran.  No hacen elecciones óptimas.  No aprecian cómo trabajan las cosas.
  • 7. Objetivos específicos de la Usabilidad. EFECTIVIDAD EFICIENCIA SATISFACCION Precisión y plenitud con la que los usuarios alcanzan los objetivos especificados. También se considera la facilidad de aprendizaje, tasa de errores del sistema y facilidad del sistema para ser recordado. Es en relación con la precisión y plenitud con la que los usuarios. Se asocia la facilidad de aprendizaje, una asimilación inapropiada puede traducirse en errores de usuario. Ausencia de incomodidad y la actitud positiva en el uso del producto. Se trata de un factor subjetivo.
  • 8.
  • 9. 5 características de la Usabilidad. 1. Facilidad de aprender. 2. Eficacia de uso. 3. Facilidad del sistema para ser recordado. 4. Frecuencia y severidad del error. 5. Satisfacción subjetiva.
  • 10. Errores más comunes de Usabilidad.  Indefinición del sitio: ¿Qué es esto?  Indefinición de las funciones a realizar: ¿Dónde está lo que busco?  Búsquedas que no ofrecen resultados.  Mala navegación.  Enlaces perdidos.
  • 11. Diseño Web Líquido o Fluído. Liquid or fluid layout.  Una web tiene diseño líquido o fluído cuando su tamaño se ajusta a la dimensión horizontal de la pantalla de forma automática y sin necesidad de una barra de desplazamiento horizontal (scroll).  El diseño se expande al ancho disponible en la pantalla, porque el tamaño de los distintos elementos es un porcentaje del total disponible de la pantalla.
  • 13. Diseño Web Híbrido.  Es híbrido cuando en una web se combinan áreas con ancho fijo y otras con ancho variable.  El resultado final es una web de diseño líquido que conserva las proporciones en determinadas áreas.
  • 14. Diseño Web para Móviles.  En el caso de crear un sitio web para ser accedido desde dispositivos móviles o en pantallas pequeñas, se debe considerar un diseño y otros aspectos como: la disposición de contenidos, cantidad de contenidos, criterios de accesibidad, pero de imágenes y archivos.  Criterios de accesibilidad: menús y rutas de navegación.