sitios exitosos: de los estándares web a la experiencia de usuario

Sitios ExitososDe los Estándares Web a la Experiencia de Usuario

Gabriel Porrasestandares y accesibilidad.com

Gabriel Porras

Blog:estandares y accesibilidad.com

Sitio Web Exitoso

un buen contenido+

una buena estructura

El Contenido NOes el Rey

¡Sino hay una buena estructura

que lo soporte!

¿Estructura?

En un Principio

Como Paul Boag dice:Dios creó el mundo…

O lo que es Igual

En 1991Tim Berners-Leecreó 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.

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

El HTML en Colombia

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!

¿Cómo?

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.

Capas de una Página

Contenido+

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

Capa de PresentaciónLenguaje 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

Capa de Comportamiento

Modelo de Objetos:DOM + JavaScript (ECMA)

Ejemplo:Teclado Valores con

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

Entonces…

Flash sirve para: Videos, Juegos, Aplicaciones,

Publicidad…No sirve para:

Sitios 100% Flash y Menús

Un Sitio Web es Exitoso

Gracias a losEstándares Web,

porque…

Porque…

- Tiene un montaje más rápido

Porque…

- Su mantenimiento es menor,

más fácil y rápido

Porque…

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

Porque…

- 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

Porque…

- Ofrece una mayor accesibilidad y una mejor

experiencia de usuario

Porque…

- Está mejor posicionadoen los buscadores

Caso Real

HTMLFlash

Porque…

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

Porque…

- Maximiza su audiencia potencial (Usuarios y

Dispositivos)

Porque…

- Da soporte a laWeb Semántica

¡EL FUTURO!

Porque…

- Es un paso hacia el cumplimiento

de los requerimientos legales

actuales y futuros

Pero…

El uso de los Estándares Web

NO garantiza quetu sitio Web sea exitoso

Estructura...

¿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

En la Vida Real…

Bibliotecas Públicas:Contenido = Libros

Plataforma = El edificio

¿Qué le falta para ser Exitosa?

- Una buena experienciade 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

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

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

Las que nos Interesan

“Concepto ‘paraguas’:se integran las diferentes

disciplinas y roles profesionales implicados en el

diseño deproductos interactivos”.

Instone

Rueda de laExperiencia de

Usuario

“Encontrabilidad”

Diseño Gráfico

Arquitecturade laInformación

Diseño deInteracción

Usabilidad

Accesibilidad

Tosete

1.“Encontrabilidad”“Buscabilidad” o Findability

En Nuestra Biblioteca:

Ubicación

¿Dónde estáesa Biblioteca?

1.“Encontrabilidad”¿Por qué?

Si tenemos un sitio queremos que sea

encontrado y visitado

SEOSearch Engine Optimization

1.“Encontrabilidad”En la Web

2. Diseño Gráfico

En Nuestra Biblioteca:

Diseño Exterior:La fachada y alrededores

¿Entrarías si esta fuera la Biblioteca?

2. Diseño Gráfico¿Por qué?

La imagen ayuda a hacer nuestro sitio más amigable

Pero no es primordial…Google es feo y es líder

2. Diseño GráficoEn la Web

3. Arquitectura de la Información

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

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

Diseña la forma en queel visitante interactúa

con el sitio

4. Diseño de Interacción

En la Web

Proceso de Abono en un Comercio

4. Diseño de Interacción

En la Web - Ejemplo

1. Desde el Home

4. Diseño de Interacción

En la Web - Ejemplo

2. Listado de Créditos

4. Diseño de Interacción

En la Web - Ejemplo

3. Definir el Abono

4. Diseño de Interacción

En la Web - Ejemplo

5. Usabilidad

En Nuestra Biblioteca:

EvaluaciónSatisfacción + Interacción

5. Usabilidad¿Por qué?

¡Yo sólo quiero prestar un

libro!¿Por qué estan difícil?

1. ¿Qué tan bien están procesos?

2. ¿Le sirven a los visitantes?3. ¿Cómo se pueden mejorar?

5. UsabilidadEn la Web

¿Cómo?

1. Heurísticas2. Pruebas con Usuarios

3…

5. UsabilidadEn la Web

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

5. UsabilidadEn la Web

Así se mejoró…

5. UsabilidadEn la Web

6. Accesibilidad

En Nuestra Biblioteca:

Responsabilidad SocialPersonas con necesidades

especiales: rampas y/o ascensores

6. Accesibilidad¿Por qué?

¿Y ahoracó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. AccesibilidadEn la Web

Además de Internet Explorer…- Dispositivos especiales: Lectores

de Pantalla (Screen Readers), Navegadores sólo texto

- Móviles y SmartPhones (iPhone) - Buscadores

6. AccesibilidadEn la Web

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

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)

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

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.

Tu Usuario más Importante es Ciego

“La mitad de las visitas a tu sitio vienen de Google, y Google

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 laGráfica de Visitas…

HTMLFlash

¿Sitios Exitosos?

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…

¿Qué es lo más Importante?

¿El contenido, la estructura o la experiencia de

usuario?

Les Suena Esto…

“El cliente siempre tiene la razón”

Experiencia de Usuario

El éxito de un sitio Webestá en sus Usuarios.

Si no se Piensaen el Usuario…

¡Una aplicación que funcioneperfectamente NO SIRVE!

Un ejemplo vale más que mil palabras

Ejemplo DCU

Sena Virtual.edu.coFormación Profesional

Gratuitadel SENA por Internet

Usuarios

Personas- Los estudiantes actuales

- Los estudiantes potenciales

Tareas Comunes

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.

Sena Virtual.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 ExitososDe los Estándares a la Experiencia de

Usuario

Gracias

Sitios ExitososDe los Estándares a la Experiencia de

Usuario