¿Qué software recomendaría como “esencial” para los novatos en el campo del diseño de interacción o HCI? Estilo de Vida y Elegante

Esta es una pregunta bastante amplia, y realmente no llamaría a ninguna herramienta esencial, ya que dependiendo de los antecedentes de los que provenga y en qué trabajo / programa académico ingrese, los elementos esenciales pueden variar. Sin embargo, algunos de los más comunes que se usan se pueden enumerar sin pensarlo mucho. Voy a agrupar las herramientas que, en mi experiencia, proporcionan usos muy similares, y podría ser bueno conocer cualquiera de ellas:

1. Adobe Photoshop / Indesign / Fireworks:

Estoy agrupando estos 3 juntos, ya que puede usar cualquiera de estos de manera muy efectiva para hacer todo, desde un conjunto básico de estructuras de alambre hasta maquetas visuales de alta fidelidad. Algunos ejemplos que tomé de google images:
Como puede ver, dependiendo de su nivel de habilidad (y paciencia), puede obtener mucho de las aplicaciones de Adobe Suite. Dejaré anotar los pros y los contras para alguien más, pero es fácil ver por qué aprender uno de estos puede ser útil. Puede usar una sola herramienta (photoshop / fireworks / indesign) para gran parte del proceso de diseño, desde esquemas básicos hasta diseños finales. Sin embargo, antes de aceptar el desafío de conocer la aplicación adobe suite al revés, haga una pausa y eche un vistazo a las otras cosas que puede usar:

2. @Balsamiq, tramas de sitios web: Mockingbird, MS Visio, Flow Chart Maker y software de diagramas en línea

Usar las aplicaciones de adobe creative suite para actividades básicas de creación de ideas y creación de ideas es como subirse a su helicóptero privado para ir de compras. Es excesivo Y pasará demasiado tiempo en logística irrelevante (gran cantidad de capas, formas perfectas de píxeles, gradientes correctos, etc., etc.). Inicialmente, todo lo que necesita hacer es enjuagar sus pensamientos, convertir todos esos hilos aleatorios de ideas que flotan en su cabeza en algo sensato. Aquí una herramienta como Balsamiq es imo, mejor. Puede arrastrar y soltar rápidamente elementos de la IU y comenzar a entender cómo fluirá su idea de una pantalla a otra.

Algunos ejemplos:

He descubierto que herramientas como balsamiq son especialmente útiles cuando los plazos son ajustados y necesito comunicar mis ideas rápidamente. Puede dedicar más tiempo a su idea y menos tiempo a aprender la herramienta en sí.

Sin embargo, creo que puedes ir aún más simple. Especialmente si eres bueno con bolígrafos / lápices:

3. Dibujo:

Es importante recordar que con un campo como el diseño de interacción, es su idea lo que cuenta. (Sí, también lo hace la presentación de la idea, por eso existe esta pregunta, pero tengan paciencia conmigo por un minuto). Dibujar a mano es algo que mucha gente descarta como inútil, pero realmente puede ser útil, especialmente. cuando estás empezando Puede ahorrarle mucho tiempo si puede esbozar rápidamente su idea en papel, sin tener que abrir un software, aprender sus detalles esenciales y trabajar en ello. Echa un vistazo a estos:

Hay un montón de cosas que pueden ayudarlo a dibujar a mano. Los elementos de la interfaz de usuario están disponibles en archivos PDF que puede imprimir y recortar mientras dibuja aplicaciones móviles / web. Se pueden encontrar ejemplos aquí: Hojas de bocetos para diseñadores web | Sneakpeekit

Bueno. Puede elegir cualquiera de las cosas que mencioné anteriormente y realmente ir a la ciudad con el diseño de todo tipo de cosas hasta los detalles extremos, como pasar el mouse / estados deshabilitados / pantallas de transición, sombras de gradiente individuales, etc.

Sin embargo, una cosa que aún falta es el hecho de que todo esto esencialmente solo produce una tonelada de imágenes estáticas, y aunque tendrá un sentido total para usted, puede que no sea tan claro para sus compañeros. Aquí es donde necesitas un poco de interacción.

4. Omnigraffle, Auxre, (se puede encontrar más en esta pregunta de quora: ¿Cuál es la mejor alternativa gratuita a Omnigraffle?)

Herramientas como las mencionadas anteriormente, le brindan exactamente eso, interacción entre múltiples pantallas. Esto facilita la visualización de ideas y puede ayudar a validar su idea ante los demás. Obviamente, hay una gama de tablas que se puede cubrir aquí. Dependiendo de la cantidad de codificación que sepa / le guste hacer, puede comenzar de manera simple, como vincular documentos en balsamiq, para que elementos específicos de la interfaz de usuario interactúen en omnigraffle y auxre. Algunos ejemplos :

Mira el video en http://www.axure.com

Axure RP Pro – Demo de prototipo interactivo

El uso de herramientas como esta requiere que realmente aprenda los entresijos de la herramienta en sí y, por lo tanto, al igual que con la suite de Adobe, esto lleva un poco de tiempo, pero si no está muy cómodo con la codificación, estos pueden ser muy útiles. para ayudar a mostrar tus ideas.

5. ¡Codifícate!

Cosas como JQuery UI y JQuery Mobile han hecho que sea mucho más fácil hacer prototipos rápidos en vivo. (Puede ser tan simple como vincular 100 jpgs y tener animaciones en ellos para interacciones “falsas”). Codificarse en lugar de usar herramientas como en el n. ° 4 tiene la ventaja de que puede tener un mayor control sobre el prototipo y no estar limitado por las interacciones y los elementos predeterminados de la interfaz de usuario.

Creo que es bastante seguro decir que debes tener algo de los primeros tres y algo del # 4 o # 5 en tu arsenal de habilidades para ser bueno en el diseño de interacción.

Voy a mantener esta respuesta limitada al “Diseño de interacción” y no entraré en otras partes de HCI (como herramientas de investigación de usuarios, herramientas estadísticas) ya que probablemente justifiquen sus propias publicaciones.