We were asked to implement our user interactive into a hypothetical website about toast and demonstrate the interactions the user would have within the site demonstrated by change between two images. We had to create a wireframe of the site and then refine it from there.
My interactive takes place on the “Safety” page as it regards the safety protocols taken when making toast and I demonstrated the site using 1366 x 768 (14in) laptop screen resolution. These particular images follow the scenario of when a piece of toast is cool enough to touch and be removed. Image 1 demonstrates the user hovering with the cursor to go and click on the piece of toast and in image two, they have clicked it when the vertical “heat bar” on the far left has depleted below the “SAFE” line. Image 2 shows that the user clicked on the toast at the correct time conveyed by the cursor becoming a green thumbs up, change in text on the bottom and the “forward” arrow located bottom left, flashing green to move onto the next scenario.