Diseño de Interfaces de Usuarios                                                                                         ...
Diseño de Interfaces de Usuarios       Mapeo natural                                            Mapeo       Mapeo         ...
Diseño de Interfaces de Usuarios       Reglas de oro de Mandel: colocar a los usuarios en el                        Permit...
Diseño de Interfaces de Usuarios       Proporcionar retroalimentación                                  Proporcionar accion...
Diseño de Interfaces de Usuarios       Permitir al usuario personalizar la interfaz                               Permitir...
Diseño de Interfaces de Usuarios       Proporcionar pistas visuales                      Proporcionar opciones por omision...
Diseño de Interfaces de Usuarios       Promover la claridad visual                                                Agrupar ...
Diseño de Interfaces de Usuarios       Organización perceptual                                                            ...
Diseño de Interfaces de Usuarios       Color de la fuente                                                           Estilo...
Diseño de Interfaces de Usuarios       Sensiblidad del color                                                              ...
Diseño de Interfaces de Usuarios       Combinación de colores GUI                                Combinación de colores GU...
Diseño de Interfaces de Usuarios       7 +- 2 Colores       Elementos de la interfaz. Ventanas                            ...
Diseño de Interfaces de Usuarios       Elementos de la interfaz. Menus                                                  El...
Diseño de Interfaces de Usuarios       Botones de ordenes                                                                 ...
Diseño de Interfaces de Usuarios       Cuadro de lista                                                                    ...
Diseño de Interfaces de Usuarios       Vista de Arbol                                                               Campo ...
Diseño de Interfaces de Usuarios       Cuadros Numericos                                                               Otr...
Diseño de Interfaces de Usuarios       Tab o lengüetas                                          Distribucion de la pantall...
Diseño de Interfaces de Usuarios       Ventanas secundarias                                                             Ve...
Diseño de Interfaces de Usuarios                                                                   Teoría de los cuatros n...
Diseño de Interfaces de Usuarios       Consistencia sintáctica                                             Consistencia se...
Diseño de Interfaces de Usuarios       Reglas para el diseño de diálogos                                  Prevención de er...
Upcoming SlideShare
Loading in …5
×

C8 recomendaciones diu

244 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
244
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

C8 recomendaciones diu

  1. 1. 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
  2. 2. Diseño de Interfaces de Usuarios 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.Diaz Muñante Jorge 2
  3. 3. Diseño de Interfaces de Usuarios 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”?Diaz Muñante Jorge 3
  4. 4. Diseño de Interfaces de Usuarios 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.Diaz Muñante Jorge 4
  5. 5. Diseño de Interfaces de Usuarios 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.Diaz Muñante Jorge 5
  6. 6. Diseño de Interfaces de Usuarios 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.Diaz Muñante Jorge 6
  7. 7. Diseño de Interfaces de Usuarios 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.Diaz Muñante Jorge 7
  8. 8. Diseño de Interfaces de Usuarios 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.Diaz Muñante Jorge 8
  9. 9. Diseño de Interfaces de Usuarios 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 colorDiaz Muñante Jorge 9
  10. 10. Diseño de Interfaces de Usuarios 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 modificadosDiaz Muñante Jorge 10
  11. 11. Diseño de Interfaces de Usuarios 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: negraDiaz Muñante Jorge 11
  12. 12. Diseño de Interfaces de Usuarios 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.Diaz Muñante Jorge 12
  13. 13. Diseño de Interfaces de Usuarios 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.Diaz Muñante Jorge 13
  14. 14. Diseño de Interfaces de Usuarios 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.Diaz Muñante Jorge 14
  15. 15. Diseño de Interfaces de Usuarios 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.Diaz Muñante Jorge 15
  16. 16. Diseño de Interfaces de Usuarios 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.Diaz Muñante Jorge 16
  17. 17. Diseño de Interfaces de Usuarios 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.Diaz Muñante Jorge 17
  18. 18. Diseño de Interfaces de Usuarios 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.Diaz Muñante Jorge 18
  19. 19. Diseño de Interfaces de Usuarios 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.0Diaz Muñante Jorge 19
  20. 20. Diseño de Interfaces de Usuarios 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- DOWNDiaz Muñante Jorge 20
  21. 21. Diseño de Interfaces de Usuarios 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ísicaDiaz Muñante Jorge 21
  22. 22. Diseño de Interfaces de Usuarios 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 estilosDiaz Muñante Jorge 22

×