USABILIDAD I
La  usabilidad  (del inglés  usability ) es la medida de  la facilidad de uso  de un  producto  o  servicio , típicamente ...
Usabilidad es un  atributo de calidad  que  mide  lo fáciles de usar que son las interfaces web. ¿Qué es la usabilidad? Fu...
La usabilidad se refiere a la capacidad de un software de ser  comprendido ,  aprendido ,  usado  y ser atractivo para el ...
La usabilidad se refiere a la capacidad de un software de ser  comprendido ,  aprendido ,  usado  y ser atractivo para el ...
QUIERO QUE MI WEB VENDA. Un objetivo es importante QUIERO GANAR DINERO CON MI NEGOCIO ONLINE. QUIERO VENDER MÁS QUE NADIE....
QUE MIS USUARIOS TENGAN UNA EXPERIENCIA POSITIVA Aunque se pueden tener más… QUIERO OFRECER INFORMACIÓN QUIERO POTENCIAR M...
Contexto <ul><li>El  marketing convencional está cambiando , las estrategias deben tomar un nuevo rumbo. </li></ul><ul><li...
Contexto Web 1.0 Web 2.0 Leo Escribo Taxonomía Folksonomy Webs como islas Webs como piezas de lego Programas/ productos Ap...
¿Cómo lo hago? · Satisfacer al  usuario · Dejarle ver mis productos · Facilitarle la búsqueda de productos · Enseñarle tod...
¿Cómo lo hago? MAL · Problemas de legibilidad · Enlaces alejados de su formato estándar · Uso inadecuado de Flash · Conten...
Vamos por lo básico · El contenido. LEGIBLE. · El contenido que espera el usuario. · Sistemas de búsqueda adaptados. · For...
Ejemplo : Textos pequeños
Ejemplo : Enlaces no estándar
Ejemplo : Uso indebido de Flash “ Cuando llegan clientes pensando en páginas ‘splash’ en Flash, les recomendamos que vayan...
Ejemplo : Textos no escrito para Web
Ejemplo : Búsquedas no eficaces
Ejemplo : Incompatibilidad Browser
Ejemplo : Entendimiento 1.  ¿Por qué no colocar algo de información sobre el iPhone?  2. El botón “Comunicado oficial” es ...
Ejemplo : Los formularios matan
Ejemplo : Entender el canal
Ejemplo : Dejate de Intros
Ejemplo : Arquitectura de la info…
Para ir aún más allá En el site  Fuera del site Experiencia de usuario <ul><li>Usabilidad </li></ul><ul><li>Diseño emocion...
Objetivos
Objetivos Experiencia de usuario Según Peter Morville, estos factores son: La experiencia de usuario es el conjunto de fac...
Objetivos
Un buen ejemplo <ul><li>Útil : Tienen todo lo que estoy buscando. </li></ul><ul><li>Usable:  Es muy fácil en con pocos cli...
Ejemplo : Tecnología · Se trata de aplicar los estándares web · Se trata de tomar en cuenta la accesibilidad · Se trata de...
Ejemplo : Tecnología · Se trata de  satisfacer al usuario · Se trata de  dejarle ver que vendo · Se trata de  facilitarle ...
Ejemplo : Sin Tecnología Satisfacer al usuario Ver el producto Facilitar búsqueda Enseñarle todo Mantenerle informado No d...
Ejemplo : Con Tecnología Estándares web Accesibilidad Arquitectura de la información Findability Rotulado Usabilidad Exper...
Ejemplo : Solo con Tecnología Estándares web Accesibilidad Arquitectura de la información Findability Rotulado Usabilidad ...
Ejemplo : Con Tecnología Satisfacer al usuario Ver el producto Facilitar búsqueda Enseñarle todo Mantenerle informado No d...
Ejemplo : Con Tecnología Si hablamos de personas debemos tenerlas en cuenta antes que cualquier otro objetivo.
Ejemplo : Con Tecnología Ellos son los que deciden. No confundamos. Usuarios = Cliente Usuarios = Cliente Potencial Tampoco.
Ejemplo : Con Tecnología Dejemos de momento el tema aquí ;-P
El  diseño gráfico  consiste en concebir y realizar  comunicaciones visuales , destinadas a transmitir mensajes específico...
El diseño gráfico NO es hacer cosas guapas y molonas, ni retocar fotacas en photoshop, ni hacer banners wapos y fotones a ...
Es mas sencillo. Consiste en transmitir un mensaje a una persona de manera visual. ¿Qué tiene que ver con el diseño?
Transmitir. Dirigir. Convencer. Controlar. ¿Puede ser?
Si ya eres la ostia
Diseño y Web ¿Tenemos claro que no hablamos de imagen?
Diseño La web es un medio con unas características y personalidad propia.
Diseño Es muy diferente de las normas y reglas de un libro o una revista.
Diseño España es un país de  artistas. No os dejéis  influenciar.
¿Qué opináis de esto?
Hasta ahora todo normal Craigslist  es una red centralizada de comunidades urbanas en línea, ofreciendo anuncios clasifica...
Ufff Ingresos estimados 2007 : $55 millones Ingresos estimados 2008 : $81 millones Páginas vistas al mes : 9.000 millones ...
¿Porque? · Todo es a raíz del feedback de los usuarios.  · En 12 años NUNCA ha estado caído el sitio (en ese momento tenia...
¿Porque? Es usable Todo es estándar Enfocado en el usuario Los usuarios mantienen la información Esto se traduce en… TRANS...
¿Porque? Usuarios fieles o COMUNIDAD SÓLIDA Y EVANGELISTAS
Recordemos La web no se hace para nosotros mismos, tampoco para nuestros clientes, ni sabe de críticas de artistas y libre...
Recordemos usuarios
Recordemos usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usu...
El usuario es la clave usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios ...
Aunque sean…
O sean…
Incluso…
Entonces… Aquí no hay estilo propio . Sí te fastidia. No te caen bién. Vale. Pero… TU ERES UN PROFESIONAL
Ten claro… Y lo que es más importante EL CLIENTE QUIERE RESULTADOS Y EL QUE CUENTA ES EL USUARIO
¿Por qué? ¿Por qué?
Y no es tan malo, ¿no? Por lo de siempre… · Dinero · Pasta · MoneyMoneyMoney · $$$
Visto así mejor ¿Quieres algo más profundo? · Porque eres un profesional · Porque consigues un objetivo · Por ser resoluti...
O también… ¿Y si no?
Que tengas suerte!! Entonces hazte  artista
En resumen… + + + + = DISEÑO ACCESIBILIDAD ANALÍTICA WEB USABILIDAD CONVERSIÓN
Google Video
YouTube
Diferencias 2 cm
<ul><li>Perfil de usuarios </li></ul><ul><li>Personas </li></ul><ul><li>Análisis heurístico </li></ul><ul><li>Benchmarking...
Gracias
Upcoming SlideShare
Loading in...5
×

USABILIDAD WEB

3,251

Published on

Diapos sobre usabilidad

Published in: Design, Technology

Transcript of "USABILIDAD WEB"

  1. 1. USABILIDAD I
  2. 2. La usabilidad (del inglés usability ) es la medida de la facilidad de uso de un producto o servicio , típicamente una aplicación software o un aparato (hardware). ¿Qué es la usabilidad? Fuente : Wikipedia
  3. 3. Usabilidad es un atributo de calidad que mide lo fáciles de usar que son las interfaces web. ¿Qué es la usabilidad? Fuente : Jakob Nielsen
  4. 4. La usabilidad se refiere a la capacidad de un software de ser comprendido , aprendido , usado y ser atractivo para el usuario , en condiciones específicas de uso . ¿Qué es la usabilidad? Fuente : Org. Internacional para la Estandarización
  5. 5. La usabilidad se refiere a la capacidad de un software de ser comprendido , aprendido , usado y ser atractivo para el usuario , en condiciones específicas de uso . ¿Qué es la usabilidad? Fuente : Org. Internacional para la Estandarización
  6. 6. QUIERO QUE MI WEB VENDA. Un objetivo es importante QUIERO GANAR DINERO CON MI NEGOCIO ONLINE. QUIERO VENDER MÁS QUE NADIE. QUIERO VENDERLO TODO.
  7. 7. QUE MIS USUARIOS TENGAN UNA EXPERIENCIA POSITIVA Aunque se pueden tener más… QUIERO OFRECER INFORMACIÓN QUIERO POTENCIAR MI IMAGEN
  8. 8. Contexto <ul><li>El marketing convencional está cambiando , las estrategias deben tomar un nuevo rumbo. </li></ul><ul><li>La publicidad en TV está muerta , debemos descubrir nuevas fórmulas. </li></ul><ul><li>Los internautas sufren “banner blindness” , debemos ir más allá del banner. </li></ul><ul><li>La web 2.0 es nuestro nuevo paradigma , lo cual no implica que todos debemos migrar a 2.0 </li></ul><ul><li>Los productos nacen en Internet. </li></ul>
  9. 9. Contexto Web 1.0 Web 2.0 Leo Escribo Taxonomía Folksonomy Webs como islas Webs como piezas de lego Programas/ productos Aplicaciones y servicios en linea Desktop Webtop Interfaz compleja Interfaz simple Innovación decendente Innovación ascendete
  10. 10. ¿Cómo lo hago? · Satisfacer al usuario · Dejarle ver mis productos · Facilitarle la búsqueda de productos · Enseñarle todo lo que necesita saber · Mantenerle informado · No dejarle solo · Ser transparentes
  11. 11. ¿Cómo lo hago? MAL · Problemas de legibilidad · Enlaces alejados de su formato estándar · Uso inadecuado de Flash · Contenido no escrito para la web · Búsquedas deficientes · Incompatibilidades entre navegadores · Formularios incómodos · Ausencia de vías de contacto · Ampliación inadecuada de las imágenes
  12. 12. Vamos por lo básico · El contenido. LEGIBLE. · El contenido que espera el usuario. · Sistemas de búsqueda adaptados. · Formularios cortos, simples. · Que no haya nada que no funcione - Enlaces rotos - Contenido sin actualizar · Esquema fácil e intuitivo
  13. 13. Ejemplo : Textos pequeños
  14. 14. Ejemplo : Enlaces no estándar
  15. 15. Ejemplo : Uso indebido de Flash “ Cuando llegan clientes pensando en páginas ‘splash’ en Flash, les recomendamos que vayan al supermercado más cercano y lleven un mimo consigo. Instalen al mimo en la puerta, y, cada vez que un cliente vaya a entrar hagan que les brinde una presentación de uno o dos minutos, dándoles la bienvenida al establecimiento e intentándoles comunicar que el pan está en el pasillo seis y la leche está en oferta hoy”. Fuente : Jared Spool. Ingeniero de Interfaces de Usuario en Macromedia
  16. 16. Ejemplo : Textos no escrito para Web
  17. 17. Ejemplo : Búsquedas no eficaces
  18. 18. Ejemplo : Incompatibilidad Browser
  19. 19. Ejemplo : Entendimiento 1. ¿Por qué no colocar algo de información sobre el iPhone? 2. El botón “Comunicado oficial” es más grande que el botón enviar. 3. El típico check del aviso legal está descontextualizado 4. el botón “registrar” es muy pequeño, además el literal no es muy acertado
  20. 20. Ejemplo : Los formularios matan
  21. 21. Ejemplo : Entender el canal
  22. 22. Ejemplo : Dejate de Intros
  23. 23. Ejemplo : Arquitectura de la info…
  24. 24. Para ir aún más allá En el site Fuera del site Experiencia de usuario <ul><li>Usabilidad </li></ul><ul><li>Diseño emocional </li></ul><ul><li>Accesibilidad </li></ul><ul><li>Credibilidad </li></ul><ul><li>Funcionalidad </li></ul><ul><li>Branding </li></ul><ul><li>Contenido </li></ul><ul><li>Branding </li></ul><ul><li>Findability </li></ul>Experiencia de usuario Canales Interacción 1 a 1 Interacción 1 a n Dispositivos Nuevas herramientas En el site Fuera del site <ul><li>Usabilidad </li></ul><ul><li>Diseño emocional </li></ul><ul><li>Accesibilidad </li></ul><ul><li>Credibilidad </li></ul><ul><li>Funcionalidad </li></ul><ul><li>Branding </li></ul><ul><li>Contenido </li></ul><ul><li>Más Branding </li></ul><ul><li>Más Findability </li></ul><ul><li>Proximidad </li></ul><ul><li>Contenido </li></ul><ul><li>Funcionalidad </li></ul><ul><li>Presencia online/offline </li></ul><ul><li>Marketing 360º </li></ul><ul><li>No intrusividad </li></ul>Visión actual Visión 2.0
  25. 25. Objetivos
  26. 26. Objetivos Experiencia de usuario Según Peter Morville, estos factores son: La experiencia de usuario es el conjunto de factores y elementos relativos a la interacción del usuario, con un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción positiva de dicho servicio, producto o dispositivo. “ ”
  27. 27. Objetivos
  28. 28. Un buen ejemplo <ul><li>Útil : Tienen todo lo que estoy buscando. </li></ul><ul><li>Usable: Es muy fácil en con pocos click ya he compadro </li></ul><ul><li>De valor : Me gusta la marca, me identifico con ello. </li></ul><ul><li>Deseable : Todo lo que tienen me gusta. </li></ul><ul><li>Encontrable : siempre que pongo un libro en Google me sale de primero. </li></ul><ul><li>Accesible: Me gusta porque tiene letras grandes, me cuesta leer en pantalla. </li></ul><ul><li>Creible: Me inspira confianza no me importa dejar mi tarjeta de crédito. </li></ul>
  29. 29. Ejemplo : Tecnología · Se trata de aplicar los estándares web · Se trata de tomar en cuenta la accesibilidad · Se trata de plasmar la imagen que quiero dar · Se trata de organizar los contenidos · Se trata de hacer todo encontrable · Se trata de comprobar la usabilidad
  30. 30. Ejemplo : Tecnología · Se trata de satisfacer al usuario · Se trata de dejarle ver que vendo · Se trata de facilitarle la búsqueda · Se trata de enseñarle todo lo que necesite · Se trata de mantenerle informado · Se trata de no dejarle solo · Se trata de practicar la transparencia como estrategia
  31. 31. Ejemplo : Sin Tecnología Satisfacer al usuario Ver el producto Facilitar búsqueda Enseñarle todo Mantenerle informado No dejarlo solo Ser Transparente
  32. 32. Ejemplo : Con Tecnología Estándares web Accesibilidad Arquitectura de la información Findability Rotulado Usabilidad Experiencia de Usuario Satisfacer al usuario Ver el producto Facilitar búsqueda Enseñarle todo Mantenerle informado No dejarlo solo Ser Transparente
  33. 33. Ejemplo : Solo con Tecnología Estándares web Accesibilidad Arquitectura de la información Findability Rotulado Usabilidad Experiencia de Usuario Satisfacer al usuario
  34. 34. Ejemplo : Con Tecnología Satisfacer al usuario Ver el producto Facilitar búsqueda Enseñarle todo Mantenerle informado No dejarlo solo Ser Transparente
  35. 35. Ejemplo : Con Tecnología Si hablamos de personas debemos tenerlas en cuenta antes que cualquier otro objetivo.
  36. 36. Ejemplo : Con Tecnología Ellos son los que deciden. No confundamos. Usuarios = Cliente Usuarios = Cliente Potencial Tampoco.
  37. 37. Ejemplo : Con Tecnología Dejemos de momento el tema aquí ;-P
  38. 38. El diseño gráfico consiste en concebir y realizar comunicaciones visuales , destinadas a transmitir mensajes específicos a grupos sociales determinados, posibilitando comunicar gráficamente ideas, hecho y valores. ¿Qué tiene que ver con el diseño?
  39. 39. El diseño gráfico NO es hacer cosas guapas y molonas, ni retocar fotacas en photoshop, ni hacer banners wapos y fotones a media pantalla. ¿Qué NO tiene que ver?
  40. 40. Es mas sencillo. Consiste en transmitir un mensaje a una persona de manera visual. ¿Qué tiene que ver con el diseño?
  41. 41. Transmitir. Dirigir. Convencer. Controlar. ¿Puede ser?
  42. 42. Si ya eres la ostia
  43. 43. Diseño y Web ¿Tenemos claro que no hablamos de imagen?
  44. 44. Diseño La web es un medio con unas características y personalidad propia.
  45. 45. Diseño Es muy diferente de las normas y reglas de un libro o una revista.
  46. 46. Diseño España es un país de artistas. No os dejéis influenciar.
  47. 47. ¿Qué opináis de esto?
  48. 48. Hasta ahora todo normal Craigslist  es una red centralizada de comunidades urbanas en línea, ofreciendo anuncios clasificados gratis (de empleo, vivienda, sentimentales, artículos para la venta/trueque/se busca, servicios, comunidad, los &quot;gigs&quot; (trabajos de corta duración) y categorías de currículum vítae y foros clasificados por varios tópicos.
  49. 49. Ufff Ingresos estimados 2007 : $55 millones Ingresos estimados 2008 : $81 millones Páginas vistas al mes : 9.000 millones (o 300 millones al día) Ofertas de trabajo listadas al mes : 2 millones Anuncios totales listados al mes : 30 millones Fotos subidas al mes  : 10 millones Empleados : 25
  50. 50. ¿Porque? · Todo es a raíz del feedback de los usuarios. · En 12 años NUNCA ha estado caído el sitio (en ese momento tenian 7000 millones de paginas vistas y 200 servidores) · En Craigslist no hay reuniones ( yo he trabajado en alguna empresa donde casi TODO eran reuniones inútiles, por eso me sorprende…)
  51. 51. ¿Porque? Es usable Todo es estándar Enfocado en el usuario Los usuarios mantienen la información Esto se traduce en… TRANSPARENCIA Y POR TANTO…
  52. 52. ¿Porque? Usuarios fieles o COMUNIDAD SÓLIDA Y EVANGELISTAS
  53. 53. Recordemos La web no se hace para nosotros mismos, tampoco para nuestros clientes, ni sabe de críticas de artistas y librepensadores. La web es por y para los usuarios. Este y solo este es el indicador del éxito.
  54. 54. Recordemos usuarios
  55. 55. Recordemos usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios
  56. 56. El usuario es la clave usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios usuarios
  57. 57. Aunque sean…
  58. 58. O sean…
  59. 59. Incluso…
  60. 60. Entonces… Aquí no hay estilo propio . Sí te fastidia. No te caen bién. Vale. Pero… TU ERES UN PROFESIONAL
  61. 61. Ten claro… Y lo que es más importante EL CLIENTE QUIERE RESULTADOS Y EL QUE CUENTA ES EL USUARIO
  62. 62. ¿Por qué? ¿Por qué?
  63. 63. Y no es tan malo, ¿no? Por lo de siempre… · Dinero · Pasta · MoneyMoneyMoney · $$$
  64. 64. Visto así mejor ¿Quieres algo más profundo? · Porque eres un profesional · Porque consigues un objetivo · Por ser resolutivo · Porque tu lo vales!!
  65. 65. O también… ¿Y si no?
  66. 66. Que tengas suerte!! Entonces hazte artista
  67. 67. En resumen… + + + + = DISEÑO ACCESIBILIDAD ANALÍTICA WEB USABILIDAD CONVERSIÓN
  68. 68. Google Video
  69. 69. YouTube
  70. 70. Diferencias 2 cm
  71. 71. <ul><li>Perfil de usuarios </li></ul><ul><li>Personas </li></ul><ul><li>Análisis heurístico </li></ul><ul><li>Benchmarking </li></ul><ul><li>Focus groups </li></ul><ul><li>Diseño participativo </li></ul><ul><li>Card sorting </li></ul><ul><li>Análisis de estadísticas </li></ul><ul><li>Arquitectura de la información </li></ul><ul><li>Prototipos </li></ul><ul><li>Maquetas </li></ul><ul><li>Validación con usuarios </li></ul><ul><li>Test de usuarios </li></ul><ul><li>A/B testing </li></ul><ul><li>Test observacional </li></ul>Analiza Prototipa Haz pruebas
  72. 72. Gracias
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×