Diferencia entre revisiones de «Usuario:Juanda/html/Introducción»

De WikiEducator
Saltar a: navegación, buscar
(→‎UX: Experiencia de usuario o usabilidad)
 
(18 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 
{{Usuario:juanda/html/nav }}
 
{{Usuario:juanda/html/nav }}
  
−
{{#widget:Slides}} {{MiTitulo| Curso de html}}  
+
{{#widget:Slides}} {{MiTitulo| Curso de UX}}  
 
<div class="slides layout-regular template-default">
 
<div class="slides layout-regular template-default">
 
<div class="slide">
 
<div class="slide">
Línea 24: Línea 24:
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
 +
=====Contenido de la web=====
 +
*No juzgues un libro por su portada
 +
*En una web, si la primera pantalla "no gusta" el usuario no seguirá
 +
*Intenta "cortar elementos" si la página tiene scroll para que el usuario lo perciba
 +
*Minimiza el contenido de la web segun la 3ª regla de Krug (sus reglas de usabilidad son famosas).
 +
</div>
 +
<div class="slide">
 +
*Reglas de Krug:
 +
:1.No me hagas pensar.
 +
:2. No importa cuántas veces tengo que hacer clic, siempre y cuando cada clic es una elección inconsciente e inequívoca.
 +
:3. Deshágase de la mitad de las palabras de cada página, a continuación, deshágase de la mitad de las que quedan.
 +
</div>
 +
<div class="slide">
 +
=====Tiempo de respuesta de una web=====
 +
* Según [http://es.wikipedia.org/wiki/Jakob_Nielsen Jacob Nielsen], experto en usabilidad.
 +
* Límite '''1 décima''': <br/>
 +
:Respuesta instantánea, parece causada por el usuario y no por el ordenador.
 +
:Ejemplo: al cambiar entre pestañas del navegador.   
 +
*Límite '''1 segundo''': <br/>
 +
:El usuario siento el retraso pero siente el control y una sensación de libertad mientras espera la respuesta del ordenador. Adecuado para una correcta navegación.
 +
</div>
 +
<div class="slide">
 +
*Límite '''10 segundos''' <br/>
 +
:El usuario puede mantener la atención, deseando que el ordenador respondiera más rápido.
 +
*No hay mundo (informático) más allá de los 10 segundos :-(
 +
 +
</div>
 +
<div class="slide">
 +
 
==Accesibilidad==
 
==Accesibilidad==
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
 
*Se intenta garantizar una experiencia de usuario similar para personas con discapacidades.
 
*Se intenta garantizar una experiencia de usuario similar para personas con discapacidades.
−
*[http://www.w3.org/WAI/ WAI] (Web Accesibility Initiative)
+
*[http://www.w3.org/WAI/ WAI] (Web Accesibility Initiative) es una parte de la W3C que genera la guia de accesibilidad.
 +
* La guía de accesibilidad se denomina WCAG o Web Content Accessibility Guidelines
 
*Uso habitual en organismos públicos, como en la [http://www.zaragoza.es/ciudad/servicios/accesibilidad.htm web del Ayuntamiento de Zaragoza]
 
*Uso habitual en organismos públicos, como en la [http://www.zaragoza.es/ciudad/servicios/accesibilidad.htm web del Ayuntamiento de Zaragoza]
 +
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
 
====Niveles de conformidad====
 
====Niveles de conformidad====
 
*Existen 3 niveles de conformidad A, AA, AAA. El nivel se determina según las pautas ya establecidas que cumple.
 
*Existen 3 niveles de conformidad A, AA, AAA. El nivel se determina según las pautas ya establecidas que cumple.
−
*[http://www.codexexempla.org/traducciones/pautas-accesibilidad-contenido-web-2.0.htm Información completa sobre los niveles de conformidad]
+
*[http://www.codexexempla.org/traducciones/pautas-accesibilidad-contenido-web-2.0.htm Información completa sobre los niveles de conformidad WCAG]
 
*Podemos utilizar [http://www.tawdis.net/ herramientas] que testean el nivel de conformidad de nuestra web.
 
*Podemos utilizar [http://www.tawdis.net/ herramientas] que testean el nivel de conformidad de nuestra web.
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*Nivel A
+
=====Nivel A=====
−
**Imágenes con texto alternativo (alt)
+
*Imágenes con texto alternativo (alt)
 
:[http://blog.woorank.com/2013/01/image-alt-text-relevant-for-seo-and-usability/ El atributo alt es bueno para el SEO]
 
:[http://blog.woorank.com/2013/01/image-alt-text-relevant-for-seo-and-usability/ El atributo alt es bueno para el SEO]
 
:Uso inapropiado:  
 
:Uso inapropiado:  
Línea 53: Línea 84:
 
<img src=“menswatches.jpg” alt=“Rolex Yacht Master watches for men”>
 
<img src=“menswatches.jpg” alt=“Rolex Yacht Master watches for men”>
 
</source>
 
</source>
−
 
+
</div>
−
:*Contenido multimedia: Se proporciona contenido descriptivo alternativo
+
<div class="slide">
−
:*El contenido debe tener un orden de lectura no dependiente del diseño o estilos
+
*Contenido multimedia: Se proporciona contenido descriptivo alternativo
−
:*El contenido no debe depender de colores y debe ser fácilmente distinguible del fondo
+
:[http://www.uiaccess.com/transcripts/transcripts_on_the_web.html Opciones para generar los transcripts]
−
:*Las funcionalidades de la pagina deben ser accesibles desde el teclado.
+
*El contenido debe tener un orden de lectura no dependiente del diseño o estilos
 +
*El contenido no debe depender de colores y debe ser fácilmente distinguible del fondo
 +
:*[http://leaverou.github.com/contrast-ratio/ Herramienta para ver lo legible que es tu combinación de colores]
 +
</div>
 +
<div class="slide">
 +
*Las funcionalidades de la pagina deben ser accesibles desde el teclado.
 
:[http://www.martin-gonzalez.es/en-accessibility.html Ejemplo de página con acceso desde el teclado]
 
:[http://www.martin-gonzalez.es/en-accessibility.html Ejemplo de página con acceso desde el teclado]
 
:[http://www.sitepoint.com/accesskeys/ Utilizar AccessKeys es fácil]
 
:[http://www.sitepoint.com/accesskeys/ Utilizar AccessKeys es fácil]
Línea 80: Línea 116:
 
</div>  
 
</div>  
 
</source>
 
</source>
−
:*Sin más de 3 destellos o cambios de imagen por segundo
 
−
:*Títulos descriptivos en cada pagina
 
−
:*Sistema para saltar de bloques de contenido y navegación secuencial
 
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*Nivel AA
+
*Sin más de 3 destellos o cambios de imagen por segundo
−
**Debe cumplir las pautas del nivel A
+
*Títulos descriptivos en cada pagina
−
**Subtítulos para el contenido multimedia con audio
+
*Sistema para saltar de bloques de contenido y navegación secuencial
−
**Contenido alternativo descriptivo para contenido multimedia con vídeo
+
−
**Contraste alto entre fondo y texto (al menos 4,5:1)
+
−
**Se puede variar tamaño de fuente hasta un 200% sin perdida de funcionalidad
+
−
**Encabezados descriptivos
+
−
**Al menos dos formas distintas para navegar por el site
+
−
**En los envíos de información confidencial debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo.
+
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
*Nivel AAA
+
 
−
**Debe cumplir con las pautas del nivel A y AA
+
=====Nivel AA=====
−
**Lenguaje de signos para el contenido multimedia con audio
+
*Debe cumplir las pautas del nivel A
−
**Descripción completa para el contenido multimedia con vídeo
+
*Subtítulos para el contenido multimedia con audio
−
**Contraste muy alto entre fondo y texto (al menos 7,1:1)
+
*Contenido alternativo descriptivo para contenido multimedia con vídeo
−
**Contenidos multimedia sin audio de fondo (sólo locución principal)
+
*Contraste alto entre fondo y texto (al menos 4,5:1)
−
**La pagina debe poseer un sistema para que el usuario pueda cambiar los colores de texto y fondo, limitar las lineas a 80 caracteres, alto de linea y tamaño de fuente. Todo ello sin que sea necesario utilizar el scroll horizontal para poder ver todo el contenido
+
</div>
−
**Las imágenes con texto sólo pueden utilizarse para decorar.
+
<div class="slide">
−
**Las funcionalidades de la pagina deben ser accesibles desde el teclado sin ningún tipo de excepción
+
*Se puede variar tamaño de fuente hasta un 200% sin perdida de funcionalidad
−
**Reanudación de sesión: Cuando un expira la sesión el usuario puede volver a reanudar sesión sin perdida de datos
+
*Encabezados descriptivos
−
**Se proporciona al usuario información sobre su situación en la pagina
+
*Al menos dos formas distintas para navegar por el site
−
**Texto descriptivo sobre el destino de cada enlace
+
*En los envíos de información confidencial debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo.
−
**Encabezados en cada sección
+
</div>
−
**Definir el idioma de la pagina
+
<div class="slide">
−
**En todos los envíos de información sistema debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo
+
=====Nivel AAA=====
 +
*Debe cumplir con las pautas del nivel A y AA
 +
*Lenguaje de signos para el contenido multimedia con audio
 +
*Descripción completa para el contenido multimedia con vídeo
 +
*Contraste muy alto entre fondo y texto (al menos 7,1:1)
 +
</div>
 +
<div class="slide">
 +
*Contenidos multimedia sin audio de fondo (sólo locución principal)
 +
*La pagina debe poseer un sistema para que el usuario pueda cambiar los colores de texto y fondo, limitar las lineas a 80 caracteres, alto de linea y tamaño de fuente. Todo ello sin que sea necesario utilizar el scroll horizontal para poder ver todo el contenido
 +
*Las imágenes con texto sólo pueden utilizarse para decorar.
 +
*Las funcionalidades de la pagina deben ser accesibles desde el teclado sin ningún tipo de excepción
 +
</div>
 +
<div class="slide">
 +
*Reanudación de sesión: Cuando un expira la sesión el usuario puede volver a reanudar sesión sin perdida de datos
 +
*Se proporciona al usuario información sobre su situación en la pagina
 +
*Texto descriptivo sobre el destino de cada enlace
 +
*Encabezados en cada sección
 +
*Definir el idioma de la pagina
 +
*En todos los envíos de información sistema debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
  
−
===Uso de estándares===
+
== Uso de estándares ==
 +
</div>
 +
<div class="slide">
 
*Iniciativa de la W3C
 
*Iniciativa de la W3C
−
*Las metas son compatibilidad entre plataformas (uso de esándares web abiertos) y tamaño de ficheros compacto.
+
*Las metas son compatibilidad entre plataformas (uso de estándares web abiertos) y tamaño de ficheros compacto.
 
*Ejemplo: separación de contenido (html) y presentación (css).
 
*Ejemplo: separación de contenido (html) y presentación (css).
 
*Una web que cumple los estándares no tiene porque ser una web con buena usabilidad o accesibilidad.
 
*Una web que cumple los estándares no tiene porque ser una web con buena usabilidad o accesibilidad.
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
 +
 
==Compromisos entre uso de estándares, usabilidad y accesibilidad==
 
==Compromisos entre uso de estándares, usabilidad y accesibilidad==
 
</div>
 
</div>

Última revisión de 07:50 18 dic 2013



UX: Experiencia de usuario o usabilidad

Usabilidad

  • Facilidad de navegación por la web para el usuario final.
  • ¿Quién es el usuario final? Un usuario medio (sin ningún tipo de curso especializado) y con un equipo medio.
  • Objetivos:
Presentación de la información de forma clara y concisa
Menus, opciones y botones con funcionalidad clara y sin ambigüedad
Colocación de la información importante en un área apropiada de la web
  • La usabilidad es importante para cualquier página web
  • Es esencial para páginas de comercio electrónico y aplicaciones web.
  • Sigue el principio KISS del diseño (keep it simple, stupid)
  • Se suele denominar UX por User eXperience
Contenido de la web
  • No juzgues un libro por su portada
  • En una web, si la primera pantalla "no gusta" el usuario no seguirá
  • Intenta "cortar elementos" si la página tiene scroll para que el usuario lo perciba
  • Minimiza el contenido de la web segun la 3ª regla de Krug (sus reglas de usabilidad son famosas).
  • Reglas de Krug:
1.No me hagas pensar.
2. No importa cuántas veces tengo que hacer clic, siempre y cuando cada clic es una elección inconsciente e inequívoca.
3. Deshágase de la mitad de las palabras de cada página, a continuación, deshágase de la mitad de las que quedan.
Tiempo de respuesta de una web
  • Según Jacob Nielsen, experto en usabilidad.
  • Límite 1 décima:
Respuesta instantánea, parece causada por el usuario y no por el ordenador.
Ejemplo: al cambiar entre pestañas del navegador.
  • Límite 1 segundo:
El usuario siento el retraso pero siente el control y una sensación de libertad mientras espera la respuesta del ordenador. Adecuado para una correcta navegación.
  • Límite 10 segundos
El usuario puede mantener la atención, deseando que el ordenador respondiera más rápido.
  • No hay mundo (informático) más allá de los 10 segundos :-(

Accesibilidad

  • Se intenta garantizar una experiencia de usuario similar para personas con discapacidades.
  • WAI (Web Accesibility Initiative) es una parte de la W3C que genera la guia de accesibilidad.
  • La guía de accesibilidad se denomina WCAG o Web Content Accessibility Guidelines
  • Uso habitual en organismos públicos, como en la web del Ayuntamiento de Zaragoza

Niveles de conformidad

Nivel A
  • Imágenes con texto alternativo (alt)
El atributo alt es bueno para el SEO
Uso inapropiado: 
<img src=“menswatches.jpg” alt=“”>
Uso habitual: 
<img src=“menswatches.jpg” alt=“menswatches”>
Uso adecuado: 
<img src=“menswatches.jpg” alt=“Rolex Yacht Master watches for men”>
  • Contenido multimedia: Se proporciona contenido descriptivo alternativo
Opciones para generar los transcripts
  • El contenido debe tener un orden de lectura no dependiente del diseño o estilos
  • El contenido no debe depender de colores y debe ser fácilmente distinguible del fondo
  • Las funcionalidades de la pagina deben ser accesibles desde el teclado.
Ejemplo de página con acceso desde el teclado
Utilizar AccessKeys es fácil 
<div id="navigation"> 
<a href="index.html" accesskey="q">Home</a> |  
<a href="about.html">About Foos</a> |  
<a href="buy.html">Buy Foos</a> |  
<a href="sitemap.html">Site Map</a> |  
<a href="feedback.html">Feedback</a> |  
<a href="access.html">Accesskey Details</a> 
</div>
<div id="navigation"> 
<a href="index.html" accesskey="h">Home</a> |  
<a href="about.html" accesskey="1">About Foos</a> |  
<a href="buy.html" accesskey="2">Buy Foos</a> |  
<a href="sitemap.html" accesskey="3">Site Map</a> |  
<a href="feedback.html" accesskey="4">Feedback</a> |  
<a href="access.html" accesskey="k">Accesskey Details</a> 
</div>
  • Sin más de 3 destellos o cambios de imagen por segundo
  • Títulos descriptivos en cada pagina
  • Sistema para saltar de bloques de contenido y navegación secuencial
Nivel AA
  • Debe cumplir las pautas del nivel A
  • Subtítulos para el contenido multimedia con audio
  • Contenido alternativo descriptivo para contenido multimedia con vídeo
  • Contraste alto entre fondo y texto (al menos 4,5:1)
  • Se puede variar tamaño de fuente hasta un 200% sin perdida de funcionalidad
  • Encabezados descriptivos
  • Al menos dos formas distintas para navegar por el site
  • En los envíos de información confidencial debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo.
Nivel AAA
  • Debe cumplir con las pautas del nivel A y AA
  • Lenguaje de signos para el contenido multimedia con audio
  • Descripción completa para el contenido multimedia con vídeo
  • Contraste muy alto entre fondo y texto (al menos 7,1:1)
  • Contenidos multimedia sin audio de fondo (sólo locución principal)
  • La pagina debe poseer un sistema para que el usuario pueda cambiar los colores de texto y fondo, limitar las lineas a 80 caracteres, alto de linea y tamaño de fuente. Todo ello sin que sea necesario utilizar el scroll horizontal para poder ver todo el contenido
  • Las imágenes con texto sólo pueden utilizarse para decorar.
  • Las funcionalidades de la pagina deben ser accesibles desde el teclado sin ningún tipo de excepción
  • Reanudación de sesión: Cuando un expira la sesión el usuario puede volver a reanudar sesión sin perdida de datos
  • Se proporciona al usuario información sobre su situación en la pagina
  • Texto descriptivo sobre el destino de cada enlace
  • Encabezados en cada sección
  • Definir el idioma de la pagina
  • En todos los envíos de información sistema debe existir un sistema para corregir, retroceder o advertencia de error y que te permita corregirlo

Uso de estándares

  • Iniciativa de la W3C
  • Las metas son compatibilidad entre plataformas (uso de estándares web abiertos) y tamaño de ficheros compacto.
  • Ejemplo: separación de contenido (html) y presentación (css).
  • Una web que cumple los estándares no tiene porque ser una web con buena usabilidad o accesibilidad.

Compromisos entre uso de estándares, usabilidad y accesibilidad

  • Aunque están muy relacionados, no siempre van de la mano. Veamos algunos casos y sus posibles soluciones:

Color

  • Herramienta visual básica para el diseño Web
  • El 10% de las personas presentan algún tipo de deficiencia visual y no pueden distinguir ciertos colores (especialmente rojo y verde).
  • Se puede sustituir parcialmente el uso de distintos colores con el uso de iconos y distintos tipos de texto en la codificación de la Web.
  • Herramienta para ver lo legible que es tu combinación de colores

Siglas, acrónimos y abreviaturas

  • Cuando las siglas se utilizan como si fuera una palabra, estamos hablando de acrónimos.
  • Ejemplo: RENFE REd Nacional de Ferrocarriles Españoles
  • Cuando las siglas se leen como la palabra que representan, hablamos de abreviaturas.
Ej: Sr
  • Los lectores de pantalla no siempre las reconocen: HTML, PDF, NaCl, SiteMap...

</div>

Imágenes y sonidos

Navegación repetitiva o excesiva

Diseño con varias columnas

  • Reducir la anchura de las líneas ayuda a la legibilidad del texto y nos permite tener más información en la pantalla.
  • Puede resultar también un inconveniente para un screen reader
  • Se pueden usar layouts de css con una sola columna y fijando su max-width para que no sea muy ancha.
  • En caso de que usemos tablas de datos, debemos indicar cabecera, títulos, etc, para que su lectura sea comprensible desde un screen reader ver ejemplo.

</div>

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/html/Introducción&oldid=14123»