Windows UI guidelines

SEMINARIOS
Miguel Gea (mgea@ugr.es)
Dpt. Lenguajes y Sistemas Informáticos
Grado en Ingeniería Informática
Universidad de Granada
http://utopolis.ugr.es/diu
Windows User Experience
Interaction Guidelines (windows 7)
DISEÑO DE INTERFACES DE USUARIO
18 Nov, 2015
Directrices generales
Recomendaciones

Seminario. Windows Guidelines. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Contenido
1. Directrices generales y principios de diseño
2. Texto y estilo
3. Controles
4. Ordenes:
Menús, Barra de herramientas, Cintas
5. Mensajes:
Errores, Advertencias, Confirmaciones, Notificaciones
6. Interaction:
Teclado, Ratón y punteros, Gestos
7. Ventanas
Ventana de Administración de, Marcos de ventana,
Cuadros de diálogo, Wizards, De propiedad de Windows
8. Apariencia visual
Disposición, Fuentes, Color, Iconos, Animaciones y transiciones,
Elementos gráficos, Sonido Experiencias
9. Experiencia
10. Entorno de Windows
2
Referencia: http://msdn.microsoft.com/en-us/library/aa511331.aspx
http://msdn.microsoft.com/en-us/library/windows/desktop/aa511440.aspx (2013)
http://msdn.microsoft.com/en-us/library/windows/desktop/dn688964.aspx (Nov 2014)
https://dev.windows.com/es-es/desktop/design (Nov 2015)

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

1. Directrices generales
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.
4

2. Estilo del Texto
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
http://msdn.microsoft.com/en-us/library/aa511331.aspx
5

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
6
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
botones, verificación, radio

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

3.Controles
8
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.

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

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.
10
(1)
(2)
(3)
(2)

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

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, notiﬁcaciones, 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.
12

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

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

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

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
16

7.2. Ventanas > Cuadros de diálogo
[725] Cuadro de diálogo más frecuentes apropiado para tareas especíﬁcas de abrir/guardar, imprimir, seleccionar
un atributo (fuente, color), buscar, identiﬁcación.
17

7.2. Ventanas > Cuadros de diálogo
[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 oﬁcial de la aplicación
• Versión
• Copyright
• Puede incluir información sobre licencias
• Boton con la opción OK/Aceptar
18

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

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

Ventanas cuadros de diálogo. Ejemplos
21
1)

9. Experiencia de usuario
- Branding. Seguir esquema de colores, ubicación y diseño (iconos, fonts, color, animación, sonido, y marcos ventanas )
- Diseña experiencias, no caracteristicas
- No hagas todas las cosas para todo el mundo (Don’t be all things to all people ) . Contrite en usuarios y sus necesidades.
- Haz las cosas más sensatas o correctas por defecto
- Procura que sea gratiﬁcante usar y visualizar
…
Windows User Experience Interaction Guidelines Windows7 y Windows Vista
https://www.microsoft.com/en-us/download/details.aspx?id=2695
Siguiente paso:
designing a Universal Windows Platform (UWP) app (for Windows10)
A Universal Windows Platform (UWP) app can run on any Windows-based device, from your
phone to your tablet or PC
https://dev.windows.com/en-us/design/design-basics
22

Guidelines
23
https://www.experiencedynamics.com/approach/ui-style-guides

Referencias (guías de estilo)
24
‣ 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
https://www.microsoft.com/en-us/download/details.aspx?id=2695
‣ 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
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/
‣ Gnome Human Interface Guidelines.
https://developer.gnome.org/hig-book/stable/

Windows UI guidelines

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (17)

Similar a Windows UI guidelines

Similar a Windows UI guidelines (20)

Más de Miguel Gea

Más de Miguel Gea (18)

Último

Último (20)

Windows UI guidelines

Notas del editor