Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Seminario: componentes de un Interfaz de usuario

2,511 views

Published on

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

Published in: Education
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

×