For this week’s reading, I’d like to respond to the section on using visuals to reinforce physical interaction (Principles 3.1 and 3.6). As Ge points out toward the beginning of chapter, design should "aim to simultaneously address the visual, the aural, and the interactive" (pg 117). One of the most important components of a design's interaction is the feedback (visual, aural, tactile) you get from the design while using it. In the case of Ocarina, Ge didn't really have the option of tactile feedback, but aimed to compensate for that with organic-feeling visual feedback. When you press down on one of the buttons, a circular flare expands outward in a circle around the button, indicating that the button is pressed down. I think the that using visual feedback to compensate for tactile feedback in the digital world is super important and fascinating so I wanted to analyze other interesting examples of this technique.
Video games are one digital medium that has countless examples of visual feedback to compensate for tactile feedback. I think combat games in particular really focus on this aspect, since they typically want the player to feel the impact their of attacks during gameplay. One game that I think has super impactful visual feedback is called "Anger Foot". The premise of the game is to wipe out enemies and clear levels as fast as possible, mainly through kicking down doors and picking up weapons along the way (see the video below for a better idea of what the gameplay looks like). There are a ton of visual cues that give your attacks weight. The door you just kicked down flying backwards into the wall, shattering into a thousand wooden shards and knocking down a ceiling tile. The enemy you just shot erupting into a blood splatter. The enemy you smacked with a bat seeing stars around their head, then ragdolling backwards on the next attack. The tactile feedback of clicking a mouse on it's own isn't super impactful, but the visual feedback in Anger Foot really makes the attacks feel powerful.
Another example of visual feedback that I like is from my website (although other websites use similar feedback methods). On my website, I showcase some projects that I have worked on over the years. The user can click on images of the projects to bring up an associated webpage (like a youtube demo, github repo, research poster, etc). I wanted to make clicking on the images feel satisfying -- like you were pressing a big button. I think I managed to acheive this with a pretty simple effect; adding a drop shadow when the user hovers oven the image, and removing that shadow when the user clicks on the image. This simple visual effect makes the image appear to move in and out of the screen, and makes clicking the button feel more organic and satisfying (in my opinion). You can click the image below to see this effect!
