Docsity
Docsity

Prepara tus exámenes
Prepara tus exámenes

Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity


Consigue puntos base para descargar
Consigue puntos base para descargar

Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium


Orientación Universidad
Orientación Universidad

Principios de Usabilidad y Accesibilidad en Diseño de Sitios Web: Exámenes y Apuntes - Pro, Apuntes de Desarrollo de Software

Una actividad relacionada con los 10 principios de usabilidad y accesibilidad web según jakob nielsen. El texto aborda conceptos como visibilidad del estado del sistema, relación entre el sistema y el mundo real, control y libertad del usuario, consistencia y estándares, prevención de errores, reconocer antes que recordar, flexibilidad y eficiencia de uso, diseño estético y minimalista, ayudar a los usuarios a reconocer, diagnosticar y corregir errores, y ayuda y documentación. Además, se incluyen conceptos relacionados con html, css, imágenes y medios, servidor web, base de datos, enlaces, formularios, barra de navegación, pie de página, elementos principales del menú web, y representación visual de la jerarquía mediante breadcrumbs.

Tipo: Apuntes

2023/2024

Subido el 26/01/2024

elier-balderas-landaverde
elier-balderas-landaverde 🇲🇽

2 documentos

1 / 10

Toggle sidebar

Esta página no es visible en la vista previa

¡No te pierdas las partes importantes!

bg1
ACTIVIDAD
Estructura del sitio WEB
Tecnologías de la Información Área Desarrollo de Software
Multiplataforma
PRESENTA:
Diego Gracia Cruz.
Elier Balderas Landaverde.
DOCENTE DE LA UTSJR
Maribel Trejo Reséndiz
JALPAN DE SERRA, QRO.
ENERO DE 2024
pf3
pf4
pf5
pf8
pf9
pfa

Vista previa parcial del texto

¡Descarga Principios de Usabilidad y Accesibilidad en Diseño de Sitios Web: Exámenes y Apuntes - Pro y más Apuntes en PDF de Desarrollo de Software solo en Docsity!

ACTIVIDAD

Estructura del sitio WEB

Tecnologías de la Información Área Desarrollo de Software

Multiplataforma

PRESENTA:

Diego Gracia Cruz.

Elier Balderas Landaverde.

DOCENTE DE LA UTSJR

Maribel Trejo Reséndiz

JALPAN DE SERRA, QRO.

ENERO DE 2024

1 Los 10 principios de usabilidad y accesibilidad

web por Jakob Nielsen

1.1 Visibilidad del estado del sistema

Este principio de usabilidad web nos indica que siempre tenemos que tener informado al usuario de lo que está pasando en nuestra web y ofrecerle una respuesta en el menor tiempo posible.

1.2 Relación entre el sistema y el mundo real

El sistema tiene que “hablar” el lenguaje del usuario con palabras o frases que a éste le sean familiares y que pueda reconocer con facilidad. Usa imágenes claras. La información tiene que mostrarse con un orden lógico y las imágenes o iconos usados tienen que ser claros, sin darle la posibilidad al usuario de equivocarse.

1.3 Control y libertad del usuario

A veces, un usuario se equivoca, es normal, está dentro de la naturaleza humana el equivocarse. Tenemos que darle al usuario la posibilidad de subsanar el error y no sentirse frustrado por no poder realizar algo. El botón de borrar el artículo de la lista de la compra es un claro ejemplo de este principio de usabilidad para páginas web o tiendas online.

1.4 Consistencia y estándares

Con el auge de los dispositivos móviles han aparecido nuevos gestos e iconos que ya hemos asumido como normales. Por ejemplo, las líneas horizontales que indican el menú desplegable. Que quiero decir con esto, pues que si ahora vas a modificar tu web, lo más normal es que en la versión responsive implementes ese icono como menú desplegable y no inventes uno nuevo porque te parezca más bonito. Con ello estarías empeorando la usabilidad web, de hecho, el usuario puede llegar a no entender dicho icono porque seguro que está buscando el icono de las líneas horizontales.

Es por esto, por lo que tenemos que cambiarlo para que en vez de que aparezca error 404, diga algo más amigable como: Lo siento, página no encontrada y darle una posible salida añadiendo páginas relacionadas o un buscador interno para que pueda buscar y no se vaya de la web. De esta forma tan sencilla, estamos indicando al usuario qué es lo que pasa en ese momento y que tiene que hacer para salir de ahí.

1.10 Ayuda y documentación

Con estos principios se intenta siempre que el usuario no tenga que usar documentos de ayuda para poder navegar o utilizar una aplicación. Aun así, siempre tenemos que dar al usuariola posibilidad de tener un pequeño manual de funcionamiento. Esta ayuda debe ser fácil de localizar, definir los pasos claramente y no ser muy extensa. (ARENZANA, 2022)

2 Identificación de los elementos del sitio web:

2.1 HTML (Hypertext Markup Language):

  • Define la estructura básica del contenido del sitio mediante elementos como encabezados, párrafos, listas, enlaces, imágenes, formularios, entre otros.
  • Permite la organización lógica y semántica del contenido, lo que facilita la comprensión tanto para los desarrolladores como para los navegadores web.

2.2 CSS (Cascading Style Sheets):

  • Controla el diseño y la presentación visual del sitio.
  • Define estilos como colores, fuentes, márgenes, espaciados y disposición de elementos, asegurando una apariencia coherente y atractiva.

2.3 JavaScript:

  • Proporciona funcionalidad dinámica y mejora la interactividad del sitio.
  • Permite la manipulación del DOM, respondiendo a eventos del usuario y actualizando el contenido de forma dinámica sin recargar la página completa.

2.4 Imágenes y medios:

  • Incluyen gráficos, fotografías, videos y otros elementos multimedia que enriquecen la experiencia del usuario.
  • Se optimizan para la web para garantizar tiempos de carga rápidos y una experiencia fluida.

2.5 Servidor web:

  • Almacena y sirve los archivos del sitio a los usuarios que los solicitan a través de sus navegadores.
  • Puede ejecutar aplicaciones web y gestionar interacciones con bases de datos para proporcionar contenido dinámico.

2.6 Base de datos (opcional):

  • Almacena y gestiona información dinámica, como perfiles de usuarios, publicaciones en blogs o datos de productos.
  • Interactúa con el servidor web para entregar datos actualizados en respuesta a las solicitudes del usuario.

3 Elementos principales del menú WEB.

3.1 Barra de navegación:

Es la ubicación principal del menú, generalmente en la parte superior de la página, que contiene enlaces a las secciones clave del sitio.

3.2 Íconos o botones de menú:

Pueden ser elementos gráficos o de texto que representan diferentes secciones o funciones del sitio. Al hacer clic o tocar en estos íconos, se accede a las páginas correspondientes.

3.3 Menú desplegable:

Una opción que, al hacer clic o tocar, revela una lista de subcategorías o enlaces adicionales. Es útil para organizar información y evitar una barra de navegación abrumadora.

3.4 Barra lateral:

Algunos sitios web utilizan una barra lateral para mostrar enlaces directos a secciones importantes del sitio.

3.5 Enlaces de pie de página:

Se encuentran en la parte inferior de la página y proporcionan acceso rápido a secciones importantes, información de contacto u otros recursos.

3.6 Barra de búsqueda:

Permite a los usuarios buscar contenido específico dentro del sitio.

3.7 Botones de llamada a la acción (CTA):

Enlaces o botones diseñados para animar a los usuarios a realizar acciones específicas, como "Comprar ahora", "Registrarse" o "Iniciar sesión".

3.8 Íconos de redes sociales:

Si el sitio tiene presencia en redes sociales, es común incluir íconos que enlacen con los perfiles correspondientes.

3.9 Menú de hamburguesa:

En dispositivos móviles o en diseños responsivos, se utiliza a menudo un menú de hamburguesa (tres líneas horizontales) que al hacer clic revela el menú principal.

3.10 Breadcrumb (migas de pan):

Como mencionado anteriormente, proporciona información sobre la ubicación del usuario en la estructura del sitio.