:hover states

Since the inception of the personal computers, our main interactions with the digital world have been through a desktop interface. A metaphorical workspace where a mouse pointer is our primitive avatar, a waste paper basket is a digital recycling bin, and our ‘files’ are stored in ‘folders’. With massive adoption of touch devices, the desktop interface may soon be a thing of the past—a blip on the digital interaction timeline. As we move to this new touch interaction model, it’s curious to consider what interactions and metaphors will no longer be relevant and forgotten.

This exercise asks you to investigate the desktop interface, specifically through its unique interaction of the hover state. Hover states are considered a ‘pseudo state’, something explicitly thought of as in-between. They occur when your mouse cursor is positioned above another element on the page and act as an on/off switch with only one level of interaction. Even with these limited capabilities, they’ve become a key aspect of desktop web design.

Instructions

  1. Download this demo file.
  2. Use rollovers within the demo file to do the following:
    • Change the case of text (U&lc, ALL CAPS, etc.)
    • Fade-in an element.
    • Move an element using translate.
    • Blur an element.
    • Rotate an element and change its color.
  3. Using your Digital Bits exercise as a starting point, think about how you would interact with your objects in the digital world (How would a digital pen leave a mark? Eyeglasses bring things in or out of focus? A digital clock notify you of the sunsetting? How would you change your cursor to demonstrate this idea?). Create a rollover interface to explore this notion.
  4. Upload your project with the added :hover state and sdd link to the #weekly-updates Slack channel.

Resources

References