El proceso de diseño móvil

Si eres diseñador, la buena noticia sobre el espacio de la aplicación móvil es esta: el diseño lo es todo. Ya sea que esté construyendo una utilidad o un juego, la apariencia tiene un gran impacto tanto en popularidad como en facilidad de uso. Las aplicaciones desordenadas o desorganizadas son difíciles de entender y de usar. Esto no quiere decir que una "herramienta seria" debe ser embellecida con una GUI exagerada. Un gran diseño de aplicación es aquel que equilibrará la apariencia con la función..

En términos de función, ciertamente hay algunas áreas de desarrollo de aplicaciones que no son el "trabajo del diseñador" per se, pero que aún tienen un gran impacto en el diseño conceptual y en la dirección creativa de la aplicación. Si está trabajando en una aplicación, y estos trabajos no se están llenando, encuentre a alguien que tenga estas habilidades para hacerlo o pruébelo usted mismo. Si omite estos pasos, puede llevarlo por un costoso camino de revisiones cuando los usuarios descubran que a su aplicación le falta funcionalidad o tiene defectos de diseño dolorosos..

¿Cuál es la tarea principal de la aplicación??

Una vez que la idea de una aplicación ha sido generalmente excluida, es hora de reducir la funcionalidad de la aplicación al núcleo de lo que hace la aplicación. Las aplicaciones más populares establecen y mantienen el enfoque en UNA tarea principal. Para hacer esto, debe determinar cuál es la tarea principal mediante la creación de una explicación concisa del propósito principal de sus aplicaciones y de su público objetivo, también conocida como una declaración de definición de producto..

Sé que suena geek e inútil, pero esta es la frase que debería haber pegado en su pared todo el tiempo que esté trabajando en el diseño. Es el núcleo de lo que se trata la aplicación. Por lo tanto, elija las pocas funciones que serán las más utilizadas por la mayoría de sus usuarios y que sean las más adecuadas para el contexto móvil. Una forma rápida de hacerlo es rellenar estos espacios en blanco para la aplicación en la que está trabajando:

(Su diferenciador) (Su solución) para (Su audiencia).

Aquí hay un ejemplo para la aplicación "Fotos" del iPhone:

(Fácil de usar) (compartir fotos digitales) para (usuarios ocasionales de iPhone).

Investigación de mercado

La investigación de mercado puede sonar como otra de esas tareas de * bostezo *, pero saltarse este paso es ... tonto. Si no quieres hacerlo, contrata a alguien que se emocione con este tipo de trabajo. No caigas en la trampa de "nadie más ha hecho esto" y "esta idea es totalmente original" o "quiero mantener mi idea pura, protegida de la influencia externa". Si compran estas ideas, su aplicación ser perfecto, pero solo para ti.

Paso 1: Prepárese para comparar

La mejor manera de hacer referencias cruzadas y documentar todas sus investigaciones es pegarlas en una hoja de cálculo o en un documento de procesamiento de textos. Puedes crear el tuyo, O he creado uno en Google Docs que puedes usar: hoja de cálculo de investigación de aplicaciones móviles. He puesto ejemplos relevantes para la aplicación en la que trabajaremos en este artículo. ¡Solo reemplaza estos datos con los tuyos! Esto hace que sea agradable y fácil hacer una referencia cruzada de todas las características, beneficios y tecnología que ofrecen otros productos..

Paso 2: Busque las soluciones existentes

Digo "soluciones existentes" en lugar de "competencia" porque no todos los productos relacionados competirán en su mercado móvil. Algunas pueden ser aplicaciones web, aplicaciones de escritorio o incluso fuentes sin conexión en el mismo campo de interés. La mejor manera de encontrar productos existentes es buscar en cada variedad de palabras clave relacionadas con su aplicación en:

  • Google
    • restringe la búsqueda a 'blogs' y 'noticias' para obtener resultados realmente recientes
  • iTunes App Store
  • Android Marketplace

Paso 3: descubrir limitaciones técnicas

Durante la investigación de mercado, prepárese para descubrir las limitaciones técnicas que no esperaba. Como diseñador, puedes decir: “¿A quién le importa? ¡Ese es el trabajo de los desarrolladores! ”Tal vez sea así, ¡pero te sorprendería la cantidad de discusiones de factibilidad técnica que terminan impactando el diseño! Créeme, quieres ser parte de esa discusión..

Los ejemplos de limitaciones técnicas podrían incluir: ¿Qué sucede si desea crear una aplicación que le permita bloquear llamadas de un número específico? Oh, oh, el iPhone SDK no admite esa funcionalidad. Alternativamente, digamos que quería crear una aplicación que te permita encontrar la cafetería más cercana. Mejor piense en cuántos éxitos puede obtener su aplicación, porque Google y Yahoo! ambos comienzan a cargarse una vez que exceda un cierto volumen diario de solicitudes de búsqueda en su aplicación!

Paso 4: Planificación para la funcionalidad futura

Esto es muy importante. Cuando se desanime al enterarse de todas las cosas que hoy no son posibles, buenas noticias: ¡aún puede planificarlas en su diseño! ¿El primer iPhone tenía una cámara de video? No, pero los desarrolladores que tuvieron su juego una vez comenzaron a pensar en oportunidades en esa área que inevitablemente se abrirían en el futuro.

Otra razón para planificar la funcionalidad futura es la capacidad de las aplicaciones para escalar o crecer. Al igual que los sitios web, las aplicaciones a menudo pasan por brotes de crecimiento de un tipo u otro. A veces eso significa agregar funciones o contenido, ¡a veces significa quitar cosas! Piense en cómo puede mantener un equilibrio entre creatividad y modularidad. Permitir que las piezas se conecten y desconecten fácilmente desde un punto de vista de diseño y tendrás muchos menos dolores de cabeza en el camino!

Público objetivo

Conocer a su público objetivo es muy importante para definir un estilo de diseño, tipografía y diseño. ¿Su aplicación es atractiva para contadores o para jugadores de 18 a 25 años? Tener esta información y bucear aún más profundo para desarrollar "personas" es esencial para entender lo que quiere ver el demográfico y el contexto en el que usarán la aplicación..

Por ejemplo, Mike Todd es un estudiante universitario de 18 años en la ciudad de Nueva York. Esto nos dice mucho más acerca de Mike. Él está en la universidad, alrededor de otros estudiantes de su edad, la mayoría con horarios similares. Mike puede querer un juego con interacción de 2 jugadores. ¿Habríamos pensado en la interacción de 2 jugadores si solo supiéramos la edad de Mike? Dependiendo de la aplicación, tal vez o no. En cualquier caso, extraer personas aporta riqueza a su lluvia de ideas y ayuda a extraer funcionalidades que son importantes para su público objetivo e importantes para el diseño..

Escenarios de casos de uso

Una vez que se definen las personas, los personajes deben ubicarse en circunstancias "móviles" relevantes y reales. ¿Dónde están los usuarios que usan la aplicación? ¿Están a pie, en coche o en tren??
Bill, de cuarenta y tres años, se dirige a una reunión en el centro de Londres y quiere detenerse a tomar una taza de café. ¿Debería la aplicación requerir que Bill toque la pantalla varias veces antes de encontrar su cafetería? ¡Absolutamente si tu hermano es dueño de un taller de carrocería! Pensando en la variedad de circunstancias en las que se encuentran los usuarios y marcando escenarios en los que se repite cierta funcionalidad, es la clave para definir qué pantallas diseñará..

Mapa del sitio

Los sitemaps para móviles son críticos para el diseño. Para diseñar un flujo que sea intuitivo, comprender la relación del contenido con otro contenido proporciona una manera de diseñar controles simples y utilizables. Los sitemaps de aplicaciones móviles difieren de los sitemaps de sitios web, ya que las aplicaciones móviles no deben presentar al usuario múltiples formas de llegar a un lugar. Una puerta a una habitación: eso es todo. Los usuarios de dispositivos móviles no tienen tiempo para hacer un movimiento incorrecto, luego "retroceda" e intente encontrar el camino correcto.

Wireframing y prototipos de papel

Los datos recopilados de los escenarios de casos de uso definirán el contenido y los controles que deben estar presentes en las pantallas definidas en el mapa del sitio. A partir de ahí, debe diseñar un diseño preliminar que tenga en cuenta cada uno de estos elementos de diseño. Defina una cuadrícula y establezca la importancia de la información utilizando el color, la forma y el tamaño de los elementos de diseño.

En términos ergonómicos, los usuarios sostienen los dispositivos móviles con pantalla táctil de manera que la posición del pulgar generalmente apunta hacia el centro de la pantalla. Por lo tanto, si desea navegar a los usuarios alrededor de la aplicación rápidamente, déles controles que les permitan moverse sosteniendo el dispositivo con una sola mano.!

Además, tenga en cuenta la variedad de formas en que el contenido puede moverse dentro y fuera de la pantalla. Por ejemplo, las hojas móviles son una excelente manera de ocultar controles accionables hasta que el usuario esté listo para usarlos.
Piense en cómo puede minimizar la entrada del usuario. ¿Quién quiere estar atascado con la introducción de un montón de texto? Proporcione a los usuarios una Tabla de selección para que puedan seleccionar una opción de un menú en su lugar.

En el diseño móvil, la creación de prototipos en papel le ahorrará mucho tiempo. Al igual que cualquier proceso de diseño o ilustración, tener iteraciones de su diseño le permite explorar una variedad más amplia de opciones de diseño en mayor grado. Y con la creación de prototipos de papel hay menos "riesgo", menos apego a un trozo de papel que un archivo de Photoshop pulido. Por ejemplo, trabajar en notas posteriores es útil para poder reordenar, agregar o eliminar pantallas hasta que el flujo sea correcto. Vea este hilo de Tumblr para una buena colección de wireframes móviles.

Creando archivos finales

Una vez que haya ajustado sus prototipos de papel, es hora de dar vida a esos bocetos en Photoshop. Si aún no lo has hecho, vuelve a mi publicación anterior en Plantillas de diseño de iPhone y toma algunas para comenzar. En ese artículo también encontrará especificaciones sobre cómo configurar sus archivos con el tamaño y la resolución adecuados. Si tiene la suerte de trabajar con un desarrollador que puede cortar las imágenes por usted, sea cortés y organice su archivo utilizando carpetas.

Conclusión

Esta es sin duda una versión abreviada de cada paso en el proceso de diseño móvil, así que asegúrese de dejarme un comentario a continuación y hágame saber en qué área desea que explique.!

Sobre el Autor

Jen Gordon es una diseñadora independiente que se enamoró del móvil en 2008. Desde entonces, ha diseñado docenas de interfaces para iPhone y iPad. Cuando no está ocupada presionando píxeles, le gusta escribir sobre diseño y crear recursos para que otros diseñadores y desarrolladores los utilicen. A continuación se muestra un increíble paquete de diseño de iPhone que ha reunido específicamente para los lectores de MobileTuts!