Indicating Interactive Change

Task Description

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.

Wireframing

Wireframe for hypothetical toast website

Interactive Change

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.

Advertisements

3 thoughts on “Indicating Interactive Change

  1. I really enjoy how you describe the work required before you display your work. The images of interactive change clearly display navigation and good graphics. Overall, the interactive is simple but effective I would only suggest to add colour to the headings to differentiate between text.

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s