Diseño centrado en Experiencia de Usuario User eXperience

Diseño centrado en Experiencia de Usuario Concepto de experiencia Investigación Diseñar centrándose en UX Qué es (factores) Cómo (técnicas y tareas): Arquitectura de la Información Usabilidad Accesibilidad Estandarización Extra: diseño responsivo

Diseño centrado en Experiencia de Usuario Estudio de casos:

Experiencia de usuario Concepto Producto Interacción Experiencia

Experiencia de usuario Concepto www.nosolousabilidad.com/articulos/experiencia_del_usuario.htm Experiencia de usuario Concepto

Experiencia de usuario Definición www.nosolousabilidad.com/articulos/experiencia_del_usuario.htm Experiencia de usuario Definición 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, 2005) Es, sencillamente, la experiencia que obtiene el usuario cuando interactúa con un producto en condiciones particulares (Arhippainen y Tähti (2003) Concepto integrador de todos los aspectos de la interacción entre el usuario final y la compañía, sus servicios y productos Nielsen & Norman Group (2003)

Satisfacción y emoción

Experiencia de usuario Investigación > ¿Qué necesito saber de mi usuari@ potencial?

Experiencia de usuario Investigación > ¿Qué necesito saber de mi usuari@ potencial? Características psicosociales Necesidades de información Contextos de acceso y uso a los contenidos Habilidades, competencias, actitudes y disponibilidad de recursos en relación con las TIC Código cultural Preferencias estéticas Conocimientos previos

Diseño basado en la experiencia de usuario Factores (Alcalá)

Diseño basado en la experiencia de usuario > Factores Rueda de la experiencia de usuario de Francisco Tosete

Diseño basado en la experiencia de usuario > Factores La colmena de Morville

www.nosolousabilidad.com/articulos/experiencia_del_usuario.htm

Experiencia de usuario Apple (transposición comportamiento emocional) www.ijam.es Sentimientos pre-asociados a producto/marca Emociones evocadas en la interacción Estado de humor

Experiencia de usuario Apple (transposición comportamiento emocional) Explora www.ijam.es y reflexiona sobre estos 3 aspectos: Sentimientos pre-asociados a producto/marca Emociones evocadas en la interacción Estado de humor

Arquitectura de la Información

Arquitectura de la Información Tareas Análisis del entorno Descubrir objetos, su naturaleza y función Nombrarlos de forma unívoca Diferenciarlos, clasificarlos, categorizarlos Construir un sistema para comunicarlos Efectuar la comunicación

Arquitectura de la Información Definición Multiplicidad de definiciones Aproximaciones pluridisciplinares (diseño gráfico, documentación, ingeniería, comunicación, etc.) Richard Saul Wurman Organización de los patrones inherentes a la información: “Hacer fácil lo complejo” Louis Rosenfeld Usa herramientas, técnicas y experiencias de disciplinas que ven la información como algo importante y valioso por sí mismo Peter Morville El arte y la ciencia de organizar y etiquetar para apoyar las capacidades de uso y búsqueda Jesse James Garret Define cómo las personas procesan la información y construye relaciones entre sus diferentes elementos Nathan Shedroff Sistema para organizar datos, para transformarlos en información

Arquitectura de la Información Definición Disciplina de conocimiento que persigue definir estructuras de información que sean fácilmente comprensibles por parte de sus destinatarios, así como procesos usables de interacción entre estos y dichas estructuras, y construir entorno a ellos herramientas de navegación, búsqueda y orientación que permitan una gestión satisfactoria de la información (Sotillos, 2002: 35)

Arquitectura de la Información Áreas y fases Análisis de la información Clasificación de la información Etiquetado de la información Organización de la información Sistemas de navegación Sistemas de búsqueda Sistemas de orientación Diseño de los sistemas de recuperación de información Estructuras de información Procesos de interacción del usuario con estas estructuras Construcción de escenarios y agentes Diseño de la estructura de la información y la interacción

Experiencia de usuario según competencia TIC y estructura narrativa

Arquitectura de la Información Técnicas y tareas > Lectura de artículos: http://www.guiadigital.gob.cl/arquitectura-de-informacion http://www.guiadigital.gob.cl/articulo/que-es-una-interfaz http://www.guiadigital.gob.cl/articulo/elementos-del-diseno-de-interfaces-e-interaccion http://www.guiadigital.gob.cl/articulo/experiencia-de-usuario

Usabilidad

Diseño basado en la experiencia de usuario Usabilidad > Definición La usabilidad es un atributo relacionado con la facilidad de uso. Más específicamente se refiere a la rapidez con que se puede aprender a utilizar algo, la eficiencia al utilizarlo, cuán memorable es, cuál es su grado de propensión al error, y cuánto le gusta a los usuarios. Si una característica no se puede utilizar o no se utiliza, es como si no existiera. Jakob Nielsen

Rapidez para aprender a usar Diseño basado en la experiencia de usuario > Usabilidad FACILIDAD DE USO Rapidez para aprender a usar Eficiencia al usar Uso memorable (recordable) No conduce a error Sensaciones positivas al usar

Ley de Fitt sobre los tiempos de clic (1954) Diseño basado en la experiencia de usuario Usabilidad > Concepto Ley de Jakob sobre la experiencia de usuario en Internet: Los usuarios pasan la mayor parte del tiempo en otros sitios Web diferentes al nuestro (incluso aunque seamos líderes en nuestro mercado o nicho) Ley de Fitt sobre los tiempos de clic (1954) La velocidad de clic sobre los elementos de una pantalla, es decir, el tiempo que un puntero necesita para alcanzar su objetivo es proporcional al logaritmo de la distancia hasta el objetivo dividido por el tamaño de dicho objetivo. Cuando más grande sea algo, menos tiempo lleva hacer clic en ello.

Diseño basado en la experiencia de usuario Usabilidad Web > Principios básicos http://comunicaciondigital.es/principios-generales-de-usabilidad-web/

Diseño basado en la experiencia de usuario Usabilidad > Reglas básicas Los enlaces deben cambiar de estado cuando se visitan (color, etc.) No se debe, en ningún caso, deshabilitar el botón “Atrás” del navegador. No utilizar enlaces a “nuevas ventanas de navegación”, salvo cuando se justifique en términos de usar información paralela entre dichas ventanas, o se trate de enlaces a ficheros (pdf, diapositivas, hojas de cálculo o ficheros similares); en otro caso, es mejor que los enlaces carguen siempre en la misma ventana inicial. Evitar las ventanas emergentes y/o que aparecen de forma sorpresiva, sin que sean activadas explícitamente por el usuario.

Diseño basado en la experiencia de usuario Usabilidad > Reglas básicas Eludir el uso de elementos de diseño que puedan confundirse con publicidad. Los usuarios han desarrollado estrategias de cierta “ceguera” que evita, automáticamente, esos bloques de información. Seguir, en el diseño, en la navegación, en la Arquitectura de la Información…, las convenciones globales de la Web. Debemos solo ser “atrevidos”, “revolucionarios”, cuando el objetivo del sitio lo justifique y estemos convencidos de que realmente puede funcionar. El contenido y la información debe ser preciso, directo, sin elementos banales o etéreos. Los usuarios en la web buscan con claridad lo que quieren; si un sitio es engorroso o poco claro en lo que ofrece, directamente se van. Evitar, salvo que sea una necesidad específica por el tipo de información, textos densos y extensos.

Diseño basado en la experiencia de usuario Usabilidad > Reglas básicas Evitar ficheros poco optimizados que puedan ofrecer tiempos de descarga lentos. Evitar el uso de marcos. No desarrollar sitios Flash 100%, ni crear páginas cuya extensión, directamente, sea .swf. Embeber los ficheros flash en html o lenguajes de servidor (php, asp…). Utilizar, preferentemente, “diseños líquidos” (que se adaptan al tamaño de la ventana) frente a “diseños congelados” (que generan scroll cuando el tamaño de la ventana es menor que el diseño de la página) Facilitar información sobre quién está detrás de la Web, su actualización, forma de contactar, política de privacidad (donde sea preciso), etc. Evitar elementos en movimiento (gráficos, textos que se desplazan, etc.) que no posean una funcionalidad real. Etiquetar adecuadamente el contenido y los elementos de navegación para que los usuarios tengan claro qué información pueden obtener haciendo clic en ellos (recordad que esto responde a convenciones de uso habituales en la Red) Actualizar el contenido (los usuarios evitan los sitios que no actualizan con cierta periodicidad su información) Revisar el sitio para evitar páginas huérfanas (sin enlaces a ningún otro lugar del sitio), enlaces rotos…)

http://oscar.go.com/nominees?cid=AMPAS

Diseño basado en la experiencia de usuario Accesibilidad

WAI (Web Accesibility Initiative) Diseño basado en la experiencia de usuario Accesibilidad > Definición La accesibilidad Web significa que personas con algún tipo de discapacidad van a poder hacer uso de la Web. En concreto, al hablar de accesibilidad Web se está haciendo referencia a un diseño Web que va a permitir que estas personas puedan percibir, entender, navegar e interactuar con la Web, aportando a su vez contenidos. La accesibilidad Web también beneficia a otras personas, incluyendo personas de edad avanzada que han visto mermadas sus habilidad a consecuencia de la edad. WAI (Web Accesibility Initiative)

Derecho de acceso a la información Diseño basado en la experiencia de usuario Accesibilidad > Justificación ¿Por qué hacer sitios y contenidos accesibles? Derecho de acceso a la información Derecho de acceso a los servicios públicos. Igualdad de oportunidades. Mayor audiencia. Imagen: responsabilidad social.

https://storify.com/sergioalgar/accesibilidad-web-escuchando-renfe-com

Estandarización Concepto ¿Qué son los estándares? Un estándar puede definirse como un conjunto de reglas normalizadas que indican los requisitos a cumplir por todo producto, proceso o servicio, con el fin garantizar la compatibilidad entre los distintos elementos que lo utilicen (INTECO)

Estandarización Justificación ¿Por qué emplear estándares? Código más sencillo Compatibilidad Mejora accesibilidad Mejora posicionamiento Mejor adaptación a dispositivo final Mejor adaptación al usuario Mejora en la impresión Mejora en el mantenimiento Mayor rapidez en la carga Mayor confianza en la Red Mayor carga semántica Competitividad

Estandarización Principales estándares web XML Lenguajes estructurales (HTML, XHTML) Lenguajes de presentación (CSS) Modelo de Objetos del Documento (DOM) Expresiones matemáticas (MathML) Formatos gráficos (PNG) Sindicación de contenidos (RDF – RSS) Presentaciones multimedia (SMIL) Gráficos vectoriales (SVG) Transformaciones (XSLT) Tecnologías de script (Javascript, Ajax) Estándares de facto (PDF, MP3, MPEG4…)

Estandarización Evaluación http://validator.w3.org/

Estandarización Hacia el estándar definitivo http://www.w3.org/TR/2009/WD-html5-20090423/

RESPONSIVE web design (RWD) Concepto Adaptación del sitio web al entorno (dispositivo/pantalla) del usuario

RESPONSIVE web design (RWD) Ingredientes técnicos Fluid Grid (cuadrícula fluida) Imágenes flexibles Media queries http://hipertextual.com/archivo/2012/11/diseno-web-adaptativo-responsive-design/

RESPONSIVE web design (RWD) Grados No responsive Adaptativo Full responsive http://tunegocioenlanube.net/diseno-responsive-o-diseno-web-adaptativo/

RESPONSIVE web design (RWD) Comprobamos http://ami.responsivedesign.is/ http://springload.responsinator.com/

https://storify.com/sergioalgar/estructura-de-la-comunicacion-multimedia

Diseño centrado en Experiencia de Usuario User eXperience