Curso - Clase 20- “Interfaz Hombre - Máquina”

Usabilidad: Guidelines iOS Android

UX
(HCI)

https://goo.gl/CnFMGs
METODOLOGÍA UX:
Principales Etapas y Actividades

1 2 3 4 5

Investigación Ideación Prototipado Testing Desarrollo

Objetivos del Negocio BrainStorming Prototipos de baja fidelidad Test de Usabilidad Maquetas
Investigación de usuarios Partituras de interacción Mapa del Sitio (siteMap) Test Accesibilidad Manual de estilos Digital
Requisitos Funcionales Blueprints Wireframes funcionales Test con Usuarios Programación
Requisitos de Contenidos Test de usuarios Integración Sistemas
“Personas” (arquetipos)
Mapas de empatía
Análisis Heurístico
Mapa de Viaje Usuarios
 METODOLOGÍA UX / Usabilidad

ISO 9241-210: "Human centred design for interactive systems"

**La Norma ISO 9241 es la norma enfocada a la calidad en usabilidad y ergonomía tanto de
hardware como de software, fue creada por la ISO y la IEC.**

**Las cuatro actividades clave de diseño centrado en el ser humano ya no son solo
recomendaciones, son 'requisitos'. **

1. Comprender y especificar el contexto de uso (incluidos usuarios, tareas, entornos);

2. Especifique los requisitos del usuario con suficiente detalle para conducir el diseño;
3. Producir soluciones de diseño que cumplan con estos requisitos;
4. Realizar evaluaciones centradas en el usuario de estas soluciones de diseño y modificar el
diseño teniendo en cuenta los resultados.

Curso Interfaz Hombre Máquina

 METODOLOGÍA UX / Usabilidad

4.1.- Herramienta UX: Guidelines de Usabilidad

(materia para certamen)

iOS Android
“Human Interface Guidelines” “Material Design”
https://developer.apple.com/design/human-interface-guidelines/ https://material.io/

Curso Interfaz Hombre Máquina

 METODOLOGÍA UX / Usabilidad

4.1.- iOS: “Human Interface Guidelines” (materia para certamen)

● Interacción con el Usuario ● Puntos vista
○ Arrastrar y soltar ○ Hojas de acción
○ Gestos ○ Mesas
● Diseño visual ○ Vistas web
○ Marca ● Controles
○ Terminología ○ Botones
● Iconos e imágenes ○ Etiquetas
○ Iconos personalizados ○ Control de páginas
○ Pantalla de inicio ○ Recolectores (pickers)
○ Controles Segmentados
● Barras
○ Interruptores
○ Barra de navegación
○ Barra de búsqueda
○ Barra de estado
○ Barra de pestañas
○ Barra de herramientas

Curso Interfaz Hombre Máquina

 METODOLOGÍA UX / Usabilidad

4.1.- Android: “Material Design” (materia para certamen)

BASE COMPONENTES:
● Navegación ● Barras:
○ Entendiendo la navegación ○ Barra top
○ Transiciones de navegación ○ Barra navegación inferior
○ Buscar ● Botón de Acción flotante
● Iconografía ● Botones
○ Íconos del sistema ● Cards
● Interacción ● Chips
○ Gestos
● Diálogos
○ Selección
○ Estados ● Cajón de navegación
● Snakbars
● Pestañas

Curso Interfaz Hombre Máquina

 METODOLOGÍA UX / Usabilidad

Convenciones

Las convenciones de diseño pueden diferir de una plataforma a otra. Estas

diferencias en la convención pueden afectar la capacidad del usuario para
comprender la interfaz de usuario o completar ciertas tareas.

En estos casos, se recomienda adaptarse a las convenciones específicas de

la plataforma

Curso Interfaz Hombre Máquina

 METODOLOGÍA UX / Usabilidad

Convenciones: Barras de herramientas

Curso Interfaz Hombre Máquina

 METODOLOGÍA UX / Usabilidad

Convenciones: Barras de herramientas

Curso Interfaz Hombre Máquina

 METODOLOGÍA UX / Usabilidad

Convenciones: Iconografía

Curso Interfaz Hombre Máquina

 METODOLOGÍA UX / Usabilidad

Convenciones: Iconografía

Curso Interfaz Hombre Máquina

 METODOLOGÍA UX / Usabilidad

Convenciones: Controles

Curso Interfaz Hombre Máquina

 METODOLOGÍA UX / Usabilidad

Convenciones: Calendarios

iOS Android
Curso Interfaz Hombre Máquina
 METODOLOGÍA UX / Usabilidad

Convenciones: Botones flotantes

iOS Android
Curso Interfaz Hombre Máquina
 METODOLOGÍA UX / Usabilidad

Convenciones: Hojas de acción

iOS

Android

Curso Interfaz Hombre Máquina

 METODOLOGÍA UX / Usabilidad

Convenciones: Tipografía

Curso Interfaz Hombre Máquina

 METODOLOGÍA UX / Usabilidad

Convenciones: caso Gmail

iOS Android
Curso Interfaz Hombre Máquina
 METODOLOGÍA UX / Usabilidad

Convenciones: caso Instagram

iOS Android
Curso Interfaz Hombre Máquina
 la frase UX:

Si las instrucciones requieren

instrucciones...