Your SlideShare is downloading. ×
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Trabajo 1-grupo-13-ribbons
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Trabajo 1-grupo-13-ribbons

507

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
507
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. UNIVERSIDAD NACIONAL MAYOR DE SAN MARCOSFACULTAD 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ño1.2.3.4. Botones de Split 6
  • 7. 1.2.3.5. Ricos menús desplegables y galerías1.2.3.6. Las vistas previas 7
  • 8. 1.2.3.7. Herramientas mejorada1.2.4. Ribbons siempre tienen un botón de la aplicación y la barra de herramientas de acceso rápido1.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ámicosVista 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 - Vista1.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 quelos asocie de mejor manera.Tamaño de los iconos por comando deber de ser homogéneosOrden de los gruposSe recomienda ubicar dentro de una pestaña a los grupos en lugares de izquierda a derecha, de acuerdo a su nivel deutilización por parte del usuario y claro dándole un orden lógico.Diseño de un grupoEl diseño interno de un grupo, vale decir la distribución de los comandos debe de ser de tal manera el usuario puedaubicarlos de manera rápida.Cantidad máxima de grupos por pestañaSe recomienda una cantidad máxima de 7 grupos por pestaña, si tenemos más de 7 grupos se hace más difícilencontrar 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 Ventana1.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 utilizadas1.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

×