Moviments i interaccions

Recursos

Descripció

En aquest apartat descriurem diferents estratègies per a aprofundir en la representació de moviments i interaccions acompanyant cada un amb exemples visuals. 

En primer lloc, és important buscar la forma de representació que sigui més còmoda per a poder treballar de manera fluïda i amb confiança. Per a aconseguir aquest objectiu, la base és practicar i l’objectiu és fer un entrenament en la representació per adquirir fluïdesa i que el dibuix no sigui un hàndicap sinó una eina de projecte.

Representació de formes bàsiques.
Font: Bikablo. Visual dictionary 2.0. https://www.flickr.com/photos/pattiebelle/15051322847/in/photostream/.

També és important tenir clar com passar de la representació d’una escena global als detalls particulars de la interacció. En el primer cas, el tipus de dibuix serà molt més generalista i requerirà seleccionar els elements essencials que cal representar, usar contorns bàsics, llenguatge de línia i contrast (fi, gruixut, ombrejat), línies de força que accentuïn les postures, i cercar connectors o metàfores visuals que facilitin la interpretació del conjunt.

En les imatges següents es mostren exemples bàsics d’aquests conceptes en els quals es pot observar la seva aplicació al relat de situacions.

 

Aplicació de conceptes bàsics a la representació de situacions.
Font: https://www.pinterest.ca/pin/509540145340238216/visual-search/?x=16&y=9&w=530&h=298.

A part de la representació de moviments i gestos, també és molt útil disposar d’algunes expressions bàsiques d’emocions:

Representació d’emocions.
Font: https://www.flickr.com/photos/luigimengato/14866909804.

A mesura que ens apropem a interaccions concretes amb objectes, és més important definir els detalls, però hem de mantenir el principi de les línies guia del dibuix. A continuació es mostren alguns exemples de com simplificar gestos de moviments en figures humanes:

Línies de moviment en figures humanes.
Font: https://www.pinterest.es/pin/364158319861485409/.

Quan s’analitza una activitat o situació, és interessant definir-ne tots els moments clau respecte a les interaccions amb el producte evidenciant les posicions o gestos vinculats a aquest producte, ja que ens donarà informació molt valuosa sobre els possibles problemes que afronta l’usuari en la seva utilització.

Passos clau d’una activitat, segons Ben Coble.
Font: https://www.coroflot.com/coblebw/Sketching.

A continuació es mostren un parell d’exemples sobre l’ús del contrast i el color per a evidenciar la figura, l’objecte i les relacions de moviment, de manera que es facilita la lectura ràpida dels components en l’escena.

Ús del contrast i del color.
Font: https://reviewmotors.co/golden-goose-egg-scrambler-uk/.

A més, podem recórrer a usar combinadament imatges fotogràfiques i il·lustració. Això afegeix un llenguatge amb caràcter realista a la peça final. La representació de gestos o postures es pot facilitar si s’utilitzen fotos com a base per a generar dibuixos de traços molt senzills que no interfereixin en la lectura de la resta d’elements que componen la peça gràfica.

Figura que combina imatge real i il·lustració, segons Yoon Naera.
Font: https://www.yankodesign.com/2015/03/20/dishes-done-right/.

A continuació es mostra un repertori de gestos i posicions bàsics en la manipulació d’objectes que serveix per a aproximar-nos a la interacció real entre persones i objectes i que ajudarà com a plantilla o base a l’hora de representar aquest tipus de situacions.

Figures bàsiques de gestos i posicions.
Font: www.shutterstock.com.

En la imatge següent es mostren moviments específics en l’ús d’interfícies digitals:

Figures bàsiques de gestos i posicions amb dispositius digitals.
Font: https://freedesignfile.com/173287-man-hand-gestures-vector-design-02/.

L’ús de numeració com a estratègia per a definir l’ordre de successió de moviments o passos en una activitat és molt pràctic per a aclarir i guiar el lector sobre l’ordre de la seqüència d’ús del producte, dispositiu o interfície. Complementar-ho amb textos aclaridors o titulars sobre l’acció és igualment una estratègia molt aclaridora.

Incorporació de numeració i descriptors en la narrativa visual.
Font: https://www.pinterest.pt/pin/301107925058204016/.

Moltes vegades és útil indicar el pas del temps, el temps requerit per a una acció determinada o per a gestos repetitius. Aquesta indicació pot aparèixer com a icona complementària de la vinyeta o bé com un altre element dins de la seqüència, tal com s’observa en la imatge següent.

Indicació del pas del temps.
Font: https://www.pinterest.com/LUem2019/infographics/.

Algunes vegades és necessari representar no solament el moviment que cal fer, sinó el «rastre» del moviment que hem fet en una interfície digital per a poder analitzar el retorn que ofereix el dispositiu una vegada fet aquest gest.

Indicació de l’acció portada a terme.

Referències

Baskinger, M.; Bardell, W. (2013). Drawing ideas: a hand-drawn approach for better design. Nova York: Watson-Guptill.

Haussman, M. (2016). «Bikablo® emotions». Visual dictionary. Eichenzell: Neuland.