Seminario: componentes de un Interfaz de usuario

2,062 views

Published on

Seminario sobre Componentes Interactivos. Recomendaciones de uso y diseño

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,062
On SlideShare
0
From Embeds
0
Number of Embeds
1,241
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Seminario: componentes de un Interfaz de usuario

  1. 1. Diseño de Interfaces de Usuario SEMINARIO Componentes (widgets) para el diseño de Interfaces de Usuario Miguel Gea (mgea@ugr.es) Dpt. Lenguajes y Sistemas Informáticoss Grado en Ingeniería Informática Universidad de Granada http://utopolis.ugr.es/diu 14 Octubre, 2013 http://www.slideshare.net/mgea/seminario-03-componentes-de-un-interfaz-de-usuario W. Galitz, The Essential Guide to User Interface Design, Wiley 2002
  2. 2. 1. Ventanas: Estructura Composición Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada Barra de título Menú Barra de herramientas (Toolbar) Barra de estado Paneles (internos) Decoración -2- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  3. 3. 1.1 Elementos de las Ventanas: Menú MENU  Composición menubar o Barra de menú (menubar) o Menu desplegable (Drop-down / Pull-down) o Ubicación: Parte superior ventana  Acceso por teclado o Alt+letra (mnemónico) o Combinación teclas (aceleradores/atajos) Mnemonic (ALT + ‘A’) Accelerator (CTR + ‘A’)  Elementos menú o Items (botones) o Orden: Archivo Edición (cortar, copiar, pega) … Ayuda Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -3- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  4. 4. 1.2 Elementos de las Ventanas: Barras BARRA DE HERRAMIENTAS (ToolBar)  Estilo (Libres, Pegadas) o Poseen una parte activa en su parte izda. para manejarla (mover, pegar) Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -4- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  5. 5. 1.2 Elementos de las Ventanas: Barras BARRA DE ESTADO (Status bar) o Información sobre el contenido de la ventana o Ver / ocultar Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -5- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  6. 6. 1.3 Elementos de las Ventanas: Paneles Paneles o Separación lógica de la ventana en partes independientes o Ver / ocultar o Pueden ser dimensionables (movibles) Divisor Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -6- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  7. 7. 1.4. Elementos de las Ventanas: Pestañas PESTAÑAS (Tabs) o Indicador de paneles apilados Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -7- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  8. 8. 2. Componentes / Controles • Apariencia • Forma • Modos (foco, seleccionado, desactivado) • Comportamiento • Individual/ Agrupado • Funcionamiento • Posibles estados • Orden de Selección por teclado (Foco) • Semántica • Accciones que puede realizar • Uso adecuado Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -8- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  9. 9. 2.1 Botones (Buttons) Apariencia: Forma: rectangular o cuadrada Etiqueta: Texto y/o imagen Apariencia: 3D / pulsado - resaltado Objetivo: • Iniciar una acción (aplicar) • Cambio de propiedades (On/Off) • Mostrar menú Uso: • Individual (relacionados) • Barra de herramientas • Menú Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -9- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  10. 10. 2.1 Botones (Buttons) Características Ventajas • Siempre visible (recordatorio) • Organización dentro de la ventana • Realimentación visual (efecto de pulsar) • Uso de equivalente por teclado Foco Inconvenientes: • Consume espacio (pantalla) • Su tamaño limita el máx visible • Requiere mover puntero para seleccionar • Fijarse en el icono Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -10- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  11. 11. 2.1 Botones (Buttons) Características Recomendaciones • Usar etiquetas/iconos significativas • Texto centrado y tamaño apropiado • Mantener agrupados botones relacionados • Desactivar temporalmente opciones no disponibles • Usar aceleradores de teclado (ALT) y subrayar letra • Agrupar botones asociados a un mismo diálogo Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -11- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  12. 12. 2.1 Botones con estado Ventajas • Representan un valor binario (on / off) • Efecto de pulsar para activar / desactivar Inconvenientes: • Se puede confundir con un botón convencional • Se debe distinguir visualmente los dos estados Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -12- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  13. 13. 2.2 Cajas de edición (TextArea/TextField) Apariencia: Forma: rectangular o cuadrada Edición texto (activa o no) Incluye Etiqueta (Caption) indicando su contenido Una/múltiples líneas Formado por etiqueta y caja de texto Objetivo: • Mostrar/modificar texto • De una sola línea o caja Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -13- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  14. 14. 2.2 Cajas de edición (TextArea/TextField) Ventajas • Flexible • Familiar • Consume poco espacio Inconvenientes: • Necesidad de teclado como modo de entrada • Realimentación para indicar que está activo (foco de edición) Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -14- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  15. 15. 2.2 Cajas de edición (TextArea/TextField) Recomendaciones • Usar campos con formato (para evitar errores de entrada de datos) • Usar valores por defecto en la entrada • Tener tamaño acorde al tipo de dato esperado • Etiquetas adecuadas Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -15- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  16. 16. 2.3. Componentes de Selección Objetivo: • Seleccionar una alternativa para el valor de un objeto • Características: • Excluyente / Inclusivas • Siempre Visibles / bajo demanda • Elección simple / múltiple Tipos: • Botones de elección (Radio-Button) • Botones de opción (Check-Button) • Cajas de Selección (Combo-Box) • Listas (list) • Arbol (tree) Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -16- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  17. 17. 2.3.1 Selección: Elección (excluyente) BOTONES DE ELECCION (Radio Button) Apariencia: • Círculo o rombo delante un texto con la opción • Debe haber más de un botón y se comportan de forma excluyente (sólo uno está activado) • Siempre hay una opción seleccionada Objetivo: • Realizar una elección entre diferentes alternativas Uso: • Agrupación de varios botones de elección Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -17- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  18. 18. 2.3.1 Selección: Elección (excluyente) BOTONES DE ELECCION (Radio Button) Ventajas • Fácil de acceder a las opciones • Fácil de comparar • Intuitivo para el usuario Inconvenientes: • Consume espacio de pantalla • Uso para un número limitado de opciones • Tamaño del área circular de selección Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -18- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  19. 19. 2.3.1 Selección: Elección (excluyente) BOTONES DE ELECCION (Radio Button) Recomendaciones • Usar cuando hay espacio disponible para presentar todas las alternativas • Debe ser un número reducido de alternativas (no más de 5-7) • Mostrar la etiqueta de la propiedad relacionada • No deben tener relacionadas acciones automáticas (al seleccionar) • Texto adecuado y comprensible • Se puede enmarcar para reforzar su relación • Preferible posición en columna en lugar de fila (todos los círculos alineados) • Presentar una opción seleccionada por defecto Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -19- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  20. 20. 2.3.2 Selección: Opciones BOTONES DE OPCION (Check Button) Apariencia: • Cuadrado delante un texto con la opción • Cada opción actúa como valor de estado (On/Off) • Las opciones seleccionadas poseen la marca • Actúan como valores independientes entre sí Objetivo: • Definir el estado de un conjunto de atributos • No son excluyentes Uso: • Se pueden agrupar por similitud Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -20- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  21. 21. 2.3.2 Selección: Opciones BOTONES DE OPCION (Check Button) Ventajas • Fácil de usar y comprobar • Familiar Inconvenientes: • Sólo pueden asignar valores On/Off a los atributos • Consume espacio Recomendaciones • Similares a los botones de elección • No agrupar más de 7-8 opciones Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -21- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  22. 22. 2.3.3 Selección: Cajas de selección CAJAS DE SELECCION (Combo Box) Apariencia: • Entrada de texto junto un botón indicando despliegue Objetivo: • Permite elegir una opción • Puede ser editable Uso: • Al pulsar el botón, se despliegan la lista de opciones Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -22- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  23. 23. 2.3.3 Selección: Cajas de selección CAJAS DE SELECCION (Combo Box) Ventajas • Ocupa menos espacio • Número ilimitado de opciones • Flexible (permite introducir nuevas opciones) Inconvenientes: • Un numero elevado de opciones es difícil de ver (hace falta barra de desplazamiento) • Cada selección implica al menos dos click de ratón Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -23- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  24. 24. 2.3.3 Selección: Cajas de selección VARIANTES DE CAJAS DE SELECCION: Spin Box Apariencia: • Entrada de texto junto dos pequeños botones • Actúa como un dial (aumenta/disminuye valor u opción) Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -24- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  25. 25. 2.3.4 Selección: Listas LISTAS DE SELECCION (List box) Apariencia: • Caja con entradas de texto/gráfico • Puede tener barra de desplazamiento (scroll) • El elemento seleccionado en video inverso Objetivo: • Elegir entre las distintas opciones • Posibilidad de selección simple / múltiple Uso: • Selección múltiple usando combinación de ratón y teclado (Ctrl). Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -25- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  26. 26. 2.3.4 Selección: Listas LISTAS DE SELECCION (List box) Ventajas • Todas las alternativas son visibles • Visibles las selecciones • Adecuado para un numero variable de ítems Inconvenientes: • Consume espacio • Necesidad de barra de desplazamiento con muchos ítems • Puede ser difícil de encontrar el ítem (según orden) Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -26- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  27. 27. 2.3.5 Selección: Árboles LISTAS DE SELECCION (Arbol) Apariencia: • Caso especial de lista jerárquica de items • Los nodos aparecen indexados según nivel de profundidad • El elemento seleccionado en video inverso Objetivo: • Elegir un ítem (mediante agrupación jerárquica) • Selección simple Uso: • El icono/botón de la izquierda (+/-) permite desplegar/replegar los ítems Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -27- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  28. 28. 2.4 Deslizadores Apariencia: • Escala con un marcador que se desplaza • Puede tener varias representaciones • Representa un valor (numérico) continuo/discreto • Puede incorporar una regla Objetivo: • Establecer un ajuste numérico cuantitativo • Control de porcentaje • Control del desplazamiento por ventanas Uso: • Moviendo el marcador o pulsando flechas de extremos Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -28- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  29. 29. 2.4 Deslizadores Ventajas • Representación visual del valor Inconvenientes: • No es tan preciso como un valor numérico • Necesidad de precisión con el ratón Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -29- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  30. 30. 2.5 Información contextual TOOLTIP Apariencia • Caja de información descriptiva del objeto seleccionado • Forma rectangular o en forma de diálogo Uso • La información debe ser concisa y explicativa Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -30- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  31. 31. 3. Componentes especializados Apariencia Control que permite seleccionar alternativas gráficas • Forma rectangular y las opciones son descriptivas: colores, patrones o imágenes. o en forma de diálogo Uso • Selección (gráfica) de una o varias alternativas Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -31- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  32. 32. 3.1. Paleta Apariencia Control que permite seleccionar alternativas gráficas • Forma rectangular y las opciones son descriptivas: colores, patrones o imágenes. o en forma de diálogo Uso • Selección (gráfica) de una o varias alternativas Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -32- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  33. 33. 3.2. Selector fecha/hora (DateTime Picker) Apariencia Control que permite visualiza un selector de fecha en un mes. Puede incorporar otros controles (botones) para cambiar de mes/año. Uso • Se pulsa para desplegar el selector del mes (a veces permite introducir la fecha manualmente) Ventajas • Evita errores en la fecha (incorrectas) Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -33- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  34. 34. 3. Patrones Identificar patrones y ejemplos http://ui-patterns.com http://designinginterfaces.com/patterns/ http://www.welie.com/patterns/ Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada -34- 2006 - Miguel Gea Dpt. Lenguajes y Sistemas Informáticos

×