Este documento describe los conceptos básicos detrás del diseño de interfaces de usuario conocidas como "Ribbons". Los Ribbons organizan los comandos de un programa en pestañas y grupos para mejorar la visibilidad y accesibilidad de las funciones. El documento analiza cuándo es apropiado utilizar Ribbons, cómo organizar efectivamente los comandos en pestañas y grupos, y directrices de diseño como el uso de vistas previas y etiquetado claro. El objetivo final es mejorar la experiencia del usuario al hacer que los comandos sean más fác

1. UNIVERSIDAD NACIONAL MAYOR DE SAN MARCOS
FACULTAD DE INGENIERIA DE SISTEMAS E INFORMÁTICA 2012-I
DISEÑO DE INTERFACES DE USUARIOS
Profesor: Diaz Muñante Jorge
Trabajo # 1
Tema: Ribbons
EQUIPO
Código Apellidos y Nombres
05200095 PARI ALEGRE, JULIO CESAR
1

2. 1. RIBBONS
Ribbons son la forma moderna para ayudar a los usuarios a encontrar, entender y utilizar los comandos de manera
eficiente y directa con un número mínimo de clics, con menos necesidad de recurrir a ensayo y error, y sin tener que
recurrir a la Ayuda.
Un Ribbons es una barra de comandos que organiza las funciones de un programa en una serie de pestañas en la parte
superior de una ventana. Utilizando un ribbon aumentamos la exhibición de las características y funciones, permite el
aprendizaje rápido del programa en su conjunto y hace que los usuarios sientan que tienen más control de su experiencia
con el programa. Un Ribbon puede reemplazar tanto la barra de menús y barras de herramientas tradicionales.
Los Ribbons fueron introducidos originalmente con Microsoft Office 2007. Y resolvía varios problemas. A continuación
listamos los problemas que resuelve.
Figura 1: Ribbon típico
Las pestañas de Ribbon se organizan en grupos, donde cada grupo contiene un conjunto de comandos etiquetados,
estrechamente relacionados. Además de las pestañas y los grupos, el Ribbon constan de:
• Un botón de la aplicación, que presenta un menú de comandos que implican hacer algo, o con un documento o área
de trabajo, tales como archivos de comandos relacionados.
• Una barra de herramientas de acceso rápido, que es una pequeña barra de herramientas personalizable que muestra
los comandos más utilizados.
• Pestañas básicas son las pestañas que siempre se muestran.
• Las pestañas contextuales, que aparecen sólo cuando un tipo concreto de objeto está seleccionado. Las pestañas que
se muestran siempre se llaman pestañas principales.
• Un conjunto de fichas es una colección de fichas contextuales para un tipo de objeto único.
• Pestañas modales, que son las pestañas principales que se muestran con un modo temporal, en particular, como vista
previa de impresión.
• Galerías, que son listas de comandos u opciones se presentan de forma gráfica. Una galería basada en los resultados
ilustra el efecto de los comandos u opciones en lugar de los propios comandos.
• Información sobre herramientas mejoradas, que de forma concisa explicar sus comandos asociados y dar a las teclas
de acceso directo. También pueden incluir gráficos y referencias para ayudar. Información sobre herramientas
mejoradas reducir la necesidad de comandos relacionados con la Ayuda.
• Lanzadores de cuadros de diálogo, que son los botones en la parte inferior derecha de algunos grupos, tiene la función
de abrir cuadros de diálogos con funciones relacionadas al grupo.
2

3. 1.1. ¿Si deseamos utilizar un Ribbon que debemos de tener presente?
En la actualidad vemos que muchos programas de escritorio utilizan Ribbons en sus interfaces de usuario. Si nosotros al
implementar una aplicación de escritorio deseamos utilizar el concepto de diseño de Ribbon, que necesitaríamos tener
presente.
1.1.1. Tipo de programa
1.1.1.1. ¿Qué tipo de programa se está diseñando?
El tipo de programa es un buen indicador de la idoneidad de un RIBBON. Los RIBBONS funcionan bien para los
programas de creación de documentos, así como visores de documentos y navegadores. Los RIBBONS podría
funcionar para otros tipos de programas, pero con otras formas de presentación de comandos.
Lista de programas utilizan RIBBONS.
Figura 2: Creación de un simple documento
1.1.2. Descubrimiento y el aprendizaje de temas
1.1.2.1. ¿Los usuarios tienen problemas para encontrar los comandos?
1.1.2.2. ¿Los usuarios están solicitando características que ya están en el programa?
1.1.2.3. ¿Los usuarios tienen problemas para entender los comandos del programa?
1.1.2.4. ¿Ellos suelen recurrir a la "prueba y error" para determinar cómo trabajan los comandos?
1.1.3. Características del comando
1.1.3.1. ¿Los comandos se presenta en varios lugares?, y si existe, se presenta en los comandos de las barras de menús,
en la barra de herramientas, en los paneles de tareas ó dentro del área de trabajo?
1.1.3.2. ¿Los comandos se aplican a la ventana o sólo a paneles específicos?
1.1.3.3. ¿Puede la mayoría de los comandos presentarse directamente? Es decir, los usuarios pueden interactuar con
ellos mediante un solo clic? Si los comandos más utilizados son accesibles desde los menús y cuadros de
diálogo, ¿pueden ser reprogramado para ser directo?
3

4. 1.1.4. Comando de la escala
1.1.4.1. ¿Existe un pequeño número de comandos? ¿Pueden los comandos utilizados con más frecuencia se presentan
fácilmente en una sola barra de herramientas, simples?
1.1.4.2. ¿Hay un gran número de comandos? Estuviese utilizando una cinta de requerir más de siete fichas básicas? ¿Los
usuarios constantemente tienen que cambiar las fichas para realizar tareas comunes?
1.1.4.3. ¿Los usuarios tienden a utilizar un pequeño número de comandos de la mayoría de las veces?
1.1.4.4. ¿Se beneficia el programa de lo que el área de contenido del programa de lo más grande posible?
1.1.4.5. ¿Los usuarios tienden a trabajar en un área específica dentro de una gran ventana en el programa durante largos
períodos de tiempo?
1.1.4.6. Para una mayor eficiencia y flexibilidad, lo que los usuarios necesitan para hacer cambios significativos en el
contenido del comando de presentación, la ubicación o el tamaño?
Figura 3: Comparación de interfaces, cuando utilizar RIBBONS y cuando NO.
4

5. 1.2. Conceptos de diseño
1.2.1. La adaptación de un RIBBON en un programa existente
Si bien es cierto podemos rediseñar una barra tradicional de herramientas en un programe existente a un formato de
RIBBON, pero esa no es la idea. Utilizar un RIBBON tiene más valor cuando presentamos ordenes inmediatas ya sea
en formato de galería y vistas previas, de esa manera conseguimos que los comandos sean más fáciles de entender y
por ende más eficiente y productivo para el usuario. En vez de rediseñar una barra de herramientas, es mejor
rediseñar por completo como se llevan a cabo los comandos del programa.
Diseñar un RIBBON no implica que nuestro programa mejore. La creación de un RIBBON toma mucho tiempo y
esfuerzo. Tomar la decisión de crear un RIBBON no es cuestión de gustos o de moda, es una estrategia.
1.2.2. La Naturaleza del RIBBON
En comparación con la barra de menús y la barra de herramientas, los RIBBONS tiene las siguientes características.
• Una única interfaz de usuario (UI) para todos los comandos
• Visibles y auto-explicativo
• Etiquetada agrupación
• Modales, pero no jerárquicos
• Directa e inmediata
• Amplias
• Tiene un botón de la aplicación y la barra de herramientas de acceso rápido
• Un mínimo de personalización
• Mejora de la accesibilidad del teclado
1.2.3. La Naturaleza de los comandos ricos
1.2.3.1. Etiquetado
Correcto
Incorrecto
1.2.3.2. Tamaño
5

6. 1.2.3.3. Ajuste dinámico del tamaño
1.2.3.4. Botones de Split
6

7. 1.2.3.5. Ricos menús desplegables y galerías
1.2.3.6. Las vistas previas
7

8. 1.2.3.7. Herramientas mejorada
1.2.4. Ribbons siempre tienen un botón de la aplicación y la barra de herramientas de acceso rápido
1.2.5. Organización y el descubrimiento
8

9. 1.2.6. Pestañas
El primer paso es revisar las pestañas de Ribbons estándar. Si los comandos de su programa se organizan de forma
natural en las pestañas estándar, entonces debemos de basar su organización en la pestaña de estas normas. Por otro
lado, si los comandos que el programa tiene no se asignan de forma natural, no trate de forzarla. Entonces debemos de
determinar una estructura más natural, y asegurarnos de realizar una gran cantidad de pruebas de usuario para
asegurarse de que hemos hecho, esté bien.
Para pestañas no estándar, tener presente lo siguiente:
Cada nombre de la pestaña debe describir su contenido. Elegir nombres significativos que sean específicos,
pero no demasiado específicos. Los usuarios nunca deben ser sorprendido por su contenido.
Cada nombre de la pestaña debe reflejar su propósito. Considere la posibilidad de la meta o tarea asociada a
los comandos.
Cada nombre de la pestaña debe ser claramente distinto a los nombres de las demás pestañas.
La pestaña Inicio es una excepción a estas consideraciones. Mientras que usted no tiene que tener una pestaña, la
mayoría de los programas deberían. La pestaña Inicio es la primera pestaña y contiene los comandos utilizados con más
frecuencia. Si han utilizado con frecuencia los comandos que no encajan en las otras pestañas, la pestaña Inicio es el
lugar adecuado para ellos.
1.2.7. Grupos
La división de comandos en las estructuras de los grupos es en función a que tan relacionados estén. La etiqueta del
grupo explica el propósito común de sus comandos.
Para poder organizar los comandos en grupos, debemos de tener en cuenta lo siguiente:
Grupo estándar
En los diversos programas que utilizamos, nos damos cuenta que siempre hay comandos que deben de ir juntos y por
ende formarían un grupo que es estándar a una aplicación
Granularidad
Si bien es cierto es bueno estructurar un grupo de comandos, pero separarlos tanto tampoco es bueno. Debemos de
conseguir un intermedio y esto dependerá de cuantos comandos tenga un grupo.
9

10. Nombres
El nombre de los grupos debe de estar en relación al objetivo común de todos los comandos que agrupa
Orden
Si bien es cierto que las culturas occidentales solemos leer de izquierda a derecha, entonces el orden de las pestañas
debe de seguir ese enfoque. Por lo tanto debemos de colocar las pestañas, grupos y comandos que más se utilicen a
la izquierda y los menos utilizados a la derecha.
1.2.8. Vistas previas
Podemos utilizar distintos tipos de vistas previas para mostrar como quedaría si elegimos esa opción. Mediante el uso
de vistas previas se puede mejorar el uso de un programa y minimizar la acción de ensayo y error. Dependiendo de
las vistas previas podemos estimular en el usuario mas creatividad de la pensando en un inicio por este.
Tenemos varios tipos de vistas previas:
Realistas iconos estáticos y gráficos
Utilizando imágenes podemos mostrar al usuario como quedaría cuando seleccione la opción.
10

11. Iconos y gráficos dinámicos
Vista previa en vivo
11

12. 1.3. Directrices
Algunas directrices que debemos de tener presente al momento de diseñar un Ribbons.
No combine Ribbons con las barras de menús y barras de herramientas dentro de una ventana. Los Ribbons se deben de
utilizar en lugar de las barras de menús y barras de herramientas. Sin embargo, un ribbon se puede combinar con la paleta
de ventanas y elementos de navegación, tales como botones Atrás y Adelante y una barra de direcciones.
Siempre se combinan un ribbon con un botón de la aplicación y la barra de herramientas de acceso rápido.
Seleccione la pestaña más a la izquierda (por lo general Inicio) cuando se inicia un programa.
Mostrar el Ribbons en su estado normal cuando se inicia un programa por primera vez. Los usuarios suelen dejar la
configuración predeterminada sin cambios.
1.3.1. Tabs o pestañas
Siempre que sea posible, utilice pestañas estándar. Uso de pestañas estándar mejora en gran medida el
descubrimiento, especialmente a través de los programas.
Asignar el nombre “Inicio” a la primera pestaña. La pestaña de Inicio debe contener los comandos más
utilizados. Si han utilizado con frecuencia comandos que no encajan en las otras pestañas, la pestaña de Inicio es el
lugar adecuado para ellos.
Agregar una pestaña cuando sea necesario. Por lo general, tienen menos fichas es mejor, por lo que eliminar fichas
que no ayudan a lograr estos objetivos.
Para las pestañas restantes, colocar las pestañas más utilizadas en primer lugar, mientras se mantiene un
orden lógico a través de las pestañas.
Optimizar el diseño de la pestaña para que los usuarios puedan encontrar los comandos de forma rápida y con
confianza. Todas las demás consideraciones son secundarias.
No proporcione una pestaña para ayuda. En su lugar, proporcionar asistencia mediante el programa de toda la
ayuda y herramientas mejoradas.
Utilizar un máximo de 7 pestañas básicas. Si hay más de siete, se hace difícil determinar qué ficha tiene un
comando. Mientras que siete fichas básicas es aceptable para aplicaciones con muchos de los comandos, la mayoría
de los programas deben apuntar a cuatro o menos fichas.
12

13. Pestañas modales
Las pestañas modales y sus grupos son mostradas cuando se realiza una determinada actividad temporal
Las pestañas modales deben de tener un icono para cerrar la pestaña
Pestañas estándares
Son las pestañas que vienen por defecto y se recomienda que tengan ese orden.
Pestañas
- Inicio
- Insertar
- Diseño de la página
- Referencias
- Correspondencia
- Revisar
- Vista
1.3.2. Grupos
Utilizar grupos estándares, Siempre que se pueda debemos de utilizar diseños estándares.
Agregar un nuevo grupo, al momento de agregar un nuevo grupo a una pestaña si esas funciones están
estrechamente relacionadas, debemos de asignar un nombre al grupo que describa en común el objetivo de todos los
comandos que irán dentro de ella.
Cantidad máxima de comandos por grupo, se recomienda tener entre 3-5 comandos por cada grupo. Evitar grupos
con 1-2 comandos, porque tener muchos grupos puede dificultar la facilidad de uso de los mismos, entonces se
recomienda tener una alta cohesión entre los comandos.
13

14. Dividir un grupo, puede ser necesario dividir un grupo en sub-grupos asignando a cada uno de ellos un nombre que
los asocie de mejor manera.
Tamaño de los iconos por comando deber de ser homogéneos
Orden de los grupos
Se recomienda ubicar dentro de una pestaña a los grupos en lugares de izquierda a derecha, de acuerdo a su nivel de
utilización por parte del usuario y claro dándole un orden lógico.
Diseño de un grupo
El diseño interno de un grupo, vale decir la distribución de los comandos debe de ser de tal manera el usuario pueda
ubicarlos de manera rápida.
Cantidad máxima de grupos por pestaña
Se recomienda una cantidad máxima de 7 grupos por pestaña, si tenemos más de 7 grupos se hace más difícil
encontrar un comando.
14

15. Grupos estándares por pestaña
Al momento de agrupar los comandos se recomienda los siguientes grupos.
Pestaña Principal
o Portapapeles
o Fuente
o Párrafo
o Edición
Pestaña Insertar
o Tablas
o Ilustraciones
Pestaña de presentación
o Temas
o Configuración de página
o Organizar
Pestaña de revisión
o Revisión
o Comentarios
Pestaña de ver
o Vistas de documentos
o Mostrar / Ocultar
o Ampliar
o Ventana
1.3.3. Comandos
1.3.3.1. De Presentación
Un comando solo se debe de ubicar en una sola pestaña y no en varias. Debemos de evitar que un comando se
muestre en varios lugares.
Dentro de un grupo, los comandos tienen un orden lógico, dando preferencia a los comandos utilizados con
más frecuencia. En el orden de izquierda a derecha. Los comandos con iconos de 32x32 suelen aparecer tiene
más prioridad frente a los de 16x16 pixeles.
Utilice separadores para indicar comandos fuertemente relacionados, tales como un conjunto de opciones
mutuamente excluyentes.
Considere el uso de la barra de herramientas al estilo de grupos de conjuntos que están muy relacionados,
comandos conocidos que no necesitan etiquetas.
Utilice los iconos de 32x32 píxeles para los comandos más utilizados e importantes.
15

16. 1.3.3.2. De Interacción
No actualizar el nombre de los comandos de manera dinámica.
Preferir comandos directos (A nivel de su ubicación y poder encontrarlo)
Un comando es directo si se lo invoca con un solo clic(es decir sin tener que navegar por los menús.
Preferir comandos inmediatos (A nivel funcional)
Un comando es inmediato cuando su acción surge efecto de inmediato
16

17. 1.3.4. Galerías
¿Cuándo utilizar una galería?
Hay una bien definida, conjunto relacionado de opciones de las que los usuarios suelen elegir.
Las opciones se expresan mejor visualmente, tales como las características de formato. Con las miniaturas hace que
sea más fácil de explorar, entender y tomar decisiones.
Al momento de seleccionar se muestra el resultado que se logra de inmediato con un solo clic. No debe haber ningún
cuadro de diálogo de seguimiento para aclarar la intención del usuario.
Cuando las opciones se utilizan con frecuencia, usualmente las galerías ocupan mayor espacio que otro tipo de
grupos y por ende si vamos a utilizar las galerías, que sea las opciones que mas utilizamos.
Se recomienda utilizar el espacio más pequeño posible teniendo en cuenta que puede realizar bien su trabajo. Se
recomienda una altura de 48px para las galerías. Dependiendo de la cantidad los iconos pueden tener tamañas de
16x16, 32x32, 48x48, 64x48, 72x96, 96x96 y 128x128px. Todos los iconos de una galería deben de tener el mismo
tamaño para así exista uniformidad.
1.3.5. Vista previa
Las vistas previas se utilizan para mostrar el efecto de un comando sin tener que el usuario lleve a cabo la acción.
Mediante el uso de vistas previas podemos mejorar la eficiencia y facilidad de aprendizaje de su programa y así
reducir al ensayo y error.
Evitar el uso de texto en las vistas previas, de lo contrario quitará la atención de ubicar los iconos.
17

18. 1.3.6. Herramientas para mejorar la información
Recomendaciones:
Utilizar el titulo para dar el nombre al comando, seguido de su tecla de acceso directo.
No utilizar puntuación final en el titulo
El titulo debe de tener un formato de verbo
La descripción debe de ser corta y precisa
Si el icono del comando tiene 2 partes especificas, cada parte debe de tener su propia venta de ayuda
18

19. Si la descripción tiene 2 partes, entonces cada párrafo debe de tener un punto final.
19

20. 1.3.7. Claves de acceso y tips claves
Recomendaciones sobre el acceso a los comandos mediante teclas:
- Debemos de asignar claves de acceso a cada pestaña y sus comandos correspondientes.
- Asignar F para el botón de la aplicación
- Asignar números para la barra de herramientas de acceso rápido
- La letra asignada a cada pestaña debe de estar en función a que tan frecuente son utilizadas
1.3.8. Botones de aplicación
Botones de la aplicación, son todos los botones que podemos visualizar en la interfaz de nuestro programa, dichos
botones están representados por iconos o metáforas que invocan una funcionalidad determinada.
Existen funcionalidades que deseamos que se realicen de manera rápida. Y por ende estamos hablando de comandos
inmediatos.
Utilizar los puntos suspensivos para indicar cuando un comando requiere más información.
1.3.9. Barra de herramientas rápidas
Utilice la barra de herramientas de acceso rápido para facilitar el acceso a los comandos de uso frecuente
Siempre ofrecer una barra de herramientas de acceso rápido cuando se usa una cinta
Rellenará la barra de herramientas de acceso rápido a los comandos utilizados con frecuencia en el menú de la
aplicación
20

21. 1.3.10. Lanzadores de cuadros de diálogos
Proporcionar un lanzador para un grupo.
En dichos cuadros de dialogo se deben de mostrar los comandos utilizados con poca frecuencia y algunos
ajustes.
No utilice un lanzador cuadro de diálogo para ejecutar comandos directamente.
Coincidir con el nombre del cuadro de diálogo con el nombre del grupo.
21

22. 1.4. Nomenclatura
1.4.1. Pestañas
Elegir nombres significativos para las pestañas que describan con claridad y precisión su contenido
No debe de haber nombres de pestañas iguales
Utilizar verbos
Si tenemos 2 pestañas juntas, evitar que empiecen con el mismo vocal o consonate
Se recomienda nombres en singular
No utilizar punto final
1.4.2. Las pestañas contextuales
Utizar el titulo de la pestaña contextual en capitalización
No utilizar punto final
1.4.3. Grupos
Asignar nombre a todos los grupos, en excepción si el grupo tiene 1 solo comando.
Siempre que sea posible utilizar nombre de grupos estándar
Nombres de una sola palabra
Nombres en singular
No utilizar punto final
1.4.4. Comandos
Asignar nombre a todos los comandos.
El botón de un comando también debería de tener un nombre.
22