One of the most important aspects of user interface and user experience design is interactivity, feedback and media. During self-directed learning, I have used LinkedIn Learning as a training resource for learning Java code in Processing in order to code basic elements of interaction and built-in media.
Although one that would work better on desktop interfaces such as websites or downloadable software, hovering can give a user feedback on where they are on the website, that the feature they’re wanting to access is live and helps to flesh out the website and the aesthetic overall. Using LinkedIn Learning and the Processing: Interactive data Visualisation course (2012), paired with the learnings from a past experiment such as using specific hex codes within Java code and Processing, I have coded a hover interaction where elements change colour once the user hovers over an element. Below, screenshots and a video of the interaction can be viewed. Although this is a basic interaction style, it is often the most common found on websites. I believe with further exploration this could be used on elements such as buttons and linked headlines. I tried to develop this interaction by testing if an image could be loaded when the mouse hovers over one of the elements, however, more research must be undertaken for this interaction due to an error in the code due to “img cannot be resolved to a variable” message that can seen within the screenshots below. In order to be able to load an image upon hovering a new set of code may be required, not the “if” variable.
The second area of code development I have explored is using media such as video within the code. This test, although successful, could only be achieved when using the lesson files from the LinkedIn Learning session due to an error in the Processing software not being able to source an animation video I had wanted to use within my exploration. I believe this may be to do with the method in which the Processing Library is used for media such as videos. However, this exploration did allow me to learn about scaling media such as video and also a specific type of interaction such as the video being able to move with the mouse. Although I can not see many practical uses for this type of interaction, I can see a design use. Thanks to the nature of this code exploration, the background does not refresh when the mouse moves which generates a sort of glitch-style aesthetic. I believe this code example could be used to generate imagery to be used as part of a larger design process where the aesthetic surrounds a glitch style.
As I continue to develop skills and knowledge within this field, I hope to build a practical understanding of how the various areas of Processing and Java code could aid my design methodology and how it can be integrated into my wider graphic design / UI & UX creative practice.
References:
Poulson, B. (2012,9,25). Processing: interactive data visualisation. [Video]. LinkedIn learning. https://www.linkedin.com/learning/processing-interactive-data-visualization
Comments