jueves, 28 de febrero de 2019

Consejos para hacer que la experiencia del cliente ciego en un restaurante o cafetería sea agradable

Persona ciega ignorada en un restaurante


Prolongar las conversaciones. Es importante que el servicio continúe hablando tras haber dado la bienvenida al restaurante. Si existen mesas asignadas es conveniente que el servicio mantenga en todo momento la comunicación.
No tomar el bastón o interactuar con el perro guía. A veces podemos estar tentados de coger el bastón para dejarlo en un paragüero o perchero, pero esta no es una manera de proceder apropiada, las persona con problemas de visión necesita disponer en todo momento de su utensilio de tanteo. Hay que recordar también que los perros están concentrados en su trabajo, debemos evitar que se distraigan de las tareas para las que han sido adiestrados.
Evitar el exceso de condescendencia, pues tal comportamiento puede causar enfado. Algunas personas ciegas han mostrado su disgusto cuando el servicio de camarería se ha ofrecido a cortarle la comida. Estas personas son completamente capaces de hacerlo. Es mejor no propasarse con las ayudas, si el individuo se ve en un problema solicitará la atención del servicio.

Conversar directamente con el cliente ciego si va acompañado. La sordera no es un trastorno que suela ir acompañado de la ceguera, no se deben asumir discapacidades que no existen. Es tremendamente descortés dirigirse a los acompañantes para solicitar información sobre el pedido o necesidades del cliente ciego.
Si no hay menús con texto en Braille y el comensal está solo, querrá que se le lea. Cuando van acompañadas, estas personas suelen apoyarse en sus compañeros de mesa.
Evitar obstrucciones en mesas y pasillos. Los objetos que se encuentran en lugares inesperados pueden ser causa de accidentes

Poner texto alternativo en LinkedIn

Icono de Linkedin


Para agregar texto alternativo a las imágenes de LinkedIn, debes utilizar una computadora de sobremesa / portátil.

Tener presente que a partir del 27 de febrero de 2019, la adición de texto alternativo para imágenes no está disponible en las aplicaciones móviles de LinkedIn.

PASOS

En Iniciar una publicación en la parte superior de la línea de tiempo de LinkedIn,

Interface de Linkedlm para insertar una nueva publicacion

  • Seleccione la imagen que desea agregar.
  • Una vez que se muestra la imagen, seleccione agregar descripción.


En la parte superior de la imagen aparace la opción añadir descripción

  • Agregue su texto descriptivo en el cuadro de texto alternativo. Tienes 120 caracteres para describir tu imagen.


Interface para agreagar 120 caracteres en el texto alternativo de la imagen de Linkedln

  • Seleccione guardar en el cuadro de texto alternativo





lunes, 25 de febrero de 2019

Etiqueta




La etiqueta <video> afecta a muchas partes de la web, SEO....

El elemento <track>

HTML5 nos permite especificar subtítulos para un video usando el <track>elemento. Los diversos atributos de este elemento nos permiten especificar cosas como el tipo de contenido que estamos agregando, el idioma en el que se encuentra y, por supuesto, una referencia al archivo de texto que contiene la información real de los subtítulos.

 WebVTT


Los archivos que contienen los datos de los subtítulos son archivos de texto simples que siguen un formato específico, en este caso el formato de las pistas de texto de video web (WebVTT). La especificación de WebVTT aún se está trabajando, pero las partes principales de ella son estables, por lo que podemos usarla hoy. convertidor en línea como srt2vtt .

CODIGO EJEMPLO

<video id="video" controls preload="metadata">
   <source src="video/sintel-short.mp4" type="video/mp4">
   <source src="video/sintel-short.webm" type="video/webm">
   <track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default>
   <track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt">
   <track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt">
</video>

Kind: recibe un valor de subtitles, que indica el tipo de contenido que contienen los archivos.
Label se le asigna un valor que indica en qué idioma se encuentra el conjunto de subtítulos, por ejemplo, Englisho Deutsch- estas etiquetas aparecerán en la interfaz del usuario para que el usuario pueda seleccionar fácilmente el idioma.
srclang indica en qué idioma.
src: se le asigna una URL válida que apunta al archivo de subtítulos WebVTT.
Default: se establece en el <track>elemento inglés , lo que indica al navegador que esta es la definición de archivo de subtítulos predeterminada para usar cuando los subtítulos se han activado y el usuario no ha realizado una selección específica.


COMPLEMENTOS


Este moderno reproductor de video implementa subtítulos en formatos de archivo SRT y WebVTT.
Reproductor HTML5 compatible con WebVTT.
Este reproductor de video es muy usado y hace mucho más que simplemente admitir subtítulos de video. Es compatible con los formatos WebVTT, SRT y DFXP.
Otro reproductor de video completo que también admite subtítulos de video, aunque solo en formato SRT.
Este reproductor también admite subtítulos a través de archivos WebVTT y SRT.
Soporta subtítulos de video WebVTT.
Soporta subtítulos webVTT multi-idiomas

El <controls> agrega controles de video, como reproducir, pausar y volumen.

Es una buena idea incluir siempre width y height . Si la altura y el ancho no están configurados, la página puede parpadear mientras se carga el video.

El <source>elemento le permite especificar archivos de video alternativos entre los que el navegador puede elegir. El navegador utilizará el primer formato reconocido.

NO ACONSEJABLES EN ACCESIBILIDAD


autoplay: hace que el audio se reproduzca automáticamente.
loop: hace que el audio se repita automáticamente.



MUY IMPORTANTE


<video> no es compatible con Internet Explorer 8 y versiones anteriores.

domingo, 24 de febrero de 2019

Modelo de declaración de accesibilidad de conformidad con la Directiva (UE) 2016/2102

Bandera de europa hondeando en una de sus sedes

La declaración de accesibilidad es el apartado de un sitio web donde se indica el nivel de accesibilidad del mismo e información adicional al respecto

Dicha declaración de accesibilidad deberá:

ser actualizada periódicamente, como mínimo una vez al año, o cada vez que se realice una revisión de accesibilidad.
todas las páginas del sitio web con un enlace denominado “Accesibilidad” o su equivalente.
estar disponible, en el caso de las aplicaciones para dispositivos móviles, en el sitio web de la entidad obligada que haya desarrollado la aplicación.
estar en un formato accesible.
se deberá realizar conforme al modelo europeo fijado a través de la Decisión 2018/1523.

EJEMPLOS:


Declaración de accesibilidad del PAe Portal de Administración Electrónica

Declaración de accesibilidad del Ministerio de Hacienda

Declaración de accesibilidad del PAG Punto de Acceso General


jueves, 21 de febrero de 2019

¿Por qué la accesibilidad es importante? Proyecto A11Y


Proyecto A11Y


De acuerdo con la Organización Mundial de la Salud (junio de 2012), las personas ciegas y con discapacidad visual conforman 285,000,000 de personas, con 39,000,000 categorizadas como legalmente ciegas y las 246,000,000 con discapacidad visual restantes. Las personas sordas y con discapacidad auditiva representan 275,000,000 (2004) en la categoría de discapacidad auditiva de moderada a profunda.
La accesibilidad puede ser un tema complejo y difícil. El Proyecto A11Y entiende esto y quiere ayudar a facilitar su implementación en la web, en la web de A11Y encontraras recursos para mejorar la accesibilidad de tu proyecto.

¿Por qué no abrir enlaces en nuevas pestañas?

 Editor  TinyMCE de WordPress


En términos generales, es mejor no hacerlo: puede ser desorientador para las personas, especialmente para los usuarios web principiantes o las personas que tienen dificultades para percibir el contenido visual. Es posible que no se den cuenta de que se haya abierto una nueva pestaña o ventana y que tengan dificultades para cambiar entre ventanas. En resumen: rompe el flujo de navegación para los visitantes que visitan el sitio web utilizando tecnologías de asistencia. Abrir una nueva pestaña en el teléfono móvil puede ser aún más desorientador, ya que es especialmente difícil para el usuario volver al sitio web en el que estaba navegando originalmente. En pocas palabras quitarle el control al visitante puede tener un impacto negativo en la experiencia del usuario. Por lo tanto, es mejor que los visitantes decidan si desean o no abrir un enlace en una nueva pestaña.

Hay excepciones en las que es preferible abrir una nueva ventana o pestaña

Abrir una página que contenga información sensible al contexto, como instrucciones de ayuda, o un medio alternativo para completar un formulario, como un selector de fechas basado en el calendario
El usuario ha iniciado sesión en un área segura de un sitio, y seguir un enlace a una página fuera del área segura terminaría el inicio de sesión del usuario.


Se recomienda que cuando los enlaces se abran en una nueva ventana, haya una advertencia previa.

ADVERTECIA

Además del impacto en la accesibilidad, también hay un posible problema de seguridad a tener en cuenta. Usando el atributo target="_blank", está dejando a sus visitantes abiertos a posibles ataques de phishing (tipo de ingeniería social, caracterizado por intentar adquirir información confidencial de forma fraudulenta (como puede ser una contraseña, información detallada sobre tarjetas de crédito u otra información bancaria).
Cuando lo uses target="_blank", asegúrate siempre de agregar rel="noopener"o rel="noreferrer" según han respondido desde Google a preguntas de webmasters sobre si afecta al SEO o no, no afecta el posicionamiento a los enlaces, tengan nofollow o no.
WordPress, en la versión 4.7.4, incorporó la actualización del editor incluido TinyMCE que soluciona esta vulnerabilidad añadiendo automáticamente la relación rel=”noopener noreferrer” a todos los enlaces con target=”_blank”, tanto a los nuevos contenidos como a los existentes si los abres para editarlos, una solución bastante efectiva.


miércoles, 20 de febrero de 2019

Extensiones de Chrome útiles para diseñadores

Si está buscando agregar algunas herramientas útiles adicionales a su trabajo diario, está en el lugar correcto. Estas extensiones de Chromo se seleccionaron específicamente teniendo en cuenta a los diseñadores y ayudarán con todo tipo de cosas mientras navega por la web, como identificar fuentes y códigos hexadecimales en color, diseñar accesibilidad e incluso probar diseños

WhatFont. ¿Alguna vez te has topado con una fuente bonita al navegar por la web y luego pasas demasiado tiempo buscando el nombre y los detalles? WhatFont  es un gran ahorro de tiempo que le permite desplazarse sobre una fuente con el mouse y proporcionar instantáneamente los detalles de la fuente, desde el nombre de la fuente, la familia de la fuente, el peso, el tamaño, la altura de la línea hasta el código hexadecimal del color del texto. La mejor parte es que WhatFont también proporciona un enlace a la fuente descargable a través de Typeki.
""


Extensity: extensión que agrupa todas y solo la usa cuando quieras y deshabilítelas cuando quieras

""


Magic Reader: Este extensión ajusta automáticamente el tamaño de la fuente / el interlineado del contenido principal de una página web, y deja todo lo demás igual.


Spectrum: puedes probar instantáneamente sus páginas web para detectar diferentes tipos de deficiencias de visión del color. Simplemente haga clic en la extensión de tu navegador y use el menú desplegable para seleccionar una deficiencia al color específica. La página web en la que se encuentra cambiará de apariencia, por lo que la verá a través de los ojos de alguien con la deficiencia seleccionada.

Vista de tritanopia con la extensión  Spectrum


ColorPick Eyedropper: es extremadamente útil. Ahora, puede ahorrar tiempo al pasar el mouse sobre cualquier parte de su navegador para obtener el código hexadecimal del color deseado de inmediato.

""


Kontrast - WCAG Contrast Checker: es una extensión del navegador que le permite verificar y ajustar rápidamente el contraste de texto y fondo en tiempo real en su navegador para cumplir con los estándares de los requisitos de las Pautas de Accesibilidad al Contenido del Sitio (WCAG 2.1).


Site Palette : es otra extensión de Chrome que ayuda a detectar códigos de color. Con Site Palette, puede extraer la paleta de colores de cualquier sitio web con solo un clic.

Cambiar color para Facebook ™:Con esta extensión de Chrome, puede personalizar fácilmente sus colores de tema de Facebook, títulos, color de fuente, diseño de chat, fondo y más. Todo ello con un panel de control sencillo

Sizzy: puede previsualizar el diseño en varias pantallas a la vez mientras trabajas. Todo lo que tienes que hacer es ingresar la URL del sitio web y filtrar en qué dispositivos desea obtener una vista previa del diseño.

Pre visualización de Sizzy con 5 pantallas de telefonos moviles


Corporate Ipsum: es una extensión de Chrome práctica (y muy entretenida) que genera texto para ti según el número de palabras que desees.

Dark Reader: Esta extensión que cuida los ojos habilita el modo nocturno, creando temas oscuros para sitios de internet en el momento. Dark Reader invierte los colores brillantes, haciéndolos contrastantes y fáciles de leer.

""


TLV Night Mode: otra aplicación que ayuda a tus ojos


martes, 19 de febrero de 2019

Que poner en una declaración de accesibilidad

Logotipo de WAI iniciativa de accesibilidad del W3C


El grupo del World Wide Web Consortium denominado WAI desarrolló una interesante herramienta de generación de declaraciones de accesibilidad. De acuerdo con esto, se puede incluir lo siguiente como parte de su declaración de accesibilidad

Información básica: una breve información sobre su negocio, los estándares de accesibilidad aplicados y la información de contacto para obtener comentarios.

Sus esfuerzos: En esta sección puede explicar los esfuerzos que ha realizado y que tomará en el futuro para que el sitio web sea accesible. Además, también puede explicar los objetivos a largo plazo que tiene para el sitio web o la accesibilidad de la aplicación móvil.

Información técnica: esta sección puede explicar acerca de la tecnología utilizada, como HTML, CSS JavaScript, etc. y cómo los usó para hacer que su aplicación sea accesible. Esto también le dará la oportunidad de hablar sobre tecnologías de asistencia compatibles, navegadores y sistemas operativos y sobre cualquier problema de compatibilidad conocido.

Proceso de quejas y menciones: menciona al equipo dentro de la organización que aprobó esta declaración. Además, si la organización tiene alguna jerarquía de quejas de accesibilidad, este es el lugar para proporcionarla.

Escribir la declaración de accesibilidad a menudo es lo mismo que escribir cualquier otro contenido de la página, sin embargo, el grupo WAI del W3C ha desarrollado una herramienta para generar la misma.

lunes, 18 de febrero de 2019

Crear subtítulos en YouTube





Los subtítulos abren su contenido a un público más amplio, incluyendo a los espectadores sordos o con problemas de audición (personas mayores) o aquellos que hablan idiomas diferentes o están aprendiendo.



IMPORTANTE PARA SUBTITULAR BIEN:


  • Una transcripción contiene el texto de lo que se dice en un video, pero no la información del código de tiempo.
  • Cuando llegue a la parte donde desea agregar algo, escriba su contenido en el cuadro. No olvide agregar texto que describe otros sonidos que suceden en el video. Por ejemplo, puede agregar sonidos como el aplauso o el trueno como [aplauso]o [trueno]para que los espectadores saber lo que está pasando en el video.
  • Los subtítulos automáticos están disponibles en inglés, holandés, francés, alemán, italiano, japonés, coreano, portugués, ruso y español. te recalco un aspecto clave están realizados con inteligencia artificial y suelén fallar.
La guía de ayuda de YouTube te ayudará a la hora de crear un correcto subtitulado.


domingo, 17 de febrero de 2019

Mercadeo inclusivo

Mujeres y hombres de diversas edades con discapacidad visual

El marketing inclusivo significa ser consciente y estructurar el contenido. Este es un campo amplio y dinámico que tiene en cuenta cualquier factor, cómo el género, la edad, la raza, los ingresos, la discapacidad y más. Cuando se trata de personas con discapacidades visuales, esto por supuesto incluye noticias, productos y otros contenidos dirigidos a ellos. Pero en términos más generales, significa asegurar que la web que sea accesible para ellos. Afortunadamente para nosotros, los desarrolladores web, muchas de las prácticas para crear contenido accesible para personas con discapacidad visuales son las mismas que seguimos normalmente.

Texto alternativo para imágenes, videos e infografías.
Gran parte del contenido que consumimos está en texto, lo que nos brinda un buen comienzo para hacer que el contenido sea accesible para personas con discapacidades visuales. Las tecnologías de asistencia modernas, como los lectores de pantalla, son grandes herramientas. Sin embargo, simplemente escribir texto no es suficiente para brindar a los usuarios una experiencia completa.
Las descripciones de texto alternativo se adjuntan al contenido visual para proporcionar una alternativa basada en texto a los medios que no son de texto. El uso del texto alternativo para describir los medios en nuestras páginas es una de las mejores prácticas de SEO. pero también ayudan a mejorar la accesibilidad de nuestro contenido en general. Este texto se muestra normalmente cuando no se pueden cargar sus medios. Los textos alternativos no solo brindan a los motores de búsqueda información sobre el contenido que se encuentra en nuestras páginas, sino que también son utilizados por aquellos que no pueden usar los medios de comunicación debido a un impedimento. Al escribir texto alternativo, tenga en cuenta:

La precisión es clave, tanto para los rastreadores de búsqueda como para los usuarios
Evite describir imágenes con el texto-imágenes, video, etc.
Las descripciones deben ser concisas.
Si se encuentra texto en la imagen, indíquelo en el texto alternativo
No seas redundante y repitas lo que se encuentra fuera de los videos, fotos, etc.
La accesibilidad se extiende no solo a sus medios, sino también a su estructura de archivos y nombres. Lo mismo es cierto para la optimización SEO. Ya sabemos que es una buena práctica de SEO evitar las URL dinámicas y usar las estáticas cuando sea posible:

www.colonia-marketing.com/367/?post=11309

contra

www.colonia-marketing.com/tommy-blue-calls-cristal

Al igual que con el texto alternativo y el marcado de esquema, sus URL y nombres de archivo desempeñan un papel importante en la capacidad de un buscador de indexadores para indexar su página para identificar el contenido de su sitio, y también ayudan a mejorar la accesibilidad para las personas con discapacidades visuales. Las URL y los nombres de archivo deben describir el contenido que uno esperaría encontrar si los abrieran, y también son un excelente lugar para colocar palabras clave relevantes. No solo eso, sino que una URL legible para las personas también es mucho más confiable que una serie de caracteres alfanuméricos.




Si bien la idea de crear un sitio web o crear contenido con un enfoque pensado en las personas con discapacidades visuales puede parecer un trabajo adicional en la vida ya ocupada de los desarrolladores web y los creadores de contenido, realmente no hay nada de qué preocuparse. Con más de mil millones de personas que sufren algún tipo de discapacidad visual, sería una decisión comercial terrible limitar su alcance a un mercado tan grande. Además, si piensa en un rastreador de búsqueda tipo Google, también tiene una discapacidad visual, y los principios de SEO que promovemos para hacer que un sitio web sea fácil de rastrear son los mismos que para hacerlo accesible. Al crear sus páginas y escribir contenido, tenga en cuenta las necesidades de las personas con discapacidad visual, también se optimizará el SEO.

viernes, 15 de febrero de 2019

WordPress temas accesibles de comercio


Accessibility-ready ecommerce themes for WordPress . Es una colección de temas de comercio electrónico de WordPress listos para la accesibilidad. Incluye Storefront , un tema de WooCommerce de Automattic con más de 100,000 instalaciones activas.

""


Accesibility WP. Este complemento ayuda con muchos problemas comunes de accesibilidad en los temas de WordPress. Agrega una barra de herramientas para poder cambiar entre alto contraste, letra grande y vistas desaturadas de su tema.
Este complemento ayuda con una variedad de problemas comunes de accesibilidad en los temas de WordPress. Si bien la mayoría de los problemas de accesibilidad no pueden solucionarse sin cambiar directamente su tema.

Todas las funciones se pueden desactivar según las necesidades de su tema. Para usuarios avanzados, todas las funciones basadas en la modificación de las hojas de estilo se pueden personalizar utilizando sus propios estilos personalizados colocando la hoja de estilo apropiada en su directorio de temas.

cabecera de plugin accesibility


wA11y. La misión del complemento wA11y es proporcionar herramientas para ayudarle a evaluar y mejorar la accesibilidad de su sitio web. Sus herramientas incluyen tota11y, WAVE y una variedad de filtros.
"A11y" es la abreviatura comúnmente utilizada para la accesibilidad, ya que hay once letras entre la "a" y la "y".

"W" + "A11y" es la abreviatura de "web accessibility". # wa11y

Accessible Poetry. Accessible Poetry proporciona soluciones a problemas comunes de accesibilidad en los sitios web. Los usuarios pueden acceder a una barra de herramientas para cambios de fuente y contraste. Los Skiplinks permiten a los usuarios navegar entre las áreas principales de la página a través de su teclado. Recibe alertas de imágenes sin texto alternativo; proporcionar efecto de contorno para objetos en modo de enfoque; y agregar código personalizado para la accesibilidad.

Contact Form 7: Accessible Defaults. Este complemento genera un equivalente accesible de la versión predeterminada del plugin Contact Form 7. Agrega un conjunto de tipos de formularios básicos adicionales para modelar nuevos formularios accesibles.

Accesibilidad Divi . Si bien hay muchos complementos para mejorar la accesibilidad del tema de WordPress, este es para problemas de accesibilidad que se encuentran específicamente en Divi. Este complemento mejora la accesibilidad de Divi de acuerdo con las pautas de WCAG 2.0.

jueves, 14 de febrero de 2019

Haz el bien - mejora la accesibilidad

Botón de accesibilidad en el teclado de un ordenador

La accesibilidad mejora la experiencia del usuario para todos los usuarios. Si no me crees, ¡intenta experimentar la falta de accesibilidad!

La accesibilidad beneficia a todos.
Se puede acceder a un sitio web, si el contenido del sitio está disponible para todos, cualquiera puede actuar en ella. La accesibilidad beneficia a las personas que están experimentando algún tipo de discapacidad. El impedimento puede estar relacionado con la visión, la audición, la motricidad o la capacidad cognitiva. Y el deterioro puede ser de carácter situacional, temporal o permanente. Si lo piensas, todos somos discapacitados de alguna manera, al menos en algunas situaciones. Como cuando tenemos prisa, estamos distraídos, estresados, cansados o con poca luz. Así que la accesibilidad te beneficia.

¿Por qué no hay más sitios accesibles?
Quienes diseñan, maquetan y prueban los sitios suelen tener buena visión y audición. Pueden operar teclado, mouse o pantalla táctil. Sus habilidades cognitivas están bien. La gente como ellos probablemente puede usar el sitio muy bien. Y es fácil olvidar que no todos son iguales, además cometen el tremendo error de validar sus trabajos con un validador automático.

De la empatía a la accesibilidad.
Tener empatía tiene un papel enorme en hacer que los sitios web sean accesibles. Por eso es bueno experimentar la falta de accesibilidad a ti mismo. Para ver cómo se siente.

Perceptible.

Facilite que los usuarios videntes, pero con discapacidad visual vean las cosas con claridad.

Cómo:

Asegúrese de que haya suficiente contraste entre el texto y el fondo
No transmitas información solo con color
Asegúrese de que los usuarios puedan aumentar el tamaño del texto y que se mantenga legible y funcional.

Comprensible


Asegúrese de que el código indique la función, el nombre y el valor de cada elemento. De esta manera, los usuarios con tecnología de asistencia pueden entender el significado de los elementos.
Asegúrese de que los tamaños objetivo seleccionables y los márgenes alrededor de ellos sean lo suficientemente grandes.

Cómo:

Utilizar texto alternativo descriptivo para imágenes.
Use etiquetas de encabezado
Haga que los textos de los enlaces sean descriptivos para que el usuario pueda entender donde te dirige el  enlace solo por el texto del enlace.

Operable


Asegúrese de que los usuarios puedan usar el sitio solo con su teclado. De esta manera también los usuarios que no pueden usar su mouse pueden usar los formularios, controles y navegar por el sitio

miércoles, 13 de febrero de 2019

Consejos para hacer accesibles los elementos interactivos en telefonos móviles



Las pautas de accesibilidad al contenido en la web ( WCAG ) son un conjunto de pautas sobre cómo hacer accesibles los sitios web. La segunda versión se publicó en 2008, antes de que los sitios web estuvieran disponibles en dispositivos móviles de alguna manera significativa.

Hace relativamente poco, la WCAG se actualizó a la versión 2.1, que incluye una sección completamente nueva sobre pautas para la accesibilidad móvil . Hay  reglas nuevas específicas para dispositivos móviles, como la regla 1.3.4. Históricamente, los dispositivos solían tener una pantalla de orientación fija, y todo el contenido se creó para coincidir con la orientación de la pantalla. Hoy en día, la mayoría de las computadoras de mano y muchos otros dispositivos (por ejemplo, monitores) tienen una capacidad a nivel de hardware para ajustar dinámicamente la orientación predeterminada de la pantalla según la información del sensor. El objetivo de este criterio de éxito es que los autores nunca deben restringir la orientación del contenido, asegurando así que siempre coincida con la orientación de la pantalla del dispositivo.


Colocar elementos interactivos donde se pueda acceder fácilmente.


Lo primero a considerar con los dispositivos móviles es donde se colocan los elementos interactivos / accionables. En comparación con la forma relativamente rígida en que interactuamos con los dispositivos de escritorio, los dispositivos móviles se pueden usar de muchas maneras diferentes, Debido a este manejo dinámico de los dispositivos móviles, Se sugiere crear interfaces que sean flexibles. Por ejemplo, puede ser fácil pensar que lo mejor es colocar un botón en la esquina inferior derecha porque la mayoría de los usuarios pueden usar su dispositivo con la mano derecha. Sin embargo, esto sería el lugar más incómodo para ponerlo para usuarios zurdos. Una mejor ubicación para un bolón podría ser el abarcar todo el ancho de la ventana gráfica.

Botón de acción en el lado derecho de la pantalla y ocupando todo el ancho

Dejar claro que un elemento es accionable.


En comparación con el escritorio de un ordenador de sobremesa, puede ser un poco más difícil hacerle saber a un usuario que un elemento es accionable en dispositivos con pantalla táctil.

La mejor manera de transmitir que un elemento es accionable es confiar en la convención y en qué elementos se espera que se vean. Por ejemplo, los enlaces suelen estar subrayados o tienen un color distinto al del texto del cuerpo los botones suelen tener una forma rectangular con esquinas redondeadas.

También podemos usar la posición de un elemento para transmitir su uso. La navegación, por ejemplo, suele estar en la parte superior de la página para los sitios web convencionales. Para los dispositivos móviles, una navegación fija en la parte inferior de la ventana gráfica también es común.

Iconos en la parte inferior de Instagram


Facilita la escritura con diseños de teclado personalizados


Una gran molestia con los dispositivos de pantalla táctil es escribir en los teclados en pantalla. Podemos hacer esto un poco más fácil proporcionando una distribución de teclado personalizada que sea específica para el tipo de entrada requerida.

Por ejemplo, si se requiere una entrada numérica, podemos usar una distribución de teclado de solo número especificando type=”number”

Proporcionar un tamaño y especiado razonables


En los dispositivos de pantalla táctil, el puntero es el dedo del usuario que, por supuesto, va a ser mucho menos preciso que un mouse. Por lo tanto, el área en la que un usuario puede tocar para activar un elemento interactivo debe ser lo suficientemente grande como para acomodar diferentes tamaños de dedos.

De acuerdo con la directriz 2.5.5 , los elementos procesables generalmente deben tener un tamaño de al menos 44px por 44px

Proporcionar alternativas a la escritura


Otra forma de manejar la molestia de escribir en un dispositivo de pantalla táctil es reducir la cantidad de escritura que el usuario debe hacer.

En general, en los dispositivos móviles, es más fácil trabajar con entradas como casillas de verificación, radios.

martes, 12 de febrero de 2019

Teodoro García nos invitó a ir a ¿colom?



Lo que escribo es realmente cierto y se puede verificar en la web del PP. Teodoro García Egea nos invita a ir a colom ,lo único que no se si a la isla, al mirador de colom. La verdad estoy en un sin vivir en mí.

fotograma del vidéo de Teodoro Garcia Egea invitandote a colom

Bueno a explicación es sencilla, ¿para qué molestarse en hacer un buen subtitulado?, ¡automático y punto ¡total son cuatro “tontitos”  a que si Celia Villalobos lo que los miran. Es más, para hacerlo bien la página de discapacidad y dependencia ponemos el video sin subtitular, para chulos nosotros.

Fotograma del vidéo de mesa discapacidad y dependecia de la web del pp

Viendo estos errores ¿Pablo Casado quiere que España sea Silicon Valley? Con todos los respetos zapatero a tus zapatos, las empresas de la bahía de San Francisco se toman más en serio la accesibilidad que el PP, podría comenzar en adaptar su web a las pautas WCAG 2.1 y luego dar clases.

nous ™ método único de acceso que se controla mediante el parpadeo .

hardware nous ™ que es una cinta con sensores y auricular


nous ™ es un hardware y software . El hardware es un auricular suave que aloja los sensores que miden sus parpadeos. Estos sensores miden las señales eléctricas del movimiento del ojo, llamadas electrooculografía, el auricular mide las señales EOG que se producen cuando una persona parpadea.




lunes, 11 de febrero de 2019

Ryanair low cost hasta en su web

No descubro nada si digo que Ryanair es una compañía de viaje low cost más usadas del mundo cada día 1.5 millones de personas visitan su página. Cada día viajan con Ryanair 350 mil personas. Es decir, casi 128 millones de pasajeros al año. Está dirigida por un tipo peculiar, Michael O’Leary, el cual tuvo que salir corriendo hace unos años del aeropuerto de Bilbao al posar mofándose de los trabajadores de Spanair.

Michael O’Leary vestido de bufon con los colores de la aerolinea


Esta compañía saca benéficio de todo, te toca imprimir tu billete, te cobran por todo y porque han parado pero te querían cobrar por ser gordo y para colmo llevarte de pie el viaje, bueno por recortar recorta hasta en la accesibilidad de su web, supongo que la etiqueta <label> del formulario se preguntarán aún para que sirve o aún no saben que la etiqueta Placeholder no esta nada pero nada recomendada.

Formulario para acceder a Ryanair



No merece la pena continuar analizando la accesibilidad de su web porque crear enlaces con un texto #flyKRK es suficiente.

enlace con el texto #fliKRK



En una encuesta que se realizó en reino unido alrededor del 70% de los encuestados aseguró que no repetiría la experiencia con Ryanair, aunque ofreciese el precio más barato. O´Leary sonrió: sabe que volverán en cuanto pise el acelerador de los descuentos: aunque su web no cumpla con la ley.

Verne, ayuda para personas con dislexia desde Google Chrome

Extensión Verne


Verne es una extensión para Chrome que se basa en las investigaciones de Luz Rello y Ricardo Baeza-Yates, estudiosos e investigadores en el área de la dislexia a su vez su funcionamiento se fundamenta en los requerimientos proporcionados por la Asociación internacional de dislexia y la Asociación británica de usuarios disléxicos, representa una verdadera ayuda para quienes padecen de este tipo de limitación. Con la instalación de Verne, las personas con dislexia y discapacidad visual pueden percibir la información de una manera mucho más sencilla. Para lograrlo, la aplicación se encarga de aplicar ajustes a ciertas características de las fuentes usadas, a fin de hacerlas mucho más legibles e identificables.

jueves, 7 de febrero de 2019

¿Qué es UX por qué es tan importante y algunas pautas a seguir?

Chico con discapacidad usando una tablet


La experiencia del usuario (UX) cubre la experiencia general de una persona que usa un producto. El diseño UX se enfoca en ofrecer una experiencia intuitiva y accesible que proporciona facilidad de uso. La frase "diseño de experiencia de usuario" fue acuñada por Donald Norman mientras era vicepresidente del grupo de tecnología avanzada en Apple en los años 90. Norman también escribió el libro más vendido " Design of Everyday Things " y es cofundador y consultor del grupo Norman Nielsen, los líderes en experiencia de usuario basada en la investigación.
Se acabaron los días en que una empresa o negocio podía permitirse ignorar o subestimar el valor de la experiencia del usuario de los servicios que ofrecen o los productos que diseñan. Hoy el diseño UX forma parte integral de una estrategia de negocios.

La accesibilidad permite a los usuarios de todas las capacidades comprender, usar y disfrutar de la web ten presente estas pautas.

Enlaces significativos
Esto ayudaría a los usuarios con discapacidades motoras, limitaciones cognitivas o discapacidades visuales, ayudándoles a evitar pulsaciones innecesarias para visitar un contenido que no sea relevante para ellos.

Navegación consistente
El uso consistente de componentes con la misma funcionalidad ayuda a las personas a identificar componentes en diferentes páginas con la funcionalidad deseada. Las personas con dificultades para leer textos se benefician mucho de esto. Mantener las etiquetas consistentes también ayuda a lograr una experiencia más predecible.

Uso del color
Esta pauta es útil para usuarios con visión parcial o visión de color limitada, ceguera al color y para usuarios que usan pantallas de visualización de solo texto, color limitado o monocromo.

Navegación consistente
Esta pauta es útil para usuarios con limitaciones cognitivas, baja visión y discapacidades intelectuales ya que es más fácil predecir dónde pueden encontrar cosas en cada página.
Interacciones
Esto puede ayudar a los usuarios con baja visión o discapacidades cognitivas: pueden tener el tiempo adecuado para percibir el contenido adicional que aparece en la pantalla o el enfoque y para ver el contenido de activación con menos distracción.

Alternativa al movimiento del dispositivo
Esto ayuda a los usuarios que no pueden realizar movimientos particulares (como inclinar, sacudir o hacer gestos) porque el dispositivo puede estar montado o los usuarios pueden ser físicamente incapaces de realizar el movimiento necesario. Un beneficio general podría estar en situaciones donde los usuarios no pueden sostener y mover el dispositivo porque sus manos están ocupadas con alguna otra actividad.

Gestos de puntero complejos
Los usuarios con discapacidades cognitivas o de aprendizaje o que no pueden realizar gestos complejos, tendrán medios alternativos para operar el contenido.

Atajos de teclado
Esto mejora la facilidad de uso para usuarios de solo teclado. Sin embargo, los usuarios de voz o solo los usuarios de teclado con problemas de destreza son propensos a golpear las teclas accidentalmente, por lo que se debe proporcionar un mecanismo para desactivar los accesos directos.

Orden de tabulación lógica
Un orden de enfoque lógico ayuda a los usuarios con discapacidades de movilidad, los usuarios con discapacidades que dificultan la lectura, los usuarios con discapacidades visuales. Una secuencia significativa ayuda a los usuarios que dependen de las tecnologías de asistencia que leen el contenido

Tamaño del botón
Tienes que Apple tiene unas medidas y Android otras la accesibilidad mínima es de 9mm de alto por 9mm de ancho, vale PARA CUALQUIER DISPOSITIVO

Lineal y consistente.
Esto es útil para usuarios de lectores de pantalla, usuarios con baja visión o usuarios en el espectro autista. Mantener el contenido claro y corto ayuda a los usuarios con dislexia.
Use el contraste de color adecuado
Ayuda a las personas con baja visión que a menudo tienen dificultades para leer textos o percibir gráficos que no tienen suficiente contraste.

Tipografía
Esto es útil para personas con baja visión, dislexia: el mayor espacio entre líneas, palabras y letras ayuda a leer el texto. El espacio en blanco entre bloques de texto puede ayudar a las personas con discapacidades cognitivas a discernir las secciones y llamar a los cuadros.

Elementos de audio o video accesibles
La tecnología de asistencia puede leer alternativas de texto en voz alta, presentarlas visualmente o convertirlas en braille. Las personas sordas o con problemas de audición pueden leer la presentación del texto o pueden acceder a la información auditiva mediante subtítulos.

Deutsche Bank el banco de la inaccesibilidad web

icono de Deutsche Bank



Cómo buen banco dirá ¿y eso que es? Nosotros nos centramos en que tu nos pagues la hipoteca y nosotros de cumplir la ley, eso para otro día. No solo tienen obligación en España es que Europa ya les pide que se pongan al día, he entrado en las dos url una para web la web Española  y otra para ver la de la compañía  entiendo y es lógico que la Española sea peor, teniendo a OADIS cómo la oficina encargada de tutelar por la accesibilidad, esa oficina que te escribe y te dice- eres malo pero por esta vez te lo perdono- a ver si cierran sus oficinas y dejas en la calle a sus 2400 empleados.

Imagen de una bailarina usada en el carrusel con el texto descubre más

Supongo que se dirán ¿Por qué somos inaccesibles?, yo solo voy a decir uno de los muchos fallos que he visto, el carrusel, esa serie de imágenes que hasta Google desaprueba, es una serie de imágenes que cómo texto alternativo usan unos textos nada explicativos de donde dirigen o del contenido de la imagen, supongo que poner valor del tiempo les parece suficiente, cuando la imagen es de una bailarina con un enlace que pone descubre más. Muchas veces he mencionado que un buen texto alternativo tiene que ser explicativo y puedes incluir hasta 140 caracteres, pero eso les importa poco lo que importa es el dinero la gente que se las busque.

código fuente de la imagen de la bailarina, ubicada en el navegador


Eso referente a la web Española pero la web de la empresa madre es para llorar, supongo que en Alemania  no existén personas mayores, ni con discapacidad auditiva porque uno no está ni subtitulado y el otro está subtitulado usando la inteligencia artificial de YouTube, eso si no les pidas transcripción que eso tiene que ser tecnología y características de otro universo.


Supongo que dirán -el subtitulado no está en las pautas WCAG 2.1- es cierto, pero si el color y el contraste de la fuente y sus iconos de redes sociales no cumplen.

Analisis de color y contraste realizado con CCA con pautas WCAG2.1

Supongo que no les importa estar fuera de la ley en materia de accesibilidad web pero que a ti no se te ocurra pasarte una mensualidad de tu hipoteca o crédito que te caerá todos sus servicios jurídicos.

miércoles, 6 de febrero de 2019

Android Accessibility: Live Transcribe

Icono de Live Transcribe

Live Transcribe , es un servicio gratuito para Android que hace que las conversaciones del mundo real sean más accesibles al llevar el poder de los subtítulos automáticos al uso diario.



Transcripción instantánea es un nuevo servicio de accesibilidad creado por Google para personas sordas o con discapacidad auditiva. Gracias a la tecnología vanguardista de reconocimiento automático de voz de Google, Transcripción instantánea muestra en tu pantalla una transcripción en tiempo real de lo que dicen otras personas a tu alrededor para que puedas participar en cualquier conversación. Si lo necesitas, también puedes escribir tus respuesta en la pantalla.



martes, 5 de febrero de 2019

Usando la inteligencia artificial para generar texto alternativo

Escultura de un hombre señalando un campo de batalla


Los desarrolladores web y los editores de contenido a menudo olvidan o ignoran una de las partes más importantes de hacer que un sitio web sea accesible y tenga un mejor rendimiento SEO: Ya sabes, ese atributo de imagen aparentemente pequeño que describe una imagen, el texto alternativo.
Si son 5-10 imágenes es factible. Pero ¿y si estamos hablando de cientos o miles de imágenes? ¿Tienes los recursos para eso?
A menudo se pasa por alto durante el desarrollo web, el atributo alt es una pequeña porción de código HTML que describe una imagen que aparece en una página. Es tan discreto que puede parecer que no tiene ningún impacto en el usuario, pero tiene usos muy importantes:

Para lectores de pantalla: Imagine una página con muchas imágenes y ninguna contiene texto alternativo. Un usuario que navega utilizando un lector de pantalla solo oirá la palabra "imagen" y eso no será muy útil.Incluir alt permite que los lectores de pantalla ayuden a los discapacitados visuales a "ver" lo que está allí y tener una mejor comprensión del contenido de la página.

Mostrar texto si una imagen no se carga: la World Wide Web parece infalible y, como en la ciudad de Madrid, nunca duerme, pero las conexiones inestables y defectuosas son reales y, si eso sucede, las imágenes no se cargan correctamente y el texto alternativo es una garantía, ya que se muestra en la página en lugar de donde se encuentra la imagen.

SEO: el texto alternativo en las imágenes también contribuye al rendimiento SEO. Aunque no ayuda exactamente a que un sitio o una página se dispare a la cima de los resultados de búsqueda, es un factor a tener en cuenta para el rendimiento de SEO.

¡ Hay soluciones disponibles!


Compañías como Google, IBM y Microsoft tienen sus propias API disponibles públicamente para que los desarrolladores puedan aprovechar esas capacidades y usarlas para identificar las imágenes y el contenido en ellas.

Hay desarrolladores que ya han utilizado estos servicios y han creado sus propios complementos para generar texto alternativo. Un ejemplo es el generador de Sarah Drasner, que demuestra cómo la API de visión del equipo de Azure se puede usar para crear texto alternativo para cualquier imagen a través de la carga o la URL

También esta el texto alternativo automático realizado por Jacob Peattie, que es un complemento de WordPress que usa la misma API de visión del equipo. (aún no está en castellano).

Tiene que tener en cuenta que estos servicios no son 100% precisos. una descripción que no está en absoluto alineada con el tema. Pero, estas plataformas están aprendiendo y mejorando constantemente. Después de todo, Roma no fue construida en un día.

lunes, 4 de febrero de 2019

Configuración móvil Android para personas mayores

persona mayor ayudada para configurar un smatphone


Los teléfonos móviles simples han perdido su protagonismo, y aunque a día de hoy siguen usándose (todavía hay algún Nokia con 2 rayas de batería), los smartphones los han desplazado. Hasta tal punto que los encontramos en todos los parámetros de edad, desde los usuarios más jóvenes hasta los de edad más avanzada, y es en este último segmento donde suelen surgir problemas a la hora de interactuar con los móviles. Tal vez por ser demasiado complejos o por otros inconvenientes, como el tamaño del texto.

La personalización que podamos aplicar sobre un teléfono Android para adaptarlo a personas mayores puede llegar enormemente simplificada por el propio software instalado en el teléfono. Hablamos de marcas que, en determinados modelos.
Entre los fabricantes que cuentan con modo fácil podemos encontrar a Samsung, a LG, a HTC y a otros más, aunque no todos cuentan con él en sus configuraciones.

Ajustes en el apartado sonoro y otro en el apartado visual.

Mejoras visuales y sonoras, son imprescinbles en este tipo de configuraciones
El primero pasará por acceder a los Ajustes del teléfono y dirigirnos al apartado de sonido, que según la marca del teléfono que tengamos entre puede recibir un nombre u otro, pero que suele ser fácilmente reconocible. Una vez dentro, llevaremos todos los volúmenes al máximo, desde el de llamadas hasta el de la alarma. Además de subir el volumen, activaremos la vibración del teléfono para las llamadas y también para otro tipo de acciones, como las táctiles. Que se escuche bien y que se sepa que se está haciendo algo con el teléfono. Es clave.
De forma simultánea al ajuste de los sonidos, es recomendable aumentar el tamaño de la letra del dispositivo. Aquí ya no dependemos de la marca pues encontramos este ajuste en las opciones de accesibilidad de Android. Simplemente hemos de acudir a Ajustes > Accesibilidad > Tamaño de la fuente. Si no es esta ruta, será una muy parecida, tal vez teniendo que acceder a Fuente o Tipo de letra para encontrar la última opción. Elegimos uno que sea fácil de leer, si es con el asesoramiento de quien vaya a usar el teléfono, mejor, y lo aplicamos. Ahora todo el teléfono será más legible y podrá escucharse sin demasiados problemas.

Apps que podemos encontrar sin problemas en Google Play y que nos ayudarán a configurar ese teléfono Android para una persona mayor.


Wiser

Si nuestro teléfono no dispone de un modo simple o sencillo, siempre podemos recurrir a Wiser, un launcher (claramente es el escritorio del móvil, donde puedes decidir que hacer) que reemplaza al actual de nuestro teléfono y lo convierte en un modo sencillo, sin que tengamos que hacer nada más.

Necta Launcher

Otro escritorio cómo Wiser simplificado que podemos encontrar en Google Play y que va un poco más allá, pues incluye algunas apps incrustadas para que la interfaz sea más coherente. Si lo instalamos y activamos nos encontraremos con un marcador telefónico personalizado, un lector de mensajes SMS e incluso una opción para enviar la ubicación por SMS a quien queramos o realizar una llamada de auxilio.

Large Launcher

El último escritorio personalizado que te recomiendo para personalizar un Android para personas mayores. Como su propio nombre sugiere, Large Launcher hará que toda la interfaz esté compuesta por grandes iconos y textos de fácil lectura. Si lo deseamos, podemos cambiar el tamaño entre dos opciones, y también nos encontramos con algunos temas para personalizar la apariencia. El inconveniente es que cuenta con micro pagos para eliminar la publicidad y ampliar las opciones, y pueden pulsarse por error. Pero si el diseño nos gusta, podemos realizar estos pagos, no muy elevados, recompensar al desarrollador y dejar el teléfono configurado para un uso muy sencillo.

Big Buttons

Un teclado de grandes dimensiones, primero lo descargas lo configuras a tus necesidades y para aplicar los cambios lo tienes que reiniciar y en ajustes teclado elegir el icono BB

teclado de smartphone aumentado


Lupa

Lupa, podemos usar la cámara del teléfono para leer textos en papel, señales o carteles. Podremos congelar la imagen cuando queramos para leer con detenimiento, e incluso guardar para más adelante si queremos consultar el texto con más calma. Una herramienta muy útil que puede usarse en más ocasiones de las que consideras.

Volumen Booster

ideal para llevar el sonido del teléfono a otra dimensión, Ideal para aquellas personas mayores que ya no escuchan tan bien como cuando eran jóvenes. Bastará con instalarla que todos los sonidos del teléfono se amplifiquen de forma automática, desde las notificaciones hasta el tono de la llamada o de la alarma. La configuración es sencilla

Repsol, la accesibilidad no solo es el texto alternativo

logotipo de Repsol


Yo solo digo y pongo lo que pone su web. en su pagina sobre accesibilidad.

Tecnología aplicada:

Cumplimiento de las normas de accesibilidad del WCAG (Web Content Accessibility Guidelines) del W3C (World Wide Web Consortium), en su nivel intermedio (AA). Pautas de Contenido Accesible en Web 1.0. Actualmente se encuentra en proceso de certificación oficial de los niveles de accesibilidad.

Con eso ya dicen todo 1.0, por eso no se preocupa del contraste del color, los documentos PDF, bueno por no preocuparse no se preocupan del texto alternativo en redes sociales, ¿para qué, somos Repsol? Las pautas 1.0 yo las denomino las pues, si un contenido esta mal pues busca uno que te venga mejor, que un contenido tiene Flash pues busca uno sin Flash.

Analisis negativo con la herramienta colour contrast analyser


Esto funcionaba en 2004 pero ya estamos en febrero del 2019 y no han evolucionado, total nadie les sanciona consecuentemente, la gente que espera que OADIS funcione que esperen sentados, ellos avisan, pero no sancionan, es cómo el padre que regaña, pero solo queda en eso una regañina.


Esta genial que se preocuparán de poner texto alternativo en las imágenes (cada uno es libre de decir si adecuado el contenido) pero yo creó que con 140 caracteres se puede poner más que plataforma petrolera.
Ami lo que me importa es color en las 1.0 no se detallaba con precisión, pero en las 2.0 y 2.1 son más exactos, pero cómo aún se basa en las 1.0.

Fata del texto alternativo en figuras de los PDF


Cómo he comentado antes el poner texto alternativo en las imágenes de su CMS está bien, pero porque no en sus PDF o en sus redes sociales, ¡son Repsol ¡seguro que tienen una planta de despachos con gente mirando Google Analytics y marketing pensando cómo llegar mejor a la población y explicarles que tu eres un empleado más o ¿no te llenas tu él deposito del coche?,
Ya que te pidén modernidad también es el momento de pedirles que se adapten a la legislación, porque ellos te piden que les pages por sus productos es hora que tu les pidas que cumplan con los derechos de los usuarios.

Falta del texto alternativo en una imagen de Twitter

Pa11y y sus herramientas de código abierto para la accesibilidad web

código fuente HTML5 para incrustar herramientas Pa11y


Gama de herramientas de código abierto y gratuitas para ayudar a los diseñadores y desarrolladores a hacer que las páginas web sean más accesibles:

Pa11y CI
Una herramienta de línea de comandos que recorre una lista de páginas web y resalta los problemas de accesibilidad.

Pa11y
Interfaz de comandos que resalta cualquier problema de accesibilidad que encuentre. Útil para cuando desea ejecutar una prueba.

Tablero de Pa11y
Un panel web que prueba automáticamente las páginas web para detectar problemas de accesibilidad. Los gráficos te ayudan a rastrear mejoras y regresiones a lo largo del tiempo.

Pa11y Webservice
El servicio web basado en JSON

Koa11y
Es una aplicación de escritorio para Windows, OSX y Ubuntu que le permite comenzar a usar Pa11y con unos pocos clics. ¡Excelente si no eres un desarrollador y solo necesitas una forma sencilla de usar Pa11y desde tu ordenador sin preocuparte por el código fuente y la configuración complicada!

viernes, 1 de febrero de 2019

No cometas estos errores de diseño UX

""


¿Por qué algunos sitios web ganan constantemente en popularidad y otros no atraen a los usuarios a pesar de gastar enormes cantidades de tiempo y dinero? La razón más importante es la forma en que están configurados para interactuar con los visitantes.

Nunca te olvides la primera impresión.
 
Dicen que solo tienes una oportunidad de causar una buena primera impresión. Imagina que estás organizando una fiesta para unos clientes y los invitas a un buen restaurante para cenar y celebrar el éxito o discutir las posibilidades de cooperación. Independientemente de si son sus clientes actuales o potenciales inversionistas, le importa hacer una buena primera impresión. Lo mismo ocurre con los sitios web: solo tiene unos segundos para convencer a los visitantes de que vale la pena tomarse el tiempo para conocer más sobre una empresa, un producto o un servicio. Al diseñar un sitio web, vale la pena recordar que los usuarios tienen una fuerte tendencia a escanear el sitio de acuerdo con un patrón de "F". Esto fue confirmado por el estudio de Nielsen Norman Group, que examinó el movimiento de los globos oculares mientras exploraba docenas de páginas.

diseño en F


Piensa en los visitantes discapacitados.

Con un poco de esfuerzo, puede hacer que su sitio sea más accesible para las personas con discapacidades. Orientar a las personas con discapacidades e incluso utilizar su ayuda para diseñar un sitio web puede tener muchos beneficios para su empresa. Tom Pokinko, Director de Investigación de Open Inclusions, dice: el diseño pensado en las personas discapacitadas y personas mayores ayuda a crear mejores productos y servicios para todos, lo que lleva a una mejor experiencia de marca en general. Por ejemplo, los sitios web y los correos electrónicos con fuentes pequeñas o de bajo contraste son difíciles de leer.

No usar tecnicismos o demasiadas palabras

Usted ha visto muchas páginas que sufren un exceso de descripciones y vocabulario especializado. Muy a menudo, las marcas quieren poner la mayor cantidad de información posible en el sitio web, pero aún no llegan a los clientes con su mensaje claro. En las artes gráficas, hay una tendencia de menos es más y ya se puede denominar estándar porque su popularidad está en constante crecimiento, especialmente entre los especialistas en UX.

Olvidar las migas de pan.

Si bien las tecnologías que respaldan nuestros productos y servicios deben ser avanzadas, los sitios web y las aplicaciones móviles deben ser lo más simples e intuitivos posible. Esto no sucederá si te olvidas de las migas de pan.

Basado en la ubicación, mostrando dónde estamos actualmente en el sitio. Usando la barra de navegación, los clientes pueden cambiar fácilmente entre categorías superiores e inferiores.

Hacer que los clientes tengan que pensar qué hacer a continuación

"¿Qué tengo que hacer clic ahora?" Es la peor pregunta que un cliente puede hacerse en nuestro sitio web. Significa que el cliente quiere saber más, pero el sitio web no lo hace fácil de hacer. Recuerda que un buen sitio web es fácil de navegar. Decida qué elementos de su sitio son los más importantes y distíngalos con color, contraste, tamaño o posición en la página. Si no lo hace y hay demasiadas opciones en el sitio, el cliente no sabrá qué hacer.

Cuando sentimos que no tenemos otra opción, nos sentimos controlados y frustrados, pero ante demasiadas opciones, nuestra satisfacción también disminuye. Esto es importante, porque los estudios muestran que la parálisis de elección provoca una caída en las ventas.

Preguntar y preguntar 

¿Conoces a alguien a quien le guste rellenar formularios? Probablemente no, porque a nadie le gustan. Si tiene que usarlos, recuerde agregarlos en los momentos en que le dé algo al usuario a cambio. Siempre agradezca a los usuarios por completar formularios. Si es posible, ponga su agradecimiento en forma de algún tipo de recompensa. Recuerda, a todos les gusta conseguir cosas

 No guardar lo que se puede guardar fácilmente.

Debe saber que hay algo que irrita más a los clientes que rellenar formularios: es un formulario sin guardado automático. Imagine que está comprando un billete de avión y el formulario de compra consta de cuatro pasos. Cuando termina la compra, se da cuenta de que ha ingresado un número incorrecto. Hace clic en el paso atrás para cambiar el dato incorrecto y se percata rápidamente que toda la información que ya ha completado se ha ido y que debe completar todo desde el principio. Ahora todo toma el doble de tiempo y estás el doble de frustrado.