PATRONES DE DISEÑO

• Luis Paul Pinto Purca

NAVEGACIÓN DE MENÚS
INTRODUCCIÓN
• Los menús son una forma importante de navegación a través de un sistema y, si está
diseñado adecuadamente, ayudar al usuario a desarrollar un modelo del
sistema
• Trabajar con menús recuerda personas de opciones disponibles e información que
pueden no conocer o que no han olvidado
• Si cada menú se ve de forma aislada, las relaciones entre menús pueden ser difíciles de
comprender
• Se incluyen entidades comúnmente llamadas barras de menús y menús denominados
menús desplegables, ventanas emergentes, cascadas, recortes e iconos

El diseño de los sistemas de menú debe considerar las

necesidades conflictivas tanto de los inexpertos como usuarios
experimentados
MENÚS INDIVIDUALES
• Al usuario se solicita que se realice una sola acción. Ejemplo:
"Novato", "intermedio" o "experto". No tiene que preocuparse por
ningún otro menú.
MENÚS SECUENCIALMENTE LINEALES
• Menú que pertenecen a una ruta corta o larga. Una ruta larga
puede ser tediosa para el usuario. El usuario en ocasiones desea
regresar al menú anterior siendo este un proceso incómodo.
MENÚS SIMULTÁNEOS
• Todas las opciones están disponibles
simultáneamente. El problema son las
múltiples alternativas que se presentan y el
desplazamiento por la pantalla puede ser
tedioso para el usuario
MENÚS JERARQUICOS O SECUENCIALES
Da como resultado un
refinamiento creciente a
elección del usuario. Se
caracterizan por profundidad
(Numero de niveles de elección
para llegar al destino) y
amplitud (número de
alternativas por cada nivel). Un
solo sentido (De arriba hacia
abajo). Una desventaja seria
que el usuario no este
familiarizado con el esquema
jerárquico del menú
MENÚS CONECTADOS
• Redes de menús conectados de alguna
manera. No existe recorrido de arriba
hacia abajo. Puede ser cíclico (movimiento
en cualquier dirección) o acíclico
(movimiento en una sola dirección).
Brinda al usuario completo control sobre
el flujo de navegación.
MENÚS DE CAPTURAS DE EVENTOS
• Conjunto de menús simultáneos impuestos en menús jerárquicos.
Tiene 3 funciones importantes:
▫ Pueden cambiar un parámetro dentro del entorno web.
▫ Puede sacar al usuario del entorno web sin salir del contexto actual.
▫ Pueden sacar al usuario del contexto actual para permitir entrar a
uno nuevo.

• Ejemplo: Opción APASTE para pegar del portapapeles, u opción

de mostrar o ocultar grilla.
NAVEGACION A UN NUEVO MENU
• El objetivo de cada selección es guiar al usuario hacia el objetivo
que desea realizar.
EJECUTAR UNA ACCION O PROCEDIMIENTO
• La acción puede ser como abrir un archivo o copiar texto o enviar
un mensaje.
MOSTRAR INFORMACION
• El enfoque del usuario se centra principalmente en la información
deseada y menos en la función de la selección.
ENTRADA DE DATO O PARÁMETRO
• Los datos o valores pueden ingresarse en un solo menú. Se centra
principalmente en la información y no en la función que realiza la
selección.
CONTENIDO DE MENÚ
• Contexto de Menú
Proporciona información para mantener orientado al usuario. Ejemplo: donde se
encuentra el usuario o cuanto más tiene que navegar.

• Título de Menú
Proporciona el contexto para el conjunto actual de opciones. Debe reflejar la opción
seleccionada.

• Descripción de Opciones
Alternativas disponibles para el usuario.

• Instrucciones de finalización
El fundamento del porque se le pide al usuario que realice una acción o elección en
específico.
VISUALIZACIÓN
• Las opciones criticas deben mostrarse continuamente. Esto
proporciona soporte de memoria y acceso a lo que se necesita.
PRESENTACIÓN
• Asegurar que otros componentes del menú no posean las mismas
cualidades visuales que las opciones del menú.
ORGANIZACIÓN
• Proporcionar un menú general o principal. Eliminar opciones inactivas.
Minimizar el numero de niveles dentro de los límites de claridad. Sin
agrupaciones (de 4 a 8) y con agrupaciones (de 18 a 24)

• Al organizar un menú, el objetivo es revelar de manera simple y efectiva su

estructura, también reduciendo la cantidad de acciones necesarias para
ubicar el elemento objetivo.
▫ Menú general: Opciones básicas del sistema.
▫ Coincidencia de la estructura del menú con las tareas
▫ Minimizar el número de niveles
▫ Limitar el número de opciones
▫ Proporcionar menús decrecientes
▫ Scrolling: no requiera que los menús tengan desplazamiento. Mantener las
opciones visibles en todo momento.
COMPLEJIDAD
• Proporcione menús simples y complejos.
▫ Simple: un conjunto mínimo de acciones y menús.
▫ Complejo: un conjunto completo de acciones y menús.
ARREGLO DEL ARTICULO
• Orientación de lectura de arriba hacia abajo
• Descripciones de justificación a la izquierda
ORDENAMIENTO
• Ordene las listas por orden natural o por secuencia de ocurrencia, o por
frecuencia de ocurrencia o por Importancia.
• Otro estudio dio a conocer que la vista del usuario se centra en la parte
superior.
• El esquema común es el siguiente:
▫ Orden natural
▫ Orden numérico
▫ Pequeño número de opciones
▫ Orden alfabético
▫ Separación de elecciones destructivas
▫ Consistencias entre menús.
AGRUPAMIENTO
• Crear agrupaciones de elementos que sean lógicos, distintivos,
significativos y mutuamente exclusivos.
• No más de 6 o 7 agrupaciones.
AGRUPAMIENTO - CARACTERÍSTICAS
Crear agrupaciones
• Los elementos deben agruparse para ayudar a aprender y acelerar el proceso de búsqueda visual

Categorización
• Las agrupaciones también deben cubrir todas las posibilidades y contener elementos que no se superponen

Numero
• No más de 6 o 7 agrupaciones

Ordenamiento
• De preferencia orden alfabético, secuencia de uso, importancia o similitud semántica.

Grupos visuales arbitrarios

• Los menús sin categoría se deben romper en arbitrario agrupaciones visuales mediante el uso de espacio o líneas.

Separación
• Separación de líneas entre agrupaciones

Opciones criticas
• Las opciones criticas deben ser accesibles lo más rápido que sea posible.
SEPARADORES DE LÍNEA
La línea de separación entre grupos
debe empezar desde la primera letra de
las opciones hasta el final de la más
larga.
Colocar línea continua de extremo a
extremo genera una separación visual
muy fuerte y demasiada abrumadora.
MENÚ DE SOPORTE DE SELECCIÓN
• Los menús de soporte de selección ayudan al usuario al
proporcionar un acceso más rápido a funciones utilizadas. Se
colocan en la parte superior
• Un menú debe comunicarle al usuario información acerca de:
▫ La naturaleza y el propósito del menú en sí.
▫ La naturaleza y el propósito de cada elección presentada.
▫ Cómo se pueden seleccionar las opciones o elecciones correctas.
TÍTULOS DE MENÚ
• Un título de menú significativo ayuda a definir el contexto del menú y
aumenta comprensión del menú.

▫ Menú Principal: Debe ser un título breve, claro, distintivo y descriptivo,

representando toda la serie de elecciones

▫ Submenús: Los títulos de los submenús deben redactarse exactamente de

la misma manera que el menú. Esto proporcionará continuidad estructural

▫ General: Cualquiera que sea el estilo elegido debe ser consistentemente

seguido para todos los menús.
CARACTERÍSTICAS DE LAS OPCIONES DEL MENÚ
• Significativo: Las descripciones también deben ser concisas, que
contengan las menos palabras posibles, y distintivas, construidas con
palabras que hacen que cada selección claramente diferente de todas
las demás
• Tamaño: Los elementos de la barra de menú deben ser una sola
palabra, si es posible
• Palabra clave primero: Organizar las palabras iniciales.
• Capitalización
• Redacción orientada a tareas: La redacción orientada a tareas
generalmente coloca un verbo primero.
CARACTERÍSTICAS DE LAS OPCIONES DEL MENÚ
• Construcción paralela: Construcción paralela sería: Imprimir un
archivo, ejecutar un programa y expulsar un disco. Un ejemplo de no
paralelo la construcción es: impresión; Ejecute un programa y
expulsión de disco.
• Relación con el título: Una opción de menú nunca debe tener la
misma redacción que el título.
• Consistencia entre los menús
• Numeración
• Lenguaje de comando: Accesos directos
INSTRUCCIONES DE MENÚ
• Existen usuarios que necesitan asistencia de menú, pero también
hay otros que no. Por ello se debe incluir una opción para ver la
asistencia, pero también para poder ser ignorada para los usuarios
expertos.
INDICADORES DE INTENCIONES
• Proporcionar una indicación de lo que sucederá cuando se
seleccione un elemento de menú puede mejorar la previsibilidad y
la exploración de un sistema gráfico
ATAJOS DE TECLADO
• Los atajos de teclado permiten tomar acciones utilizando el
teclado y el mouse. Son más útiles para actividades frecuentes
realizadas por usuarios experimentados.
SELECCIÓN DE OPCIONES DE MENÚ
• Los elementos del menú se pueden seleccionar apuntando a la
opción con un puntero mecánico, por señalando la elección a
través del teclado, o ingresando un valor que designa la elección.
VALORES POR DEFECTO
• Indique los valores por defecto en un texto en negrita
OPCIONES NO DISPONIBLES
• Las opciones que no están disponibles para el usuario deben ser
visualmente distintivas mediante la atenuación ellos o grisándolos
MARCAS DE CONFIGURACIÓN
• Se usa para proporcionar un recordatorio de que un elemento o
función está activo o inactivo.
• Coloque el indicador directamente a la izquierda de la opción
ALTERNAR ELEMENTOS DE MENÚ
• Usar cuando el elemento del menú mostrado indique claramente
que la condición opuesta actualmente existe
• La navegación se refiere al método que las personas usan para
encontrar lo que desean en un sitio web. Una estructura de
navegación simple y clara es la columna vertebral que todas las
características del sistema están cubiertas.
ETAPAS
• Orientación
▫ Dividir un espacio en partes pequeñas y proporcionar puntos de referencia y orientación
significativa sobre ayudas a la señalización (títulos)

• Decisión de ruta
▫ Toma de decisiones en ruta se mejora al minimizar el número de opciones de navegación,
y por proporcionar señales o indicaciones en los puntos de decisión

• Monitoreo de ruta
▫ La ruta elegida debe ser monitoreada para confirmar que está liderando al destino
correcto

• Reconocimiento de destino
▫ El destino, cuando se encuentra, debe ser fácilmente reconocido
PROBLEMAS DE NAVEGACIÓN EN EL SITIO WEB
• Los principales problemas en la navegación web son:
▫ Problemas técnicos
▫ Problemas de uso
OBJETIVOS DE NAVEGACIÓN DEL SITIO WEB
• Como se describió anteriormente, entender el esquema de
navegación de un sitio web está hecho más difícil porque los sitios
web suelen tener una estructura mucho menos percibida que la
típica aplicaciones del sistema gráfico.
• Las páginas web también pueden ser de cualquier longitud y
poseer cualquier número de enlaces a cualquier cantidad de otras
páginas.
OBJETIVOS DE NAVEGACIÓN DEL SITIO WEB
• El usuario puede navegar a voluntad o capricho a través de
multitud de enlaces, páginas y sitios web, y cualquier estructura
significativa un diseño de sitio web posee puede desaparecer
fácilmente de la memoria en el laberinto de se realizan giros y
giros direccionales

El tiempo que lleva tomar una decisión aumenta

a medida que aumenta el número de las opciones
aumentan
AYUDA DE NAVEGACIÓN DEL SITIO WEB
• Para ayudar a la navegación y el aprendizaje en el sitio web
▫ Proporcione un mapa o una descripción general de la jerarquía del menú.
▫ Proporcione señales de clickability.
▫ Proporcionar una "mirada hacia adelante" en el siguiente nivel de
opciones, alternativas que se presentarán cuando se selecciona una opción
vista actualmente.
▫ Cambiar el color de un enlace que ha sido cliqueado.
• Proporcionar comentarios sobre la ubicación actual de uno
▫ Proporcionar historial de navegación.
▫ Haga coincidir el texto del enlace (o la etiqueta) con el encabezado de la
página de destino.
ORGANIZACIÓN DEL SITIO WEB
• Divida el contenido en fragmentos lógicos, unidades o fragmentos.
• Establezca una jerarquía de generalidad o importancia.
• Estructurar las relaciones entre fragmentos de contenido,
unidades o fragmentos.
▫ Establecer requisitos de navegación globales o de todo el sitio.
• Crear un árbol jerárquico bien equilibrado.
▫ Restringir a dos niveles que requieren no más de dos clics para llegar
al contenido más profundo, cuando sea posible.
DISEÑO DE PÁGINA DE NAVEGACIÓN
• Use los tipos de menú apropiados.
▫ Menús secuenciales para tareas simples de avance.
▫ Menús simultáneos para tareas que de otro modo requerirían una amplia
uso del botón.
• Mantenga cortas las páginas de solo navegación.
• Limite el texto en prosa.
• Desplazamiento:
▫ Nunca requiera el desplazamiento de las páginas de solo navegación.
▫ Minimice la necesidad de desplazarse para ver todos los enlaces en las
páginas que contienen contenido.
▫ Nunca requiera desplazamiento horizontal.
TODOS LOS ELEMENTOS DE NAVEGACIÓN DEBEN:
• Tener sentido en ausencia del contexto del sitio.
• Estar continuamente disponible.
• Sea obvio y distintivo.
• Sea consistente en apariencia, función y orden.
• Poseer una etiqueta textual o descripción.
• Ofrecer múltiples rutas de navegación.

Se descubrió que las personas que leen los idiomas de izquierda a

derecha, la tendencia es mirar hacia la izquierda para ver el panel
de navegación
• Un sitio web contiene al menos tres niveles de elementos de
navegación: global o en todo el sitio; local y específico; y menor o
nota al pie
ELEMENTOS DE NAVEGACIÓN
• Global: Los elementos de navegación globales o de todo el sitio brindan
acceso al total del sitio alcance o categorías de información disponible
• Categoría o tópico: Elementos de navegación locales, específicos y
contextuales dentro del categoría o área tópica que se presenta se muestran
típicamente en una columna array abajo del lado izquierdo de la página
• Enlaces integrados: Un enlace incrustado es uno que se encuentra en el
medio de la prosa o continuo texto. Los enlaces integrados se utilizan con
frecuencia para generar información de soporte o proporcionar definiciones
de términos
• Enlaces ilustrativos: Pueden colocarse de forma horizontal al final de la
pagina
• Lista de Contenidos: Estos enlaces también ayudan a las personas a llegar
a una sección específica si llegan de una página diferente.
ELEMENTOS DE NAVEGACIÓN
• Links importantes: Al terminar una página, el usuario, entonces, no
tendrá que desplazarse hacia arriba para localizar enlaces de navegación
importantes.
• Tema común: Permitirá personas para comprender y aprender más
fácilmente su estructura.
• Opciones siempre presentes: Muchas páginas web contienen enlaces que
abren una nueva ventana del navegador, lo que desactiva el botón Atrás del
navegador
• Breadcrumb: Es una secuencia de paginas atravesadas desde la pagina
principal hasta la página actual.
• Los enlaces se usan comúnmente para ir a la información,
usualmente en otra página.
• Existen tres tipos de enlaces:
▫ Interno: proporcionan navegación dentro de un sitio web
▫ De anclaje: se utilizan cuando una página es excepcionalmente larga
▫ Externo: se utilizan cuando se desea dirigir a una pagina externa al
sitio web.
ENLACES DE FRASES TEXTUALES
• Proporcione una combinación de enlaces
de frases textuales
ENLACES DE IMAGEN
• Como se acaba de describir, los enlaces de texto son más
fácilmente reconocibles que las imágenes, incluso si las imágenes
contienen frases textuales
BOTONES DE COMANDO Y BARRAS DE HERRAMIENTAS
• Los botones de comando y las barras de herramientas, utilizados
para realizar acciones, pueden aparecer en una matriz en la forma
de una barra de navegación, o se ubicará individualmente en
puntos relevantes de una página
PRESENTACIÓN DE ENLACES
• Los enlaces deben ser fáciles de encontrar. Si un enlace se ha
navegado antes también debe ser obvio.
CARACTERÍSTICAS
• Señales de Clickeabilidad: Proporcionar una indicación visual de
que se puede hacer clic en un elemento o palabra de una página
usando técnicas como el color, el subrayado, las viñetas y las
flechas
• Subrayar enlaces de texto: Para identificar un enlace, la
convención bien establecida es subrayar el texto del enlace
• Designar enlaces usados
CARACTERÍSTICAS
• Distinguir los tipos de enlaces: El destino de un enlace debe ser
tan predecible como el contenido en el otro extremo. Es buena
práctica incluir la URL del destino.
CARACTERÍSTICAS
• Enlaces gráficos: Identifique claramente las regiones clicables de
las imágenes, ya sea toda la imagen o las secciones relevantes de la
imagen
• Enlaces en barras de herramientas
• Fat links: Los enlaces que apuntan a más de una página se llaman
fat links. Por compatibilidad de navegadores.
TIPOS DE ENLACES
• Enlaces internos dentro de una página: Para páginas largas,
incluya enlaces de anclaje al contenido interno de la página
• Enlaces internos dentro de un sitio web
▫ La página de inicio al sitio web
▫ Paginas secuenciales
▫ Página anterior
▫ Lugares de interés
▫ Paginas importantes
▫ Información suplementaria
• Enlaces externos
ESCRITURA DE ETIQUETAS DE ENLACE
• Las etiquetas de enlace deben ser descriptivas, diferenciables y
predictivas
NÚMERO DE ENLACES
• Cada página debe contener al menos un link. Restringir los
enlaces incrustados a los más importantes, pertinentes e
interesantes. Colocar los enlaces menos relevantes en una lista
MANTENIMIENTO DE ENLACES
• Mantener enlaces internos correctos. Verificar y corregir con
frecuencia los enlaces externos
BARRA DE MENÚ
• El menú del sistema gráfico de más alto nivel se denomina
comúnmente barra de menú. Un menú barra consiste en una
colección de descripciones que sirven como títulos o títulos para
una serie de acciones en un menú desplegable asociado
• Las barras de menú se usan para presentar alternativas de
aplicaciones o elecciones al usuario de la pantalla
BARRA DE MENÚ
VENTAJAS DESVENTAJAS
• Siempre son visibles, recordándole al usuario su • Consumen una fila completa de espacio en la
existencia. pantalla.
• Son fáciles de navegar. • Requieren mirar lejos del área de trabajo
• Son fáciles de localizar consistentemente en la principal para encontrar.
pantalla. • Requieren mover el puntero desde el área de
• Por lo general, no oculte el área de trabajo de la trabajo principal para seleccionar.
pantalla. • Las opciones de menú son más pequeñas que los
• Por lo general, las ventanas y los cuadros de botones de tamaño completo, ralentizando el
diálogo no los oscurecen. tiempo de selección.
• Permitir el uso de equivalentes de teclado. • Su orientación horizontal es menos eficiente para
escanear.
• Su orientación horizontal limita el número de
opciones que se pueden mostrar.
 MENÚS DE PRESIÓN
VENTAJAS DESVENTAJAS
• La barra de menú muestra un recordatorio de su • Requieren buscar y seleccionar desde otro menú
existencia. antes de ver las opciones.
• Pueden estar ubicados de forma relativamente • Requieren mirar lejos del área de trabajo principal
consistente en la pantalla. para leer.
• No se consume espacio de ventana cuando no se • Requieren mover el puntero fuera del área de
utilizan. trabajo para seleccionar (a menos que se use
• Son fáciles de navegar. equivalentes de teclado).
• Su orientación vertical es más eficiente para • Los elementos son más pequeños que los botones
escanear. de tamaño completo, disminuyendo el tiempo de
• Su orientación vertical es más eficiente para selección.
agrupar. • Puede oscurecer el área de trabajo de la pantalla.
• Su orientación vertical permite que se muestren
más opciones.
• Permiten la visualización de equivalentes de
teclado y aceleradores.
MENÚS EN CASCADA
VENTAJAS
• Los menús de nivel superior se simplifican
porque algunas opciones están ocultas.
• Hay más mnemónicos de primera letra
disponibles porque los menús poseen menos
alternativas.
• La navegación de comandos de alto nivel es
más fácil porque los subtemas están ocultos.
DESVENTAJAS
• El acceso a los elementos del submenú
requiere más pasos.
• El acceso a los elementos del submenú
requiere un cambio en la dirección del
movimiento del puntero.
• Exhaustiva navegación es más difícil; algunas
alternativas permanecen ocultas como
pulldowns hacerse visible
 MENÚS EMERGENTES
VENTAJAS
• Aparecen en el área de trabajo.
• No usan el espacio de la ventana cuando no se
muestran.
• No se necesita movimiento de puntero si se
selecciona con el botón.
• Su orientación vertical es la exploración más
eficiente.
• Su orientación vertical es más eficiente para
agrupar.
• Su orientación vertical permite que se muestren
más opciones.
• Es posible que puedan seguir mostrándose
("inmovilizados") cuando se usan con frecuencia.
• Permiten la visualización de equivalentes de
teclado y aceleradores.
DESVENTAJAS
• Su existencia debe ser aprendida y recordada.
• Se deben aprender y recordar los medios para
seleccionarlos.
• Requieren una acción especial para ver el menú
(clic del mouse).
• Los elementos son más pequeños que los botones
de tamaño completo, disminuyendo el tiempo de
selección.
• Pueden oscurecer el área de trabajo de la pantalla.
• Sus ubicaciones de visualización pueden no ser
consistentes.
MENÚS DESPLEGABLE
• Un menú desplegable es un menú desplegable que se puede
colocar en cualquier lugar de la pantalla para referencia constante

• Ventajas desventajas. No se consume espacio en la pantalla

cuando el menú es innecesario. Cuando sea necesario, puede
permanecer continuamente en pantalla. Requiere pasos
adicionales para recuperar, y puede oscurecer el área de trabajo de
la pantalla.
MENÚS DE ICONOS
• Úselo para recordar a los usuarios las funciones, los comandos, los
atributos o las opciones de aplicación disponible.
• Crear íconos que:
▫ Ayuda a mejorar el reconocimiento y acelerar la selección de
opciones.
▫ Son concretos y significativos.
▫ Representa claramente las elecciones.
MENÚS DE PIE
• Un menú circular es una representación circular de los elementos
del menú que se puede utilizar como una alternativa a un menú
desplegable o emergente
• La navegación se refiere al método utilizado para buscar
información dentro de un sitio web.
• Una página de navegación se usa principalmente para ayudar a los
usuarios a localizar y vincular páginas de destino. Para facilitar la
navegación, los diseñadores deben diferenciar y agrupar los
elementos de navegación y usar los tipos de menú adecuados
PROPORCIONAR OPCIONES DE NAVEGACIÓN
• No cree ni dirija a los usuarios a páginas que no tengan opciones
de navegación.
• Muchas páginas web contienen enlaces que abren nuevas
ventanas del navegador. Cuando se abren estas ventanas del
navegador, el botón Atrás está desactivado. La desactivación del
botón Atrás puede generar confusión y frustración para los
usuarios e inhibir drásticamente su navegación
PROPORCIONAR OPCIONES DE NAVEGACIÓN
DIFERENCIAR Y AGRUPAR ELEMENTOS DE
NAVEGACIÓN
• Diferencie claramente los elementos de navegación entre sí, pero
agrúpelos y colóquelos en un lugar coherente y fácil de encontrar en
cada página
• Cree un esquema de navegación común en todo el sitio web para
ayudar a los usuarios a aprender y comprender la estructura de su sitio
web. Use el mismo esquema de navegación en todas las páginas al
ubicar pestañas, encabezados, listas, búsquedas, mapas del sitio, etc.
• Haga que los elementos de navegación sean lo suficientemente
diferentes entre sí para que los usuarios puedan comprender la
diferencia en su significado y destino
DIFERENCIAR Y AGRUPAR ELEMENTOS DE
NAVEGACIÓN
USE UNA 'LISTA DE CONTENIDOS' QUE SE PUEDE
HACER CLIC EN 'PÁGINAS LARGAS'
• En páginas largas, proporcione una "lista de contenidos" con enlaces que
llevan a los usuarios al contenido correspondiente más abajo en la página
• Para páginas largas con varias secciones distintas que no son visibles desde la
primera pantalla, agregue una lista breve y seleccionable de las secciones (a
veces llamadas enlaces 'ancla' o 'dentro de la página') en la parte superior de
la página
• Los "enlaces de anclaje" pueden tener dos propósitos: proporcionan un
esquema de la página para que los usuarios puedan determinar rápidamente
si contienen la información deseada y permiten a los usuarios navegar
rápidamente a información específica
• Dado que los "enlaces de anclaje" permiten un enlace directo al contenido
debajo de la primera pantalla, también son útiles para que los usuarios
obtengan información específica rápidamente cuando llegan de una página
completamente diferente
USE UNA 'LISTA DE CONTENIDOS' QUE SE PUEDE
HACER CLIC EN 'PÁGINAS LARGAS'
PROPORCIONE COMENTARIOS SOBRE LA UBICACIÓN
DE LOS USUARIOS
• Proporcione comentarios para que los usuarios sepan dónde se
encuentran en el sitio web
• Los comentarios brindan a los usuarios la información que necesitan
para comprender dónde se encuentran en el sitio web y para continuar
con la siguiente actividad. Los ejemplos de comentarios incluyen
proporcionar información de ruta y jerarquía (es decir, ‘breadcrumbs'),
hacer coincidir el texto del enlace con el encabezado de la página de
destino y crear URL que se relacionan con la ubicación del usuario en el
sitio. Otras formas de comentarios incluyen cambiar el color de un
enlace que ha sido cliqueado (sugiriendo que el destino ha sido
visitado) y usar otras señales visuales para indicar la porción activa de
la pantalla
PROPORCIONE COMENTARIOS SOBRE LA UBICACIÓN
DE LOS USUARIOS
COLOQUE LOS MENÚS DE NAVEGACIÓN PRINCIPALES
EN EL PANEL IZQUIERDO
• Coloque los menús de navegación principales en el panel izquierdo y
los menús secundarios y terciarios juntos.
• Un estudio encontró que los tiempos de navegación eran más rápidos
cuando el menú principal se ubicaba en el panel izquierdo. Además, el
rendimiento de navegación fue mejor cuando los menús secundarios y
terciarios se colocaron juntos. Se admitió la colocación de un menú de
navegación en el panel derecho como una opción de diseño viable por
medidas de rendimiento y preferencia. Los usuarios preferían tener el
menú principal en el panel izquierdo y agrupar los menús secundarios
y terciarios, o agrupar los tres niveles de menú. El mejor rendimiento y
preferencia se lograron cuando los tres menús se colocaron en el panel
izquierdo (colocándolos todos en el panel derecho lograron cerca del
mismo nivel de rendimiento).
COLOQUE LOS MENÚS DE NAVEGACIÓN PRINCIPALES
EN EL PANEL IZQUIERDO
USAR ETIQUETAS DE PESTAÑA DESCRIPTIVA
• Asegúrese de que las etiquetas de las pestañas sean claramente
descriptivas de su función o destino.
• A los usuarios les gustan las pestañas cuando tienen etiquetas que
son lo suficientemente descriptivas para permitir selecciones sin
errores. Cuando las etiquetas de las pestañas no se pueden aclarar
debido a la falta de espacio, no use pestañas.
USAR ETIQUETAS DE PESTAÑA DESCRIPTIVA
PRESENTE LAS PESTAÑAS DE MANERA EFECTIVA
• Asegúrese de que las pestañas de navegación se encuentran en la
parte superior de la página, y se parecen a las versiones
cliqueables de las pestañas del mundo real
• Los usuarios pueden confundirse sobre el uso de pestañas cuando
no se ven como pestañas del mundo real. Las pestañas del mundo
real son las que se parecen a las que se encuentran en un cajón de
archivos. Un estudio mostró que es más probable que los usuarios
encuentren y hagan clic apropiadamente en las pestañas que
parecen pestañas del mundo real
PRESENTE LAS PESTAÑAS DE MANERA EFECTIVA
MANTENER CORTAS LAS PÁGINAS DE SOLO
NAVEGACIÓN
• No requiere que los usuarios se desplacen por páginas puramente
de navegación.
• Idealmente, las páginas de solo navegación no deberían contener
más de una pantalla de información. Los usuarios no deberían
necesitar desplazarse por la página, incluso a una distancia
pequeña. Un estudio mostró que los usuarios consideraban el final
de una pantalla como el final de una página, y no se desplazaron
más para encontrar opciones adicionales de navegación.
MANTENER CORTAS LAS PÁGINAS DE SOLO
NAVEGACIÓN
USE LOS TIPOS DE MENÚ APROPIADOS
• Use menús 'secuenciales' para tareas simples de avance y use menús
'simultáneos' para tareas que de otra manera requerirían numerosos usos del
botón Atrás.
• La mayoría de los sitios web utilizan menús familiares "secuenciales" que
requieren que los elementos se seleccionen de una serie de menús en algún
orden predeterminado. Después de realizar cada selección, se abre otro
menú. La elección final está limitada por la suma total de todas las elecciones
anteriores.
• Los menús simultáneos muestran opciones de múltiples niveles en la
jerarquía del menú, ofreciendo a los usuarios la posibilidad de elegir desde el
menú en cualquier orden. Los menús simultáneos a menudo se presentan en
marcos, y se emplean mejor en situaciones donde los usuarios tendrían que
hacer un uso extensivo del botón Atrás si se les presenta un menú secuencial.
USE LOS TIPOS DE MENÚ APROPIADOS
UTILICE LOS MAPAS DEL SITIO
• Use mapas de sitios para sitios web que tienen muchas páginas.
• Los mapas del sitio proporcionan una descripción general del sitio
web. Pueden mostrar la jerarquía del sitio web, pueden diseñarse
para parecerse a una tabla de contenido tradicional o pueden ser
un índice simple.
• Algunos estudios sugieren que los mapas de los sitios no
necesariamente mejoran las representaciones mentales de los
usuarios de un sitio web. Además, un estudio informó que si un
mapa del sitio no refleja la estructura conceptual de los usuarios
(o del dominio), entonces la utilidad del mapa se reduce.
UTILICE LOS MAPAS DEL SITIO
USE 'GLOSAS' PARA AYUDAR A LA NAVEGACIÓN
• Proporcione 'glosas' para ayudar a los usuarios a seleccionar los
enlaces correctos.
• 'Glosas' son frases cortas de información que aparecen cuando un
usuario coloca su puntero del mouse cerca de un enlace.
Proporciona una vista previa de la información detrás de un
enlace. Los usuarios prefieren que la información de vista previa
se ubique cerca del enlace, pero no se coloque de manera que
altere el texto principal. Sin embargo, los diseñadores no deben
confiar en el 'brillo' para compensar los enlaces mal etiquetados.
USE 'GLOSAS' PARA AYUDAR A LA NAVEGACIÓN
NAVEGACIÓN BREADCRUMB
• No espere que los usuarios usen migas de pan de manera efectiva.
• Un estudio informó que no hubo diferencias en los tiempos de finalización de
tareas y el total de páginas visitadas entre los grupos que tenían breadcrumbs
y los que no. Los participantes podrían haber usado breadcrumbs el treinta y
dos por ciento del tiempo, pero solo lo hicieron el seis por ciento del tiempo.
Probablemente no valga la pena incluir pan rallado a menos que pueda
demostrar que los usuarios de su sitio web los usan con frecuencia, ya sea
para navegar por el sitio o para comprender la jerarquía del sitio.
• Un estudio encontró que los participantes de prueba que recibieron
instrucción sobre el uso de breadcrumbs completaron las tareas mucho más
rápido que aquellos que no lo hicieron. Este ahorro de tiempo podría generar
una mayor productividad para los usuarios que realizan búsquedas en sitios
web diariamente.
NAVEGACIÓN BREADCRUMB
Mobile Design Pattern Gallery
1.Navigation

Secondary
Navigation
Patterns

Primary
Navigation
Patterns
1.Navigation
Las quejas más comunes parecen girar en torno a:

La falta de Mala Diseño de

funciones claves navegación interfaz confuso

 Los dos primeros problemas no se pueden arreglar con patrones de

diseño, pero la tercera si.
 Seguir los patrones de diseño comunes para la navegación garantizará que
las personas puedan encontrar y usar las valiosas funciones en su
aplicación.
Primary Navigation Patterns
• Las aplicaciones con buena
navegación solo se sienten intuitivas
y facilitan cualquier tarea, desde
buscar amigos hasta solicitar un
préstamo para un automóvil.
• Si bien puede haber muchas
opciones para navegar por el
contenido dentro de una aplicación,
existen seis patrones para la
navegación primaria, es decir,
patrones para el menú principal:
Springboard
• El patrón Springboard es OS neutral,
funciona igual de bien en todos los
dispositivos.
• También es a veces conocido como
un Launchpad.
• Los Springboard se caracteriza por
ser una página de lanzamiento con
opciones de menú que actúan como
un punto de partida en la aplicación.
• Facebook siguió el diseño
Springboard de la pantalla de inicio
de iOS, y se emularon rápidamente
por otras aplicaciones.
Springboard
• Las cuadrículas para 3x3, 2x3, 2x2 y 1x2 son los
diseños más comunes.Pero un Springboard no
tiene que seguir un diseño de cuadrícula.
• Algunas opciones pueden ser proporcionalmente
más grandes para transmitir una mayor
importancia, como la opción de video en la
aplicación Masters o entras aplicaciones.
• El patrón Springboard o Launchpad es un patrón
de navegación muy común y se basa en el
diseño de los elementos de navegación en una
cuadrícula
List Menu
• El menú de lista es similar al Springboard, en
que cada uno es un punto de partida en la
aplicación.
• Existen numerosas variaciones de este patrón
que incluyen menús de listas personalizadas,
listas agrupadas y listas mejoradas.
• Las listas mejoradas son simples menús de
lista con funciones adicionales para buscar,
explorar o filtrar.
• Los menús de lista funcionan bien para títulos
largos o aquellos que requieren subtítulos.
Las aplicaciones que utilizan Menús de listas
deben ofrecer una opción en todas las
pantallas internas para volver al Menú de
lista, normalmente un botón en la barra de
título con un ícono de lista o la palabra
"menú".
Tabs
• La navegación con pestañas no es neutral
desde el sistema operativo, ya que cada
sistema operativo tiene sus propias pautas
para la ubicación y el diseño de las pestañas.
• Al elegir este patrón para su aplicación, tiene
que prepararse para la personalización de la
ubicación de las pestañas para los diferentes
sistemas operativos.
• Se debe Indicar claramente el elemento del
menú seleccionado al diferenciar visualmente
la pestaña seleccionada de las demás.
Tabs
Gallery
• El patrón Gallery muestra las
piezas individuales de contenido
para la navegación. El contenido
suele ser artículos individuales,
recetas, fotos o productos y puede
organizarse en un carrusel, una
grilla o una presentación de
diapositivas.
• A veces, el contenido será más
fácil de buscar si está agrupado.
• DWELL usa pestañas laterales
para organizar el contenido de la
galería en fragmentos manejables.
Dashboard
• Los Dashboards brindan un conjunto de indicadores clave de rendimiento, KPI donde cada
métrica puede ser consultada para obtener información adicional.
• Este patrón de navegación principal es útil para aplicaciones financieras, herramientas de
análisis y aplicaciones de ventas y marketing.
Metaphor
• Este patrón se caracteriza por
ser una página de lanzamiento
modelada para reflejar la
metáfora de la aplicación.
• Esto se usa principalmente en
juegos, pero también se puede
ver en aplicaciones que ayudan
a las personas a catalogar y
categorizar elementos, como
notas, libros, vino, etc.
Mega Menu
• Un mega menú móvil es como el
mega menú web, un gran panel
superpuesto con formato
personalizado y agrupación de las
opciones del menú.
• El sitio web RipCurl utiliza un
mega menú para navegar en
subcategorías de ropa.
• La versión de webOS de Facebook
utiliza un mega menú para una
navegación simplificada, evitando
la navegación adicional
encontrada en un patrón de
Springboard.
• Walmart usa este mismo patrón en
su aplicación de Android.
Secondary Navigation Patterns
• Por navegación secundaria, se
refiere a la navegación dentro de una
página o módulo.
• Por ejemplo, Springboard en la
aplicación ANZ es secundario a la
navegación de la pestaña principal.
De manera similar, en las Recetas de
Jamie Oliver, la Lista es secundaria a
la navegación de la pestaña principal.
Secondary Navigation Patterns
• Hay algunos patrones adicionales que funcionan bien para la navegación secundaria,
pero probablemente no son ideales para la navegación primaria:
Page Carousel
• Este patrón se puede utilizar para navegar
rápidamente un conjunto discreto de páginas con
el gesto de flick.
• El indicador de página muestra cuántas páginas
hay en el carrusel; parpadeando muestra la
página siguiente.
• Los cuatro ejemplos a continuación usan carrusel
de página dentro de una pestaña seleccionada.
• El carrusel de páginas funciona mejor para
navegar un número reducido de páginas. Es
mejor usar un indicador visual para reflejar la
cantidad de pantallas y la pantalla actual.
Image Carousel
• El carrusel de imágenes puede ser un
carrusel 2D o más, como el flujo de
cobertura de iTunes. IMDB usa el carrusel
de imágenes para mostrar las películas
más vistas. Lo usamos para mostrar
destacado productos en la aplicación de
venta entre otros.
• La Image Carousel funciona mejor para
mostrar contenido visual nuevo, como
artículos, productos y fotos.
• Proporciona accesibilidad visual, ya sea
con flechas, imágenes parciales o
indicadores de página (puntos) a los que
se pueda acceder a más contenido.
Expanding List
• La lista desplegable permite una exploración de una
sola pantalla para revelar más información.
• Android Gingerbread usa este patrón en el registro de
llamadas. Todas las llamadas del mismo número se
colapsan en una fila. Al tocar el ícono se expande la
lista para mostrar las instancias individuales.
• Este patrón es más común en sitios web optimizados
para dispositivos móviles que en aplicaciones
móviles, pero puede funcionar bien en ambos casos.
• Tomemos como ejemplo el sitio móvil de Gap.com. La
lista desplegable se utiliza en lugar de una lista en
cascada para divulgar todas las categorías de ropa de
las mujeres.
2.Forms
La mayoría de las aplicaciones web dependen ampliamente de formularios para la entrada y
configuración de datos. Y a pesar de que se tiene estrategias de investigación y diseño
convincentes para el diseño de formas básicas, hay quienes no tienen un buen diseño en sus
aplicaciones, pero como generalmente no hay otra alternativa, los revisamos para comprar
productos, enviar solicitudes o responder encuestas.
2.Forms
• Las formas móviles, con un
tamaño de pantalla reducido
y dispositivos de entrada
restringidos, tienen aún
menos margen para un mal
diseño.
• Los siguientes patrones de
diseño de formulario pueden
complementar el buen
diseño:
Sign In
• Los formularios de inicio de sesión deben
tener una cantidad mínima de entradas:
nombre de usuario, contraseña, botón de
acción, ayuda con la contraseña, opción de
registro. Algunas aplicaciones hacen esto en
una sola pantalla, como Photobucket y
Groupon.
• Otras aplicaciones, como Kik y Springpad,
presentan la opción Iniciar sesión o
Registrarse al inicio, luego llevan al usuario al
formulario apropiado.
• Springpad y Groupon también ofrecen la
opción de iniciar sesión con Facebook u otros
servicios.
Registration
• Como Iniciar sesión, debe tener
una cantidad mínima de
entradas.
• Se recomienda editar
radicalmente "elementos que no
tienen funciones importantes".
Esto puede significar eliminar el
correo electrónico de
confirmación redundante y
confirmar los campos de
contraseña.
• Agregar etiquetas verticales y
etiquetas de marca de agua.
Checkout
• El checkout en los dispositivos móviles es más común en
los sitios web optimizados para dispositivos móviles que
en las mismas aplicaciones, pero las mismas reglas se
aplican a ambos: Se debe usar controles de estándar del
dispositivo en los formularios de pago por ende se debe
considerar la consolidación de varias pantallas en un solo
formulario de pago.
• Los minoristas como Zappos y Apple presentan un breve
formulario de pago con secciones que se pueden
entender para completar.
• Otros minoristas como Target y Gilt simplemente usan
una forma larga. Se debe ofrecer un mecanismo para un
pago más rápido en el futuro, como la información de la
tarjeta guardada o inicie sesión para pagar entre otras
técnicas.
• Se debe diseñar la velocidad, la eficacia y la tranquilidad
y eliminar innecesarios campos y minimizar el número de
páginas y pasos.
Calculate
• Las aplicaciones de estilo de la calculadora, como
los rastreadores de peso, los estimadores de
impuestos y las calculadoras de préstamos,
requieren entradas. Y aunque estos formularios
pueden usar controles y diseños personalizados,
sigue siendo importante seguir las convenciones
básicas relativas a la legibilidad.
• La alineación, las etiquetas, las fuentes, la ubicación
de los botones, el contraste y los colores afectan la
usabilidad de los formularios móviles. Por ejemplo,
compare la legibilidad de la Calculadora de pintura
Valspar, campos y etiquetas bien alineados, con la
de la Calculadora de pintura Behr.
• Las mejores aplicaciones de cálculo relacionan
estrechamente la entrada con un resultado visual.
TaxCaster utiliza un indicador para visualizar los
impuestos adeudados o el monto del reembolso, e
HypoCalc integra un gráfico en el formulario.
Search Form
• Algunas búsquedas requieren entradas múltiples, o criterios, para
generar resultados. Al igual que los otros patrones de formulario,
los criterios de búsqueda deben limitarse solo a los campos
esenciales y proporcionar valores predeterminados razonables.
Por ejemplo, el formulario de búsqueda de vuelo de Kayak se
convierte en un viaje de ida y vuelta para una persona, clase
económica.
• Usan un diseño de formulario personalizado para mantener todos
los criterios y el botón de búsqueda arriba del formulario.
• OpenTable se establece de manera predeterminada en su
ubicación actual, fecha y hora próxima para buscar restaurantes
en los que pueda obtener una reserva.
• Evitar abrumar al usuario con muchas opciones, se debe buscar
una sola página de criterios y se debe usar controles apropiados
que sean amigables con los dedos y rápidos.
Multi-Step
• Con pantallas más pequeñas, los dispositivos móviles
simplemente no tienen los espacios suficientes para
mostrar la información normalmente asociados con los
formularios de múltiples pasos en la Web. Una
solución simple es la muestra del paso actual y la
cantidad de pasos totales, como el flujo de registro de
Fring.
• Puede ser necesario más contexto para flujos más
largos. Los configuradores de productos como el
pedido en línea de Chipotle y el generador de bebidas
Starbucks guían al usuario con un botón siguiente o
continuar. Pero este enfoque roza la regla fundamental
de usabilidad de la navegación: permite al usuario
saber dónde están y hacia dónde pueden ir (es decir,
el paso número x de y).
• Un mejor diseño es la aplicación TurboTax SnapTax,
donde los pasos y el botón enviar se presentan en una
sola página. Cada paso puede ser perforado y
completado. El enfoque proporciona información de
navegación valiosa (hay tres pasos en el proceso, dos
quedan), pero también funciona como un resumen
conciso para revisar antes de enviar.
Long Form
• Algunos formularios requerirán desplazamiento,
pero la parte más complicada de Long Form es
dónde colocar los botones de comando y escape.
• Tanto Zappos como Skype usan formularios
modales en sus aplicaciones de iOS, por lo que los
botones están en la barra de título.
• Siga las mejores prácticas de diseño de formularios,
así como las pautas específicas para el orden y la
alineación de los botones. Discover Card diferencia
visualmente el botón de comando del botón de
escape, pero los tiene en el orden incorrecto para
iOS. Sam's Club tiene los botones en el orden
correcto, pero los botones tienen el mismo peso
visual, por lo que debe mirar detenidamente para
elegir el correcto.
3.Tables & Lists
Muchos de los clientes tienen aplicaciones empresariales o herramientas robustas de productividad que
generalmente, incluyen tablas repletas de datos. Imagine una tabla con docenas de columnas que se
desplazan horizontal y verticalmente. Quieren saber cómo vamos a obtener esas tablas en su aplicación
móvil. Al menos no de la misma manera que lo hacemos en la Web. Pero la buena noticia es que el factor
de forma móvil nos da la oportunidad de reevaluar qué información es más importante de mostrar.
3.Tables & Lists
Una vez que se haya identificado
los datos clave que su aplicación
necesita para mostrar, se debe
contemplar los siguientes patrones:
Basic Table
• Esta es solo una tabla estándar con encabezados de columna fijos y un diseño de cuadrícula. Los colores alternos
de la fila de la tabla, son líneas sutiles entre las filas que pueden mejorar la legibilidad de la tabla.
• Evite el uso de líneas de cuadrícula oscuras y divisores verticales. Se debe alinear el texto a la izquierda y alinear
los números a la derecha. No se debe sobrecargar la pantalla. Considere un patrón alternativo si hay demasiada
información para caber en una sola pantalla.
Headerless Table
• La tabla sin encabezado se caracteriza por filas
gruesas que muestran múltiples variables sobre un
objeto y sin etiquetas de columna.
• Es una práctica común hacer que el identificador de
fila sea una fuente más grande y mostrar los detalles
en una fuente más pequeña.
• Realtor.com prueba los límites de lo que puede caber
en estas filas gordas. Probablemente deberían haber
omitido la descripción del tipo de vivienda
redundante, ya que esa información se comunica
claramente en el título sobre la mesa.
• El patrón es ideal para mostrar colecciones de
artículos (como inventario, recetas, álbumes, etc.) y
resultados de búsqueda. Al igual que una lista, está
pensado para una exploración y selección rápidas.
Fixed Column
• Para tablas más grandes, el patrón de
columna fija puede ser una solución
viable.
• En este ejemplo de Roambi, la
columna de la izquierda está
congelada y el resto de las columnas
se desplazan.
• Fidelity usa columnas fijas a la
izquierda y a la derecha con contenido
desplazable en el centro, pero esto el
diseño es más difícil de navegar que el
de Roambi, ya que hay un objetivo
más pequeño para deslizar.
Overview plus Data
• El patrón Overview plus Data se refiere a un resumen del contenido de la tabla que se muestra sobre las filas
individuales de datos.
Grouped Rows
• La agrupación de filas puede facilitar la
navegabilidad de los datos de una tabla.
• Los grupos de filas pueden actuar como
encabezados de sección, como las
transacciones agrupadas por fecha en el
ejemplo de Mint, o como resúmenes de
subsecciones, como las filas totales
amarillas en el ejemplo de MicroStrategy
Mobile.
Cascading Lists
• Por razones obvias, una tabla de árbol sería
bastante engorrosa en la pantalla de un
teléfono, pero una lista en cascada puede
proporcionar la misma estructura jerárquica.
• Esta lista de cascadas en Wine Spectator
hace que sea fácil navegar de un país a otro
en una tabla vintage.
• iOS se refiere a esto como una vista de
tabla, un elemento de la interfaz de usuario
que "presenta datos en una lista de
múltiples filas de una sola columna".
DropBox utiliza este patrón para su
navegación secundaria dentro de la pestaña
DropBox.
Table with Visual Indicators
• Las líneas de chispas y los iconos pueden
mejorar la visualización de la información de
una tabla, lo que facilita el trabajo sobre
elementos específicos de interés.
• El calendario de dieta utiliza flechas codificadas
por colores para mostrar si mi ingesta calórica
es más alta o más baja que lo que he gastado
por el día.
• La tabla Ventas por tienda de Roambi utiliza
iconos de sparklines plus para mostrar la forma
de las tendencias y los números de ventas
mensuales.
Editable Table
• Las tablas editables en las interfaces móviles se
encuentran casi exclusivamente en las
aplicaciones de hojas de cálculo como
QuickOffice.
• Muchas de las mismas pautas para tablas
editables en la Web se aplican a los dispositivos
móviles:

▫ Indique claramente la celda y / o fila seleccionada.

▫ Si hay un formato específico para la celda, ofrezca el
editor apropiado (selector, girador, selector de color,
...).
▫ Proporcione comentarios y mensajes de error en
Guardar, no en Cambiar.
4.Search, Sort & Filter
Mientras esperaba una mesa en un restaurante local el otro día, revisé un par de documentos clasificados gratis.
Me sorprendí al darme cuenta de lo dependiente que he crecido en tres características simples que simplemente
no están disponibles en un modelo basado en papel: búsqueda, clasificación y filtrar.
AutoDirect y algunos de los otros regalos se pueden organizar por categoría (como camiones, furgonetas, SUV),
pero otros como Greensheet simplemente enumeran una página tras otra de artículos para la venta. De hecho,
tendría que leer todos los anuncios del periódico para ver si alguien estaba vendiendo lo que quería.

Este capítulo explora una docena más de enfoques diferentes para buscar, clasificar y filtrar aplicaciones móviles.
4.1.Search
• En esta sección, veremos
patrones de búsqueda
específicos para aplicaciones
móviles, incluidos patrones para:
Explicit Search
• La búsqueda explícita se basa en una
acción explícita para realizar la búsqueda
y ver los resultados. Esa acción podría
ser presionar un botón de búsqueda en la
pantalla, como Walmart, o en el teclado,
como Target.
• Los resultados generalmente se
muestran en el área debajo de la barra
de búsqueda. Considere emparejar un
patrón de búsqueda explícito con el
patrón de autocompletar.
Search with Auto-Complete
• Probablemente, los patrones de búsqueda más
ampliamente adoptados están en las aplicaciones
web y móviles donde se completen
automáticamente.
• Al ingresar un texto de inmediato una serie de
posibles resultados se mostrara.
• Idealmente, los resultados se mostrarán de
inmediato, pero se debe usar un indicador de
progreso para la retroalimentación del sistema.
• Netflix (arriba) usa un indicador en el campo de
búsqueda, mientras que Fidelity (abajo) muestra
uno donde los resultados eventualmente se
mostrarán.
Dynamic Search
• Este patrón también se puede considerar
filtrado dinámico. Al ingresar el texto de
búsqueda se filtrarán dinámicamente los
datos en la pantalla. En estos ejemplos
de BlackBerry App World y People en
webOS, al ingresar texto se filtra la lista
existente de elementos.
• Funciona bien para conjuntos de datos
restringidos, como una libreta de
direcciones personal o una biblioteca de
medios, pero puede ser poco práctico
para buscar grandes conjuntos de datos.
Scoped Search
• A veces es más fácil (y más rápido) llegar
al resultado deseado al determinar el
criterio de búsqueda antes de realizar la
búsqueda. Google y Photobucket usan
diferentes diseños para el mismo fin.
• AllRecipes también le permite seleccionar
criterios (o filtros) antes de enviar la
búsqueda.
• Dropbox predetermina el alcance inicial a
Todos, pero puede cambiarlo a Archivos o
Carpetas antes o después de tocar el
botón de búsqueda.
Saved and Recent Searches
• Las interfaces móviles exitosas siguen una
forma máxima básica de usabilidad: respetar el
esfuerzo de los usuarios.
• Las búsquedas guardadas y recientes hacen
facilitan la selección de búsquedas anteriores,
en lugar de volver a escribir las mismas
palabras clave o los criterios de búsqueda.
eBay y Apple iOS usan búsquedas guardadas
y recientes para aumentar la eficiencia de los
usuarios.
• Otras opciones para respetar el esfuerzo de
los usuarios incluyen opciones de búsqueda
basadas en la ubicación como Trulia y
búsquedas de códigos de barras, como
PriceCheck de Amazon.
Search Form
• Este patrón se caracteriza por una forma separada para ingresar criterios múltiples y un botón de
búsqueda explícita.
• Kayak y Whole Foods usan formularios de búsqueda para recopilar los criterios necesarios para buscar
vuelos y hoteles.
Search Results/View Results
• Una vez que se realice una búsqueda, los
resultados se pueden mostrar en la misma
pantalla o en una pantalla de resultados
dedicada. Los resultados se pueden mostrar
en una tabla o lista, en un mapa o satélite, o
como imágenes en miniatura. Se pueden usar
múltiples opciones de visualización, según el
tipo de resultados y las preferencias del
usuario.
• La carga diferida es una técnica común de
usar para que se muestren algunos resultados
mientras se carga el resto, consulte Ebay
Motors y BestBuy.
• Muchas aplicaciones ofrecen un botón para
"ver más resultados" explícitamente o
cargarán automáticamente más resultados
cuando se active la pantalla.
 4.1.Sort Patterns
• Es importante elegir una clasificación
predeterminada razonable para mostrar
los resultados de búsqueda.
• Un poco de sentido común más la
validación del usuario es la mejor manera
de elegir el orden de clasificación
predeterminado.
• Para ofrecer una funcionalidad de
clasificación adicional, elija un patrón de
diseño de interfaz existente:

•Ordenar en pantalla
•Selector de orden de clasificación
•La forma de clasificación
Onscreen Sort
• Cuando solo hay unas pocas opciones
de clasificación, una ordenación en
pantalla puede proporcionar una solución
simple de una sola pulsación.
• Colocar la barra de ordenar en la parte
superior o inferior de la pantalla
dependerá de los otros elementos de la
pantalla.
• Target proporciona cuatro opciones de
clasificación con un botón de tres toggle.
Para la opción de clasificación de
precios, ofrecen dos opciones: ordenar
por precio ascendente y ordenar por
precio descendente.
Sort Order Selector
• El patrón de selector es una buena
alternativa a la ordenación en pantalla.
Hay varios controles de IU diferentes
que se pueden usar para la selección,
pero se debe considerar las pautas de
diseño para el sistema operativo que
está diseñando.
• Los títulos de las opciones pueden ser
más largos (más explícitos) y se
pueden mostrar más opciones.
• Walmart coloca el botón de ordenación
cerca del campo de búsqueda,
mientras que Realtor.com lo baja con
las otras opciones de vista y acciones
Sort Form
• Algunas aplicaciones han consolidado las
opciones de clasificación y filtro en una sola
pantalla, generalmente denominada
"Refine".
• Este es el patrón de ordenación que
requiere más esfuerzo y requiere que el
usuario abra el formulario, seleccione una
opción y luego aplique la selección.
• Considere la opción de clasificación más
eficiente para alternar u ordenar los
patrones de selección de pedidos antes de
elegir este patrón
4.3.Filter
• Los grandes conjuntos de datos pueden requerir un filtrado adicional, también llamado refinación.
• El filtrado depende de que el usuario seleccione los criterios para refinar el conjunto de resultados de
búsqueda o un gran conjunto de objetos. Los patrones de filtrado comunes incluyen:
Onscreen Filter
• De forma similar a la ordenación en pantalla, el
filtro en pantalla se muestra con los resultados
o la lista de objetos.
• HeyZap usa la barra de botones de alternar
estándar, mientras que Google usa pestañas
verticales.
• CBS News y la aplicación ACL Festival utilizan
una barra de filtro de desplazamiento como
una forma de permitir a los usuarios afinar
rápidamente ciertos tipos de artículos y
bandas, respectivamente.
• SXSW ofrece una barra de botones de filtro
combinada con una segunda fila de opciones
de filtrado. El lector de noticias de Feed a
Fever usa un conjunto de cuadros combinados
estilizados muy simples para filtrar las noticias.
Filter Drawer
• Casi tan eficiente como el filtro en pantalla,
se puede usar un cajón para revelar las
opciones de filtro. Al presionar o tocar un
mango se abrirá el cajón.
• El Audible’s drawer muestra una barra de
alternancia de filtro simple, mientras que
Sam ofrece una gran cantidad de opciones
de filtro que se pueden aplicar al mapa de las
ubicaciones de los clubes.
• Un mejor diseño para Sam sería dejar el
mapa visible y permitir el filtrado dinámico en
lugar del botón explícito de "filtro".
Filter Dialog
• Al igual que una ventana emergente en una
aplicación web, el cuadro de diálogo de filtro
es de naturaleza modal. Requiere que el
usuario seleccione una opción de filtro o
cancelar la acción.
• TripAdvisor en iOS tiene un filtro
personalizado de diálogo, mientras que USPS
Mobile en Android depende del control de
selector predeterminado.
• Si bien el cuadro de diálogo Filtro puede
hacer el trabajo, los primeros dos patrones
proporcionan más libertad para que los
usuarios experimenten y apliquen los filtros
directamente en contexto.
Filter Form
• Los grandes conjuntos de datos pueden beneficiarse de opciones de filtro / refinamiento más
avanzadas.
• Por ejemplo, Kayak usa un formulario para filtrar hoteles según el precio, la marca y las estrellas.
Zappos usa un enfoque similar, usando los botones estándar / listo de iOS en la barra de título.
• Freetime utiliza controles personalizados en su forma de filtro. Primero elige la categoría de filtro, luego
elige los criterios de filtro y luego aplica el filtro al calendario.
Filter Form
5.Tools
Se sugiere proporcionar entradas donde hay salida; la interfaz debe responder directamente a la
interacción de los usuarios. Un buen ejemplo en la Web es la edición en línea de Flickr.
Toolbar
• La barra de herramientas, también llamada barra de
acciones, contiene herramientas para acciones a nivel de
pantalla.
• En Pandora, la barra de herramientas incluye opciones para
cambiar a la vista de lista, clasificar la canción, pausar u
omitir.
• A + Picture Effects para BlackBerry también proporciona
una barra de herramientas de acciones comunes.
• Algunas veces las acciones pueden tener opciones
adicionales para ser especificadas. Un enfoque neutral del
sistema operativo para mostrar las opciones de una
herramienta seleccionada es con un menú en cascada.
Muchos dispositivos móviles las aplicaciones usan esta
técnica para ofrecer opciones de edición y formato.
 Option Menu
• Los menús opcionales, como las barras de herramientas, pueden contener acciones a nivel de pantalla,
pero se puede acceder y mostrar de diferentes maneras.
• A los menús de Android se accede con un botón de menú fijo, pero otros menús se pueden abrir
moviendo un control o tocando un botón de menú en la pantalla.
Call to Action Button
• Un botón de llamada a la acción puede ser una mejor opción que una barra de herramientas o un menú
cuando solo tiene una llamada a la acción principal en la pantalla.
• Las aplicaciones como Groupon, Gilt, Expedia y Meebo han optado por este patrón en lugar de una barra
de herramientas tradicional o un menú de opciones.
Contextual Tools
• Las herramientas contextuales se pueden usar para trabajar en un objeto particular en la pantalla.
• Tiene sentido si solo mostramos estas herramientas una vez que se ha establecido el contexto.
• Por ejemplo, presionar un objeto (un gesto específico de Android) revelará las opciones de gráficos en ChartDroid, o al tocar en un
tweet en Tweed en WebOS se revelará una lista de opciones.
• Las herramientas contextuales pueden ser modales, como los ejemplos anteriores, o no modales, como Daily-Burn y Twitter mobile.
Inline Actions
• Las acciones en línea también se pueden usar para trabajar en un objeto particular en la pantalla, pero a diferencia del
patrón anterior, estas acciones son siempre visibles.
• Por ejemplo, los botones de descarga en Audible y botones de compra en Teleflora.
• Muchas aplicaciones confían en botones de estado completo para las acciones en línea, como el botón Agregar en
ACL que cambia para eliminar y el botón de estrella de favoritos en OpenCaching que se puede activar o desactivar.
Multi-State Button
• Normalmente los controles de interfaz de usuario deben tener un único propósito. Sin embargo, el botón Multi-State
es una excepción.
• Puede existir que el botón actúe como mecanismo de activación y retroalimentación.
• Tomemos como ejemplo la experiencia de descargar una musica. Primero verá la acción en línea para descargar
una historia. Toca de nuevo para descargar. Luego se convierte en un indicador del progreso de la descarga con
una opción para deslizar y cancelar, o reproducir la historia.
Multi-State Button
• Otro caso común para un botón de estado múltiple es eliminar o eliminar un objeto.
• Los botones Multi-State funcionan bien para una serie de acciones estrechamente correlacionadas eso
se llevará a cabo en sucesión con una pantalla limitada
 Bulk Actions
• Las acciones masivas comunes incluyen: selección, adición / eliminación y reordenamiento. En lugar de saturar la
pantalla principal con todas estas opciones, proporcione un modo para acciones masivas.
• La aplicación de fotos nativa para iOS ofrece un modo de "selección" para elegir fotos del rollo de la cámara para
compartir. Del mismo modo, Animoto proporciona un modo para reordenar y / o eliminar clips en un video.
• Y herramientas como Path y Pulse proporcionarán pantallas de configuración simples para acciones masivas como
agregar, eliminar y reordenar.
6.Charts
El diseño de gráficos móviles hereda muchas de
las mismas pautas y mejores prácticas que el
diseño gráfico de impresión y escritorio. Todos
estos patrones se basan en un diseño de gráfico
básico. Como mínimo, los gráficos deben incluir un
título, etiquetas de ejes y datos. Los datos pueden
mostrarse como un pie, barra, columna, área,
línea, burbuja, diagrama de dispersión, viñeta,
radar, calibre o gráfico mixto. Dependiendo del tipo
de gráfico, una leyenda puede ser necesaria.
7.Invitations
Las invitaciones son sugerencias útiles que se
muestran la primera vez que un usuario abre
una aplicación o llega a un lugar nuevo.
Sugieren acciones y guían al usuario a la
funcionalidad deseada. Una invitación simple
puede convertir una experiencia de primera vez
desalentadora por primera vez en uno
satisfactorio
8.Feedback
El principio de usabilidad de los comentarios dice "Proporcione retroalimentación apropiada, clara y oportuna al
usuario para que vea los resultados de sus acciones y sepa qué está pasando con el sistema". La retroalimentación
puede variar desde simples indicadores de progreso y mensajes de confirmación, hasta animaciones y efectos más
sofisticados. Los patrones de retroalimentación móvil incluyen:
9.Affordance
Es la calidad de un objeto que le permite a un individuo realizar una acción, como un mango en un cajón o una perilla
en una puerta. Ejemplos comunes en software incluyen: arrastre los controles, peelings de página, controles 3D como
botones y controles deslizantes. Las aplicaciones móviles pueden aprovechar los mismos patrones. Aquí hay algunos
patrones comunes que se encuentran en las IU con pantalla táctil:
10.Help
Las aplicaciones móviles deben ser fáciles de aprender y rápidas de dominar. Pero no importa cuán
intuitiva sea la aplicación, se debe proporcionar alguna forma de Ayuda. Un par de patrones
comunes de Ayuda son:
11.Anti-Patterns
Los antipatrones, también llamados trampas, son clases de malas soluciones a los problemas
reinventadas con frecuencia. Se estudian como una categoría para que puedan evitarse en el futuro,
por lo que se pueden reconocer instancias de ellas cuando se investigan sistemas que no funcionan.
Los siguientes patrones de diseño son riesgos comunes que se deben evitar.