TUX2013 - Trabajo de equipo en diseño de interacción

Expositores: Lucila Diaz Spólita, Belén Soria, Rocío Tomsic

Observaciones:

- Diapositiva 2:
Somos diseñadoras del equipo de The UX Department. Esta presentación se va a tratar de como trabajamos en equipo dentro de nuestra área, el diseño de interacción.

- Diapositiva 3:
Diseño de interacción

- Diapositiva 4:
Diseño de interacción

- Diapositiva 5:
Un concepto que creemos que sintetiza la idea de lo que queremos transmitir cuando hablamos de la importancia de tener en cuenta al usuario a la hora de diseñar es el siguiente: (se puede traducir como "comprensión intuitiva").

- Diapositiva 6:
Es evidente en que caso se tuvo en cuenta la función del objeto y en que caso no. Como diseñadoras web tenemos que saber que es clickleable y que no, que es un link, que es un botón, que es más importante y que es secundario.

- Diapositiva 7:
Básicamente somos un equipo de 16 personas: Proyect Managers, desarrolladores y diseñadores. Entonces el proceso en el equipo a grandes rasgos es así: las tareas vienen del contacto entre pms y los clientes y de allí pasa al área de diseño para luego pasar a desarrollo. Durante el proceso de un proyecto, las áreas están en permanente feedback, entre controles, pruebas, errores hasta llegar al final.

- Diapositiva 8:
Consideramos que el diseño web y de aplicaciones son áreas de oportunidad dentro de la industria. Nosotros hacemos sitios web, aplicaciones y aplicaciones web.

- Diapositiva 9:
Algunos de los trabajos mobile en los que trabajamos este año.

- Diapositiva 10:
En esta charla nos vamos a centrar en el diseño web.

- Diapositiva 11:
Conceptos que aprendimos y que utilizamos a la hora de desarrollar nuestros trabajos.

- Diapositiva 12:
Ademas de conceptos, tenemos en cuenta el entorno, las tendencias.

- Diapositiva 13:
Herramientas

- Diapositiva 14:
Proceso de trabajo pasando por la conceptualización, producción, desarrollo, lanzamiento hasta la revisión.

- Diapositiva 15:
Presentación de caso iCustomer.

- Diapositiva 16/17:
iCustomer es una aplicación web que gestiona la presencia de una marca en las redes sociales.

- Diapositiva 18:
Pedido del cliente.

- Diapositiva 19:
Definición de perfiles de usuarios que usarían la aplicación.

- Diapositiva 20/21:
Esquema de la estructura y los elementos de la aplicación.

- Diapositiva 22/23:
Etapa de producción de wireframes donde se definen los elementos y sus funcionalidades, es decir una versión muy simplificada de la pantalla para tener una idea inicial de la organización de los elementos.

- Diapositiva 24:
Creación de mockups, la parte del proceso en la que finalmente intervenimos. Generamos un código de comunicacion para facilitar la interacción entre el usuario y el sistema.

- Diapositiva 25:
Desarrollo y Lanzamiento: el proyecto pasa al área de desarrollo, esto no quiere decir que acá finaliza nuestro trabajo sino que siempre surgen ajustes y correcciones.

- Diapositiva 26:
Pantalla anterior de login.

- Diapositiva 27:
Rediseño de la pantalla de login, donde intentamos describir a un primer pantallazo el funcionamiento de la aplicacion. El usuario puede ver a simple vista por ejemplo que va a poder usarla en ipad, que existe una página de reportes, etc. Solucionamos problemas de experiencia de usuario como por ejemplo la posibilidad de registrarse, cambiar contraseña, etc. que en la versión anterior no existían.

- Diapositiva 28/29:
Pantalla anterior de conversación.

- Diapositiva 30:
Rediseño de la pantalla de conversación, pantalla principal de la aplicación donde tuvimos que codificar un lenguaje de comunicación (de que forma mostrar los links, los botones, acciones, etc).

- Diapositiva 31:
Pantalla anterior de Relatorios.

- Diapositiva 32:
Rediseño de la pantalla de Relatorios, donde re-implementamos todos los patrones de diseño que ya habíamos planteado en una nueva funcionalidad (la de mostrar gráficos, tablas, filtros, etc).

- Diapositiva 33:
Diseño responsive.

- Diapositiva 34:
Sistema de grillas: se puede ver facilmente como se reestructura el contenido. El ejemplo de la izquierda es lo que sería la pantalla de una computadora promedio, el siguiente es un ipad o tablet y el 3ro un teléfono. En ipad todavia se pueden mantener columnas (2 o 3 maximo), pero en los celulares no.

- Diapositiva 35:
Ejemplo del login de icustomer: vemos concretamente como se reestructura la información. En este caso, ocultamos el párrafo de introducción para que los otros elementos no pierdan jerarquia.

- Diapositiva 36:
Detalle de la pantalla para ipad.

- Diapositiva 37:
Resultado de busqueda: el elemento importante que quería mostrar acá es el sidebar o menú. Cómo un menu con muchos items cambia y se oculta en su versión responsive.

- Diapositiva 38:
Detalle de la pantalla para ipad.

- Diapositiva 39:
Align: Este es un ejemplo de poco contenido. Una navegación pequeña, marca, slogan, foto y texto. La versión responsive es más sencilla de adaptar, siempre teniendo en cuenta las jerarquias.

- Diapositiva 40:
Detalle de la pantalla mobile y su navegación desplegable.

- Diapositiva 41:
QuestionPro: Este es un ejemplo de un sitio responsive con mucho contenido. En este caso teníamos un top bar y además una navegación para resolver. En el top bar ocultamos los items que no eran tan importantes de manera que los que sí eran importantes se vean y puedan ser presionados. En este caso la navegación se escondió en una barra de menú que despliega para abajo.

- Diapositiva 42:
Detalle de la pantalla mobile.

- Diapositiva 43:
Llevamos un tiempo trabajando en equipo y como conclusión destacamos algunos puntos a favor de trabajar de esta forma. Hemos encontrado más pros que contras, tenemos más control sobre nuestros trabajos, las falencias de cada uno se contrarrestan porque siempre alguien puede ayudar a resolver, hay variedad de opiniones lo que genera una aprendizaje y se generan soluciones más ricas, las debilidades individuales pueden superarse o compensarse en grupo y se trabaja mucho más rápido.