HV Weekly Journal 5
Positions, transitions, animations, and interactions
Each week, I’ll post something akin to a personal journal entry that gives an overview of what I did for that week. These posts will provide less-polished insights, keep me focused on producing material, and will allow for earlier feedback. Let’s jump in.
This journal is for week seven.
This week I worked on creating transitions for scene or position changes in VR. Present in the majority of current design literature for virtual reality products, it’s a huge no-no to move the camera that controls the user’s view without user initiation and control. For the same reason you can get car/sea/motion sickness — your brain doesn’t expect some part of your body’s motion because of what it thinks are conflicting signals — you can get VR sickness. Making your users nauseous is a great way for them to not only leave your app, but hate you forever.
Virtual reality designers have a (moral) imperative to create non-nauseating experiences. We also have a desire to push boundaries and build apps larger than what is within arms reach, which is the confinement restriction if the user (1) doesn’t have a system that can track their position (e.g. Google Cardboard) or (2) has a system that is still limited by some amount (e.g. any system). So how do we overcome this?
Introducing the great virtual reality transition diagram of 2016!
After reading Dustin Senos’s article, How to get value from wireframes, where he suggests making twenty unique design directions in wireframe form before any higher-complexity design work, I was inspired to try that for this week’s transitions experiment. The diagram above was what came out of my sketches, which looked like so:
Thus far, I’ve been able to make a jump cut (instantaneous position change), fade (view transitions to black, then comes back up), a fade jump (the fade down, jump cut, then fade up), and a micro-movement (a series of jump cuts made between the start position and final position). I’d like to keep working on various transitions as well as making the testing environment more exciting for non-developers, so I’ll continue this prototyping work in the upcoming week.
I’m in Columbia, MO right now — working in coffee shops, the restaurant my girlfriend manages, people’s homes, and the local library. This week a guy approached me and asked me what the small box was on my library table.
“It’s a cardboard box you slide your phone into that displays a virtual environment to your brain,” I responded.
We talked for a while, or more precisely, he talked for a while, finally resting on the question, “What do you do in there?,” meaning VR.
It’s a great, albeit open question. After fumbling with my words, talking about user preference to particular experiences, I settled by relating VR to the openness that is the smartphone. Virtual reality is a medium and like other mediums, the platform itself alters but does not dictate what experiences may be had with it. Education, travel, porn, games, volumetric conversations, new worlds, documentaries, it’s all there. It is an open space in which we humans can make new expressions of our selves and our desires.
With my transition work, I had difficulty adding HTML to the DOM. I remind you: I’m a designer shoveling code together to get prototypes working “enough”, not a developer writing production level code. Back in my web days, I’d throw jQuery into the mix (a framework that makes writing Javascript easier). Previous experimentation with jQuery and A-Frame led to jQuery breaking some of A-Frame’s methods. So that’s a no-go here.
Instead, I searched on the Mozilla Javascript documentation and StackOverflow until I found some things that worked for me. Then, I threw it into a function so that I may easily create the entities I need and put them where they should be at will.
Given the potential size and combinations of my transitions list, I wrote my transition functions as generalized functions — meaning that every time I call transitionFadeJump(), it runs smaller, reusable bits of code. For example:
transitionFadeJump()
├-transitionFade(with transitionJump() in the middle of the fade)
├-addEl(transparent sphere around the camera, then remove after the animation)
├-addAnimation(make the sphere black, then transparent again)
├-transitionJump()I also worked on creating my case study documents, primarily for the mostly-finished, over 2,000 word article on Product Presentation & Selection in Virtual Reality. I’m focusing on quality over getting them out ASAP — turns out that takes a lot of time.
In addition to Humane Virtuality case studies, I worked on case studies for my portfolio too. It’s that time again.
This is kind of a half-way point for my work. I go back to Portugal at the very end of August to finish off my last semester of my master’s degree in HCI. As such, it’s a good time to evaluate what I’ve done and what I might do before the internship wraps up. This weekend I’m asking myself three questions:
- Am I staying true to the original goals of the internship?
- Am I satisfied with the work I’m doing?
- Am I getting what I need out of this internship?
Depending on my answers, the next few weeks might look a bit different. Or not.
Shout out to anyone who will be at SIGGRAPH this year! I’ll see you in a few days. Let me know if you’ll be there.
Until next sprint,
Andrew
