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