Your SlideShare is downloading. ×
Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

12,036
views

Published on

Published in: Technology, Design

2 Comments
27 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total Views
12,036
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
609
Comments
2
Likes
27
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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