La Experiencia de Usuario y Usabilidad

53
La Experiencia del Usuario y Usabilidad

description

Presentation used for a conference at the Universidad Tecnologica de Panama

Transcript of La Experiencia de Usuario y Usabilidad

Page 1: La Experiencia de Usuario y Usabilidad

La Experiencia del Usuario y Usabilidad

Page 2: La Experiencia de 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

Page 3: La Experiencia de Usuario y Usabilidad
Page 4: La Experiencia de Usuario y Usabilidad

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

Page 5: La Experiencia de Usuario y Usabilidad
Page 6: La Experiencia de Usuario y Usabilidad

Sistemas Complejos

Page 7: La Experiencia de Usuario y Usabilidad

Manejo de Proyectos

Page 8: La Experiencia de Usuario y Usabilidad

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

Page 9: La Experiencia de Usuario y Usabilidad

Lo que debe ser

Page 10: La Experiencia de Usuario y Usabilidad

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

Page 11: La Experiencia de Usuario y Usabilidad

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.

Page 12: La Experiencia de Usuario y Usabilidad

Arquitectura de Información

• Wireframes

Page 13: La Experiencia de Usuario y Usabilidad
Page 14: La Experiencia de Usuario y Usabilidad

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.

Page 15: La Experiencia de Usuario y Usabilidad

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

Page 16: La Experiencia de Usuario y Usabilidad

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

Page 17: La Experiencia de Usuario y Usabilidad

Aspectos de la Usabilidad

1. Facilidad de Aprendizaje

2. Flexibilidad

3. Robustez

Page 18: La Experiencia de Usuario y Usabilidad

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

Page 19: La Experiencia de Usuario y Usabilidad

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

Page 20: La Experiencia de Usuario y Usabilidad

Juego de Escenarios

Page 21: La Experiencia de Usuario y Usabilidad

¿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

Page 22: La Experiencia de Usuario y Usabilidad

Audiencia

Page 23: La Experiencia de Usuario y Usabilidad

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

Page 24: La Experiencia de Usuario y Usabilidad

Escenarios

Page 25: La Experiencia de Usuario y Usabilidad

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.

Page 26: La Experiencia de Usuario y Usabilidad

¿Cómo se crea la estructura?

• Planificar

• Esquematizar

• Estudiar el Contenido

Page 27: La Experiencia de Usuario y Usabilidad

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.

Page 28: La Experiencia de Usuario y Usabilidad

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.

Page 29: La Experiencia de Usuario y Usabilidad

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.

Page 30: La Experiencia de Usuario y Usabilidad

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.

Page 31: La Experiencia de Usuario y Usabilidad

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

Page 32: La Experiencia de Usuario y Usabilidad

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

Page 33: La Experiencia de Usuario y Usabilidad

En Cada Página

• Firmar Documentos

• Contacto con el Autor

• Utilizar fechas en los documentos

• Cuidado con los formatos de fecha

Page 34: La Experiencia de Usuario y Usabilidad

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

Page 35: La Experiencia de Usuario y Usabilidad

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.

Page 36: La Experiencia de Usuario y Usabilidad

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

Page 37: La Experiencia de Usuario y Usabilidad

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

Page 38: La Experiencia de Usuario y Usabilidad

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

Page 39: La Experiencia de Usuario y Usabilidad

Tipografía

No todos poseen los mismos “fonts”

Page 40: La Experiencia de Usuario y Usabilidad

Tipografía

• Serif : son aquellas tipografías cuyas letras se apoyan como con una especie de pie

• Sans Serif: carecen de este detalle.

Page 41: La Experiencia de Usuario y Usabilidad

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)

Page 42: La Experiencia de Usuario y Usabilidad

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

Page 43: La Experiencia de Usuario y Usabilidad

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%

Page 44: La Experiencia de Usuario y Usabilidad

¡Esto no es todo !

Page 45: La Experiencia de Usuario y Usabilidad

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

Page 46: La Experiencia de Usuario y Usabilidad

Encuentre los Errores de Usabilidad

Page 47: La Experiencia de Usuario y Usabilidad
Page 48: La Experiencia de Usuario y Usabilidad
Page 49: La Experiencia de Usuario y Usabilidad
Page 50: La Experiencia de Usuario y Usabilidad
Page 51: La Experiencia de Usuario y Usabilidad
Page 52: La Experiencia de Usuario y Usabilidad
Page 53: La Experiencia de Usuario y Usabilidad

León Kadoch H.UX Designer / Information Architect

www.leon-kadoch.com

Slideshare.net/kadochTwitter.com/leonkadoch