Directrices para zoom semántico

En este tema, se describe la nueva interfaz de usuario de Windows para usar el zoom semántico. También se ofrecen directrices sobre la experiencia del usuario que te conviene tener en cuenta al usar estos nuevos mecanismos de interacción en tu aplicación de la Tienda Windows.

Introducción al zoom semántico

El zoom semántico es una técnica optimizada para entrada táctil que se usa en las aplicaciones de la Tienda Windows de Windows 8 para presentar conjuntos grandes de datos o contenidos relacionados en una sola vista (como un álbum de fotos, una lista de aplicaciones o una libreta de direcciones) y navegar por ellos.

Nota  

Esta funcionalidad es similar al movimiento panorámico y el desplazamiento (que pueden usarse junto con el zoom semántico) en una vista única.

El zoom semántico usa dos modos diferentes de clasificación (o niveles de zoom) para organizar y presentar el contenido: un modo de bajo nivel (o acercado) que se usa típicamente para mostrar elementos en una estructura plana y un modo de alto nivel (o alejado) que muestra los elementos en grupos y permite que el usuario navegue y examine rápidamente el contenido.

La interacción de zoom semántico se ejecuta con los gestos de reducir y ampliar (separar los dedos acerca el contenido y acercar los dedos lo aleja) o bien manteniendo presionada la tecla Ctrl mientras se desplaza la rueda de desplazamiento del mouse o bien manteniendo presionada la tecla Ctrl (con la tecla Mayús, si no se dispone de teclado numérico) y presionando la tecla de signo más (+) o menos (-).

Entre las aplicaciones que pueden usar el zoom semántico se encuentran las siguientes:

• Una libreta de direcciones que organiza los contactos por orden alfabético (o de otro modo) y presenta los datos mediante letras del alfabeto. El usuario puede acercar una letra para ver los contactos incluidos bajo esa letra.
• Un álbum de fotos que organiza las imágenes mediante metadatos (como la fecha en que se tomó cada foto). El usuario puede acercar una fecha concreta para ver la colección de imágenes incluidas bajo esa letra.

• Un catálogo de productos que organiza los elementos por categorías.

• Otros ejemplos de diseños de zoom semántico:

  Acercar	Alejar

   

Navegación con zoom semántico

Si bien es posible navegar por el contenido usando solo el movimiento panorámico y el desplazamiento (consulta Directrices para movimiento panorámico), cuando añades el zoom semántico, se habilitan funcionalidades de navegación y organización muy eficaces.

El movimiento panorámico y el desplazamiento son útiles para conjuntos pequeños de contenido y distancias cortas. Pero cuando se trata de conjuntos grandes de contenido, la navegación pronto se entorpece. El zoom semántico reduce en gran medida la percepción de recorrer grandes distancias al navegar por volúmenes grandes de contenido y permite acceder con facilidad a ubicaciones dentro del contenido

Nota  

No debes confundir el zoom semántico con el zoom óptico (consulta Directrices para zoom óptico y cambio de tamaño). Si bien comparten la misma interacción y el mismo comportamiento básico (mostrar más o menos detalle en función de un factor de zoom), el zoom óptico consiste en el ajuste del aumento para un área de contenido o un objeto, como una fotografía.

Salto de desplazamiento

Pulsar el contenido en modo alejado aplica zoom en la vista y la mueve panorámicamente hasta el punto pulsado, como se muestra en los tres diagramas siguientes.

Al alejar la vista, la totalidad del contenido puede ser un destino táctil.

Acción de pulsar una sección del contenido.

Con acercamiento y movimiento panorámico hasta el área pulsada.

Transiciones

Para la transición de un nivel del zoom semántico a otro, se usa una animación fluida de encadenado y escalado. Este es el comportamiento predeterminado de Windows Touch y no puede personalizarse.

Consideraciones y recomendaciones

A ti te corresponde definir dos niveles semánticos en tus aplicaciones.

Piensa en estas cuestiones cuando diseñes el modo alejado:

• ¿Cómo debe cambiar la estructura y la presentación de la información en función del nivel de zoom?
• ¿Resultaría útil usar sugerencias o "postes indicadores" para navegar por los datos?
• ¿Qué cantidad de contenido ofrece una vista semántica útil a la vez que minimiza el movimiento panorámico y el desplazamiento?

A menudo, estas consideraciones entran en conflicto entre sí. Deseas ofrecer contenido enriquecido con mucha información para que los usuarios sepan hacia dónde se dirigen, pero debes equilibrar esa información con la longitud total del nivel semántico. Si los usuarios deben desplazarse mucho en el modo alejado, pierdes la principal ventaja que te ofrece el zoom semántico —la navegación rápida.

Qué hacer y qué no hacer

Las siguientes indicaciones sobre qué hacer y no hacer te permitirán ofrecer a tus clientes una experiencia provechosa con el zoom semántico.

Qué hacer

Usa el tamaño de destino táctil correcto para elementos que puedan usarse o sean interactivos.

Para obtener más información, consulta el tema Directrices para destinos.

Ofrece una región de zoom semántico intuitiva y adecuada.

Los usuarios suelen iniciar el zoom semántico desde el área que rodea los elementos mostrados. Establece una región de zoom semántico lo suficientemente grande como para abarcar esa área. Por ejemplo, la Tienda Windows proporciona una gran cantidad de espacio vacío alrededor de la lista de aplicaciones donde el usuario puede ubicar los dedos para acercar o alejar el contenido.

Usa estructura y semántica inherentes a la vista.

Usa los nombres de los grupos para elementos en una colección agrupada.

Usa criterios de ordenación (como orden cronológico de fechas u orden alfabético para una lista de nombres) para una colección ordenada que no esté agrupada.

Usa páginas para representar una colección de documentos.

Asegúrate de que la dirección del movimiento panorámico y el diseño de los elementos no cambie en función del nivel de zoom.

Las interacciones de movimiento panorámico y diseño deben ser predecibles y coherentes en todos los niveles de zoom.

Limita a tres el número de páginas (o pantallas) en el modo con alejamiento.

El zoom semántico permite que el usuario salte rápidamente al contenido. Si introduces un exceso de movimiento panorámico, se pierde esta ventaja.

Qué no hacer

No uses el zoom semántico para cambiar el ámbito del contenido.

Por ejemplo, un álbum de fotos no debe cambiar nunca a una vista de carpeta en el Explorador de archivos.

No establezcas bordes en los controles secundarios del control del zoom semántico.

Si configuras bordes en SemanticZoom y en sus controles secundarios, se verán tanto el borde de SemanticZoom como el del control secundario que está en la vista. Al acercar o alejar, los bordes del control secundario se amplían o reducen junto con el contenido y no quedan bien. Define un borde sólo en el control SemanticZoom.

Laboratorios prácticos de Windows 8

Si quieres probar a trabajar con el zoom semántico y otras características fundamentales de Windows 8, descarga los laboratorios prácticos de Windows 8. Estos laboratorios sirven de introducción modular y detallada a la creación de una aplicación de la Tienda Windows de ejemplo en el lenguaje de programación que prefieras (JavaScript y HTML o C# y lenguaje de marcado de aplicaciones extensible [XAML]).

Temas relacionados

Conceptual

Directrices para las interacciones del usuario comunes

Diseño de la interacción táctil

Incorporación de controles de zoom semántico

Tutorial (aplicaciones de la Tienda Windows con JavaScript)

Inicio rápido: Incorporación de zoom semántico

Inicio rápido: punteros

Inicio rápido: gestos y manipulaciones de DOM

Inicio rápido: gestos estáticos

Inicio rápido: gestos de manipulación

Tutorial (aplicaciones de la Tienda Windows con C#/VB/C++ y XAML)

Inicio rápido: entrada táctil

Inicio rápido: controlar entrada de puntero

Tutorial (aplicaciones de la Tienda Windows con C++ y DirectX)

Responder a la entrada táctil (DirectX y C++)

Muestras (WinJS)

Muestra en HTML de SemanticZoom para controles personalizados

Muestra en HTML de agrupación de ListView y SemanticZoom

Muestras (DOM)

Muestra de desplazamiento, movimiento panorámico y zoom HTML

Entrada: muestra de gestos instanciables

Muestras (API de aplicaciones de la Tienda Windows)

Entrada: muestra de manipulaciones y gestos (JavaScript)

Entrada: muestra de gestos de Windows 8

Entrada: muestra de eventos de entrada de usuario de XAML

Muestra de desplazamiento, movimiento panorámico y zoom XAML

Muestras (DirectX)

Muestra de entrada táctil de DirectX

Entrada: muestra de manipulaciones y gestos (C++)

Referencia

SemanticZoom

Windows.UI.Input

Windows.UI.Xaml.Input