Upload
leon-kadoch
View
1.885
Download
4
Embed Size (px)
DESCRIPTION
Presentation used for a conference at the Universidad Tecnologica de Panama
Citation preview
La Experiencia del Usuario y Usabilidad
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
Culminación
Concepción
http://www.jjg.net/ia/
Necesidades del usuario
Objetivos del sitioEstrategia
Especificacionesfuncionales
Requerimientos decontenidoAlcance
Diseño de la interacción
Arquitectura deinformaciónEstructura
Diseño de la interfaz Diseño de la navegación
Diseño de la informaciónEsqueleto
Diseño visualSuperficie
Web como interfazde software
Web como sistemade hipertexto
Autor: Jesse James Garrett
Sistemas Complejos
Manejo de Proyectos
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
Lo que debe ser
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
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.
Arquitectura de Información
• Wireframes
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.
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
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).
Aspectos de la Usabilidad
1. Facilidad de Aprendizaje
2. Flexibilidad
3. Robustez
¿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 ?
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
Juego de Escenarios
¿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
Audiencia
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 producto particular
Aprender sobre nuevos proyectos
Informarse de futuras presentaciones
Descargar documentos
Contactar empleados de una organización
Proveer comentarios o feedback
Escenarios
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.
¿Cómo se crea la estructura?
• Planificar
• Esquematizar
• Estudiar el Contenido
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.
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.
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.
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.
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
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
En Cada Página
• Firmar Documentos
• Contacto con el Autor
• Utilizar fechas en los documentos
• Cuidado con los formatos de fecha
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
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.
Enlaces o Links• No cambia el color de los enlaces
• No deje enlaces rotos o sin contenido
Compatibilidad entre Browsers
• Estándares WebHtmlCss
• Probar entre Browsers• Resolución de Pantallas
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
TipografíaUtilizar 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
Tipografía
No todos poseen los mismos “fonts”
Tipografía
• Serif : son aquellas tipografías cuyas letras se apoyan como con una especie de pie
• Sans Serif: carecen de este detalle.
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)
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
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%
¡Esto no es todo !
Referencias• Information Architecture Institute
•
www.iainstitute.org
• Jakob Nielsen
• www.useit.com
• Alzado.Org
• www.alzado.org
• Infotectura
• www.infotectura.com
• Usability First
• www.usabilityfirst.com
• Usable Web
• www.usableweb.com
Encuentre los Errores de Usabilidad
León Kadoch H.UX Designer / Information Architect
www.leon-kadoch.com
Slideshare.net/kadochTwitter.com/leonkadoch