Aplicaciones de productividad

Windows 8.1 es una plataforma excelente para aplicaciones de productividad. Además del entorno de escritorio tradicional, que permite que las aplicaciones de productividad existentes funcionen correctamente, el nuevo entorno para aplicaciones de la Tienda Windows permite crear nuevos y modernos tipos de aplicaciones de productividad. Aquí te mostramos los diferentes modos de mejorar las aplicaciones de productividad aprovechando el estilo de diseño Microsoft y las funcionalidades de Windows 8.1.

Introducción

Windows 8.1 proporciona un alcance sin precedente en una gran variedad de dispositivos, desde tabletas táctiles y centradas en lápiz hasta equipos portátiles y de escritorio de alta resolución. En el caso de las aplicaciones de productividad, esto implica una oportunidad única de usar diferentes modos de entrada a fin de permitir que los usuarios sean productivos en una variedad de escenarios y casos de uso.

La Tienda Windows te ofrece oportunidades para distribuir, promover y vender tus aplicaciones. Se admiten escenarios, como versiones de evaluación y compras desde la aplicación, con un uso mínimo de codificación, para que puedas empezar a ganar dinero rápidamente.  

En este tema se destacan las funciones de Windows 8.1 que son de particular importancia para las aplicaciones de productividad, como por ejemplo:

  • Aplicaciones de la Tienda Windows: un nuevo lenguaje de diseño para las aplicaciones que resalta la creación de contenido de pantalla completa y escenarios de productividad envolventes. Windows se quita de en medio para que el contenido sea lo más importante.
  • Iconos dinámicos: maximiza la participación y permite a los usuarios volver a la aplicación fácilmente con iconos dinámicos que muestran el contenido reciente en el que ha estado trabajando el usuario. Los iconos secundarios también facilitan la vinculación profunda de contenido y permiten a los usuarios anclar el contenido que usan con mayor frecuencia dentro de la aplicación.
  • Contrato para contenido compartido: Windows 8.1 facilita la colaboración y el uso compartido entre aplicaciones. De este modo, tu aplicación pueda usarse junto con otras para ayudar a los usuarios a hacer todo lo que necesitan para ser productivos.
  • Contrato de Buscar: una nueva función del sistema operativo de nivel superior que ayuda a los usuarios a buscar y organizar su contenido con mayor facilidad que nunca. Tu aplicación se incluye en los resultados de la búsqueda para que los usuarios la reconozcan cuando buscan contenido.
  • Cuadro de búsqueda: permite buscar contenido de la aplicación en su interior y proporciona una vista personalizada de los resultados.
  • Selector de archivos: el selector de archivos permite a los usuarios de tus aplicaciones de productividad usar archivos, documentos y fotos del sistema de archivos y de otras aplicaciones y servicios que participan de los contratos del selector de archivos.
  • Zoom semántico: esta característica nativa de Windows 8.1 permite a los usuarios reducir y alejar una aplicación para obtener una vista panorámica del contenido y los elementos en los que están trabajando. Pruébalo en la pantalla Inicio para verlo en acción.
  • Ventanas redimensionables: el usuario puede cambiar el tamaño de las aplicaciones para que varias puedan ejecutarse paralelamente. El usuario en verdad puede ejecutar muchas tareas y mantenerse productivo con la aplicación todo el tiempo.

Pantalla completa

Una de las ventajas más evidentes de las aplicaciones de la Tienda Windows para productividad es que no deben competir por espacio con otras aplicaciones ni con la interfaz de usuario de Windows. Una aplicación puede usar todos los píxeles visibles en la pantalla para presentar su contenido. Todos los elementos de la interfaz de usuario que no son esenciales o distraen a los usuarios pueden ocultarse y mostrarse con un gesto simple para que la aplicación siempre tenga un espacio amplio para mostrar la información más importante para la tarea que se está realizando. La filosofía de diseño de "anteponer el contenido al contenedor visual", que resulta tan estimulante y divertida en las aplicaciones de vídeo o revista, también se aplica a las aplicaciones de productividad. Cuando se quitan las distracciones, es fácil concentrarse en el contenido que presenta la aplicación.

Al diseñar una aplicación de productividad, primero identifica la tarea principal del usuario. Luego usa cada píxel de la pantalla para que tu aplicación realice esa tarea de manera excelente. Piensa en cómo hacer la tarea más fácil, rápida o divertida gracias a esta mayor cantidad de espacio. Piensa en una visualización enriquecida de la información interesante y práctica, en lugar de una representación estática de los datos. Piensa en cómo la aplicación puede usar el espacio y su ubicación para transmitir la información. Muchas de las convenciones y los controles que se usan actualmente se desarrollaron cuando las pantallas de los equipos de escritorio tenían una resolución más baja de la que tienen los smartphones actuales. Las aplicaciones de la Tienda Windows proporcionan la posibilidad de redefinir el modo en que los usuarios interactúan con la información, la analizan y la manipulan para llevar a cabo su trabajo.

Las aplicaciones de productividad por lo general implican una combinación de escenarios de creación y consumo de contenido. Por ejemplo, pueden usarse tanto para crear y leer documentos como para crear y administrar listas de tareas pendientes. Las aplicaciones de productividad también varían ampliamente en la complejidad con que controlan la navegación y la exposición de comandos y experiencias: desde aplicaciones simples y ligeras para tareas pendientes hasta aplicaciones de creación de contenido enriquecidas y complejas con menús por niveles que incluyen un sinfín de opciones. Una aplicación de productividad de Windows 8.1 es buena si permite navegar por estas experiencias de un modo rápido, fluido y agradable.

Diseño y navegación en las aplicaciones de productividad

El patrón de navegación que elijas dependerá de los tipos de escenarios que admita la aplicación. Si en la aplicación tienes diversas experiencias enriquecidas (por ejemplo, si presentas varios documentos), con cierta estructura y organización entre ellas, un patrón jerárquico puede ayudarte a incorporar todo el contenido en el nivel superior en lugar de esconderlo tras menús o pestañas. Por otro lado, si tu aplicación no tiene una gran densidad de información o escenarios que requieran de una estructura o jerarquía, elige un patrón plano que permita a los usuarios navegar rápidamente por las experiencias de la aplicación. Las aplicaciones con vistas "maestro y detalles" (por ejemplo, las aplicaciones de correo electrónico y mensajería) pueden usar una vista de lista para exhibir mejor el contenido. En el caso de algunas aplicaciones de productividad, ciertos escenarios pueden necesitar de diferentes tipos de entrada de datos, como formularios, por lo que pueden aprovechar el diseño de formulario que se sugiere más adelante en este artículo. Elige el patrón que mejor ayude a los usuarios a encontrar el contenido que les interesa con rapidez y confianza.

Para obtener más información sobre patrones de navegación para tu aplicación, consulta Patrones de navegación.

Consulta el patrón de navegación plano como parte de nuestra serie Características de aplicaciones, de principio a fin.

Patrón jerárquico

Las aplicaciones de productividad que tienen una estructura jerárquica y un conjunto de datos de gran tamaño, como una aplicación de notas con una gran cantidad de notas y blocs de notas, pueden usar un patrón jerárquico que presente todo el contenido del usuario en el nivel superior. Este modelo les fascina a los usuarios, ya que presenta todo el contenido frente a sus ojos.

La página de concentrador de tu aplicación

La página de concentrador consta de varias secciones, cada una de las cuales se asigna a diferentes secciones de la aplicación. Cada sección puede exponer contenido o funciones. El concentrador debe ofrecer una amplia variedad visual para atraer a los usuarios a distintas partes de la aplicación. Por ejemplo, la siguiente aplicación de notas muestra algunas de las notas más recientes de cada bloc de notas en el nivel superior. La siguiente imagen muestra una página de concentrador de ejemplo.

Página de concentrador de ejemplo

Al pulsar cada una de las notas, el usuario se dirige directamente a esa nota. Al pulsar el encabezado (por ejemplo, "Travel - NYC"), se muestra la página de sección de ese bloc de notas, si hay más contenido asociado al bloc de notas del que se muestra en la página principal.

Considera la posibilidad de permitir que los usuarios decidan cómo ordenar su contenido. Por ejemplo, pueden elegir ordenarlo alfabéticamente, por fecha, por tipo de contenido o en función de si se comparte o no. El modo correcto de ordenarlo depende del contenido que presenta la aplicación y del patrón de uso típico de los usuarios. La siguiente imagen muestra un ejemplo del orden de las notas.

Aplicación con ordenación de notas de ejemplo

Barra de la aplicación superior

También puedes usar la barra de la aplicación superior para permitir a los usuarios saltar rápidamente entre las secciones de la aplicación en sentido lateral. Por ejemplo, un usuario que lee una nota de un bloc de notas puede moverse rápida y fácilmente a una nota de otro bloc de notas mediante la barra de la aplicación superior. En la siguiente imagen se muestra una barra de la aplicación superior que aparece en una aplicación de notas cuando el usuario se desplaza rápidamente desde el borde superior o inferior.

Aplicación de bloc de notas con encabezado desplegable¾

Zoom semántico

El zoom semántico acerca o aleja el contenido para mostrar su aspecto y permite a los usuarios navegar rápidamente dentro de una sola vista. Por ejemplo, en una aplicación de notas, los usuarios pueden alejar y ampliar rápidamente para pasar de un bloc de notas a otro. Como alternativa, si los usuarios eligen mostrar sus notas por fecha, pueden pasar rápidamente de las notas más recientes a las más antiguas.

Esta imagen muestra la agrupación del contenido cuando se aleja.

Contenido agrupado por título en el zoom semántico.

El zoom semántico también se puede usar en una página de sección específica para navegar por el contenido de esa sección o categoría. Por ejemplo, en la aplicación de notas, los usuarios pueden usar el zoom semántico para saltar rápidamente entre diferentes notas del mismo bloc de notas.

Para obtener más información sobre el zoom semántico, consulta Directrices para zoom semántico.

Patrón plano

Si la aplicación tiene la mayor parte del contenido en el mismo nivel, sin una gran cantidad de jerarquía, considera usar la navegación plana. Este patrón permite a los usuarios moverse entre documentos, páginas, pestañas o modos que residen en el mismo nivel jerárquico, de manera rápida y fluida. Lee Diseño de navegación para aplicaciones de la Tienda Windows para obtener más información sobre el diseño plano.

Además, si los escenarios de tu aplicación pueden beneficiarse de una interfaz de múltiples documentos, el patrón plano te resultará muy útil. La barra de la aplicación superior es perfecta para cambiar entre varios contextos. Por ejemplo, en una aplicación de creación de hojas de cálculo, el patrón plano permite alternar rápidamente entre las diferentes hojas de cálculo en las que se encuentra trabajando un usuario.

Algunas aplicaciones pueden elegir incluir otras funciones dentro de la barra de la aplicación superior, como agregar un botón de signo más ("+") para crear una nueva hoja de cálculo en la propia barra. En el explorador (una aplicación de la Tienda Windows) que se muestra a continuación puedes ver un ejemplo.

El explorador con funciones de navegación adicionales.

Diseño de lista

Si tu aplicación de productividad tiene escenarios que involucran la noción de una vista "maestro y detalles", donde la selección de un elemento determina lo que se muestra en un panel de detalles, considera usar un diseño de lista para el panel maestro. Por ejemplo, una aplicación de administración de proyectos puede mostrar hitos y fechas límite en un panel maestro y, cuando se selecciona un elemento del panel, puede mostrar los detalles relevantes en la sección de detalles. Una aplicación de correo electrónico puede colocar la Bandeja de entrada del lado izquierdo de la pantalla y el panel de lectura del lado derecho, como se muestra a continuación.

Aplicación de correo electrónico con diseño de lista

Diseños de formulario

Los escenarios de las aplicaciones de productividad por lo general necesitan un diseño de formulario, en el que los usuarios tienen que especificar determinada información sobre algo en particular. Por ejemplo, al crear una invitación a una reunión en una aplicación de calendario, los usuarios deben especificar la ubicación, la hora de inicio, la hora de fin, la fecha, los asistentes y otra información similar. Este tipo de diseño suele usar una combinación de distintos tipos de controles y funciona mejor con un diseño basado en columnas.

A la hora de decidir qué diseño de formulario usar, considera el flujo de la tarea que quieres que complete el usuario y dónde será necesario el desplazamiento en ese flujo. El desplazamiento aumentará considerablemente cuando aparezca visible el teclado táctil, ya que este ocupa casi la mitad del espacio disponible en pantalla en orientación horizontal. Las notificaciones de error en línea, cuando aparecen, también incrementan la extensión del contenido y la necesidad de usar el desplazamiento.

En lugar de tratar de ajustar todos los controles en un formulario muy extenso, considera dividir la tarea en una secuencia de varios formularios.

Un diseño de una sola columna puede funcionar para formularios de desplazamiento vertical cortos o extensos. En el siguiente ejemplo de un diseño de una sola columna, la lectura y las pestañas se ordenan desde arriba hacia abajo y de izquierda a derecha.

Diseño de formulario de ejemplo

Un diseño de formulario de dos columnas aprovecha al máximo el espacio horizontal visible en orientación horizontal. Para minimizar la necesidad de desplazamiento del usuario, ordena la lectura y las pestañas de izquierda a derecha y desde arriba hacia abajo.

La siguiente imagen muestra un diseño de dos columnas.

El modo correcto de distribuir el contenido en un diseño de dos columnas.

No ordenes la lectura y las pestañas desde arriba hacia abajo y de izquierda a derecha en un diseño de dos columnas extenso y con desplazamiento. Esto resulta muy incómodo porque el usuario tiene que desplazarse hasta el final de la primera columna, volver a subir hasta el principio de la segunda columna y después desplazarse de nuevo hacia abajo para terminar de rellenar el formulario. Además, un diseño de dos columnas no resulta útil en orientación vertical porque exige que las columnas sean demasiado angostas.

Los siguientes ejemplos muestran qué se debe evitar en un diseño de dos columnas extenso y con desplazamiento.

El modo incorrecto de distribuir el contenido en un diseño de dos columnas.

Las aplicaciones de productividad suelen incluir varias tareas, en las que los usuarios van y vienen entre diferentes tipos de contenido dentro de la aplicación. Por ejemplo, un usuario puede alternar entre varios documentos, como artículos de investigación y deberes anteriores, al realizar un trabajo. Al permitir que los usuarios accedan a todo este contenido de forma rápida y fluida, maximizan su productividad con tu aplicación. Ten presente el uso de la barra de la aplicación superior descrita en Diseño de navegación para aplicaciones de la Tienda Windows para los documentos usados más recientemente, los documentos abiertos actualmente y cualquier tipo de contenido en la aplicación que sea relevante en el espacio de trabajo actual del usuario. Considera también la compatibilidad con varias ventanas para que los usuarios puedan hacer varias tareas en las distintas partes de la aplicación. Para más información, consulta Directrices para varias ventanas.

Comandos

Las aplicaciones de productividad suelen tener más comandos que los demás tipos de aplicaciones. Este hecho plantea cuestiones interesantes sobre la mejor manera de presentar los comandos para que puedan encontrarse fácilmente a la vez que se da prioridad al contenido del usuario. Los usuarios deben poder completar los escenarios principales de la aplicación (aquellos escenarios que facilitan el enunciado de puntos fuertes de tu aplicación) usando únicamente el Canvas de la aplicación. Siempre que sea posible, permite que los usuarios manipulen directamente el contenido en el Canvas, en lugar de agregar comandos que actúen sobre el contenido. Por ejemplo, cuando los usuarios leen un documento, deja que hagan el gesto de reducir y expandir directamente en el Canvas para ampliar o disminuir el tamaño de fuente de la visualización, en lugar de tener que usar un control para eso. Si quieres obtener más información sobre los comandos, consulta el tema sobre los patrones de comandos.

Algunos comandos y botones son tan esenciales para la aplicación que sería ridículo que no se mostraran en pantalla todo el tiempo. El botón Reproducir en una aplicación de vídeo en pausa, por ejemplo, probablemente nunca estará oculto. Pero la mayoría de los comandos no necesitan aparecer en pantalla constantemente. Para ayudar a los usuarios a concentrarse para ser productivos con su contenido, muchos comandos que los distraen se pueden quitar de la pantalla y volver a mostrarlos cuando sean necesarios mediante un gesto simple y común.

La barra de la aplicación inferior es la barra de herramientas común que puede aparecer en el borde inferior de la aplicación. Por lo general, no se ve en la pantalla, pero se puede mostrar al deslizar el dedo rápidamente desde los bordes superior o inferior, al hacer clic con el botón secundario del mouse o al presionar la tecla del logotipo de Windows+Z en el teclado. Además, la barra de la aplicación inferior aparece automáticamente cuando se realiza una selección en el contenido de una aplicación. Las herramientas que recoge la barra de la aplicación inferior son contextuales, para que solo se muestren los comandos relevantes en cualquier momento. Por ejemplo, cuando se selecciona una palabra, la barra de la aplicación inferior aparece automáticamente y muestra los comandos de formato de texto. Si, en cambio, se selecciona una imagen, la barra de la aplicación inferior muestra los comandos de edición de imágenes. El carácter contextual de la barra de la aplicación impide que el usuario se distraiga con comandos irrelevantes. Como resultado, las herramientas que quieras usar siempre estarán a tu disposición, pero no te distraerán hasta que las necesites.

La barra de la aplicación superior también puede aparecer al invocar manualmente las barra de la aplicación. Mediante esta barra, el usuario podrá ir de una ubicación a otra dentro de una aplicación. Por ejemplo, un explorador puede usar esta barra para mostrar miniaturas de las pestañas abiertas actualmente. Una aplicación de procesamiento de texto puede usar esta barra para saltar entre distintos documentos abiertos. Una aplicación de compras puede usar este espacio para saltar entre diferentes departamentos de la tienda.

Las barras de la aplicación tanto superior como inferior pueden hospedar botones y menús. Si tienes varios comandos relacionados que son contextualmente relevantes al mismo tiempo, tiene sentido colocarlos en un menú que se abra desde la barra.

Barra de la aplicación inferior

Es importante organizar y presentar los comandos de un modo coherente y organizado para que los usuarios no se sientan abrumados por la gran cantidad de comandos. Por ejemplo, en una aplicación de notas, los usuarios pueden querer crear notas o blocs de notas nuevos, ordenar los blocs de notas alfabéticamente o por fecha, cambiar las opciones de formato del texto de la nota, insertar notas de audio, especificar una ubicación y agregar etiquetas e imágenes. La barra de la aplicación te ayuda a colocar todos los comandos de la aplicación sobre una superficie coherente que los usuarios encuentren predecible, a fin de que puedan encontrar todos los comandos bajo el mismo techo.

Para tu aplicación, completa un inventario de todos los comandos de la aplicación y analiza detenidamente sus escenarios de uso. Un modo de reducir los comandos que aparecen en la barra de la aplicación consiste en organizarlos en dos categorías: comandos globales de la aplicación y comandos que solo son útiles si se seleccionan. En el segundo caso, no muestres siempre los comandos contextuales en la barra de la aplicación. En su lugar, muéstralos únicamente cuando el usuario ha realizado una selección o en el contexto de la aplicación para el que son relevantes.

Coloca los comandos globales que aparecen en toda la aplicación, como las operaciones de sincronización y de "crear nuevo", en el lado derecho de la barra de la aplicación. En especial, coloca el comando Nuevo (el comando —que crea nuevo contenido, como una nota o un bloc de notas nuevo) —en el extremo derecho de la barra. Así, todos los comandos Nuevo tendrán una selección de ubicación coherente y serán fácilmente accesibles con los pulgares, independientemente de la aplicación o contexto específicos.

Usa los comandos Eliminar y Nuevo si tu aplicación administra entidades individuales que podrían persistir fuera de tu aplicación; —por ejemplo, una aplicación de correo electrónico. Eliminar y Nuevo siempre deben aparecer en este orden.

Botones Eliminar y Nuevo; Eliminar a la izquierda, Nuevo a la derecha

Usa los comandos Quitar y Agregar si tu aplicación administra una lista, por ejemplo, una lista de tareas pendientes. Quitar y Agregar siempre deben aparecer en este orden.

Botones Quitar y Agregar; Quitar a la izquierda, Agregar a la derecha

Existen otros comandos que afectan a las selecciones. Estos siempre deben aparecer en el extremo izquierdo, independientemente de si son comandos contextuales que aparecen cuando se realiza una selección o comandos que afectan a una selección existente, como las opciones de formato, "Seleccionar todo" y "Borrar selección".

Considera qué comandos se relacionan funcionalmente y deben colocarse cerca. Asegúrate de que colocas los comandos de manera coherente siempre que sea posible. Además, crea conjuntos de comandos para administrar el número de comandos que aparecen en la barra de la aplicación y considera crear menús de comandos y conjuntos de comandos siempre que sea posible. Por ejemplo, en una aplicación de notas, si usas un menú de comandos, puedes ordenar las notas alfabéticamente o por fecha mediante un solo comando. Los menús de comandos ayudan a organizar y reducir enormemente la cantidad de comandos de la barra de la aplicación, como se muestra a continuación. En la primera imagen, cada comando Nuevo es independiente en la barra de la aplicación. En la segunda imagen, todos los comandos Nuevo se agrupan en un menú, en un único comando Nuevo.

Ejemplo de dónde aparecen los comandos en la barra de comandos.

Comandos con control flotante en la barra de la aplicación

Asegúrate de que la configuración aparezca en el contrato de Configuración y no en la barra de la aplicación. De este modo, los usuarios podrán configurar la aplicación con los mecanismos comunes con los que ya están familiarizados.

Extender las barras de la aplicación

Ambas barras de la aplicación pueden hospedar botones y menús. Si tienes varios comandos relacionados que son contextualmente relevantes al mismo tiempo, tiene sentido colocarlos en un menú que se abra desde la barra. Las barras de la aplicación no se limitan a botones y menús, sino que ambas te permiten crear tus propios controles únicos. Si lo haces, piensa en la mejor manera en que los usuarios de la pantalla táctil, el mouse y el teclado pueden interactuar con los nuevos controles que crees.

Las aplicaciones con un alto volumen de comandos pueden considerar ampliar la barra de la aplicación de varias maneras. Para mantener la mayor coherencia posible con el resto del sistema, trata de seguir estas instrucciones:

  • Mantén el foco del usuario en el contenido: —da por hecho que la mayoría de las interacciones comienzan con una manipulación directa del Canvas. Se espera que la mayoría de los comandos (si no todos) por lo general se encuentren fuera de la pantalla, sin funciones visibles para mostrarlos. Usa todos los gestos que te ofrece el sistema para mostrar y ocultar la barra de la aplicación a fin de mostrar y ocultar tu interfaz de usuario. Al agregar tu propia interfaz de usuario oculta alternativa con diferentes métodos de invocación, puedes incluir más botones, widgets y flechas en la pantalla para proporcionar indicaciones al usuario. Al basarte en los gestos del sistema, evitas agregar distracciones en la pantalla que quiten el protagonismo al contenido del usuario.
  • Coloca los comandos en la barra de la aplicación inferior: en las aplicaciones de la Tienda Windows, la ubicación natural y esperada de los comandos es en el borde inferior de la aplicación (o justo sobre el teclado táctil). Esta ubicación permite a los usuarios del teclado táctil interactuar con los comandos sin bloquear la vista del contenido. La ubicación también se relaciona con el gesto de toque usado para mostrar los comandos manualmente. Si colocas los comandos en otra ubicación, esta será menos predecible para los usuarios y podría interferir con el contenido que el usuario quiere ver o con el que pretende interactuar.
  • Coloca las barras de navegación en la barra de la aplicación superior: en las aplicaciones de la Tienda Windows, la ubicación natural y esperada de la barra de navegación es en el borde superior de la pantalla. Como esta barra sirve para salir del contenido que se visualiza actualmente, no importa que la mano del usuario bloquee la vista de la pantalla al usarla. La barra de la aplicación superior suele mostrar miniaturas en lugar de botones, lo que ayuda a distinguirla de la barra de la aplicación inferior.
  • Mantén todos los comandos ocultos en la barra de la aplicación: —todos los comandos que se ocultan en la pantalla deben encontrarse en el mismo lugar. El gesto del sistema proporciona un modo simple y estandarizado para mostrar los comandos ocultos en la pantalla. Si los comandos se ocultan en varias ubicaciones, necesitarás varios modos de invocar esas superficies ocultas. Esto hace que los usuarios deban buscar tus comandos en demasiados lugares diferentes. Lo que es aún peor, cada superficie podría estar oculta tras otro gesto secreto o truco de la interfaz de usuario, lo que dará a los usuarios mucho trabajo encontrarlos, si es que lo logran.

Menús contextuales

Los comandos del Portapapeles, como Cortar, Copiar y Pegar para el texto seleccionado, y los comandos para copiar y abrir vínculos de direcciones URL pueden sacar provecho de los menús contextuales, que el sistema proporciona de manera predeterminada. Estos son ejemplos de comandos del Portapapeles en un menú contextual.

Comandos del Portapapeles en un menú contextual.

Entrada de datos en aplicaciones de productividad

Las aplicaciones de productividad pueden involucrar una gran cantidad de escenarios de entrada de datos. Por ejemplo, la creación de una lista de tareas pendientes u otro documento nuevo, la edición de una hoja de cálculo existente y la creación de una invitación en el calendario requieren la entrada de datos. Al hacer que la entrada de datos sea lo más rápida y fluida posible, ayudas a los usuarios a realizar su trabajo con rapidez y eficacia.

Analiza bien los escenarios y, siempre que sea posible, reduce la cantidad de texto que los usuarios deberán especificar en el sistema. Estrategias para lograrlo:

  • Controles comunes: para entradas que usan un formato preestablecido o requieren validación (como fecha, hora o ubicación), usa controles comunes, como el control de selección, cuadros de lista desplegables, botones de radio, casillas y selectores de fecha y hora.
  • Autocompletar: —usa Autocompletar siempre que sea posible para proporcionar a los usuarios satisfacción inmediata. Esto ayuda a que los usuarios sean más eficaces al escribir datos.

La siguiente imagen muestra las sugerencias de un selector de contactos.

Sugerencias de un selector de direcciones de correo electrónico.

Teclado táctil

Diseña tu aplicación de modo que funcione bien con teclados. Para ello, sigue las siguientes instrucciones del tema sobre cómo responder a la entrada de teclado. Diseña tu aplicación de modo que funcione bien con el teclado táctil. Para ello, sigue las siguientes instrucciones:

  • Coloca los controles de entrada de texto en la parte superior del Canvas de la aplicación, si es posible, de modo que el contexto o la región visible del usuario no cambie cuando aparezca el teclado táctil.
  • Si el tipo de la entrada de texto no permite que esta se coloque entera en la parte superior del Canvas, cuando el usuario pulsa o tabula en el control de entrada de texto, la aplicación se desplaza hacia arriba automáticamente hasta donde aparece el control para que el usuario pueda ver el texto que escribe. La ventana debe desplazarse de modo que quede un mínimo de 30 píxeles entre el control que se está utilizando y el borde de la pantalla y la parte superior del teclado táctil, a fin de dejar espacio suficiente para diversos gestos, elementos de la interfaz de usuario y la barra de redimensionamiento de selección de texto que se encuentran en los bordes. Para más información acerca de la selección de texto, lee el tema sobre las directrices para seleccionar texto e imágenes.
  • No dejes el teclado en la pantalla porque sí. Si no se espera que se escriba ningún texto, establece el campo de entrada en solo lectura o mueve el foco para que se oculte el teclado.

Así se ve el teclado táctil.

El teclado táctil en una aplicación

Si la pantalla de tu aplicación parece un formulario, donde suele haber una combinación de controles de edición (cuadros de texto) con otros controles (como botones de radio y casillas), la experiencia del usuario no sería buena si el teclado aparece y desaparece. Para abordar este problema, Windows 8 impide que el teclado táctil desaparezca cuando un usuario se encuentra en un formulario y navega entre ciertos controles comunes, como botones de radio, cuadros de texto, controles de selección y la barra de la aplicación. Puedes usar controles estándar para dar a tu aplicación una experiencia fluida sin ningún costo. En la siguiente imagen puedes ver cómo el teclado táctil permanece visible mientras el usuario se mueve de un control a otro.

Un formulario con controles estándar.

Revisión ortográfica

Habilita la revisión ortográfica en tu aplicación. Ayuda a los usuarios a escribir el texto rápidamente y con confianza. (La revisión ortográfica se puede habilitar con el control RichEdit). Cuando el usuario escribe una palabra que no está en el diccionario y presiona la barra espaciadora, la palabra aparecerá subrayada con una línea ondulada roja. Al pulsar la palabra mal escrita, se invoca el menú de revisión ortográfica en el que el usuario puede corregir la palabra u omitirla, como se muestra a continuación.

Ejemplo de una experiencia de revisión ortográfica

Reconocimiento de entrada manuscrita

Puesto que los usuarios suelen usar varios modos de entrada de texto en las aplicaciones de productividad, considera la posibilidad de admitir modos alternativos de entrada de texto, como la entrada manuscrita. Si permites a los usuarios escribir el texto con lápiz y dibujar garabatos en sus notas y documentos, se sentirán fascinados de poder escribir el texto rápida y naturalmente con un lápiz. Consulta Directrices sobre interacciones comunes del usuario para obtener más información sobre los distintos métodos de entrada.

Selección de texto

En muchos escenarios de productividad, incluidos el consumo y la creación de documentos, los usuarios necesitan seleccionar texto. Habilita la selección del texto escrito por los usuarios para que puedan modificarlo. El texto que proviene de otros usuarios incluye texto del cuerpo de un correo electrónico u otros tipos de texto que probablemente se copie. Así se ve la experiencia de selección de texto.

Ejemplo de selección de texto que muestra una palabra seleccionada entre dos regiones del selector

Si habilitas la selección de texto, deja un margen de la mitad del ancho de la barra de redimensionamiento (4 milímetros) a los costados del texto y de la altura total de la barra de redimensionamiento (8 milímetros) en la parte inferior del área, si el texto no se puede desplazar. Esto garantiza que las barras de redimensionamiento puedan tocarse en todos los casos y no interfieran con la experiencia del usuario en el borde de la pantalla. La siguiente imagen muestra los márgenes correctos que deben dejarse cuando se habilita la selección de texto.

Ejemplo de tamaños de los márgenes para la selección de texto táctil

Tipografía en las aplicaciones de productividad

Al usar la tabla de tamaños y cuadrículas de tipografía en las aplicaciones de productividad, creas una jerarquía visual que permite a los usuarios analizar y consumir gran cantidad de información rápida y fácilmente. Si bien el uso de la fuente Segoe UI especificada en la tabla de tipos es adecuado para el contenido de las aplicaciones de productividad, también puedes considerar usar Calibri, la fuente para "documentos modernos" recomendada, o Cambria, la fuente para "documentos tradicionales" recomendada. Calibri es la fuente sans-serif predeterminada en Microsoft Office y Cambria es la fuente serif predeterminada, por lo que ambas se relacionan estrechamente con las aplicaciones de productividad. Para obtener más información sobre la tipografía, consulta el tema sobre las directrices para fuentes.

Si decides especificar fuentes del sistema alternativas, asegúrate de confirmar que se instalen con Windows 8 y no requieran la instalación de una aplicación independiente, como Microsoft Office. Si usas tus propias fuentes personalizadas o con licencia, asegúrate de contar con los derechos legales suficientes para incluirlas en tu aplicación. Independientemente de las fuentes que elijas, la tabla de tipos de Windows 8 proporciona una buena orientación sobre el número máximo de tamaños y estilos que debes usar.

La personalidad de la interfaz de usuario de Windows 8  requiere que el uso de mayúsculas en los encabezados sea del estilo de oración, lo que también recomendamos para las aplicaciones de productividad. Pero el estilo de título también puede ser apropiado en algunos casos. El texto en todas minúsculas puede ser demasiado informal para una aplicación de productividad y el texto en todas mayúsculas podría hacer acordar al usuario de ciertos mensajes de correo electrónicos no muy amigables. Ten en cuenta que estos últimos tratamientos de topografía no se transfieren a varios idiomas localizados. Además, asegúrate de usar los estilos de uso de mayúsculas coherentemente. Úsalos para diferenciar las distintas partes del contenido y no solo para añadir un interés visual a la tipografía de tu aplicación.

El uso de un conjunto reducido de tamaños de fuente, como se recomienda en la orientación de la tabla de tipos, crea una sensación de estructura y ritmo en el contenido. Si distintos elementos de la aplicación usan el mismo tamaño de fuente de la tabla de tipos, pero transmiten diferentes tipos de información, considera usar color y espesor de la fuente para establecer una jerarquía en la información.

Contratos

Los contratos son el lazo de unión que une las aplicaciones de la Tienda Windows entre sí y con la interfaz de usuario del sistema. Dos aplicaciones que han implementado el mismo contrato pueden trabajar juntas para completar un escenario amplio o complejo. Para obtener una lista completa de los contratos entre aplicaciones, consulta el tema sobre Extensiones y contratos entre aplicaciones.

Uso compartido

La posibilidad de compartir contenido es un componente clave de las aplicaciones de productividad hoy en día, y existen muchos escenarios atractivos que permiten el uso compartido entre aplicaciones de productividad. Si deseas permitir que los usuarios compartan contenido de la aplicación, la aplicación debe ser un origen de contenido compartido. Si deseas permitir que la aplicación use datos de otras aplicaciones, la aplicación debe ser un destino de contenido compartido.

Compartir contenido de la aplicación

Como la productividad suele basarse en la creación de contenido, los usuarios por lo general comparten contenido con otras personas y Windows 8.1 ofrece una experiencia fluida de uso compartido entre aplicaciones. A medida que el usuario va obteniendo cada vez más aplicaciones, la interoperabilidad aumenta el alcance del contenido de tus aplicaciones en una gran variedad de posibilidades.

Por ejemplo, es posible que los usuarios quieran compartir listas de tareas pendientes y listas de compras con sus familiares mediante una aplicación de contactos, compartir documentos con sus compañeros de trabajo mediante una aplicación de colaboración o compartir sus creaciones en blogs mediante una aplicación de creación de blogs, por nombrar solo algunos escenarios de uso compartido. Estas capturas de pantalla muestran las maneras en que puedes compartir en las aplicaciones de productividad.

Compartir en una aplicación de productividad

Compartir por correo electrónico en una aplicación de productividad

Que la aplicación sea un origen de contenido compartido significa permitir que su contenido, ya sean direcciones URI, mapas de bits, código HTML, texto, elementos de almacenamiento o tipos de datos personalizados, esté disponible para que otras aplicaciones puedan usarlo. Como aplicación de origen, es importante que admita todos los tipos de datos significativos para el contenido que quieres que compartan los usuarios. Esto permite que los usuarios puedan compartir contenido de la aplicación con un amplio conjunto de aplicaciones de destino de contenido compartido.

Si admites el Contrato para ofrecer contenido compartido, también permites que la aplicación comparta contenido de forma directa con los dispositivos cercanos de la misma manera que Tocar y enviar.

Compartir contenido en tu aplicación

Las aplicaciones de productividad también son buenas destinatarias del contenido compartido procedente de otras aplicaciones, porque la creación del contenido por lo general comienza con su consumo. Si tu aplicación es un destino de contenido compartido, los usuarios podrán importar contenido en ella sin problemas y sin tener que cambiar el contexto de la actividad que están realizando. Existen muchos escenarios atractivos que permiten el uso de las aplicaciones de productividad como destinos de contenido compartido. Por ejemplo, direcciones URL, fragmentos de texto, fotos del explorador y contenido de un libro pueden enviarse como contenido compartido a una aplicación de creación de contenido para usarlos como fuentes de referencia de un trabajo para el colegio. Por poner otro ejemplo, los usuarios pueden compartir cupones de una aplicación de cupones con la lista de compras de tu aplicación de tareas pendientes. Estas capturas de pantalla muestran ejemplos de una aplicación como destino de contenido compartido. También puedes esperar una mayor interoperabilidad entre un conjunto de aplicaciones de productividad que comparten datos entre sí mediante el contrato para contenido compartido.

Envío de una página web como una nota para compartirla con una aplicación de notas.

Compartir una página web como nota con una aplicación de notas

Buscar

La búsqueda es un escenario importante de las aplicaciones de productividad y es posible que tu aplicación deba mostrar una gran cantidad de datos en los resultados de la búsqueda. Puedes usar el control de cuadro de búsqueda de Windows 8.1 para ofrecer la interfaz de usuario de búsqueda en el Canvas. El cuadro de búsqueda se integra con el contrato de Buscar para mejorar la experiencia y permitir una personalización completa, de modo que tu aplicación ofrezca experiencias adaptadas a las necesidades de los usuarios.

Al diseñar la experiencia de búsqueda de tu aplicación, ten en cuenta lo siguiente:

  • Proporciona sugerencias de consultas para ayudar a los usuarios a completar automáticamente sus consultas de búsqueda para que puedan buscar más rápidamente sin necesidad de escribir la cadena de búsqueda completa.
  • Proporciona filtros de búsqueda en la vista de resultados.
  • Muestra la consulta de búsqueda en la vista de resultados.
  • Muestra el número total de resultados encontrados.
  • Conserva el estado de la aplicación para que los usuarios puedan volver a lo que estaban haciendo antes de realizar la búsqueda.
  • Indica por qué un resultado coincidió con la búsqueda.
  • Considera la opción de mostrar sugerencias de resultados para ayudar a los usuarios a encontrar los más relevantes con rapidez. Al seleccionar una sugerencia de resultado, se redirigirá a los usuarios a los detalles del resultado. Limita a cinco el número de sugerencias. Cuanto más corta sea la lista, con mayor facilidad podrán analizarla los usuarios.

Para obtener más información sobre el control de cuadro de búsqueda, consulta el tema sobre actualizaciones de búsqueda.

Esta captura de pantalla muestra el uso de la búsqueda en una aplicación de notas.

Buscar en una aplicación de notas.

Buscar en la página

Junto con la búsqueda, "Buscar en la página" es un escenario común en las aplicaciones de productividad. Por ejemplo, considera lo que implica buscar todas las instancias de una palabra en un documento determinado. No uses el acceso a Buscar para implementar en tu aplicación la función de Buscar en la página. En su lugar, impleméntala dentro de la barra de comandos de la aplicación y no en el panel de búsqueda. Buscar en la página ayuda al usuario a encontrar todas las instancias en la vista actual. Resalta los resultados de la búsqueda en el documento y muestra los botones "Siguiente" y "Anterior" en la aplicación para permitir al usuario saltar rápidamente entre las distintas instancias de la palabra o frase encontrada. En las aplicaciones de productividad, principalmente se usa Buscar para complementar la experiencia de Reemplazar. Buscar siempre se encuentra en el ámbito de la vista actual, como se muestra a continuación.

Una experiencia de Buscar en la página.

Configuración

Toda la configuración correspondiente a las aplicaciones de productividad (como la configuración de privacidad, la configuración de notificación y las preferencias de visualización) debe encontrarse en el acceso a Configuración. El acceso a Configuración proporciona un único lugar para que los usuarios ajusten su configuración y, además, impide que la interfaz de usuario de tu aplicación aparezca desordenada con diferentes configuraciones. Para más información acerca de la configuración, consulta el tema sobre las directrices para la configuración de una aplicación.

Dispositivos

La impresión de documentos y notas es un escenario común en las aplicaciones de productividad. Proporciona a los usuarios funcionalidad de impresión con los accesos a Dispositivos para que tengan una experiencia de impresión sin problemas. Así se ve la experiencia de dispositivos para impresión.

La experiencia de dispositivos para impresión.

Los dispositivos pueden ser un contrato interesante para conectar a tu aplicación de productividad. Si la aplicación tiene muchos escenarios de multimedia y posibles presentaciones, es posible que los usuarios quieran ver el contenido en un televisor en experiencias de medios compartidos. La integración con el contrato de Dispositivos permite a los usuarios hacer justamente eso.

Selector de archivos

Las aplicaciones de productividad pueden involucrar una gran cantidad de escenarios interesantes para usar contenido de otras aplicaciones. El selector de archivos permite a la aplicación obtener acceso a los archivos y carpetas de un usuario almacenados en el equipo local, en dispositivos de almacenamiento conectados, en el Grupo Hogar y en otras aplicaciones que implementan un contrato del selector de archivos. Esto permite a los usuarios insertar contenido de otras aplicaciones en tu aplicación, lo que enriquece su experiencia. Por ejemplo, en una aplicación de notas, es posible que el usuario quiera insertar una foto de una aplicación de fotos o notas de audio de una aplicación grabadora de sonidos.

Tu aplicación también puede personalizar diversos aspectos del selector de archivos. Concretamente:

  • Modo del selector de archivos: puedes establecer el modo del selector de archivos para que coincida con tu tarea. En el selector de archivos, se puede seleccionar un archivo, guardar un archivo y seleccionar una carpeta. Si se permite al usuario seleccionar una carpeta, por ejemplo, este podrá seleccionar una carpeta completa para cargarla en una ubicación de almacenamiento en nube.
  • Modo de vista: cuando permites que el usuario seleccione una foto o un vídeo, puedes personalizar el selector de archivos para que muestre los archivos en el modo de vista de miniaturas. Para todos los demás tipos de archivo, usa el modo de vista de icono.

Asimismo, el contenido de tu aplicación de productividad puede ser importante para los usuarios en otros contextos, por lo que puede resultarles muy útil poder acceder a este contenido desde otras aplicaciones. El uso de los contratos del selector de archivos proporciona una oportunidad para poner el contenido de tu aplicación a disposición de otras aplicaciones de Windows 8. Esto permite a los usuarios obtener el contenido de tu aplicación sin tener que llevar a cabo un proceso intermedio, como guardar primero esos archivos en el equipo local. Cuando las aplicaciones permiten esta experiencia, los usuarios pueden seleccionarla de la lista de ubicaciones en el selector de archivos. Al seleccionarla, los usuarios pueden acceder al contenido de tu aplicación a través de una vista del selector de archivos que es específica de tu aplicación y que tú controlas.

La funcionalidad del selector de archivos da lugar a algunos escenarios atractivos. Por ejemplo, si un usuario quiere enviar por correo electrónico una nota creada en tu aplicación de notas a algunos amigos, puede adjuntar el contenido de la aplicación de notas directamente en lugar de tener que guardarlo previamente en el equipo local.

Además, el selector de archivos permite guardar directamente en la aplicación. Esto también da lugar a escenarios realmente interesantes. Por ejemplo, un usuario puede guardar un mensaje de correo electrónico o un garabato creado en otra aplicación directamente en tu aplicación como una nota. Aquí puedes ver cómo se puede personalizar el selector de archivos.

Los componentes que se pueden personalizar

Sentirse conectado y vivo

Las aplicaciones que se ejecutan en Windows 8.1 deben integrar experiencias y una personalidad que las haga resaltar. Si usas iconos, notificaciones, el perfil móvil y contratos, tu aplicación encajará perfectamente en el ecosistema de Windows 8.1.

Iconos y notificaciones

Mostrar contenido actualizado y personalizado en el icono de la aplicación es una forma de atraer a los usuarios, ya que les llamará la atención el contenido interesante del icono y entrarán a tu aplicación. Esta funcionalidad da lugar a escenarios atractivos, por ejemplo, se pueden mostrar notificaciones de icono cuando alguien actualizó un documento compartido, compartió una nueva nota con el usuario o modificó una lista de compras tachando elementos o agregando artículos nuevos. Una notificación también puede mostrar la posición de un punto de interés, como en este ejemplo.

Iconos que muestran notificaciones

Si permites a los usuarios anclar iconos secundarios para un acceso rápido a sus notas y contenido favoritos, podrán ver las notificaciones adaptadas sobre ese contenido, lo que les llamará la atención y los atraerá a tu aplicación.

En el caso de las aplicaciones de productividad con escenarios de avisos de limitaciones temporales— (por ejemplo, un elemento de una lista de tareas pendientes que indica que se debe pagar una factura al final del mes), —es posible que los usuarios quieran asociar los avisos y las fechas de finalización con las tareas. Considera la posibilidad de mostrar al usuario las notificaciones del sistema programadas para la hora en que quiere que se le envíe el aviso. Una buena práctica para las notificaciones del sistema pasadas por alto consiste en mostrar también el aviso en el icono, como se muestra a continuación.

Iconos que muestran notificaciones pasadas por alto

El tema sobre las directrices y la lista de comprobación para notificaciones del sistema contiene más información sobre los procedimientos recomendados para las notificaciones del sistema. El tema sobre las directrices y la lista de comprobación para iconos contiene más información sobre los procedimientos recomendados para los iconos.

Perfil móvil

La mayoría de las personas tienen más de un equipo con Microsoft Windows. Si tu aplicación ofrece una experiencia del usuario coherente en todos los equipos de Windows de un usuario, este obtendrá la experiencia que espera. Puedes usar el perfil móvil para mover la configuración de tu aplicación, información sobre la última acción del usuario en tu aplicación y otras preferencias de la aplicación que sean útiles para los usuarios en todos sus equipos. En el tema sobre las Directrices para perfiles móviles de datos de la aplicación encontrarás más información sobre los procedimientos recomendados del perfil móvil.

Orientación y tamaño de ventana

Dado que Windows 8.1 se ejecuta en distintos tipos de dispositivos y tiene un modelo de multitarea, asegúrate de que tu aplicación admita las orientaciones vertical y horizontal, y de que funcione bien en todos los tamaños posibles hasta el ancho mínimo.

Al diseñar tu aplicación de productividad para Windows 8.1, considera todas las vistas de la aplicación, como las diferentes resoluciones de pantalla y los distintos tamaños de dispositivo. Windows 8.1 te permite escalar el diseño mediante la incorporación de una mayor cantidad de contenido en la aplicación para dispositivos más grandes. Esta es una aplicación de notas cuyo tamaño se cambió a un diseño estrecho más alargado.

Vista vertical en una aplicación de notas.

Los diseños estrechos y alargados, así como la orientación vertical, son ideales para leer y consumir grandes cantidades de contenido. Asegúrate de que la aplicación redistribuya el contenido para que se adapte al tamaño de la ventana.

Cuando el usuario cambia el tamaño de tu aplicación, el estado y contexto del usuario no deben perderse. Esto es particularmente importante en las aplicaciones de productividad donde los usuarios pueden haber dedicado mucho esfuerzo a la creación de contenido. Conserva la entrada de texto, la posición de desplazamiento y cualquier selección que haya establecido el usuario cuando el usuario cambia el tamaño de la aplicación.

Cuando la aplicación es más estrecha, el control de la barra de la aplicación quita automáticamente las etiquetas y reduce el espaciado entre los comandos. Si hay varios comandos, puedes mostrarlos con creatividad. Por ejemplo, usa dos filas de comandos en la barra de la aplicación o usa controles flotantes en los comandos. Para obtener más información, consulta Directrices sobre barras de la aplicación.

Además, piensa en cómo la aplicación agrega valor y haz que esos escenarios sean excelentes. Muestra a los usuarios por qué tu aplicación funciona a la perfección con otras aplicaciones. Por ejemplo, es fácil imaginar una aplicación para tomar notas o para crear listas que trabaje junto a otra aplicación. Al investigar o al crear contenido, es normal tener una aplicación de análisis o de referencia en la pantalla junto a tu trabajo principal. La lectura y la creación de aplicaciones son muy útiles en anchos estrechos, de modo tal que puedes hacer referencia a ellas mientras haces otra actividad. Piensa en la cantidad de veces que evitarías maximizar la aplicación en el escritorio tradicional. Esos son los escenarios que la aplicación debe admitir cuando se cambia su tamaño a un ancho estrecho.

Diseñar la aplicación para que funcione bien en anchos estrechos es una excelente forma de aumentar el tiempo de tu aplicación en pantalla y atraer a los usuarios por períodos más largos. Este es un ejemplo de una aplicación de notas en paralelo con el explorador.

aplicación de notas en ancho estrecho

Temas relacionados

Conocer las aplicaciones de la Tienda Windows

Directrices de la experiencia de usuario para aplicaciones de la Tienda Windows