Proyecto Análisis de Datos I: UI, UX y Usabilidad en productos digitales

Universidad Europea

0 1 0 0 0 1 1 0 0 10 1 1 0 1 0 0 0 101 011 1 1 0100000101001010110 1 1 0 1 10011 1 0 1 1 1010 001 10 O 111000110011100 001 1 0 1 0 1 0 0 10001 1 1 1 1 1 111 110 111 1 0100000101001 0 10110 10 0 1 1 1 001110111010 001 101 0 0 111000 110 0 11 100 0 01 1 0 1 0 1 0 0 1 0 001 1 1 1 1 0 1 1 1 1 0 0 1 0 1 1 0 0 11 0 1 1 1 .010 1 0 1 00 1 0 1 1000110011100 001 1 1 0 1 1 0 0 1 0 0 0 11 0 1 1 0 101101000101 011 100 010 01 0 0 0 0 0 10 10 0 10 1010 1 0 11 1 1 0 1 1 1 1 010 1 1 0 1 100 0 11100011 0011100 001 1 0 1 Proyecto: Análisis de datos I UI, UX y Usabilidad 1 111 0 01010110 1 1 1 0 1 1 1 0Ue Universidad Europea

Índice de Contenidos

Índice Presentación Objetivos

1. UI - User interface
   1. ¿ Qué es la interfaz de usuario?
   2. Características clave de una interfaz de usuario
   3. Tipos de interfaz digital de usuario
2. UX - User Experience
   1. Diferencias entre UX y UI
   2. Objetivos clave de la experiencia de usuario
   3. Evaluación de la experiencia de usuario
3. Usabilidad
   1. ¿ Qué es la usabilidad?
   2. Características de la usabilidad según ISO 9241 (I, II)
   3. Métodos de evaluación de la usabilidad
4. Diferencias entre UI, UX y usabilidad

Conclusiones Referencias bibliográficas @ Copyright Universidad Europea. Todos los derechos reservadosve

Objetivos del Recurso

UI, UX y Usabilidad Objetivos Los objetivos que se pretenden alcanzar con este recurso son los siguientes:

• Entender que la analítica de datos que proporciona un sistema como el que se desarrollará en la asignatura requiere de una comunicación entre las personas y una aplicación de software, mediante la interfaz de usuario.
• Conocer los tipos de interfaz de usuario y las características que debe tener una interfaz de usuario
• Considerar que el diseño visual de una interfaz de usuario es una tarea compleja que tiene sus propias reglas que cumplir, a la vez que debe tener presente y ser guiada por reglas externas, menos centradas en el sistema desarrollado, y enfocado principalmente en la persona.
• Saber que un usuario es una persona que percibe sensaciones cuando utiliza un sistema de análisis de datos, y esas sensaciones provocan rechazo o satisfacción.
• Entender que la usabilidad es una parte importante de la experiencia de usuario.

@ Copyright Universidad Europea. Todos los derechos reservados 3ve

Presentación del Tema

UI, UX y Usabilidad Presentación En este tema introductorio al diseño de los dashboards como proyectos de análisis de datos, nos centramos en los aspectos que intervienen en el desarrollo de dicho diseño: la interfaz de usuario, la experiencia de usuario y la usabilidad. Distinguir estos conceptos y entender la importancia de sus características ayudará al alumno a asimilar para poner en práctica los objetivos que debe perseguir al diseñar el dashboard como primer paso del desarrollo del proyecto de la asignatura. @ Copyright Universidad Europea. Todos los derechos reservados 4UI, UX y Usabilidad ve

1. Interfaz de Usuario (UI)

1.1 ¿Qué es la interfaz de usuario?

La interfaz del usuario (user interface, UI) es a la vez el diseño gráfico y la implementación de la forma en que un usuario interactúa con un producto (sistema, aplicación, web o parte de una máquina).

• Forma de interactuar: es la UI física (palanca de cambio, salpicadero, freno de un coche, o la cabina del piloto de un avión y los interruptores para manejarlo).
• Diseño gráfico: es la UI digital (diseño visual con gráficos (Graphic User Interface) o desarrollándola con HTML, CSS, jQuery, etc.

$1.490.00 ** 55% ...... - Figura 1. UI física (izquierda) y digital (derecha). Recuerda Lo que se intenta con el UI es que el sistema sea lo más claro, conciso, coherente, flexible y atractivo visualmente posible. A menudo nos referimos a la UI digital, como Front-End de la aplicación. 5 @ Copyright Universidad Europea. Todos los derechos reservadosUI, UX y Usabilidad ve

1.2. Características clave de una interfaz de usuario

ACCIONABLE: la interfaz tiene que ser diseñada para que los usuarios puedan comunicar a la aplicación lo que necesitan, y recibir una respuesta en forma visual, voz, luces o acción. ESTÉTICA: los diseñadores de UI son diseñadores gráficos que buscan que la aplicación sea atractiva y visualmente estimulante. CONSISTENTE: es necesario asegurarse de que cada elemento visual se sienta unido, tanto estéticamente como en función. COHERENTE: la UI debe tener la temática adecuada para que coincida con el propósito y/o personalidad de la aplicación. CLARA Y CONCISA: la UI no puede llevar a la confusión en su función de comunicar entre el producto y el usuario. ACCIONABLE ESTÉTICA CLARA Y CONCISA UI COHERENTE CONSISTENTE Figura 2. Características de la UI. Fuente: elaboración propia 6 @ Copyright Universidad Europea. Todos los derechos reservadosUI, UX y Usabilidad ve

1.3. Tipos de interfaz digital de usuario

CLI (Command Line Interface) Aunque es el más antiguo, este tipo de interfaz aún está en uso, y consiste en que el usuario tenga que comunicarse con la aplicación por medio de comandos e instrucciones. Suele ser bastante técnico y puede requerir tener conocimientos de programación. TUI (Text User Interface) Similar a la CLI, pero más moderna, la TUI consiste en usar el teclado para confirmar operaciones, pero no es necesario saber de programación. GUI (Graphical User Interface) Es la interfaz mayoritaria actualmente. Además del teclado, como en CLI y TUI, se usa el ratón, y suelen encontrarse gráficos simples (como iconos) que sirven como botones, menús u otros elementos. NUI (Natural User Interface) El usuario utiliza gestos, acciones manuales (como en la Nintendo Switch) o voz (como Siri) para interactuar con la aplicación. Se llama natural porque imita la forma de interactuar de los humanos. Cuando es por voz, se le conoce como VUI (Voice User Interface). BCI (Brain-Computer Interface) Es el tipo de interfaz más novedoso, que conecta el cerebro humano con un sistema artificial. Ejemplos de uso son las prótesis. @ Copyright Universidad Europea. Todos los derechos reservados 7UI, UX y Usabilidad ve

2. Experiencia de Usuario (UX)

2.1. Diferencias entre UX y UI

Es conveniente definir la experiencia de usuario en comparación con la interfaz de usuario porque a menudo se confunden. El motivo es que tienen muchos puntos en común, al definir la interfaz de usuario se le exigen características que intervienen en la experiencia que el usuario tiene cuando usa una aplicación. La diferencia se vuelve más clara cuando vamos a la función estricta y esencial de cada término. Mientras la interfaz de usuario esencialmente hace posible comunicar al usuario con una aplicación, la experiencia de usuario se centra esencialmente en asegurar la calidad de esa comunicación. Definición de UX según su creador Don Norman, ingeniero electrónico en Apple, definió en 1993 la Experiencia de usuario como todos los aspectos de la interacción del usuario final con la compañía, sus servicios y sus productos. Es decir, UX implica recordar que el usuario, como ser humano, va a valorar las sensaciones que tiene cuando usa una UI, por tanto define unas directrices que aplican al diseño de la UI para conseguir una UX de calidad (de ahí la confusión entre ambas). ¿La experiencia es fluida e intuitiva o torpe y confusa? ¿Cuando interactúan con la aplicación, las personas sienten que están consiguiendo de manera eficiente las tareas que se propusieron lograr? ¿ o les parece que ha sido como una lucha? ¿Navegar por la aplicación provoca sensaciones lógicas o arbitrarias? La experiencia del usuario está determinada por lo fácil o difícil que sea interactuar con los elementos de la interfaz de usuario que han creado los diseñadores de la interfaz de usuario. Figura 3. Preguntas que plantea la UX. 8 @ Copyright Universidad Europea. Todos los derechos reservadosUI, UX y Usabilidad ve

2.2. Objetivos clave de la experiencia de usuario

• USABLE (USABLE): la aplicación debe ser fácil de usar con la mayor eficiencia y el mínimo error.
• DESIRABLE (SATISFACTORIA): la aplicación debe provocar en los usuarios el deseo de interactuar con la aplicación, no el rechazo.

ACCESIBLE: mientras el diseñador de UI se centra en proporcionar a la aplicación las vías de comunicación necesarias con las personas, la experiencia de usuario se inicia en las características de las personas (necesitan ver u oír para interactuar) o de su objetivo (necesitamos interactuar mientras hacemos otras cosas). CREDIBLE (CREÍBLE): la comunicación debe ser asertiva y no generar dudas. La sensación de la persona que interactúa debe ser la de fiabilidad de la aplicación. FINDABLE (LOCALIZABLE): la información debe exponerse al usuario, sin provocarle la necesidad de tener que buscar con dificultad lo que desea obtener de la aplicación. · USEFUL (ÚTIL): utilizar la aplicación debe acercar a las personas al objetivo que se han marcado. VALUABLE (VALIOSA): resumen de todas las anteriores, la aplicación se vuelve valiosa cuando la experiencia de usuario es usable, satisfactoria, accesible, creíble, localizable y útil USEFUL USABLE DESIRABLE VALUABLE FINDABLE ACCESSIBLE CREDIBLE Figura 4. Objetivos de la UX. Fuente: recuperado de <https://decemberlabs.com/blog/ux-vs-ui/> 9 @ Copyright Universidad Europea. Todos los derechos reservadosUI, UX y Usabilidad ve

2.3. Evaluación de la experiencia de usuario

Hemos visto que bajo el paraguas de la Experiencia de usuario entran en juego muchos factores que influyen en la manera en que las personas percibimos las aplicaciones al interactuar con ellas. ¿Cómo evaluamos si una experiencia de usuario cumple con los preceptos necesarios? La experiencia de usuario no es universal, depende de las diferentes situaciones, culturas, objetivos, sectores, o dispositivos utilizados. Un diseño UI que ha sido guiado por unas decisiones que mejoran la UX de una persona, puede tener el efecto opuesto sobre otra persona o grupo. No es posible predecir con total exactitud lo que las personas sentirán al utilizar la aplicación. Por eso, un elemento muy importante de la UX son los test A/B. Los Test A/B consisten en poner a disposición de dos grupos de personas (grupo A y grupo B) diferentes versiones de la UI con pequeñas o sutiles diferencias entre ellas (se denomina Split Test cuando se experimenta con más de dos grupos de personas). Las diferencias deben poder medirse, por tanto, el grupo que mejor resultados haya mostrado en la medida, determina la versión a elegir (mejor UX en mayoría). Ejemplo de Test A/B para UX A/B testing (35) A B Figura 5. Testing A/B.

• GRUPO A: (grupo de control) se ofrece a los usuarios un botón para acceder a una sección en una página web, y un texto debajo, donde se explica qué se puede esperar al pulsar sobre el botón de la sección.
• GRUPO B: (grupo de prueba) el mismo botón que da acceso a la sección se ofrece a otro grupo de usuarios en la misma página web, pero con el texto explicativo a la derecha.
• Resultado Test A/B: la opción que mejor UX proporciona es la del grupo (A o B) que obtiene más clics en la sección.

@ Copyright Universidad Europea. Todos los derechos reservados 10