Universidad De Guayaquil

Facultad en Ciencias Matemáticas y Físicas

Carrera: Ingeniería de Software

Materia: Interacción Hombre - Máquina

TAREA - Pautas de accesibilidad.

Internacionalización y localización.

Profesor: Mgs. Aviles Monroy Jorge Isaac

Nombre: Ulloa Espinoza Steven Gabriel

Curso: SOF-S-MA-5-1
Contenido
Principios y heurísticas de diseño de la interacción ................................................ 4

Visibilidad: ......................................................................................................... 4

Feedback:............................................................................................................ 4

Restricciones: ..................................................................................................... 4

Mapeamiento: .................................................................................................... 4

Consistencia: ...................................................................................................... 5

16 reglas heurísticas de Tognazzini ......................................................................... 6

1. Anticipación.................................................................................................... 6

2. Autonomía ...................................................................................................... 6

3. Daltonismo ...................................................................................................... 7

4. Consistencia .................................................................................................... 7

5. Valores por defecto ........................................................................................ 7

7. Interfaces explorables .................................................................................... 8

8. Ley de Fitts ..................................................................................................... 8

9. Objetos de interfaz humana .......................................................................... 9

10. Reducción de demoras ................................................................................. 9

11. Aprendizaje (learnability) ......................................................................... 10

12. Uso de metáforas ........................................................................................ 10

13. Protección del trabajo del usuario ........................................................... 11

 14. Legibilidad .................................................................................................. 11

15. Registro del estado ..................................................................................... 11

16. Navegación visible ...................................................................................... 13

Pautas de accesibilidad .......................................................................................... 13

Internacionalización y localización ....................................................................... 15

Localización (o "l10n") ................................................................................... 15

Internacionalización (o "l18n") ...................................................................... 17

Pautas para la internacionalización y localización de tu web ................................ 18

W3C .................................................................................................................. 18

Bibliografía ............................................................................................................ 20
 Principios y heurísticas de diseño de la interacción

También deben considerarse los 6 principios fundamentales de interacción,

descritos por Don Norman. Son los siguientes:

Visibilidad: Cuanto más visibles sean las funciones, más probable será que los

usuarios puedan saber qué hacer a continuación. En contraste, cuando las funciones están

fuera de la vista, las hace más difíciles de encontrar y saber cómo usarlas.

Feedback: La retroalimentación es sobre el envío de información sobre qué

acción se ha realizado y qué se ha logrado, lo que le permite a la persona continuar con la

actividad. Hay varios tipos de comentarios disponibles para la interacción de diseño, audio,

táctil, verbal y combinaciones de estos.

Restricciones: El concepto de diseño de restricción se refiere a determinar formas

de restringir el tipo de interacción del usuario que puede tener lugar en un momento dado.

Hay varias maneras en que esto se puede lograr.

Mapeamiento: Esto se refiere a la relación entre los controles y sus efectos en el

mundo. Casi todos los artefactos necesitan algún tipo de mapeo entre controles y efectos, ya

sea una linterna, un automóvil, una planta de energía o una cabina. Un ejemplo de una

buena asignación entre control y efecto son las flechas hacia arriba y hacia abajo que se

utilizan para representar el movimiento hacia arriba y hacia abajo del cursor,

respectivamente, en un teclado de computadora.

 Consistencia: Esto se refiere al diseño de interfaces para tener operaciones

similares y utilizar elementos similares para lograr tareas similares. En particular, una

interfaz consistente es aquella que sigue reglas, como usar la misma operación para

seleccionar todos los objetos. Por ejemplo, una operación consistente utiliza la misma

acción de entrada para resaltar cualquier objeto gráfico en la interfaz, como hacer clic

siempre con el botón izquierdo del ratón. Las interfaces inconsistentes, por otro lado,

permiten excepciones a una regla.

Asequibilidad: Un término usado para referirse a un atributo de un objeto que

permite a las personas saber cómo usarlo. Por ejemplo, un botón del mouse invita a empujar

(al hacerlo, haciendo clic al hacer clic) por la forma en que está restringido físicamente en

su carcasa de plástico. A un nivel muy simple, proporcionar medios para dar una pista

(Norman, 1988). Cuando las posibilidades de un objeto físico son perceptualmente obvias,

es fácil saber cómo interactuar con él.

 16 reglas heurísticas de Tognazzini

Cuando las leas verás que estas reglas tienen algunos aspectos en común con la

heurística propuesta por Nielsen, pero tienen un enfoque más específico en la interacción

del usuario con la interfaz.

1. Anticipación

Equipa a tu usuario con toda la información y herramientas que pueda necesitar

durante cada etapa del proceso. Para ello necesitas tener un alto conocimiento del servicio o

producto en el que trabajas y también de la persona que interactúa con aquello que has

diseñado.

Por ejemplo, facilita al usuario información adicional que pueda necesitar, los

recursos para obtener fácilmente datos que pueda necesitar en ese momento, etc.

2. Autonomía

La persona que interactúa con tu dispositivo, web o aplicación tiene que sentir que

tiene el control para tomar las decisiones que considere oportunas. Esto no significa que

tengas que ceder todo el control, sino que establezcas un marco dentro del cual el usuario

pueda operar libremente. Si se siente encajonado puede sentirse frustrado y enfadado.

Por ejemplo, déjale cambiar el tamaño de tipografía que desee, permítele ordenar

el escritorio o la pantalla principal como quiera o evita que la interfaz tome decisiones por

sí misma: es lo que sucede cuando en algunas interfaces el contenido cambia de forma

automática.
 3. Daltonismo

Este principio está muy relacionado con la accesibilidad: ten cuidado a la hora de

seleccionar los colores de la interfaz y el uso que haces de ellos. Asegúrate de ofrecer

alternativas para quienes no pueden identificar o diferenciar bien algunos colores de la

paleta cromática, como por ejemplo iconos.

4. Consistencia

La consistencia tiene sus pros y sus contras pero lo que no se puede es negar su

utilidad. Tognazzini recomienda mantener la consistencia con los estándares existentes y

entre los diferentes diseños de interfaces con los que pueda interactuar un usuario dentro de

la misma compañía. Por ejemplo, en este último caso hablamos de la consistencia entre

iconos, tamaño de la tipografía, espaciados, diseño de los elementos de la interfaz, diseño

visual, etc.

Piensa por ejemplo en la suite de Office o la de Google: todos los productos

respiran la misma familaridad y tienen el mismo aspecto.

5. Valores por defecto

Los valores estándar tienen que poder sustituirse fácilmente por el contenido que

quiera escribir el usuario. En este caso concreto hablamos de los placeholders de los

campos de texto, que quedan sustituidos por el contenido que se escribe «encima».

Con este principio Tognazzini también hace referencia a las «opciones

predeterminadas» que pueda tener una interfaz: asegúrate siempre de que el usuario sabe a

qué se está haciendo referencia, qué es lo que modificará y, como indica la heurística de

Nielsen, que tiene la posibilidad de deshacer un error en caso de cometerlo.

 6. Eficiencia del usuario

El diseño debe estar centrado en la productividad del usuario y no en la del

sistema. El sistema debe ayudar al usuario a conseguir el objetivo que se había marcado de

forma rápida, sin esperas innecesarias, con textos claros y directos, una buena arquitectura

y una buena redacción de las opciones de los menús, botones y otros controles.

Recuerda que generalmente al navegar escaneamos más que leemos y tenemos

que promover una rápida comprensión de qué está pasando y de donde hacer clic.

7. Interfaces explorables

Ligado a la autonomía: según Tognazzini se deben proveer flujos de navegación

bien delimitados para que el usuario pueda alcanzar sus objetivos, pero deben existir

alternativas para que los usuarios exploren. Por ejemplo, tienen que existir rutas de salida y

otras formas de alcanzar el objetivo utilizando diferentes flujos.

Esto puedes trabajarlo de forma fácil y clara con los diagramas de flujo.

8. Ley de Fitts

Esta es otra de las leyes que debes tener en cuenta, aunque de inicio te pueda

parecer que no tiene nada que ver con el diseño.

Fue desarrollada en 1954 por Paul Fitts y se aplicó inicialmente en el mundo

físico, aunque es perfectamente aplicable al diseño de productos digitales.

La Ley de Fitts es una ecuación no lineal que describe la relación entre la

dificultad de seleccionar un objetivo (un botón, por ejemplo) y cómo de grande es y lo lejos

que está.
 9. Objetos de interfaz humana

En mi opinión este principio quizás dejará de tener sentido en un futuro no muy

lejano. Tognazzini afirmaba que los objetos de una interfaz deben corresponderse con

elementos que existan en el mundo real: una carpeta para guardar diferentes documentos,

una papelera para descartar archivos que se quieran eliminar, un disquete para guardar, etc.

10. Reducción de demoras

Cuando sea posible se debe trabajar para reducir demoras en la interacción con el

sistema y la interfaz. Este principio quizás te suena de Google, que siempre insiste en que la

carga tiene que ser rápida: el buscador penaliza en el ranking las páginas que cargan lento.

Más allá de esto, una interfaz lenta empeora la experiencia del usuario.

No te confundas, este principio no es solo tarea de los equipos de desarrollo. A la

hora de diseñar tu propuesta puedes afectar la carga.

Tognazzini define estos intervalos que hay que tener en cuenta y cómo dar

feedback adecuadamente:
 Reducción de demoras y feedback (Bruce Tognazzini)

11. Aprendizaje (learnability)

Está relacionado con el principio de «Flexibilidad y eficiencia de uso» de la

heurística de Nielsen. En este caso, Tognazzini afirma que idealmente los productos no

deberían tener curva de aprendizaje: los usuarios deberían poder utilizarlos correctamente

desde el primer momento y dominarlos rápidamente.

Aquí puede ser útil un buen onboarding, pero también un buen diseño que sea

usable, se entienda y permita al usuario ser eficiente (léete de nuevo el sexto principio de

Tognazzini ).

12. Uso de metáforas

Diseña utilizando metáforas que permitan al usuario entender rápidamente un

modelo conceptual.

El objetivo es generar (y utilizar) conexiones mentales creadas en el mundo «real»

en interfaces digitales: el uso de la papelera que comentaba en el noveno principio es un

buen ejemplo.
 Tognazzini habla de metáforas que evoquen algo familiar pero que a la vez

añadan un nuevo giro. Por ejemplo, si tienes que diseñar un periódico online no necesitas

copiar exactamente todos los elementos de un periódico físico: puedes mantener solo

algunos elementos que evoquen el objeto «original» sin llegar a copiarlo literalmente.

13. Protección del trabajo del usuario

Asegúrate, en la medida de lo posible, que el usuario nunca pierde su trabajo

como resultado de un error suyo, un error en el sistema, un apagón o los problemas que

puedan existir en la conexión.

14. Legibilidad

Ligado al tercer principio (contraste), Tognazzini señala la importancia de que los

textos puedan leerse fácilmente, que el tamaño de la tipografía es adecuado a cada

dispositivo y que las etiquetas que identifican la navegación, botones y otros elementos con

los que se interactúa se escriban con palabras clave en mente.

Realiza tests de usabilidad también con los usuarios más mayores que puedan

estar utilizando tu interfaz: muchas veces tenemos tendencia a hacer tests con individuos de

edad media o jóvenes, dejando de lado la población más envejecida.

15. Registro del estado

Es importante que el sistema guarde toda la información que permita mejorar la

experiencia al usuario. Por ejemplo:

• Si es la primera vez que utiliza un sistema

• Dónde está el usuario

 • Dónde quiere ir el usuario

• Dónde ha estado el usuario en esta sesión

• Dónde abandóno el usuario la última sesión

Si buscas un ejemplo concreto, piensa en la aplicación Books de Apple (o

cualquier otra que te permita leer libros electrónicos): siempre saben indicarte en qué

página te quedaste la última vez, te informan de qué página es, cuantas te quedan y si

«cierras» el libro puedes recuperar tu anterior posición.

La aplicación «Books» de Apple (MacStories)

Otro ejemplo serían las plataformas que te mantienen identificado aunque hayas

cerrado la pestaña. O el propio YouTube, que te indica cuanto te queda por ver de un vídeo

y tiene una página con tu histórico que te permite recuperar cualquier vídeo visualizado

previamente.
 16. Navegación visible

Este principio es especialmente importante si tu producto o servicio es

complicado. Si estás en España, piensa por ejemplo en la página web de la Agencia

Tributaria: tiene muchísimas páginas y a veces es difícil hacerse un mapa mental correcto.

Reduce la navegación al máximo y ofrece la mínima imprescindible de forma

clara y natural. Si el usuario tiene dudas o no se siente cómodo, se irá y probablemente no

volverá.

Pautas de accesibilidad

las Pautas para la Accesibilidad del Contenido Web (Web Content Accessibility

Guidelines, WCAG), que consisten en una serie de pautas, técnicas y fuentes destinadas a

evaluar y medir el grado de accesibilidad del contenido web, reduciendo o incluso

eliminando las barreras detectadas.

La primera versión de estas pautas se publicó en 1999 y contenía 14 pautas

básicas relacionadas con la accesibilidad para diferentes tipos de contenidos. Cada pauta

contenía una serie de puntos de revisión que se podían utilizar para comprobar la

accesibilidad de las páginas web. A su vez, estos puntos se asociaron a tres niveles de

severidad según la gravedad de la barrera descrita en este punto.

La segunda versión de estas pautas (WCAG 2.0) se publicó la 11 de diciembre de

2008 con una nueva organización y estructura de documento dividido en cuatro principios

básicos: perceptibilidad, operatividad, comprensión y robustez, divididos en 13 pautas que

contienen criterios de éxito evaluables con independencia de la tecnología utilizada,

agrupados en tres niveles de accesibilidad (A, AA y AAA), similares a los niveles de

prioridad de las WCAG 1.0.

Finalmente, la versión actual de las pautas es la WCAG 2.1, que se publicó el 5 de

junio de 2018 y amplió las pautas y criterios disponibles manteniendo la misma estructura

que las WCAG 2.0.

Para medir el grado de accesibilidad de un sitio web, actualmente se utilizan las

pautas 2.1, que se basan en una serie de puntos de revisión o criterios de éxito que tienen en

cuenta diferentes niveles de cumplimiento. A causa de eso, se puede considerar que un sitio

web cumple el nivel A si cumple todos los puntos de revisión de prioridad 1 de las WCAG

2.1. Asimismo, el sitio web se considera de nivel doble A si cumple las prioridades 1 y 2 de

las WCAG 2.1 y, del mismo modo, el sitio web se considera de nivel AAA (triple A) si

cumple todos los puntos de revisión (prioridades 1, 2 y 3) de las WCAG 2.1 (niveles A, AA

y AAA).

Actualmente en el Estado español la norma vigente que tienen que cumplir, por

ley, los contenidos que se presentan a través de tecnologías web, para que puedan acceder

el número mayor posible de personas, las personas con discapacidad o personas de edad

avanzada incluidas, es el RD 1112/2018 que es la trasposición a la legislación española de

la UE 2016/2102 europea. Esta norma también se basa en los niveles A y AA de las pautas

WCAG 2.1.

El cumplimiento de las pautas WCAG 2.1 garantiza la accesibilidad de cualquier

contenido web, independientemente de la tecnología utilizada. Sin embargo, se pueden

añadir una serie de requisitos adicionales que tienen por objetivo mejorar la experiencia de
cualquier usuario, con discapacidad y sin ésta, que acceda a contenidos web presentados a

través de dispositivos móviles. El acceso a una página web desde un dispositivo móvil, si

no está adaptada para las características del dispositivo, puede resultar una experiencia

poco gratificante y pueden aparecer nuevas barreras en el acceso a la información.

Internacionalización y localización

Localización (o "l10n")

Es la adaptación de un producto, una aplicación o el contenido de un documento

con el fin de adecuarlo a las necesidades lingüísticas, culturales u otras de un mercado

destinatario concreto.

Esta adecuación no es sólo traducirlo a otro idioma sino también tener en cuenta

otro tipo de factores que implican adaptarlo en relación con:

• diferentes formatos numéricos: por ejemplo separación de miles y decimales

con coma o con punto

• de fecha: por ejemplo "02/03/04" puede interpretarse de diferente manera en

EEUU, Europa o Japón, como veremos luego; o incluso pueden utilizarse diferentes

calendarios
 • de hora: formato 12 horas por defecto para EEUU o de 24 horas europeo;

pero también puede ser necesario indicar respecto a qué uso horario hace referencia un

horario concreto

• diferentes monedas y símbolos de las mismas

• diferentes medidas de distancia, temperatura, etc.

• diferentes alfabetos, dirección de escritura o uso del teclado

• diferentes tipos y formatos de tratamientos, nombres y apellidos, direcciones

o teléfonos

• los algoritmos de comparación y ordenamiento deben adaptarse al idioma,

pero a veces también al país, por ejemplo en Islandia los directorios se ordenan por nombre

de pila.

• diferente significado y percepción de metáforas, símbolos, iconos y colores

• los textos y gráficos que contengan referencia a objetos, acciones o ideas

que, en una cultura dada, puedan ser objeto de mala interpretación o considerados ofensivos

• diferentes exigencias legales

• diferentes tamaños estándar de papel (relevante para la impresión) etc.

Puede suponer incluso la reelaboración exhaustiva de la lógica, el diseño visual o

la presentación según cada país y cultura.

 Internacionalización (o "l18n")

La internacionalización es el diseño y desarrollo de un producto, una aplicación o

el contenido de un documento de modo tal que permita una fácil localización (adaptación

del contenido a diferentes idiomas, regiones o culturas según hemos visto anteriormente)

sin necesidad de realizar cambios en el código.

Supone la utilización de formatos y protocolos que no establezcan barreras a los

diferentes idiomas, sistemas de escritura, códigos y otras convenciones locales, aunque no

hayamos llevado a cabo la localización del sitio.

Garantizar la utilización universal de una web en todos los idiomas y culturas

implica:

• Un modo de diseño y desarrollo que elimine obstáculos a la localización o la

distribución internacional: usar Unicode, controlar la concatenación de cadenas, evitar que

la programación dependa de valores de cadenas pertenecientes a la interfaz de usuario, etc.

• Habilitar características que tal vez no sean usadas hasta el momento de la

localización: añadir en la DTD etiquetas para habilitar el texto bidireccional o la

identificación de idiomas, hacer la CSS compatible con texto vertical u otras características

tipográficas ajenas al alfabeto latino, etc.

• Preparar el código para hacer frente a las preferencias locales, regionales,

lingüísticas o culturales, como son los de formatos de fecha y hora, calendarios locales,

formatos y sistemas de números, ordenamiento y presentación de listas, uso de nombres

personales y formas de tratamiento, etc.

 • Separar del código o contenido los elementos localizables, de modo que

puedan cargarse o seleccionarse alternativas localizadas según determinen las preferencias

internacionales del usuario.

Pautas para la internacionalización y localización de tu web

W3C

1. Codificación. Utilice Unicode siempre que sea posible para contenidos,

bases de datos, etc. Siempre declare la codificación del contenido.

2. Escapes. Utilice caracteres en lugar de escapes (por ejemplo, á

á o á) siempre que sea posible.

3. Idioma. Declare el idioma de los documentos e indique los cambios de

idioma internos.

4. Presentación vs. contenido. Utilice hojas de estilo para información de

presentación. Restrinja el uso de etiquetas para la semántica.

5. Imágenes, animaciones & ejemplos. Verifique si es posible la traducción y

si existe alguna influencia cultural inadecuada.

6. Formularios. Utilice una codificación adecuada tanto en el formulario como

en el servidor. Admita los formatos locales de nombres/direcciones, horas/fechas, etc.

7. Autoría de texto. Utilice texto simple y conciso. Tenga cuidado al

componer oraciones de cadenas múltiples.

8. Navegación. Incluya en cada página una navegación que pueda verse

claramente hacia las páginas o los sitios localizados, utilizando el idioma de llegada.
 9. Texto de derecha a izquierda. Para XHTML, agregue dir="rtl" a la

etiqueta html. Utilícela nuevamente sólo para cambiar la dirección de base.

10. Verifique su trabajo.

 Bibliografía

https://conectasoftware.com/diseno-web/principio-diseno-de-norman/

https://rockcontent.com/es/blog/diseno-de-interaccion/

https://www.uifrommars.com/16-reglas-heuristicas-de-tognazzini-y-como-

aplicarlas/

https://eugeniacasabona.medium.com/los-10-mandamientos-principios-

heurísticos-de-jakob-nielsen-ed4ad54468a9