Sitios Exitosos De los Estándares Web a la Experiencia de Usuario Gabriel Porras estandares y accesibilidad.com

Gabriel Porras Blog: estandares y accesibilidad.com

Blog:

estandares y accesibilidad.com

Sitio Web Exitoso un buen contenido + una buena estructura

un buen contenido

+

una buena estructura

El Contenido NO es el Rey ¡Sino hay una buena estructura que lo soporte! ¿Estructura?

¡Sino hay una buena estructura que lo soporte!

¿Estructura?

En un Principio Como Paul Boag dice: Dios creó el mundo…

Como Paul Boag dice: Dios creó el mundo…

O lo que es Igual En 1991 Tim Berners-Lee creó Internet

En 1991

Tim Berners-Lee

creó Internet

Nació el HTML Un lenguaje muy simple que permite describir el contenido de sus documentos escritos de manera que los computadores lo puedan entender.

Un lenguaje muy simple que permite describir el contenido de sus documentos escritos de manera que los computadores lo puedan entender.

<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>

<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>

El HTML en Colombia HTML viejo + CSS + Script ¡Revueltos! Ejemplo: http://www.medellin.edu.co/

HTML viejo + CSS + Script

¡Revueltos!

Ejemplo: http://www.medellin.edu.co/

Cómo Deberían ser Nuestras Páginas HTML Semántico + CSS + JavaScript ¡Separados!

HTML Semántico + CSS + JavaScript

¡Separados!

¿Cómo? Utilizando adecuadamente éstos Estándares Web

Utilizando adecuadamente éstos Estándares Web

¿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.

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.

Capas de una Página C ontenido + Presentación + Comportamiento

C ontenido

+

Presentación

+

Comportamiento

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

Lenguajes Estructurales:

HTML 4.01 - XHTML 1.0 y 1.1

Futuro: HTML 5.0 y XHTML 2.0

Ejemplo: CSS Zen Garden

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

Lenguaje de Presentación:

CSS (Hojas de Estilos): Nivel 1 y 2

Futuro: Nivel 3

Ejemplo: Ahora si CSS Zen Garden

Capa de Presentación ¿Si es tan fácil? Miremos el sitio transaccional de Leasing Bancolombia

¿Si es tan fácil?

Miremos el sitio transaccional de Leasing Bancolombia

Capa de Comportamiento Modelo de Objetos: DOM + JavaScript (ECMA) Ejemplo: Teclado Valores con JavaScript Teclado Leasing con jQuery

Modelo de Objetos:

DOM + JavaScript (ECMA)

Ejemplo: Teclado Valores con JavaScript Teclado Leasing con jQuery

¿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.

¡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.

Entonces… Flash sirve para: Videos, Juegos, Aplicaciones, Publicidad… No sirve para: Sitios 100% Flash y Menús

Flash sirve para: Videos, Juegos, Aplicaciones, Publicidad…

No sirve para:

Sitios 100% Flash y Menús

Un Sitio Web es Exitoso Gracias a los Estándares Web , porque…

Gracias a los

Estándares Web ,

porque…

Porque… Tiene un montaje más rápido

Tiene un montaje más rápido

Porque… Su mantenimiento es menor, más fácil y rápido

Su mantenimiento es menor, más fácil y rápido

Porque… Tiene menores costos

Tiene menores costos

Porque… Tiene un diseño centralizado del cual todos pueden sacar provecho (para tus páginas nuevas no necesitas al diseñador)

Tiene un diseño centralizado del cual todos pueden sacar provecho (para tus páginas nuevas no necesitas al diseñador)

Porque… Es compatible con los navegadores antiguos , los actuales y los futuros

Es compatible con los navegadores antiguos , los actuales y los futuros

¿Antiguos? Internet Explorer 2.0

Porque… Se descarga y presenta más rápidamente

Se descarga y presenta más rápidamente

Porque… Ofrece una mayor accesibilidad y una mejor experiencia de usuario

Ofrece una mayor accesibilidad y una mejor experiencia de usuario

Porque… Está mejor posicionado en los buscadores

Está mejor posicionado en los buscadores

Caso Real HTML Flash

Porque… Tiene un sólo contenido para todo: impresión, PDA, Móvil…

Tiene un sólo contenido para todo: impresión, PDA, Móvil…

¿ Imprimir, Móvil…? Miremos en: Firefox, Opera Mini CSS Zen Garden OK! Grupo Bancolombia … Mal!

Miremos en: Firefox, Opera Mini

CSS Zen Garden OK!

Grupo Bancolombia … Mal!

Porque… Maximiza su audiencia potencial (Usuarios y Dispositivos)

Maximiza su audiencia potencial (Usuarios y Dispositivos)

Porque… Da soporte a la Web Semántica ¡EL FUTURO!

Da soporte a la Web Semántica ¡EL FUTURO!

Porque… Es un paso hacia el cumplimiento de los requerimientos legales actuales y futuros

Es un paso hacia el cumplimiento de los requerimientos legales actuales y futuros

Pero… El uso de los Estándares Web NO garantiza que tu sitio Web sea exitoso

El uso de los Estándares Web NO garantiza que tu sitio Web sea exitoso

Estructura... ¿Qué más hay…?

¿Qué más hay…?

Lo que se ve…

¿Y qué no se ve? APIS Design – Traducido por Ernesto González

¿Y qué no se ve? Una buena plataforma Web = Estándares Web + CMS o Lenguaje: PHP, .Net… + Infraestructura (Hospedaje) + Mantenimiento

Una buena plataforma Web = Estándares Web + CMS o Lenguaje: PHP, .Net… + Infraestructura (Hospedaje) + Mantenimiento

En la Vida Real… Bibliotecas Públicas : Contenido = Libros Plataforma = El edificio

Bibliotecas Públicas :

Contenido = Libros

Plataforma = El edificio

¿Qué le falta para ser Exitosa? - Una buena experiencia de los usuarios

- Una buena experiencia de los usuarios

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

“ Tiene su origen en el campo del Mercadeo , estando muy vinculado con el concepto de Experiencia de Marca ” Hassan y Martín

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

“ 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

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

“ 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

Las que nos Interesan “ Concepto ‘ paraguas ’: se integran las diferentes disciplinas y roles profesionales implicados en el diseño de productos interactivos ”. Instone

“ Concepto ‘ paraguas ’: se integran las diferentes disciplinas y roles profesionales implicados en el diseño de productos interactivos ”. Instone

Rueda de la Experiencia de Usuario “ Encontrabilidad” Diseño Gráfico Arquitectura de la Información Diseño de Interacción Usabilidad Accesibilidad Tosete

1.“Encontrabilidad” “Buscabilidad” o Findability En Nuestra Biblioteca: Ubicación

En Nuestra Biblioteca:

Ubicación

¿Dónde está esa Biblioteca? 1.“Encontrabilidad” ¿Por qué?

¿Dónde está esa Biblioteca?

Si tenemos un sitio queremos que sea encontrado y visitado SEO Search Engine Optimization 1.“Encontrabilidad” En la Web

Si tenemos un sitio queremos que sea encontrado y visitado

SEO Search Engine Optimization

2. Diseño Gráfico En Nuestra Biblioteca: Diseño Exterior: La fachada y alrededores

En Nuestra Biblioteca:

Diseño Exterior:

La fachada y alrededores

¿Entrarías si esta fuera la Biblioteca? 2. Diseño Gráfico ¿Por qué?

¿Entrarías si esta fuera la Biblioteca?

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

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

3. Arquitectura de la Información En Nuestra Biblioteca: Diseño arquitectónico + Catálogo

En Nuestra Biblioteca:

Diseño arquitectónico

+ Catálogo

3. Arquitectura de la Información ¿Por qué? ¿Por qué aquí no encuentro nada?

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

Define y organiza los contenidos, la navegación, la señalización y la búsqueda

4. Diseño de Interacción En Nuestra Biblioteca: Procesos

¿Harías esta fila para un préstamo? 4. Diseño de Interacción ¿Por qué?

¿Harías esta fila para un préstamo?

Diseña la forma en que el visitante interactúa con el sitio 4. Diseño de Interacción En la Web

Diseña la forma en que el visitante interactúa con el sitio

Proceso de Abono en un Comercio 4. Diseño de Interacción En la Web - Ejemplo

Proceso de Abono en un Comercio

Desde el Home 4. Diseño de Interacción En la Web - Ejemplo

Desde el Home

Listado de Créditos 4. Diseño de Interacción En la Web - Ejemplo

Listado de Créditos

Definir el Abono 4. Diseño de Interacción En la Web - Ejemplo

Definir el Abono

5. Usabilidad En Nuestra Biblioteca: Evaluación Satisfacción + Interacción

5. Usabilidad ¿Por qué? ¡Yo sólo quiero prestar un libro! ¿Por qué es tan difícil?

¿Qué tan bien están procesos? ¿Le sirven a los visitantes? ¿Cómo se pueden mejorar? 5. Usabilidad En la Web

¿Qué tan bien están procesos?

¿Le sirven a los visitantes?

¿Cómo se pueden mejorar?

¿Cómo? 1. Heurísticas 2. Pruebas con Usuarios 3… 5. Usabilidad En la Web

¿Cómo?

1. Heurísticas

2. Pruebas con Usuarios

3…

El Proceso de Abono se probó y ¡Se encontraron problemas ! 5. Usabilidad En la Web

El Proceso de Abono se probó y ¡Se encontraron problemas !

Así se mejoró … 5. Usabilidad En la Web

Así se mejoró …

6. Accesibilidad En Nuestra Biblioteca: Responsabilidad Social Personas con necesidades especiales: rampas y/o ascensores

6. Accesibilidad ¿Por qué? ¿Y ahora cómo ingreso?

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

Acceso universal, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios.

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

Además de Internet Explorer …

Dispositivos especiales: Lectores de Pantalla (Screen Readers), Navegadores sólo texto - Móviles y SmartPhones (iPhone) - Buscadores

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

“ El poder de la Web está en su universalidad . Un acceso a la Web para todos independientemente de su discapacidad…”

Tim Berners-Lee

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)

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)

Es su Oportunidad… Esta mujer no habla como tu, ni se puede mover como tu… ¡Pero puede trabajar como tu!

Ejemplo en Nuestra Vida El Metro de Medellín -> Costos y Ley

El Metro de Medellín

->

Costos y Ley

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.

Target.com

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

“ 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

Recuerda la Gráfica de Visitas… HTML Flash

¿Sitios Exitosos? Sólo si ofrecemos: - Un buen Contenido - Una buena Plataforma - Y una buena Experiencia de Usuario

Sólo si ofrecemos:

- Un buen Contenido

- Una buena Plataforma

- Y una buena Experiencia de Usuario

Así como para una Excelente Biblioteca Se necesita más que libros y un edificio donde guardarlos…

Se necesita más que libros y un edificio donde guardarlos…

¿Qué es lo más Importante? ¿El contenido, la estructura o la experiencia de usuario?

¿El contenido, la estructura o la experiencia de usuario?

Les Suena Esto… “ El cliente siempre tiene la razón”

“ El cliente siempre tiene la razón”

Experiencia de Usuario El éxito de un sitio Web está en sus Usuarios .

El éxito de un sitio Web está en sus Usuarios .

Si no se Piensa en el Usuario… ¡Una aplicación que funcione perfectamente NO SIRVE ! Un ejemplo vale más que mil palabras

¡Una aplicación que funcione perfectamente NO SIRVE !

Un ejemplo vale más que mil palabras

Ejemplo DCU Sena Virtual.edu.co Formación Profesional Gratuita del SENA por Internet

Sena Virtual.edu.co

Formación Profesional Gratuita del SENA por Internet

Usuarios Personas - Los estudiantes actuales - Los estudiantes potenciales

Personas - Los estudiantes actuales - Los estudiantes potenciales

Tareas Comunes Escenarios - Los estudiantes actuales ingresan a sus clases y quieren conocer otros cursos disponibles .

Escenarios - Los estudiantes actuales ingresan a sus clases y quieren conocer otros cursos disponibles .

Tareas Comunes Escenarios - Los estudiantes potenciales necesitan la oferta educativa y el proceso de inscripción .

Escenarios - Los estudiantes potenciales necesitan la oferta educativa y el proceso de inscripción .

Sena Virtual.edu.co ¿Apoya a estos usuarios en sus tareas principales? www.senavirtual.edu.co

¿Apoya a estos usuarios en sus tareas principales?

www.senavirtual.edu.co

Sena Virtual.edu.co

Propuesta

¿Quieres Aprender? estandares y accesibilidad.com

¿Quieres Aprender? Usarte.org

¿Preguntas? Sitios Exitosos De los Estándares a la Experiencia de Usuario

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