Contenido
- 1. La creación de prototipos es fundamental
- 2. Es posible crear prototipos con muy poco dinero
- 3. Herramientas para facilitar su trabajo
- 4. Constrúyalo en un marco
- 5. Pon a prueba tus suposiciones
- 6. Reciba comentarios o vaya a casa
- 7. Transición a los dispositivos interactivos y móviles: conozca las condiciones de participación
- 8. Conozca su herramienta
- 9. Ningún producto está terminado
- 10. No estás libre
Durante mucho tiempo, el diseño web fue muy similar a los diseños de impresión. Un sitio puede estar lleno de contenido dinámico poblado de una base de datos, pero los sistemas tipográficos básicos de la cuadrícula regían la forma en que se diseñaron los sitios. Gran parte de nuestra navegación se basó en emular sistemas físicos como pestañas de carpetas o páginas. Estas convenciones nos permitieron crear sitios rápidamente y todos parecíamos pensar que todo estaba funcionando bien, y probablemente lo fue en su mayor parte.
En los últimos años todo se ha vuelto más interesante, complicado e interactivo. Desde diseños de sitios relativamente pequeños hasta aplicaciones de varias capas, cualquier diseño interactivo ahora requiere un nuevo nivel de pruebas rápidas, creación de prototipos y rediseño antes de construir y lanzar un producto final sólido. La necesidad de que un diseñador esté bien versado en las limitaciones y poderes de la plataforma para la que está diseñando nunca ha sido más importante. Estos son nuevos desafíos para cualquier diseñador que se sumerja en las aguas de la interacción, pero aquí es donde las cosas se ponen divertidas.
1. La creación de prototipos es fundamental
La creación de prototipos no es una opción. Como decía Hemingway, "El primer borrador de cualquier cosa es una mierda". Si las pruebas o la creación de prototipos no son una parte formal de su proceso, entonces, en esencia, su producto final es el prototipo, y probablemente sea una mierda. Los plazos y los presupuestos pueden exprimir la redacción de textos publicitarios, la IA y la creación de prototipos de la refriega de los elementos imprescindibles. En ese caso, encuentre una manera de escalar todo para que pueda mantener cierta cantidad de pruebas y prototipos en su proyecto. Su cliente, su equipo o sus inversores se lo agradecerán cuando aumente el retorno de la inversión.
La oportunidad de obtener grandes devoluciones es el resultado de realizar pruebas internas, iterar y realizar los cambios necesarios e inteligentes en un sitio o un producto antes de enviarlo al público. Si no está creando prototipos, entonces está demostrando que está dispuesto a permitir que su audiencia use su producto como si fuera un prototipo, una experiencia que tiene el potencial de dañar su marca y sus objetivos a largo plazo.
2. Es posible crear prototipos con muy poco dinero
El presupuesto y el tiempo son siempre una limitación, pero si está trabajando con poco dinero, todavía tiene opciones. Un simple prototipo de boceto en papel y lápiz seguido de un buen período de preguntas y respuestas será de gran ayuda para ayudarlo a comprender cómo debe diseñarse la herramienta para su audiencia.
3. Herramientas para facilitar su trabajo
Una herramienta poderosamente versátil y eficiente para la creación de prototipos es la creación rápida de prototipos, algo que aprendí de Dan Rubin. Cree un conjunto de composiciones visuales planas (JPG o PNG) de las vistas que desea probar. Coloque estas vistas como fondo de la cuerpo> elemento. A continuación, coloca enlaces de anclaje con alturas y anchos fijos sobre las áreas de acción del diseño utilizando un posicionamiento absoluto.
Pídale a un usuario que complete una determinada tarea, como "Busque un libro, agréguelo a su carrito, luego revise", luego observe si hace lo que usted espera que haga. El único comportamiento que mostrarán las áreas de enlace es el predeterminado cursor: puntero en :flotar, pero es suficiente para ayudar al usuario a moverse de una página a otra.
El valor de esta técnica es que puede realizar cambios extremadamente rápidos en un documento de Photoshop y exportarlo nuevamente como JPG, y cambios igualmente rápidos en enlaces absolutamente posicionados en el HTML. Es bastante rápido.
De manera similar al ejemplo anterior de Rubin, la aplicación Invision le brinda la opción de usar un diseño de cualquier fidelidad, desde cuadros y flechas básicos hasta diseños de píxeles perfectos ultra-hawt. La aplicación le brinda una interfaz limpia y clara para cargar estas vistas, nombrarlas, ordenarlas y luego dibujar y mapear enlaces a cualquiera de las vistas que haya cargado. En esencia, InVision le quita la codificación interactiva de sus manos y le brinda un espacio organizado para realizar un seguimiento de las versiones de los prototipos a lo largo del camino.
La simplicidad del sistema ha sido una gran victoria para nosotros en Zaarly y lo usamos regularmente, particularmente cuando hacemos prototipos para nuestra aplicación de iPhone. Para nosotros ha sido especialmente importante crear prototipos para nuestras plataformas móviles. Las interacciones inherentes a un nuevo tipo de mercado exigen que exploremos lo que está disponible dentro de las convenciones de iOS y, en algunos casos, creemos nuevas interacciones. De hecho, podemos probar y simular esas experiencias antes de enviar el producto a medio millón de usuarios, lo que nos permite seguir enviando productos con frecuencia, pero con mucho cuidado.
InVision tiene cuentas gratuitas y de pago que se adaptan a sus necesidades, y no están solos en la cuadra.
4. Constrúyalo en un marco
Si su herramienta o producto es complejo y podría soportar una construcción más extensa, realmente puede hacer mucho daño con Sencha Touch, jQuery Mobile para dispositivos portátiles o Twitter Bootstrap en la web. En realidad, estas pueden ser excelentes herramientas para crear una aplicación solo para ver si tiene influencia y fuerza en la comunidad antes de volverse loco creando su propio HTML y estilo personalizados. Un gran ejemplo de esto es 52Network de @ howell, que es un uso maravilloso de Bootstrap hackeado.
5. Pon a prueba tus suposiciones
Obtenga analíticas y detectores de eventos adjuntos a su aplicación. Esto le permite observar y probar sus suposiciones y ver si los usuarios están actuando como sospechaba que lo harían o si su UX necesita un ajuste. Google Analytics está bien, pero sería mejor algo que rastree los casos de uso por usuario de manera más hábil. KISSmetrics es una gran herramienta de seguimiento de conversiones y embudo en esta área.
Otra opción saludable es simplemente presentar sus diseños a personas con preguntas simples. Una de mis herramientas favoritas es VerifyApp de Zurb.
6. Reciba comentarios o vaya a casa
La creación de prototipos en cualquier nivel es una adición poderosa a su conjunto de herramientas y, a menudo, una necesidad absoluta en el diseño de espacios web y móviles interactivos. Pero la creación de prototipos no es un fin en sí mismo. Hacemos prototipos para probar. Las pruebas de usabilidad adecuadas son un arte y una ciencia, pero también se pueden hacer con un poco de sentido común.
- Elija personas que se parezcan a su audiencia.
- Guíe a las personas libremente dándoles tareas generales, no acciones específicas en el sitio.
- Tome notas extensas y útiles.
- Revise y pruebe de nuevo.
7. Transición a los dispositivos interactivos y móviles: conozca las condiciones de participación
Como diseñador web desde hace mucho tiempo, siempre fue una práctica estándar escribir mi propio código de interfaz y luego, cuando el tamaño del proyecto creció o la codificación era más rigurosa de lo que podía acomodar mi conjunto de habilidades, confié en mi conocimiento de codificación para mantener una comunicación constante con los desarrolladores en el proyecto. Esto siempre resultó útil para mantener intacta la visión del diseño hasta el final.
Diseñar para plataformas web móviles, iOS y Android ha sido mucho más desafiante. El obstáculo de los lenguajes de programación necesarios para escribir para estas plataformas es posiblemente significativamente más complejo que HTML / CSS y JavaScript. Ya no es una expectativa razonable que un diseñador sea versátil tanto en el diseño visual como en el código a este nivel.
Existe una gran necesidad de que el diseñador traduzca su trabajo utilizando un lenguaje común entre el diseñador y el desarrollador. Para iOS, por ejemplo, esto significa comprender la nomenclatura que Apple ha establecido en sus Pautas de interfaz humana. También implica conocer las limitaciones y los poderes disponibles para la plataforma y cómo es probable que un desarrollador quiera encontrar una solución de interacción que se adapte bien a la plataforma.
La comunicación se convierte en la herramienta más importante en una relación diseñador-desarrollador. ¿Qué cosas son fáciles de implementar en dispositivos móviles? ¿Qué cosas son mucho más difíciles (como la altura de la línea / el liderazgo en las vistas nativas de iOS, por ejemplo)? La clave aquí es que los sistemas de desarrollo para iOS o Android son significativamente diferentes a los sistemas para el diseño web moderno.
En última instancia, ambos artesanos deberían tener una mentalidad de diseño, ya sea trabajando visualmente o en código. Esto crea un vínculo que crea grandes equipos y productos que valen la pena.
8. Conozca su herramienta
La web a gran escala, la web móvil, Android, iPhone, iPad y otros dispositivos tienen cada uno su propio entorno y cultura que afecta la forma en que se debe considerar el diseño de interacción. Hay convenciones que cada plataforma o dispositivo ha incorporado tanto programática como culturalmente que dependen de la velocidad, portabilidad, capacidad táctil, utilidad y juego de Internet.
Si se esfuerza por asumir el diseño de interacción, copiar los estilos del trabajo de otros diseñadores no es una forma digna de participar. Tómese el tiempo necesario para investigar y saber cómo los usuarios utilizan la herramienta para la que está diseñando y, como mencioné anteriormente, no confíe solo en la investigación o la intuición, ¡pruebe y prototipo!
9. Ningún producto está terminado
Recientemente, dirigí una pequeña tienda web que producía trabajos para clientes que tenían el presupuesto y la previsión de pagarnos por una vez en un proyecto. Lo mejor que podíamos hacer por esos clientes, o eso pensé en ese momento, era involucrarlos con la mejor investigación y pruebas previas al lanzamiento para las que pudiéramos obtener el presupuesto, usar una gran intuición de diseño y luego lanzar y orar por un gran ROI .
A medida que comienzo a aventurarme en el diseño de productos, me doy cuenta cada vez más de que el producto nunca está completo. Siempre hay pruebas por hacer, personas de las que recibir comentarios y nuevas y mejores formas de crear prototipos y diseñar.
Si no está en un equipo de producto, todavía hay formas de involucrar a sus clientes con estas herramientas. Considere abordar un programa de pruebas con sus clientes cada tres meses durante un año después del lanzamiento. Establezca objetivos específicos con sus clientes y luego ayude a modificar el sitio o el producto para alcanzar esos objetivos y mejorar su ROI. Dada la oportunidad de aumentar sus ingresos, no puedo pensar en un cliente que no lo consideraría.
10. No estás libre
Si se está alejando de este pensamiento de que sus sitios no requieren prototipos o una comprensión más rigurosa de las plataformas para las que está diseñando, entonces está muy equivocado. El mundo del contenido en la web se está volviendo versátil. Será contenido para dispositivos móviles, tabletas y dinámicamente gratuito e interactivo que triunfe sobre el sitio estático.
