1. Accesibilidad
  2. Causas de accesibilidad web limitada
  3. Leyes
  4. Ventajas accesibilidad
  5. Web Content Accessibility Guidelines(WCAG)
  6. Usabilidad
  7. Tipos de usuarios web
  8. Hacer un estudio de usabilidad
  9. Herramientas online para usabilidad
  10. Herramientas para aumentar la velocidad de nuestro site
  11. Clasificación de las web atendiendo a su finalidad
  12. CRO
  13. Showcase
  14. Accesibilidad

Accesibilidad web

Tiene como objetivo lograr que las páginas web sean utilizables por el máximo número de personas, independientemente de sus conocimientos o capacidades personales y de las características técnicas del equipo utilizado para acceder a la web.

Steven Pemberton, figura importante en el ámbito del desarrollo web:
"Si tu sitio no es accesible, tendrás menos visitas. Fin de la historia."

Causas de accesibilidad web limitada

Leyes

Fijan el nivel de adecuación obligatorio y equivalente a las WCAG 2.0 para:

Abordan temas como la certificación de los portales; las sanciones por incumplimiento de las obligaciones de accesibilidad.

Ventajas de la accesibilidad web

Web Content Accessibility Guidelines(WCAG)

Pautas

Estas pautas no sólo benefician a las personas con discapacidad, sino también a todos aquellos usuarios que en un momento determinado tengan dificultades para acceder a la web ya sea a través de teléfonos móviles, navegadores web, etc.

Links

Estructura de la WCAG 2.0

Validadores automáticos de accesibilidad

9 Recomendaciones para hacer un sitio web accesible

  1. Seguir los estándares del W3C. Logotipos de validación: http://www.w3.org/QA/Tools/Icons, http://www.tawdis.net/info/logotipoTaw/?lang=es
  2. Todas las imágenes deben tener un texto alternativo (atributo alt) que será el que visualicen los navegadores que no muestren imágenes (lectores de pantalla, ordenadores con una conexión lenta, navegadores de texto). Dicho atributo debe contener la descripción de la imagen. Enlace a plugin de firefox para deshabilitar las imágenes: https://addons.mozilla.org/en-US/firefox/addon/image-block/
  3. Los enlaces tienen que tener un nombre significativo del lugar al que apuntan. Este texto debe ser comprensible fuera de su contexto y, por tanto, no sirve el tan usado "pulsa aquí".
  4. Para organizar la información dentro de la página web se deberán usar los h1,h2...
  5. Deben usarse tipologías de letras de fácil lectura.
  6. Debe evitarse en lo posible el uso de tablas para maquetar, a menos que sean imprescindibles.
  7. Siempre que sea posible deben usarse hojas de estilo (CSS) para separar el contenido de la Presentación.
  8. En caso de añadir contenido multimedia (sonido, animaciones y/o vídeo) deberán proporcionarse subtítulos (para el sonido) o descripción de las animaciones y los vídeos.
  9. En caso de usar marcos, deberá usarse una etiqueta <noframe> que incorpore los enlaces necesarios para la navegación. Se deberá identificar perfectamente cada uno de los marcos

USABILIDAD

Tiene como objetivo lograr una navegación fácil, cómoda e intuitiva.

Jakob Nielsen
En Internet, la usabilidad es una condición necesaria para sobrevivir.

  • Si un usuario se pierde en una página web, la abandona.
  • Si le cuesta leer la información, se va.
  • Si no encuentra con facilidad lo que busca, salta a otra página.
  • Si le resulta complicado rellenar un formulario, lo deja en blanco.

El diseño visual es fundamental para comunicar.

Sliders

Suelen ocupar más de la mitad de la página y son poco usables. Si el usuario lee lento (a empezado a leer el slider tarde, tiene problemas de visión, es de otro país...) puede no darle tiempo a leer la información del slider

el usuario no quiere que sucedan cosas en una página que el no ha accionado. en este sentido, un slider es molesto.

Enlace a un estudio de Nielsen Norman Group en el que se demuestra la inutilidad de un slider sobre lavadoras colocado en la página de Siemens,

Tipos de Usuarios Web

  • Creadores. Son aquellos usuarios que interaccionan activamente con la web mediante la publicación de Contenidos.
  • Críticos. Usuarios que califican y escriben reseñas de forma puntual.
  • Coleccionistas. Son aquellos usuarios que acceden frecuentemente a información actualizada (RSS).
  • Socializadores. Son aquellos que utilizan las redes sociales.
  • Espectadores. Son aquellos que se limitan a navegar por los contenidos publicados por otros.
  • Inactivos. Son aquellos que no participan de ninguna de las anteriores actividades.

Eye Tracking

Ordenador portatil eye tracking

http://eyequant.com/ → Mediante inteligencia artificial simula los resultados que obtendríamos en un test de eye tracking.

Hacer un estudio de usabilidad

  1. Reclutar a los participantes

    El número mínimo de participantes es 5 (no involucrados en el desarrollo del sitio web). Los participantes deberían tener perfiles y características acordes con la audiencia potencial.

  2. Local y materiales

    Disponer de un espacio donde nadie interfiera en la realización de la prueba.

  3. Planificación de la prueba

    Elabore un guión en el que se describa: qué le va a decir a cada participante; que le va a pedir que haga; cómo va a hacerlo; cuánto tiempo estima necesario para cada paso en la prueba.

  4. Antes de empezar
    • Comience explicándole que el objetivo de la prueba es evaluar la calidad de uso del sitio.
    • Aproveche para extraer más información sobre el usuario, sus preferencias, experiencia y conocimientos.
    • ¿Uso de Internet? ¿Para qué lo utiliza?¿Qué sitios web suele visitar?
    • Al usuario se le debe instar a que durante la prueba piense en voz alta.
    • La función del evaluador debe observar silenciosamente, sin ayudar al usuario en la consecución de tareas.
  5. Comienzo de la prueba
    • El evaluador abre el navegador con el sitio web cargado.
    • Le indicamos al usuario que no haga nada, que únicamente observe el interfaz y diga qué cree que está viendo, de qué cree trata el sitio web, para qué cree que sirve, y todas aquellas impresiones que tenga.

    Analizar la facilidad de uso.
    Para ello se le encomienda al usuario la realización de tareas concretas, como:

    • Buscar cierta información.
    • Contactar con el autor.
    • Descargar ciertos contenidos.
    • Elaboración de un informe
      Todo lo que se haya observado y anotado durante la prueba, debe ser resumido y sintetizado en un informe final qué incluirá los problemas de usabilidad que tiene el sitio web y algunas posibles soluciones

CRO (optimización del ratio de conversión)

Proceso

proceso cro

Pilares

pilares cro

Se basa en los principios de:

Comunidad

comunidad cro

Inmediatez

inmediatez cro inmediatez cro

Autoridad

influencers sociales

Confianza

confianza cro logos confianza

Patrones de comportamiento

patrones de comportamiento

Clasificación de las webs atendiendo a su finalidad

Landing page

Clasificación

No comercial

Es una página de entrada a nuestro site. El usuario puede haber accedido a ella por varios caminos:

  • Escribiendo el dominio en el buscador, en cuyo caso, la landing será la home.
  • Pulsando sobre un banner de publicidad.
  • Si escribiste un post y lo compartiste en las redes sociales, ese post, será la landing page.
  • etc.
Comercial

Las anteriores son páginas de entrada natural a nuestro site. Pero nosotros podemos crear una página específicamente diseñada para posicionar un vender un producto.

Podemos hacerlo de dos formas:

  • Conservando los enlaces y estructura de la web.
  • Quitando todo lo que sobra para centrarnos en el producto. Ni menus de opciones, ni últimas publicaciones, ni redes sociales... sólo el objetivo de la landing page. Todo lo demás son distracciones para el usuario y páginas de salida de su objetivo. La idea es que de una landing sólo se pueda salir de una forma: ejecutando el call to action (o pulsando el botón de retroceso). La única cosa que debe haber para interactuar debe ser el call to action. Además, desde el site principal tampoco debería haber enlaces para ir a esa landing page, pues perderían los menus de navegación. Para difundir esta página usaremos:
    • Redes sociales.
    • Email marketing.
landing pagelanding page

Características

  • Producto.. Debemos hacer más incapié en las ventajas que reporta el producto para el usuario en lugar de en las características del mismo. Si queremos vender un curso, nos centraremos en como este curso va a cambiar la vida del usuario en lucar de en las horas de formación que ofrecemos.
  • Objetivo, con su correspondiente Call to action (CTA). Si en vez de una landing page fuese un site compuesto de varias páginas, el CTA debe estar visible en todas.
    A menudo, el objetivo es que el usuario rellene un formulario, en cuyo caso, debemos tener en cuenta:
    • Debe ser fácil de entender y presentar las instrucciones de forma clara y concisa.
    • Indica educadamente los errores
    • Genera confianza
    • Un formulario con menos campos obtiene mayor número de conversiones. Esa es la idea, pero sin pasarse.
    • Es mejor que en la propia landing esté el formulario de contacto, en lugar de un enlace para acceder a él.
    • En ocasiones, dependiendo de la casuística, debería incorporarse un teléfono. Por ejemplo, una clínica de desintoxicación de drogodependencia. Es un asunto muy personal, y no es tan fácil que la gente introduzca sus datos en un formulario de contacto. También en el caso de reservar mesa para un restaurante, mucha gente no se fiará de que la reserva se haya hecho realmente bien a través del formulario de contacto.
    • El formulario de contacto es el único método que nos permitirá, mediante google analitics, obtener datos personales del cliete: desde dónde ha llegado a la página, dónde vive, cuando se ha conectado, sus gustos y aficiones, etc.



    Sus datos están seguros con nosotros

  • Imagen vendedora. Es la foto del producto o el servicio. También puede ser una foto que de algo que cree sensaciones positivas en el usuario. Es posible utilizar videos.
    1. Numerosos estudios han demostrado que las fotos con personas convencen mejor.
    2. Diversos estudios han demostrado que las fotos de productos que se pueden rotar 360º consiguen aumentar significativamente las conversiones.
    3. Debe evocar sensaciones positivas en el visitante.
    4. Deben tener una clara relación con el mensaje que se desea transmitir.
  • Beneficios. Descritos en base a puntos muy concretos, ya que, el usuario en Internet no lee grandes cuerpos de texto.
    • Trata de vender lo que vas a poder hacer con el producto. Si estás vendiendo un taladro, haz incapie en los pedazo agujeros que podrás hacer en la pared.
    • Los beneficios van enfocados a una audiencia concreta. Si escribes para todo el mundo, no conectarás con nadie.
    • Los visitantes no leen, escanean. Teenlo en cuenta a la hora de redactar de forma concisa y en puntos clave, los beneficios de tu producto
      • Beneficio 1
      • Beneficio 2
      • Beneficio 3
landing page landing page

Microsite

Es un mini-site con 3 o 5 páginas que se centra en promocionar un producto, servicio o evento concreto. Por tanto, su vida generalmente se extiende durante un periodo de tiempo limitado. Debe tener un enlace al site principal.

Tienen su propio dominio o subdominio.

Están focalizadas en un único producto, objetivo o CTA (call to action) concreto. Para ello sus keywords has sido trabajadas para indexar esa temática.

microsite

Web

Contiene todos los productos y servicios de la empresa. A lo largo de las páginas que la contienen pueden tener varios CTA, aunque idealmente deberían estar focalizadas en uno.

landing web microsite

Problemas de usabilidad

Las siguientes páginas han pagado por estar posicionadas en internet

Ley de Fitts

Demuestra que el tiempo necesario para alcanzar un objetivo visual con cualquier dispositivo apuntador manual depende del tamaño del objetivo y la distancia a la que se encuentre el puntero de él.

¿Dónde está el botón de compra?

ejemplo de página dónde no se encuentra nada ejemplo de página dónde el botón de compra se encuentra fácilmente

¿Dónde estoy?

página dónde el usuario no sabe dónde estoy

Enlaces rotos

un enlace patrocinado y roto pagina de error 404 de renault
icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?