seminario: componentes de un interfaz de usuario

Componentes (widgets)para el diseño

de Interfaces de Usuario

Diseño de Interfaces de Usuario

SEMINARIO

W. Galitz, The Essential Guide to User Interface Design, Wiley 2002

Miguel Gea ([email protected])Dpt. Lenguajes y Sistemas InformáticossGrado en Ingeniería InformáticaUniversidad de Granadahttp://utopolis.ugr.es/diu 14 Octubre, 2013

http://www.slideshare.net/mgea/seminario-03-componentes-de-un-interfaz-de-usuario

mailto:[email protected]

2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada

-2-

Barra de título MenúBarra de herramientas (Toolbar)Barra de estadoPaneles (internos)Decoración

1. Ventanas: Estructura

Composición



-3-

MENU Composición

o Barra de menú (menubar)o Menu desplegable (Drop-down / Pull-down)o Ubicación: Parte superior ventana

Acceso por tecladoo Alt+letra (mnemónico)o Combinación teclas (aceleradores/atajos)

Elementos menúo Items (botones) o Orden: Archivo Edición (cortar, copiar, pega) … Ayuda

1.1 Elementos de las Ventanas: Menú

menubar

Mnemonic (ALT + ‘A’)

Accelerator (CTR + ‘A’)



-4-

BARRA DE HERRAMIENTAS (ToolBar)

Estilo (Libres, Pegadas)o Poseen una parte activa en su parte izda. para manejarla (mover, pegar)

1.2 Elementos de las Ventanas: Barras



-5-

BARRA DE ESTADO (Status bar)o Información sobre el contenido de la ventanao Ver / ocultar

1.2 Elementos de las Ventanas: Barras



-6-

Paneleso Separación lógica de la ventana en partes independienteso Ver / ocultaro Pueden ser dimensionables (movibles)

1.3 Elementos de las Ventanas: Paneles

Divisor



-7-

PESTAÑAS (Tabs)o Indicador de paneles apilados

1.4. Elementos de las Ventanas: Pestañas



-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



-9-

2.1 Botones (Buttons)

Apariencia:Forma: rectangular o cuadrada Etiqueta: Texto y/o imagenApariencia: 3D / pulsado - resaltado

Apariencia:Forma: rectangular o cuadrada Etiqueta: Texto y/o imagenApariencia: 3D / pulsado - resaltado

Objetivo:• Iniciar una acción (aplicar)• Cambio de propiedades (On/Off) • Mostrar menú

Objetivo:• Iniciar una acción (aplicar)• Cambio de propiedades (On/Off) • Mostrar menú

Uso:• Individual (relacionados)• Barra de herramientas• Menú

Uso:• Individual (relacionados)• Barra de herramientas• Menú



-10-


Ventajas • Siempre visible (recordatorio)• Organización dentro de la ventana• Realimentación visual (efecto de pulsar)• Uso de equivalente por teclado

Ventajas • Siempre visible (recordatorio)• Organización dentro de la ventana• Realimentación visual (efecto de pulsar)• Uso de equivalente por teclado

Inconvenientes:• Consume espacio (pantalla)• Su tamaño limita el máx visible• Requiere mover puntero para seleccionar • Fijarse en el icono

Inconvenientes:• Consume espacio (pantalla)• Su tamaño limita el máx visible• Requiere mover puntero para seleccionar • Fijarse en el icono

Características

Foco



-11-

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

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




-12-

2.1 Botones con estado

Ventajas • Representan un valor binario (on / off)• Efecto de pulsar para activar / desactivar

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

Inconvenientes:• Se puede confundir con un botón convencional• Se debe distinguir visualmente los dos estados



-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 contenidoUna/múltiples líneasFormado por etiqueta y caja de texto

Apariencia:Forma: rectangular o cuadrada Edición texto (activa o no)Incluye Etiqueta (Caption) indicando su contenidoUna/múltiples líneasFormado por etiqueta y caja de texto

Objetivo:• Mostrar/modificar texto• De una sola línea o caja

Objetivo:• Mostrar/modificar texto• De una sola línea o caja



-14-

Ventajas • Flexible• Familiar• Consume poco espacio

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)

Inconvenientes:• Necesidad de teclado como modo de entrada• Realimentación para indicar que está activo (foco de edición)




-15-

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

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




-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

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)

Tipos:• Botones de elección (Radio-Button)• Botones de opción (Check-Button)• Cajas de Selección (Combo-Box)• Listas (list)• Arbol (tree)



-17-

2.3.1 Selección: Elección (excluyente)

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

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

Objetivo:• Realizar una elección entre diferentes alternativas

Uso:• Agrupación de varios botones de elección

Uso:• Agrupación de varios botones de elección

BOTONES DE ELECCION (Radio Button)



-18-



Ventajas • Fácil de acceder a las opciones• Fácil de comparar • Intuitivo para el usuario

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

Inconvenientes:• Consume espacio de pantalla • Uso para un número limitado de opciones• Tamaño del área circular de selección



-19-



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

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



-20-

2.3.2 Selección: Opciones

Objetivo:• Definir el estado de un conjunto de atributos• No son excluyentes

Objetivo:• Definir el estado de un conjunto de atributos• No son excluyentes

Uso:• Se pueden agrupar por similitud

Uso:• Se pueden agrupar por similitud

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í

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í



-21-

BOTONES DE OPCION (Check Button)

Ventajas • Fácil de usar y comprobar• Familiar

Ventajas • Fácil de usar y comprobar• Familiar

Inconvenientes:• Sólo pueden asignar valores On/Off a los atributos• Consume espacio

Inconvenientes:• Sólo pueden asignar valores On/Off a los atributos• Consume espacio

2.3.2 Selección: Opciones

Recomendaciones• Similares a los botones de elección• No agrupar más de 7-8 opciones

Recomendaciones• Similares a los botones de elección• No agrupar más de 7-8 opciones



-22-

CAJAS DE SELECCION (Combo Box)

Objetivo:• Permite elegir una opción • Puede ser editable

Objetivo:• Permite elegir una opción • Puede ser editable

Uso:• Al pulsar el botón, se despliegan la lista de opciones

Uso:• Al pulsar el botón, se despliegan la lista de opciones

Apariencia:• Entrada de texto junto un botón indicando despliegueApariencia:• Entrada de texto junto un botón indicando despliegue

2.3.3 Selección: Cajas de selección



-23-

CAJAS DE SELECCION (Combo Box)

Ventajas • Ocupa menos espacio• Número ilimitado de opciones• Flexible (permite introducir nuevas opciones)

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

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




-24-

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)

Apariencia:• Entrada de texto junto dos pequeños botones• Actúa como un dial (aumenta/disminuye valor u opción)




-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

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

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

Uso:• Selección múltiple usando combinación de ratón y teclado (Ctrl).



-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

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)

Inconvenientes:• Consume espacio• Necesidad de barra de desplazamiento con muchos ítems • Puede ser difícil de encontrar el ítem (según orden)



-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

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

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

Uso:• El icono/botón de la izquierda (+/-) permite desplegar/replegar los ítems



-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

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

Objetivo:• Establecer un ajuste numérico cuantitativo• Control de porcentaje• Control del desplazamiento por ventanas

Uso:• Moviendo el marcador o pulsando flechas de extremos

Uso:• Moviendo el marcador o pulsando flechas de extremos



-29-

Ventajas • Representación visual del valor

Ventajas • Representación visual del valor

Inconvenientes:• No es tan preciso como un valor numérico • Necesidad de precisión con el ratón

Inconvenientes:• No es tan preciso como un valor numérico • Necesidad de precisión con el ratón

2.4 Deslizadores



-30-

Apariencia • Caja de información descriptiva del objeto seleccionado• Forma rectangular o en forma de diálogo

Apariencia • Caja de información descriptiva del objeto seleccionado• Forma rectangular o en forma de diálogo

2.5 Información contextual

TOOLTIP

Uso • La información debe ser concisa y explicativa

Uso • La información debe ser concisa y explicativa



-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




-32-

3.1. Paleta









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

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)

Uso • Se pulsa para desplegar el selector del mes (a veces permite introducir la fecha manualmente)

Ventajas • Evita errores en la fecha (incorrectas)

Ventajas • Evita errores en la fecha (incorrectas)



-34-

3. Patrones

Identificar patrones y ejemplos

http://ui-patterns.com

http://designinginterfaces.com/patterns/

http://www.welie.com/patterns/

seminario: componentes de un interfaz de usuario

Education