HV Weekly Journal 2
The week I learned about depth positioning in cylindrical coordinates
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 two and three.
I started by working on a VR product selection tool. At first, I wanted to create everything from scratch.
Not a great idea if I want to work quickly.
Instead, I found a mockup on Dribbble that inspired me. I decided to translate the work into virtual reality. Because I’m focused on learning about user experience design, not graphic design, it is a better use of my time to start from an existing graphic design. Then, I can learn what works and what doesn’t from a baseline. Should we use a plane, a cylinder, differently layered planes or cylinders, or just go ahead and build everything? More about that in the full write up.
Scaling in non-euclidian coordinates was rough (e.g. spherical or cylindrical). In undergrad I minored in mathematics and last week was a quick refresher.
Basically, if you want to create depth with cylindrical mockups you can do two things: (1) change their positions or (2) change their scales. Changing scales is the right thing to do with respect to perception, but changing positions was more straightforward to think about.
I worked in circles for a day or two (no pun intended) trying to scale layered cylinders so they’d be perceptually correct by writing different functions. Then I realized: if I’m trying to scale something that has an easier euclidian coordinate correlate, then I should stop bothering with spherical approximations or cylindrical coordinates. Just used the built in scale function… duh.
// This
<a-curvedimage scale="1 1 1"></a-curvedimage>// To this
<a-curvedimage scale="1.1 1.1 1.1"></a-curvedimage>// Is way better than writing a function to scale in cylindrical coordinates
Another duh is that cylinders should be scaled from the camera’s viewpoint. There was a while I was fumbling around, trying to make two cylinders line up … until I realized they need to line up from the camera’s eye. Can’t say I felt the smartest at that moment.
I also toyed around with how to design for three dimensional mockups. I worked with sketches, isometric paper, and numbered depth indices. At this point, I can say it was all helpful, but I need to use the tools more to figure out what works best for me.
Probably should have realized this before, but my user testing won’t fit into nice boxes for surveys — each experiment will need its own methodology. At first I wanted each project to use the same survey questions such that at the end of the summer I could rank my projects in terms of measures like “user comfort ranking”. That’d be nice…
Unfortunately the world is more complicated than a short series of usability questions. Since I’ll have few users — and thus my findings won’t be statistically significant — it’d be better for me to focus on my participants’ experience through semi-structured interviews. If I do my designer-job properly I’ll still gain valuable insights, they’ll just come in a different form.
JavaScript isn’t my first language. In a previous career I worked as a frontend web developer, but my interactions were handled by either CSS or jQuery flavored JS. A-Frame scripts however are written in vanilla JS, so it’s a new beast to tame.
For a while I was struggling with adding and removing elements from the DOM in the way I wanted. I refactored my code to be written in jQuery… that was until I eventually found A-Frame JS methods failing like .setAttribute(). Uhhhhhh. Went back to the code, refactored again, again writing in vanilla JS.
When I started I wanted the three types of mockups (plane, cylinders, volumes) to be interchanged with keyboard shortcuts. Instead, I now move all of them below the ground plane. Then, when one mockup becomes active, it gets moved up to where the user can see it.
Everything feels slow. I was expecting to blow through each experiment in a day or two, not a week. The solace I offer myself is that prototyping can take time, especially when I’m usually trying to build a couple of versions for users to try. And I’m learning right? So while this project spent two days refactoring code and a good while on trying to scale in non-euclidian coordinates, I won’t be making the same mistakes again.
When sharing GIFs or videos from VR screen captures, it isn’t always clear that the media is showing what a user would see in the world. So, I created a video layer that can be overlain on screen captures to remind the viewer where the video is coming from.
How effective do you think it is? Would a picture-in-picture be more or less effective?
When I’m working locally, I use Grunt to automatically reload my browser whenever I change a file. Unfortunately it doesn’t reload my mobile Safari browser when my Cardboard is set up.
So, I created a quick-and-dirty reload function (with the assistance of the Internet) that reloads the browser every X seconds.
function reloadPage(seconds){
function reloadCallback(){
return function(){
window.location.reload();
}
}
var millis = seconds * 1000;
setTimeout(reloadCallback(), millis);
}I also found that it’s helpful to use a settings object that lets me quickly change the setup of my world without having to find all relevant variables and changing them.
var settings = { // Which mockup should be active
target: ‘wireframe-threeDim’,
// Location of the hidden position, e.g. below the ground plane
hiddenPosition: {
x: 0,
y: -1000,
z: 0
}, // When developing, it’s nice if your phone reloads automatically
reload: false, // In seconds
reloadTime: 6}
Reading & Media
E3
The week started with the annual gaming conference / entertainment expo “E3”. I watched most of the E3 press conferences (e.g. Sony, Xbox, Bethesda, Ubisoft). While there were VR releases, I was expecting a number more.
WWDC2016
Apple’s developer conference also happened early in the week. It was unlikely that they’d reveal anything about their secret VR lab, but I was hopeful.
Until next week,
Andrew
