{"id":15152,"date":"2020-12-15T11:48:16","date_gmt":"2020-12-15T09:48:16","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/moviments-i-interaccions\/"},"modified":"2021-01-29T14:54:22","modified_gmt":"2021-01-29T12:54:22","slug":"movimientos-e-interacciones","status":"publish","type":"post","link":"http:\/\/design-toolkit-test.uoc.edu\/es\/movimientos-e-interacciones\/","title":{"rendered":"Movimientos e interacciones"},"content":{"rendered":"

Descripci\u00f3n<\/strong><\/h2>\n

En este apartado describiremos diferentes estrategias para profundizar en la representaci\u00f3n de movimientos e interacciones acompa\u00f1ando cada uno de ellos de ejemplos visuales.<\/p>\n

En primer lugar, es importante buscar el modo de representaci\u00f3n que sea m\u00e1s c\u00f3modo para poder trabajar de manera fluida y con confianza. Para lograr este objetivo, la base es practicar y el objetivo es realizar un entrenamiento en la representaci\u00f3n para adquirir fluidez y que el dibujo no sea un h\u00e1ndicap, sino una herramienta de proyecto.<\/p>\n

\"\"

Representaci\u00f3n de formas b\u00e1sicas.
Fuente: Bikablo. Visual dictionary 2.0<\/em>. https:\/\/www.flickr.com\/photos\/pattiebelle\/15051322847\/in\/photostream\/<\/a>.<\/p><\/div>\n

Tambi\u00e9n es importante tener claro c\u00f3mo pasar de la representaci\u00f3n de una escena global a los detalles particulares de la interacci\u00f3n. En el primer caso, el tipo de dibujo ser\u00e1 mucho m\u00e1s generalista y requerir\u00e1 la selecci\u00f3n de los elementos esenciales que hay que representar, el uso de contornos b\u00e1sicos, lenguaje de l\u00ednea y contraste (fino, grueso, sombreado), l\u00edneas de fuerza que acent\u00faan las posturas, as\u00ed como la b\u00fasqueda de conectores o met\u00e1foras visuales que faciliten la interpretaci\u00f3n del conjunto.<\/p>\n

En las im\u00e1genes siguientes se muestran ejemplos b\u00e1sicos de estos conceptos donde se puede observar su aplicaci\u00f3n al relato de situaciones.<\/p>\n

 <\/p>\n

\"\"

Herramientas b\u00e1sicas en escenas globales.
Fuente: http:\/\/floobynooby.blogspot.com\/2011\/01\/lines-of-action-mickeys-christmas-carol.html<\/a>.<\/p><\/div>\n

 <\/p>\n

\"\"

Aplicaci\u00f3n de conceptos b\u00e1sicos a la representaci\u00f3n de situaciones.
Fuente: https:\/\/www.pinterest.ca\/pin\/509540145340238216\/visual-search\/?x=16&y=9&w=530&h=298<\/a>.<\/p><\/div>\n

Aparte de la representaci\u00f3n de movimientos y gestos, tambi\u00e9n es muy \u00fatil contar con algunas expresiones b\u00e1sicas de emociones:<\/p>\n

\"\"

Representaci\u00f3n de emociones.
Fuente: https:\/\/www.flickr.com\/photos\/luigimengato\/14866909804<\/a>.<\/p><\/div>\n

A medida que nos acercamos a interacciones concretas con objetos, es m\u00e1s importante definir los detalles; sin embargo, debemos mantener el principio de las l\u00edneas gu\u00eda del dibujo. A continuaci\u00f3n se muestran algunos ejemplos de c\u00f3mo simplificar gestos de movimientos en figuras humanas:<\/p>\n

\"\"

L\u00edneas de movimiento en figuras humanas.
Fuente: https:\/\/www.pinterest.es\/pin\/364158319861485409\/<\/a>.<\/p><\/div>\n

Cuando se analiza una actividad o situaci\u00f3n, es interesante definir todos los momentos clave de la misma respecto a las interacciones con el producto evidenciando las posiciones o gestos vinculados a este, ya que \u00a0nos dar\u00e1 informaci\u00f3n muy valiosa sobre los posibles problemas que afronta el usuario en su utilizaci\u00f3n.<\/p>\n

\"\"

Pasos clave de una actividad, por Ben Coble.
Fuente: https:\/\/www.coroflot.com\/coblebw\/Sketching<\/a>.<\/p><\/div>\n

A continuaci\u00f3n, se muestran un par de ejemplos sobre el uso del contraste y el color para evidenciar la figura, el objeto y las relaciones de movimiento, de forma que se facilita la lectura r\u00e1pida de los componentes en la escena.<\/p>\n

\"\"

Uso del contraste y del color.
Fuente: https:\/\/reviewmotors.co\/golden-goose-egg-scrambler-uk\/<\/a>.<\/p><\/div>\n

Adem\u00e1s, podemos recurrir a un uso combinado de im\u00e1genes fotogr\u00e1ficas e ilustraci\u00f3n. Esto a\u00f1ade un lenguaje con car\u00e1cter realista a la pieza final. La representaci\u00f3n de gestos o posturas se puede facilitar si se utilizan fotos como base para generar dibujos de trazos muy sencillos que no interfieran en la lectura del resto de elementos que componen la pieza gr\u00e1fica.<\/p>\n

\"\"

Figura combinando imagen real e ilustraci\u00f3n, por Yoon Naera.
Fuente: https:\/\/www.yankodesign.com\/2015\/03\/20\/dishes-done-right\/<\/a>.<\/p><\/div>\n

A continuaci\u00f3n, se muestra un repertorio de gestos y posiciones b\u00e1sicos en la manipulaci\u00f3n de objetos que sirve para aproximarnos a la interacci\u00f3n real entre personas y objetos y que ayudar\u00e1 como plantilla o base a la hora de representar este tipo de situaciones.<\/p>\n

\"\"

Figuras b\u00e1sicas de gestos y posiciones.
Fuente: www.shutterstock.com<\/a>.<\/p><\/div>\n

En la imagen siguiente se muestran movimientos espec\u00edficos en el uso de interfaces digitales:<\/p>\n

 <\/p>\n

\"\"

Figuras b\u00e1sicas de gestos y posiciones con dispositivos digitales.
Fuente: https:\/\/freedesignfile.com\/173287-man-hand-gestures-vector-design-02\/<\/a>.<\/p><\/div>\n

El uso de numeraci\u00f3n como estrategia para definir el orden de sucesi\u00f3n de movimientos o pasos en una actividad es muy pr\u00e1ctico para aclarar y guiar al lector sobre el orden de la secuencia de uso del producto, dispositivo o interfaz. Complementarlo con textos aclaratorios o titulares sobre la acci\u00f3n es igualmente una estrategia muy aclaratoria.<\/p>\n

\"\"

Incorporaci\u00f3n de numeraci\u00f3n y descriptores en la narrativa visual.
Fuente: https:\/\/www.pinterest.pt\/pin\/301107925058204016\/<\/a>.<\/p><\/div>\n

En muchas ocasiones es \u00fatil indicar el paso del tiempo, el tiempo requerido para una acci\u00f3n determinada o para gestos repetitivos. Esta indicaci\u00f3n puede aparecer como icono complementario a la vi\u00f1eta, o bien como un elemento m\u00e1s dentro de la secuencia, como se observa en la imagen siguiente.<\/p>\n

\"\"

Indicaci\u00f3n del paso del tiempo.
Fuente: https:\/\/www.pinterest.com\/LUem2019\/infographics\/<\/a>.<\/p><\/div>\n

En algunas ocasiones es necesario representar no solo el movimiento a realizar, sino el \u00abrastro\u00bb del movimiento que hemos realizado en un interfaz digital para poder analizar el feedback<\/em> que ofrece el dispositivo una vez realizado este gesto.<\/p>\n

\"\"

Indicaci\u00f3n de la acci\u00f3n realizada.<\/p><\/div>\n

Referencias<\/strong><\/h2>\n

Baskinger, M.; Bardell, W.<\/strong> (2013). Drawing Ideas: A Hand-Drawn Approach for Better Design<\/em>. New York, NY: Watson-Guptill.<\/p>\n

Haussman, M.<\/strong> (2016). \u00abBikablo\u00ae emotions\u00bb. Visual Dictionary<\/em>. Eichenzell: Neuland.<\/p>\n","protected":false},"excerpt":{"rendered":"

Descripci\u00f3n En este apartado describiremos diferentes estrategias para profundizar en la representaci\u00f3n de movimientos e interacciones acompa\u00f1ando cada uno de ellos de ejemplos visuales. En primer lugar, es importante buscar el modo de representaci\u00f3n que sea m\u00e1s c\u00f3modo para poder trabajar de manera fluida y con confianza. Para lograr este objetivo, la base es practicar […]<\/p>\n","protected":false},"author":4,"featured_media":18209,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[33,31],"tags":[],"_links":{"self":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15152\/"}],"collection":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/users\/4\/"}],"replies":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/comments\/?post=15152"}],"version-history":[{"count":6,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15152\/revisions\/"}],"predecessor-version":[{"id":17716,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15152\/revisions\/17716\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18209\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=15152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=15152"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=15152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}