Taller de Desarrollo de Interfaces:
Una aproximación al desarrollo de interfaces centradas al usuario
Mario Alberto Moreno Rocha

Carlos Alberto Martínez Sandoval

Fernando Macías Ruvalcaba

UsaLab Laboratorio de Usabilidad
Universidad Tecnológica de la Mixteca
Objetivo del taller: mostrar un panorama acerca de la Interacción
Humano-Computadora y la aplicación de la usabilidad en un desarrollo
de interfaces de usuario que pueda ser útil para los asistentes del taller
en sus respectivas actividades.
2
CONALEP 2016
Estructura del Taller
Primera Parte: conocimiento teórico
Revisaremos la teoría básica de la
Interacción Humano-Computadora y los
beneficios de un desarrollo de interfaces
gráficas centradas al usuario.
Conoceremos las ventajas de la
usabilidad y la manera de obtenerla.

30 minutos
Segunda Parte: ejercicio práctico
Realizaremos un ejercicio en el que
pondremos en práctica actividades que
aprendimos durante la primera parte del
taller. Diseñaremos en conjunto una
solución centrada al usuario utilizando
técnicas útiles para todos.

Dos hora y media
3
CONALEP 2016
Primera Parte:
conocimiento teórico
CONALEP 2016
Quiénes somos?
Universidad Tecnológica de la
Mixteca (perteneciente al SUNEO)

La nuestra es una universidad de
tecnología, buscando el desarrollo a
través de la excelencia académica, la
investigación científica y la promoción
al desarrollo social. 

La Interacción Humano-Computadora
es uno de los aspectos claves para
alcanzar nuestros objetivos. 

www.utm.mx
5
CONALEP 2016
Quiénes somos?
UsaLab Laboratorio de Usabilidad
Fundado en el año 2001, es el primer y
único laboratorio de su tipo ofreciendo
servicios de estudios de usabilidad a la
industria, desde la universidad

Clientes importantes
Concursos académicos

Investigación y enseñanza

www.usalab.com.mx
6
CONALEP 2016
Quiénes somos?
UsaLab Laboratorio de Usabilidad
Fundado en el año 2001, es el primer y
único laboratorio de su tipo ofreciendo
servicios de estudios de usabilidad a la
industria, desde la universidad

Clientes importantes

Concursos académicos
Investigación y enseñanza

www.usalab.com.mx
7
CONALEP 2016
Quiénes somos?
UsaLab Laboratorio de Usabilidad
Fundado en el año 2001, es el primer y
único laboratorio de su tipo ofreciendo
servicios de estudios de usabilidad a la
industria, desde la universidad

Clientes importantes

Concursos académicos

Investigación y enseñanza
www.usalab.com.mx
8
CONALEP 2016
No les ha pasado?
9
No les ha pasado?
10
CONALEP 2016
No les ha pasado?
11
CONALEP 2016
No les ha pasado?
12
CONALEP 2016
No les ha pasado?
13
CONALEP 2016
No les ha pasado?
14
ISO 9241
“Usabilidad es la efectividad, eficiencia y satisfacción
con la que un producto permite alcanzar tareas
específicas a usuarios específicos en un contexto de
uso específico”

Usabilidad
15
CONALEP 2016
Beneficios de la usabilidad
Los beneficios de la usabilidad incluyen:

• Mejora en la productividad

• Reducción en costos de capacitación y soporte 

• Mejora en ventas y ganancias

• Reducción de tiempos y costos de desarrollo

• Reducción en costos de mantenimiento

• Mejora en la satisfacción de los clientes Fuente: UPA Website 2012
16
CONALEP 2014
Cómo lograrlo?
Norman & Draper ’86
User Centered Design
(UCD)
17
CONALEP 2016
Cómo lograrlo?
Análisis de Requerimientos
Personas
Estudio Contextual
Norman & Draper ’86
User Centered Design
(UCD)
18
CONALEP 2016
Cómo lograrlo?
Análisis de Requerimientos
Personas
Estudio Contextual
Guías de Diseño de GUI
Wireframing
Experiencia pasada
Norman & Draper ’86
User Centered Design
(UCD)
19
CONALEP 2016
Cómo lograrlo?
Análisis de Requerimientos
Personas
Estudio Contextual
Evaluaciones Expertas
Mago de Oz
Card Sort
Focus Group
Pruebas de usabilidad
Norman & Draper ’86
Guías de Diseño de GUI
Wireframing
Experiencia pasada
User Centered Design
(UCD)
20
CONALEP 2016
Break! 10 minutos
CONALEP 2016
Segunda Parte:
ejercicio práctico
CONALEP 2016
Diseño de las
interfaces de un
teléfono de 100 pesos
Definición de 

‣Usuarios (Personas)

‣Tareas (Focus Group, Card Sort)

‣Contexto (Estudio Contextual)

Diseño de
‣Interfaces de usuario (Experiencia)
23
UNSIJ 2017
1. Definición del usuario (Persona) - 15 minutos
Definir el usuario al que estará dirigido el teléfono de 100 pesos.

Puede ser nosotros mismos o considerar las características de otro grupo
de población (eg. personas mayores, personas con discapacidad, etc).

Para ésto, utilizamos una técnica llamada Personas en que se desarrolla
un personaje ficticio que representa típicamente un grupo de usuarios.
24
UNSIJ 2017
ING. EFRÉN “REDBULL” RIVAS
ADMINISTRADOR DE SISTEMAS
NADASOFTWARE
CARACTERÍSTICAS
27 AÑOS, MASCULINO, SOLTERO
ING EN SISTEMAS UNITEC, 2007
ESTÁ EN LÍNEA 20 O MÁS HORAS AL DÍA,
CONEXIÓN T1 EN EL TRABAJO, INFINITUM EN SU
CASA, RED IUSACEL BAM EN TODOS LADOS
PASA LA MAYOR PARTE DEL TIEMPO EN BLOGS
DE SU ÁREA, ADEMAS REDES SOCIALES COMO
FACEBOOK Y TWITTER; ENVÍA CORREOS TODO
EL DÍA Y EN SU BLACKBERRY RECIBE NOTICIAS
DE SU SERVICIOS
DESARROLLA SUS PROPIAS APLICACIONES
PERO NADA MÁS EL LAS PUEDE UTILIZAR
PIENSA QUE SU TRABAJO NO ES VALORADO,
PERO LE GUSTA DONDE ESTÁ
ATRIBUTOS:
ORIENTADO A METAS PARA LOGRAR
OBJETIVOS PARA LA ORGANIZACIÓN
LÍDER DE OPINIÓN Y DE SU EQUIPO DE TRABAJO,
LE LLAMAN “GURÚ”
OBSESIONADO EN PRESERVAR LA SEGURIDAD
DE SU RED Y DE CONTAR CON LAS ÚLTIMAS
VERSIONES DE SO LINUX Y DE APLICACIONES
GRATUTITAS PARA ADMINISTRACIÓN DE
SERVIDORES
SÓLO HABLA EN ACRÓNIMOS
NO LE INTERESA OTRA COSA FUERA DE SU
TRABAJO
FRASE:
“CUÁL SERÁ LA PRÓXIMA RED SOCIAL QUE
SUBSTITUYA A GOOGLE+?”
25
2. Definición de tareas (Focus Group y Card Sort) - 25 minutos
Definir las tareas del teléfono de 100 pesos

Para el Focus Group, cada uno de nosotros definirá las tres tareas
principales que utiliza en su propio teléfono celular

Para el Card Sort, cada uno de nosotros definirá en los Post-Its los
nombres con los cuales piensen que la opción deberá aparecer en el
teléfono
26
UNSIJ 2017
Focus Group - 15 minutos
27
Card Sort - 10 minutos
28
UNSIJ 2017
3. Definición de contexto (Estudio Contextual) - 15 minutos
Definir el contexto (entorno) del teléfono de 100 pesos

Observar a los usuarios dentro del contexto de uso, para determinar las
características que afectarían al sistema a desarrollar.

Se utilizan métodos de observación derivadas de la psicología
conductual.

29
UNSIJ 2017
Cultura como un iceberg (Kohls, 1995)
1. Los usuarios usan y atesoran la
tecnología en su vida diaria.

2. Los usuarios no han visto la tecnología
que se pretende utilizar.

3. Aunque desconocen la tecnología
propuesta, no existe un rechazo, sino una
aproximación cuidadosa a ella,
despertando mucho interés.

4. Los usuarios prefieren el uso de un
teclado virtual a uno físico (esto descarta
el uso de dispositivos periféricos físicos).

5. La utilización de videos para instrucción
es factible, además del uso de audífonos
30
Estudio Contextual - 15 minutos
31
4. Diseño de Interfaces (Wireframing) - 25 minutos
Diseñar las interfaces del teléfono de 100 pesos

Se utilizan plantillas para el desarrollo de las interfaces de usuario. Estas
plantillas se pueden encontrar en internet.

Las interfaces se desarrollan por parejas, aportando su conocimiento
previo para el desarrollo de prototipos que serán evaluados más tarde.

32
UNSIJ 2017
Wireframing - 25 minutos
33
5. Presentación de resultados - 10 minutos
Presentar las interfaces de usuario del teléfono de 100 pesos

Utilizando el proyector de acetatos, los participantes presentarán sus
interfaces y las explicarán al resto del taller.

34
UNSIJ 2017
Presentación de resultados - 10 minutos
35
UNSIJ 2017
6. Evaluación - de dos a tres días
Evaluar las interfaces de usuario del teléfono de 100 pesos con los
usuarios, observando su interacción y haciendo modificaciones al
prototipo desarrollado con el objetivo de que tengamos un diseño más
cercano a las necesidades y gustos de los usuarios.

36
UNSIJ 2017
Evaluación con usuarios - otro taller ;)
37
UNSIJ 2017
Conclusiones
38
UNSIJ 2017
Conclusiones
El mal diseño de interfaces están en todos lados, complicando y entorpeciendo el
trabajo de todo tipo de usuarios.

La usabilidad es el grado en el cuál una interface de usuario puede ser usada por
un usuario específico para una tarea específica dentro de un contexto de uso
específico.

El Diseño Centrado al Usuario (UCD) nos permite desarrollar aplicaciones que sean
eficaces, eficientes y que tengan una alta satisfacción para el usuario.

A través de la definición de usuarios, tareas y contexto, se pueden desarrollar
interfaces con usabilidad ;)
39
UNSIJ 2017
Taller de Interfaces Humano-Computadora:
Una aproximación al desarrollo de interfaces centradas al usuario
Mario Alberto Moreno Rocha
Carlos Alberto Martínez Sandoval
Juan Carlos Villalvazo Rodríguez
UsaLab Laboratorio de Usabilidad
www.usalab.com.mx

Taller de Desarrollo de Interfaces (UNSIJ 2017)

  • 1.
    Taller de Desarrollode Interfaces: Una aproximación al desarrollo de interfaces centradas al usuario Mario Alberto Moreno Rocha Carlos Alberto Martínez Sandoval Fernando Macías Ruvalcaba UsaLab Laboratorio de Usabilidad Universidad Tecnológica de la Mixteca
  • 2.
    Objetivo del taller:mostrar un panorama acerca de la Interacción Humano-Computadora y la aplicación de la usabilidad en un desarrollo de interfaces de usuario que pueda ser útil para los asistentes del taller en sus respectivas actividades. 2 CONALEP 2016
  • 3.
    Estructura del Taller PrimeraParte: conocimiento teórico Revisaremos la teoría básica de la Interacción Humano-Computadora y los beneficios de un desarrollo de interfaces gráficas centradas al usuario. Conoceremos las ventajas de la usabilidad y la manera de obtenerla. 30 minutos Segunda Parte: ejercicio práctico Realizaremos un ejercicio en el que pondremos en práctica actividades que aprendimos durante la primera parte del taller. Diseñaremos en conjunto una solución centrada al usuario utilizando técnicas útiles para todos. Dos hora y media 3 CONALEP 2016
  • 4.
  • 5.
    Quiénes somos? Universidad Tecnológicade la Mixteca (perteneciente al SUNEO) La nuestra es una universidad de tecnología, buscando el desarrollo a través de la excelencia académica, la investigación científica y la promoción al desarrollo social. La Interacción Humano-Computadora es uno de los aspectos claves para alcanzar nuestros objetivos. www.utm.mx 5 CONALEP 2016
  • 6.
    Quiénes somos? UsaLab Laboratoriode Usabilidad Fundado en el año 2001, es el primer y único laboratorio de su tipo ofreciendo servicios de estudios de usabilidad a la industria, desde la universidad Clientes importantes Concursos académicos Investigación y enseñanza www.usalab.com.mx 6 CONALEP 2016
  • 7.
    Quiénes somos? UsaLab Laboratoriode Usabilidad Fundado en el año 2001, es el primer y único laboratorio de su tipo ofreciendo servicios de estudios de usabilidad a la industria, desde la universidad Clientes importantes Concursos académicos Investigación y enseñanza www.usalab.com.mx 7 CONALEP 2016
  • 8.
    Quiénes somos? UsaLab Laboratoriode Usabilidad Fundado en el año 2001, es el primer y único laboratorio de su tipo ofreciendo servicios de estudios de usabilidad a la industria, desde la universidad Clientes importantes Concursos académicos Investigación y enseñanza www.usalab.com.mx 8 CONALEP 2016
  • 9.
    No les hapasado? 9
  • 10.
    No les hapasado? 10 CONALEP 2016
  • 11.
    No les hapasado? 11 CONALEP 2016
  • 12.
    No les hapasado? 12 CONALEP 2016
  • 13.
    No les hapasado? 13 CONALEP 2016
  • 14.
    No les hapasado? 14
  • 15.
    ISO 9241 “Usabilidad esla efectividad, eficiencia y satisfacción con la que un producto permite alcanzar tareas específicas a usuarios específicos en un contexto de uso específico” Usabilidad 15 CONALEP 2016
  • 16.
    Beneficios de lausabilidad Los beneficios de la usabilidad incluyen: • Mejora en la productividad • Reducción en costos de capacitación y soporte • Mejora en ventas y ganancias • Reducción de tiempos y costos de desarrollo • Reducción en costos de mantenimiento • Mejora en la satisfacción de los clientes Fuente: UPA Website 2012 16 CONALEP 2014
  • 17.
    Cómo lograrlo? Norman &Draper ’86 User Centered Design (UCD) 17 CONALEP 2016
  • 18.
    Cómo lograrlo? Análisis deRequerimientos Personas Estudio Contextual Norman & Draper ’86 User Centered Design (UCD) 18 CONALEP 2016
  • 19.
    Cómo lograrlo? Análisis deRequerimientos Personas Estudio Contextual Guías de Diseño de GUI Wireframing Experiencia pasada Norman & Draper ’86 User Centered Design (UCD) 19 CONALEP 2016
  • 20.
    Cómo lograrlo? Análisis deRequerimientos Personas Estudio Contextual Evaluaciones Expertas Mago de Oz Card Sort Focus Group Pruebas de usabilidad Norman & Draper ’86 Guías de Diseño de GUI Wireframing Experiencia pasada User Centered Design (UCD) 20 CONALEP 2016
  • 21.
  • 22.
  • 23.
    Diseño de las interfacesde un teléfono de 100 pesos Definición de ‣Usuarios (Personas) ‣Tareas (Focus Group, Card Sort) ‣Contexto (Estudio Contextual) Diseño de ‣Interfaces de usuario (Experiencia) 23 UNSIJ 2017
  • 24.
    1. Definición delusuario (Persona) - 15 minutos Definir el usuario al que estará dirigido el teléfono de 100 pesos. Puede ser nosotros mismos o considerar las características de otro grupo de población (eg. personas mayores, personas con discapacidad, etc). Para ésto, utilizamos una técnica llamada Personas en que se desarrolla un personaje ficticio que representa típicamente un grupo de usuarios. 24 UNSIJ 2017
  • 25.
    ING. EFRÉN “REDBULL”RIVAS ADMINISTRADOR DE SISTEMAS NADASOFTWARE CARACTERÍSTICAS 27 AÑOS, MASCULINO, SOLTERO ING EN SISTEMAS UNITEC, 2007 ESTÁ EN LÍNEA 20 O MÁS HORAS AL DÍA, CONEXIÓN T1 EN EL TRABAJO, INFINITUM EN SU CASA, RED IUSACEL BAM EN TODOS LADOS PASA LA MAYOR PARTE DEL TIEMPO EN BLOGS DE SU ÁREA, ADEMAS REDES SOCIALES COMO FACEBOOK Y TWITTER; ENVÍA CORREOS TODO EL DÍA Y EN SU BLACKBERRY RECIBE NOTICIAS DE SU SERVICIOS DESARROLLA SUS PROPIAS APLICACIONES PERO NADA MÁS EL LAS PUEDE UTILIZAR PIENSA QUE SU TRABAJO NO ES VALORADO, PERO LE GUSTA DONDE ESTÁ ATRIBUTOS: ORIENTADO A METAS PARA LOGRAR OBJETIVOS PARA LA ORGANIZACIÓN LÍDER DE OPINIÓN Y DE SU EQUIPO DE TRABAJO, LE LLAMAN “GURÚ” OBSESIONADO EN PRESERVAR LA SEGURIDAD DE SU RED Y DE CONTAR CON LAS ÚLTIMAS VERSIONES DE SO LINUX Y DE APLICACIONES GRATUTITAS PARA ADMINISTRACIÓN DE SERVIDORES SÓLO HABLA EN ACRÓNIMOS NO LE INTERESA OTRA COSA FUERA DE SU TRABAJO FRASE: “CUÁL SERÁ LA PRÓXIMA RED SOCIAL QUE SUBSTITUYA A GOOGLE+?” 25
  • 26.
    2. Definición detareas (Focus Group y Card Sort) - 25 minutos Definir las tareas del teléfono de 100 pesos Para el Focus Group, cada uno de nosotros definirá las tres tareas principales que utiliza en su propio teléfono celular Para el Card Sort, cada uno de nosotros definirá en los Post-Its los nombres con los cuales piensen que la opción deberá aparecer en el teléfono 26 UNSIJ 2017
  • 27.
    Focus Group -15 minutos 27
  • 28.
    Card Sort -10 minutos 28 UNSIJ 2017
  • 29.
    3. Definición decontexto (Estudio Contextual) - 15 minutos Definir el contexto (entorno) del teléfono de 100 pesos Observar a los usuarios dentro del contexto de uso, para determinar las características que afectarían al sistema a desarrollar. Se utilizan métodos de observación derivadas de la psicología conductual. 29 UNSIJ 2017
  • 30.
    Cultura como uniceberg (Kohls, 1995) 1. Los usuarios usan y atesoran la tecnología en su vida diaria.
 2. Los usuarios no han visto la tecnología que se pretende utilizar.
 3. Aunque desconocen la tecnología propuesta, no existe un rechazo, sino una aproximación cuidadosa a ella, despertando mucho interés.
 4. Los usuarios prefieren el uso de un teclado virtual a uno físico (esto descarta el uso de dispositivos periféricos físicos).
 5. La utilización de videos para instrucción es factible, además del uso de audífonos 30
  • 31.
    Estudio Contextual -15 minutos 31
  • 32.
    4. Diseño deInterfaces (Wireframing) - 25 minutos Diseñar las interfaces del teléfono de 100 pesos Se utilizan plantillas para el desarrollo de las interfaces de usuario. Estas plantillas se pueden encontrar en internet. Las interfaces se desarrollan por parejas, aportando su conocimiento previo para el desarrollo de prototipos que serán evaluados más tarde. 32 UNSIJ 2017
  • 33.
    Wireframing - 25minutos 33
  • 34.
    5. Presentación deresultados - 10 minutos Presentar las interfaces de usuario del teléfono de 100 pesos Utilizando el proyector de acetatos, los participantes presentarán sus interfaces y las explicarán al resto del taller. 34 UNSIJ 2017
  • 35.
    Presentación de resultados- 10 minutos 35 UNSIJ 2017
  • 36.
    6. Evaluación -de dos a tres días Evaluar las interfaces de usuario del teléfono de 100 pesos con los usuarios, observando su interacción y haciendo modificaciones al prototipo desarrollado con el objetivo de que tengamos un diseño más cercano a las necesidades y gustos de los usuarios. 36 UNSIJ 2017
  • 37.
    Evaluación con usuarios- otro taller ;) 37 UNSIJ 2017
  • 38.
  • 39.
    Conclusiones El mal diseñode interfaces están en todos lados, complicando y entorpeciendo el trabajo de todo tipo de usuarios. La usabilidad es el grado en el cuál una interface de usuario puede ser usada por un usuario específico para una tarea específica dentro de un contexto de uso específico. El Diseño Centrado al Usuario (UCD) nos permite desarrollar aplicaciones que sean eficaces, eficientes y que tengan una alta satisfacción para el usuario. A través de la definición de usuarios, tareas y contexto, se pueden desarrollar interfaces con usabilidad ;) 39 UNSIJ 2017
  • 40.
    Taller de InterfacesHumano-Computadora: Una aproximación al desarrollo de interfaces centradas al usuario Mario Alberto Moreno Rocha Carlos Alberto Martínez Sandoval Juan Carlos Villalvazo Rodríguez UsaLab Laboratorio de Usabilidad www.usalab.com.mx