13/05/2006 DAI
DESARROLLO DE MENÚS Y
ESQUEMAS DE NAVEGACIÓN
Contenidos
zEstructuras de menús
zFunciones de menús
zContenido de menús
zFormato de menús
zEscribiendo menús
z
Navegación usando menús
z
Navegación web y enlaces
13/05/2006 DAI
Estructura de menús
z
Menú simple
Estructura de menús
13/05/2006 DAI
Estructura de menús
z
Menús simultáneos
Estructura de menús
13/05/2006 DAI
Estructura de menús
z
Menús conectados
Estructura de menús
13/05/2006 DAI
Funciones de menús
z
Navegación a nuevo menú
z
Ejecutar acción o procedimiento
z
Mostrar información
z
Introducción de datos o parámetros
Contenido de Menús
z
Información contextual
z
Título
z
Descripción de opciones
13/05/2006 DAI
Formato de menús (I)
z
Consistencia en menús
– Formato
– Títulos, instrucciones, elecciones – Métodos de selección de elección – Esquemas de navegación
z
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”
Formato de menús (II)
z
Presentación
– Menús y elecciones obvias al usuario
– Aspecto diferente de otros componentes del sistema
z
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
13/05/2006 DAI
Menús con gran anchura de niveles
z
Pros
– Menos pasos y menos tiempo
– Menos oportunidad de tomar caminos erróneos
– Aprendizaje más simple al ver las relaciones de los ítems
z
Contras
– Menú poblado que puede afectar a la claridad
– Mayor posibilidad de confusión entre opciones similares por proximidad
Menús con gran profundidad de niveles
z Pros
– Menú poco poblado
– Menos opciones a evaluar
– Ocultamiento de elecciones inadecuadas
– Menor posibilidad de error entre opciones similares
z 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
13/05/2006 DAI
Formato de menús (III)
z
Complejidad
– Proporcionar tanto menús simples (conjunto mínimo de acciones y menús) como complejos (conjunto completo)
z
Distribución de ítems
– Alinear alternativas o elecciones en columnas simples cuando sea posible
z Lectura de arriba abajo
z Justificación izquierda de descripciones
– Organización izqda-dcha si hay que mantener una orientación horizontal de las descripciones
Formato de menús (IV)
z
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 relacionados
13/05/2006 DAI
Formato de menús (V)
z
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
Formato de menús (VI)
z 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
z Justificación izquierda de líneas bajo la primera letra
z Justificación derecha de líneas bajo el último carácter de la parte más larga
– Para grupos independientes
z Línea completa de izquierda a derecha
13/05/2006 DAI
Título de menú
z Menú principal
– Corto, simple, claro, distintivo que describa el propósito de la serie de elecciones
z Submenú
– Debe llamarse igual que la opción escogida en el menú que lo activa
z General
– Título al inicio de la lista
– Mayúsculas o mixta
– Evitar títulos superfluos
Opciones de menú
z Desde palabra hasta frases
z Poner primero la palabra clave (verbo?)
z Primera letra de cada palabra significante en mayúscula
z Orientadas a tareas
z Construcción paralela
z Nombre diferente al título
z Misma opción en diferentes menús
z No numerarlas excepto si son opciones numéricas o lista de ítems variables
13/05/2006 DAI
Instrucciones de menú
z
Instrucciones completas para usuarios novatos o
inexpertos
– Situar precediendo la parte del menú afectada
z Línea en blanco entre instrucciones y opciones relacionadas
z Justificación izquierda e indentación de las opciones relacionadas min 3 espacios a la derecha
– May-min estilo frase
z
Instrucciones ignorables para usuarios expertos
– Posición consistente y único estilo y/o color
Indicadores de intención (fig 272)
z
En cascada
z
Indicador de ventana
13/05/2006 DAI
Accesos desde teclado
z
Mnemónico como primera letra (o primera
consonante)
z
Subrayar el mnemónico
z
Estandarización
13/05/2006 DAI
Teclas de acceso directo
z
Tecla de función o función+tecla(s)
z
No más de dos teclas simultáneamente
z
+
z
Identificación teclas con opción de menú
z
3 espacios, alineación derecha
z
Estandarización
z
No usar en ítems de menús en cascada o
menús contextuales (pop-up)
13/05/2006 DAI
Seleccionando opciones
z
¿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
z
Opciones por defecto y no disponibles
Elección de opción
z
Punteros
– Qué opciones se pueden seleccionar
– Dispositivos de selección y área de activación
z
Teclado
– Uso de cursores
z
Selección / ejecución
– Separación
– Identificación de ítem seleccionado – Permitir deseleccionar antes de ejecutar
13/05/2006 DAI
Opciones marcadas
z 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)activa
z Pautas 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”
Opciones “cambiantes”
z Propósito
– Dos comandos opuestos de acceso frecuente (Mostrar Grid, Ocultar Grid)
– Indicar claramente una situación contraria a una existente
z Pautas
– Descripción significativa de la acción
– Empezar por verbo clarificador de la acción – Primera letra de cada palabra en mayúscula
13/05/2006 DAI
Menús de navegación
Problemas de navegación de sitios web
z
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
z
Problemas de uso
– Carga mental
13/05/2006 DAI
Metas de la navegación
z
¿Dónde estoy?
z
¿De dónde vengo?
z
¿Adónde puedo ir?
z
¿Cómo llego allí rápidamente?
Elementos de navegación
z
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
z
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
13/05/2006 DAI
Navegación de sitios web:
Organización
z Dividir el contenido en fragmentos o unidades lógicos
z Establecer una jerarquía de generalidad o importancia
z Estructurar las relaciones entre los fragmentos (requisitos de navegación)
z Crear un árbol jerárquico bien balanceado
– Dos niveles, no más de dos clics
Componentes de un sistema de
navegación web
z
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
13/05/2006 DAI
Componentes de un sistema de
navegación web
z
Botones de comandos del browser
– Ocultar separación con la aplicación del sitio web
z
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
Componentes de un sistema de
navegación web
z
Frases textuales
– Enlaces textuales en menús explícitos y embebidos en texto
z
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
13/05/2006 DAI
Componentes de un sistema de
navegación web
zHistóricos
–Histórico
–Bookmarks
–Árboles de historial
–Footprints
zFacilidades de búsqueda
Pautas de Navegación (I)
z
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
z
Número de enlaces
– Mínimo 1 por página
– 4-8 sin agrupaciones lógicas de elementos – 18-24 con agrupaciones
13/05/2006 DAI
Pautas de Navegación (II)
z
Presentación de enlaces
– Texto enlazado
z Subrayado; distinguir visitados de no visitados
– Tipos de enlaces
z Diferenciar enlaces a otra página de los internos
z Diferenciar los que provocan avance de los que provocan retroceso en la página
z Posición consistente de los diferentes tipos de enlaces
– Enlaces gráficos
z Distinguirlos de los gráficos sin enlace
– Enlaces en barras de herramientas
13/05/2006 DAI
Otras pautas sobre enlaces
z Escritura
– Satisfacer usuario; descriptivos
z Agrupamiento
– Separar visualmente los que lleven al documento padre, inicio de página o sección, cambio de sección
z Ordenación
– Por relevancia
z Encabezado
– Para lista de enlaces
z Tamaño
– Imágenes y botones de enlace de tamaño similar
z Espaciado
– Mismo espaciado
z Inaplicabilidad
– Mostrar claramente cuáles no están activos
z Mantenimiento
Tipos de enlaces
z Dentro de la página
z 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 nuevo
z Externos
– Información relevante en otros sitios
– Página independiente
13/05/2006 DAI
Obteniendo sensación de “lugar”
z
En sitio web
–
Estructura jerárquica arbórea simple
–
Facilidad de llegar a los contenidos importantes
z
Entre múltiples sitios web
–
Consistencia entre todos los sitios
z Esquemas de identidad gráfica
z Presentación de componentes
z Organización y localización de componentes
Diseñando elementos que mantengan
la sensación de lugar
z Página home estable y concreta
z Usar herramientas de navegación y elementos recurrentes en todas las páginas
z Numerar páginas secuenciales
z Ayudas de situación para usuario (mapa, tabla de contenidos)
z Feedback sobre situación en el sitio
13/05/2006 DAI
Tipos de menús gráficos
Barra de menú (Menu Bar)
z Acciones frecuentes
z No pueden iniciar ninguna acción
z Ventajas
– Siempre visibles, fáciles de explorar, posición consistente, ni ocultan ni son ocultados, teclas equivalentes
z 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
13/05/2006 DAI
Barra de menú (Menu Bar)
z 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
z Posición
– Disposición horizontal de opciones justo debajo del título de la
ventana/pantalla
– Necesidad de una segunda fila
z Título: el mismo que el título de la ventana/pantalla
Barra de menú (Menu Bar)
z 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
z 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
13/05/2006 DAI
Barra de menú (Menu Bar)
z
Disposición
– Indentar la primera opción 1 espacio del margen izquierdo – 3 espacios entre opciones; 1 espacio al margen derecho
z
Separación del resto de la ventana
– Fondo diferente o línea arriba y abajo
z
Otros componentes
– Mnemónicos de teclado en barra de menú – No hay necesidad de aceleradores o indicadores
z
Indicadores de selección
– Color (inverso), posición del cursor, resaltar
Menú Pull-Down
z Uso
– Iniciar acciones frecuentes que se pueden desarrollar en varias ventanas
– Pocos ítems, textuales, “fijos”
z 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
z Inconvenientes
– Búsqueda en menú de nivel superior fuera del área de trabajo
13/05/2006 DAI
Menú Pull-Down: Propiedades (I)
z 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
z Situación
– Bajo la opción del menu bar
z Tamaño
– 2-8 opciones recomendado
z Título
– Innecesario z Selección
– Modo vídeo/color inverso
Menú Pull-Down: Propiedades (II)
z 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 z 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
13/05/2006 DAI
Menú Pull-Down: Propiedades (III)
z 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
Menú Pull-Down: Propiedades (IV)
z
Agrupaciones
–
Línea sólida entre grupos principales del mismo
color que las elecciones
–
Línea punteada entre subgrupos
z
Opciones cambiantes
–
Opciones exclusivas (simbolizar la exclusividad)
–Opciones no exclusivas (marca a la izqda)
13/05/2006 DAI
De Pull-Down a ….
z
Otro pull-down
– Situar un indicador tras el nombre del ítem – Alinear los indicadores en la parte derecha – Mismo color que los ítems
z
Ventana
– Poner 3 puntos tras el nombre del ítem – No separarlos del nombre
– Mismo color que los ítems
Aceleradores y Equivalentes
z
Subrayar el carácter del mnemónico
equivalente
z
En 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
13/05/2006 DAI
Menús en cascada
z
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
Menús en cascada
z
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
z
Inconvenientes
– Acceso a ítems más lento
– Acceso a ítems mediante cambio de dirección de movimiento
13/05/2006 DAI
Menús en cascada: Elementos
z
Indicador de cascada
– “Flecha”, 1 espacio de separación, mismo color
z
Situación
– A la derecha resaltar la opción elegida
z
Niveles
– No más de 3 niveles totales
z
Título
– No necesario; el de la opción que lo activa
z
Otras pautas
– Seguir el diseño del menú que lo contiene
Menú contextual (Pop-up)
z Presentan opciones en el contexto activo
z Ventajas
– 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”
z 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
13/05/2006 DAI
Menú contextual (Pop-up)
z Visualización
– Mostrar sólo las opciones activables hasta que se escoja una, se inicie una acción fuera del mismo o se cierre
z Situación
– Centrado a la derecha del objeto al que se refiere;
– Cerca del puntero para que pueda ser accedido fácilmente
z Tamaño
– 5-8 opciones
z Título
– Innecesario; suficientemente descriptivo; centrado arriba
z 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
Menú tear-off
z
Tipo de pull-down que contiene opciones
infrecuentes a veces y muy frecuentes otras
z
Se puede poner en cualquier parte de la pantalla
para referencia constante
z
No consume espacio si no se necesita
13/05/2006 DAI
Menú Icónico
z Recuerda a los usuarios funciones, comandos, etc disponibles
z Iconos que faciliten el reconocimiento de las opciones
z Facilitan memorizar la aplicación y la selección de opciones
z Ocupan más espacio y dificultad para obtener iconos válidos
z Fig 322
Menús estándares
z Archivo
– Nuevo, abrir, cerrar, guardar, guardar como, vista preliminar, imprimir, salir
z Edición
– Deshacer, cortar, copiar, pegar, seleccionar todo, buscar, reemplazar
z Ver
– Barras de herramientas, barra de estado, zoom in/out, grid z Ventana
– Nueva ventana, ordenar todo, ocultar, mostrar
z Ayuda
13/05/2006 DAI
