C8 recomendaciones diu

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



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.



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"



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.



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.



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.



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



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.



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



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



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





Rojo Negro, Amarillo Azul, Magenta




Background: amarillo, letras: rojo









Background: Rojo, letras: Azul









Background: Azul, letras: negra

Antes y despues



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.


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.




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.


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.


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.



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.



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



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.



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.



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.




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

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



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


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


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.


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



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)



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.


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.


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

Documents

C8 recomendaciones diu