Microinteraction: Final

Trigger

• Hover on/off recipe card
• Hover on/off save recipe icon
• User clicks save recipe icon
• Hover on/off nutrional information icon
• User click nutritional information icon

Rules

Hover over Recipe Card

• Recipe image has .5s fade to dark grey filter with 50% opacity
• Recipe description with red, transparent background slides up from bottom for .5s over the darkened image
• Save recipe icon fades in for .5s
• Nutritional information icon fades in for .5s

Hover over Save Recipe Icon

• Cursor turns to pointer
• The text prompt “save” fades in for .2s below the icon
• A small red box shadow fades in behind the icon for .2 seconds

Click on Save Recipe Icon

• Bookmark stretches down from the top of the card for 1s to cover the save icon
• Once covered, icon background color immediately changes to red. At the same time, Icon changes to white
• Once covered, text prompt changes from save, to saved
• Bookmark snaps back to the top to the top of the card for .3s
• The recipe is added to the users list of saved recipes

Hover Off Save Recipe Icon

• The text prompt “save” fades out for .2s below the icon
• The red box shadow on the icon fades away for .2 seconds

Hover on Nutritional Information icon

• Cursor turns to pointer
• The text “Nutritional Information” fades in for .2s below the icon
• A small red box shadow fades in behind the icon for .2 seconds

Click on Nutritional Information Icon

• Recipe card flips on its vertical axis for .3s to show a darkened food image and nutritional information
• Nutritional information icon switches to a back arrow

Hover off Nutritional Information icon

• The text “Nutritional Information” fades out for .2s below the icon
• the red box shadow fades out for .2 seconds

Hover Off Recipe Card

• Save recipe icon fades out for .5s
• Nutritional information recipe icon fades out for .5s
• Recipe description and background slides downwards out of sight for .5s
• Dark grey filter on recipe image fades to 0% opacity for .5s

Feedback

Hover over Recipe Card

• Recipe image has .5s fade to dark grey filter with 50% opacity
• Recipe description with red, transparent background slides up from bottom for .5s over the darkened image
• Save recipe icon fades in for .5s
• Nutritional information icon fades in for .5s

Hover over Save Recipe Icon

• Cursor turns to pointer
• The text prompt “save” fades in for .2s below the icon
• A small red box shadow fades in behind the icon for .2 seconds

Click on Save Recipe Icon

• Bookmark stretches down from the top of the card for 1s to cover the save icon
• Once covered, icon background color immediately changes to red. At the same time, Icon changes to white
• Once covered, text prompt changes from save, to saved
• Bookmark snaps back to the top to the top of the card for .3s

Hover Off Save Recipe Icon

• Pointer turns to cursor
• The text prompt “save” fades out for .2s below the icon
• The red box shadow on the icon fades away for .2 seconds

Hover on Nutritional Information icon

• Cursor turns to pointer
• The text “Nutritional Information” fades in for .2s below the icon
• A small red box shadow fades in behind the icon for .2 seconds

Click on Nutritional Information Icon

• Recipe card flips on its vertical axis for .3s to show a darkened food image and nutritional information
• Nutritional information icon switches to a back arrow

Hover off Nutritional Information icon

• Pointer turns to cursor
• The text “Nutritional Information” fades out for .2s below the icon
• the red box shadow fades out for .2 seconds

Hover Off Recipe Card

• Save recipe icon fades out for .5s
• Nutritional information recipe icon fades out for .5s
• Recipe description and background slides downwards out of sight for .5s
• Dark grey filter on recipe image fades to 0% opacity for .5s

Loops & Modes

Hover over Recipe Card

• Mode: Recipe description with red, transparent background slides up from bottom for .5s over the darkened image
• Mode: Recipe description fades in for .5 seconds over the darkened image
• No Loops

Hover over Save Recipe Icon

• Mode: The text prompt “save” fades in for .2s below the icon
• No Loops

Hover over Nutritional Information Recipe Icon

• Mode: The text “Nutritional information” fades in for .2s below the icon
• No Loops

Click on Nutritional Information Icon

• Mode: Recipe card flips on its vertical axis for .3s to show a darkened food image and nutritional information
• No Loops