Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario

13,251 views

Published on

Published in: Technology, Design
  • Muy enriquecedor, toca puntos trascendentales que son demasiado sencillos, pero que al momento de diseñar siempre se dejan de lado.



    Es complementario de cualquier temario de E-Comm. Espero que logres difundirlo por el bien de la profesionalización de los Aprendices.



    Felicitaciones
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sencillo, concreto y claro!

    Saludos desde México

    Isa
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario

  1. 1. Sitios Exitosos De los Estándares Web a la Experiencia de Usuario Gabriel Porras estandares y accesibilidad.com
  2. 2. Gabriel Porras <ul><li>Blog: </li></ul><ul><li>estandares y accesibilidad.com </li></ul>
  3. 3. Sitio Web Exitoso <ul><li>un buen contenido </li></ul><ul><li>+ </li></ul><ul><li>una buena estructura </li></ul>
  4. 4. El Contenido NO es el Rey <ul><li>¡Sino hay una buena estructura que lo soporte! </li></ul><ul><li>¿Estructura? </li></ul>
  5. 5. En un Principio <ul><li>Como Paul Boag dice: Dios creó el mundo… </li></ul>
  6. 6. O lo que es Igual <ul><li>En 1991 </li></ul><ul><li>Tim Berners-Lee </li></ul><ul><li>creó Internet </li></ul>
  7. 7. Nació el HTML <ul><li>Un lenguaje muy simple que permite describir el contenido de sus documentos escritos de manera que los computadores lo puedan entender. </li></ul>
  8. 8. <h1>Nació el HTML</h1> <ul><li><p>Un lenguaje <strong>muy simple</strong> que permite describir el contenido de sus documentos escritos de manera que los computadores lo puedan entender.</p> </li></ul>
  9. 9. El HTML en Colombia <ul><li>HTML viejo + CSS + Script </li></ul><ul><li>¡Revueltos! </li></ul><ul><li>Ejemplo: http://www.medellin.edu.co/ </li></ul>
  10. 10. Cómo Deberían ser Nuestras Páginas <ul><li>HTML Semántico + CSS + JavaScript </li></ul><ul><li>¡Separados! </li></ul>
  11. 11. ¿Cómo? <ul><li>Utilizando adecuadamente éstos Estándares Web </li></ul>
  12. 12. ¿Estándares Web? <ul><li>Son tecnologías, establecidas por el W3C , usadas para crear e interpretar el contenido basado en Web, de tal manera que estos documentos estén siempre disponibles y sean accesibles para tantos como sea posible. </li></ul>
  13. 13. Capas de una Página <ul><li>C ontenido </li></ul><ul><li>+ </li></ul><ul><li>Presentación </li></ul><ul><li>+ </li></ul><ul><li>Comportamiento </li></ul>
  14. 14. Capa de Contenido <ul><li>Lenguajes Estructurales: </li></ul><ul><li>HTML 4.01 - XHTML 1.0 y 1.1 </li></ul><ul><li>Futuro: HTML 5.0 y XHTML 2.0 </li></ul><ul><li>Ejemplo: CSS Zen Garden </li></ul>
  15. 15. Capa de Presentación <ul><li>Lenguaje de Presentación: </li></ul><ul><li>CSS (Hojas de Estilos): Nivel 1 y 2 </li></ul><ul><li>Futuro: Nivel 3 </li></ul><ul><li>Ejemplo: Ahora si CSS Zen Garden </li></ul>
  16. 16. Capa de Presentación <ul><li>¿Si es tan fácil? </li></ul><ul><li>Miremos el sitio transaccional de Leasing Bancolombia </li></ul>
  17. 17. Capa de Comportamiento <ul><li>Modelo de Objetos: </li></ul><ul><li>DOM + JavaScript (ECMA) </li></ul><ul><li>Ejemplo: Teclado Valores con JavaScript Teclado Leasing con jQuery </li></ul>
  18. 18. ¿Flash un Estándar Web? <ul><li>¡NO! “Los diseñadores tienden a pensar que a la mayoría de la gente le gustan los sitios que sean visualmente interesantes porque precisamente a ellos les gustan los sitios así. Por eso quieren hacer sitios que visualmente sean muy atractivos”. Steve Krug. </li></ul>
  19. 19. Entonces… <ul><li>Flash sirve para: Videos, Juegos, Aplicaciones, Publicidad… </li></ul><ul><li>No sirve para: </li></ul><ul><li>Sitios 100% Flash y Menús </li></ul>
  20. 20. Un Sitio Web es Exitoso <ul><li>Gracias a los </li></ul><ul><li>Estándares Web , </li></ul><ul><li>porque… </li></ul>
  21. 21. Porque… <ul><li>Tiene un montaje más rápido </li></ul>
  22. 22. Porque… <ul><li>Su mantenimiento es menor, más fácil y rápido </li></ul>
  23. 23. Porque… <ul><li>Tiene menores costos </li></ul>
  24. 24. Porque… <ul><li>Tiene un diseño centralizado del cual todos pueden sacar provecho (para tus páginas nuevas no necesitas al diseñador) </li></ul>
  25. 25. Porque… <ul><li>Es compatible con los navegadores antiguos , los actuales y los futuros </li></ul>
  26. 26. ¿Antiguos? Internet Explorer 2.0
  27. 27. Porque… <ul><li>Se descarga y presenta más rápidamente </li></ul>
  28. 28. Porque… <ul><li>Ofrece una mayor accesibilidad y una mejor experiencia de usuario </li></ul>
  29. 29. Porque… <ul><li>Está mejor posicionado en los buscadores </li></ul>
  30. 30. Caso Real HTML Flash
  31. 31. Porque… <ul><li>Tiene un sólo contenido para todo: impresión, PDA, Móvil… </li></ul>
  32. 32. ¿ Imprimir, Móvil…? <ul><li>Miremos en: Firefox, Opera Mini </li></ul><ul><li>CSS Zen Garden OK! </li></ul><ul><li>Grupo Bancolombia … Mal! </li></ul>
  33. 33. Porque… <ul><li>Maximiza su audiencia potencial (Usuarios y Dispositivos) </li></ul>
  34. 34. Porque… <ul><li>Da soporte a la Web Semántica ¡EL FUTURO! </li></ul>
  35. 35. Porque… <ul><li>Es un paso hacia el cumplimiento de los requerimientos legales actuales y futuros </li></ul>
  36. 36. Pero… <ul><li>El uso de los Estándares Web NO garantiza que tu sitio Web sea exitoso </li></ul>
  37. 37. Estructura... <ul><li>¿Qué más hay…? </li></ul>
  38. 38. Lo que se ve…
  39. 39. ¿Y qué no se ve? APIS Design – Traducido por Ernesto González
  40. 40. ¿Y qué no se ve? <ul><li>Una buena plataforma Web = Estándares Web + CMS o Lenguaje: PHP, .Net… + Infraestructura (Hospedaje) + Mantenimiento </li></ul>
  41. 41. En la Vida Real… <ul><li>Bibliotecas Públicas : </li></ul><ul><li>Contenido = Libros </li></ul><ul><li>Plataforma = El edificio </li></ul>
  42. 42. ¿Qué le falta para ser Exitosa? <ul><li>- Una buena experiencia de los usuarios </li></ul>
  43. 43. Experiencia de Usuario <ul><li>“ Tiene su origen en el campo del Mercadeo , estando muy vinculado con el concepto de Experiencia de Marca ” Hassan y Martín </li></ul>
  44. 44. Experiencia de Usuario <ul><li>“ Es la sensación, sentimiento, respuesta emocional, valoración y satisfacción del usuario respecto a un producto, resultado del fenómeno de interacción con el producto y la interacción con su proveedor ” Hassan y Martín </li></ul>
  45. 45. Disciplinas <ul><li>“ Psicología cognitiva y perceptual, teoría del lenguaje, ciencia cognitiva, arquitectura, diseño de entornos, diseño de productos, diseño de información, arquitectura de información, etnografía, diseño de interacción, diseño de servicios, heurísticos, teoría de diseño…” Gorriti </li></ul>
  46. 46. Las que nos Interesan <ul><li>“ Concepto ‘ paraguas ’: se integran las diferentes disciplinas y roles profesionales implicados en el diseño de productos interactivos ”. Instone </li></ul>
  47. 47. Rueda de la Experiencia de Usuario “ Encontrabilidad” Diseño Gráfico Arquitectura de la Información Diseño de Interacción Usabilidad Accesibilidad Tosete
  48. 48. 1.“Encontrabilidad” “Buscabilidad” o Findability <ul><li>En Nuestra Biblioteca: </li></ul><ul><li>Ubicación </li></ul>
  49. 49. <ul><li>¿Dónde está esa Biblioteca? </li></ul>1.“Encontrabilidad” ¿Por qué?
  50. 50. <ul><li>Si tenemos un sitio queremos que sea encontrado y visitado </li></ul><ul><li>SEO Search Engine Optimization </li></ul>1.“Encontrabilidad” En la Web
  51. 51. 2. Diseño Gráfico <ul><li>En Nuestra Biblioteca: </li></ul><ul><li>Diseño Exterior: </li></ul><ul><li>La fachada y alrededores </li></ul>
  52. 52. <ul><li>¿Entrarías si esta fuera la Biblioteca? </li></ul>2. Diseño Gráfico ¿Por qué?
  53. 53. <ul><li>La imagen ayuda a hacer nuestro sitio más amigable </li></ul><ul><li>Pero no es primordial … G o o g l e es feo y es líder </li></ul>2. Diseño Gráfico En la Web
  54. 54. 3. Arquitectura de la Información <ul><li>En Nuestra Biblioteca: </li></ul><ul><li>Diseño arquitectónico </li></ul><ul><li>+ Catálogo </li></ul>
  55. 55. 3. Arquitectura de la Información ¿Por qué? ¿Por qué aquí no encuentro nada?
  56. 56. <ul><li>Define y organiza los contenidos, la navegación, la señalización y la búsqueda </li></ul>3. Arquitectura de la Información En la Web
  57. 57. 4. Diseño de Interacción En Nuestra Biblioteca: Procesos
  58. 58. <ul><li>¿Harías esta fila para un préstamo? </li></ul>4. Diseño de Interacción ¿Por qué?
  59. 59. <ul><li>Diseña la forma en que el visitante interactúa con el sitio </li></ul>4. Diseño de Interacción En la Web
  60. 60. <ul><li>Proceso de Abono en un Comercio </li></ul>4. Diseño de Interacción En la Web - Ejemplo
  61. 61. <ul><li>Desde el Home </li></ul>4. Diseño de Interacción En la Web - Ejemplo
  62. 62. <ul><li>Listado de Créditos </li></ul>4. Diseño de Interacción En la Web - Ejemplo
  63. 63. <ul><li>Definir el Abono </li></ul>4. Diseño de Interacción En la Web - Ejemplo
  64. 64. 5. Usabilidad En Nuestra Biblioteca: Evaluación Satisfacción + Interacción
  65. 65. 5. Usabilidad ¿Por qué? ¡Yo sólo quiero prestar un libro! ¿Por qué es tan difícil?
  66. 66. <ul><li>¿Qué tan bien están procesos? </li></ul><ul><li>¿Le sirven a los visitantes? </li></ul><ul><li>¿Cómo se pueden mejorar? </li></ul>5. Usabilidad En la Web
  67. 67. <ul><li>¿Cómo? </li></ul><ul><li>1. Heurísticas </li></ul><ul><li>2. Pruebas con Usuarios </li></ul><ul><li>3… </li></ul>5. Usabilidad En la Web
  68. 68. <ul><li>El Proceso de Abono se probó y ¡Se encontraron problemas ! </li></ul>5. Usabilidad En la Web
  69. 69. <ul><li>Así se mejoró … </li></ul>5. Usabilidad En la Web
  70. 70. 6. Accesibilidad En Nuestra Biblioteca: Responsabilidad Social Personas con necesidades especiales: rampas y/o ascensores
  71. 71. 6. Accesibilidad ¿Por qué? ¿Y ahora cómo ingreso?
  72. 72. <ul><li>Acceso universal, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios. </li></ul>6. Accesibilidad En la Web
  73. 73. <ul><li>Además de Internet Explorer … </li></ul><ul><li>Dispositivos especiales: Lectores de Pantalla (Screen Readers), Navegadores sólo texto - Móviles y SmartPhones (iPhone) - Buscadores </li></ul>6. Accesibilidad En la Web
  74. 74. Algo más sobre la Accesibilidad Web <ul><li>“ El poder de la Web está en su universalidad . Un acceso a la Web para todos independientemente de su discapacidad…” </li></ul><ul><li>Tim Berners-Lee </li></ul>
  75. 75. Millones de Personas <ul><li>En Colombia: 2.6 millones de personas discapacitadas ( el 6.4% de la población ) 1.1 millones tienen problemas de visión (el 2.7% de la población) </li></ul>
  76. 76. Es su Oportunidad… Esta mujer no habla como tu, ni se puede mover como tu… ¡Pero puede trabajar como tu!
  77. 77. Ejemplo en Nuestra Vida <ul><li>El Metro de Medellín </li></ul><ul><li>-> </li></ul><ul><li>Costos y Ley </li></ul>
  78. 78. Ejemplo de la Vida Virtual <ul><li>Target.com </li></ul>Demandada: “Por violar las leyes federales y estatales que prohiben la discriminación contra los discapacitados” Leyes en E.U. y L.A.
  79. 79. Tu Usuario más Importante es Ciego <ul><li>“ La mitad de las visitas a tu sitio vienen de G o o g l e , y G o o g l e sólo ve lo que un ciego puede ver. Si tu sitio no es accesible, tendrás menos visitas. Fin de la historia” Pemberton </li></ul>
  80. 80. Recuerda la Gráfica de Visitas… HTML Flash
  81. 81. ¿Sitios Exitosos? <ul><li>Sólo si ofrecemos: </li></ul><ul><li>- Un buen Contenido </li></ul><ul><li>- Una buena Plataforma </li></ul><ul><li>- Y una buena Experiencia de Usuario </li></ul>
  82. 82. Así como para una Excelente Biblioteca <ul><li>Se necesita más que libros y un edificio donde guardarlos… </li></ul>
  83. 83. ¿Qué es lo más Importante? <ul><li>¿El contenido, la estructura o la experiencia de usuario? </li></ul>
  84. 84. Les Suena Esto… <ul><li>“ El cliente siempre tiene la razón” </li></ul>
  85. 85. Experiencia de Usuario <ul><li>El éxito de un sitio Web está en sus Usuarios . </li></ul>
  86. 86. Si no se Piensa en el Usuario… <ul><li>¡Una aplicación que funcione perfectamente NO SIRVE ! </li></ul><ul><li>Un ejemplo vale más que mil palabras </li></ul>
  87. 87. Ejemplo DCU <ul><li>Sena Virtual.edu.co </li></ul><ul><li>Formación Profesional Gratuita del SENA por Internet </li></ul>
  88. 88. Usuarios <ul><li>Personas - Los estudiantes actuales - Los estudiantes potenciales </li></ul>
  89. 89. Tareas Comunes <ul><li>Escenarios - Los estudiantes actuales ingresan a sus clases y quieren conocer otros cursos disponibles . </li></ul>
  90. 90. Tareas Comunes <ul><li>Escenarios - Los estudiantes potenciales necesitan la oferta educativa y el proceso de inscripción . </li></ul>
  91. 91. Sena Virtual.edu.co <ul><li>¿Apoya a estos usuarios en sus tareas principales? </li></ul><ul><li>www.senavirtual.edu.co </li></ul>
  92. 92. Sena Virtual.edu.co
  93. 93. Propuesta
  94. 94. ¿Quieres Aprender? estandares y accesibilidad.com
  95. 95. ¿Quieres Aprender? Usarte.org
  96. 96. ¿Preguntas? Sitios Exitosos De los Estándares a la Experiencia de Usuario
  97. 97. Gracias Sitios Exitosos De los Estándares a la Experiencia de Usuario

×