SlideShare ist ein Scribd-Unternehmen logo
1 von 88
USABILIDAD, UX Y ACCESIBILIDAD:
QUÉ SON Y POR QUÉ DEBERÍAN PREOCUPARME

                               Jordi Sánchez
                           http://jordisan.net
                                    @jordisan
Usabilidad, UX y accesibilidad:
    qué son y por qué deberían preocuparme
     Presentación
     Algunas definiciones

     ¿Es rentable invertir en usabilidad?
     Casos concretos
     Cómo se consigue

     Accesibilidad (web) y sus beneficios
     Problemas de accesibilidad. Cómo ser accesibles.
     Evaluaciones de accesibilidad.

     En conclusión…
22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   2
PRESENTACIÓN




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   3
Jordi Sánchez

     Ingeniero en Informática
     Máster en Interacción Persona-Ordenador

     9 años en entidad financiera
     5 años en proyectos de usabilidad/accesibilidad
     Freelance

    Proyectos personales:
        o UCDmanager (Drupal) http://ucdmanager.net
        o Apps Windows 8
        o…
    http://jordisan.net @jordisan http://linkedin.com/in/jordisan
22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   4
ALGUNAS DEFINICIONES




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   5
Usabilidad, palabra “de moda”




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   6
Todos sabemos sufrimos lo que es




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   8
¿O es como la música de cámara?




    Les Luthiers – Entreteniciencia Familiar http://www.youtube.com/watch?v=9tS-OyggjCE

22/03/2013        usabilidad - UX - accesibilidad     Jordi Sánchez - @jordisan - http://jordisan.net   9
Una definición formal (ISO 9241-11)

     Usabilidad: El grado en que un producto puede ser
       utilizado por los usuarios para lograr sus propósitos con
       efectividad, eficiencia y satisfacción en un
       determinado contexto de uso.
        o Efectividad: ¿Pueden los usuarios hacer lo que quieren hacer?
        o Eficiencia: ¿Pueden hacerlo con poco esfuerzo/memoria/etc.?
        o Satisfacción: ¿Cuál es la percepción de los usuarios acerca del
          producto?
        o Contexto: ¿De qué situación estamos hablando?


        o Empezó a dársele más importancia a los dos primeros aspectos
             (los más fáciles de medir)


    International standards for HCI and usability: http://www.usabilitynet.org/tools/r_international.htm

22/03/2013         usabilidad - UX - accesibilidad         Jordi Sánchez - @jordisan - http://jordisan.net   10
Básicamente…

     Productos fáciles de usar
     “No me hagas pensar”




    Don’t make me think: http://www.sensible.com/buythebook.html

22/03/2013        usabilidad - UX - accesibilidad     Jordi Sánchez - @jordisan - http://jordisan.net   11
Y llegó la UX (User eXperience)

     ¡Tenemos que tener en cuenta la “experiencia del
      usuario”!
     ¿Diseñador de experiencias? ¡Suena cool!
     Entonces… ¿usabilidad y UX son lo mismo?
        Depende:
        o Si por “usabilidad” solo entendemos eficacia y eficiencia, y no
          tenemos en cuenta la satisfacción del usuario => NO
        o Si por “usabilidad” solo incluimos actividades de evaluación, y no
          de análisis o diseño => NO
        o (entre nosotros… SÍ)


     Lo importante es…
              Tener en cuenta la experiencia global del usuario
              Al final, una buena experiencia se consigue con aplicaciones usables
22/03/2013      usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   12
¿Y la accesibilidad (web)?

     Objetivo: que cualquiera tenga acceso a la web,
       independientemente de sus habilidades o situación.
        o No solo discapacitados; ya lo veremos.
     ¿Es lo mismo que usabilidad?
        No; es un requisito previo:
        o Accesible: “se puede llegar”
        o Usable: “se puede usar fácilmente”



     Cuando hablamos de usabilidad, solemos referirnos a
      usuarios/situaciones “normales” (si es que existe tal cosa)
     Cuando hablamos de accesibilidad, solemos referirnos
      a usuarios o situaciones “especiales” (¿para quién?)

22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   13
En resumen…

   Usabilidad
    Que sea fácil de usar


   UX (User eXperience)
    Que el usuario tenga una experiencia
    satisfactoria
    (suele conseguirse haciendo que sea usable)




   Accesibilidad
    Que el usuario pueda usarlo
    (nos solemos referir a situaciones “especiales”)



22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   14
¿ES RENTABLE INVERTIR EN USABILIDAD?




22/03/2013     usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   15
Ventajas de tener en cuenta la usabilidad

     Ahorro en costes de desarrollo.
        o Menos costes de formación.
        o Los problemas se detectan antes.
     Mejora la eficacia y eficiencia en las tareas.
        o Importante en aplicaciones internas e Intranets.
     Mejora las ventas.
        o Los clientes tienen menos problemas a la hora de comprar.
        o Menos clientes descontentos que abandonan.
        o Más clientes nuevos.
     Incrementa la satisfacción de los usuarios.
        o Menos problemas legales (reclamaciones).




22/03/2013    usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   16
Todo eso está muy bien, pero…




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   17
Algunos números generales

        o "The rule of thumb in many usability-aware organizations is that
             the cost-benefit ratio for usability is $1 : $10-$100. Once a
             system is in development, correcting a problem costs 10 times as
             much as fixing the same problem in design. If the system has
             been released, it costs 100 times as much relative to fixing in
             design." (Gilb, 1988)

        o "The magnitude of usability improvements is usually large. This is
             not a matter of increasing use by a few percent. It is common for
             usability efforts to result in a hundred percent or more increase
             in traffic or sales." (Nielsen, July 1999)




    The ROI of Usability http://www.upassoc.org/usability_resources/usability_in_the_real_world/roi_of_usability.html

22/03/2013         usabilidad - UX - accesibilidad       Jordi Sánchez - @jordisan - http://jordisan.net                18
Más números

        o "In Jared Spool's study of 15 large commercial sites, users could
             only find information 42% of the time even though they were
             taken to the correct home page before they were given the test
             tasks." (Nielsen, October 1998)

        o "IBM's Web presence has traditionally been made up of a difficult-
             to-navigate labyrinth of disparate subsites, but a redesign made it
             more cohesive and user-friendly. The company said in the month
             after the February 1999 re-launch that traffic to the Shop IBM
             online store increased 120 percent, and sales went up 400
             percent." (Battey, 1999)




    The ROI of Usability http://www.upassoc.org/usability_resources/usability_in_the_real_world/roi_of_usability.html

22/03/2013         usabilidad - UX - accesibilidad       Jordi Sánchez - @jordisan - http://jordisan.net                19
¿Y en la actualidad?

        o “Luckily, current usability ROI is so stupendously big (spend 10%
             to gain 83%) that it can decrease much more and still be a
             favorable proposition for business executives.” (Nielsen, 2008)


     Pero eso es en entornos ya maduros y con experiencia
       en temas de usabilidad:

        o “During the last decade, the share of project resources allocated
             to usability has held steady at around 10% in those enlightened
             companies that include usability in their design lifecycle.” (Nielsen,
             2008)




    Usability ROI Declining, But Still Strong http://www.useit.com/alertbox/roi.html

22/03/2013         usabilidad - UX - accesibilidad         Jordi Sánchez - @jordisan - http://jordisan.net   20
CASOS CONCRETOS




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   21
Portal de viajes:

        o Analítica web => Muchos usuarios que iniciaban el proceso de
          compra no completaban la transacción
        o Formulario de pago (reconstrucción):
              Name



              Company
                                                 Muchos usuarios particulares
                                                ponían el nombre de su banco…
              Address



                                                    … y la dirección de su banco


              "After we realised that we just went onto the site and deleted that field -
               overnight there was a step function [change], resulting in $12m of
               profit a year, simply by deleting a field.”

    Expedia on how one extra data field can cost $12m http://www.silicon.com/management/sales-and-
      marketing/2010/11/01/expedia-on-how-one-extra-data-field-can-cost-12m-39746554/

22/03/2013        usabilidad - UX - accesibilidad      Jordi Sánchez - @jordisan - http://jordisan.net   22
El botón de los 300 millones de dólares

        o En un popular sitio de comercio electrónico (¿BB?), los usuarios
             seleccionaban sus productos, y cuando deseaban confirmar la
             compra…
         Email Address

                                                         “¿Por qué tengo que registrarme? Sólo quiero comprar”
         Password

                                                                  “No recuerdo si ya me registré antes”

               Login          Register
                                                              “¿Qué dirección de correo electrónico puse?”
             Forgot Password



               Los usuarios nuevos guardarían sus datos para posteriores compras
               Los usuarios registrados no tendrían que volver a introducir sus datos
               Pero…


    The $300 Million Button http://www.uie.com/articles/three_hund_million_button

22/03/2013             usabilidad - UX - accesibilidad     Jordi Sánchez - @jordisan - http://jordisan.net       23
El botón de los 300 millones de dólares (y II)

        o 45% de los clientes se habían registrado múltiples veces
        o Hasta 160.000 peticiones de contraseña al día
               De ellos, el 75% no finalizaban su compra después.

     Solución:
         Email Address                                         Email Address                    You do not need to create an
                                                                                                account to make purchases on
                                                                                                our site. Simply click Continue
                                                                                                to proceed to checkout. To
         Password                                              Password                         make your future purchases
                                                                                                even faster, you can create an
                                                                                                account during checkout

               Login          Register                             Login                                            Continue

             Forgot Password                                    Forgot Password


               “The number of customers purchasing went up by 45%. The extra
                 purchases resulted in an extra $15 million the first month. For the
                 first year, the site saw an additional $300,000,000”

    The $300 Million Button http://www.uie.com/articles/three_hund_million_button

22/03/2013             usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net                 24
No solo en web…




    Ford to upgrade MyFord Touch in 250,000 vehicles after taking heat for glitches and design
      http://www.washingtonpost.com/business/technology/ford-to-upgrade-myford-touch-in-250000-vehicles-after-taking-heat-for-
      glitches-and-design/2011/11/06/gIQAY4MNtM_story.html

22/03/2013        usabilidad - UX - accesibilidad      Jordi Sánchez - @jordisan - http://jordisan.net                  26
¿CÓMO SE CONSIGUE?




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   27
Así, no




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   28
Una noticia buena y una mala


     La mala: no hay trucos mágicos

     La buena: no hay trucos mágicos




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   29
Evaluando la usabilidad

     Muchas veces hay pocos recursos, sólo para evaluar la
       usabilidad de algo ya desarrollado

     “Discount Usability”/”Guerrilla Usability” (Jakob Nielsen):
        Técnicas que ofrecen buenos resultados con pocos recursos:

        o Evaluación heurística (revisión de un experto)


        o Tests de usuario




    Guerrilla HCI: Using Discount Usability Engineering to Penetrate the Intimidation Barrier
      http://www.useit.com/papers/guerrilla_hci.html

22/03/2013         usabilidad - UX - accesibilidad        Jordi Sánchez - @jordisan - http://jordisan.net   30
Evaluación heurística

     Inspección sistemática de una interfaz por parte de
      expertos….
     … para comprobar si la interfaz cumple o no
      determinados principios de usabilidad (las
      “heurísticas”).

     Pasos:
         1.      Determinar objetivos y alcance de la evaluación.
         2.      Selección de las heurísticas a utilizar.
         3.      Evaluación y detección de problemas por parte de los
                 expertos.
         4.      Puesta en común. Informe y recomendaciones.

    Heuristic Evaluation http://www.useit.com/papers/heuristic/

22/03/2013         usabilidad - UX - accesibilidad        Jordi Sánchez - @jordisan - http://jordisan.net   31
Heurísticas de usabilidad de Nielsen (1)

    Visibility of system status
        The system should always keep users informed about what is going on, through appropriate feedback
        within reasonable time.

    Match between system and the real world
        The system should speak the users' language, with words, phrases and concepts familiar to the user,
        rather than system-oriented terms. Follow real-world conventions, making information appear in a
        natural and logical order.

    User control and freedom
        Users often choose system functions by mistake and will need a clearly marked "emergency exit" to
        leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

    Consistency and standards
        Users should not have to wonder whether different words, situations, or actions mean the same thing.
        Follow platform conventions.

    Error prevention
        Even better than good error messages is a careful design which prevents a problem from occurring in
        the first place. Either eliminate error-prone conditions or check for them and present users with a
        confirmation option before they commit to the action.

    http://www.nngroup.com/articles/ten-usability-heuristics/

22/03/2013         usabilidad - UX - accesibilidad         Jordi Sánchez - @jordisan - http://jordisan.net   32
Heurísticas de usabilidad de Nielsen (2)

    Recognition rather than recall
        Minimize the user's memory load by making objects, actions, and options visible. The user should not
        have to remember information from one part of the dialogue to another. Instructions for use of the
        system should be visible or easily retrievable whenever appropriate.

    Flexibility and efficiency of use
        Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such
        that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent
        actions.

    Aesthetic and minimalist design
        Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of
        information in a dialogue competes with the relevant units of information and diminishes their relative
        visibility.

    Help users recognize, diagnose, and recover from errors
        Error messages should be expressed in plain language (no codes), precisely indicate the problem, and
        constructively suggest a solution.

    Help and documentation
        Even though it is better if the system can be used without documentation, it may be necessary to
        provide help and documentation. Any such information should be easy to search, focused on the user's
        task, list concrete steps to be carried out, and not be too large.

22/03/2013       usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net           33
Ejemplos de heurísticas aplicadas (1)




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   34
Ejemplos de heurísticas aplicadas (2)




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   35
Test de usabilidad (“thinking aloud”):
    involucrando a los usuarios
     Una técnica evaluación: testeo con usuarios
        o Observar a usuarios (representativos) mientras realizan tareas
          típicas con la aplicación (lo que hacen, NO lo que opinan)
        o Hablan en voz alta sobre lo que están haciendo
        o No son necesarios muchos usuarios (típicamente 5)


     Pasos:
        1.     Planificar el test
        2.     Preparar tareas y material
        3.     Preparar lugar de la prueba
        4.     Reclutar usuarios
        5.     Realizar la prueba
        6.     Analizar los resultados y presentar informe
    Usability Testing http://www.usability.gov/methods/test_refine/learnusa/index.html

22/03/2013         usabilidad - UX - accesibilidad        Jordi Sánchez - @jordisan - http://jordisan.net   36
Ejemplo: usabilidad de Joomla!

     Ejemplo: usabilidad de Joomla!
        o Tarea: cambiar el aspecto de un sitio web recién instalado


     Infraestructura:
              Desde un simple ordenador y alguien tomando notas en papel (en un
               entorno tranquilo y cómodo)….
              … hasta un laboratorio de usabilidad con:
                •   Dos habitaciones (pruebas y observación)
                •   Cámaras de vídeo y micrófonos
                •   Grabación de la pantalla del usuario
                •   Espejos unidireccionales
                •   Eyetracker
                •   …
              La tecnología ayuda, pero NO es lo más importante

    ¿Es Joomla! Usable? http://www.slideshare.net/jordisan/es-joomla-usable-joomla-day-2010

22/03/2013          usabilidad - UX - accesibilidad    Jordi Sánchez - @jordisan - http://jordisan.net   37
“Haz fácil lo imposible”

     Cómo personas no expertas en usabilidad pueden
       hacer sus propias pruebas de usuario internas

     Un día al mes durante el desarrollo:
        o Dedicar una mañana haciendo
          pruebas con tres usuarios
        o Conseguir que haya observadores:
          desarrolladores, jefes, …
        o Decidir con observadores
          qué problemas son los prioritarios y
          qué cambios se van a hacer
          antes de la próxima ronda

    Haz fácil lo imposible (Anaya)
      http://www.anayamultimedia.es/cgigeneral/ficha.pl?id_sello_editorial_web=23&codigo_comercial=2315633#

22/03/2013        usabilidad - UX - accesibilidad     Jordi Sánchez - @jordisan - http://jordisan.net         38
Evaluar está bien;
    pero si esperamos demasiado…




    http://blogs.mentor.com/johnparry/blog/2010/07/01/sony-vaio-laptop-in-mass-recall/

22/03/2013         usabilidad - UX - accesibilidad       Jordi Sánchez - @jordisan - http://jordisan.net   39
¿Qué queremos evitar?
 Analista    Usuario (o no)




  Está
  claro
                                                                                            No es lo que necesito
                                                                                            No lo encuentro
                                                                                            No lo entiendo
                                                                                            En realidad …




 1. Requisitos                             2. Desarrollo                                       3. Entrega
22/03/2013       usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net         40
Mejor:
    teniéndola en cuenta desde el principio
        o Múltiples técnicas en todas las etapas.
              Evaluación de expertos; prototipado; casos de uso; …
              Internamente, o asesoramiento externo.




        o Si se hace durante todo el proceso, de modo iterativo:
             DCU (Diseño Centrado en el Usuario)
    UsabilityNet: Methods table http://usabilitynet.org/tools/methods.htm
    En busca del Diseño Centrado en el Usuario (DCU) http://www.nosolousabilidad.com/articulos/dcu.htm

22/03/2013        usabilidad - UX - accesibilidad      Jordi Sánchez - @jordisan - http://jordisan.net   41
Un paso más allá: DCU

     Diseño Centrado en el Usuario
        o Está orientado a los usuarios
          del producto, que participan durante
          todo el proceso.
        o A pesar de denominarse “diseño”, en
          realidad se aplica durante todas las
          fases del desarrollo (planificación,
          diseño, desarrollo, evaluación), desde
          las primeras etapas.
        o Es iterativo.
        o Es multidisciplinar.
        o Su objetivo es obtener productos
          usables y satisfactorios para los
          usuarios.

    En busca del Diseño Centrado en el Usuario (DCU) http://www.nosolousabilidad.com/articulos/dcu.htm

22/03/2013        usabilidad - UX - accesibilidad      Jordi Sánchez - @jordisan - http://jordisan.net   42
Ejemplo: prototipado + test usuario




    http://www.youtube.com/watch?v=9wQkLthhHKA

22/03/2013       usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   43
Usabilidad NO-WEB (1)

     La mayoría de la información práctica existente sobre
      usabilidad hace referencia a sitios web
     ¿Hasta dónde es aplicable a otro tipo de aplicaciones?

     En general:
        o Técnicas SÍ son aplicables a cualquier tipo de aplicación:
          evaluación heurística, tests con usuarios, prototipado, etc.
        o Principios generales (heurísticas) SÍ son aplicables a cualquier
          tipo de aplicación:
          visibilidad del estado; lenguaje del usuario; …
        o Los checklists y recomendaciones concretas… DEPENDE:
          escribir para la web; enlaces; …



22/03/2013    usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   44
Usabilidad NO-WEB (2)

     Algunas diferencias en aplicaciones desktop o móviles:
        o Entorno hardware/software más controlado
        o Estándares específicos del sistema (Apple; Microsoft; Google)
        o Menos libertad de navegación
        o Perfiles de usuario normalmente más delimitados
        o Expertos en usabilidad necesitan más tiempo para conocerlas
     ¿Se están acercando?




    Windows User Experience Interaction Guidelines http://msdn.microsoft.com/en-us/library/aa511258.aspx
    Apple Human Interface Guidelines http://developer.apple.com/documentation/userexperience/Conceptual/AppleHIGuidelines/

22/03/2013        usabilidad - UX - accesibilidad     Jordi Sánchez - @jordisan - http://jordisan.net                 45
Consejo de mínimos

        No se pueden aplicar todas en cada proyecto
              Adecuarse a objetivos, necesidades, recursos, aspectos críticos, …


        Pero para empezar…
        o Contratar/formar personal especializado
        o Integrar usabilidad en el proceso de desarrollo
             Subconjunto (mínimo) de técnicas:
                 •   Roles de usuarios; personas (“quién”)
                 •   Casos de uso (“qué”)
                 •   Prototipado de interfaces (“cómo”)
                 •   Evaluación (heurística/pruebas con usuarios)


        UCDmanager

    Usability Planner http://www.usabilityplanner.org/
    UCDmanager http://ucdmanager.net

22/03/2013           usabilidad - UX - accesibilidad     Jordi Sánchez - @jordisan - http://jordisan.net   46
ACCESIBILIDAD (WEB) Y SUS BENEFICIOS




22/03/2013    usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   47
Recordemos…

   Usabilidad
    Que sea fácil de usar


   UX (User eXperience)
    Que el usuario tenga una experiencia
    satisfactoria
    (suele conseguirse haciendo que sea usable)




   Accesibilidad
    Que el usuario pueda usarlo
    (nos solemos referir a situaciones “especiales”)



22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   48
Definición de ACCESIBILIDAD WEB

     “El poder de la Web reside en su universalidad. El
       acceso por cualquiera independientemente de sus
       discapacidades es un aspecto esencial”
             (Tim Berners-Lee, uno de los padres de la Web)
     “Hablar de Accesibilidad Web es hablar del acceso de
       todos a la Web, independientemente del tipo de
       hardware, software, infraestructura de
       red, idioma, cultura, localización geográfica y
       capacidades de los usuarios.”
             (W3C, oficina española)


     Que el mayor número de usuarios acceda a la Web
     NO existe la “accesibilidad absoluta”
22/03/2013      usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   49
MITO: accesibilidad web es “para ciegos”

    FALSO.
     Es cierto que los criterios de accesibilidad ayudan a
      personas con deficiencias físicas (visuales, auditivas,
      motrices), cognitivas, de lenguaje, …

    Y TAMBIÉN…
     Usuarios con discapacidades temporales
      (enfermedades, convalecencias)
     Usuarios de edad avanzada
     Dispositivos menos (?) habituales: móviles, SmartTV;
      versiones antiguas SO/navegador; conexiones lentas
     Entornos especiales (kioskos públicos; entornos
      ruidosos, fábricas, etc.)
22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   51
Beneficios de accesibilidad (obvios)

     Maximizar los posibles usuarios/clientes

     Seguir estándares facilita el desarrollo y mantenimiento

     Por imagen pública

    …




    Web Accessibility Initiative (WAI) http://www.w3.org/WAI/

22/03/2013         usabilidad - UX - accesibilidad       Jordi Sánchez - @jordisan - http://jordisan.net   52
Accesibilidad: más beneficios

        o y además…
     Mejora el posicionamiento en buscadores (SEO)
        o textos alternativos; identificar idioma;
             documentos bien estructurados; …
     Por normativa legal
        o Los sitios web de administraciones
             públicas (o con financiación pública;
             o “de especial interés”) deben cumplir
             un nivel mínimo de accesibilidad




    High Accessibility Is Effective Search Engine Optimization http://www.alistapart.com/articles/accessibilityseo
    Referencia sobre legislación española relacionada con la accesibilidad web http://olgacarreras.blogspot.com/2005/01/referencia-
       sobre-legislacin-espaola.html

22/03/2013         usabilidad - UX - accesibilidad       Jordi Sánchez - @jordisan - http://jordisan.net                   53
PROBLEMAS DE ACCESIBILIDAD.
                                        CÓMO SER ACCESIBLE




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   54
PROBLEMAS habituales de accesibilidad (1)

    Personas con problemas visuales
    (o dispositivos como SmartTV, móviles, etc.)
     Sólo “ven” texto de modo secuencial
      (usan lectores de pantalla/navegadores por voz)
     Necesitan textos grandes
     No distinguen bien los colores
    Cuidado con:
        o Imágenes sin descripción textual
        o Tablas y marcos (frames) mal etiquetados
        o Colores de bajo contraste
        o Texto no escalable
        o Ventanas emergentes (pop-up)
        o No funcionan con teclado

22/03/2013    usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   55
PROBLEMAS habituales de accesibilidad (2)

    Personas con discapacidades cognitivas / de aprendizaje
    (o en entornos complejos;
    o con poco dominio del idioma; …)
     Pueden tener problemas para “entender” los contenidos
      o para concentrarse
     Problemas de memoria

    Cuidado con:
        o Documentos con estructura mal definida
        o Demasiada información en una página
        o Lenguaje innecesariamente complejo
        o Falta de imágenes para clarificar el texto
        o Animaciones y elementos decorativos superfluos

22/03/2013    usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   56
Normativa sobre extranjeros




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   57
PROBLEMAS habituales de accesibilidad (3)

    Personas con discapacidades auditivas
    (o en entornos ruidosos;
    o en equipos sin hardware de audio)

     Pueden tener problemas para acceder a los contenidos
       sonoros

    Cuidado con:
        o Audio/vídeo sin descripciones textuales
        o Frases complejas o demasiado largas




22/03/2013    usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   58
Subtítulos




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   59
PROBLEMAS habituales de accesibilidad (4)

    Personas con discapacidades motoras
    (o no disponen de ratón)

     Tienen que usar el teclado u otros dispositivos
       (reconocimiento de voz)

    Cuidado con:
        o Páginas que no funcionan con teclado




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   60
MITO: para ser accesible basta con tener una
    versión “sólo texto”
    FALSO.
     Sólo para determinados usuarios
     Suponen una discriminación (“entrar por la puerta
      trasera”)
     Problemas por contenidos duplicados:
        o mantenimiento
        o indexación en buscadores
     Se descuida la accesibilidad de la versión “normal”
     ¿Cómo llego a la versión accesible?

    MEJOR: si es posible, una única versión que cumpla los
    estándares de accesibilidad

22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   61
Tiene “versión sólo texto”, pero…




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   62
… sin imágenes…




             ¿Cómo accedo
               a la versión
              “sólo texto”?




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   63
¿CÓMO consigo que mi web sea
    ACCESIBLE?


     Conociendo y cumpliendo los estándares
        o De los lenguajes utilizados (HTML; CSS; etc.)
        o Específicos de accesibilidad




     Testeando
        o Diferentes entornos (navegadores, sistemas operativos, etc.)
        o Con usuarios reales




22/03/2013    usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   64
¿Qué ESTÁNDARES? (1)


     Lenguajes/técnicas utilizados:
        o HTML válido
        o CSS válido
        o JavaScript “no obstructivo”
        o Etc.


     IMPORTANTE: separar contenido vs. aspecto
        o El mismo contenido para todos los usuarios
        o Aspecto en función de las condiciones particulares


     IMPORTANTE: compatibilidad multinavegador

22/03/2013       usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   65
Con el mismo contenido HTML…




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   66
¿Qué ESTÁNDARES? (2)

    Recomendaciones y normativas específicas sobre
    accesibilidad web:

     Section 508 (USA)

     WAI (Web Accessibility Initiative)
        o Internacionales, W3C
        o Sugeridas por la Comisión Europea


     UNE 139803 “Requisitos de accesibilidad para
       contenidos Web” (España)
        o Basada en WAI
        o Obligatoria por Ley para sitios web de Administraciones Públicas
22/03/2013    usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   67
WAI (Web Accessibility Initiative)

     Forma parte del W3C (World Wide Web Consortium)

     Recomendaciones y directrices sobre:
        o Contenido web (WCAG)
              Contenidos web accesibles
              Referencia de normas UNE
        o Herramientas de autor (ATAG)
              Herramientas de creación accesibles y
              que generen contenidos accesibles
        o Agentes usuario (navegadores) (UAAG)
              Navegadores accesibles
        o Rich Applications (WAI-ARIA)
              Para aplicaciones RIA 2.0


22/03/2013      usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   68
WCAG (Web Content Accessibility Guidelines)

     Cómo crear contenidos web accesibles. Versión 2.0
     4 principios generales del contenido web:
        o Perceptible
        o Operable
        o Inteligible
        o Robusto
        Cada principio incluye directrices (guidelines)
        Cada guideline incluye criterios de éxito con prioridad:
              A = Debe satisfacerse; requerimientos básicos
              AA = Debería satisfacerse; eliminar barreras significativas
              AAA = Puede satisfacerse; acceso mejorado


     Además: técnicas, ejemplos, enlaces, etc.

22/03/2013       usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   69
WCAG: ejemplo guideline




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   70
Texto alternativo




    ¡También por SEO!


22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   71
WCAG: niveles de cumplimiento A, AA y AAA

     3 niveles de cumplimiento de las guidelines WCAG por
      parte de páginas o sitios web:
          Conformidad nivel “A”
        o Cumple todos los criterios A (“deben”)
            Conformidad nivel “AA”
        o Cumple todos los criterios A y AA (“deberían”)
            Conformidad nivel “AAA”
        o Cumple todos los criterios A, AA y AAA (“pueden”)


     Las declaraciones de conformidad (“los sellos”) se
      incluyen por decisión propia (W3C NO las verifica)
     Habitualmente se intenta alcanzar el nivel “AA”

22/03/2013    usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   74
EVALUACIONES DE ACCESIBILIDAD




22/03/2013    usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   75
Evaluaciones de accesibilidad: manual

     Leyendo el contenido:
        o Lenguaje sencillo
        o Abreviaturas, idiomas, …
        o ¿Se entiende?
     Comprobar navegadores gráficos
        o Firefox, Internet Explorer, Opera, Safari, …
        o Diferentes plataformas, versiones y sistemas operativos
        o Diferentes configuraciones:
              Desactivando imágenes, CSS, JavaScript, sonido, etc.
              Diferentes resoluciones de pantalla, tamaños de texto, combinaciones
              de colores o B/N, etc.
     Usar navegadores sólo texto; lectores de pantalla
     Usar dispositivos alternativos (sólo con teclado)
22/03/2013      usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   76
Evaluaciones de accesibilidad: herramientas

     Online y offline

     Para comprobar sintaxis de HTML, CSS, etc.
        o W3C (HTML Validation Service; CSS Validation Service; etc.)
             W3C Unicorn
        o Otras herramientas (HTML Tidy; Dreamweaver; etc.)



     Para validación de accesibilidad
        o WebXACT/Bobby; Cynthia Says; TAW; eXaminator
             TAW
        o Comprueban si se cumplen determinados checkpoints de WCAG
        o Sirven como herramienta de apoyo, pero NO son suficientes para
             evaluar la accesibilidad

22/03/2013       usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   77
MITO: los validadores automáticos indican si
    una página es accesible o no
    FALSO.
     Los validadores comprueban la sintaxis (HTML, CSS,
      etc.)
     Los validadores comprueban algunos checkpoints
    PERO…
     Muchos checkpoints son interpretables y necesitan
      validación manual.
     Las herramientas automáticas pueden producir “falsos
      negativos” y “falsos positivos”
    Guidelines, checkpoints, validadores automáticos y sellos
    son herramientas e indicadores, NO un objetivo
    Lo importante: la accesibilidad real

22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   78
Pruebas accesibilidad con usuarios


     Similares a los tests de usabilidad:
        o Observación de usuarios reales mientras se enfrentan al sitio web



     Proporcionan mucha información útil, pero son muy
       complejos:
        o Definir tareas representativas
        o Existe gran cantidad de tipologías de discapacidad




22/03/2013    usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   83
Retos de accesibilidad:
    RIA (Rich Internet Applications)
     Conseguir interfaces “de escritorio” en la web
     Algunas aplicaciones:
        o Google (Gmail; Google Maps); Flickr; YouTube; ...
     Tecnologías:
        o AJAX; Flash; Java; DHTML; etc.
     Ya no son interfaces “insertados” en una página
      web, sino que son la propia interfaz.
     WAI-ARIA (WAI Accessible Rich Internet Applications)
        o Iniciativa de W3C en desarrollo



    Mientras tanto…
        o Estándares para conseguir degradación progresiva
        o Proporcionar versión alternativa
22/03/2013    usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   84
Gmail, con y sin JavaScript




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   85
Más retos:
    normativas y certificaciones

     En ESPAÑA, las webs de las Administraciones Públicas
       deberán cumplir las prioridades 1 y 2 de la Norma UNE
       139803:2004 (similares a WCAG “AA”)
        o W3C no es un organismo “oficial” de estandarización




     AENOR certifica oficialmente esa accesibilidad

     Pero NO es imprescindible obtener esa certificación para
       declarar que una página es accesible


22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   86
MITO: las páginas accesibles son feas


     “Para muestra, un botón”

     Las siguientes páginas tienen un alto nivel de
       accesibilidad…




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   87
http://www.inretirementservices.co.uk/




ACCESIBILIDAD WEB. 29-nov-2007, Madrid
22/03/2013     usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   88
http://geekministry.com/old_geek/




ACCESIBILIDAD WEB. 29-nov-2007, Madrid
22/03/2013     usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   89
http://snowdog.pl/




ACCESIBILIDAD WEB. 29-nov-2007, Madrid
22/03/2013     usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   90
http://www.3point7designs.com/




ACCESIBILIDAD WEB. 29-nov-2007, Madrid
22/03/2013     usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   91
¿Por qué es importante ACCESIBILIDAD?

     Permite que el mayor número posible de personas
      acceda a los contenidos (no sólo discapacitados).
     Beneficia a todos los usuarios, haciéndoles más fácil el
      acceso a las páginas (mejor usabilidad).
     Reduce costes de mantenimiento/desarrollo:
        o Una única versión para todas las plataformas
        o Es más fácil hacer cambios (contenido vs. presentación)
        o Mayor “vida útil” de los contenidos
        o Las técnicas se pueden aplicar a diferentes sitios
     Cumplir estándares mejora la visibilidad en Internet
      (SEO) y la compatibilidad multinavegador.
     Para determinados sitios, cumplir con la Ley.

22/03/2013    usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   92
EN CONCLUSIÓN …




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   93
Usabilidad (y accesibilidad) son
    “muy agradecidas”

     No requieren
       grandes inversiones

     Habitualmente dan
       resultados muy buenos

     Pueden significar
       la diferencia entre:
        o el éxito y el fracaso
        o tú y tu competencia


    http://www.zdnet.com/shuttleworth-open-source-desktops-need-a-facelift-2062046056/

22/03/2013        usabilidad - UX - accesibilidad      Jordi Sánchez - @jordisan - http://jordisan.net   94
Consejo de mínimos (recordatorio)



     Contratar/formar personal especializado


     Integrar usabilidad en el proceso de desarrollo
        Subconjunto (mínimo) de técnicas:
              Roles de usuarios; personas (“quién”)
              Casos de uso (“qué”)
              Prototipado de interfaces (“cómo”)
              Evaluación (heurística/pruebas con usuarios)




22/03/2013       usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   95
¿Estás seguro de que tu producto
    o sitio web no es así?




22/03/2013   usabilidad - UX - accesibilidad   Jordi Sánchez - @jordisan - http://jordisan.net   96
USABILIDAD, UX Y ACCESIBILIDAD:
QUÉ SON Y POR QUÉ DEBERÍAN PREOCUPARME

                               Jordi Sánchez
                           http://jordisan.net
                                    @jordisan

Weitere ähnliche Inhalte

Was ist angesagt?

Le design thinking en bibliothèque
Le design thinking en bibliothèqueLe design thinking en bibliothèque
Le design thinking en bibliothèqueGeoffrey Dorne
 
Comunicación en la era Whatsapp
Comunicación en la era WhatsappComunicación en la era Whatsapp
Comunicación en la era Whatsappdigitalde
 
1 web 1 y web 2 y web 3
1 web 1 y web 2  y web 31 web 1 y web 2  y web 3
1 web 1 y web 2 y web 3.. ..
 
Comunicación sincronica y asincronica
Comunicación sincronica y asincronica Comunicación sincronica y asincronica
Comunicación sincronica y asincronica Marielyrojas
 
UX Strategy - An Overview
UX Strategy - An OverviewUX Strategy - An Overview
UX Strategy - An OverviewSonal Malhotra
 
Rol del Profesional de la Información
Rol del Profesional de la InformaciónRol del Profesional de la Información
Rol del Profesional de la Informaciónnelsoncastor
 
Ayudas TéCnicas Discapacidad Visual
Ayudas TéCnicas Discapacidad VisualAyudas TéCnicas Discapacidad Visual
Ayudas TéCnicas Discapacidad Visualmagagacu
 
Introduction to UX Design
Introduction to UX DesignIntroduction to UX Design
Introduction to UX DesignBill Tribble
 
1.2 Componentes de la accesibilidad web
1.2 Componentes de la accesibilidad web1.2 Componentes de la accesibilidad web
1.2 Componentes de la accesibilidad webtayzee
 
Herramientas asincronas y sincronas
Herramientas asincronas y sincronasHerramientas asincronas y sincronas
Herramientas asincronas y sincronasghizeladiaz
 
Arquitectura de la información 01
Arquitectura de la información 01Arquitectura de la información 01
Arquitectura de la información 01Worköholics
 
¿Qué es un video tutorial? usos y aplicaciones
¿Qué es un video tutorial? usos y aplicaciones¿Qué es un video tutorial? usos y aplicaciones
¿Qué es un video tutorial? usos y aplicacionesAlejandra Chacón
 
Herramientas sincronicas y asincronicas
Herramientas sincronicas y asincronicasHerramientas sincronicas y asincronicas
Herramientas sincronicas y asincronicasjoseantopa
 
L'émergence de nouveaux modèles de bibliothèques ?
L'émergence de nouveaux modèles de bibliothèques ?L'émergence de nouveaux modèles de bibliothèques ?
L'émergence de nouveaux modèles de bibliothèques ?Dujol Lionel
 
Enterprise UX - The "Next" Last Frontier
Enterprise UX - The "Next" Last FrontierEnterprise UX - The "Next" Last Frontier
Enterprise UX - The "Next" Last FrontierPatrick Neeman
 
ICCIT Council × GDSC: UX / UI and Figma
ICCIT Council × GDSC: UX / UI and FigmaICCIT Council × GDSC: UX / UI and Figma
ICCIT Council × GDSC: UX / UI and FigmaGDSC UofT Mississauga
 
Cuadro comparativo web 1.0,2.0,3.0
Cuadro comparativo web 1.0,2.0,3.0Cuadro comparativo web 1.0,2.0,3.0
Cuadro comparativo web 1.0,2.0,3.0Luis Ramirez
 
Les ressources numériques libres et gratuites en bibliothèque
Les ressources numériques libres et gratuites en bibliothèqueLes ressources numériques libres et gratuites en bibliothèque
Les ressources numériques libres et gratuites en bibliothèqueAnne-Gaëlle Gaudion
 

Was ist angesagt? (20)

Le design thinking en bibliothèque
Le design thinking en bibliothèqueLe design thinking en bibliothèque
Le design thinking en bibliothèque
 
Comunicación en la era Whatsapp
Comunicación en la era WhatsappComunicación en la era Whatsapp
Comunicación en la era Whatsapp
 
1 web 1 y web 2 y web 3
1 web 1 y web 2  y web 31 web 1 y web 2  y web 3
1 web 1 y web 2 y web 3
 
Comunicación sincronica y asincronica
Comunicación sincronica y asincronica Comunicación sincronica y asincronica
Comunicación sincronica y asincronica
 
Que es video
Que es videoQue es video
Que es video
 
UX Strategy - An Overview
UX Strategy - An OverviewUX Strategy - An Overview
UX Strategy - An Overview
 
Rol del Profesional de la Información
Rol del Profesional de la InformaciónRol del Profesional de la Información
Rol del Profesional de la Información
 
Ayudas TéCnicas Discapacidad Visual
Ayudas TéCnicas Discapacidad VisualAyudas TéCnicas Discapacidad Visual
Ayudas TéCnicas Discapacidad Visual
 
Introduction to UX Design
Introduction to UX DesignIntroduction to UX Design
Introduction to UX Design
 
Biblioteca Virtual
Biblioteca Virtual Biblioteca Virtual
Biblioteca Virtual
 
1.2 Componentes de la accesibilidad web
1.2 Componentes de la accesibilidad web1.2 Componentes de la accesibilidad web
1.2 Componentes de la accesibilidad web
 
Herramientas asincronas y sincronas
Herramientas asincronas y sincronasHerramientas asincronas y sincronas
Herramientas asincronas y sincronas
 
Arquitectura de la información 01
Arquitectura de la información 01Arquitectura de la información 01
Arquitectura de la información 01
 
¿Qué es un video tutorial? usos y aplicaciones
¿Qué es un video tutorial? usos y aplicaciones¿Qué es un video tutorial? usos y aplicaciones
¿Qué es un video tutorial? usos y aplicaciones
 
Herramientas sincronicas y asincronicas
Herramientas sincronicas y asincronicasHerramientas sincronicas y asincronicas
Herramientas sincronicas y asincronicas
 
L'émergence de nouveaux modèles de bibliothèques ?
L'émergence de nouveaux modèles de bibliothèques ?L'émergence de nouveaux modèles de bibliothèques ?
L'émergence de nouveaux modèles de bibliothèques ?
 
Enterprise UX - The "Next" Last Frontier
Enterprise UX - The "Next" Last FrontierEnterprise UX - The "Next" Last Frontier
Enterprise UX - The "Next" Last Frontier
 
ICCIT Council × GDSC: UX / UI and Figma
ICCIT Council × GDSC: UX / UI and FigmaICCIT Council × GDSC: UX / UI and Figma
ICCIT Council × GDSC: UX / UI and Figma
 
Cuadro comparativo web 1.0,2.0,3.0
Cuadro comparativo web 1.0,2.0,3.0Cuadro comparativo web 1.0,2.0,3.0
Cuadro comparativo web 1.0,2.0,3.0
 
Les ressources numériques libres et gratuites en bibliothèque
Les ressources numériques libres et gratuites en bibliothèqueLes ressources numériques libres et gratuites en bibliothèque
Les ressources numériques libres et gratuites en bibliothèque
 

Ähnlich wie Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

El botón de los 300 millones de dólares. Qué es la usabilidad/UX y por qué de...
El botón de los 300 millones de dólares. Qué es la usabilidad/UX y por qué de...El botón de los 300 millones de dólares. Qué es la usabilidad/UX y por qué de...
El botón de los 300 millones de dólares. Qué es la usabilidad/UX y por qué de...Fundació Bit
 
El botón de los 300 millones de dólares
El botón de los 300 millones de dólaresEl botón de los 300 millones de dólares
El botón de los 300 millones de dólaresbetabeers
 
Usabilidad en la empresa 2.0
Usabilidad en la empresa 2.0Usabilidad en la empresa 2.0
Usabilidad en la empresa 2.0Jorge Márquez
 
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...Virginia Aguirre
 
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...The Social Experience
 
Technisys UX Lunch&Learn
Technisys UX Lunch&LearnTechnisys UX Lunch&Learn
Technisys UX Lunch&LearnMariano Franco
 
GIS Libre y Datos Abiertos como base tecnológica en iniciativas de cambio social
GIS Libre y Datos Abiertos como base tecnológica en iniciativas de cambio socialGIS Libre y Datos Abiertos como base tecnológica en iniciativas de cambio social
GIS Libre y Datos Abiertos como base tecnológica en iniciativas de cambio socialJavier Sánchez
 
Bbva v segunda parte
Bbva v segunda parteBbva v segunda parte
Bbva v segunda parteMoises Cielak
 
Usabilidad en Sistemas de Información e Interfaces
Usabilidad en Sistemas de Información e InterfacesUsabilidad en Sistemas de Información e Interfaces
Usabilidad en Sistemas de Información e InterfacesJorge García Valbuena
 
Visibilidad y Accesibilidad de la biblioteca digital
Visibilidad y Accesibilidad de la biblioteca digitalVisibilidad y Accesibilidad de la biblioteca digital
Visibilidad y Accesibilidad de la biblioteca digitalDiana Rodríguez
 
Clase 1 Introducción a la Usabilidad
Clase 1 Introducción a la UsabilidadClase 1 Introducción a la Usabilidad
Clase 1 Introducción a la UsabilidadRoberto Muñoz Soto
 
Informe OBS Business School: La usabilidad en las webs de viajes
Informe OBS Business School: La usabilidad en las webs de viajesInforme OBS Business School: La usabilidad en las webs de viajes
Informe OBS Business School: La usabilidad en las webs de viajesOBS Business School
 
Desarrollo de HCI (Primer Parcial)
Desarrollo de HCI (Primer Parcial)Desarrollo de HCI (Primer Parcial)
Desarrollo de HCI (Primer Parcial)Mario A Moreno Rocha
 
Jornades "Comunicació 3.0 i accessibilitat total". Ponència David Zanoletti: ...
Jornades "Comunicació 3.0 i accessibilitat total". Ponència David Zanoletti: ...Jornades "Comunicació 3.0 i accessibilitat total". Ponència David Zanoletti: ...
Jornades "Comunicació 3.0 i accessibilitat total". Ponència David Zanoletti: ...Museu Marítim de Barcelona
 
UX product mindset - Product Tank Santiago.
UX product mindset - Product Tank Santiago.UX product mindset - Product Tank Santiago.
UX product mindset - Product Tank Santiago.Gustavo Soto Miño
 

Ähnlich wie Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme (20)

El botón de los 300 millones de dólares. Qué es la usabilidad/UX y por qué de...
El botón de los 300 millones de dólares. Qué es la usabilidad/UX y por qué de...El botón de los 300 millones de dólares. Qué es la usabilidad/UX y por qué de...
El botón de los 300 millones de dólares. Qué es la usabilidad/UX y por qué de...
 
El botón de los 300 millones de dólares
El botón de los 300 millones de dólaresEl botón de los 300 millones de dólares
El botón de los 300 millones de dólares
 
Experiencia de usuario y Usabilidad
Experiencia de usuario y UsabilidadExperiencia de usuario y Usabilidad
Experiencia de usuario y Usabilidad
 
Articulo2
Articulo2Articulo2
Articulo2
 
Usabilidad en la empresa 2.0
Usabilidad en la empresa 2.0Usabilidad en la empresa 2.0
Usabilidad en la empresa 2.0
 
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
 
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
Cursos de verano Bizbak UPV/EHU: Marketing Online: Experiencia de usuario (UX...
 
Technisys UX Lunch&Learn
Technisys UX Lunch&LearnTechnisys UX Lunch&Learn
Technisys UX Lunch&Learn
 
GIS Libre y Datos Abiertos como base tecnológica en iniciativas de cambio social
GIS Libre y Datos Abiertos como base tecnológica en iniciativas de cambio socialGIS Libre y Datos Abiertos como base tecnológica en iniciativas de cambio social
GIS Libre y Datos Abiertos como base tecnológica en iniciativas de cambio social
 
Bbva v segunda parte
Bbva v segunda parteBbva v segunda parte
Bbva v segunda parte
 
Usabilidad en Sistemas de Información e Interfaces
Usabilidad en Sistemas de Información e InterfacesUsabilidad en Sistemas de Información e Interfaces
Usabilidad en Sistemas de Información e Interfaces
 
Visibilidad y Accesibilidad de la biblioteca digital
Visibilidad y Accesibilidad de la biblioteca digitalVisibilidad y Accesibilidad de la biblioteca digital
Visibilidad y Accesibilidad de la biblioteca digital
 
Clase 1 Introducción a la Usabilidad
Clase 1 Introducción a la UsabilidadClase 1 Introducción a la Usabilidad
Clase 1 Introducción a la Usabilidad
 
Mapa de soluciones Laberit Q2 2022
Mapa de soluciones Laberit Q2 2022Mapa de soluciones Laberit Q2 2022
Mapa de soluciones Laberit Q2 2022
 
Informe OBS Business School: La usabilidad en las webs de viajes
Informe OBS Business School: La usabilidad en las webs de viajesInforme OBS Business School: La usabilidad en las webs de viajes
Informe OBS Business School: La usabilidad en las webs de viajes
 
Claves de una intranet social
Claves de una intranet socialClaves de una intranet social
Claves de una intranet social
 
Desarrollo de HCI (Primer Parcial)
Desarrollo de HCI (Primer Parcial)Desarrollo de HCI (Primer Parcial)
Desarrollo de HCI (Primer Parcial)
 
Jornades "Comunicació 3.0 i accessibilitat total". Ponència David Zanoletti: ...
Jornades "Comunicació 3.0 i accessibilitat total". Ponència David Zanoletti: ...Jornades "Comunicació 3.0 i accessibilitat total". Ponència David Zanoletti: ...
Jornades "Comunicació 3.0 i accessibilitat total". Ponència David Zanoletti: ...
 
UX product mindset - Product Tank Santiago.
UX product mindset - Product Tank Santiago.UX product mindset - Product Tank Santiago.
UX product mindset - Product Tank Santiago.
 
Portafolio Sady Maureria
Portafolio Sady Maureria Portafolio Sady Maureria
Portafolio Sady Maureria
 

Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme

  • 1. USABILIDAD, UX Y ACCESIBILIDAD: QUÉ SON Y POR QUÉ DEBERÍAN PREOCUPARME Jordi Sánchez http://jordisan.net @jordisan
  • 2. Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme  Presentación  Algunas definiciones  ¿Es rentable invertir en usabilidad?  Casos concretos  Cómo se consigue  Accesibilidad (web) y sus beneficios  Problemas de accesibilidad. Cómo ser accesibles.  Evaluaciones de accesibilidad.  En conclusión… 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 2
  • 3. PRESENTACIÓN 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 3
  • 4. Jordi Sánchez  Ingeniero en Informática  Máster en Interacción Persona-Ordenador  9 años en entidad financiera  5 años en proyectos de usabilidad/accesibilidad  Freelance Proyectos personales: o UCDmanager (Drupal) http://ucdmanager.net o Apps Windows 8 o… http://jordisan.net @jordisan http://linkedin.com/in/jordisan 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 4
  • 5. ALGUNAS DEFINICIONES 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 5
  • 6. Usabilidad, palabra “de moda” 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 6
  • 7. Todos sabemos sufrimos lo que es 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 8
  • 8. ¿O es como la música de cámara? Les Luthiers – Entreteniciencia Familiar http://www.youtube.com/watch?v=9tS-OyggjCE 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 9
  • 9. Una definición formal (ISO 9241-11)  Usabilidad: El grado en que un producto puede ser utilizado por los usuarios para lograr sus propósitos con efectividad, eficiencia y satisfacción en un determinado contexto de uso. o Efectividad: ¿Pueden los usuarios hacer lo que quieren hacer? o Eficiencia: ¿Pueden hacerlo con poco esfuerzo/memoria/etc.? o Satisfacción: ¿Cuál es la percepción de los usuarios acerca del producto? o Contexto: ¿De qué situación estamos hablando? o Empezó a dársele más importancia a los dos primeros aspectos (los más fáciles de medir) International standards for HCI and usability: http://www.usabilitynet.org/tools/r_international.htm 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 10
  • 10. Básicamente…  Productos fáciles de usar  “No me hagas pensar” Don’t make me think: http://www.sensible.com/buythebook.html 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 11
  • 11. Y llegó la UX (User eXperience)  ¡Tenemos que tener en cuenta la “experiencia del usuario”!  ¿Diseñador de experiencias? ¡Suena cool!  Entonces… ¿usabilidad y UX son lo mismo? Depende: o Si por “usabilidad” solo entendemos eficacia y eficiencia, y no tenemos en cuenta la satisfacción del usuario => NO o Si por “usabilidad” solo incluimos actividades de evaluación, y no de análisis o diseño => NO o (entre nosotros… SÍ)  Lo importante es…  Tener en cuenta la experiencia global del usuario  Al final, una buena experiencia se consigue con aplicaciones usables 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 12
  • 12. ¿Y la accesibilidad (web)?  Objetivo: que cualquiera tenga acceso a la web, independientemente de sus habilidades o situación. o No solo discapacitados; ya lo veremos.  ¿Es lo mismo que usabilidad? No; es un requisito previo: o Accesible: “se puede llegar” o Usable: “se puede usar fácilmente”  Cuando hablamos de usabilidad, solemos referirnos a usuarios/situaciones “normales” (si es que existe tal cosa)  Cuando hablamos de accesibilidad, solemos referirnos a usuarios o situaciones “especiales” (¿para quién?) 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 13
  • 13. En resumen…  Usabilidad Que sea fácil de usar  UX (User eXperience) Que el usuario tenga una experiencia satisfactoria (suele conseguirse haciendo que sea usable)  Accesibilidad Que el usuario pueda usarlo (nos solemos referir a situaciones “especiales”) 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 14
  • 14. ¿ES RENTABLE INVERTIR EN USABILIDAD? 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 15
  • 15. Ventajas de tener en cuenta la usabilidad  Ahorro en costes de desarrollo. o Menos costes de formación. o Los problemas se detectan antes.  Mejora la eficacia y eficiencia en las tareas. o Importante en aplicaciones internas e Intranets.  Mejora las ventas. o Los clientes tienen menos problemas a la hora de comprar. o Menos clientes descontentos que abandonan. o Más clientes nuevos.  Incrementa la satisfacción de los usuarios. o Menos problemas legales (reclamaciones). 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 16
  • 16. Todo eso está muy bien, pero… 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 17
  • 17. Algunos números generales o "The rule of thumb in many usability-aware organizations is that the cost-benefit ratio for usability is $1 : $10-$100. Once a system is in development, correcting a problem costs 10 times as much as fixing the same problem in design. If the system has been released, it costs 100 times as much relative to fixing in design." (Gilb, 1988) o "The magnitude of usability improvements is usually large. This is not a matter of increasing use by a few percent. It is common for usability efforts to result in a hundred percent or more increase in traffic or sales." (Nielsen, July 1999) The ROI of Usability http://www.upassoc.org/usability_resources/usability_in_the_real_world/roi_of_usability.html 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 18
  • 18. Más números o "In Jared Spool's study of 15 large commercial sites, users could only find information 42% of the time even though they were taken to the correct home page before they were given the test tasks." (Nielsen, October 1998) o "IBM's Web presence has traditionally been made up of a difficult- to-navigate labyrinth of disparate subsites, but a redesign made it more cohesive and user-friendly. The company said in the month after the February 1999 re-launch that traffic to the Shop IBM online store increased 120 percent, and sales went up 400 percent." (Battey, 1999) The ROI of Usability http://www.upassoc.org/usability_resources/usability_in_the_real_world/roi_of_usability.html 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 19
  • 19. ¿Y en la actualidad? o “Luckily, current usability ROI is so stupendously big (spend 10% to gain 83%) that it can decrease much more and still be a favorable proposition for business executives.” (Nielsen, 2008)  Pero eso es en entornos ya maduros y con experiencia en temas de usabilidad: o “During the last decade, the share of project resources allocated to usability has held steady at around 10% in those enlightened companies that include usability in their design lifecycle.” (Nielsen, 2008) Usability ROI Declining, But Still Strong http://www.useit.com/alertbox/roi.html 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 20
  • 20. CASOS CONCRETOS 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 21
  • 21. Portal de viajes: o Analítica web => Muchos usuarios que iniciaban el proceso de compra no completaban la transacción o Formulario de pago (reconstrucción): Name Company Muchos usuarios particulares ponían el nombre de su banco… Address … y la dirección de su banco  "After we realised that we just went onto the site and deleted that field - overnight there was a step function [change], resulting in $12m of profit a year, simply by deleting a field.” Expedia on how one extra data field can cost $12m http://www.silicon.com/management/sales-and- marketing/2010/11/01/expedia-on-how-one-extra-data-field-can-cost-12m-39746554/ 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 22
  • 22. El botón de los 300 millones de dólares o En un popular sitio de comercio electrónico (¿BB?), los usuarios seleccionaban sus productos, y cuando deseaban confirmar la compra… Email Address “¿Por qué tengo que registrarme? Sólo quiero comprar” Password “No recuerdo si ya me registré antes” Login Register “¿Qué dirección de correo electrónico puse?” Forgot Password  Los usuarios nuevos guardarían sus datos para posteriores compras  Los usuarios registrados no tendrían que volver a introducir sus datos  Pero… The $300 Million Button http://www.uie.com/articles/three_hund_million_button 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 23
  • 23. El botón de los 300 millones de dólares (y II) o 45% de los clientes se habían registrado múltiples veces o Hasta 160.000 peticiones de contraseña al día  De ellos, el 75% no finalizaban su compra después.  Solución: Email Address Email Address You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To Password Password make your future purchases even faster, you can create an account during checkout Login Register Login Continue Forgot Password Forgot Password  “The number of customers purchasing went up by 45%. The extra purchases resulted in an extra $15 million the first month. For the first year, the site saw an additional $300,000,000” The $300 Million Button http://www.uie.com/articles/three_hund_million_button 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 24
  • 24. No solo en web… Ford to upgrade MyFord Touch in 250,000 vehicles after taking heat for glitches and design http://www.washingtonpost.com/business/technology/ford-to-upgrade-myford-touch-in-250000-vehicles-after-taking-heat-for- glitches-and-design/2011/11/06/gIQAY4MNtM_story.html 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 26
  • 25. ¿CÓMO SE CONSIGUE? 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 27
  • 26. Así, no 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 28
  • 27. Una noticia buena y una mala  La mala: no hay trucos mágicos  La buena: no hay trucos mágicos 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 29
  • 28. Evaluando la usabilidad  Muchas veces hay pocos recursos, sólo para evaluar la usabilidad de algo ya desarrollado  “Discount Usability”/”Guerrilla Usability” (Jakob Nielsen): Técnicas que ofrecen buenos resultados con pocos recursos: o Evaluación heurística (revisión de un experto) o Tests de usuario Guerrilla HCI: Using Discount Usability Engineering to Penetrate the Intimidation Barrier http://www.useit.com/papers/guerrilla_hci.html 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 30
  • 29. Evaluación heurística  Inspección sistemática de una interfaz por parte de expertos….  … para comprobar si la interfaz cumple o no determinados principios de usabilidad (las “heurísticas”).  Pasos: 1. Determinar objetivos y alcance de la evaluación. 2. Selección de las heurísticas a utilizar. 3. Evaluación y detección de problemas por parte de los expertos. 4. Puesta en común. Informe y recomendaciones. Heuristic Evaluation http://www.useit.com/papers/heuristic/ 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 31
  • 30. Heurísticas de usabilidad de Nielsen (1) Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. Match between system and the real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. http://www.nngroup.com/articles/ten-usability-heuristics/ 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 32
  • 31. Heurísticas de usabilidad de Nielsen (2) Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. Flexibility and efficiency of use Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 33
  • 32. Ejemplos de heurísticas aplicadas (1) 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 34
  • 33. Ejemplos de heurísticas aplicadas (2) 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 35
  • 34. Test de usabilidad (“thinking aloud”): involucrando a los usuarios  Una técnica evaluación: testeo con usuarios o Observar a usuarios (representativos) mientras realizan tareas típicas con la aplicación (lo que hacen, NO lo que opinan) o Hablan en voz alta sobre lo que están haciendo o No son necesarios muchos usuarios (típicamente 5)  Pasos: 1. Planificar el test 2. Preparar tareas y material 3. Preparar lugar de la prueba 4. Reclutar usuarios 5. Realizar la prueba 6. Analizar los resultados y presentar informe Usability Testing http://www.usability.gov/methods/test_refine/learnusa/index.html 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 36
  • 35. Ejemplo: usabilidad de Joomla!  Ejemplo: usabilidad de Joomla! o Tarea: cambiar el aspecto de un sitio web recién instalado  Infraestructura:  Desde un simple ordenador y alguien tomando notas en papel (en un entorno tranquilo y cómodo)….  … hasta un laboratorio de usabilidad con: • Dos habitaciones (pruebas y observación) • Cámaras de vídeo y micrófonos • Grabación de la pantalla del usuario • Espejos unidireccionales • Eyetracker • …  La tecnología ayuda, pero NO es lo más importante ¿Es Joomla! Usable? http://www.slideshare.net/jordisan/es-joomla-usable-joomla-day-2010 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 37
  • 36. “Haz fácil lo imposible”  Cómo personas no expertas en usabilidad pueden hacer sus propias pruebas de usuario internas  Un día al mes durante el desarrollo: o Dedicar una mañana haciendo pruebas con tres usuarios o Conseguir que haya observadores: desarrolladores, jefes, … o Decidir con observadores qué problemas son los prioritarios y qué cambios se van a hacer antes de la próxima ronda Haz fácil lo imposible (Anaya) http://www.anayamultimedia.es/cgigeneral/ficha.pl?id_sello_editorial_web=23&codigo_comercial=2315633# 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 38
  • 37. Evaluar está bien; pero si esperamos demasiado… http://blogs.mentor.com/johnparry/blog/2010/07/01/sony-vaio-laptop-in-mass-recall/ 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 39
  • 38. ¿Qué queremos evitar? Analista Usuario (o no) Está claro No es lo que necesito No lo encuentro No lo entiendo En realidad … 1. Requisitos 2. Desarrollo 3. Entrega 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 40
  • 39. Mejor: teniéndola en cuenta desde el principio o Múltiples técnicas en todas las etapas.  Evaluación de expertos; prototipado; casos de uso; …  Internamente, o asesoramiento externo. o Si se hace durante todo el proceso, de modo iterativo: DCU (Diseño Centrado en el Usuario) UsabilityNet: Methods table http://usabilitynet.org/tools/methods.htm En busca del Diseño Centrado en el Usuario (DCU) http://www.nosolousabilidad.com/articulos/dcu.htm 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 41
  • 40. Un paso más allá: DCU  Diseño Centrado en el Usuario o Está orientado a los usuarios del producto, que participan durante todo el proceso. o A pesar de denominarse “diseño”, en realidad se aplica durante todas las fases del desarrollo (planificación, diseño, desarrollo, evaluación), desde las primeras etapas. o Es iterativo. o Es multidisciplinar. o Su objetivo es obtener productos usables y satisfactorios para los usuarios. En busca del Diseño Centrado en el Usuario (DCU) http://www.nosolousabilidad.com/articulos/dcu.htm 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 42
  • 41. Ejemplo: prototipado + test usuario http://www.youtube.com/watch?v=9wQkLthhHKA 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 43
  • 42. Usabilidad NO-WEB (1)  La mayoría de la información práctica existente sobre usabilidad hace referencia a sitios web  ¿Hasta dónde es aplicable a otro tipo de aplicaciones?  En general: o Técnicas SÍ son aplicables a cualquier tipo de aplicación: evaluación heurística, tests con usuarios, prototipado, etc. o Principios generales (heurísticas) SÍ son aplicables a cualquier tipo de aplicación: visibilidad del estado; lenguaje del usuario; … o Los checklists y recomendaciones concretas… DEPENDE: escribir para la web; enlaces; … 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 44
  • 43. Usabilidad NO-WEB (2)  Algunas diferencias en aplicaciones desktop o móviles: o Entorno hardware/software más controlado o Estándares específicos del sistema (Apple; Microsoft; Google) o Menos libertad de navegación o Perfiles de usuario normalmente más delimitados o Expertos en usabilidad necesitan más tiempo para conocerlas  ¿Se están acercando? Windows User Experience Interaction Guidelines http://msdn.microsoft.com/en-us/library/aa511258.aspx Apple Human Interface Guidelines http://developer.apple.com/documentation/userexperience/Conceptual/AppleHIGuidelines/ 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 45
  • 44. Consejo de mínimos No se pueden aplicar todas en cada proyecto  Adecuarse a objetivos, necesidades, recursos, aspectos críticos, … Pero para empezar… o Contratar/formar personal especializado o Integrar usabilidad en el proceso de desarrollo Subconjunto (mínimo) de técnicas: • Roles de usuarios; personas (“quién”) • Casos de uso (“qué”) • Prototipado de interfaces (“cómo”) • Evaluación (heurística/pruebas con usuarios) UCDmanager Usability Planner http://www.usabilityplanner.org/ UCDmanager http://ucdmanager.net 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 46
  • 45. ACCESIBILIDAD (WEB) Y SUS BENEFICIOS 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 47
  • 46. Recordemos…  Usabilidad Que sea fácil de usar  UX (User eXperience) Que el usuario tenga una experiencia satisfactoria (suele conseguirse haciendo que sea usable)  Accesibilidad Que el usuario pueda usarlo (nos solemos referir a situaciones “especiales”) 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 48
  • 47. Definición de ACCESIBILIDAD WEB  “El poder de la Web reside en su universalidad. El acceso por cualquiera independientemente de sus discapacidades es un aspecto esencial” (Tim Berners-Lee, uno de los padres de la Web)  “Hablar de Accesibilidad Web es hablar del acceso de todos a la Web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios.” (W3C, oficina española)  Que el mayor número de usuarios acceda a la Web  NO existe la “accesibilidad absoluta” 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 49
  • 48. MITO: accesibilidad web es “para ciegos” FALSO.  Es cierto que los criterios de accesibilidad ayudan a personas con deficiencias físicas (visuales, auditivas, motrices), cognitivas, de lenguaje, … Y TAMBIÉN…  Usuarios con discapacidades temporales (enfermedades, convalecencias)  Usuarios de edad avanzada  Dispositivos menos (?) habituales: móviles, SmartTV; versiones antiguas SO/navegador; conexiones lentas  Entornos especiales (kioskos públicos; entornos ruidosos, fábricas, etc.) 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 51
  • 49. Beneficios de accesibilidad (obvios)  Maximizar los posibles usuarios/clientes  Seguir estándares facilita el desarrollo y mantenimiento  Por imagen pública … Web Accessibility Initiative (WAI) http://www.w3.org/WAI/ 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 52
  • 50. Accesibilidad: más beneficios o y además…  Mejora el posicionamiento en buscadores (SEO) o textos alternativos; identificar idioma; documentos bien estructurados; …  Por normativa legal o Los sitios web de administraciones públicas (o con financiación pública; o “de especial interés”) deben cumplir un nivel mínimo de accesibilidad High Accessibility Is Effective Search Engine Optimization http://www.alistapart.com/articles/accessibilityseo Referencia sobre legislación española relacionada con la accesibilidad web http://olgacarreras.blogspot.com/2005/01/referencia- sobre-legislacin-espaola.html 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 53
  • 51. PROBLEMAS DE ACCESIBILIDAD. CÓMO SER ACCESIBLE 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 54
  • 52. PROBLEMAS habituales de accesibilidad (1) Personas con problemas visuales (o dispositivos como SmartTV, móviles, etc.)  Sólo “ven” texto de modo secuencial (usan lectores de pantalla/navegadores por voz)  Necesitan textos grandes  No distinguen bien los colores Cuidado con: o Imágenes sin descripción textual o Tablas y marcos (frames) mal etiquetados o Colores de bajo contraste o Texto no escalable o Ventanas emergentes (pop-up) o No funcionan con teclado 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 55
  • 53. PROBLEMAS habituales de accesibilidad (2) Personas con discapacidades cognitivas / de aprendizaje (o en entornos complejos; o con poco dominio del idioma; …)  Pueden tener problemas para “entender” los contenidos o para concentrarse  Problemas de memoria Cuidado con: o Documentos con estructura mal definida o Demasiada información en una página o Lenguaje innecesariamente complejo o Falta de imágenes para clarificar el texto o Animaciones y elementos decorativos superfluos 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 56
  • 54. Normativa sobre extranjeros 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 57
  • 55. PROBLEMAS habituales de accesibilidad (3) Personas con discapacidades auditivas (o en entornos ruidosos; o en equipos sin hardware de audio)  Pueden tener problemas para acceder a los contenidos sonoros Cuidado con: o Audio/vídeo sin descripciones textuales o Frases complejas o demasiado largas 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 58
  • 56. Subtítulos 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 59
  • 57. PROBLEMAS habituales de accesibilidad (4) Personas con discapacidades motoras (o no disponen de ratón)  Tienen que usar el teclado u otros dispositivos (reconocimiento de voz) Cuidado con: o Páginas que no funcionan con teclado 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 60
  • 58. MITO: para ser accesible basta con tener una versión “sólo texto” FALSO.  Sólo para determinados usuarios  Suponen una discriminación (“entrar por la puerta trasera”)  Problemas por contenidos duplicados: o mantenimiento o indexación en buscadores  Se descuida la accesibilidad de la versión “normal”  ¿Cómo llego a la versión accesible? MEJOR: si es posible, una única versión que cumpla los estándares de accesibilidad 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 61
  • 59. Tiene “versión sólo texto”, pero… 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 62
  • 60. … sin imágenes… ¿Cómo accedo a la versión “sólo texto”? 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 63
  • 61. ¿CÓMO consigo que mi web sea ACCESIBLE?  Conociendo y cumpliendo los estándares o De los lenguajes utilizados (HTML; CSS; etc.) o Específicos de accesibilidad  Testeando o Diferentes entornos (navegadores, sistemas operativos, etc.) o Con usuarios reales 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 64
  • 62. ¿Qué ESTÁNDARES? (1)  Lenguajes/técnicas utilizados: o HTML válido o CSS válido o JavaScript “no obstructivo” o Etc.  IMPORTANTE: separar contenido vs. aspecto o El mismo contenido para todos los usuarios o Aspecto en función de las condiciones particulares  IMPORTANTE: compatibilidad multinavegador 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 65
  • 63. Con el mismo contenido HTML… 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 66
  • 64. ¿Qué ESTÁNDARES? (2) Recomendaciones y normativas específicas sobre accesibilidad web:  Section 508 (USA)  WAI (Web Accessibility Initiative) o Internacionales, W3C o Sugeridas por la Comisión Europea  UNE 139803 “Requisitos de accesibilidad para contenidos Web” (España) o Basada en WAI o Obligatoria por Ley para sitios web de Administraciones Públicas 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 67
  • 65. WAI (Web Accessibility Initiative)  Forma parte del W3C (World Wide Web Consortium)  Recomendaciones y directrices sobre: o Contenido web (WCAG)  Contenidos web accesibles  Referencia de normas UNE o Herramientas de autor (ATAG)  Herramientas de creación accesibles y  que generen contenidos accesibles o Agentes usuario (navegadores) (UAAG)  Navegadores accesibles o Rich Applications (WAI-ARIA)  Para aplicaciones RIA 2.0 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 68
  • 66. WCAG (Web Content Accessibility Guidelines)  Cómo crear contenidos web accesibles. Versión 2.0  4 principios generales del contenido web: o Perceptible o Operable o Inteligible o Robusto Cada principio incluye directrices (guidelines) Cada guideline incluye criterios de éxito con prioridad:  A = Debe satisfacerse; requerimientos básicos  AA = Debería satisfacerse; eliminar barreras significativas  AAA = Puede satisfacerse; acceso mejorado  Además: técnicas, ejemplos, enlaces, etc. 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 69
  • 67. WCAG: ejemplo guideline 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 70
  • 68. Texto alternativo ¡También por SEO! 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 71
  • 69. WCAG: niveles de cumplimiento A, AA y AAA  3 niveles de cumplimiento de las guidelines WCAG por parte de páginas o sitios web:  Conformidad nivel “A” o Cumple todos los criterios A (“deben”)  Conformidad nivel “AA” o Cumple todos los criterios A y AA (“deberían”)  Conformidad nivel “AAA” o Cumple todos los criterios A, AA y AAA (“pueden”)  Las declaraciones de conformidad (“los sellos”) se incluyen por decisión propia (W3C NO las verifica)  Habitualmente se intenta alcanzar el nivel “AA” 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 74
  • 70. EVALUACIONES DE ACCESIBILIDAD 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 75
  • 71. Evaluaciones de accesibilidad: manual  Leyendo el contenido: o Lenguaje sencillo o Abreviaturas, idiomas, … o ¿Se entiende?  Comprobar navegadores gráficos o Firefox, Internet Explorer, Opera, Safari, … o Diferentes plataformas, versiones y sistemas operativos o Diferentes configuraciones:  Desactivando imágenes, CSS, JavaScript, sonido, etc.  Diferentes resoluciones de pantalla, tamaños de texto, combinaciones de colores o B/N, etc.  Usar navegadores sólo texto; lectores de pantalla  Usar dispositivos alternativos (sólo con teclado) 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 76
  • 72. Evaluaciones de accesibilidad: herramientas  Online y offline  Para comprobar sintaxis de HTML, CSS, etc. o W3C (HTML Validation Service; CSS Validation Service; etc.) W3C Unicorn o Otras herramientas (HTML Tidy; Dreamweaver; etc.)  Para validación de accesibilidad o WebXACT/Bobby; Cynthia Says; TAW; eXaminator TAW o Comprueban si se cumplen determinados checkpoints de WCAG o Sirven como herramienta de apoyo, pero NO son suficientes para evaluar la accesibilidad 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 77
  • 73. MITO: los validadores automáticos indican si una página es accesible o no FALSO.  Los validadores comprueban la sintaxis (HTML, CSS, etc.)  Los validadores comprueban algunos checkpoints PERO…  Muchos checkpoints son interpretables y necesitan validación manual.  Las herramientas automáticas pueden producir “falsos negativos” y “falsos positivos” Guidelines, checkpoints, validadores automáticos y sellos son herramientas e indicadores, NO un objetivo Lo importante: la accesibilidad real 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 78
  • 74. Pruebas accesibilidad con usuarios  Similares a los tests de usabilidad: o Observación de usuarios reales mientras se enfrentan al sitio web  Proporcionan mucha información útil, pero son muy complejos: o Definir tareas representativas o Existe gran cantidad de tipologías de discapacidad 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 83
  • 75. Retos de accesibilidad: RIA (Rich Internet Applications)  Conseguir interfaces “de escritorio” en la web  Algunas aplicaciones: o Google (Gmail; Google Maps); Flickr; YouTube; ...  Tecnologías: o AJAX; Flash; Java; DHTML; etc.  Ya no son interfaces “insertados” en una página web, sino que son la propia interfaz.  WAI-ARIA (WAI Accessible Rich Internet Applications) o Iniciativa de W3C en desarrollo Mientras tanto… o Estándares para conseguir degradación progresiva o Proporcionar versión alternativa 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 84
  • 76. Gmail, con y sin JavaScript 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 85
  • 77. Más retos: normativas y certificaciones  En ESPAÑA, las webs de las Administraciones Públicas deberán cumplir las prioridades 1 y 2 de la Norma UNE 139803:2004 (similares a WCAG “AA”) o W3C no es un organismo “oficial” de estandarización  AENOR certifica oficialmente esa accesibilidad  Pero NO es imprescindible obtener esa certificación para declarar que una página es accesible 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 86
  • 78. MITO: las páginas accesibles son feas  “Para muestra, un botón”  Las siguientes páginas tienen un alto nivel de accesibilidad… 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 87
  • 79. http://www.inretirementservices.co.uk/ ACCESIBILIDAD WEB. 29-nov-2007, Madrid 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 88
  • 80. http://geekministry.com/old_geek/ ACCESIBILIDAD WEB. 29-nov-2007, Madrid 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 89
  • 81. http://snowdog.pl/ ACCESIBILIDAD WEB. 29-nov-2007, Madrid 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 90
  • 82. http://www.3point7designs.com/ ACCESIBILIDAD WEB. 29-nov-2007, Madrid 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 91
  • 83. ¿Por qué es importante ACCESIBILIDAD?  Permite que el mayor número posible de personas acceda a los contenidos (no sólo discapacitados).  Beneficia a todos los usuarios, haciéndoles más fácil el acceso a las páginas (mejor usabilidad).  Reduce costes de mantenimiento/desarrollo: o Una única versión para todas las plataformas o Es más fácil hacer cambios (contenido vs. presentación) o Mayor “vida útil” de los contenidos o Las técnicas se pueden aplicar a diferentes sitios  Cumplir estándares mejora la visibilidad en Internet (SEO) y la compatibilidad multinavegador.  Para determinados sitios, cumplir con la Ley. 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 92
  • 84. EN CONCLUSIÓN … 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 93
  • 85. Usabilidad (y accesibilidad) son “muy agradecidas”  No requieren grandes inversiones  Habitualmente dan resultados muy buenos  Pueden significar la diferencia entre: o el éxito y el fracaso o tú y tu competencia http://www.zdnet.com/shuttleworth-open-source-desktops-need-a-facelift-2062046056/ 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 94
  • 86. Consejo de mínimos (recordatorio)  Contratar/formar personal especializado  Integrar usabilidad en el proceso de desarrollo Subconjunto (mínimo) de técnicas:  Roles de usuarios; personas (“quién”)  Casos de uso (“qué”)  Prototipado de interfaces (“cómo”)  Evaluación (heurística/pruebas con usuarios) 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 95
  • 87. ¿Estás seguro de que tu producto o sitio web no es así? 22/03/2013 usabilidad - UX - accesibilidad Jordi Sánchez - @jordisan - http://jordisan.net 96
  • 88. USABILIDAD, UX Y ACCESIBILIDAD: QUÉ SON Y POR QUÉ DEBERÍAN PREOCUPARME Jordi Sánchez http://jordisan.net @jordisan