Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario
-
Upload
gabriel-porras -
Category
Technology
-
view
12.112 -
download
1
Transcript of 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