seminario guia de estilos de windows 2013

1Miguel Gea

Dpt. Lenguajes y Sistemas InformáticosDiseño de Interfaces de Usuario. http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada

Guía estilos de Windows

Windows User Experience Interaction Guidelines

Diseño de Interfaces de Usuario

Guía de estilo del IU

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

http://utopolis.ugr.es/diu


2Miguel Gea



Contenido

1. Directrices generales y principios de diseño2. Texto y estilo 3. Controles4. Ordenes:

Menús, Barra de herramientas, Cintas

5. Mensajes: Errores, Advertencias, Confirmaciones, Notificaciones

6. Interaction: Teclado, Ratón y punteros, Gestos

7. VentanasVentana de Administración de, Marcos de ventana, Cuadros de diálogo, Wizards, De propiedad de Windows

• Apariencia visualDisposició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.aspxhttp://msdn.microsoft.com/en-us/library/windows/desktop/aa511440.aspx


http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511267.aspx&usg=ALkJrhhOcQ96ldwHcPG8zar49QXEjRnJRw

http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511263.aspx&usg=ALkJrhgVXsn9g8ZtSJNYkVbemNyHx7RYhA



http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511273.aspx&usg=ALkJrhjms2vZ8jWO24wPl88uoJm2LO1uNw

http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511273.aspx&usg=ALkJrhjms2vZ8jWO24wPl88uoJm2LO1uNw

http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511497.aspx&usg=ALkJrhha-VW_rKw-y7iqX7sbrSnV9sdbvA

http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/bb545460.aspx&usg=ALkJrhhGoAtUz5fvWUV6k8VFT9dR6t9Evg

http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/bb545459.aspx&usg=ALkJrhg72nVqQp2ewhhsGOzM4AESTpGISw

http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/cc872774.aspx&usg=ALkJrhg3dVfOujUrNz-8ethgsSfR-otMwQ

http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511262.aspx&usg=ALkJrhhm7mmso4c-YnJQzVKYZIFonKPAMw

http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511262.aspx&usg=ALkJrhhm7mmso4c-YnJQzVKYZIFonKPAMw

http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa974173.aspx&usg=ALkJrhhTgq77mAO8vPaQR6jr5aGn7P9GqQ

http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511268.aspx&usg=ALkJrhgygdyVGloswweNgn6DLauskbiYhg



http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511260.aspx&usg=ALkJrhgIXX0fuklUpUT7KL6PSBKDe_O9Pg

http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511266.aspx&usg=ALkJrhh1WHV5vQL25ehNhmsylzGX3LNLSg

http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511266.aspx&usg=ALkJrhh1WHV5vQL25ehNhmsylzGX3LNLSg

http://translate.google.es/translate?hl=es&sl=en&u=http://msdn.microsoft.com/en-us/library/windows/desktop/aa511328.aspx&ei=a1_VTv2tCtHa8QO_66yHAg&sa=X&oi=translate&ct=result&resnum=1&ved=0CDEQ7gEwAA&prev=/search%3Fq%3Dhttp://msdn.microsoft.com/en-us/library/aa511328.aspx%26hl%3Des%26client%3Dsafari%26rls%3Den%26prmd%3Dimvns

http://msdn.microsoft.com/en-us/library/windows/desktop/aa511440.aspx

3Miguel Gea



1. Directrices generalesVentanas[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 - Aplicar (si existe) donde [hacerlo] y [No lo hagas] son respuestas concretas a la instrucción principal.

http://msdn.microsoft.com/en-us/library/aa511331.aspx

Top Guidelines violations



4Miguel Gea



1. Directrices generalesMensajes 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.


Top Guidelines violations



5Miguel Gea



2. Estilo del TextoTexto 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


5


http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511449.aspx&usg=ALkJrhgxNXjxbvWpPG1Ie9XpUI3g_7ivjw

http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511441.aspx&usg=ALkJrhho-egLwzanDv4RFxBRxyC9ktaN8A#titleCaps

http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511441.aspx&usg=ALkJrhho-egLwzanDv4RFxBRxyC9ktaN8A#titleCaps

http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511441.aspx&usg=ALkJrhho-egLwzanDv4RFxBRxyC9ktaN8A#sentenceCaps




6Miguel Gea



3.ControlesBotonesElemento 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ónEn 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 radioElecció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

botones, verificación, radio


http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.com&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511459.aspx&usg=ALkJrhirUbc8Le_apDi9sfiz5akAVu4Ztg

7Miguel Gea



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


http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.com&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511484.aspx&usg=ALkJrhi93NEIDHyJ07p4v7cSvJeAstySnA#singleSelectionList

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dhttp://msdn.microsoft.com/en-us/library/windows/desktop/aa511482.aspx%26hl%3Des%26client%3Dsafari%26rls%3Den%26prmd%3Dimvns&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/windows/desktop/aa511484.aspx&usg=ALkJrhhJ_QnZyvImWnZe8RTRUDips9rYfA#singleSelectionList

8Miguel Gea



3.Controles pestañas y caja de grupoLas 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.


9Miguel Gea



4.1 Ordenes: menús 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ú.


9


http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/aa511502.aspx&usg=ALkJrhhtKFbbPMjgse4ZBVYz7b0vZdLL6w#standardMenus


10

Miguel GeaDpt. Lenguajes y Sistemas Informáticos

Diseño de Interfaces de Usuario. http://utopolis.ugr.es/diuETSI Ingeniería Informática. Universidad de Granada


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.


(1)

(2) (3)

(2)



11




4.2. Ordenes: barra herramientas Barra de herramientas

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.[416] No disponer más de 3 barras de herramientas (con sólo iconos). Incluir etiquetas en iconos importantes o difíciles de recordar


11



12




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.


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dhttp://msdn.microsoft.com/en-us/library/aa511328.aspx%26hl%3Des%26client%3Dsafari%26rls%3Den%26prmd%3Dimvns&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/windows/desktop/aa511267.aspx&usg=ALkJrhigpMdWUujG0YY8L8ZdVm5Y86dnIA

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dhttp://msdn.microsoft.com/en-us/library/aa511328.aspx%26hl%3Des%26client%3Dsafari%26rls%3Den%26prmd%3Dimvns&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/windows/desktop/aa511263.aspx&usg=ALkJrhgDa3EeUui2ygwiwdm7wl2P7E3_Fg



13

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




5. Mensajes: tipología

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dhttp://msdn.microsoft.com/en-us/library/aa511328.aspx%26hl%3Des%26client%3Dsafari%26rls%3Den%26prmd%3Dimvns&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/windows/desktop/aa511273.aspx&usg=ALkJrhj9tVBe8HWln3FfskL_uyKSJ6vwOg

http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dhttp://msdn.microsoft.com/en-us/library/aa511328.aspx%26hl%3Des%26client%3Dsafari%26rls%3Den%26prmd%3Dimvns&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/windows/desktop/aa511497.aspx&usg=ALkJrhhrIF7Ek-FK2hkSt4sgRaqIBh2H0g


14




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.


http://translate.googleusercontent.com/translate_c?hl=es&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/bb545460.aspx&usg=ALkJrhhGoAtUz5fvWUV6k8VFT9dR6t9Evg

15




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.


16




7.1. Cuadros de diálogoUn 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


http://translate.googleusercontent.com/translate_c?hl=es&prev=/search%3Fq%3Dhttp://msdn.microsoft.com/en-us/library/aa511328.aspx%26hl%3Des%26client%3Dsafari%26rls%3Den%26prmd%3Dimvns&rurl=translate.google.es&sl=en&twu=1&u=http://msdn.microsoft.com/en-us/library/windows/desktop/aa511493.aspx&usg=ALkJrhiXiudjcZcyTxLOtNpOf1ev0dQGqA

17




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.


18




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


19




7.3. Ventanas > PropiedadesLas 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.


20




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.


21




Ventanas cuadros de diálogo. Ejemplos

1)


22




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/




seminario guia de estilos de windows 2013

Education