Presentation used for a conference at the Universidad Tecnologica de Panama

1. La Experiencia del Usuario
y Usabilidad

2. La Experiencia del Usuario
• Conjunto de factores y elementos que
determinan una interacción satisfactoria
del usuario con un entorno o dispositivo
concretos.
• En ella influyen desde el diseño gráfico, la
éstetica, hasta la articulación de la interfaz,
la funcionalidad definida por el diseño de
interacción y la extrapolación de principios
del mundo del marketing, la psicología etc

4. Culminación
Concepción
http://www.jjg.net/ia
Necesidades del usuario
Objetivos del sitio
Estrategia
Especificaciones
funcionales
Requerimientos de
contenido
Alcance
Diseño de la
interacción
Arquitectura de
información
Estructura
Diseño de la interfaz Diseño de la navegación
Diseño de la información
Esqueleto
Diseño visualSuperficie
Web como interfaz
de software
Web como sistema
de hipertexto
Autor: Jesse James Garrett

6. Sistemas Complejos

7. Manejo de Proyectos

8. Lo que NO es la UX
• UX Design no funciona en cada situacion.
• No puede ser asesorado por metricas
tradicionales
• No es lo mismo que Usabilidad

9. Lo que debe ser

10. Tareas en UX Design
• Evaluación del Sistema Actual
• Pruebas A/B
• Encuesta a los Usuarios
• Creación de Prototipos/Wireframes
• Diagramas de Flujo
• Storytelling
• Patrones de Diseño
• Personas/Audiencia
• Inventarios de Contenido
• Guias de Estilo

11. La Arquitectura de Información
1. La organización, etiquetado y los esquemas de
navegación
2. El diseño estructural del espacio donde se ubica
la informaciòn facilita el desarrollo de tareas de
manera intuitiva y completa, directamente con el
acceso al contenido del sitio web.
2. El arte y la ciencia de estructurar BIEN y
clasificar BIEN los sitios web y sus intranets,
ayudan a las personas a manejar la información
fácilmente.
3. Una disciplina emergente en una comunidad de
prácticas enfocadas en traer los principios del
diseño y arquitectura del paraìso digital.

12. Arquitectura de Información
• Wireframes

14. Usabilidad
• Se define coloquialmente como facilidad de
uso, ya sea de una página web, una
aplicación informática o cualquier otro
sistema que interactue con un usuario.
– Eduardo Manchon http://www.alzado.org
• "La usabilidad se refiere a la capacidad de
un software de ser comprendido,
aprendido, usado y ser atractivo para el
usuario, en condiciones específicas de
uso“
-ISO/IEC 9126e.

15. El Término “Usabilidad”
• Proviene del inglés : Usability
• Facilidad o Nivel de Uso
• Grado en el que el diseño de un objeto
facilita o dificulta su manejo
• Desde hace mucho tiempo se maneja en
base a criterios como facilidad de uso,
amistoso con el usuario

16. Datos Curiosos
• La usabilidad demuestra reducciones del ciclo de desarrollo de
los productos de 33-50% (Bosert 1991).
• 63% de todos los proyectos de desarrollo de software
sobrepasan su presupuesto, siendo las cuatro causas más
importantes relacionadas con usabilidad. (Lederer y Prassad 1992).
• El porcentaje de código que se dedica al desarrollo de la interfaz con
los usuarios ha ido aumentando a lo largo de los años hasta un
promedio 47-60% del conjunto de la aplicación. (MacIntyre et al.
1990).
• La empresa Ricoh descubrió que el 95% de los usuarios
encuestados nunca utilizaban las tres características claves
diseñadas para hacer más atractivo el producto, bien por
desconocer su existencia, no saber cómo utilizarlas o no
entenderlas. (Nussbaum y Neff 1991).

17. Aspectos de la Usabilidad
1. Facilidad de Aprendizaje
2. Flexibilidad
3. Robustez

18. ¿Para quién diseñamos?
• ¿Quiénes son los usuarios?
• ¿Qué quieren o necesitan
hacer los usuarios?
• ¿Cuál es la educación de los
usuarios?
• ¿Qué debe hacer el usuario y
qué debe hacer el sistema ?

19. El Usuario
• Conversar
• Observar
• Preguntar
• Investigar:
 Sus Características
 Qué tareas efectuan
 Lo Actual vs. Lo Deseado o Ideal
 Funciones Críticas vs No-Críticas
• Flujo de Desarrollo de Tareas (cómo lo hacen)
• Ambiente en que la desarrollan

20. Juego de Escenarios

21. ¿Qué Investigar?
Características
 Edad
 Conocimientos de Informática
 Dominio del conocimiento
 Métodos de Acceso
 Browsers (o navegadores)
 Ambientes de Trabajo
 Impedidos o Discapacitados
Obtén la Información mediante
 Encuestas / Cuestionarios
 Visitas al Ambiente de Trabajo

22. Audiencia

23. Planificación / Tareas de los Usuarios
¿Por qué los usuarios visitarán tu Web?
 ¿Qué hay allí para ellos?
 La mejor forma de saberlo es conversando !
 Crear Escenarios
Ejemplo de Tareas de Usuarios:
 Encontrar información de un productoparticular
 Aprender sobre nuevos proyectos
 Informarse de futuras presentaciones
 Descargar documentos
 Contactar empleados de una organización
 Proveer comentarios o feedback

24. Escenarios

25. Estructura
• Una buena estructura
debe permitir, aplicada a
un grupo de páginas
web, permite al lector
ver todos los contenidos
fácil y claramente.
• Una mala estructura,
produce la sensación de
no encontrar
información, estar
perdida y terminará por
ABANDONAR el sitio
Web.

26. ¿Cómo se crea la
estructura?
• Planificar
• Esquematizar
• Estudiar el Contenido

27. Estructura Jerárquica
• Es la estructura del árbol…, en el
que la raíz es la página inicial, esta
página se puede también sustituir
por la página de contenido, en la
que se exponen las diferentes
secciones que contendrá nuestro
sitio. La selección de una sección
nos conduce asimismo a una lista
de subtemas que pueden o no
dividirse.
• Permite al visitante conocer en qué
lugar de la estructura se encuentra,
además de saber que, a medida
que se adentra en la estructura
obtiene información más específica
y que la información más general
se encuentra en los niveles
superiores.

28. Estructura Lineal
• Navegarla es como leer un libro,
de manera que estando en una
página, podemos ir a la siguiente
página o a la anterior.
• Útil cuando queremos al visitante
siguiendo un patrón fijo de
navegación evitando
distracciones con enlaces a otras
páginas.
• Por otra parte podemos causar a
lector la sensación de estar
encerrado si el camino es muy
largo o poco interesante.
• Este tipo de estructura sería
válido para tutoriales de
aprendizaje o tours de visita
guiada.

29. Estructura Lineal con
Jerarquía
• Este tipo de estructura es una
mezcla de la dos anteriores,
los temas y subtemas están
organizados de una forma
jerárquica, pero uno puede
leer todo el contenido de una
forma lineal si se desea.
• Esto permite tener el
contenido organizado
jerárquicamente y
simultáneamente poder
acceder a toda la información
de una manera lineal como si
estuviésemos leyendo un
libro. Esta guía sigue
básicamente este tipo de
estructura.

30. Estructura de Red
• La estructura de red es una
organización en la que
aparentemente no hay ningún
orden establecido, las páginas
pueden apuntarse unas a otras
sin ningún orden aparente.
• Este tipo de organización es la
más libre, pero también es la
más peligrosa ya que si no se
informa al lector de en dónde se
encuentra, puede perderse o
puede no encontrar lo que anda
buscando o no llegar a ver lo que
le queremos mostrar. Por eso es
muy recomendable asociar la
estructura de las páginas con
alguna estructura conocida,
como por ejemplo la de una
ciudad.

31. Navegación
• Duplicar navegación (si es necesario)
• Enlace para el Inicio de la página
• No detenga la navegacion
• Estructura Clara
• Mapa del Sitio o Índice de Contenidos
• Si utiliza navegación gráfica, añadir textos
para soporte del usuario

32. Tamaño de las Páginas
• Las personas no les gusta el Scroll Down
• Útilice páginas de 1 pantalla y media
• Páginas largas para documentos grandes

33. En Cada Página
• Firmar Documentos
• Contacto con el Autor
• Utilizar fechas en los documentos
• Cuidado con los formatos de fecha

34. Enlaces o Links
• Escribir como si no existieran enlaces de texto
 Juan Perez ha desarrollado un nuevo lenguaje de programación.
 El nuevo lenguaje de programación de Juan Perez está aquí.
• Usar palabras significativas en los enlaces
• Longitud adecuada de los enlaces
• El usuario debe conocer la información a la que va acceder antes de salir.
• Los enlaces modifican el énfasis de las frases

35. Enlaces o Links
• Enfatizar los textos diferentes:
• Libros sobre Economía.
• Libros sobre Medicina.
• Libros sobre Historia.
• Libros sobre Educación.
• Libros sobre:
• Economía.
• Medicina.
• Historia.
• Educación.

36. Enlaces o Links
• No cambia el color de los enlaces
• No deje enlaces rotos o sin contenido
Compatibilidad entre Browsers
• Estándares Web
Html
Css
• Probar entre Browsers
• Resolución de Pantallas

37. Consejos Prácticos
• Sin faltas ortográficas
• Páginas en Contexto
• ¿Qué? ¿Quién? ¿Cómo? ¿Cuándo?
• Responda a sus lectores, aunque sea sólo
por cortesía

38. Tipografía
Utilizar estilos con moderación
El texto pierde fuerza si todas las palabras están resaltadas.
El texto pierde fuerza si todas las palabras están resaltadas.
Tamaños de las Letras en diferentes plataformas

39. Tipografía
No todos poseen los mismos “fonts”

40. Tipografía
• Serif : son aquellas tipografías cuyas letras se
apoyan como con una especie de pie
• Sans Serif: carecen de este detalle.

41. Gráficos en el Web
• Incluir “ALT” tag en el HTML para las imágenes.
• Indicar el tamaño de las imágenes que se van a descargar
• Evite el uso de backgrounds o imágenes de fondo , y si decide
utilizar alguna, que tenga poca información visual
• Limite el uso de Gráficos Decorativos
• Limite el tamaño de las imágenes
• Utilice atributos height y width en html
• Utilice la misma imagen tantas veces sea posible (aceleración de
carga)

42. Formatos Gráficos
Número de colores: 2, 4 , 8, 16, 32, 128 ó
256 de una paleta de 24 bits.
Compresión basada en el algoritmo de
compresión LZW.
Formato de compresión sin pérdida.
Características añadidas en la versión 89a:
Carga progresiva.
Máscara de trasparencia de 1 bit.
Animación simple.
GIF JPG
Número de colores: 24 bits color o 8
bits B/N
Muy alto grado de compresión.
Formato de compresión con pérdida.
No permite trasparencia, ni canal alfa.
No permite animación.
Color indexado hasta 256 colores y
TrueColor hasta 48 bits por pixel.
Mayor compresión que el formato
GIF (+10%)
Compresión sin pérdida.
Visualización progresiva en dos
dimensiones.
Canal alfa. (Transparencia variable)
Detección de errores.
No permite animación..
PNG

43. Consejos sobre BANNERS
• Utilizar palabras que VENDAN
• Si el usuario ha visto el banner 3 veces y
no accesa, no lo hará nunca.
• Utilice preguntas en el banner (interacción)
• Animar un banner aumenta visibilidad 15%

44. ¡Esto no es todo !

45. Referencias
• Information Architecture Institute
•
• Jakob Nielsen
• www.useit.com
• Alzado.Org
• www.alzado.org
• Infotectura
• www.infotectura.com
• Usability First
• www.usabilityfirst.com
• Usable Web
• www.usableweb.com

46. Encuentre los Errores de
Usabilidad

53. León Kadoch H.
UX Designer / Information Architect
www.leon-kadoch.com
Slideshare.net/kadoch
Twitter.com/leonkadoch