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

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