Desarrollo de aplicaciones web y móviles usables, accesibles, sociables: una forma de potenciar la Experiencia del Usuario (UX)

Transcripción

1 Desarrollo de aplicaciones web y móviles usables, accesibles, sociables: una forma de potenciar la Experiencia del Usuario (UX) Dra. Eleonora Acosta y MSc. Jossie Zambrano Asociación Colombiana de Ingenieros de Sistemas, Nov 2015

2 Quiénes han formado parte de algún equipo de desarrollo de software? Han desarrollado aplicaciones interactivas? 3

3 Cuál es el componente de las aplicaciones interactivas con la que interactúa el usuario? La interfaz de usuario 4

4 Alguna representación de los usuarios ha sido miembro de sus equipos de desarrollo de software? 5

5 Valorar la importancia de la interfaz de usuario y enunciar buenas prácticas para interfaces usables, sociables accesibles, y que experiencia del consideren la usuario (UX) 6

6 Qué importancia tiene la interfaz de usuario? 7

7 Veamos qué opinan algunos otros usuarios 8

8 Una mala interfaz me costó el título Lewis Hamilton, piloto de F1 9

9 Una interfaz confusa me costó la Presidencia Al Gore, Yo fui el próximo presidente de los EEUU 10

10 La complejidad de la interfaz del centro de control nos pudo costar la vida Unos 60 pasajeros de la línea 3 del metro de Barcelona 11

11 Conclusión: la interfaz de usuario SI importa, y mucho 12

12 Algunos lo han tenido muy claro desde el principio 13

13 Cómo debe ser una buena interfaz de usuario? 14

14 Es una buena interfaz? 15

15 y ésta? 16

16 Éstas NO son buenas interfaces! 17

17 Y éstas, definitivamente, tampoco 18

18 Una interfaz de usuario debe ser usable, accesible y sociable. Para ello debe ser creada por y para los usuarios 19

19 Debemos saber diseñar interfaces pensando en los usuarios y contar con su participación 20

20 La disciplina donde se estudian estos tópicos es la Interacción Humano Computador 21

21 Nube de Palabras de IHC accesibilidad computación ubicua directriz discapacidad diseño universal Experiencia del Usuario dispositivos estándar estilo evaluación guía de estilo humano ingeniería interacción interfaz internacionalización localización memoria metáfora modelo mental computador invisible paradigma percepción principio prototipo realidad aumentada realidad virtual usabilidad uso del color usuario Sociabilidad 22

22 Accesibilidad Usabilidad Sociabilidad Evaluación Diseño Centrado en el Usuario 23

23 Agenda Introducción Interacción Humano-Computador (IHC) Interfaces de usuario Diseño centrado en el usuario Experiencia del Usuario Diseño Adaptable (responsive): Web y Móvil Usabilidad Accesibilidad Sociabilidad Cursos Especializados 24

24 Interacción Humano Computador Disciplina que estudia el diseño, evaluación e implementación de sistemas informáticos interactivos para el uso humano y de los fenómenos más importantes que los rodean. (ACM SIGCHI for Curricula HCI) 25

25 Usuarios Conocer a nuestro usuario: no solo cómo piensa, no lo que dice, sino cómo actúa. Observar al usuario para poder conocerlo e incorporarlo en el proceso de desarrollo de la aplicación Diversidad 26

26 Usuarios Móviles: Motivación Búsqueda Geoposicionamiento Exploración Juegos Actualización de Estado Foursquare Creación Fotos 27

27 Interfaz de usuario La Interfaz de Usuario (IU) es el componente interactivo de un producto (hardware y/o software) que le permite a las personas realizar las tareas para las cuales está concebido, en su trabajo o en su vida cotidiana 28

28 Características de una IU Múltiples ventanas desplegadas simultáneamente en la pantalla Representación de información mediante iconos Selección de acciones vía menú Sistema de ayuda en línea (on-line) Soporte de interacciones mediante diálogos y botones Uso de dispositivos apuntadores para manipulación directa de los objetos 29

29 Características de una IU móvil (IUM) Se basa en la técnica de manipulación directa Es un estilo o técnica de interacción que incluye la representación gráfica de objetos de interés y acciones, así como retroalimentación rápida y reversible. La intención es permitir al usuario manipular directamente los objetos en un ámbito virtual que representa el mundo físico 30

30 Características de una IUM Gestos multi-touch: Tocar, Arrastrar, Deslizar, Mantener Pulsado, Doble toque, Juntar/Separar y Girar 31

31 Características de una IUM Los elementos de control de la interfaz de usuario se componen de deslizadores, interruptores y botones 32

32 Características de una IUM Usan acelerómetros para personalizar la rotación (Vertical/Horizontal), o responder a sacudidas (deshacer) Provee Punto de partida (botón de inicio/home) y una barra inferior (favoritos) con las aplicaciones usadas con más frecuencia 33

33 Diseño Centrado en el Usuario Conjunto de métodos y técnicas cuyo paradigma central es la inclusión del usuario como centro de desarrollo, se debe tomar en cuenta las características del usuario, las actividades que realiza y el escenario donde desempeña su actividad Objetivo: lograr la satisfacción de las necesidades de los usuarios, adaptar la tecnología a sus expectativas y crear interfaces que faciliten la consecución de sus metas 34

34 Diseño Centrado en el Usuario De acuerdo a la norma ISO Entender y especificar el contexto de uso Especificar requisitos Producir soluciones de diseño Evaluación 35

35 Experiencia del Usuario (UX) Nivel de satisfacción de usuarios cuando utilizan una aplicación, depende no sólo de los factores relativos al diseño (hardware, software, usabilidad, diseño de interacción, accesibilidad, diseño gráfico y visual, calidad de los contenidos) sino además de aspectos relativos a las emociones, sentimientos, intereses, confiabilidad de un producto 36

36 Experiencia del Usuario (UX) UX evalúa la forma en la que se siente una persona en relación a la interacción con un producto Dillon (2001) propone un modelo que define la experiencia del usuario como la suma de tres niveles: acción, resultado y emoción Peter Morville 37

37 Diseño adaptable o adaptativo Responsive Web Design (RWD) es un enfoque de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla, pretende que con un solo diseño, se tenga una visualización adecuada en cualquier dispositivo 38

38 Diseño adaptable o adaptativo (RWD) PC Windows Telf. Inteligente Android Tableta Android Telf. Inteligente IOS 39

39 Dispositivos Móviles Representan una nueva oportunidad de acceso para los sistemas de información La diversidad de características de hardware y software conlleva un gran reto de diseño de interfaces de usuario móviles Tipos: teléfonos inteligentes, tabletas y ultrabooks 40

40 Aplicaciones Móviles Son aplicaciones informáticas diseñadas para ser ejecutadas en smartphones, tablets y otros dispositivos móviles Generalmente se encuentran disponibles a través de plataformas de distribución, operadas por compañías propietarias. 41

41 Aplicaciones Móviles: Plataforma INTERNET 42

42 Tipos Aplicaciones Móviles: Desarrollo Desarrollo de Aplicaciones Móviles Nativas acceso a hardware, mayor rapidez, integración gráfica, tienda virtual Web HTML/CSS/JavaScript Menos Inversión No requiere actualizaciones Híbridas Tecnología Web Tiendas Virtuales Acceso a API Despliegue multiplataforma 43

43 Aplicaciones Híbridas 44

44 Usabilidad De acuerdo a la norma ISO 9241 Usabilidad es la efectividad, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico. Según J. Nielsen Atributos de Calidad de Usabilidad Facilidad de Aprendizaje Facilidad de Memorización Eficiencia en Uso Tolerancia a errores Grado de Satisfacción 45

45 Principios de diseño aplicaciones móviles Simplicidad Diseño minimalista, pocos elementos, funciones bien definidas Consistencia El usuario está habituado y espera que las aplicaciones se comporten de la misma manera 46

46 Principios de diseño de aplicaciones Principios de diseño aplicaciones móviles Navegación intuitiva móviles Una navegación intuitiva permite, lograr un uso fluido y sin un gran esfuerzo del usuario Incidencia en la orientación Generalmente, los teléfonos suelen sujetarse en forma vertical, mientras que en tabletas es habitual cambiar con mayor frecuencia 47

47 Principios de diseño de aplicaciones Principios de diseño aplicaciones móviles móviles Interacción y ergonomía Las características anatómicas de la mano determinan las zonas de la pantalla que pueden ser alcanzadas con mayor o menor comodidad por este dedo «Ley del pulgar» 48

48 Principios de diseño de aplicaciones Principios de diseño aplicaciones móviles móviles Interacción y ergonomía Lugar de acceso Iluminación Tamaño Ubicación Movimiento Rotación Curva de Aprendizaje Adaptación Sensibilidad Touch Screen 49

49 Principios de Diseño Móvil Principios de diseño aplicaciones móviles Guías de Diseño Conceptual/MobileHIG/Principles.html 50

50 Técnicas de evaluación de usabilidad Inspección Evaluación Heurística Recorridos Cognitivos Guías de Estilo Lista de Comprobación Análisis de Sistemas Existentes Indagación Cuestionarios Entrevistas Observación de campo Tormentas de ideas Encuestas y Sondeos Pruebas Protocolo de Pensamiento Manifiesto Protocolo de Preguntas Laboratorio de Usabilidad Pruebas de Aceptación 51

51 Accesibilidad En general, accesibilidad es tener acceso, paso o entrada a un lugar o actividad, sin limitación alguna por razón de diversidad funcional La accesibilidad web es, según Tim Berners-Lee, ofrecer la web y sus servicios a las personas, sean cuales sean sus requisitos de hardware o software, su infraestructura de red, su idioma materno, su contexto cultural, su ubicación geográfica, o sus aptitudes mentales y físicas Diseño Universal 52

52 Diseño Universal Es el diseño de productos que sean fácil de usar por el rango más amplio de personas, funcionando en el rango más amplio de situaciones 53

53 Principios de Diseño Universal Uso equitativo Uso flexible Uso simple e intuitivo Información perceptible Tolerancia para el error Esfuerzo físico mínimo Tamaño y espacio apropiado 54

54 Accesibilidad móvil Telf. Inteligente IOS Telf. Inteligente Android Tableta Android Otros Recursos 55

55 Sociabilidad Es una cualidad de las aplicaciones interactivas asociada al aspecto social de la comunicación e interacción entre personas y a la cohesión colectiva Según Preece, permite alcanzar los objetivos sociales de una aplicación: la comunicación colaborativa y cooperativa, la cohesión colectiva, el sentido de pertenencia de un grupo, la posibilidad de compartir intereses (me gusta) y recursos 56

56 Sociabilidad y Teléfonos Inteligentes En los teléfonos inteligentes, los usuarios usan las redes sociales, logrando objetivos comunes de diferente índole: entretenimiento, relaciones profesionales, sentimentales, intereses y actividades en común, o están interesados en explorar los intereses y actividades de otros. Las redes sociales permiten: Comunicar Informar Construir Compartir Participar Colaborar 57

57 Mecanismos de Socialización Social media Entretenimiento Localización 58

58 Cursos Especializados Interaccion Humano Computador: la IU determinante en el éxito del software Agilidad y Usabilidad en el desarrollo de software Introducción Aplicaciones móviles Desarrollo de Interfaces de Usuario Móviles Introducción al desarrollo de aplicaciones Nativas (Android) Introducción al desarrollo de aplicaciones Nativas (IOS) Seguridad y aplicaciones móviles Desarrollo de API s Desarrollo Multiplataforma Desarrollo de aplicaciones adaptativas (Web móviles) 59