Seminario Guia de estilos de windows  2013
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Seminario Guia de estilos de windows 2013

on

  • 673 views

Seminario sobre las características de las guías de estilos de los distintos sistemas operativos y sistemas de ventanas.

Seminario sobre las características de las guías de estilos de los distintos sistemas operativos y sistemas de ventanas.

Statistics

Views

Total Views
673
Views on SlideShare
268
Embed Views
405

Actions

Likes
0
Downloads
7
Comments
0

2 Embeds 405

http://utopolis.ugr.es 399
http://webcache.googleusercontent.com 6

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 1) Incorrecto: a warning icon is incorrectly used for a question that doesn&apos;t involve potential loss of data or system access. <br /> 2) Use icons to help users recognize the object in question. the object&apos;s icon helps users recognize the type of file being opened or saved. <br /> 3) botón Aceptar no está correctamente centrada. <br /> 4) Sí y No son buenas respuestas a las preguntas de sí y no, pero las respuestas específicas son aún mejores. <br />
  • 1) Incorrecto: a warning icon is incorrectly used for a question that doesn&apos;t involve potential loss of data or system access. <br /> 2) Use icons to help users recognize the object in question. the object&apos;s icon helps users recognize the type of file being opened or saved. <br /> 3) botón Aceptar no está correctamente centrada. <br /> 4) Sí y No son buenas respuestas a las preguntas de sí y no, pero las respuestas específicas son aún mejores. <br />

Seminario Guia de estilos de windows 2013 Presentation Transcript

  • 1. Guía estilos de Windows Diseño de Interfaces de Usuario Guía de estilo del IU Windows User Experience Interaction Guidelines 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 Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 1 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 2. Guía estilos de Windows Contenido 1. 2. 3. 4. Directrices generales y principios de diseño Texto y estilo Controles Ordenes: Menús, Barra de herramientas, Cintas 1. Mensajes: Errores, Advertencias, Confirmaciones, Notificaciones 1. Interaction: Teclado, Ratón y punteros, Gestos 1. Ventanas Ventana de Administración de, Marcos de ventana, Cuadros de diálogo, Wizards, De propiedad de Windows • Apariencia visual Disposición, Fuentes, Color, Iconos, Animaciones y transiciones, Elementos gráficos, Sonido Experiencias • • Experiencia Entorno de Windows Referencia: http://msdn.microsoft.com/en-us/library/aa511331.aspx http://msdn.microsoft.com/en-us/library/windows/desktop/aa511440.aspx Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 2 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 3. Guía estilos de Windows 1. Directrices generales http://msdn.microsoft.com/en-us/library/aa511331.aspx Top Guidelines violations Ventanas [001] Soporte a la resolución mínima (efectiva) de Windows de 800x600 píxeles. En interfaces de usuario crítico (IU), que  deben trabajar en modo seguro, el apoyo a una resolución efectiva de 640x480 píxeles.  [002] Optimizar los diseños de tamaño variable de ventana para una resolución efectiva de 1024x768 píxeles. Cambiar  automáticamente el tamaño de estas ventanas para resoluciones de pantalla más baja de una manera que sigue siendo funcional. [003] Si una ventana es contextual, siempre que se muestre cerca del objeto de donde es llamada, con un pequeño  desplazamiento hacia abajo y la derecha para que el objeto no sea cubierto por la ventana. Texto [004] Utilizar terminología adecuados de la tarea. Concéntrese en los objetivos del usuario, no la tecnología. Esto es  especialmente efectivo cuando se explica un concepto complejo técnico o acción. Imagínate mirando por encima del hombro del  usuario al explicarle cómo realizar la tarea. [005] Estilo cortés y de apoyo. El usuario nunca debe sentirse herido, culpable, o enojado. [006] Eliminar texto redundante. Eliminar texto redundante. Por lo general, dejar el texto completo en las instrucciones  principales y los controles interactivos, y eliminar cualquier redundancia de los otros lugares. [007] Títulos de etiquetas con letra inicial sólo en mayúscula. Nunca todo mayúsculas Controles [008] Etiquetar cada control o grupo de controles. Excepciones: Los cuadros de texto y listas desplegables pueden ser  etiquetados con instrucciones.  [009] Para todos los controles, seleccionar el más seguro (para evitar pérdida de datos), y el valor más seguro por defecto. Si la seguridad no es un factor vital, seleccione el valor más probable o conveniente. [010] Prefieren controles limitados. Utilice los controles (como las listas de restricciones y controles deslizantes) siempre que  sea posible, en lugar de los controles sin restricciones, como cuadros de texto, para reducir la necesidad de entrada de texto. [011] Reconsiderar los controles deshabilitados. Pueden ser difíciles de utilizar si no se entiende la causa.  [012] Los botones de acción deben tener el siguiente orden:                         OK / [hacerlo] / Sí - [No lo hagas] / No Cancelar           donde [hacerlo] y [No lo hagas] son respuestas concretas a la instrucción principal. Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 3 Aplicar (si existe) Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 4. Guía estilos de Windows 1. Directrices generales http://msdn.microsoft.com/en-us/library/aa511331.aspx Top Guidelines violations Mensajes de error [013] No usar las confirmaciones innecesarias. Uso de confirmaciones cuando puede haber una  razón clara en la intención del  usuario para no continuar con la acción. como por ejemplo a) una acción que no se puede deshacer, b) consecuencias que puede  desconocer el usuario Mensajes de advertencias [014] Describe una condición que podría causar un problema en el futuro. Advertencias no son ni errores ni preguntas,  por lo que no use esos conceptos en la frase de advertencia. [015] No ofrecer mensajes de advertencia si no se da la posibilidad al usuario de cambiar de intención. Si no hay alternativas, no  poner mensaje Confirmaciones [016] Se debe responder la frase como un sí o un no. A diferencia de otros tipos de cuadros de diálogo, las confirmaciones se  han diseñado para evitar que los usuarios tomen decisiones rápidas. Si los usuarios no piensan acerca de su respuesta, la  confirmación no tiene ningún valor. Iconos [017] Elige iconos estándar basado en su tipo de mensaje, no la gravedad de la cuestión de fondo: de error (Un error o un  problema que se ha producido), advertencia. (una condición que podría causar un problema en el futuro), Información.  (Información de interés). Ayuda [018] No pongas enlaces de ayuda en cada ventana o página por coherencia. Coloque un vínculo de ayuda en un lugar  significativo, no es necesario que se tenga que poner en todas partes. Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 4 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 5. Guía estilos de Windows 2. Estilo del Texto http://msdn.microsoft.com/en-us/library/aa511331.aspx Texto debe ser comprensible para una interfaz de usuario efectiva.  [201] Eliminar el texto redundante. Por lo general, dejar el texto completo en las instrucciones principales y los controles  interactivos, y eliminar cualquier redundancia en el resto de lugares. [202] Evite grandes bloques de texto de la IU. La forma  de hacer esto es: Fragmentar el texto en frases más cortas y  párrafos. Cuando sea necesario, proporcionar enlaces de ayuda para útil pero no esencial. [203] Utilice el título con letra inicial en mayúscula, en las oraciones y en  todos los elementos de interfaz de usuario. [204] Use verbos específicos siempre que sea posible verbos específicos (por ejemplo: conectar, guardar, instalar) son más  significativos para los usuarios que los genéricos (por ejemplo: configurar, administrar, configurar). Texto en titulo de la barra [205] El texto del título de la barras debe identificar una ventana o el cuadro de diálogo.  Etiquetas comunes de acciones [206] Aceptar  (OK): En cuadros de diálogo: aplicar los cambios, aceptar la tarea y cerrar ventana. [207] Sí / No (Yes/No) : Respuesta a una pregunta. No se debe usar Aceptar/Cancelar para preguntas que se responden con  Sí/No [208] Cancelar (Cancel) : En cuadros de diálogo cuando se descartan todos los cambios o  volver al estado anterior (dejando  sin efecto la acción actual), o cerrar la ventana. Efecto de deshacer los posibles cambios. Para los cambios que no se puede  descartar, utilice Cerrar.Para las acciones de progreso que se puede detener, utilice Detener (Stop) [209] Cerrar (Close). Cierre de la ventana. Para cualquier cambio o efectos secundarios que no se pueda descartar. [210] Parar (Stop). Detener una tarea actualmente en ejecución y cerrar la ventana. Cualquier trabajo en progreso o efectos  secundarios que no se pueden descartar. [211] Aplicar (Apply). En las hojas de propiedades, se usa para aplicar cambios pendientes. Sólo en ese caso.  [212] Siguiente (Next). En los asistentes y las tareas en varias fases: avanza a la siguiente etapa sin finalizar  la tarea. [213] Terminar (Finish). En asistentes y las tareas de varias fases: cerrar la ventana. Realizar la tarea si no se había terminado. [214] Hecho (Done). No se aplica, no debe usarse  Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 5 5 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 6. Guía estilos de Windows botones, verificación, radio 3.Controles Botones Elemento para realizar inmediatamente una acción.  [301] Si el botón de comando aparece en varias ventanas, usar misma etiqueta y ubicación. [302] Evite combinar las etiquetas de texto e iconos en los botones de comando. Esta combinación por lo general agrega  desorden visual innecesario[303] En caso que  el botón no realice una acción directa, sino que requiera más información  adicional (pantalla de confirmación) se añaden puntos suspensivos.  [304]  Trate de trabajar con un tamaño adecuado del botón (ancho x alto), más profesional Casillas de verificación En una casilla de verificación, el usuario toma una decisión entre diferentes opciones (claramente opuestas).La etiqueta  indica el estado seleccionado. Este control se debe utilizar solamente para activar o desactivar un elemento [305] ¿El usuario puede elegir varias opciones? Si es así, usar grupo de casillas de verificación y manejar el error,  cuando ninguna de las opciones esté seleccionadas. [306] Número recomendable de opciones? El espacio de la pantalla utilizada es proporcional a la cantidad de  opciones, mantener el número de casillas de verificación a 10 o menos. En caso de más, considerar un cuadro de lista  de verificación [307] Utilice botones de radio, si el significado de la casilla de verificación desactivada no es completamente obvio.  Botones de radio Elección entre un conjunto de excluyentes entre sí de opciones relacionadas [308] ¿Mejor opción: lista desplegable o botones radio? Considere el uso de una lista desplegable si no quiere llamar la  atención sobre las opciones (la seleccionada es la recomendable en la mayoría de casos), o no quiere animar a los usuarios para  realizar cambios. La lista desplegable se centra en la selección actual, mientras que los botones de radio destacar todas las  opciones por igual. [309] Lista de las opciones en un orden lógico, frecuencia o riesgo de menos o más. El orden alfabético no es recomendable,  ya que depende del idioma y por lo tanto no localizable.[310] Si ninguna de las opciones es una opción válida, añada otra  opción para reflejar esta elección, como ninguno o no se aplica.[311] Alinear botones verticalmente en vez de horizontalmente.  Alineación horizontal es más difícil de leer y localizar. [312] Reconsiderar el uso de cuadros de grupo para organizar grupos de botones de radio Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 6 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 7. Guía estilos de Windows 3.Controles Listas desplegables y cuadros de lista Con una lista desplegable o un cuadro combinado, los usuarios elegir entre una lista de valores mutuamente excluyentes.Los usuarios pueden elegir una y sólo una opción. Con un estándar en la lista desplegable, los usuarios se limitan a las opciones de la lista, pero con un cuadro combinado que puedan entrar en una elección que no está en la lista. [331] No usar lista desplegable o cuadro combinado para ejecutar órdenes, mostrar otras ventanas (disparar acciones) [332] Ordenar los elementos de lista en un orden lógico, tales como la agrupación de opciones muy relacionados entre sí, poniendo primero las opciones más comunes, o por orden alfabético.[333] Opciones que representan a “todos” o “ninguno” (meta opciones) al principio de la lista, seleccionadas y con paréntesis [334] Incluir etiqueta delante del combo como una palabra o frase, no como una oración, para finalizar con dos puntos. Excepciones en barras de menú. Se puede incluir indicaciones dentro del combo, en tales casos con letra diferenciada (itálica) [335] Si requieren interacción constante, es preferible una lista de selección única para simplificar la interacción Un cuadro de lista, los usuarios pueden seleccionar entre un conjunto de valores que se presentan en una lista que está siempre visible[336] Un cuadro de lista es una elección adecuada, independientemente del número de elementos [337] Si tiene la lista requieren interacción constante utilice una lista para simplificar la interacción. [338] Orden lógico: frecuente/relacionado/alfabéfico [339] Adecuado para Opción única o múltiples opciones seleccionadas [339] Evitar el desplazamiento horizontal Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 7 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 8. Guía estilos de Windows 3.Controles pestañas y caja de grupo Las pestañas proporcionan una manera de presentar la información relacionada en páginas separadas y etiquetadas. [341] Se usa con más frecuencia para preferencias, pero se puede aplicar en cualquier parte [342] No usar si si a) los controles caben en una sola página a un tamaño razonable, b) sólo hay una pestaña [343] Usar pestañas horizontales si tiene menos de 7 ficha, en caso contrario pestañas verticales (en lista) [344[ Evitar desplazamiento por pestañas con flecha de “más”. [345] Cuando los controles se aplican sólo a una pestañas, colocarlos dentro, en el borde de la página con pestañas. Si se aplican a todas, ponerlos fuera. Una caja de grupo es un marco con etiqueta rectangular que rodea a un conjunto de controles relacionados. Un cuadro de grupo es una forma de mostrar visualmente las relaciones, para un grupo de controles, que no proporciona ninguna funcionalidad. UN uso excesivo incorpora desorden visual y reduce el espacio disponible en una pantalla [346] Evitar anidamiento entre cuadro de grupo. Aplicar a nivel de layout [347] Etiquetar todos los cuadros de grupo. [348] Debe agrupar a más de un control en el grupo. Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 8 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 9. Guía estilos de Windows 4.1 Ordenes: menús http://msdn.microsoft.com/en-us/library/aa511331.aspx Menús Un menú es una lista de comandos y opciones disponibles para los usuarios. Los menús desplegables aparecen cuando se pulsa con el clic del ratón, y se ocultan cuando sales. Son un medio eficaz para conservar espacio en la pantalla. Un menú en cascada es un menú secundario que aparece en la demanda dentro de un menú. Se indica con una flecha al final de la etiqueta submenú. Un elemento de menú es un comando individual o una opción en un menú. Los menús se muestran a partir de una barra de menú, que es una lista de categorías de menú que se encuentra en la parte superior de una ventana. Por el contrario, un menú contextual se despliega cuando el usuario realiza una acción. Barra de menú [401] De debe usarse cuando: es una ventana principal, hay muchas opciones/categorías, la mayoría de los elementos del menú son aplicables durante todo el programa. [402] Considerar la eliminación de la barras de menús con tres o menos categorías del menú a alternativas más ligeras como la barra de herramientas, botones o enlaces. [403] No colocar más de 10 categorías de menú. Demasiadas categorías es abrumadora y hace la barra de menú difícil de usar [405] Posibilidad de ocultar la barra de menú, si la barra de herramientas o comandos directos proporcionan casi todos los comandos necesarios para la mayoría de los usuarios. [406] Categorías del barra de menú: Seleccionar nombres de una sola palabra de las categorías del menú. El uso de varias palabras hace que la separación entre las categorías confusas. [407] Categorías de programas sobre documentos. Uso del menú estándar de categorías como Archivo, Editar, Ver, Herramientas y Ayuda.Para otros tipos de programas, la posibilidad de organizar los comandos y opciones en la más útil, categorías naturales basado en el propósito de su programa y la forma como los usuarios piensan acerca de sus tareas y objetivos. No se sienta obligado a utilizar la organización de los menús estándar, si no es adecuado para su programa. [408] Organizar los menú en grupos de siete o menos elementos estrechamente relacionados. No coloque más de 25 elementos en un único nivel de un menú. Poner separadores (una línea que atraviesa la anchura del menú) entre los grupos dentro de un menú. [409] Dentro de un menú, poner a los grupos en su orden lógico. Si no hay un orden lógico, el lugar de los grupos más frecuentemente utilizados en primer lugar. [410] Evite el uso de submenús innecesariamente (requieren más esfuerzo físico para su uso). No coloque los elementos de menú de uso frecuente en un submenú. Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 9 9 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 10. Guía estilos de Windows http://msdn.microsoft.com/en-us/library/aa511331.aspx 4.1 Ordenes: menús Menús alternativos • Menú de barra de herramientas (1). Una barra de herramientas con acciones directas y botones de menús (híbrida). Las opciones que son menú aparece con una flecha (indicando que es desplegable) • Menú de contexto (2). Menús desplegables que muestran un pequeño conjunto de comandos y opciones relacionadas con el contexto actual • Menú de panel de tareas (3). Conjunto de órdenes relacionados con el objeto seleccionado en una pantalla auxiliar. (2) (2) (3) (1) Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 10 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 11. Guía estilos de Windows 4.2. Ordenes: barra Barra de herramientas herramientas http://msdn.microsoft.com/en-us/library/aa511331.aspx Una barra de herramientas es una representación gráfica de las órdenes optimizado para su acceso eficiente. Se puede usar las barra de herramientas, como complemento o en sustitucion de la barra de menú. Son más eficiente porque son accesos directos (sin necesidad de abrir menú y seleccionar), inmediata, y contienen las funciones más utilizados. Deben ser rápidas, adecuadas y eficientes. Algunas barras de herramientas son personalizables, permiten añadir o eliminar funciones, cambiar su tamaño y ubicación, e incluso cambiar su contenido. Algunos tipos de barras de herramientas pueden ser desacopladas, lo que la convierte en una ventana de paleta. Estilos: • Iconos sin etiquetar. Una o varias filas de pequeños botones de iconos sin etiquetar. • Grandes iconos sin etiquetar. Una sola hilera de botones grandes iconos sin etiquetar, fácilmente reconocibles. • Iconos etiquetados. Una sola hilera de pequeños iconos etiquetados (órdenes poco frecuentes) • Barra parcial cuando no es necesaria una barra completa. •Paleta de botones con modo (seleccionado) [411] Frecuencia. Barras de herramientas presentes sólo los comandos más utilizados, mientras que las barras de menús catalogan todos los disponibles. [412] Tamaño y presentación. Para empaquetar muchos comandos en un pequeño espacio, por lo general se debe usar iconos (con texto opcional), [413] Los iconos deben ser reconocibles y distinguibles. [414] Se permite (por evitar redundancias y eficiencia) usar únicamente barra de herramientas en lugar de menús. [415] Colocación de las barras de herramientas justo encima del área de contenido, por debajo de la barra de menús y barra de direcciones, si está presente. Diseño de disponer más de 3 barras de Miguel Gea [416] NoInterfaces de Usuario. http://utopolis.ugr.es/diu herramientas (con sólo iconos). Incluir etiquetas en iconos importantes o difíciles de recordar 11 11 ETSI Ingeniería Informática. Universidad de Granada Dpt. Lenguajes y Sistemas Informáticos
  • 12. Guía estilos de Windows 5. Mensajes: tipología [501] Errores. Un mensaje de error informa a los usuarios de un problema que ya ha ocurrido. Los mensajes de error se puede presentar como cuadros de diálogo modales, en lugar de mensajes, notificaciones, o globos. Debe informar a los usuarios que se produjo un problema, explicar por qué sucedió, y proporcionar una solución para que los usuarios pueden solucionar el problema. Los usuarios deben realizar una acción o cambiar su comportamiento como resultado de un mensaje de error. [502] Advertencias. un mensaje de advertencia alerta a los usuarios de una condición que podría causar un problema en el futuro. Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 12 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 13. Guía estilos de Windows 5. Mensajes: tipología [503] Confirmaciones La confirmación es un cuadro de diálogo modal que pregunta al usuario si desea continuar con una acción. Las principales características son: •Se muestran como el resultado directo de una acción iniciada por el usuario. •Se comprueba si el usuario desea continuar con la acción. •Se componen de una pregunta sencilla con una o varias posibles respuestas [504] Notificaciones La notificación informa a los usuarios de los eventos que no están relacionados con la actividad del usuario actual. La notificación puede resultar de una acción del usuario o de sucesos del sistema significativos. La información contenida en la notificación es útil y pertinente, pero no crítico. En consecuencia, las notificaciones no requieren la acción inmediata del usuario y los usuarios pueden libremente ignorar. Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 13 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 14. Guía estilos de Windows 6. Interacción Teclado El teclado es el dispositivo de entrada principal para la introducción de texto. Para la accesibilidad y mejorar la la eficiencia, la mayoría de acciones se pueden realizar usando el teclado. También puede haber teclado virtual. [601] Las teclas de acceso (access keys) son combinaciones de teclas que permiten realizar todas las funciones y acceso a elementos de menú mediante el teclado para mejorar la accesibilidad. Windows subraya la palabra de acceso. Visualmente, se activan cuando se pulsa la tecla Alt [602] Las teclas de atajo (shorcut keys) son combinaciones de teclas utilizadas por usuarios avanzados para realizar con más eficiencia las órdenes mas comunes. Se utilizan principalmente Ctrl y las secuencias de teclas de función (teclas de acceso directo de Windows del sistema también se utiliza Alt + no alfanuméricos llaves y la tecla del logotipo de Windows). Se trata principalmente de la eficiencia para los usuarios avanzados. Se les asigna sólo a los comandos más utilizados. Como están pensadas para memorizarse, la se debe escoger una combinación de teclas con la primeras letra de la palabras clave ( Ctrl + C para copiar). [603] Elementos de navegación con el teclado Los usuarios interactúan con una ventana utilizando el teclado para navegar por los controles, hacer selecciones, y ejecutar comandos. Los siguientes elementos trabajan juntos para hacer que esto suceda. El foco de entrada. Indica con un rectángulo de puntos (rectángulo de selección) el elemento actualmente • seleccionado. Tecla de tabulación y las tabulaciones. La tecla Tab es el mecanismo principal para la navegación dentro de una • ventana. Todos los controles interactivos deben tener tabuladores (a menos que estén en un grupo), mientras que los no controles interactivos, tales como etiquetas, no se debe. El orden de tabulación. Todos los controles con los tabuladores son visitados en el orden de tabulación. Al pulsar Tab • el foco de entrada se mueve al siguiente control en el orden de tabulación, mientras que pulsando Shift + Tab de entrada mueve el foco al control anterior. Se puede tener un grupo de elementos de control asociados a una única tabulacion. Internamente se usan las • flechas. Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 14 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 15. Guía estilos de Windows 7. Ventanas Barra de título de los controles [701] Cerrar. Todas las ventanas de primaria y secundaria con un marco de ventana estándar debe tener un botón Cerrar en la barra de título. Al hacer clic en Cerrar tiene el efecto de cancelar o cerrar la ventana. [702] Reducir al mínimo. Todos los principales ventanas y de larga duración modal secundaria ventanas (como los diálogos de progreso) debe tener un botón Minimizar. Al hacer clic en Minimizar reduce la ventana a su botón de la barra de tareas. En consecuencia, las ventanas que pueden ser minimizados requieren un icono de la barra de título. [703] Maximizar / Restaurar. Todas las ventanas de tamaño variable debe tener un Maximizar / Restaurar botón. Al hacer clic en Maximizar muestra la ventana en su tamaño más grande (a pantalla completa), mientras que haciendo clic en Restaurar abajo vuelve a su tamaño anterior. Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 15 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 16. Guía estilos de Windows 7.1. Cuadros de diálogo Un cuadro de diálogo es una ventana secundaria que permite a los usuarios ejecutar un comando, contestar una pregunta, o proporcionar realimentación de la información en progreso. Los cuadros de diálogo consiste en una barra de título (para identificar el comando, función o programa en el que un cuadro de diálogo viene), una instrucción principal (con icono opcional) para explicar el objetivo del usuario con el cuadro de diálogo, área de contenido con información descriptiva de los controles, área de controles (con distintos botones de confirmación para indicar cómo el usuario se compromete con la tarea). El área de pie de página para explicación adicional opcional y ayuda, por lo general dirigido a usuarios con menos experiencia. Tipos: •Modal. Se requiere completar y finalizar para seguir con aplicación •No modal (se puede alternar con otras ventanas) [721] No usar cajas de diálogo que requieren el uso de una barra de desplazamiento para verse completamente durante su uso normal. En tal caso, rediseñar para incluir pestañas . [722] Los cuadros de diálogo no tienen barra de títulos (con iconos) [723] Los cuadros de diálogo siempre tienen un botón Cerrar. En el botón Cerrar en la barra de título debe tener el mismo efecto que el botón Cancelar o el botón Cerrar en el cuadro de diálogo. Nunca el mismo efecto que Aceptar. [724] Se puede considerar el uso de iconos significativos de la aplicación para ayudar al usuario en la respuesta. Es efectivo cuando el icono es facilmente reconocible Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 16 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 17. Guía estilos de Windows 7.2. Ventanas > Cuadros de diálogo comunes [725] Cuadro de diálogo más frecuentes apropiado para tareas específicas de abrir/guardar, imprimir, seleccionar un atributo (fuente, color), buscar, identificación. Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 17 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 18. Guía estilos de Windows 7.2. Ventanas > Cuadros de diálogo AcercaDe [726] Cuadro de diálogo AcercaDe, ayuda con la información de la aplicación. Uso del icono de la aplicación. Debe de accederse siempre desde el menú de Ayuda de la aplicación. •Debe aparecer en el nombre de la ventana la frase: “Acerca de NombreAplicación” •En el texto, por orden: •Nombre oficial de la aplicación •Versión •Copyright •Puede incluir información sobre licencias •Boton con la opción OK/Aceptar Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 18 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 19. Guía estilos de Windows 7.3. Ventanas > Propiedades Las ventanas de propiedades se utilizan para ver y cambiar las propiedades de un objeto (o una colección) en un cuadro de diálogo, o panel. Por lo general se da soporte a varias tareas (desplegadas en pestañas) [727] Necesarias. A menudo se convierten en un vertedero de una variedad de propiedades relacionadas con la tecnología de configuración. Con demasiada frecuencia, se organizan en fichas. Asegurar que son necesarias y en un lenguaje de usuario. [728] Se activa sobre un objeto cuando se pulsa ALT-Enter [729] Utilice las pestañas verticales si la ventana de propiedades tiene más de 8 fichas o tiene más de una fila de pestañas. Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 19 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 20. Guía estilos de Windows 7.3. Ventanas > Asistentes (wizards) Las ventanas de asistentes se utilizan para realizar tareas de varios pasos. Los Asistentes suelen incluir los siguientes tipos de páginas: Páginas de elección para reunir información y permitir a los usuarios a tomar decisiones, La página de confirmación para realizar una acción que no se puede deshacer (confirmando con clic en Atrás o Cancelar). Página Progreso se utiliza para mostrar el progreso de una operación larga. [727] Todas las páginas del asistente tiene los siguientes componentes: Una barra de título para identificar el nombre del asistente, con un botón de Atrás en la esquina superior izquierda, y un botón de cierre con la opción de Minimizar / Maximizar y restauración de los botones. Tenga en cuenta que la barra de título también incluye un icono para identificar en la barra de tareas. Una instrucción principal para explicar el objetivo del usuario con la página. Un área de contenido con texto opcional y posiblemente otros controles. Un área de comando con al menos un botón de continuar con la tarea o pasar a la etapa siguiente. Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 20 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 21. Guía estilos de Windows Ventanas cuadros de diálogo. Ejemplos 1) Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 21 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos
  • 22. Guía estilos de Windows Referencias (guías de estilo) ‣ UI Style Guides: recopilación http://www.experiencedynamics.com/science-usability/ui-style-guides ‣ Guías de estilo para diseño de interfaces web: recopilación http://almacenplantillasweb.es/2010/08/guias-de-estilo-para-diseno-de-interfaces-web/ ‣ Windows User Experience Interaction Guidelines http://msdn.microsoft.com/en-us/library/windows/desktop/aa511440.aspx ‣ OS X Human Interface Guidelines. https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines ‣ Android Ice Cream Sandwich User Interface Guidelines. http://developer.android.com/design/index.html ‣ iPhone Human Interface Guidelines. IOS7 https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html ‣ Gnome Human Interface Guidelines. https://developer.gnome.org/hig-book/stable/ Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diu ETSI Ingeniería Informática. Universidad de Granada 22 Miguel Gea Dpt. Lenguajes y Sistemas Informáticos