In my sketching and planning, I had already payed a great deal of consideration to what macro and micro interactions I would input into the prototype. It is quite hard to show interactions in a static format like Notion, however I will highlight some main interactions.
The initial opening screen is one with a great deal of movement. The two concentric circles move throughout the sequence of screens internally. They also move up and down the screen to allow room for the content. The Apollo 11 title appears then disappears again to allow the discs to move up and the text to be revealed. The next button then fades in. The discs then fade into icons of planet earth. I thought that it was a very interesting opening sequence which slowly reveals the subject matter of the prototype.
1
2
3
4
5
6
The transitions between these screens were also quite successful. The transitions push upwards, maintaining the rocket vector also pushing up to continue to reveal it’s size. It then pushes back into full frame to reveal the rocket in full. I thought this was successful in emphasising the scale of this rocket.
1
2
3
4
This next section of screens was to be the climax of the immersive story. The screen begins black, then fades into the ‘touchdown’ background with the moving fiery background. The black translucent mask is then removed and the GIF is shown in full effect. This then fades into the ‘white’ (rather cream) of my colour palette, the only light UI in the whole prototype. The famous quote is then revealed section by section. This done automatically with ‘after delay’. This then fades to the viewer looking at the surface of the moon. What I like most about these screens, is that there is only one click in it’s entirety. I really focused on keeping the amount of CTA to a minimum, in order to. emphasise the immersive quality of this prototype.
1
2
3
4
5
6
7
8
9
Shortly after some content is presented, the same lunar landscape view is presented to the viewer. An aspect of light then appears in the night sky background, and the earth appears in the distance. The ground pushes down and the earth enlarges to give the illusion it is moving closer. It then veers to the right, the sky darkens again and the content appears. I feel that this is quite a nice macro transition to let the user know that the next part of the content is centred around the return home.