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

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

Sitio Web Exitoso
un buen contenido
+
una buena estructura

El Contenido NO es 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 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.

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

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

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

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

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 posicionado en los buscadores

Caso Real HTML Flash

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 la Web 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 que tu 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 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

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

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

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

2. Diseño Gráfico
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 … G o o g l e es feo y es líder
2. Diseño Gráfico En la Web

3. Arquitectura de la Información
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 que el 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

Desde el Home

Listado de Créditos

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

¿Cómo?
1. Heurísticas
2. Pruebas con Usuarios
3…

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

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

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

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

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”

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

Ejemplo DCU
Sena Virtual.edu.co
Formación Profesional Gratuita del 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 Exitosos De los Estándares a la Experiencia de Usuario

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

http://www.estandaresyaccesibilidad.com	734
http://adivirtual.unefm.edu.ve	403
http://www.desarrolloweb.com	200
http://blog.gabrielizalo.com	131
http://comdigitales.com	95
http://pio.la	85
https://adivirtual.unefm.edu.ve	55
http://www.slideshare.net	43
http://informatica1iespablodiez.blogspot.com	29
http://11blooto.wordpress.com	24
http://rosembergcoley.blogspot.com	20
http://diplomadoadmonproyectosinformaticos.blogspot.com	12
http://isuberna.blogspot.com	12
http://redkisi.neuquen.gov.ar	11
http://ijirua.blogspot.com	8
http://blog.pinsop.com	6
http://xavi-domenech.blogspot.com	6
http://sitiosexitosos.com	5
http://desarrolloweb.com	5
http://cv.uoc.edu	4
http://cablemodem.fibertel.com.ar	4
http://ccedu.cv.uma.es	4
http://aplicandotecnologias.blogspot.com	3
http://www.pio.la	2
http://www.blogger.com	2
http://moodletic.ehu.es	1
http://marketingfinanzas.wordpress.com	1
http://www.sitiosexitosos.com	1
http://www.comdigitales.com	1
http://feeds.feedburner.com	1
http://ijirua.blogspot.com.es	1
http://xavi-domenech.blogspot.com.es	1
http://furore.co	1

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

by Gabriel Porras on Apr 20, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

33 Embeds 1,911

Statistics

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