Lineamientos de interfaces de usuario

1
Lineamientos de interfaces de usuario

• Gabriel González
• datahard.zero_at_gmail.com

2
Principios
3
Reglas de ORO

• Dar el control al usuario
• Reducir la carga de memoria del usuario
• Construir una interfaz consecuente

Del autor Theo Mantel
4
ACLARACION PREVIA En algunas circunstancias
encontraremos que no podemos diseñar acorde con
todos los principios que analizaremos al mismo
tiempo.
5
Hacer que el usuario final pruebe la interfase es
una forma excelente para detectar algún conflicto
que tengamos con la interfase.
6
Metamorfosis (Analogía)
Relaciona el conocimiento del usuario del mundo
usando metamorfosis para relacionar conceptos y
características de las aplicación. Usar la
metamorfosis para representar un concepto en
concreto relacionándolo con las ideas que la
gente conoce, es una forma muy útil para que los
usuarios se familiaricen con el programa.
7
Manipulación directa
La manipulación directa permite a las personas
sentir que están controlando directamente los
objetos que representa la computadora. Acorde
con este principio, un objeto en la pantalla
deberá permanecer visible mientras el usuario
lleva acabo una acción, y el impacto de esta
acción deberá ser visible inmediatamente.
8
Drag and drop
9
Ver y apuntar
Los usuarios interactúan con la interfase
apuntando en la pantalla los objetos con un
dispositivo, típicamente el ratón.. Los usuarios
esperan ver lo que están haciendo en la pantalla
todo el tiempo y pueden apuntar lo que
ven. Básicamente el paradigma esta basado en
general en las acciones del usuario sujeto -
luego - verbo.
10
Ejemplo
11
Consistencia
La consistencia en las interfase permite a los
usuarios transferir sus conocimientos y
habilidades de una aplicación a otra. Usar
elementos estándar de la interfase que se este
implementando (aplicación desktop/web) asegurando
la consistencia dentro de tu aplicación, con la
del sistema.
12
Preguntarse

• Es el producto consistente
• Con el mismo producto?
• Con versiones anteriores de tu producto?
• Con los componentes estándar Web o desktop?
• Con el uso de técnicas de metamorfosis?
• Con las expectativas del cliente?

13
Lo que vez es lo que obtienes
Los usuarios deben poder encontrar todas las
características de la aplicación. Ocultar
características con comandos abstractos no es una
buena características para una aplicación. Un
ejemplo, los menús presentan listas de comandos,
así que el usuario puede ver las opciones en vez
de tener que recordar nombres de comandos.
14
Control de usuario
Permitir al usuario, no a la computadora, iniciar
y controlar las acciones. Evitar ofrecer al
usuario opciones detalladas para realizar algún
proceso, evitando el control del usuario y dejar
que la computadora tome el control del proceso es
erróneo.
15
Retroalimentación y diálogos
Mantén al usuario informado de que esta pasando
con tu producto. Provee de retroalimentación
cuando realice tareas clave. Cuando el usuario
inicialice una acción, provee algún indicador
visual o sonoro, o ambos, para indicar al usuario
que el sistema recibió la indicación del usuario.
16
Retroceder
Se debe considerar realizar el sistema
construyéndolo con la capacidad de retroceder en
las acciones, así podremos hacer que el usuario
no tenga miedo de realizar acciones, debido a que
estas se pueden deshacer sin ningún
problema. Esto es permitir el comando deshacer,
así los usuarios se sentirán cómodos en el
sistema.
17
Percepción de estabilidad
Proveer al usuario de estabilidad conceptual, es
proveer una interfase limpia, una serie de
acciones finitas para cada objeto u opción. Por
ejemplo, cuando el menú o comando no aplica a un
objeto seleccionado, este se muestrea
deshabilitado nunca debe desaparecer.
18
Estética integrada
Estética integrada significa que la información
esta bien organizada y consistente con los
principios de diseño visual. El producto o
sistema debe verse presentable en la pantalla aun
cuando se muestre durante mucho tiempo. Mantén
los gráficos simples. No sobrecargues al usuario
con iconos o coloques muchos botones en ventanas
o diálogos. No uses símbolos arbitrarios para
representar conceptos.
19
Forma modal/Modales
Lo mas que sea posible, permite al usuario que
haga lo que requiere. Evitar usar modo modal para
bloquear las operaciones del usuario no permite
al usuario trabajar en otra cosa hasta que la
operación sea completada. Permite una forma Modal
si la situación se relaciona con la vida real,
por ejemplo cambiar de herramienta en un sistema
de manipulación de gráficos, ya que en la vida
real las herramientas se van tomando una a la
vez, y hasta terminar el trabajo con una se
cambia a otra.
20
Ventana de tipo modal
21
Conoce la audiencia a quien va dirigido.
Identifica y entiende la audiencia a quien va
destinado, esto se hace en los primeros pasos del
diseño del producto, en la etapa de análisis de
requerimientos. La mejor forma de estar seguro
que el producto cubre las necesidades del cliente
es exponer el diseño para ser criticado. Se puede
hacer en cada fase del proceso de diseño, esto
revelara que funciona y que no del diseño.
22
Compatibilidad mundial

• Valores Culturales
• Diferencias de lenguaje
• Desplegado de Texto y Edición de texto
• Alineación de los elementos en la interfase
• Recursos
• Accesibilidad Universal
• Discapacidades Visuales
• Discapacidades de Escucha
• Discapacidades Físicas

23
Elaboración de story board (flujo de pantallas)
24
Story board
25
Esquema a llenar para story board de sistema
26
Menús
27
Menús
Los menús presentan una lista de ítems
comandos, atributos o estados de los cuales el
usuario puede seleccionar.
28
Elementos del menú
Titulo del menú
Item del menú
Separador
Caracteres de elipses
29
Títulos del menú
Deberán ser una palabra, que represente
apropiadamente el ítem en el menú.
30
Agrupar ítems en el menú
El agrupamiento lógico de los ítems del menú es
un aspecto importante del menú, ya que hace mas
fácil y rápido encontrar comandos para tareas
relacionadas.
31
Menú con Scrolling
Un menú con scrolling contiene mas ítems de los
que pueden ser visualizados en la pantalla. Las
aplicaciones en lo posible no deberían tener
menús con scrolling, solo deben existir cuando el
usuario agrego muchos mas ítems al menú si lo
personalizo, como el menú de fuentes. Aun así,
debería aparecer al final del menú un carácter
indicador que el menú contiene mas opciones y el
usuario podrá desplazarse (scrolling) por el menú
hacia arriba o abajo.
32
Cambio de mensajes en el menú
Un menú cambia la opción del mensaje en dos
estados, cada vez que el usuario seleccione esa
opción.
33
Mensaje ambiguo
34
Menús jerárquicos
Puedes usar menús jerárquicos para ofrecer
opciones del menú adicional sin tomar mas espacio
de la barra del menú. Debido a que los submenús
agregan complejidad a la internase y son
físicamente mas difíciles de usar, solo se usaran
mas menús cuando los elementos que contendrán
estén muy relacionados. Solo usa un nivel para
los submenús.
35
Continuación
Los submenus se implementan mejor cuando
contienen atributos, en vez de acciones.
36
correcto
37
El menú ayuda
Las aplicaciones siempre deben contener menú de
ayuda, este menú debe de se estar siempre a la
derecha de todos los menús. Así el usuario
siempre lo encontrara, y siempre podrá acceder a
la misma ayuda presionando la tecla F1.
Modo incorrecto
38
Correcto
39
Ventanas
40
Ventanas (Windows)
Las ventanas proveen la forma de que el usuario
interactué con sus datos. Existen varios tipos de
ventanas, cada uno con su propia funcionalidad y
apariencia.
41
Ventanas de navegadores
Diseño de una pagina WEB Se puede implementar un
sistema en web pero se deben tener en cuenta
ciertos puntos La aplicación es factible que se
pueda ejecutar dentro de un navegador. Existan
los componentes necesarios para implementar bajo
estándares el sistema.
42
Moviendo ventanas

• El movimiento de ventanas básicamente es heredado
  por el sistema o plataforma en la cual se este
  implementando el sistema, mantenerte conciente de
  esto, te mantendrá con la realidad de realizar el
  sistema basado en las limitantes de la
  plataforma, en general evita
• Diseñar una interfaz compleja.
• Cargar la interfaz con componentes dependientes
  del sistema o lenguaje.
• No uses componentes no estándares que serán
  difícil de desplegar, esto por ejemplo en
  sistemas Web.

43
Scrolling Automático

• La mayoría del tiempo el usuario debe tener el
  control del scroll, solo debería actuar
  automáticamente
• Cuando la aplicación lleva acabo una operación
  que resulte en colocarnos en otra sección de la
  pantalla.
• Cuando el usuario introduce datos y no alcanzan a
  ser desplegados en la misma.

Para la navegación en web, evitar colocar
información que este fuera de pantalla y se tenga
que usar el scroll del navegador.
44
Diálogos
45
Tipos de diálogos
Modeless Permite al usuarios cambiar las
configuraciones en un dialogo y puede seguir
interactuando con los demás componentes del
programa. Documento modal Previene que el
usuario haga algo mas dentro de un área en
particular. Aplicación modal Previene que el
usuario haga cualquier otra cosa dentro de la
aplicación. Aunque puede cambiar entre
aplicaciones.
46
Modeless (Aplicación modal)
47
Modeless (Documento modal)
48
Documento modal
49
Aplicación modal
50
Mensajes de alerta
Titulo
Botón cerrar
Mensaje de texto
Texto informativo (Si lo requiere)
Botones de acciones
51
Comportamiento de diálogos
Deberá comenzar mostrando información con valores
por default. Aceptar entradas por parte del
usuario. Permitan cambiar de tamaño. NOTA
Evite ofrecer una única opción al usuario, por
ejemplo que solo se pueda cancelar o aceptar un
proceso.
52
Aceptando cambios en los diálogos o cajas de texto

• Deberá tomar efecto inmediatamente y tendrá que
  validarse cuando
• Cuando el usuario introduzca datos
• Cuando el usuario se mueva fuera del campo de
  inserción de datos ( cuando presiona tab)
• Cuando el usuario da clic para aplicar los
  cambios.

53
Controles
54
Especificaciones Button
14 píxeles
14
24
12
55
Botones para interfase de WEB
Botón UP
Botón Down
14 píxeles
14
56
Radio Buttons y Checkboxes(espaciado)
8
8
Activar
Activar
8
8
57
Combo box
Si tienes en algún panel mas de 5 radiobuttons se
considera mejor utilizar un combo box. Se usaran
para menús que presenten mas de 12 opciones o mas
las cuales el usuario no necesita verlas todas al
mismo tiempo.
58
Con mas opciones, se desplegara automáticamente
un sroll.
59
Text Label
Estos componentes presentan generalmente ciertas
deficiencias comunes. Una de ellas es la mala
alineación de los mismos
60
Alineación correcta
61
Tab index y Tab Order
Mantenga y conserve un orden entre los
componentes, generalmente esperamos que el
usuario utilice el ratón para posicionarse donde
desea, pero puede utilizar la tecla tab, la cual
le permite ir saltando de componente en
componente.
62
1
2
3
4
17
5
6
63
Tamaño de un text
Deberán establecerse espacios para lograr colocar
la cantidad de datos.
64
Si son demasiados campos, mas de 15, conviene
establecer una clasificación para generar Tab
control con cada clasificacion.
65
Panel
El panel es otra buena opción para jerarquizar
elementos de un mismo tema y clasificar
información.
66
Introduciendo Password
Los campos claves son delicados, así que
dependiendo el nivel de seguridad que se desee
tener, tanto el nombre de usuario como la
contraseña podrán aparecer como puntos o
asteriscos.
67
Iconos
La tendencia actual es a implementar iconos mas
realistas. Windows a diferencia de otros
sistemas no ha sufrido grandes cambios en los
iconos.
68
Familias y géneros de Iconos
El nuevo concepto que se visualiza en Windows
vista, es el uso de géneros, lo cual mejora al
interpretar que es lo que hace alguna opción o
programa antes de abrirlo. Tip Intenta crear
iconos personalizados para tu aplicación que
comunique una idea clara de que aplicación tiene
el software.
69
(No Transcript)
70
Correcto
Icono de aplicación iTunes
Icono de configuración de iTunes
71
Icono asociado de manera incorrecta.
72
Incorrecto
Correcto
73
Iconos para hardware y otros dispositivos
74
Para diseñar iconos de aplicaciones, imagina que
estas sentado enfrente del escritorio, el icono
de la aplicación debería verse como en el
escritorio.
75
Tips para diseñar iconos

• Para un acabado lo mas real posible, considera la
  posibilidad de auxiliarte con un diseñador
  grafico profesional
• Las perspectivas y las sombras son muy
  importantes para lograr una apariencia real. Usa
  una sola fuente de luz para la sobra y haz que la
  fuente de luz venga de sobre del icono.

76

• Utiliza un aspecto mas universal de la imagen que
  te represente para que sea mas fácil reconocer
  por las personas.
• Intenta usar un solo objeto que capture todo el
  contexto del icono o represente el control o
  acción del mismo.
• Usa los niveles de color para hacer que el icono
  sea mas real y represente mejor su función,
  generalmente las sobras funcionan mejor que
  hacerlo muy colorido.
• No utilices iconos existentes, ya que pueden
  contar con derechos de autor y mas aun pueden
  confundir al usuario.

77
Navegación y diseño para WEB
Un factor clave para cualquier diseño para
sistema web es soportar una buena navegación y
organización. Siempre provee al usuario de una
indicación clara de donde esta y como puede ir a
otra opción.
78
Predecir las funciones de atrás o adelante es una
buena practica para este tipo de interfases.
Menú de opciones para desplazamiento
79
El tamaño es importante
Establecer el tamaño de la pantalla para comenzar
el diseño. 640X480 provee una cobertura mayor de
usuarios. 800X600 Reduce la cobertura, pero esta
comenzando a cambiar.
80
CONCLUSION

• Mantente lo mas simple posible.
• Evita cargar tu sistema de componentes, esto lo
  hará lento a la hora de ejecutarse y confundirás
  a los usuarios.

81
GRACIAS POR SU ATENCION