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

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.

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?

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.

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

6

1.2.3.3. Ajuste dinámico del tamaño

1.2.3.4. Botones de Split

7

1.2.3.5. Ricos menús desplegables y galerías

1.2.3.6. Las vistas previas

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

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.

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.

11

Iconos y gráficos dinámicos

Vista previa en vivo

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.

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.

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.

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.

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

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.

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

19

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

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

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.

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.