1

13/05/2006 DAI

DESARROLLO DE MENÚS Y ESQUEMAS DE NAVEGACIÓN

13/05/2006 DAI

Contenidos

Estructuras de menúsFunciones de menúsContenido de menúsFormato de menúsEscribiendo menúsNavegación usando menúsNavegación web y enlacesTipos de menús gráficos

2

13/05/2006 DAI

Estructura de menús

Menú simple

13/05/2006 DAI

Estructura de menús

Menú lineal secuencial

3

13/05/2006 DAI

Estructura de menús

Menús simultáneos

13/05/2006 DAI

Estructura de menús

Menús jerárquicos

4

13/05/2006 DAI

Estructura de menús

Menús conectados

13/05/2006 DAI

Estructura de menús

Menús lanzadores de eventos

5

13/05/2006 DAI

Funciones de menús

Navegación a nuevo menú

Ejecutar acción o procedimiento

Mostrar información

Introducción de datos o parámetros

13/05/2006 DAI

Contenido de Menús

Información contextual

Título

Descripción de opciones

Instrucciones de rellenado

6

13/05/2006 DAI

Formato de menús (I)

Consistencia en menús– Formato– Títulos, instrucciones, elecciones– Métodos de selección de elección– Esquemas de navegación

Visualización de menús– Mostrar permanentemente donde no obstruya en caso de

referencias frecuentes o continuas necesariamente– Por demanda si las referencias son ocasionales– Mostrar siempre opciones “críticas”

13/05/2006 DAI

Formato de menús (II)

Presentación– Menús y elecciones obvias al usuario – Aspecto diferente de otros componentes del sistema

Organización– Mostrar las alternativas relevantes– Estructura de menú adecuado a estructura de tarea– Minimizar el número de niveles sin perjuicio de la claridad– Ser conservadores en la cantidad de opciones a mostrar– Nunca usar menús con scroll– Facilidad de reestructuración por el usuario– Menús decrecientes en opciones

7

13/05/2006 DAI

Menús con gran anchura de niveles

Pros– Menos pasos y menos tiempo– Menos oportunidad de tomar caminos erróneos– Aprendizaje más simple al ver las relaciones de los ítems

Contras– Menú poblado que puede afectar a la claridad– Mayor posibilidad de confusión entre opciones similares por

proximidad

13/05/2006 DAI

Menús con gran profundidad de niveles

Pros– Menú poco poblado– Menos opciones a evaluar– Ocultamiento de elecciones inadecuadas– Menor posibilidad de error entre opciones similares

Contras– Más pasos y tiempo– Aprendizaje más complejo al no ver las relaciones entre

elementos tan claras– Problemas para predecir lo que hay en los niveles inferiorres– Mayores tasas de error

8

13/05/2006 DAI

Formato de menús (III)

Complejidad– Proporcionar tanto menús simples (conjunto mínimo de

acciones y menús) como complejos (conjunto completo)

Distribución de ítems– Alinear alternativas o elecciones en columnas simples

cuando sea posibleLectura de arriba abajoJustificación izquierda de descripciones

– Organización izqda-dcha si hay que mantener una orientación horizontal de las descripciones

13/05/2006 DAI

Formato de menús (IV)

Ordenación– Orden natural de opciones– Para listas asociadas con números, usar orden numérico– Para listas textuales con pocas opciones, ordenar por

secuencia, frecuencia, importancia, similitud semántica– Orden alfabético para listas largas y cortas (que no tengan

patrón obvio)– Separar acciones potencialmente destructivas de las

frecuentes– Mantener consistencia de orden en todos los menús

relacionadosPosiciones relativas vs posiciones absolutas

9

13/05/2006 DAI

Formato de menús (V)

Grupos– Maximizar similitud intragrupal– Minimizar similitud intergrupal– 6-7 grupos a lo sumo– Orden interno adecuado– Acceso inmediato a ítems críticos/frecuentes– Separar grupos mediante mayor espaciado o

línea – Caso de poca similitud y muchas opciones

13/05/2006 DAI

Formato de menús (VI)

Líneas separadoras– Separar grupos verticales con línea

sólida– Separar subgrupos verticales con línea

punteada– Para subgrupos dentro de una categoría

Justificación izquierda de líneas bajo la primera letraJustificación derecha de líneas bajo el último carácter de la parte más larga

– Para grupos independientesLínea completa de izquierda a derecha

10

13/05/2006 DAI

Título de menú

Menú principal– Corto, simple, claro, distintivo que describa el propósito de la serie

de elecciones

Submenú– Debe llamarse igual que la opción escogida en el menú que lo

activa

General– Título al inicio de la lista– Mayúsculas o mixta– Evitar títulos superfluos

13/05/2006 DAI

Opciones de menú

Desde palabra hasta frasesPoner primero la palabra clave (verbo?)Primera letra de cada palabra significante en mayúsculaOrientadas a tareasConstrucción paralelaNombre diferente al títuloMisma opción en diferentes menúsNo numerarlas excepto si son opciones numéricas o lista de ítems variablesOpciones como comandos del ordenador

11

13/05/2006 DAI

Instrucciones de menú

Instrucciones completas para usuarios novatos o inexpertos

– Situar precediendo la parte del menú afectadaLínea en blanco entre instrucciones y opciones relacionadasJustificación izquierda e indentación de las opciones relacionadas min 3 espacios a la derecha

– May-min estilo frase

Instrucciones ignorables para usuarios expertos– Posición consistente y único estilo y/o color

13/05/2006 DAI

Indicadores de intención (fig 272)

En cascada

Indicador de ventana

Ítems de acción directa

12

13/05/2006 DAI

Accesos desde teclado

Mnemónico como primera letra (o primera consonante)Subrayar el mnemónicoEstandarización

13/05/2006 DAI

Accesos estándares

13

13/05/2006 DAI

Teclas de acceso directo

Tecla de función o función+tecla(s)No más de dos teclas simultáneamente+Identificación teclas con opción de menú3 espacios, alineación derechaEstandarizaciónNo usar en ítems de menús en cascada o menús contextuales (pop-up)

13/05/2006 DAI

Teclas de acceso directo estándares

14

13/05/2006 DAI

Seleccionando opciones

¿Dónde situar el cursor al desplegar el menú?– En la opción más probable – En la última opción escogida– En la primera opción

Opciones por defecto y no disponibles

13/05/2006 DAI

Elección de opción

Punteros– Qué opciones se pueden seleccionar– Dispositivos de selección y área de activación

Teclado– Uso de cursores

Selección / ejecución– Separación– Identificación de ítem seleccionado– Permitir deseleccionar antes de ejecutar

Combinación de técnicas

15

13/05/2006 DAI

Opciones marcadas

Propósito– Señalar que un ítem o característica está

(in)activa por un período de tiempo– Recordar que un ítem o característica está

(in)activaPautas de diseño

– Situar el indicador a la izquierda de la opción

– Cuando tengamos opciones no exclusivas, conviene tener una opción que revierta el estado a la situación “normal”

13/05/2006 DAI

Opciones “cambiantes”

Propósito– Dos comandos opuestos de acceso frecuente (Mostrar

Grid, Ocultar Grid)– Indicar claramente una situación contraria a una

existentePautas

– Descripción significativa de la acción– Empezar por verbo clarificador de la acción– Primera letra de cada palabra en mayúscula

16

13/05/2006 DAI

Menús de navegación

13/05/2006 DAI

Problemas de navegación de sitios web

Aspectos técnicos– “Viajar por carretera sin mapa”– Navegación de la información y del browser– Separación datos-controles– Expansión y confusión

Problemas de uso– Carga mental– Desorientación espacial

17

13/05/2006 DAI

Metas de la navegación

¿Dónde estoy?

¿De dónde vengo?

¿Adónde puedo ir?

¿Cómo llego allí rápidamente?

13/05/2006 DAI

Elementos de navegación

Controles– Menús multi-nivel: 1 acción simple para volver al nivel

superior y al menú principal– Múltiples caminos a través de la jerarquía de menús

cuando sea posible

Ayudas– Mapa de menú / resumen de la jerarquía del menú– Mostrar nivel inferior de menú al seleccionar una opción– Historial de navegación

18

13/05/2006 DAI

Navegación de sitios web: Organización

Dividir el contenido en fragmentos o unidades lógicos

Establecer una jerarquía de generalidad o importancia

Estructurar las relaciones entre los fragmentos (requisitos de navegación)

Crear un árbol jerárquico bien balanceado– Dos niveles, no más de dos clics

13/05/2006 DAI

Componentes de un sistema de navegación web

Propiedades de los controles de navegación:– Continuamente disponibles– Ser obvios y distinguibles– Ser consistentes en apariencia, función y orden– Tener una etiqueta o descripción textual– Ofrecer múltiples trayectorias de navegación– Tener sentido en ausencia del contexto del sitio

19

13/05/2006 DAI

Componentes de un sistema de navegación web

Botones de comandos del browser– Ocultar separación con la aplicación del sitio web

Barras de navegación del sitio web– Barra de navegación global al inicio de cada página– Barra de navegación por categorías en la parte izquierda– Enlaces menos ilustrativos abajo– En páginas grandes, barra de navegación con los

elementos más importantes abajo

13/05/2006 DAI

20

13/05/2006 DAI

13/05/2006 DAI

Componentes de un sistema de navegación web

Frases textuales– Enlaces textuales en menús explícitos y embebidos en

texto

Resúmenes– Proporciona una pre-visualización del sitio y enlaza a los

conceptos principales– Permite acceder desde cualquier punto del sitio web– Tabla de contenidos, índice alfabetizado, mapa local y

global

21

13/05/2006 DAI

Componentes de un sistema de navegación web

Históricos– Histórico– Bookmarks– Árboles de historial– Footprints

Facilidades de búsqueda

13/05/2006 DAI

Pautas de Navegación (I)

Scroll– No scroll en página de sólo navegación– Minimizar la necesidad de scroll para ver los enlaces de

páginas de contenidos– Nunca scroll horizontal

Número de enlaces– Mínimo 1 por página– 4-8 sin agrupaciones lógicas de elementos– 18-24 con agrupaciones– Enlaces poco relevantes en un listado

22

13/05/2006 DAI

Pautas de Navegación (II)

Presentación de enlaces– Texto enlazado

Subrayado; distinguir visitados de no visitados– Tipos de enlaces

Diferenciar enlaces a otra página de los internosDiferenciar los que provocan avance de los que provocan retroceso en la páginaPosición consistente de los diferentes tipos de enlaces

– Enlaces gráficosDistinguirlos de los gráficos sin enlace

– Enlaces en barras de herramientas

13/05/2006 DAI

Enlaces a evitar

23

13/05/2006 DAI

Otras pautas sobre enlaces

Escritura– Satisfacer usuario; descriptivos

Agrupamiento– Separar visualmente los que lleven al documento padre, inicio de página o sección,

cambio de secciónOrdenación

– Por relevanciaEncabezado

– Para lista de enlacesTamaño

– Imágenes y botones de enlace de tamaño similarEspaciado

– Mismo espaciadoInaplicabilidad

– Mostrar claramente cuáles no están activosMantenimiento

13/05/2006 DAI

Tipos de enlaces

Dentro de la página

Dentro del sitio web– En todas las páginas: home, páginas principales con enlaces a

esta página, propiedades globales del web– En páginas secuenciales: siguiente, anterior– Páginas de interés e importantes, información extra o de base,

contenido nuevoExternos

– Información relevante en otros sitios– Página independiente– Indicar cuándo un enlace sale del sitio actual

24

13/05/2006 DAI

Obteniendo sensación de “lugar”

En sitio web– Estructura jerárquica arbórea simple– Facilidad de llegar a los contenidos importantes

Entre múltiples sitios web– Consistencia entre todos los sitios

Esquemas de identidad gráficaPresentación de componentesOrganización y localización de componentes

13/05/2006 DAI

Diseñando elementos que mantengan la sensación de lugar

Página home estable y concreta

Usar herramientas de navegación y elementos recurrentes en todas las páginas

Numerar páginas secuenciales

Ayudas de situación para usuario (mapa, tabla de contenidos)

Feedback sobre situación en el sitio

Etiquetas que indiquen claramente la función de los enlaces

25

13/05/2006 DAI

Tipos de menús gráficos

13/05/2006 DAI

Barra de menú (Menu Bar)

Acciones frecuentes No pueden iniciar ninguna acciónVentajas

– Siempre visibles, fáciles de explorar, posición consistente, ni ocultan ni son ocultados, teclas equivalentes

Inconvenientes– Ocupan una parte fija de la pantalla, fuera del área de trabajo,

área de selección pequeña, pega de la orientación horizontal

26

13/05/2006 DAI

Barra de menú (Menu Bar)

Visualización– Una por cada ventana primaria– No puede ser desactivado– Cada opción debe contener al menos 2 subopciones– En caso de que todas las subopciones estén deshabilitadas,

deshabilitar la opción

Posición– Disposición horizontal de opciones justo debajo del título de la

ventana/pantalla– Necesidad de una segunda fila

Título: el mismo que el título de la ventana/pantalla

13/05/2006 DAI

Barra de menú (Menu Bar)

Descripción de ítem– Reflejar claramente el tipo de subopciones que contiene– Descripciones de ítems como títulos de los menús asociados– 1 palabra si es posible; combinación M-m– No mostrar opciones que nunca estarán disponibles

Organización– Seguir esquemas estándares de la plataforma– Ordenar opciones de izquierda a derecha– Posición consistente de opciones en más de 1 menú– Justificación izquierda– Agrupaciones lógicas de opciones– La ayuda, al final en el extremo derecho de la barra

27

13/05/2006 DAI

Barra de menú (Menu Bar)

Disposición– Indentar la primera opción 1 espacio del margen izquierdo– 3 espacios entre opciones; 1 espacio al margen derecho

Separación del resto de la ventana– Fondo diferente o línea arriba y abajo

Otros componentes– Mnemónicos de teclado en barra de menú– No hay necesidad de aceleradores o indicadores

Indicadores de selección– Color (inverso), posición del cursor, resaltar

13/05/2006 DAI

Menú Pull-Down

Uso– Iniciar acciones frecuentes que se pueden desarrollar en varias

ventanas– Pocos ítems, textuales, “fijos”

Ventajas– Localización consistente– No ocupa espacio constante– Navegación sencilla– Idoneidad de orientación para escaneo y agrupamiento– Pueden tener equivalentes de teclado y accesos directos

Inconvenientes– Búsqueda en menú de nivel superior fuera del área de trabajo– Pequeño tamaño

28

13/05/2006 DAI

Menú Pull-Down: Propiedades (I)

Visualización– Muestra todas las alternativas, señalando cuáles las no

habilitadas– Mismo fondo y color que la menu bar, rodear con línea sólida

Situación– Bajo la opción del menu bar

Tamaño– 2-8 opciones recomendado

Título– Innecesario

Selección– Modo vídeo/color inverso

13/05/2006 DAI

Menú Pull-Down: Propiedades (II)

Descripción de ítems– No usar el mismo nombre que el título de menú– No usar scroll– No situar instrucciones – No cambiar el significado al pulsar shift

Organización– Ítems críticos/frecuentes al principio– Separar opciones destructivas de las otras– Alinear opciones en columnas– Alineación izquierda de las descripciones– En caso (no deseable) de usar varias columnas, de arriba abajo y

e izquierda a derecha

29

13/05/2006 DAI

Menú Pull-Down: Propiedades (III)

Layout– Resaltar la opción del menu bar que lo activa– Debe caber el ítem más largo, así como su indicador de cascada

o aceleración– Alinear primer carácter bajo el segundo de la elección del menu

bar– Alinear borde más izquierdo/derecho con borde más

izquierdo/derecho del menu bar– Al menos tan ancho como la opción del menu bar– Figs 311

13/05/2006 DAI

Menú Pull-Down: Propiedades (IV)

Agrupaciones– Línea sólida entre grupos principales del mismo

color que las elecciones– Línea punteada entre subgrupos

Opciones cambiantes– Opciones exclusivas (simbolizar la exclusividad)– Opciones no exclusivas (marca a la izqda)

30

13/05/2006 DAI

De Pull-Down a ….

Otro pull-down– Situar un indicador tras el nombre del ítem– Alinear los indicadores en la parte derecha– Mismo color que los ítems

Ventana– Poner 3 puntos tras el nombre del ítem– No separarlos del nombre– Mismo color que los ítems

13/05/2006 DAI

Aceleradores y Equivalentes

Subrayar el carácter del mnemónico equivalenteEn caso de teclas de acceso directo:– Identificar las teclas y ponerlas entre paréntesis

separadas por +– Alineación derecha, empezando al menos 3

espacios a la derecha del ítem más largo y en el mismo color

31

13/05/2006 DAI

Menús en cascada

Uso– Reducir el ancho del menú– Para agrupar por similitud cuando disponemos de muchas

opciones– Cuando una elección nos lleva a una lista fija de

propiedades de elección única– Cuando hay conjuntos fijos de opciones relacionadas– Para simplificar un menú– Para evitar comandos repetitivos

13/05/2006 DAI

Menús en cascada

Ventajas– Se simplifican los niveles superiores al ocultar opciones– Más mnemónicos disponibles al haber menos opciones– Exploración de opciones de alto nivel más sencilla

Inconvenientes– Acceso a ítems más lento– Acceso a ítems mediante cambio de dirección de

movimiento– Dificultad para exploración exhaustiva de opciones

32

13/05/2006 DAI

Menús en cascada: Elementos

Indicador de cascada– “Flecha”, 1 espacio de separación, mismo color

Situación– A la derecha resaltar la opción elegida

Niveles– No más de 3 niveles totales

Título– No necesario; el de la opción que lo activa

Otras pautas– Seguir el diseño del menú que lo contiene

13/05/2006 DAI

Menú contextual (Pop-up)

Presentan opciones en el contexto activoVentajas

– Aparecen en el área de trabajo cuando son activados– Orientación vertical– Permiten aceleradores y accesos rápidos– El uso frecuente puede hacer que se queden “activos”

Inconvenientes– Se debe recordar su existencia y cómo activarlo al requerie de

acción especial– Ítems menores– Pueden “oscurecer” el área de trabajo – Se muestran de forma no consistente

33

13/05/2006 DAI

Menú contextual (Pop-up)

Visualización– Mostrar sólo las opciones activables hasta que se escoja una, se inicie una

acción fuera del mismo o se cierreSituación

– Centrado a la derecha del objeto al que se refiere;– Cerca del puntero para que pueda ser accedido fácilmente

Tamaño– 5-8 opciones

Título– Innecesario; suficientemente descriptivo; centrado arriba

Otras pautas– En caso de opciones de pull-down, usar misma ordenación– Alineación izquierda; grupos separados por línea sólida; pautas generales– Fondo que contraste con el fondo de pantalla y menú bordeador con línea

sólida

13/05/2006 DAI

Menú tear-off

Tipo de pull-down que contiene opciones infrecuentes a veces y muy frecuentes otras

Se puede poner en cualquier parte de la pantalla para referencia constante

No consume espacio si no se necesita

No requiere pasos adicionales para localizarlo

34

13/05/2006 DAI

Menú Icónico

Recuerda a los usuarios funciones, comandos, etc disponibles

Iconos que faciliten el reconocimiento de las opciones

Facilitan memorizar la aplicación y la selección de opciones

Ocupan más espacio y dificultad para obtener iconos válidos

Fig 322

13/05/2006 DAI

Menús estándares

Archivo– Nuevo, abrir, cerrar, guardar, guardar como, vista preliminar,

imprimir, salirEdición

– Deshacer, cortar, copiar, pegar, seleccionar todo, buscar, reemplazar

Ver– Barras de herramientas, barra de estado, zoom in/out, grid

Ventana– Nueva ventana, ordenar todo, ocultar, mostrar

Ayuda– Contenidos, búsqueda, cómo usar la ayuda, acerca de

35

13/05/2006 DAI

Ejemplos: Menú 1

13/05/2006 DAI

Ejemplos: Menú 2

36

13/05/2006 DAI

13/05/2006 DAI

37

13/05/2006 DAI