Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 1
Recomendaciones
Diseño de Interfaces
de Usuarios
Ciclo 2012-1
Profesor:
Diaz Muñante Jorge
“descripción del material” muy pequeño
no hay una información que muestre al usuario como va la carga de su archivo adjunto( retroalimentación)
no hay un link directo para envíos al profesor ya que uno debe estar buscando en toda la lista que posee solo 3 filas para demasiados alumnos
Modelos Mentales Mapeo arbitrario
¿cuál llave le
pertenece a c/u
de las hornillas?
Mapeo parcial
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 2
Mapeo natural
Mapeo
Mapeo
IU Hall de la fama o de la verguenza?
Menu View de Visual Forms
02 opciones:
• Non-visual Objects (e.j, formateo de etiquetas)
• Source...
IU Hall de la verguenza
Terminologia
Que es “Non-Visual Objects” y como podemos verlos entonces?
Seleccionar un nombre mas representativo
Principios fundamentales del diseño
Representan conceptos de alto nivel que deberían
ser empleados como referencia o guía de diseño.
Uno de los clásicos: reglas de oro de Mandel.
Agrupa los principios en función de tres objetivos:
Colocar a los usuarios en el control de la interfaz.
Reducir la carga de memoria de los usuarios.
Hacer una interfaz de usuario consistente.
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 3
Reglas de oro de Mandel: colocar a los usuarios en el control de la interfaz
Los principios que se deben seguir para conseguir el objetivo son:
Emplear los modos adecuadamente.
Permitir a los usuarios utilizar el teclado y el ratón.
Permitir a los usuarios cambiar la atención.
Mostrar a los usuarios mensajes y textos descriptivos.
Proporcionar retroalimentación.
Proporcionar acciones inmediatas y reversibles.
Proporcionar caminos significativos y salidas.
Acomodar a los usuarios con diferentes niveles de habilidad.
Hacer la interfaz de usuario transparente.
Permitir al usuario personalizar la interfaz.
Permitir al usuario manipular los objetos de la interfaz.
Permitir utilizar el teclado y el raton
Aunque es posible optimizar la interfaz para usuarios de ratón, es importante proporcionar una forma alternativa de
interacción.
Esto dotará a la interfaz de las siguientes ventajas:
Facilidad para los usuarios que provengan de otros
entornos.
Facilidades a los usuarios con necesidades especiales.
Continuidad ante fallos o inexistencia del ratón.
Este principio no aparece en diversas guías de estilo.
Permitir cambiar la atencion
Los usuarios deben poder interrumpir sus acciones actuales y continuarlas más tarde.
Una vez lanzada una tarea larga y no crítica el usuario
debería poder volver a tomar el control de la interfaz.
La tarea deberá reclamar la atención una vez termine.
Cuando sea una tarea en varios pasos no hay que obligar al
usuario a completar todos los pasos.
Dar la sensación de que el usuario lleva el control.
Mostrar a los usuarios mensajes y textos claros
Mensajes claros, útiles descriptivos y fáciles de
entender en diálogos, etiquetas y documentación.
Evitar el lenguaje excesivamente técnico.
Hable en el lenguaje del usuario
Numeración comenzando desde 0 (Netscape Communicator)
Colores representados en hexadecimal (y no el color mismo)
Hable en el lenguaje del usuario
No confundir al usuario
Que significa “Continue”?
“continuar usando XFM” o “Continuar para salir”?
En que difieren “Cancel” y “Abort”?
XFM, "X-windows File Manager"
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 4
Proporcionar retroalimentación
Es necesario informar de los procesos en curso.
Mediante mensajes en cuadros de diálogo.
Mediante mensajes en barras de estado.
Barras de progreso.
Adecuado cuando:
Se están realizando operaciones largas.
Se va a realizar un proceso irreversible.
Se debe proporcionar información clara e
identificativa.
Proporcionar acciones inmediatas y reversibles
Es deseable que todas las operaciones realizadas
con los datos sean reversibles.
Otorga confianza al usuario.
Le anima a investigar sin miedo.
Opciones de “deshacer” y “rehacer”.
Principio del esfuerzo proporcionado.
Cuando un proceso es difícil de recuperar, también debe
ser más difícil de realizar.
Proporcionar caminos significativos y salidas
Permitir la navegación fácil a través de la interfaz.
Proporcionar un contexto que indique:
• Dónde están.
• Dónde han estado.
• Dónde pueden ir.
• Cómo abandonar.
En páginas web:
Mapas del sitio.
Indicadores en las cabeceras de páginas.
En aplicaciones de escritorio:
Barras de tareas, barras de herramientas.
Títulos de las ventanas.
Proporcionar caminos significativos y salidas
Usuarios con diferentes niveles de habilidad
No sacrificar a los usuarios expertos por una
interfaz más fácil para usuarios ocasionales.
Es necesario proporcionar caminos rápidos para
los usuarios expertos.
Atajos de teclado.
Lo ideal:
Interfaces personalizables que permitan a los usuarios
elegir las opciones disponibles de la interfaz según su
nivel de experiencia en la aplicación.
Hacer una interfaz transparente
Una interfaz transparente permite al usuario
sentirse como si estuviera manipulando los objetos
reales con los que trabaja habitualmente.
Buen ejemplo de transparencia:
Papelera de reciclaje.
Mal ejemplo de transparencia:
CTRL+ALT+SUPR para el administrador de tareas.
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 5
Permitir al usuario personalizar la interfaz
Los usuarios se encuentran más confortables cuando pueden configurar las características del sistema.
Configurar la presentación (colores, fuentes, aspectos
internacionales).
Configurar el comportamiento (acciones por omisión,
botones de la barra de herramientas, etc.).
Configurar la interacción (teclas de método abreviado, mnemotécnicos, etc.).
Es interesante incluir también una opción que permita
restablecer los valores por omisión.
Permitir manipular los objetos
Fomentar que el usuario manipule directamente los objetos de la pantalla además de usar métodos indirectos por medio
de teclado y ratón.
Algunas veces las interfaces de manipulación directa fallan
porque las acciones a realizar con los objetos no son
visualmente obvias.
No queda claro qué cosas se pueden hacer al arrastrar y soltar objetos por la pantalla.
Es necesario hacer más obvias las manipulaciones.
Reglas de oro de Mandel: reducir la carga de memoria
La reducción de la carga de la memoria facilitará el aprendizaje.
Permitirá al usuario recordar, más que aprender, el funcionamiento de la interfaz.
Algunos principios para lograr este objetivo:
Aliviar la memoria a corto plazo.
Confiar en el reconocimiento.
Proporcionar pistas visuales.
Proporcionar opciones por omisión.
Proporcionar atajos de teclado.
Promover la sintaxis objeto-acción.
Emplear metáforas del mundo real.
Emplear la revelación progresiva.
Promover la claridad visual.
Aliviar la memoria a corto plazo
El usuario realiza en el ordenador varias acciones al mismo tiempo y el estado de cada una de ellas se guarda en la memoria a corto plazo.
Es necesario incluir en la interfaz mecanismos que permitan no tener que cargar información en dicha área de memoria.
Para este objetivo se puede recurrir a:
Incluir acciones de “deshacer” y “hacer”.
• Además de dar seguridad al usuario, permiten retornar es estados anteriores sin necesidad de recordar cómo se llegó a ellos.
Utilizar las opciones de cortar, copiar y pegar.
• Además de utilizarse como herramientas de edición, permiten almacenar en la memoria del computador información que se utilizará más tarde.
Confiar en el reconocimiento
Permitir recuperar información de la memoria a
largo plazo mostrando los elementos que debe
reconocer.
Es más fácil seleccionar elementos que recordarlos.
Proporcionar pistas visuales
El usuario debe saber donde está, qué está
haciendo y qué es lo que puede hacer.
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 6
Proporcionar pistas visuales
Proporcionar opciones por omision
Es conveniente que el usuario pueda restaurar la interfaz a su estado original.
Es frustrante llegar a un punto de personalización del que es difícil salir.
El restablecimiento de opciones por omisión permite restaurar de modo rápido la configuración original.
Proporcionar atajos de teclado
Los atajos de teclado economizan el número de
pulsaciones o movimientos de ratón utilizados.
Dos formas:
Mnemotécnicos (teclas de acceso rápido).
Promover la sintaxis objeto-acción
No es necesario diseñar una interfaz totalmente orientada a objetos
para seguir este principio.
Menús contextuales.
Este tipo de sintaxis evitar tener que recordar todas las opciones
posibles en cada momento sobre un objeto.
Emplear metaforas del mundo real
Una vez elegida una metáfora es necesario
mantenerla.
Es posible ampliarla, pero no cambiarla.
Emplear la revelacion progresiva
No abrumar al usuario con las funciones de un
producto.
Mostrar sólo lo que el usuario necesita cuando y
dónde lo necesita.
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 7
Promover la claridad visual
Aplicar principios de diseño visual de la percepción humana.
Agrupación.
Numeración de elemento.
Establecer prioridades en la importancia de los elementos mostrados.
No disponer demasiados elementos en la pantalla.
Distribuir bien los elementos.
Agrupar elementos
Nombre
Direc 1
Direc 2
Ciudad
Estado
Telef.
Fax
Nombre
Direc 1
Direc 2
Ciudad
Estado
Telef.
Fax
Nombre
Direc 1
Direc 2
Ciudad
Estado
Telef.
Fax
Malo Bueno Bueno
Reglas de oro de Mandel: interfaz de usuario consistente
Una interfaz bien diseñada permitirá a los usuarios transferir su conocimiento en el aprendizaje de un nuevo programa.
Pero…
Debe ser consistente con otros programas que haya
utilizado.
Dentro de un programa será más fácil su aprendizaje si
existe cierto parecido entre las distintas partes de las que esté formado.
Algunos principios que fomentan la consistencia:
Preservar el contexto de trabajo de los usuarios.
Mantener la consistencia dentro y entre productos.
Diseño Grafico
Objetivos del diseño gráfico:
Mostrar la información de forma atractiva y legible.
La interfaz debe aportar relaciones y significado a cada elemento.
No debe diseñarse siguiendo criterios de vistosidad o gustos personales.
• La interfaz debe diseñarse pensando que serán otros los que la utilicen.
Elementos fundamentales:
Organización perceptual de los objetos.
Tipografía y texto utilizado.
Color.
Imágenes.
Organización perceptual de los objetos
¿Cómo distribuir los objetos de una interfaz?
Acudir a los principios psicológicos de la percepción de escenas.
Leyes de agrupación.
Indican cómo varios elementos se perciben conjuntamente.
Proximidad.
Dos objetos que están juntos y alejados del resto se perciben conjuntamente.
Similitud.
Dos objetos que comparten alguna característica perceptual tienden a ser percibidos conjuntamente.
Organización perceptual de los objetos
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 8
Organización perceptual
Además la organización perceptual debe estar
supeditada a la forma en la que el usuario lleve a
cabo la tarea sobre la misma.
Organización perceptual
Texto
Es necesario cuidar:
El lenguaje utilizado.
La legibilidad del texto.
• En ella interviene:
– Tipo de fuente tipográfica.
– Tamaño de la fuente (cuerpo).
– Color de la fuente.
Fuente tipografica y cuerpo
El número de fuentes no debería pasar de tres o cuatro.
La inclusión de un nuevo tipo de fuente debe estar justificada.
• Titulares, resaltar alguna característica de la interfaz.
Es necesario seleccionar una fuente como principal (para el texto común) y mantenerla a lo largo de la interfaz.
En la elección de la fuente principal primará la legibilidad y el público a quien está dirigida la aplicación.
Evitar los estilos de fuente (negrita, cursiva) a no ser que se desee algún efecto concreto.
Descartar el subrayado para destacar algo (está muy asociado a los enlaces).
• En su lugar utilizar la negrita u otro color.
Evitar los tipos de letra en relieve.
Fuente tipograficas y cuerpo
En aplicaciones Windows (especificaciones de la guía de estilo The Windows User Experience.
Para Windows 98, NT 4.0.
• Fuente predeterminada Ms SansSerif de 8 puntos.
Para Windows 2000.
• Tahoma de 8 puntos. Es la que utiliza la mayor parte de los elementos de la interfaz.
– Proporciona mayor legibilidad y capacidades de internacionalización.
En Windows XP:
• para titulares con un tamaño mayor de 14 puntos.
• Tahoma de 8, 9 u 11 puntos como fuente del sistema.
• Verdana de 8, puntos en negrita para barras de títulos de paletas flotantes.
• Trebuchet MS de 10 puntos en negrita para los títulos de las ventanas.
Fuente tipografica y cuerpo
Tipografía en Windows XP.
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 9
Color de la fuente
También determina la legibilidad de la información.
Se debe utilizar un buen contraste entre el color de fondo y el de primer plano.
Contraste no demasiado elevado y de colores complementarios: negro sobre gris, blanco sobre azul.
No utilizar colores opuestos: rojo sobre verde, azul sobre amarillo.
El contraste elevado puede servir para destacar la información, pero no para el texto principal.
Colores de los enlaces.
Diferenciar los enlaces no usados, los enlaces activos, los enlaces visitados
Estilos de escrituras
Uso de mayúsculas.
Las letras mayúsculas tienen peor legibilidad de que las minúsculas.
Evitarlas sobre todo en tipografías decorativas.
Utilizar las normas de capitalización habituales.
• Si “Actualizar controlador de impresión” o “Actualizar controlador
Postcript”.
• No “Actualizar Controlador de Impresión” o “Actualizar
ControladorPoscript”.
Estilos de escritura
Signos de puntuación:
Utilizar puntuación normal en textos largos introductorios.
Las opciones de menú, elementos de listas, casillas de verificación no llevan puntuación final.
Los titulares (títulos de ventanas, paneles), no llevan
puntuación final.
Los puntos suspensivos se utilizan en opciones de menú
o botones que no conlleven una acción directa.
Color
Componente clave en los elementos que constituyen una interfaz.
Uso efectivo del color
El color ayuda a desarrollar modelos mentales eficientes si se siguen unas pautas
• Simplicidad:
– Vincular significados prácticos e intuitivos a los colores primarios, rojo, verde, amarillo y azul, que son fáciles de aprender y recordar
– Mantener el esquema del color simple, utilizando pocos colores: 5±2
– No sobrecargar el significado del color vinculando más de un concepto a un sólo color
• Consistencia:
– Utilizar colores diferentes para conceptos diferentes
– Evitar cambiar el significado de los colores en diferentes pantallas
• Claridad:
– Utilizar códigos de color en los mensajes
Uso efectivo del color - Reglas de Murch
Descarta el color azul puro para texto, líneas delgadas y figuras pequeñas
Evita colores adyacentes que se diferencien sólo por la cantidad de azul que contienen
Los operadores de edad avanzada necesitan niveles más altos de brillo para distinguir los colores
Los colores cambian de apariencia a medida que el nivel de luz ambiental cambia
La magnitud de un cambio detectable en el color varía a través del espectro
Es difícil enfocar hacia las orillas creadas solamente por el color
Evita utilizar el rojo y el verde en la periferia de presentaciones a gran escala
Los colores opuestos se ven bien juntos
Para los observadores con deficiencias del color (ciegos al color), evita hacer distinciones de un sólo color
Legibilidad
Significado del color
Consistencia
Significado del color
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 10
Sensiblidad del color
from: http://www.cs.gsu.edu/classes/hypgraph/color/coloreff.htm
Realmente amarillo Dialogo
Pregunta si usted
desea borrar •Si (verde)
•no (rojo)
¿IU de la fama o de la verguenza?
Dialogo
pregunta si usted desea
borrar
•si (verde)
•no (rojo)
¿Problemas?
R-G diferencia culturales
•Occidente
•verde es bueno
•rojo es malo
•Este y otros lugares difiere
IU de la fama o de la verguenza?
Colores no adyacentes
Consistencia
Archivo de Personal
Codigo del Empleado 2731
Apellidos Lozano
Nombres Tilsa
Estado Divorciada
Numero de hijos 1
Documento de entidad 7238912
Grado de Instrucción Superior
El color azul siempre para los campos que no pueden ser modificados
Culture Red Blue Green Yellow White
USA Danger Masculinity Safety Cowardice Purity
France Aristocracy Freedom, peace
Criminality Temporary Neutrality
Egypt Death Virtue, faith, truth
Fertility, strength
Happiness, prosperity
Joy
India Life, creativity
Prosperity, fertility
Success Death, purity
Japan Anger, danger Villainy Future, youth, energy
Grace, nobility Death
China Happiness Heavens, clouds
Ming dynasty, heavens
Birth, wealth, power
Death, purity
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 11
Combinación de colores GUI
Background Mejores colores Peores colores
Blanco Negro, Azul Cyan, Amarillo
Negro Amarillo, Blanco Azul
Rojo Negro Azul, Magenta
Verde Negro, Rojo Cyan
Azul Rojo, Blanco, Amarillo Negro
Amarillo Negro, Azul, Rojo Cyan, Blanco
Combinación de colores GUI
Background Mejores colores Peores colores
Blanco Negro, Azul Cyan, Amarillo
Negro Amarillo, Blanco Azul
Rojo Negro Azul, Magenta
Verde Negro, Rojo Cyan
Azul Rojo, Blanco, Amarillo Negro
Amarillo Negro, Azul, Rojo Cyan, Blanco
Background: Blanco, letras: Azul
Combinación de colores GUI
Background Mejores colores Peores colores
Blanco Negro, Azul Cyan, Amarillo
Negro Amarillo, Blanco Azul
Rojo Negro, Amarillo Azul, Magenta
Verde Negro, Rojo Cyan
Azul Rojo, Blanco, Amarillo Negro
Amarillo Negro, Azul, Rojo Cyan, Blanco
Background: amarillo, letras: rojo
Combinación de colores GUI
Background Mejores colores Peores colores
Blanco Negro, Azul Cyan, Amarillo
Negro Amarillo, Blanco Azul
Rojo Negro Azul, Magenta
Verde Negro, Rojo Cyan
Azul Rojo, Blanco, Amarillo Negro
Amarillo Negro, Azul, Rojo Cyan, Blanco
Background: Rojo, letras: Azul
Combinación de colores GUI
Background Mejores colores Peores colores
Blanco Negro, Azul Cyan, Amarillo
Negro Amarillo, Blanco Azul
Rojo Negro Azul, Magenta
Verde Negro, Rojo Cyan
Azul Rojo, Blanco, Amarillo Negro
Amarillo Negro, Azul, Rojo Cyan, Blanco
Background: Azul, letras: negra
Antes y despues
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 12
7 +- 2 Colores
Elementos de la interfaz. Ventanas
Ventana principal y ventana secundaria.
Componentes de la ventana principal.
Control Form de .NET.
Elementos de la interfaz. Ventanas
La barra de título.
Icono de la ventana.
• Representa el objeto visualizado en la ventana.
– Icono de la aplicación o icono del tipo de archivo que maneja.
Texto de la barra de título.
• Identifica el nombre de la aplicación o apartado en el que se está trabajando.
• Para utilidades o herramientas, el título de la aplicación.
• Para aplicaciones que manejen archivos de datos, nombre de la aplicación, un guión y nombre del archivo.
– Se debe proporcionar un nombre por omisión.
• El texto debe utilizar las reglas habituales de capitalización.
Elementos de la interfaz. Menus
La barra de menús.
Incluye un conjunto de entradas: títulos de menús.
Interación.
• Mediante dispositivo apuntador.
• Mediante teclado: tecla ALT y tecla de acceso o teclas de cursor.
Cada título de menú accede a un menú desplegable (menú DropDown).
Controles MainMenu (para los títulos de menú) y MenuItem (para loselementos desplegables) en .NET
Menús desplegables habituales.
Menú Archivo.
Menú Edición.
Menú Ver.
Elementos de la interfaz. Menus
Menús contextuales (control ContextMenu de .NET).
Proporcionan un mecanismo para acceder a las opciones de un objeto.
Facilitan la interacción: evitan movimientos del dispositivo apuntador.
Minimizan el número de elementos de la pantalla.
Sólo deben mostrar las opciones aplicables al objeto.
Opción predeterminada.
Menús en cascada.
Submenú de un elemento de menú.
Los elementos con submenús deben ir seguidos de una flecha.
Añaden complejidad a la interfaz: es necesario limitar el número de niveles.
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 13
Elementos de la interfaz. Menus
Elementos de menú (objeto MenuItem de .NET).
Deben estar presentes en todos los títulos de la barra de menús.
• Los títulos sólo se deben utilizar para abrir menús, nunca para ejecutar acciones o representar opciones.
Títulos de los elementos.
Breves, descriptivos y deben ocupar una sólo línea.
Incluir teclas de acceso para todos los elementos.
• Los títulos deben evitar conflictos (Pegar – Pegado especial, Copiar – Cortar).
Atajos de teclado para las opciones más utilizadas.
• Los menús contextuales no deben utilizar atajos.
Elementos de la interfaz. Menus
Títulos de menús.
Si la acción a realizar necesita más información, se debe seguir de puntos suspensivos.
• Si en “Guardar como…”, no en “Acerca de”.
Organización de los elementos.
Separadores.
Elementos de la interfaz. Menus
Es necesario ofrecer indicaciones visuales de los elementos que se pueden activar.
Pueden no aparecer.
Aparecer como deshabilitados.
Los elementos de menú pueden utilizarse para establecer o cambiar el estado de un elemento.
Opciones independientes o dependientes.
Elementos de la Interfaz. Botones
Inician acciones y muestran o cambian propiedades de los objetos.
Tres tipos de botones.
• Botones de órdenes (control Button).
• Botones de opción o botones de radio (control RadioButton).
• Casillas de verificación (control CheckBox).
Otros controles también presentan botones integrados:
Barras de herramientas, barras de estado, barras de desplazamiento, controles “up-down”…
Botones de ordenes
Permiten la pulsación y llevan a cabo una acción.
La acción se realiza cuando el usuario suelta el botón.
Pueden incluir sólo texto, texto y gráficos o sólo gráficos.
Etiqueta del botón.
Debe describir la acción del botón incluso fuera de contexto.
El texto debe estar centrado, a ser posible incluir una sola palabra y tener una tecla de acceso.
Si requiere información adicional debe acabar en puntos suspensivos.
Si amplía una ventana debe seguirse de los caracteres >>.
El estado de “no disponible” lo dará el aspecto de la etiqueta.
Botones de ordenes
Botones con texto y gráficos.
El texto debe ir abajo y centrado.
Botones con sólo gráficos.
Incluir un ToolTip.
Botones por omisión.
En formularios modales.
Al pulsar INTRO se ejecuta la acción del botón.
Botones de cancelación.
Al pulsar la tecla ESC se ejecuta la acción del botón.
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 14
Botones de ordenes
Realiza los cambios y cierra la ventana. Equivalente “enter”
Aceptar
Cancelar
Cerrar
Aplicar
Ayuda
No realiza ningún cambio, cierra la ventana. Equivalente “esc”
Realiza los cambios, libera la pantalla abierta; A
Ayuda en línea; U
Etiquetas standard para acciones frecuentes
Cierra la pantalla cuando los cambios no pueden realizar; C
Restaurar valores iniciales, libera la pantalla actual; R
Restaurar
Botones de opcion
Representan un estado on/off de una propiedad de un objeto.
Representan una única opción dentro de un grupo de opciones mutuamente excluyentes.
Es necesario agrupar las opciones excluyentes.
Limitar el número de opciones (máximo 7).
Botones de Opcion
Etiquetas de los botones.
Etiquetar todas las opciones y asociarles una tecla de acceso.
La longitud del texto debe ser similar en todas las opciones agrupadas.
• Si ocupa varias líneas, alinear el botón en la parte superior de la etiqueta.
Se puede acompañar de texto explicativo.
• Se utililizará la puntuación habitual.
El botón etiqueta un control, la etiqueta deba acabar en dos puntos.
Botones gráficos (botones de conmutación).
Casillas de verificacion
Representan también un estado on/off.
Las acciones o propiedades representadas no tienen por qué ser excluyentes.
Presenta tres estados:
En blanco, marcada, valor mezclado.
Cuadro de lista
Presentan al usuario un conjunto de opciones para elegir.
Son una alternativa cuando para las listas demasiado grandes de botones de radio o casillas de verificación.
Los elementos deben presentarse de forma que tengan algún tipo de organización lógica.
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 15
Cuadro de lista
Etiquetas y texto de los elementos.
No incluyen etiquetas propias.
• Es necesario incluir etiquetas que informen sobre su cometido y que permitan la interacción por teclado mediante teclas de acceso.
• Permiten también dar indicaciones visuales de cuando el control no está habilitado.
• Utilizar las reglas normales de capitalización y terminarlas por dos puntos (:).
Texto de los elementos de la lista.
• Utilizar las reglas de capitalización sin puntuación final.
• Establecer un ancho suficiente para que quepa el texto en su totalidad.
– Utilizar puntos suspensivos en partes no importantes del texto.
» Utilizar ToolTips para mostrar el contenido completo.
– Utilizar barras de desplazamiento horizontal.
Cuadro de lista de selección unica
Control ListBox de .NET.
Su funcionalidad puede sustituir a un conjunto
grande de botones de opción.
La selección de un elemento quita la de otro
elemento de la lista.
El número de opciones visibles deberá estar entre
tres y ocho.
El doble clic sobre un elemento debería realizar la
acción del botón predeterminado del cuadro de
diálogo.
Cuadro de lista desplegable
Control ComboBox con la propiedad
DropDownStyle a DropDownList.
Tienen la misma funcionalidad pero se presentan
con las opciones plegadas.
Requieren más interacciones por parte del usuario
(necesitan abrir la lista), pero ahorran espacio en la
interfaz.
Cuadro de selección multiple
Control ListBox con la propiedad SelectionMode a MultiSimple o MultiExtended en .NET.
Funcionalidad similar a la de un grupo de casillas de verificación.
Es posible seleccionar varios elementos de la misma lista.
Dos tipos de selección:
Múltiple
Extendida.
Es posible utilizarlos como casillas de verificación (control CheckedListBox de .NET).
Vista de lista
Control ListView de .NET.
Cuadro de lista de selección extendida.
Se debe utilizar cuando sea útil utilizar una representación
mediante iconos o cuando se desee utilizar una
representación en columnas.
Si se utilizan iconos es necesario utilizar menús
contextuales.
Se puede mostrar en cuatro vistas distintas: iconos grandes,
iconos pequeños, lista, detalles.
Se deben ofrecer opciones para cambiar de vista.
Vista de lista
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 16
Vista de Arbol
Control TreeView de .NET.
Ofrece los elementos mediante una estructura jeráquica en forma de esquema.
Presenta botones que comprimen o expanden el esquema.
Pueden incluir iconos asociados con las etiquetas y casillas de verificación.
Si presenta casillas de verificación se podrá realizar una selección múltiple.
Campo de texto
Permiten la presentación, introducción o edición de valores de texto.
Etiquetas.
No incluyen etiquetas.
La inclusión de etiquetas permite:
• Identificar el cometido del campo.
• Identificar los campos desactivados.
Deben utilizar las reglas de capitalización y terminar en dos puntos.
Es necesario añadir una tecla de acceso.
Texto explicativo.
Cuadro de texto
Control TextBox de .NET.
Control rectangular donde el usuario introduce o edita texto.
Se utilizar también para mostrar texto.
Texto de sólo lectura: el texto aparece en otro color.
Campos de una sola línea y multilínea.
Puede incluir barras de desplazamiento horizontal y vertical.
Cuadro de texto enriquecido
Control RichTextBox de .NET.
Añade a los cuadros de texto estándar la posibilidad de dar a partes de texto formatos de fuente, de párrafo, viñetas.
Permite incluir objetos incrustados.
Ofrece también soporte para imprimir, guardar y abrir
archivos RTF o de texto.
Cuadros combinados
Combina un cuadro de texto con un cuadro de lista.
El usuario puede introducir el valor de un elemento o elegir una opción de la lista.
Presentan una acción combinada:
Al elegir un elemento de la lista, el cuadro de texto se carga con dicho valor.
Al teclear un valor en el cuadro de texto, el elemento seleccionado de la lista será el que tenga la concordancia más cercana.
Cuadro combinado desplegable
Control ComboBox de .NET con la propiedad DropDownStyle a
DropDownCombo.
Combina un cuadro de texto con un cuadro de lista desplegable.
La lista aparece inicialmente plegada.
Ahorra espacio en la interfaz.
El texto introducido y la lista están conectados de la misma forma que
los cuadros combinados.
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 17
Cuadros Numericos
Control NumericUpDown de .NET.
Permite introducir valores numéricos e incrementarlos o decrementarlos con botones asociados o las teclas de cursor.
.NET también incluye un control DomainUpDown que permite movernos por una lista de valores que introduce el usuario.
Otros controles
Selector de fecha.
Vista de un mes del calendario (control MonthView).
Vista desplegable (control DateTimePicker).
Cuadros de grupo.
Otros controles
Indicadores de progreso.
Barras de desplazamiento.
Aparecen de forma automática en algunos controles.
Se pueden incluir de forma independiente para dar valores
numéricos.
Los controles HScrollBar y VScrollBar de .NET ofrecen un aspecto
similar a las barras asociadas a los controles.
• Para evitar confusiones es mejor utilizar el control TrackBar.
Otros controles
Barras de desplazamiento.
Control deslizante.
• Se utiliza para establecer valores continuos como el brillo o el volumen.
• No tiene etiquetas:
– Utilizar texto estático con información de su cometido.
– Incluir texto o gráficos para interpretar la escala y el rango.
• Control TrackBar de .NET.
Fichas.
Control TabControl de .NET.
Otros controles
Control de información sobre herramientas.
Control ToolTip de .NET.
Muestra un mensaje de ayuda al pasar el puntero por el
control.
• Mensaje breve, utilizar la reglas de capitalización y, si tiene, mostrar la tecla de método abreviado entre paréntesis.
También puede mostrar información descriptiva sobre los
elementos de la interfaz.
Otros controles
Control WebBrowser.
Muestra el área cliente del Internet Explorer.
Permite incluir en una aplicación Windows:
• Visualización de texto HTML.
• Transferencia de archivos.
• Enlaces a la web.
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 18
Tab o lengüetas
Para categorías discretas de información
Distribucion de la pantalla
No Ok
Mensaje de texto
en Arial 14,
ajustado a la
izquierda
Icono
estandard
No Ok
¿Desea eliminar el
archivo
“miarchivo.doc” de
la carpeta “diu”?
?
Aplicar
Cancelar
El archivo esta
dañado
Mala Distribucion
Buena Distribucion
Agrupar para relacionar elementos
Mala Buena Buena
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Barras de Herramientas
Contenedores que permiten gestionar un conjunto de controles que dan acceso a las tareas más comunes.
Normalmente deberán repetir tareas que se puedan ejecutar mediante teclado (menús).
Aspecto de los botones.
Sólo icono o icono con el texto centrado debajo.
• Iconos pequeños (16x16) o grandes (24x24).
Botones de órdenes, botones de opción o casillas de verificación.
• Estos dos últimos deberán tomar aspecto de botón.
• Si se utilizan para modificar un estado (negrita, justificado) su aspecto deberá mostrar el estado actual del objeto.
Barras de herramientas
Personalización de la barra de herramientas.
Tamaño de los botones.
Disposición de los botones.
Sólo iconos o iconos y texto.
Acompañarlas de ToolTips
Modificar la ubicación y el acoplamiento.
Ventanas secundarias
Obtienen, presentan o modifican información complementaria.
Tamaño más pequeño que el de la ventana principal.
Normalmente asociadas a una ventana principal.
Se cerrarán cuando se cierre la principal.
Se minimizarán cuando se minimice la ventana principal.
Normalmente no cambiarán de tamaño.
No tendrán el botón de Maximizar/Restaurar.
Pueden tener botones predeterminados.
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 19
Ventanas secundarias
Tipos de ventanas secundarias:
Páginas de propiedades.
Ventanas de inspección de propiedades.
• Modifican las propiedades de un objeto. Más limitadas que las anteriores.
Paletas de herramientas.
Cuadros de diálogo comunes.
• Abrir.
• Guardar como.
• Imprimir.
• Configurar impresora.
• Configurar página.
• Color.
• Fuente.
Cuadros de mensajes.
Ventanas secundarias
Cuadro de mensajes
Ventana secundaria que muestra un mensaje sobre una situación concreta y, en algunos casos, permiten la interacción.
En VB. NET muestran mediante la clase MessageBox.
Título de la ventana.
Si la situación se da sobre un archivo o documento, deberá aparecer el nombre del documento.
Si no, utilizar el nombre de la aplicación.
Incluyen un icono identificativo que indica el tipo de mensaje.
Cuadro de mensajes
Mensaje de información.
Sólo presenta información al usuario.
No ofrece opciones al usuario.
Mensaje de advertencia.
La situación requiere una decisión por parte del usuario.
Respuesta a una petición con consecuencias irreversibles.
Puede presentar botones del tipo Si/No, Aceptar/Cancelar, etc.
Mensaje crítico.
Situación crítica que requiere intervención del usuario para continuar.
Menos es mas
“Mantenerlo simple”
Lenguaje conciso
Prohibir información e imágenes extremas
pocas opciones en los menus seleccionados
reduzca el tiempo de planificación (mental)
reduzca el tamaño del manual, etc.
Menos es mas
Figura 1. Internet Explorer 4.0
Figura 2. Internet Explorer 5.0
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 20
Teoría de los cuatros niveles
La persona razona en cuatro niveles
1. Léxico. Es el lenguaje que hablamos.
Ejm. A, B, C, etc. aprendemos que el simbolo A es una
“A”
2. Sintáctico. Combinar para hacer palabras.
Ejm. cAsA, Avion, etc. Combinamos letras como hacer
palabras
Teoría de los cuatros niveles
3. Semántico. Es el significado de las palabras.
Ejm. cAsA, lugar donde viven las personas
4. Conceptual. Es la idea, lo que tengo en mente.
Ejm. Esa cAsA está muy bonita
Teoría de los cuatros niveles
A nivel de interfaces lo podemos ver
4. Conceptual. Es la idea del sistema como un todo
(un editor de texto, un graficador, etc.)
3. Semántico. Es el significado de las:
pantallas
instrucciones
Ejm. Guardar un archivo, crear un backup, etc.
Teoría de los cuatros niveles
2. Sintáctico. Las reglas o combinaciones de:
comandos, secuencias
ejm. Backspace key - borrar el carácter anterior o
tab - mueve al siguiente campo
1. Léxico. Son las dependencias con la
computadora.
Este modelo esta relacionado con la programación TOP-
DOWN
Consistencia léxica
Codificación consistente con el uso común
rojo = malo, verde = bueno
izquierda = menos, derecha = mas
Reglas de abreviación consistentes
Longitud igual o los primeros caracteres no ambiguos.
Nombres nemónicos en lugar de códigos
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 21
Consistencia sintáctica
Mensajes de error ubicados en el mismo lugar
(lógica)
Siempre damos el primer y el último comando
Los items en los menus siempre en el mismo lugar
(memoria)
Consistencia semántica
Comandos globales siempre disponibles
Ayuda
Abortar
Undo (comando completado)
Operaciones válidas sobre todo los objetos
razonables.
Si los objetos de clase “x” pueden ser borrados, entonces
los objetos de clase “y” tambien
Teoría de GOMS (Globales operador metodos selección)
Un individuo se fija metas que se pueden dividir en submetas. Cada submeta nos lleva a un diferente objetivo.
Metas y submetas. Ej. Editar, insertar palabras.
Métodos. Secuencia de teclas para posicionar el cursor
Operadores. Actos cognitivos, motores o perceptivos
elementales.
Reglas de selección. Estructuras de control usadas para seleccionar entre métodos alternativos para alcanzar una
meta. Ej. Delete vs cut
Teoría de las siete etapas
1. Formar la meta.
2. Formar la intención
brecha de ejecución (diferencia entre las acciones que se quieren hacer y las que se pueden hacer)
3. Especificar la acción
4. Ejecutar la acción.
5. Percibir el estado del sistema.
6. Interpretar el resultado.
Brecha de evaluación (diferencia entre el estado resultante del sistema y el estado que se esperaba)
7. Evaluar el resultado
Metas
Intención
Acción
Ejecución
Evaluación
Interpretación
percepción
espectativa
Actividad mental
Actividad física
Ejm. Teoría de las siete etapas
1. Quiero borrar texto (meta)
2. Ya lo voy a borrar (intención)
3. ¿cómo lo voy a borrar? (especificar la acción)
4. Borrar el texto (ejecutar la acción)
5. Ver si borré todo (percibir el estado del sistema)
6. ¿el resultado es el esperado? (interpretación)
7. Decido si está correcto según mis espectativas
(evaluación)
Diseño de Interfaces de Usuarios
Diaz Muñante Jorge 22
Reglas para el diseño de diálogos
Buscar la consistencia.
Permitir el uso de atajos.
Ofrecer retroalimentación informativa
Diseñar diálogos que obliguen a generar secuencias completas
Ofrecer manejo simple de errores
Permitir deshacer acciones fácilmente
Motivar la sensación de control
Reducir la carga de memoria a largo plazo
Prevención de errores
1. Pares correctos (apareamiento)
muy comun en lenguajes de comando
ejm. (lambda(x) (cons x´()) <----falta un “)”
Prevención:
• Generar el par derecho al escribir el izquierdo.
• Avisar al usuario con un mensaje
• Permitir que el sistema funcione sin el par.
Prevención de errores
2. Secuencias completas
El usuario puede olvidar terminar una secuencia de instrucciones. Ej. Seleccionar el # de copias al imprimir, y
despues olvidar dar la orden de impresión.
Prevención
• Generar la secuencia completa
• Hacer que el sistema pida que una secuencia iniciada con la
anterioridad se termine.
Prevención de errores
3. Comandos correctos
Evitar que alguna caracteristica del sistema sea usada incorrectamente.
Ejm. Intentar el comando “copiar” sin tener una
selección.
Prevención.
• Reducir el número de teclas (memoria)
• Escribir sólo las primeras letras del comando.
• Usar manipulación directa.
Resumen
IUs son dificiles para diseñarlos
Las recomendaciones pueden darnos principios generales a realizar
Las recomendaciones fallan si son dificiles de aplicar.
Muy especificas o muy generales
• especialmente para las recomendaciones de estilos