VerMás

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
¿Quiénes han formado
parte de algún equipo de
desarrollo de software?
¿Han desarrollado
aplicaciones interactivas?
3
¿Cuál es el componente
de las aplicaciones
interactivas con la que
interactúa el usuario?
La interfaz de usuario
4
¿Alguna representación de
los usuarios ha sido
miembro de sus equipos
de desarrollo de
software?
5
Valorar la importancia de
la interfaz de usuario y
enunciar buenas prácticas
para interfaces usables,
accesibles, sociables y que
consideren la experiencia del
usuario (UX)
6
¿Qué importancia tiene
la interfaz de usuario?
7
Veamos qué opinan
algunos otros
usuarios…
8
“Una mala interfaz
me costó el título”
Lewis Hamilton, piloto de F1
9
“Una interfaz confusa me costó la
Presidencia”
Al Gore, “Yo fui el próximo presidente de los EEUU”
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
Conclusión:
la interfaz de usuario
SI importa, y mucho
12
Algunos lo han tenido muy claro desde el
principio
13
¿Cómo debe ser una
“buena” interfaz de
usuario?
14
¿Es una buena interfaz?
15
¿y ésta?
16
¡Éstas NO son buenas interfaces!
17
Y éstas, definitivamente, tampoco
18
Una interfaz de usuario
debe ser
usable, accesible y
sociable.
Para ello debe ser creada
por y para los usuarios
19
Debemos saber diseñar
interfaces
pensando en los usuarios
y contar con su
participación
20
La disciplina donde
se estudian estos tópicos
es la
Interacción
Humano Computador
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
Usabilidad
Accesibilidad
Sociabilidad
Evaluación
Diseño Centrado en el Usuario
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
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
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
Usuarios Móviles: Motivación
 Búsqueda
 Geoposicionamiento
 Exploración
 Juegos
 Actualización de Estado
 Foursquare
 Creación
 Fotos
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
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
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
Características de una IUM
Gestos multi-touch: Tocar, Arrastrar, Deslizar,
Mantener Pulsado, Doble toque, Juntar/Separar y Girar
31
Características de una IUM
Los elementos de control de la interfaz de usuario se
componen de deslizadores, interruptores y botones
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
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
Diseño Centrado en el Usuario
De acuerdo a la norma ISO 13407
 Entender y especificar el contexto de uso
 Especificar requisitos
 Producir soluciones de diseño
 Evaluación
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
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
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
Diseño adaptable o adaptativo (RWD)
Telf. Inteligente Android
PC Windows
Tableta Android
Telf. Inteligente IOS
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
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
Aplicaciones Móviles: Plataforma
INTERNET
42
Tipos Aplicaciones Móviles: Desarrollo
Desarrollo de Aplicaciones
Móviles
Nativas
Web
acceso a hardware,
mayor rapidez,
integración gráfica,
tienda virtual
HTML/CSS/JavaScript
Menos Inversión
No requiere
actualizaciones
Híbridas
Tecnología Web
Tiendas Virtuales
Acceso a API
Despliegue
multiplataforma
43
Aplicaciones Híbridas
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
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
Principios de diseño de aplicaciones
Principios de diseño aplicaciones móviles
móviles
Navegación intuitiva
 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
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
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
Principios
de diseño
móviles
Principios
deaplicaciones
Diseño Móvil
Guías de Diseño
http://developer.android.com/intl/es/design/index.html
https://developer.apple.com/library/ios/documentation/UserExperience/
Conceptual/MobileHIG/Principles.html
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
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
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
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
Accesibilidad móvil
Telf. Inteligente IOS
Telf. Inteligente Android
Otros Recursos
Tableta Android
http://developer.android.com/intl/es/guide/topics/ui/accessibility/checklist.html
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
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  Colaborar
Informar
 …
Construir
Compartir
Participar
57
Mecanismos de Socialización
Social media
Entretenimiento
Localización
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