In order for my prototype to be truly immersive beyond the just the visual design and narrative aspects, I had to also also consider the different macro and micro interactions of my prototype.
In week 4 I learned all about immersive story telling beyond something being read just like a book and how macro and micro interactions are key. We looked at some really great examples of immersive experiences that make perfect use of these types of interactions like Welcome Aboard Traveller, Apple, If the Moon were Only One Pixel, Big Apple Hot Dogs etc.
These examples really illustrated to me the marvellous potential there is in macro and micro interactions in creating engaging and immersive experiences. This lecture also got me thinking about what kind of interactions my prototype should have.
From what I’ve learnt I understand Macro interaction to be what move you around and take you from place to place. So with that I understand Macro interactions to be the ui elements of my prototype.
One of the first things I do when I start a project is consider how my ui will look. The content of my site is presented in a comic style panel layout and thus I wanted the content to sit in a roughly page width area on the screen. So with that is made perfect sense to have the navigation standing vertical on the left hand side.
I like to think that this nav bar is sort of like a book mark where you can quickly click and go to any page of the comic you want.
As my design is comic inspired, I do envision it being interacted with as much like a book as you would get on a screen. I experimented with the method of dragging as a trigger to take you to the next page but it just didn’t feel natural or remotely instinctual. This is probably because neither books nor websites are typically dragged. There’s also no call to action I could think of for that type of interaction that wouldn’t make a mess of things so I decided against that.
The next best thing in my opinion, since swiping wasn’t an option was to have little arrow buttons for when you reach the end of each page.
After I figured out my macro interactions it was time to consider the micro ones. I didn’t intend on have a load of bells and whistles, instead I wanted to focus on subtle ways to enhance a persons journey through the site and make it feel a bit like reading a comic.
The main thing I did to achieve this was to change the type of transition from page to page to a “push right” or “push left” depending on what direction you’re going. I made sure to treat the navigation on each page individually and make sure that when you click on a page, the page is being pushed in the direction that that page is is relation to the one you’re on.
My reason to choose the push effect and not slide, is because the slide wasn’t aggressive enough to signify tossing a page over but the push effect worked perfectly. It would have been nice if I were able to have it be like multiple tosses depending on how far you were travelling but what I’ve got works well.
The next form of feedback micro interaction I focused on was hover states, it may not be related to the comic reading experience but it’s certainly something users expect on any site. They also just enrich the experience so I had to have them. I experimented a bit as to how much of a difference I want there to be between natural, hover and toggled states. I ended up deciding on the arrows and only text within the nav buttons turning green so as not to be to bold and distracting. Just a nice little thing that happens when you go to click.
So, now I’ve designed each page and wired all my buttons up, I think my prototype is finished and I’m quite proud of what I’ve done here. Of course it does hold a candle to Apple and Space X but I done what I set out to do, a comic inspired website prototype telling the story of Apollo 11 in a fun and quirky way, and that’s a success in my book.
You can view my final prototype here