Share
Este artículo se basa en nuestro artículo anterior sobre el proceso de diseño móvil, profundizando en las fases de creación de prototipos en papel y alámbrico del desarrollo de aplicaciones. Al final, tendré una lista de varias herramientas que puede usar para crear sus wireframes y prototipos..
El diseño de interacción para dispositivos móviles es un tema común de conversación entre los profesionales de Experiencia de usuario (UX), pero ¿qué hay de los que solo trabajamos con UX ocasionalmente? A muchos diseñadores y desarrolladores se les asignan proyectos que no tienen el lujo de contratar a un especialista en UX, pero se espera que (por supuesto) produzcan interfaces elegantes e intuitivas..
En la comunidad de experiencia del usuario ha habido una discusión bastante decente sobre la necesidad de wireframes en el diseño web en estos días, y comencé a preguntarme "¿esto se aplica a los dispositivos móviles?" estamos trabajando"? No, creo que es más que eso. El cableado y la creación de prototipos en papel definitivamente evolucionan a medida que la destreza y los gustos en línea de los usuarios se vuelven más refinados, pero esta práctica sigue siendo un componente muy valioso en el diseño móvil.
En mi experiencia, hay una gran diferencia en la forma y la función de los prototipos de alambre en comparación con los prototipos en papel, aunque los términos pueden usarse indistintamente. En mi proceso de diseño móvil, lo primero que sucede después de descubrir quién está usando la aplicación y cómo es, son los prototipos de papel, NO los wireframes..
Hay algunos que afirman que el "papel está muerto" y promocionan los beneficios de la creación de prototipos digitales. Otros argumentan que el lápiz y el papel stregthens diseñan. Personalmente, se me ocurren diseños más fluidos cuando no estoy frente a mi computadora. Sin embargo, todos somos individuos, con diferentes preferencias y formas de pensar. Tal vez puedas ser igual de creativo frente a tu computadora; Es algo que cada diseñador tiene que descubrir por sí mismo.!
Una cosa que me encanta de la creación de prototipos en papel sin conexión es la velocidad con la que puede iterar el diseño. Uso notas adhesivas del tamaño de una pantalla que se pueden extraer, modificar, reordenar, etc. rápidamente. Una vez que se ha establecido un flujo para la aplicación, es hora de concretar los elementos en pantalla en una versión alámbrica..
Incluso si se trata de una aplicación para su propio "cliente" interno, los wireframes sirven como otra revisión para asegurarse de que la aplicación funciona de una manera que sirva tanto al usuario como a la empresa. Puede omitir el proceso y pasar directamente de los prototipos de papel a Photoshop para el diseño de GUI. Sé que es tentador, pero no lo hagas! El instante en que empiezas a trabajar en una burbuja es el mismo momento en que cedes a la "Maldición del conocimiento".
En el libro Made to Stick, los autores y hermanos Chip y Dan Heath hablan sobre la "Maldición del conocimiento" y su impacto en nuestra capacidad para crear nuevas ideas "pegajosas". La premisa en relación con el diseño móvil es que una vez que comienza a construir su base de conocimientos de diseño y tecnología móvil, más se aleja de un "usuario de aplicaciones típico". Realmente no puedes imaginar lo que es ser tu audiencia, incluso si encajas perfectamente en el perfil. Su capacidad para ponerse en el lugar de su audiencia se ve empañada por todo lo que ya sabe sobre la aplicación, cómo funciona y lo que cree que la audiencia quiere..
Una vez que sabemos algo, nos cuesta imaginar cómo era no saberlo. Nuestro conocimiento nos ha "maldecido". - Hecho para pegar
Todo esto es para decir que debe alámbrico y compartir esos esquemas con el público objetivo de su aplicación..
Ahora que se ha definido el cableado y el prototipado en papel dentro del contexto móvil, me gustaría describir las cinco cosas principales que debería hacer en sus sesiones de cableado y prototipado en papel. Es fácil abofetear un montón de bocetos y llamarlo un día, especialmente si su enfoque principal no es el diseño de la experiencia del usuario..
Espero que estos consejos lo alienten a tomar tiempo para pensar en la experiencia de usuario de su aplicación al hacer que sea un proceso fácil, paso a paso, repetible y fácil de seguir.!
Lo primero que debe hacer antes de siquiera pensar en poner la pluma en el papel es hacerse esta pregunta: ¿cuál es la tarea principal de su aplicación? Específicamente escriba:
(Su diferenciador) (Su solución) para (Su audiencia).
Veamos un ejemplo de la aplicación Evernote:
"Evernote para iPhone te permite crear notas, tomar fotos y grabar notas de voz a las que puedes acceder en cualquier momento desde tu iPhone, computadora o la web".
La copia en su sitio web explica claramente la tarea principal de la aplicación:
(Omni-accesible) (creación y almacenamiento de múltiples tipos de archivos) para (usuarios ocasionales de iPhone).
Defina esta declaración para su aplicación y colóquela en un lugar donde la vea con frecuencia mientras trabaja en los prototipos. Le ayudará a concentrarse precisamente en lo único que la aplicación DEBE hacer.
Una vez que haya definido su tarea principal, ¡probablemente también haya pensado en quién quiere una aplicación que realice esta tarea! Los casos de uso son la MEJOR manera de iniciar el proceso de creación de prototipos en papel. En este artículo, hablo sobre cómo definí los escenarios de casos de uso para nuestra aplicación Doodle Bright. Le di a "mi gente" un nombre, una dirección, una ocupación y un escenario específico cuando podrían usar una aplicación como Doodle Bright.
Aquí hay un ejemplo:
Jane está esperando en la oficina de los médicos para una cita a las 3 en punto con su hijo de 4 años, Chad. Ella trajo su iPad en caso de que la espera fuera más larga de lo esperado y, por supuesto, estuvieran atrapados en la sala de espera durante media hora antes de que los llamen. Jane pasa el tiempo dibujando camiones y trenes con Chad mientras esperan su cita..
En este escenario, Jane y Chad están jugando juntos con la aplicación, lo que significa que mamá puede preguntarle cómo interactuar con diferentes elementos en la pantalla si no está seguro del próximo paso..
Ahora veamos este ejemplo:
Jane está en la fila de vehículos compartidos para recoger a su hija mayor de la escuela. Chad está en el asiento trasero, aburrido después de un día de hacer recados. Jane le entrega su iPad con la aplicación Doodle Bright lanzada. Chad sabe qué botones presionar porque son intuitivos para un niño de 4 años..
En este escenario, los controles deben ser fácilmente comprensibles para un niño no supervisado. ¿Esto altera los tipos de prototipos de papel que creas para esta aplicación? ¡Claro que sí! Ahora, en lugar de diseñar para la madre y el hijo, para tener un atractivo más amplio, vemos que los prototipos deben orientarse principalmente hacia el niño.
Puede ser obvio que una aplicación como esta requeriría "pensar como un niño" pero sin este caso de uso para respaldar esa afirmación, puede caer en el "modo adulto" predeterminado de pensar sobre el diseño.
En su artículo sobre "El secreto para diseñar una interfaz intuitiva", Susan Weinschenk habla sobre cómo hacer coincidir su diseño con lo que el usuario espera ver. Cuanto mejor pueda hacer esto, más intuitiva será su interfaz..
A menudo encuentro que tengo un flujo perfecto definido para una aplicación, y luego encuentro algo que he dejado de lado. ¿Estado allí? Es agravante, pero una cosa que he encontrado que puede evitar muchos "descartes" es pensar fuera del escenario "perfecto"..
Un ejemplo del escenario Doodle Bright es cuando Chad crea una imagen totalmente increíble que Jane quiere guardar e imprimir, pero accidentalmente cierra la aplicación. UH oh. ¿Ahora que? ¿Tuvo en cuenta un auto-guardado en sus prototipos de papel? Yo espero que sí!
Como mencioné antes, cada uno es único y creativo a su manera. Tienes que encontrar un método que exprima lo más posible de ti. El prototipado en papel es uno de los ejercicios más creativos en el proceso de desarrollo de la aplicación, tiene que trabajar en esto en sus horas de trabajo, entorno, etc..
Hay muchos artículos por ahí con docenas de recursos y herramientas para crear wireframes. Espero que este artículo te haya convencido de que es una tarea que puedes abordar, incluso si no eres un experto en experiencia de usuario. Eche un vistazo a los siguientes enlaces y anote los que he omitido en los comentarios a continuación..
Para un gran artículo sobre wireframing en general, vaya a los "Beneficios de Wireframing" para aprender los principios que se aplicarán tanto a la web como a las aplicaciones móviles..
En el próximo check-out, un resumen de muy alto nivel del proceso de cableado que estaba detrás de la aplicación de iPad Washington Post. Personalmente, me encantaría ver más información sobre esto.!
Otras referencias de la nota:
Un conjunto de plantillas de croquis imprimibles para aplicaciones móviles..
Una gran lista de herramientas de prototipado de alambre y papel..
Tal como dice: "excelentes recursos de cableado".
Accentsconagua