Diseando interfases

1
Diseñando interfases

• Parte I

2
Diseño centrado en el sistema

• El enfoque es en la tecnología
• Qué puede ser construido fácilmente utilizando
  las herramientas disponibles en esta plataforma
  en particular?
• Qué es importante para mí construir, como
  diseñador?

3
Diseño centrado en los usuarios

• Diseño basado en los usuarios
• Tareas
• Habilidades
• Necesidades
• Contexto
• Mantra Conozca al usuario!

4
Un buen diseño

• Invita a la persona a utilizarlo apropiadamente
• Visual affordance

5
Guías para el diseño

• 1. Provea un buen modelo conceptual
• El usuario tiene un modelo mental de cómo
  funcionan las cosas
• Construya diseños que le permitan al usuario
  predecir los efectos de sus acciones
• 2. Haga las cosas visibles
• Visible affordances, mappings, restricciones
• Recuérdele a la persona las cosas que se pueden
  hacer y cómo hacerlas

6
Por qué es difícil diseñar?

• 1. Aumento en la complejidad/presión
• Número de cosas que se desean controlar ha
  aumentado dramáticamente
• La pantalla es incrementalmente
  simbólica/artificial
• Feedback es más complejo y sutil
• Los errores son incrementalmente serios/costosos

7
Por qué es difícil diseñar?

• 2. Presiones del mercado
• Tiempo es dinero
• Añadir funcionalidad (complejidad) es ahora más
  fácil y barato
• Añadir controles y feedback es caro
• El diseño requiere muchas iteraciones antes de
  ser exitoso

8
Por qué es difícil diseñar?

• 3. Las personas le dan más importancia al costo y
  la apariencia que los factores humanos del diseño
• Estilo en vez de sustancia
• El mal diseño puede que no se aprecie

9
Por qué es difícil diseñar?

• 4. La creatividad es un reto
• No puedes simplemente hacer una copia
• Quieres creatividad, pero quieres pragmatismo

10
Creación de ideas

• Ideas provienen de
• Imaginación
• Analogía
• Observación actual de la práctica
• Observación de sistemas actuales

• Prestado de otros campos
• Animación
• Teatro
• Pantallas de información
• Arquitectura
• ...

Cómo creamos y desarrollamos nuevas ideas y
diseños de interfaces?
11
Metáforas de Interfaces

• Metáfora es la aplicación de un nombre o
  término descriptivo a otro objeto para el cuál no
  aplica literalmente
• Uso Transferencia natural aplicar conocimiento
  existente a tareas nuevas y abstractas
• Problema Puede introducir modelos mentales
  incorrectos

12
Creación de una metáfora

• Prepare
• Qué funciones son necesarias
• Cuáles son los problemas de los usuarios
• Genere
• Use metáforas que pareen las tareas conceptuales
  de los usuarios
• De las opciones, escoja la metáfora que se
  acerque más a la forma en que el sistema
  realmente trabaja

13
Creación de una metáfora

• Evalúe
• Evolucione

14
Métodos para la creación de ideas

• 1. Considere un nuevo uso para el objeto
• 2. Adapte el objeto para que sea algo más
• 3. Modifique el objeto para que tenga un
  propósito nuevo
• 4. Aumente añádale al objeto
• 5. Minimice quítele al objeto
• 6. Sustituya algo similar

15
Métodos para la creación de ideas

• 7. Rearregle los aspectos del objeto
• 8. Cambie el punto de vista
• 9. Combine data como un todo

16
Guías/Principios de Diseño

• Guías generales para ayudar (aconsejar) a crear
  sistemas más utilizables
• Pueden ser sutiles, hasta contradictorias

17
Principios de diseño

• 1. Utilice el diálogo simple y natural del
  lenguaje del usuario
• Paree las tareas del usuario de forma natural
• Evite la jerga, y los términos técnicos
• Presente exactamente la información que necesita
  el usuario

Conección X.25 descartada debido acongestión en
la red. Límites localesestán ahora en efecto.
Fondos insuficientes para retirar 100
VS.
Less is more!
18
Ejemplos
19
Principios de diseño

• 2. Luche por la consistencia
• Secuencias, acciones, comandos, formato,
  terminología
• Hace las cosas más predecibles

Help
Cancel
OK
Apply
Cancel
Done
20
Principios de diseño

• 3. Provea feedback informativo
• Informe al usuario continuamente acerca de lo que
  está ocurriendo
• Más importante en acciones frecuentes y
  significativas
• Cómo lidiar con los atrasos (delays)?

21
Principios de diseño

• 4. Minimice las carga de memoria del usuario
• Reconocer es mejor que recordar
• Describa el formato del input requerido, incluya
  ejemplo y valor por omisión (default)
• Utilice un número pequeño de comandos generales
  aplicables

Date _ _ - _ _ _ - _ _ (DD-Mmm-YY, e.g.,
02-Aug-93)
22
Principios de diseño

• 5. Permita revertir acciones fácilmente
• Undo
• Esto reduce la ansiedad y promueve la
  experimentación

23
Principios de diseño

• 6. Provea salidas claramente marcadas
• No quiera que el usuario se sienta atrapado
• Ejemplos
• Botones de Cancel en las ventanitas
• Interrupt/resume en aquellas operaciones extensas
• Quit que pueda salir en cualquier momento
• Reset/defaults

24
Principios de diseño

• 7. Provea shortcuts
• Permita a los usuarios frecuentes realizar
  operaciones frecuentemente usadas de forma rápida
• Keyboard mouse
• Navegación entre ventanas/formas
• Reuse
• Provea un historial del sistema

- abbreviations - menu shortcuts - function
keys - command completion - double click vs. menu
selection
25
Principios de diseño

• 8. Apoyo al sentido interno de control
• Pon el usuario a cargo, no a la computadora
• Puede ser la mayor fuente de ansiedad

Enter next command vs. Ready for next command
26
Principios de diseño

• 9. Maneje los errores de forma positiva y
  suavemente
• 10. Provea ayuda útil y documentación

27
Malos diseños

• www.baddesigns.com
• Otras referencias en HCI
• www.iarchitect.com