Diseña la mejor aplicación que puedas

Este tema te ayudará a diseñar una aplicación con un aspecto y una funcionalidad integrados en las plataformas de Windows y Windows Phone. Las estrategias y los principios de diseño de este y otros temas de procesos de diseño son fundamentales para que tu aplicación destaque entre las cada vez más numerosas aplicaciones de la Tienda. Seguirlos durante la fase de diseño también simplifica la solución de problemas de facilidad de uso que podrías detectar a medida que iteras. Con un diseño de buena calidad, la experiencia y las opiniones de los usuarios tienden a ser positivas, lo que resulta fundamental a la hora de distinguir tu aplicación de las de la competencia.

Para obtener información sobre la lluvia de ideas y la planificación, consulta el tema sobre conceptualización de aplicaciones.

Crear un prototipo de los aspectos clave del diseño

El diseño de un prototipo implica recopilar todas las lluvias de ideas hechas hasta el momento. En esta sección, aprenderás a crear bocetos de prototipos del aspecto de tu aplicación y a usarlos para probar aspectos clave de tu diseño.

Nota  La creación de prototipos no solo genera calidad, sino que ahorra tiempo y frustraciones. Si sigues los consejos de esta sección, podrás crear un diseño de la aplicación mejor en menos tiempo.

Blend para Visual Studio es útil para crear prototipos rápidos y realistas. Con Blend, puedes crear bocetos y prototipos interactivos. Los prototipos interactivos son útiles para áreas de la aplicación que necesitan interfaz de usuario, animaciones o transiciones personalizadas, para que la experiencia sea comprensible para los usuarios. Esta interacción, que a menudo resulta fundamental para el éxito de una aplicación, permite a los usuarios "sentirla" durante las pruebas de facilidad de uso. Blend también permite crear diseños reales y operativos directamente a partir de los prototipos. Para obtener más información sobre Blend, visita la página principal de Microsoft Expression.

Para crear los bocetos, también puedes utilizar la herramienta Guiones gráficos para PowerPoint, disponible con Microsoft Visual Studio 2012. Con esta herramienta, puedes crear un guión gráfico a partir de una colección de formas de guiones gráficos predefinidas y crear capturas de las interfaces de usuario existentes. Para obtener más información, consulta el tema sobre cómo crear un guión gráfico de un requisito o historia de usuario mediante PowerPoint.

Crear bocetos de conceptos

En esta sección, aprenderás a crear bocetos de tu aplicación.

La primera fase de la creación del prototipo del diseño debería empezar con lápiz y papel, y luego pasar rápidamente a crear un boceto en un equipo. Crear un boceto de una aplicación para un dispositivo móvil es distinto de hacerlo para software de escritorio. En este caso, los guiones gráficos no son tan útiles, ya que estas aplicaciones tienen jerarquías de navegación más superficiales y un alcance más limitado. El reto de una interfaz de usuario móvil es presentar las operaciones y los datos de manera intuitiva y dinámica.

Si tu aplicación implica tareas complejas, crea el guión gráfico de estas tareas individualmente para garantizar que se realicen en el menor número de pasos posible y que esos pasos sean sencillos. A continuación se incluye una serie de bocetos de prototipos de una aplicación de radio por streaming genérica.

1. Crea bocetos de las pantallas estáticas que los usuarios verán o usarán con más frecuencia. Por ejemplo, la figura siguiente muestra dibujos preliminares de la aplicación de radio por streaming de más abajo. Verás bocetos de la pantalla principal, las categorías, la vista de información sobre intérpretes y una lista de las emisoras preferidas.

   

   Pantallas principales

2. Si tu aplicación debe mostrar ciertos estados transitorios al usuario, crea bocetos de su aspecto. En el ejemplo, si vas a crear una aplicación para reproducir música, dibuja una vista de las pantallas de configuración y presentación.

   

   Unos cuantos estados

3. Crea bocetos de los controles importantes que podrías personalizar. Piensa en cómo puedes usar controles personalizados para simplificar la taxonomía de las pantallas. Este boceto muestra los controles detallados de reproducción y una vista horizontal especial con controles.

   

   Controles importantes

4. Ahora puedes agrupar algunas de las pantallas como secuencia de pasos para realizar una tarea. Planea los pasos que deberán seguir los usuarios para completar tareas u operaciones importantes. Dibuja en orden las pantallas estáticas que participarán en cada paso de una tarea. En la figura se muestra un boceto que sigue el flujo de una operación de búsqueda hasta la visualización de la información del intérprete.

   

   Tarea de búsqueda habitual

   Para realizar este paso, en primer lugar deberás recopilar una lista de todas las tareas que realizaría el usuario con tu aplicación; por ejemplo, buscar un género musical o agregar una nueva emisora a la lista de favoritos. A continuación, dibuja un mapa de cada una de las tareas identificadas. Estos mapas muestran las rutas por las pantallas para realizar una tarea concreta.

5. Intenta crear un boceto de la relación completa entre las pantallas estáticas de todas las partes de la aplicación. Esfuérzate por hacer que las pantallas relacionadas tengan un aspecto y un funcionamiento que creen una sensación de avance a medida que el usuario se desplaza por una tarea. La figura siguiente muestra un mapa de la arquitectura de la información completo de una aplicación de radio por streaming sencilla.

   

   Mapa maestro

   El mapa maestro es distinto del mapa de tareas. En el mapa maestro estático, no se muestra el flujo para realizar una tarea concreta, sino que se muestran todas las pantallas y la relación jerárquica entre ellas. En el ejemplo anterior, puedes ver que desde la pantalla principal puedes acceder a las pantallas de favoritos, categorías y resultados de la búsqueda.

   Una vez que hayas colgado unos cuantos dibujos en la pared, empieza a crear los prototipos. Para ello, abre un nuevo proyecto en Blend para Visual Studio.

   Nota  Al crear un prototipo con Blend, el marcado XAML automático se crea en segundo plano. Esto te permite crear el diseño y los estilos a medida que iteras. Es probable que estos artefactos tengan una menor fidelidad, pero tienen el mismo formato que los de una aplicación de producción; por tanto, son compatibles.

Identificar áreas clave para crear prototipos o bocetos

Los prototipos de las aplicaciones móviles se pueden crear rápidamente por medio de la selección de áreas de foco concretas. Por lo general, no es necesario crear prototipos de todos los aspectos de la aplicación con mucho nivel de detalle. Elige los elementos más importantes o difíciles y centra tus prototipos en ellos. Normalmente, un diseñador debería dar prioridad a nuevas tecnologías o funciones, o a cualquier elemento que se desvíe del grado de experiencia habitual de equipo de desarrollo.

Para la mayoría de aplicaciones, esto significa crear bocetos de tareas u operaciones que ofrezcan algún tipo de valor al usuario. Ten en cuenta las finalidades que has previsto para tu aplicación. Inclúyelas en el prototipo en el orden en que imaginas que pasan, paso a paso, y observa los puntos en los que los controles personalizados pueden reducir pasos o acelerar procesos.

En general, al trasladar una aplicación desde la web u otra plataforma a Windows Phone, las pantallas deben presentar menos controles y gráficos y estar mejor ordenadas. Es posible que también resulte necesario distribuir tareas entre varias pantallas en una taxonomía con sentido, mientras que en la web es más probable que los controles estén situados en grupos grandes. Asegúrate de averiguar dónde debes ampliar la escala de los gráficos, el contenido o las fotografías que incluirá tu aplicación. Asegúrate de crear los prototipos con controles nativos y con el mínimo de controles WebView posible.

Decide por avanzado cuántas iteraciones resultarán prácticas.

Decidir el nivel de detalle de los prototipos

Para crear los prototipos rápidamente y pasar a la creación, decide qué elementos de la aplicación merecen la máxima prioridad a medida que iteres. Esto implica decidir el grado de inclusión en los prototipos de las siguientes partes de la aplicación:

• Nivel de detalle visual

  Si las imágenes y el aspecto son prioridades máximas para las partes interesadas en esta aplicación, asegúrate de crear una serie muy detallada de dibujos de características, funciones, pantallas o estados. También deberías crear bocetos de los controles personalizados y sus estados.

  Nota  La creación de bocetos de los controles personalizados o los controles de usuario en Blend para Visual Studio te proporcionará marcado XAML que te ayudará a crear los controles de producción.

  Los bocetos de detalle visual deberían incluir:

  1. Estilos y temas
  2. Pantalla de presentación
  3. Icono de la aplicación

• Nivel de detalle funcional

  ¿Las funciones o características son los elementos más importantes de la aplicación? Si es así, te recomendamos que crees un prototipo interactivo y semifuncional. Empieza por una pantalla estática o un grupo de pantallas estáticas y crea interacciones entre ellas, una a una. Piensa en cómo simplificar las funciones y reducir los controles o la necesidad de entradas.

• Nivel de detalle de contenido

  Si lo que más preocupa a las partes interesadas en tu aplicación es la presentación de contenido, te recomendamos que decidas cómo crearás los marcadores de posición más precisos que puedas al crear la interfaz de usuario. Si el contenido es texto, crea bocetos de tus diseños prestando especial atención a la tipografía y utiliza texto de relleno, no bloques ni otras abstracciones, para representar dónde irá el contenido.

  Si la aplicación va a presentar medios visuales, te recomendamos que vuelvas a usar lápiz y papel en el proceso de creación del prototipo. Dibuja bocetos detallados del contenido de la aplicación, tal como aparecería durante la reproducción, e incluye tanto la orientación horizontal como la vertical en tus dibujos. Recuerda pensar en la posibilidad de personalizar los controles o cambiar su diseño cuando cambie la orientación.

  Si tienes previsto localizar la aplicación, en este punto deberías asegurarte de asignar espacio suficiente para los idiomas que lo requieran y para prepararte para posibles problemas de globalización. Hay otros documentos de referencia que puedes leer para comprender los problemas de localización y globalización.

• Nivel de detalle de personalización de marca

  Si creas tu aplicación con fines comerciales y la personalización de marca está administrada, crea prototipos visuales completos y con personalización de marca, con atención pormenorizada al detalle. Esto garantiza que tu producto final no divergirá de los colores, diseños y logotipos estándar de la compañía.

Personalizar con coherencia

Los elementos visuales personalizados pueden aportar calidad, originalidad o personalización de marca a una aplicación. Decide por avanzado qué grado de personalización tendrá el diseño visual de tu aplicación y planea esos elementos según lo que decidas. Puede ser difícil introducir imágenes y personalización de marca personalizadas más adelante en el proceso de diseño de la aplicación.

Algunos elementos que deberías personalizar son los temas, las plantillas, los controles y los estilos.

Siempre que personalices elementos visuales en Windows Phone, sigue estas directrices:

• Da preferencia al funcionamiento práctico frente al realismo.

  Por lo general, las aplicaciones no deberían tener controles personalizados que intenten imitar el mundo real. Por ejemplo, una aplicación de radio no debería usar un dial, un botón giratorio o una serie de botones para controlar la elección de la emisora. En lugar de eso, debería usar un control deslizante para ajustar la frecuencia, un botón Reproducir/Pausa para activar y desactivar la radio y un botón Favoritos para guardar las emisoras memorizadas.

  

  Aplicación de radio FM

  Por motivos prácticos, también es recomendable atenuar o quitar algunos o todos los controles, la barra de la aplicación y la barra de estado cuando la aplicación muestre contenido o un juego en modo de pantalla completa.

• Da preferencia al funcionamiento práctico frente al realismo.

  Para que una aplicación con controles personalizados sea coherente y confiable, asegúrate de que contenga un estilo de diseño subyacente en el que los símbolos, las formas, las palabras y los colores tengan significados coherentes.

  Si tienes previsto presentar grupos de controles personalizados interrelacionados que se afecten entre sí, asegúrate de que todas las combinaciones de controles posibles tengan sentido y funcionen de la manera prevista.

  Si resulta práctico, dibuja las posibles interacciones entre los controles personalizados para asegurarte de que todas las operaciones posibles sean razonables. Si algunas combinaciones generan escenarios confusos para el usuario, usa un diseño alternativo.

Pruebas de facilidad de uso

Ahora que has perfeccionado un poco el prototipo, deja de diseñar y comprueba que no se haya desviado de los parámetros de diseño de Windows Phone. Para comprobar que el dispositivo aproveche totalmente la plataforma y el sistema operativo, plantéate las siguientes preguntas.

Preguntas de comprobación del dispositivo

• ¿El diseño de la aplicación expresa de manera obvia cómo emplea el hardware de Windows Phone?
• ¿Realizar las tareas de la aplicación será cómodo?
• ¿La aplicación presentará demasiada información o funcionalidad? ¿Quizás demasiado poca?
• ¿La aplicación permite al usuario realizar tareas u operaciones que consideraría valiosas?
• ¿Provienes de otra plataforma móvil? Los usuarios de Windows Phone esperan menos pulsaciones, vistas más claras, tipografía grande y el uso de contraste y color.
• ¿Utilizas ejes de desplazamiento (los ejes X e Y) y orientación (vertical y horizontal)? En función de la finalidad de la aplicación, es posible que los usuarios esperen ver ambas cosas.
• ¿Los controles se pueden utilizar fácilmente con las yemas de los dedos? ¿El texto de los controles se lee bien?
• ¿La interfaz de usuario ofrece comentarios sobre los toques y el progreso?
• ¿Has previsto el uso del botón Atrás de hardware?
• ¿Utilizas contenido web incrustado (y el control WebView) pocas veces?
• ¿Tu aplicación atenúa la barra de estado, los controles y la barra de la aplicación al reproducir contenido a pantalla completa?
• ¿Utilizas controles dinámicos y de navegación centralizada de manera eficaz y correcta?

Pruebas de los elementos personalizados de la interfaz de usuario

En cuanto hayas creado los bocetos de los elementos personalizados de la interfaz de usuario, asegúrate de probarlos. Si trabajas en Blend para Visual Studio, puedes crear un boceto del comportamiento de una página o control (con la característica Comportamientos), así como de sus elementos visuales.

Consultar a los usuarios

En cuanto empieces a crear el prototipo, busca un pequeño grupo de personas de confianza entre la audiencia a la que va dirigida tu aplicación. Tan pronto como te sientas cómodo, empieza a mostrar prototipos a tus usuarios de confianza. No les expliques cómo se supone que deben funcionar; en su lugar, espera a ver si el usuario comprende fácilmente qué hace la aplicación y cómo funciona.

Nota  En general, usa bocetos con detalles visuales para las primeras pruebas de usuario, en lugar de dibujos reticulares. Los dibujos reticulares no crean una simulación precisa de la experiencia del usuario.

Hablar pronto con los clientes

Si diseñas una aplicación para empresas, asegúrate de probar las necesidades y prioridades de los directivos y no expertos, además de las de los usuarios a los que va dirigida la aplicación. Por ejemplo, un software de administración de proyectos debería ser útil para las personas que trabajen en un proyecto, así como para sus superiores, que podrían usar tu aplicación para comprobar el progreso de un proyecto.

Nota  No caigas presa de las solicitudes de los usuarios de más y más características. Aunque algunos comentarios de los usuarios te podrían alertar sobre problemas graves de la interfaz de usuario, la mayoría de comentarios de los usuarios se deberían absorber de manera holística. Tu aplicación debe estar centrada y ser minimalista. Recuerda que, a menudo, los usuarios expresan mejor sus objetivos con una aplicación que sugerencias concretas sobre la interfaz de usuario o las interacciones.

Crear los bocetos finales

En este punto del proceso de diseño, tu aplicación ya debería satisfacer las directrices de facilidad de uso explicadas anteriormente. Al evaluar los bocetos finales, sigue estos pasos:

1. Determina si tu prototipo cumple las necesidades y los estándares que planeaste al recopilar tus ideas.
2. A continuación, decide si los bocetos satisfacen el nivel de detalle necesario según el proceso de revisión final de la aplicación. Recuerda el nivel de detalle que decidiste que necesitaría tu prototipo después de leer la sección Crear un prototipo de los aspectos clave del diseño.
3. Los bocetos finales deben incluir niveles de detalle adecuados para:
   • Elementos visuales: ¿la tipografía y el contenido se presentan de manera clara, legible y concisa? ¿La aplicación resulta visualmente atractiva?
   • Elementos funcionales: ¿las tareas son intuitivas tanto en lo que respecta a la finalidad como al funcionamiento? ¿Está claro qué hace la aplicación y cómo funciona?
   • Elementos de control: ¿todos los controles personalizados funcionan según un lenguaje de diseño interno coherente? ¿Tienen tamaños y espaciados para un funcionamiento táctil sencillo?
   • Elementos de personalización de marca: ¿has reproducido de manera precisa los colores y los logotipos? ¿Todas las imágenes cumplen las estipulaciones de copyright?
4. Asegúrate de que has conservado las interacciones que especificaste al crear el prototipo. Comprueba que las tareas y operaciones más habituales o vitales tengan el aspecto que deseas y fluyan como deberían.
5. Tras finalizar los diseños y cuando ya puedas comenzar la producción, puedes empezar a preparar tu aplicación para que cumpla los requisitos de diseño para su envío.

Temas relacionados

Recursos de diseño para Windows Phone