1 13/05/2006 DAI DESARROLLO DE MENÚS Y ESQUEMAS DE NAVEGACIÓN 13/05/2006 DAI Contenidos Estructuras de menús Funciones de menús Contenido de menús Formato de menús Escribiendo menús Navegación usando menús Navegación web y enlaces Tipos de menús gráficos
37
Embed
DESARROLLO DE MENÚS Y ESQUEMAS DE …dis.um.es/~jfernand/0506/dai/7.pdf · ESQUEMAS DE NAVEGACIÓN 13/05/2006 DAI Contenidos zEstructuras de menús zFunciones de menús ... – Organización
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
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