Errores más comunes en el diseño de aplicaciones para Windows Phone

A continuación vamos a ver los errores más comunes en el diseño de aplicaciones para Windows Phone con una serie de consejos para que las aplicaciones de Windows Phone se adapten lo mejor posible a las directrices de Metro, ofreciendo de esta forma una experiencia consistente entre todas las aplicaciones disponibles para Windows Phone.

Distribuye los elementos de tu aplicación

Mantén la armonía en la distribución de los elementos de tu aplicación. Es importante respetar los márgenes y el espaciado entre elementos.

Todas las paginas deben tener un margen de 24px a la izquierda, y cuando sea necesario, el mismo margen a la derecha. En caso de representar un dato con título, se deben emplear dos columnas alineadas a la izquierda, como el Hub de Contactos.

En cuanto al espaciado entre elementos, éste debe ser consistente tanto horizontalmente como verticalmente. Se recomienda que los espacios entre elementos sea un múltiplo o un divisor de 12px.

Para que te resulte más fácil distribuir los elementos de tu aplicación, puedes usar la retícula recomendada, la cual puedes descargar desde aquí.

Usa los controles estándar

Silverlight ofrece muchos elementos para que puedas usarlos en tus aplicaciones: botones, listas, selectores, cuadros de diálogos, animaciones, etc… intenta usar siempre estos elementos estándar. De esta forma, el diseño de tu aplicación será consistente, ofreciendo una mejor experiencia al usuario. Además, dispones de más controles, elementos y efectos en el Silverlight for Windows Phone Toolkit. Si por los requisitos de tu aplicación necesitas crear nuevos controles, intenta que sigan el estilo Metro.

En caso de usar iconos, haz que éstos sean fácilmente reconocibles con la tarea que tienen asignada. Por ejemplo:

No adornes las listas a no ser que sea algo totalmente independiente, como por ejemplo un menú. La regla del pulgar indica que los iconos en un círculo representan acciones y en ningún caso se deben usar como indicaciones.

Cuidado con los botones

Los botones, siempre que sea posible, deben ir en la barra de la aplicación. Existen algunas excepciones a esta norma, como por ejemplo los botones en los panoramas cuando son necesarios, las acciones rápidas o los diálogos y opciones cuando es necesario dar más información. También debes usar las animaciones estándar para responder a las pulsaciones del botón por parte del usuario: no hagas que cambien de color, los bordes, etc…

Además, recuerda que en Windows Phone no son necesarios los botones “atrás” y “salir”. Para estas funciones, se usa el botón hardware “atrás” del dispositivo.

Uso correcto del Panorama y Pivot

Los controles Panorama y Pivot son elementos básicos de Windows Phone y su uso es lo que hace que Windows Phone sea único, ofreciendo una experiencia rica al usuario. Por lo tanto, es importante cuidar los detalles en ambos elementos.

Tanto en el Panorama como en el Pivot no está permitido el uso de los controles “Toggle Switches” y “Sliders”, debido a que el gesto “Swipe” está reservado para cambiar entre páginas del Panorama o del Pivot. Los controles “Maps” y “Browser” sólo se permiten si estos son estáticos, es decir, si las funciones de pich/zoom/pan están deshabilitadas.

Un control Pivot debe tener al menos dos páginas en él, ya que si no sería necesario usar este control. No uses un Pivot para usar datos en detalle, filtrar resultados o como pasos de un asistente. Los cambios realizados en una página del Pivot no deben tener efecto en las demás páginas de este control. Un buen ejemplo de cómo usar un Pivot es el Hub de Outlook.

En el Panorama, evita el uso de botones flotantes y minimiza el uso de contenido interactivo en los panoramas (formularios, cuadros de búsqueda, etc..). El Panorama no es toda tu aplicación, sino un punto de partida para que el usuario explore la información. Un buen ejemplo de esto son los Hubs de Imágenes o de Música y Video. Se recomienda un máximo de 5 paneles en el panorama, ya que añadir más dificultaría la navegación al usuario y afectaría al rendimiento. Estos paneles pueden contener scroll horizontal o vertical, pero no ambos.

Cuida los pequeños detalles

Los pequeños detalles también son importantes. Por ejemplo, puedes añadir animación a la transición entre páginas fácilmente gracias al Silverlight for Windows Phone Toolkit. También tienes que cuidar el lenguaje que usas en tu aplicación. Intenta no usar argot de programador, mostrar los errores con códigos hexadecimales o texto que asuma conocimientos informáticos por parte del usuario. Usa un lenguaje claro para el público al que va dirigido la aplicación.

Cuando tengas que mostrar contenido de una web, intenta no usar los controles Browser, los cuales no se deben embeber en ninguna página de la aplicación. En su lugar, es mejor redirigir al usuario a una página web y lanzarla en Internet Explorer. La única excepción que se permite a esta norma es para visualizar páginas de autenticación, como por ejemplo Facebook o Twitter.

La iconografía de tu aplicación también es importante. Las imágenes que uses se deberían ajustar al tamaño de la aplicación. No uses imágenes pixeladas o borrosas a causa de un redimensionado.

Es recomendable no usar la pantalla de carga por defecto. Es muy fácil usar una pantalla de bienvenida personalizada simplemente cambiando el archivo “SplashScreenImage.jpg” por el logo de tu aplicación.

Evita que los iconos y ventanas de inicio de tu aplicación tengan esquinas redondeadas o elementos 3D en ellas. De esta forma se conseguirá una consistencia en todas las aplicaciones de Windows Phone.

Recursos

Puedes encontrar recursos y más información en estos enlaces:

• Puedes encontrar plantillas de diseño en Photoshop aquí:

https://go.microsoft.com/fwlink/?LinkId=196225

• Guía de diseño e interactuación UX para Windows Phone

https://go.microsoft.com/fwlink/?LinkID=183218

• Recursos de Experiencia de usuario e interfaz de usuario

https://create.msdn.com/en-US/education/basics/ux_ui

• Windows Phone Developer Blog: Post sobre el diseño del Panorama

https://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/03/15/designing-hubs-good-examples-using-the-panoramic-control.aspx

https://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/03/24/designing-hubs-being-creative.aspx

• Windows Phone Developer Blog: Diferencias entre Panoramas y Pivot en detalle

https://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/01/31/8-of-10-understanding-pivots-and-panoramic-view-controls.aspx

• Reto Windows Phone Control Panorama

https://blogs.msdn.com/b/esmsdn/archive/2011/08/17/reto-windows-phone-control-panorama.aspx

• Centro de desarrollo de Windows Phone en Español

https://msdn.microsoft.com/es-es/windowsphone

Un saludo,

El equipo de MSDN