C8 recomendaciones diu

Diseño de Interfaces de Usuarios

 “descripción del
material” muy
pequeño
 no hay una
Diseño de Interfaces Profesor: información que
muestre al usuario
de Usuarios como va la carga
de su archivo
Diaz Muñante Jorge adjunto(
Ciclo 2012-1 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
Recomendaciones

Modelos Mentales Mapeo parcial
Mapeo arbitrario

¿cuál llave le
pertenece a c/u
de las hornillas?

Diaz Muñante Jorge 1


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 Principios fundamentales del diseño

 Terminologia Representan conceptos de alto nivel que deberían
 Que es “Non-Visual Objects” y como podemos verlos ser empleados como referencia o guía de diseño.
entonces? Uno de los clásicos: reglas de oro de Mandel.
 Seleccionar un nombre mas representativo 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.



Reglas de oro de Mandel: colocar a los usuarios en el Permitir utilizar el teclado y el raton
control de la interfaz
 Los principios que se deben seguir para conseguir el objetivo son:  Aunque es posible optimizar la interfaz para usuarios de
 Emplear los modos adecuadamente. ratón, es importante proporcionar una forma alternativa de
 Permitir a los usuarios utilizar el teclado y el ratón. interacción.
 Permitir a los usuarios cambiar la atención.  Esto dotará a la interfaz de las siguientes ventajas:
 Mostrar a los usuarios mensajes y textos descriptivos.
 Facilidad para los usuarios que provengan de otros
 Proporcionar retroalimentación. entornos.
 Proporcionar acciones inmediatas y reversibles.
 Facilidades a los usuarios con necesidades especiales.
 Proporcionar caminos significativos y salidas.
 Continuidad ante fallos o inexistencia del ratón.
 Acomodar a los usuarios con diferentes niveles de habilidad.
 Hacer la interfaz de usuario transparente.  Este principio no aparece en diversas guías de estilo.
 Permitir al usuario personalizar la interfaz.
 Permitir al usuario manipular los objetos de la interfaz.

Permitir cambiar la atencion Mostrar a los usuarios mensajes y textos claros

 Los usuarios deben poder interrumpir sus acciones actuales Mensajes claros, útiles descriptivos y fáciles de
y continuarlas más tarde. entender en diálogos, etiquetas y documentación.
 Una vez lanzada una tarea larga y no crítica el usuario Evitar el lenguaje excesivamente técnico.
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.

Hable en el lenguaje del usuario Hable en el lenguaje del usuario

No confundir al usuario
Numeración comenzando desde 0
(Netscape Communicator)
XFM, "X-windows File
Manager"

Colores representados en
hexadecimal (y no el color
mismo)
Que significa “Continue”?
“continuar usando XFM” o “Continuar para salir”?
En que difieren “Cancel” y “Abort”?



Proporcionar retroalimentación Proporcionar acciones inmediatas y reversibles

Es necesario informar de los procesos en curso. Es deseable que todas las operaciones realizadas
 Mediante mensajes en cuadros de diálogo. con los datos sean reversibles.
 Mediante mensajes en barras de estado.  Otorga confianza al usuario.
 Barras de progreso.  Le anima a investigar sin miedo.

Adecuado cuando: Opciones de “deshacer” y “rehacer”.
 Se están realizando operaciones largas. Principio del esfuerzo proporcionado.
 Se va a realizar un proceso irreversible.  Cuando un proceso es difícil de recuperar, también debe
ser más difícil de realizar.
Se debe proporcionar información clara e
identificativa.

Proporcionar caminos significativos y salidas 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.

Usuarios con diferentes niveles de habilidad Hacer una interfaz transparente

No sacrificar a los usuarios expertos por una Una interfaz transparente permite al usuario
interfaz más fácil para usuarios ocasionales. sentirse como si estuviera manipulando los objetos
Es necesario proporcionar caminos rápidos para reales con los que trabaja habitualmente.
los usuarios expertos. Buen ejemplo de transparencia:
 Atajos de teclado.  Papelera de reciclaje.
Lo ideal: Mal ejemplo de transparencia:
 Interfaces personalizables que permitan a los usuarios  CTRL+ALT+SUPR para el administrador de tareas.
elegir las opciones disponibles de la interfaz según su
nivel de experiencia en la aplicación.



Permitir al usuario personalizar la interfaz Permitir manipular los objetos

 Los usuarios se encuentran más confortables cuando  Fomentar que el usuario manipule directamente los objetos
pueden configurar las características del sistema. de la pantalla además de usar métodos indirectos por medio
de teclado y ratón.
 Configurar la presentación (colores, fuentes, aspectos
internacionales).  Algunas veces las interfaces de manipulación directa fallan
porque las acciones a realizar con los objetos no son
 Configurar el comportamiento (acciones por omisión, visualmente obvias.
botones de la barra de herramientas, etc.).
 No queda claro qué cosas se pueden hacer al arrastrar y
 Configurar la interacción (teclas de método abreviado, soltar objetos por la pantalla.
mnemotécnicos, etc.).
 Es necesario hacer más obvias las manipulaciones.
 Es interesante incluir también una opción que permita
restablecer los valores por omisión.

Reglas de oro de Mandel: reducir la carga de memoria Aliviar la memoria a corto plazo

 La reducción de la carga de la memoria facilitará el aprendizaje.  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.
 Permitirá al usuario recordar, más que aprender, el funcionamiento
de la interfaz.  Es necesario incluir en la interfaz mecanismos que permitan no tener
 Algunos principios para lograr este objetivo: que cargar información en dicha área de memoria.

 Aliviar la memoria a corto plazo.  Para este objetivo se puede recurrir a:
 Confiar en el reconocimiento.  Incluir acciones de “deshacer” y “hacer”.
 Proporcionar pistas visuales. • Además de dar seguridad al usuario, permiten retornar es estados anteriores
sin necesidad de recordar cómo se llegó a ellos.
 Proporcionar opciones por omisión.
 Utilizar las opciones de cortar, copiar y pegar.
 Proporcionar atajos de teclado.
• Además de utilizarse como herramientas de edición, permiten almacenar en
 Promover la sintaxis objeto-acción. la memoria del computador información que se utilizará más tarde.
 Emplear metáforas del mundo real.
 Emplear la revelación progresiva.
 Promover la claridad visual.

Confiar en el reconocimiento Proporcionar pistas visuales

Permitir recuperar información de la memoria a El usuario debe saber donde está, qué está
largo plazo mostrando los elementos que debe haciendo y qué es lo que puede hacer.
reconocer.
 Es más fácil seleccionar elementos que recordarlos.



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 Promover la sintaxis objeto-acción

Los atajos de teclado economizan el número de  No es necesario diseñar una interfaz totalmente orientada a objetos
para seguir este principio.
pulsaciones o movimientos de ratón utilizados.
 Menús contextuales.
Dos formas:  Este tipo de sintaxis evitar tener que recordar todas las opciones
 Mnemotécnicos (teclas de acceso rápido). posibles en cada momento sobre un objeto.

Emplear metaforas del mundo real Emplear la revelacion progresiva

Una vez elegida una metáfora es necesario No abrumar al usuario con las funciones de un
mantenerla. producto.
 Es posible ampliarla, pero no cambiarla. Mostrar sólo lo que el usuario necesita cuando y
dónde lo necesita.



Promover la claridad visual Agrupar elementos

 Aplicar principios de diseño visual de la percepción humana.
 Agrupación.
Nombre Nombre
 Numeración de elemento.
Nombre
 Establecer prioridades en la importancia de los elementos mostrados. Direc 1
Direc 1 Direc 1
 No disponer demasiados elementos en la pantalla. Direc 2 Direc 2 Direc 2
 Distribuir bien los elementos. Ciudad Ciudad Ciudad
Estado Estado
Estado
Telef. Telef.
Telef.
Fax
Fax Fax

Malo Bueno Bueno

Reglas de oro de Mandel: interfaz de usuario Diseño Grafico
consistente

 Una interfaz bien diseñada permitirá a los usuarios transferir  Objetivos del diseño gráfico:
su conocimiento en el aprendizaje de un nuevo programa.  Mostrar la información de forma atractiva y legible.
Pero…  La interfaz debe aportar relaciones y significado a cada elemento.
 Debe ser consistente con otros programas que haya  No debe diseñarse siguiendo criterios de vistosidad o gustos
utilizado. personales.
• La interfaz debe diseñarse pensando que serán otros los que la utilicen.
 Dentro de un programa será más fácil su aprendizaje si
 Elementos fundamentales:
existe cierto parecido entre las distintas partes de las que
esté formado.  Organización perceptual de los objetos.
 Tipografía y texto utilizado.
 Algunos principios que fomentan la consistencia:
 Color.
 Preservar el contexto de trabajo de los usuarios.
 Imágenes.
 Mantener la consistencia dentro y entre productos.

Organización perceptual de los objetos 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 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.

Texto Fuente tipografica y cuerpo

 El número de fuentes no debería pasar de tres o cuatro.
Es necesario cuidar:
 La inclusión de un nuevo tipo de fuente debe estar justificada.
 El lenguaje utilizado. • Titulares, resaltar alguna característica de la interfaz.
 La legibilidad del texto.  Es necesario seleccionar una fuente como principal (para el texto común) y
mantenerla a lo largo de la interfaz.
• En ella interviene:
 En la elección de la fuente principal primará la legibilidad y el público a quien
– Tipo de fuente tipográfica. está dirigida la aplicación.
– Tamaño de la fuente (cuerpo).  Evitar los estilos de fuente (negrita, cursiva) a no ser que se desee algún efecto
– Color de la fuente. 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 Fuente tipografica y cuerpo

 En aplicaciones Windows (especificaciones de la guía de estilo The
Windows User Experience. Tipografía en Windows XP.
 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.



Color de la fuente Estilos de escrituras

 También determina la legibilidad de la información.  Uso de mayúsculas.
 Se debe utilizar un buen contraste entre el color de fondo y  Las letras mayúsculas tienen peor legibilidad de que las
el de primer plano. minúsculas.
 Contraste no demasiado elevado y de colores  Evitarlas sobre todo en tipografías decorativas.
complementarios: negro sobre gris, blanco sobre azul.
 No utilizar colores opuestos: rojo sobre verde, azul sobre
amarillo.  Utilizar las normas de capitalización habituales.
 El contraste elevado puede servir para destacar la • Si “Actualizar controlador de impresión” o “Actualizar controlador
información, pero no para el texto principal. Postcript”.
 Colores de los enlaces. • No “Actualizar Controlador de Impresión” o “Actualizar
ControladorPoscript”.
 Diferenciar los enlaces no usados, los enlaces activos,
los enlaces visitados

Estilos de escritura Color

 Componente clave en los elementos que constituyen una interfaz.
Signos de puntuación:
 Uso efectivo del color
 Utilizar puntuación normal en textos largos introductorios.  El color ayuda a desarrollar modelos mentales eficientes si se siguen
unas pautas
 Las opciones de menú, elementos de listas, casillas de
verificación no llevan puntuación final. • Simplicidad:
– Vincular significados prácticos e intuitivos a los colores primarios, rojo, verde,
 Los titulares (títulos de ventanas, paneles), no llevan amarillo y azul, que son fáciles de aprender y recordar
puntuación final. – 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
 Los puntos suspensivos se utilizan en opciones de menú color
o botones que no conlleven una acción directa. • 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 Legibilidad

 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 Significado del color

 Es difícil enfocar hacia las orillas creadas solamente por el color Significado del color

 Evita utilizar el rojo y el verde en la periferia de presentaciones a
gran escala
Consistencia
 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



Sensiblidad del color ¿IU de la fama o de la verguenza?

Realmente amarillo
Dialogo
 Pregunta si usted
desea borrar
•Si (verde)
•no (rojo)

from: http://www.cs.gsu.edu/classes/hypgraph/color/coloreff.htm

IU de la fama o de la verguenza? Colores no adyacentes

 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

Consistencia

Archivo de Personal Culture Red Blue Green Yellow White
USA Danger Masculinity Safety Cowardice Purity

Codigo del Empleado 2731 France Aristocracy Freedom,
peace
Criminality Temporary Neutrality

Apellidos Lozano Egypt Death Virtue,
faith, truth
Fertility,
strength
Happiness,
prosperity
Joy

Nombres Tilsa India Life, Prosperity, Success Death,
creativity fertility purity
Estado Divorciada Japan Anger, danger Villainy Future, Grace, nobility Death
youth, energy
Numero de hijos 1 China Happiness Heavens, Ming dynasty, Birth, wealth, Death,
Documento de entidad 7238912 clouds heavens power purity

Grado de Instrucción Superior
El color azul siempre para los campos que no
pueden ser modificados



Combinación de colores GUI Combinación de colores GUI

Background Mejores colores Peores colores Background Mejores colores Peores colores

Blanco Negro, Azul Cyan, Amarillo Blanco Negro, Azul Cyan, Amarillo
Negro Amarillo, Blanco Azul Negro Amarillo, Blanco Azul
Rojo Negro Azul, Magenta Rojo Negro Azul, Magenta
Verde Negro, Rojo Cyan Verde Negro, Rojo Cyan
Azul Rojo, Blanco, Amarillo Negro Azul Rojo, Blanco, Amarillo Negro
Amarillo Negro, Azul, Rojo Cyan, Blanco Amarillo Negro, Azul, Rojo Cyan, Blanco

 Background: Blanco, letras: Azul

Combinación de colores GUI Combinación de colores GUI

Background Mejores colores Peores colores Background Mejores colores Peores colores

Blanco Negro, Azul Cyan, Amarillo Blanco Negro, Azul Cyan, Amarillo
Negro Amarillo, Blanco Azul Negro Amarillo, Blanco Azul
Rojo Negro, Amarillo Azul, Magenta Rojo Negro Azul, Magenta
Verde Negro, Rojo Cyan Verde Negro, Rojo Cyan
Azul Rojo, Blanco, Amarillo Negro Azul Rojo, Blanco, Amarillo Negro
Amarillo Negro, Azul, Rojo Cyan, Blanco Amarillo Negro, Azul, Rojo Cyan, Blanco

 Background: amarillo, letras: rojo  Background: Rojo, letras: Azul

Combinación de colores GUI Antes y despues

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



7 +- 2 Colores

Elementos de la interfaz. Ventanas Elementos de la interfaz. Ventanas

 La barra de título.
Ventana principal y ventana secundaria.
 Icono de la ventana.
Componentes de la ventana principal. • Representa el objeto visualizado en la ventana.

Control Form de .NET. – 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 Elementos de la interfaz. Menus

 La barra de menús.  Menús contextuales (control ContextMenu de .NET).
 Incluye un conjunto de entradas: títulos de menús.  Proporcionan un mecanismo para acceder a las opciones de un
objeto.
 Interación.
 Facilitan la interacción: evitan movimientos del dispositivo apuntador.
• Mediante dispositivo apuntador.
 Minimizan el número de elementos de la pantalla.
• Mediante teclado: tecla ALT y tecla de acceso o teclas de cursor.
 Sólo deben mostrar las opciones aplicables al objeto.
 Cada título de menú accede a un menú desplegable (menú
DropDown).  Opción predeterminada.

 Controles MainMenu (para los títulos de menú) y MenuItem (para  Menús en cascada.
loselementos desplegables) en .NET  Submenú de un elemento de menú.
 Menús desplegables habituales.  Los elementos con submenús deben ir seguidos de una flecha.
 Menú Archivo.  Añaden complejidad a la interfaz: es necesario limitar el número de
niveles.
 Menú Edición.
 Menú Ver.



Elementos de la interfaz. Menus Elementos de la interfaz. Menus

 Elementos de menú (objeto MenuItem de .NET).  Títulos de menús.
 Deben estar presentes en todos los títulos de la barra de menús.
 Si la acción a realizar necesita más información, se debe
• Los títulos sólo se deben utilizar para abrir menús, nunca para ejecutar
acciones o representar opciones. seguir de puntos suspensivos.
• Si en “Guardar como…”, no en “Acerca de”.

 Organización de los elementos.
 Títulos de los elementos.  Separadores.
 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 Elementos de la Interfaz. Botones

 Es necesario ofrecer indicaciones visuales de los elementos que se Inician acciones y muestran o cambian
pueden activar.
propiedades de los objetos.
 Pueden no aparecer.
 Tres tipos de botones.
 Aparecer como deshabilitados.
• Botones de órdenes (control Button).
 Los elementos de menú pueden utilizarse para establecer o cambiar el
estado de un elemento. • Botones de opción o botones de radio (control RadioButton).
• Casillas de verificación (control CheckBox).
 Opciones independientes o dependientes.
Otros controles también presentan botones
integrados:
 Barras de herramientas, barras de estado, barras de
desplazamiento, controles “up-down”…

Botones de ordenes Botones de ordenes

 Permiten la pulsación y llevan a cabo una acción.  Botones con texto y gráficos.
 La acción se realiza cuando el usuario suelta el botón.  El texto debe ir abajo y centrado.
 Pueden incluir sólo texto, texto y gráficos o sólo gráficos.  Botones con sólo gráficos.
 Incluir un ToolTip.
 Botones por omisión.
 Etiqueta del botón.
 En formularios modales.
 Debe describir la acción del botón incluso fuera de contexto.
 Al pulsar INTRO se ejecuta la acción del botón.
 El texto debe estar centrado, a ser posible incluir una sola palabra y
tener una tecla de acceso.  Botones de cancelación.
 Si requiere información adicional debe acabar en puntos  Al pulsar la tecla ESC se ejecuta la acción del botón.
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 de opcion

Etiquetas standard para acciones frecuentes
 Representan un estado on/off de una propiedad de un objeto.

Realiza los cambios y cierra  Representan una única opción dentro de un grupo de opciones
Aceptar
la ventana. Equivalente “enter” mutuamente excluyentes.
No realiza ningún cambio, cierra
Cancelar  Es necesario agrupar las opciones excluyentes.
la ventana. Equivalente “esc”
Cierra la pantalla cuando los  Limitar el número de opciones (máximo 7).
Cerrar
cambios no pueden realizar; C

Restaurar Restaurar valores iniciales, libera
la pantalla actual; R
Realiza los cambios, libera la
Aplicar
pantalla abierta; A

Ayuda Ayuda en línea; U

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 Cuadro de lista

 Representan también un estado on/off. Presentan al usuario un conjunto de opciones para
elegir.
 Las acciones o propiedades representadas no tienen por
qué ser excluyentes. Son una alternativa cuando para las listas
demasiado grandes de botones de radio o casillas
 Presenta tres estados:
de verificación.
 En blanco, marcada, valor mezclado. Los elementos deben presentarse de forma que
tengan algún tipo de organización lógica.



Cuadro de lista Cuadro de lista de selección unica

 Etiquetas y texto de los elementos. Control ListBox de .NET.
 No incluyen etiquetas propias.
Su funcionalidad puede sustituir a un conjunto
• Es necesario incluir etiquetas que informen sobre su cometido y que
permitan la interacción por teclado mediante teclas de acceso. grande de botones de opción.
• Permiten también dar indicaciones visuales de cuando el control no está
habilitado. La selección de un elemento quita la de otro
• Utilizar las reglas normales de capitalización y terminarlas por dos puntos (:). elemento de la lista.
 Texto de los elementos de la lista. El número de opciones visibles deberá estar entre
• Utilizar las reglas de capitalización sin puntuación final. tres y ocho.
• Establecer un ancho suficiente para que quepa el texto en su totalidad.
– Utilizar puntos suspensivos en partes no importantes del texto.
El doble clic sobre un elemento debería realizar la
» Utilizar ToolTips para mostrar el contenido completo.
acción del botón predeterminado del cuadro de
– Utilizar barras de desplazamiento horizontal. diálogo.

Cuadro de lista desplegable Cuadro de selección multiple

 Control ListBox con la propiedad SelectionMode a MultiSimple o MultiExtended en .NET.
Control ComboBox con la propiedad
 Funcionalidad similar a la de un grupo de casillas de verificación.
DropDownStyle a DropDownList.
 Es posible seleccionar varios elementos de la misma lista.
Tienen la misma funcionalidad pero se presentan  Dos tipos de selección:
con las opciones plegadas.  Múltiple
 Extendida.
Requieren más interacciones por parte del usuario
 Es posible utilizarlos como casillas de verificación (control CheckedListBox de .NET).
(necesitan abrir la lista), pero ahorran espacio en la
interfaz.

Vista de lista 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 Arbol Campo de texto

 Control TreeView de .NET.  Permiten la presentación, introducción o edición de valores
 Ofrece los elementos mediante una estructura jeráquica en forma de de texto.
esquema.  Etiquetas.
 Presenta botones que comprimen o expanden el esquema.  No incluyen etiquetas.
 Pueden incluir iconos asociados con las etiquetas y casillas de  La inclusión de etiquetas permite:
verificación. • Identificar el cometido del campo.
 Si presenta casillas de verificación se podrá realizar una selección • Identificar los campos desactivados.
múltiple.  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 Cuadro de texto enriquecido

 Control TextBox de .NET.  Control RichTextBox de .NET.
 Control rectangular donde el usuario introduce o edita texto.
 Añade a los cuadros de texto estándar la posibilidad de dar
 Se utilizar también para mostrar texto. a partes de texto formatos de fuente, de párrafo, viñetas.
 Texto de sólo lectura: el texto aparece en otro color.
 Permite incluir objetos incrustados.
 Campos de una sola línea y multilínea.
 Ofrece también soporte para imprimir, guardar y abrir
 Puede incluir barras de desplazamiento horizontal y vertical.
archivos RTF o de texto.

Cuadros combinados Cuadro combinado desplegable

 Combina un cuadro de texto con un cuadro de lista.  Control ComboBox de .NET con la propiedad DropDownStyle a
DropDownCombo.
 El usuario puede introducir el valor de un elemento o elegir una opción
de la lista.  Combina un cuadro de texto con un cuadro de lista desplegable.
 Presentan una acción combinada:  La lista aparece inicialmente plegada.
 Al elegir un elemento de la lista, el cuadro de texto se carga con  Ahorra espacio en la interfaz.
dicho valor.
 El texto introducido y la lista están conectados de la misma forma que
 Al teclear un valor en el cuadro de texto, el elemento seleccionado
de la lista será el que tenga la concordancia más cercana. los cuadros combinados.



Cuadros Numericos Otros controles

 Control NumericUpDown de .NET. Selector de fecha.
 Permite introducir valores numéricos e incrementarlos o decrementarlos
con botones asociados o las teclas de cursor.  Vista de un mes del calendario (control MonthView).
 .NET también incluye un control DomainUpDown que permite movernos  Vista desplegable (control DateTimePicker).
por una lista de valores que introduce el usuario.
Cuadros de grupo.

Otros controles Otros controles

 Indicadores de progreso.  Barras de desplazamiento.
 Barras de desplazamiento.  Control deslizante.
 Aparecen de forma automática en algunos controles. • Se utiliza para establecer valores continuos como el brillo o el volumen.

 Se pueden incluir de forma independiente para dar valores • No tiene etiquetas:
numéricos. – Utilizar texto estático con información de su cometido.

 Los controles HScrollBar y VScrollBar de .NET ofrecen un aspecto – Incluir texto o gráficos para interpretar la escala y el rango.
similar a las barras asociadas a los controles. • Control TrackBar de .NET.
• Para evitar confusiones es mejor utilizar el control TrackBar.  Fichas.
 Control TabControl de .NET.

Otros controles Otros controles

 Control de información sobre herramientas. Control WebBrowser.
 Control ToolTip de .NET.  Muestra el área cliente del Internet Explorer.
 Muestra un mensaje de ayuda al pasar el puntero por el  Permite incluir en una aplicación Windows:
control. • Visualización de texto HTML.
• Mensaje breve, utilizar la reglas de capitalización y, si tiene, mostrar • Transferencia de archivos.
la tecla de método abreviado entre paréntesis. • Enlaces a la web.
 También puede mostrar información descriptiva sobre los
elementos de la interfaz.



Tab o lengüetas Distribucion de la pantalla

Para categorías discretas de información Icono Mensaje de texto
estandard en Arial 14,
ajustado a la
izquierda

Buena ? ¿Desea eliminar el
archivo
Distribucion “miarchivo.doc” de
No Ok la carpeta “diu”?

No Ok

Mala Aplicar
Distribucion El archivo esta
dañado
Cancelar

Agrupar para relacionar elementos Barras de Herramientas

 Contenedores que permiten gestionar un conjunto de
controles que dan acceso a las tareas más comunes.
Mala Buena Buena
 Normalmente deberán repetir tareas que se puedan
ejecutar mediante teclado (menús).
Mmmm: Mmmm: Mmmm:

Mmmm:
Mmmm:  Aspecto de los botones.
Mmmm:

Mmmm:  Sólo icono o icono con el texto centrado debajo.
Mmmm: Mmmm:
Mmmm: • Iconos pequeños (16x16) o grandes (24x24).
Mmmm: Mmmm:
Mmmm:
 Botones de órdenes, botones de opción o casillas de
Mmmm: Mmmm:
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 Ventanas secundarias

 Personalización de la barra de herramientas.  Obtienen, presentan o modifican información
complementaria.
 Tamaño de los botones.
 Tamaño más pequeño que el de la ventana principal.
 Disposición de los botones.
 Normalmente asociadas a una ventana principal.
 Sólo iconos o iconos y texto.
 Se cerrarán cuando se cierre la principal.
 Acompañarlas de ToolTips  Se minimizarán cuando se minimice la ventana principal.
 Modificar la ubicación y el acoplamiento.  Normalmente no cambiarán de tamaño.
 No tendrán el botón de Maximizar/Restaurar.
 Pueden tener botones predeterminados.



Ventanas secundarias 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.

Cuadro de mensajes Cuadro de mensajes

Ventana secundaria que muestra un mensaje sobre  Mensaje de información.

una situación concreta y, en algunos casos,  Sólo presenta información al usuario.
permiten la interacción.  No ofrece opciones al usuario.
 Mensaje de advertencia.
En VB. NET muestran mediante la clase
 La situación requiere una decisión por parte del usuario.
MessageBox.
 Respuesta a una petición con consecuencias irreversibles.
Título de la ventana.  Puede presentar botones del tipo Si/No, Aceptar/Cancelar, etc.
 Si la situación se da sobre un archivo o documento,  Mensaje crítico.
deberá aparecer el nombre del documento.  Situación crítica que requiere intervención del usuario para continuar.
 Si no, utilizar el nombre de la aplicación.
Incluyen un icono identificativo que indica el tipo de
mensaje.

Menos es mas

Menos es mas
“Mantenerlo simple”
Lenguaje conciso
Prohibir información e imágenes extremas
 pocas opciones en los menus seleccionados Figura 1. Internet Explorer 4.0
 reduzca el tiempo de planificación (mental)
 reduzca el tamaño del manual, etc.

Figura 2. Internet Explorer 5.0



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 Teoría de los cuatros niveles

3. Semántico. Es el significado de las palabras. A nivel de interfaces lo podemos ver
 Ejm. cAsA, lugar donde viven las personas 4. Conceptual. Es la idea del sistema como un todo
4. Conceptual. Es la idea, lo que tengo en mente. (un editor de texto, un graficador, etc.)
 Ejm. Esa cAsA está muy bonita 3. Semántico. Es el significado de las:
 pantallas
 instrucciones
 Ejm. Guardar un archivo, crear un backup, etc.

Teoría de los cuatros niveles Consistencia léxica

2. Sintáctico. Las reglas o combinaciones de: Codificación consistente con el uso común
comandos, secuencias  rojo = malo, verde = bueno
 ejm. Backspace key - borrar el carácter anterior o  izquierda = menos, derecha = mas
 tab - mueve al siguiente campo Reglas de abreviación consistentes
1. Léxico. Son las dependencias con la  Longitud igual o los primeros caracteres no ambiguos.
computadora.
Nombres nemónicos en lugar de códigos
 Este modelo esta relacionado con la programación TOP-
DOWN



Consistencia sintáctica Consistencia semántica

Mensajes de error ubicados en el mismo lugar Comandos globales siempre disponibles
(lógica)  Ayuda
Siempre damos el primer y el último comando  Abortar
Los items en los menus siempre en el mismo lugar  Undo (comando completado)
(memoria) 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 Teoría de las siete etapas
(Globales operador metodos selección)

 Un individuo se fija metas que se pueden dividir en 1. Formar la meta.
submetas. Cada submeta nos lleva a un diferente objetivo. 2. Formar la intención
 Metas y submetas. Ej. Editar, insertar palabras. brecha de ejecución (diferencia entre las acciones que se
 Métodos. Secuencia de teclas para posicionar el cursor quieren hacer y las que se pueden hacer)
3. Especificar la acción
 Operadores. Actos cognitivos, motores o perceptivos
elementales. 4. Ejecutar la acción.
 Reglas de selección. Estructuras de control usadas para 5. Percibir el estado del sistema.
seleccionar entre métodos alternativos para alcanzar una 6. Interpretar el resultado.
meta. Ej. Delete vs cut
Brecha de evaluación (diferencia entre el estado resultante del
sistema y el estado que se esperaba)
7. Evaluar el resultado

Ejm. Teoría de las siete etapas
Metas
1. Quiero borrar texto (meta)
2. Ya lo voy a borrar (intención)
Intención espectativa Evaluación
3. ¿cómo lo voy a borrar? (especificar la acción)

Acción Interpretación
4. Borrar el texto (ejecutar la acción)
5. Ver si borré todo (percibir el estado del sistema)
Ejecución percepción 6. ¿el resultado es el esperado? (interpretación)
Actividad mental
7. Decido si está correcto según mis espectativas
(evaluación)
Actividad física



Reglas para el diseño de diálogos Prevención de errores

Buscar la consistencia. 1. Pares correctos (apareamiento)
Permitir el uso de atajos.  muy comun en lenguajes de comando
Ofrecer retroalimentación informativa  ejm. (lambda(x) (cons x´()) <----falta un “)”
Diseñar diálogos que obliguen a generar  Prevención:
secuencias completas • Generar el par derecho al escribir el izquierdo.

Ofrecer manejo simple de errores • Avisar al usuario con un mensaje
• Permitir que el sistema funcione sin el par.
Permitir deshacer acciones fácilmente
Motivar la sensación de control
Reducir la carga de memoria a largo plazo

Prevención de errores Prevención de errores

2. Secuencias completas 3. Comandos correctos
 El usuario puede olvidar terminar una secuencia de  Evitar que alguna caracteristica del sistema sea usada
instrucciones. Ej. Seleccionar el # de copias al imprimir, y incorrectamente.
despues olvidar dar la orden de impresión.  Ejm. Intentar el comando “copiar” sin tener una
 Prevención selección.
• Generar la secuencia completa  Prevención.
• Hacer que el sistema pida que una secuencia iniciada con la • Reducir el número de teclas (memoria)
anterioridad se termine.
• 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


C8 recomendaciones diu

Recomendados

Recomendados

Más contenido relacionado

Similar a C8 recomendaciones diu

Similar a C8 recomendaciones diu (20)

Más de Julio Pari

Más de Julio Pari (20)

C8 recomendaciones diu