SlideShare una empresa de Scribd logo
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.
Preguntas y Comentarios.

Más contenido relacionado

La actualidad más candente

Master en formación y tecnologías para e learning
Master en formación y tecnologías para e learningMaster en formación y tecnologías para e learning
Master en formación y tecnologías para e learning
MAN A.B
 
PRINCIPALES FUNCIONALIDADES DEL ZOOM
PRINCIPALES FUNCIONALIDADES DEL ZOOM PRINCIPALES FUNCIONALIDADES DEL ZOOM
PRINCIPALES FUNCIONALIDADES DEL ZOOM
mayra736031
 

La actualidad más candente (17)

Webquest 2.0 Blog.
Webquest 2.0  Blog.Webquest 2.0  Blog.
Webquest 2.0 Blog.
 
Accesibilidad para tod@s
Accesibilidad para tod@sAccesibilidad para tod@s
Accesibilidad para tod@s
 
Master en formación y tecnologías para e learning
Master en formación y tecnologías para e learningMaster en formación y tecnologías para e learning
Master en formación y tecnologías para e learning
 
¿Porqué la User Experience / User Interface es Importante?
¿Porqué la User Experience / User Interface es Importante?¿Porqué la User Experience / User Interface es Importante?
¿Porqué la User Experience / User Interface es Importante?
 
5.2 Usabilidad Web
5.2 Usabilidad Web5.2 Usabilidad Web
5.2 Usabilidad Web
 
Joomla Day 2012 - Chapuzón en el mar móvil
Joomla Day 2012 - Chapuzón en el mar móvilJoomla Day 2012 - Chapuzón en el mar móvil
Joomla Day 2012 - Chapuzón en el mar móvil
 
Las opiniones de los alumnos de Conversia
Las opiniones de los alumnos de ConversiaLas opiniones de los alumnos de Conversia
Las opiniones de los alumnos de Conversia
 
Webquest 2.0
Webquest 2.0 Webquest 2.0
Webquest 2.0
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Tipos de navegadores y buscadores
Tipos de navegadores y buscadoresTipos de navegadores y buscadores
Tipos de navegadores y buscadores
 
P1jorge serrano
P1jorge serranoP1jorge serrano
P1jorge serrano
 
Módulo 4: Usabilidad Web
Módulo 4: Usabilidad WebMódulo 4: Usabilidad Web
Módulo 4: Usabilidad Web
 
Axplore folleto2
Axplore folleto2Axplore folleto2
Axplore folleto2
 
Progressive web app
Progressive web appProgressive web app
Progressive web app
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
PRINCIPALES FUNCIONALIDADES DEL ZOOM
PRINCIPALES FUNCIONALIDADES DEL ZOOM PRINCIPALES FUNCIONALIDADES DEL ZOOM
PRINCIPALES FUNCIONALIDADES DEL ZOOM
 
Aplicacion de escritorio
Aplicacion de escritorioAplicacion de escritorio
Aplicacion de escritorio
 

Destacado

10 principios diseño_usabilidad_web
10 principios diseño_usabilidad_web10 principios diseño_usabilidad_web
10 principios diseño_usabilidad_web
artomagna
 

Destacado (10)

10 principios diseño_usabilidad_web
10 principios diseño_usabilidad_web10 principios diseño_usabilidad_web
10 principios diseño_usabilidad_web
 
Principios Básicos del Diseño Web Móvil
Principios Básicos del Diseño Web MóvilPrincipios Básicos del Diseño Web Móvil
Principios Básicos del Diseño Web Móvil
 
Disenoweb
DisenowebDisenoweb
Disenoweb
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
 
Diseño Web - Proceso de desarrollo y diseño
Diseño Web - Proceso de desarrollo y diseñoDiseño Web - Proceso de desarrollo y diseño
Diseño Web - Proceso de desarrollo y diseño
 
Principios fundamentales del diseño
Principios fundamentales del diseñoPrincipios fundamentales del diseño
Principios fundamentales del diseño
 
Principios del diseño
Principios del diseñoPrincipios del diseño
Principios del diseño
 
Diseño de páginas Web
Diseño de páginas Web Diseño de páginas Web
Diseño de páginas Web
 
Fundamentos del diseño
Fundamentos del diseñoFundamentos del diseño
Fundamentos del diseño
 
Principios básicos de diseño web
Principios básicos de diseño webPrincipios básicos de diseño web
Principios básicos de diseño web
 

Similar a Unidad 4 patrones de diseño web. (1)

Errores en la usabilidad
Errores en la usabilidadErrores en la usabilidad
Errores en la usabilidad
sullinsan
 
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
Jose Maria Diaz
 
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
Ivan Aguilar
 

Similar a Unidad 4 patrones de diseño web. (1) (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
 
Portafolio
PortafolioPortafolio
Portafolio
 
Usabilidad y el desarrollo de software
Usabilidad y el desarrollo de software Usabilidad y el desarrollo de software
Usabilidad y el desarrollo de software
 
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
 
Articulo2
Articulo2Articulo2
Articulo2
 
Interfaces de usuario
Interfaces de usuarioInterfaces de usuario
Interfaces de usuario
 
Errores en la usabilidad
Errores en la usabilidadErrores en la usabilidad
Errores en la usabilidad
 
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
 
Usabilidad y accesibilidad web
Usabilidad y accesibilidad webUsabilidad y accesibilidad web
Usabilidad y accesibilidad web
 
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
 
Usabilidad: Definiciones
Usabilidad: Definiciones Usabilidad: Definiciones
Usabilidad: Definiciones
 
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...
 

Último

proyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmusproyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmus
raquelariza02
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
vazquezgarciajesusma
 
PRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docx
PRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docxPRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docx
PRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docx
encinasm992
 

Último (20)

Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
 
3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx
3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx
3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx
 
Robótica educativa para la eduacion primaria .pptx
Robótica educativa para la eduacion primaria .pptxRobótica educativa para la eduacion primaria .pptx
Robótica educativa para la eduacion primaria .pptx
 
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
 
proyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmusproyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmus
 
Sistemas distribuidos de redes de computadores en un entorno virtual de apren...
Sistemas distribuidos de redes de computadores en un entorno virtual de apren...Sistemas distribuidos de redes de computadores en un entorno virtual de apren...
Sistemas distribuidos de redes de computadores en un entorno virtual de apren...
 
leidy fuentes - power point -expocccion -unidad 4 (1).pptx
leidy fuentes - power point -expocccion -unidad 4 (1).pptxleidy fuentes - power point -expocccion -unidad 4 (1).pptx
leidy fuentes - power point -expocccion -unidad 4 (1).pptx
 
Presentacion y Extension de tema para Blogger.pptx
Presentacion y Extension de tema para Blogger.pptxPresentacion y Extension de tema para Blogger.pptx
Presentacion y Extension de tema para Blogger.pptx
 
proyectos_social_y_socioproductivos _mapas_conceptuales
proyectos_social_y_socioproductivos _mapas_conceptualesproyectos_social_y_socioproductivos _mapas_conceptuales
proyectos_social_y_socioproductivos _mapas_conceptuales
 
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
 
Licencias para el Uso y el Desarrollo de Software
Licencias para el Uso y el Desarrollo de SoftwareLicencias para el Uso y el Desarrollo de Software
Licencias para el Uso y el Desarrollo de Software
 
Estudio de la geometría analitica. Pptx.
Estudio de la geometría analitica. Pptx.Estudio de la geometría analitica. Pptx.
Estudio de la geometría analitica. Pptx.
 
herramientas informaticas mas utilizadas
herramientas informaticas mas utilizadasherramientas informaticas mas utilizadas
herramientas informaticas mas utilizadas
 
Pons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdf
Pons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdfPons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdf
Pons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdf
 
Posnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativaPosnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativa
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
 
Inteligencia Artificial para usuarios nivel inicial
Inteligencia Artificial para usuarios nivel inicialInteligencia Artificial para usuarios nivel inicial
Inteligencia Artificial para usuarios nivel inicial
 
Diagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdfDiagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdf
 
Gestión de concurrencia y bloqueos en SQL Server
Gestión de concurrencia y bloqueos en SQL ServerGestión de concurrencia y bloqueos en SQL Server
Gestión de concurrencia y bloqueos en SQL Server
 
PRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docx
PRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docxPRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docx
PRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docx
 

Unidad 4 patrones de diseño web. (1)

  • 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.