USABILIDAD WEB
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

USABILIDAD WEB

on

  • 3,086 views

Diapos sobre usabilidad

Diapos sobre usabilidad

Statistics

Views

Total Views
3,086
Views on SlideShare
2,913
Embed Views
173

Actions

Likes
6
Downloads
218
Comments
0

7 Embeds 173

http://www.piolaestudio.com 67
http://www.inacap.cl 54
http://www.auladospuntocero.es 26
http://192.168.0.15 12
http://192.168.50.15 10
http://piolaestudio.com 3
http://10.14.25.96 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

USABILIDAD WEB Presentation Transcript

  • 1. USABILIDAD I
  • 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. 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. 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. 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. 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. QUE MIS USUARIOS TENGAN UNA EXPERIENCIA POSITIVA Aunque se pueden tener más… QUIERO OFRECER INFORMACIÓN QUIERO POTENCIAR MI IMAGEN
  • 8. Contexto
    • El marketing convencional está cambiando , las estrategias deben tomar un nuevo rumbo.
    • La publicidad en TV está muerta , debemos descubrir nuevas fórmulas.
    • Los internautas sufren “banner blindness” , debemos ir más allá del banner.
    • La web 2.0 es nuestro nuevo paradigma , lo cual no implica que todos debemos migrar a 2.0
    • Los productos nacen en Internet.
  • 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. ¿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. ¿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. 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. Ejemplo : Textos pequeños
  • 14. Ejemplo : Enlaces no estándar
  • 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. Ejemplo : Textos no escrito para Web
  • 17. Ejemplo : Búsquedas no eficaces
  • 18. Ejemplo : Incompatibilidad Browser
  • 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. Ejemplo : Los formularios matan
  • 21. Ejemplo : Entender el canal
  • 22. Ejemplo : Dejate de Intros
  • 23. Ejemplo : Arquitectura de la info…
  • 24. Para ir aún más allá En el site Fuera del site Experiencia de usuario
    • Usabilidad
    • Diseño emocional
    • Accesibilidad
    • Credibilidad
    • Funcionalidad
    • Branding
    • Contenido
    • Branding
    • Findability
    Experiencia de usuario Canales Interacción 1 a 1 Interacción 1 a n Dispositivos Nuevas herramientas En el site Fuera del site
    • Usabilidad
    • Diseño emocional
    • Accesibilidad
    • Credibilidad
    • Funcionalidad
    • Branding
    • Contenido
    • Más Branding
    • Más Findability
    • Proximidad
    • Contenido
    • Funcionalidad
    • Presencia online/offline
    • Marketing 360º
    • No intrusividad
    Visión actual Visión 2.0
  • 25. Objetivos
  • 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. Objetivos
  • 28. Un buen ejemplo
    • Útil : Tienen todo lo que estoy buscando.
    • Usable: Es muy fácil en con pocos click ya he compadro
    • De valor : Me gusta la marca, me identifico con ello.
    • Deseable : Todo lo que tienen me gusta.
    • Encontrable : siempre que pongo un libro en Google me sale de primero.
    • Accesible: Me gusta porque tiene letras grandes, me cuesta leer en pantalla.
    • Creible: Me inspira confianza no me importa dejar mi tarjeta de crédito.
  • 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. 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. Ejemplo : Sin Tecnología Satisfacer al usuario Ver el producto Facilitar búsqueda Enseñarle todo Mantenerle informado No dejarlo solo Ser Transparente
  • 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. Ejemplo : Solo con Tecnología Estándares web Accesibilidad Arquitectura de la información Findability Rotulado Usabilidad Experiencia de Usuario Satisfacer al usuario
  • 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. Ejemplo : Con Tecnología Si hablamos de personas debemos tenerlas en cuenta antes que cualquier otro objetivo.
  • 36. Ejemplo : Con Tecnología Ellos son los que deciden. No confundamos. Usuarios = Cliente Usuarios = Cliente Potencial Tampoco.
  • 37. Ejemplo : Con Tecnología Dejemos de momento el tema aquí ;-P
  • 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. 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. Es mas sencillo. Consiste en transmitir un mensaje a una persona de manera visual. ¿Qué tiene que ver con el diseño?
  • 41. Transmitir. Dirigir. Convencer. Controlar. ¿Puede ser?
  • 42. Si ya eres la ostia
  • 43. Diseño y Web ¿Tenemos claro que no hablamos de imagen?
  • 44. Diseño La web es un medio con unas características y personalidad propia.
  • 45. Diseño Es muy diferente de las normas y reglas de un libro o una revista.
  • 46. Diseño España es un país de artistas. No os dejéis influenciar.
  • 47. ¿Qué opináis de esto?
  • 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 "gigs" (trabajos de corta duración) y categorías de currículum vítae y foros clasificados por varios tópicos.
  • 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. ¿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. ¿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. ¿Porque? Usuarios fieles o COMUNIDAD SÓLIDA Y EVANGELISTAS
  • 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. Recordemos usuarios
  • 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. 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. Aunque sean…
  • 58. O sean…
  • 59. Incluso…
  • 60. Entonces… Aquí no hay estilo propio . Sí te fastidia. No te caen bién. Vale. Pero… TU ERES UN PROFESIONAL
  • 61. Ten claro… Y lo que es más importante EL CLIENTE QUIERE RESULTADOS Y EL QUE CUENTA ES EL USUARIO
  • 62. ¿Por qué? ¿Por qué?
  • 63. Y no es tan malo, ¿no? Por lo de siempre… · Dinero · Pasta · MoneyMoneyMoney · $$$
  • 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. O también… ¿Y si no?
  • 66. Que tengas suerte!! Entonces hazte artista
  • 67. En resumen… + + + + = DISEÑO ACCESIBILIDAD ANALÍTICA WEB USABILIDAD CONVERSIÓN
  • 68. Google Video
  • 69. YouTube
  • 70. Diferencias 2 cm
  • 71.
    • Perfil de usuarios
    • Personas
    • Análisis heurístico
    • Benchmarking
    • Focus groups
    • Diseño participativo
    • Card sorting
    • Análisis de estadísticas
    • Arquitectura de la información
    • Prototipos
    • Maquetas
    • Validación con usuarios
    • Test de usuarios
    • A/B testing
    • Test observacional
    Analiza Prototipa Haz pruebas
  • 72. Gracias