Seminario: componentes de un Interfaz de usuario
-
Upload
miguel-gea -
Category
Education
-
view
822 -
download
1
description
Transcript of 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
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
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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’)
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-5-
BARRA DE ESTADO (Status bar)o Información sobre el contenido de la ventanao Ver / ocultar
1.2 Elementos de las Ventanas: Barras
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-7-
PESTAÑAS (Tabs)o Indicador de paneles apilados
1.4. Elementos de las Ventanas: Pestañas
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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ú
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-10-
2.1 Botones (Buttons)
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
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
2.1 Botones (Buttons)
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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)
2.2 Cajas de edición (TextArea/TextField)
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
2.2 Cajas de edición (TextArea/TextField)
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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)
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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)
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
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
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
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
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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í
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
2.3.3 Selección: Cajas de selección
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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)
2.3.3 Selección: Cajas de selección
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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).
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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)
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
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
Uso • Selección (gráfica) de una o varias alternativas
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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
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
Uso • Selección (gráfica) de una o varias alternativas
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-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)
2006 - Miguel GeaDpt. Lenguajes y Sistemas Informáticos
Diseño de Interfaces de Usuario ETSI Ingeniería Informática. Universidad de Granada
-34-
3. Patrones
Identificar patrones y ejemplos
http://ui-patterns.com
http://designinginterfaces.com/patterns/
http://www.welie.com/patterns/