Development – GUI
For me, one of the most intimidating aspects of developing this project was designing the Graphical User Interface (GUI) for the application.I wanted to make the interface friendly, but also keep it as simple and clean as possible. I tend to use primary colors in a lot of my work, and this project was no exception. At first, I was concerned with mimicking the ultra-slick and metallic look of most content sites like Hulu or Netflix. After a few attempts, I didn’t feel inspired, nor did I feel like I was speaking to the purpose of the project. Though the content is key, there is more to the application than the content. There is also a bit of warmth that comes with this technological project, and I realized I needed to create a balanced experience for the user with the look and feel.
Upon entering the application, the user sees a splash page that suggests they use headphones for the best experience.
The user is then brought to the “Films” Page. They choose a film and click the “Invite” button.
The user is given a unique link they can share with other people (for the proof of concept, it’s one person).
Once they share it, they then can click “Watch.”
When the other users receive the link, they can enter their name. Then, they click “Watch” to enter the “VLR.”
When their friends have entered the VLR, the user is notified. They can immediately talk to their friends.
When they are all ready to watch the film, the users all click “Play” at the same time.
When the film has ended, each user is given the choice to either watch another film, or to exit the application.
So far, I’m very happy with the way the GUI has turned out. Of course, things may be tweaked as development and testing continues. Nevertheless, I find myself continuously inspired and motivated to keep working with this visual scheme and color palette.
I’m also starting to move onto branding, and this of course includes the color scheme and even certain shapes (such as the rectangles and squares with the rounded corners). Here’s the most recent version of the logo for YourVLR.
In the next post, I’ll talk about the backend of the application and my collaboration with creative technologist Bob Gourley.
The Wonderful World of Wireframes
I love wireframes…maybe a little too much. They let you design without getting bogged down with the visual aspects of things.I owe a great deal to wireframing for this project’s progress. Before even starting on the visual look and feel of the project, I did made numerous wireframe series that helped me shape the flow of interaction as well as optimize the usability of the YourVLR application. I also conducted several user tests with all of these versions to ensure that people of a wide variety of technological prowess could use the service efficiently and to their satisfaction.
Here I’ll show iterations of the wireframes that highlight the evolution of the application.
Round 1
The user logs into “VLR.com” and arrives at the home page.
If new to the application, the user may create an account.
The user can add “Contacts” and choose to connect with them when logged in.
The user selects 1 or 2 users to connect with.
The user chooses a film to watch with their contacts.
The film streams to all the connected users’ computers simultaneously.
The user can watch the film together with his or her contacts. They can all converse as the film plays.
This iteration certainly addressed many of the key features of the application, particularly user connection through the media. Many questions came up during user testing. The most resounding one being: Should people pick a movie or their friends first? I took this to mean that my users wanted a choice, so I drew up a new design that allowed for that.
Throughout the next versions of wireframes, I also made the screens for selecting “Contacts” and films more visual. Furthermore, I added more options in the “virtual living room,” where the users ultimately all gather to watch the film and converse.
Round 2
The user goes to the homepage and can either “Log In” or “Create an Account”
If a new user, he or she may create an account. They can also upload a photo of themselves.
Once the user is signed in, they may choose to either select a film or choose contacts first.
If the user decides to choose a Film first, they are taken to the “Choose a Film” page.
If the user double-clicks on a film selection, a window with a trailer video and info pops up.
When the user decides on a film, they can click the “Play” button.
After the user picks a film, they are brought to the “Make Your Connections” page, where they can select from their contacts.
The user can also search for other contacts that are not in their list.
Once a user chooses his or her connections, they click “Connect.”
Once the users are all connected, they can greet one another and test the mic levels of the chat feature.
The users can then start watching the movie. There are several menus that slide onto the screen upon mouse hover.
The users can also turn off the chat feature (through a “Mute” function) if they do not wish to talk during the movie.
Though I thought this version was “the one” it turns out that most of my user tests did not desire most of the features I offered. They felt they would use this application because they did want to talk to people, therefore the “Mute” and individual volume control was not necessary and led to uneccessary complications in terms of development.
Furthermore, they felt the “Connections” tasks were a bit too arduous and time consuming. They wondered if there was a simpler way to share the media with their family, friends, and loved ones. I realized I had to reexamine the way people share media through the Internet, and this aspect really influenced the next version of the wireframes.
Round 3
These are the wireframes that became the final proof of concept for YourVLR. This design aims to get the user to the content as quickly as possible, and boils the experience down to three screens (well, four if you include the splash page in the actual application). This has so far proven to work well for people with varied technological experience, which is the main goal since one of the main target audiences is contemporary families, whose members are scattered and involved with all different methods of digital and non-digital communication.
The user comes to the homepage, which has instructions on how to use the application.
User then chooses a film from the “Films” page.
User is then given a unique URL that they can share with the people they’ll watch the movie with.
When the users have all entered the “virtual living room” they can all talk as they watch the movie together.
When the film has ended, the user clicks the “X” to exit the application.
After completing and testing these wireframes, I felt confident enough to move onto the development stage. In the next post, I’ll talk more about the backend of the application, the development process, and the Graphical User Interface (GUI) that brought the project to its first complete form.
New User Narratives
So, on Professor Deen’s advice, I took the project “back home” and imagined the stories of people who would use “Your VLR,” why they would use it, and how it affects their lives. (I’ll also take this opportunity to thank Prof. Deen for the suggestion to add the “Your” to “VLR.” It has done wonders in terms of helping me connect back to my concept and also in terms of establishing branding of the project!)
For my presentation, I hope to have condensed, illustrated versions of the narratives (if they are needed), but for now I offer links to the text.
Narrative #1 tells the story of Jennifer, a traveling professional who never wants to miss “Family Movie Night” when she is away from home. Read her story.
Narrative #2 tells the story of LouAnn and Michela, best friends since high school who every now and then need each a “bad movie” and a few laughs to unwind from the hectic stress of every day life. Read their story.
Narrative #3 tells the story of Fred and his grandson Nick, who use YourVLR to watch their favorite crime-drama together even when they’re snowed in and can’t leave their homes. Read their story.
Thoughts and Results from Feb 3rd Critique
So critiques went well.I’ve learned I have a strong concept, but I need to reassess my impetus, or motivations for doing the project. Also, the interface needs a makeover. And that’s okay, since I considered it a concept sketch that I got too carried away with.
Back to the beginning. Back to connecting people over distance. Connecting people through media. Through a conversation about media.
It’s interesting to look back on the things you’ve made in the past. And this is certainly something I’ve been doing to follow up and reflect upon my last set of critiques.
I’ve thought about the connection that I felt the first few times I tested this experience with my family and friends. For me, the most compelling part of these experiences were the times when neither one of us were talking: when we were both silent as we watched a movie. This was compelling because, though there was no audible or visual feedback, I knew they were there on the other side, watching with me. I’d feel a rush of happiness when I would hear a faint chuckle, and those moments would usually cause me to laugh. Remembering this subtle feedback and experience has helped me realize that perhaps spoken conversation is not the most crucial part of my project.
Still, I think, in terms of this project, speech can be a very compelling part of the project as well. I do need to recognize, however, that some people don’t like to talk–or be talked to during movies. Nevertheless, some of us do. And, for many of us crazy multi-taskers, some of us may want to be a bit more proactive and multitask as we watch content.
Thinking of all of this has made me consider giving my project three different “modes,” all of which I have addressed at some point in the course of my project’s development. Only, I never thought of combining them together, and letting the user choose how they wish to experience the content.
Through the past few days, I’ve also taken the advice from my new Writing and Research instructor, Chris Prentice, and have begun to observe the experiences and environments in which we watch media more closely. I’ve gone to movie theaters and have observed the audience, watching for the moments in the film when they feel compelled to talk to one another. I’ve also been studying my own family’s habits when it comes to watching TV in our home: when do they want to sit in silence to watch TV? And when and why does TV become a more social activity?
All of these obersvations, as well as some reassessment and revists to my previous work on the project, have led me to a more simplified, yet promising, proposal for the project.
I’ll be working on another breakdown and set of user scenarios (or storyboards) to illustrate this proposed model and see if it is viable. When they are ready, I’ll post them with a more detailed explanation of the methodology and ideas behind them.
As for now, I need to join my family to watch the Superbowl. After all, this could be a great research and observation opportunity!!! (and Go Pack Go!)
Winter Break Recap
I’ve spent the majority of my winter break reevaluating my project as well as the motivations and inspiration behind it. I’m happy to say that throughout the past month, I’ve made progress in all these areas.Everything I’ve created or figured out during the break really sprang out of two questions that lingered after my final presentation last semester:
- What would happen if speech fueled the media, instead of the other way around?
- What kind of content do I show? (or What kind of content will work with this sort of interaction?)
Both of these questions led me to research and also creative/visual explorations that have helped me establish a more specific and refined thesis concept and project.
To entertain the first question, I began to rethink the interaction as a bit more of a game-like experience. I realized I needed to almost provoke or slightly encourage the users to talk…even if it’s complete gibberish or nonsensical dialogue. It’s simply important –for now, anyway–that they talk…with their voices…to one another. I began to conceptualize what this game-like interaction could look like:
Original concept sketch for game-like interaction
With this new (and certainly experimental!) interaction concept brewing, I began to consider ways for the users speech to “power” the content. The more the users talk, the more of the content they can watch. In doing this, I felt there was potential to give the users a more proactive role in media consumption. Also, it could eliminate the solitary nature of media consumption: in order for either user to watch the content, they must work together.
I was curious about how this interaction could work, so I started making simple flowcharts to initially map out the steps of the user’s experience:
First draft of the application's flowchart
Once I realized there actually was potential with this idea, I moved onto answering my second question: What sort of content do I use? In my final presentation last semester, one of my critics said they weren’t sure the interaction would be enjoyable, since the content’s sound would conflict with the user’s conversation. Though my previous user tests had shown that the experience was indeed enjoyable for people, I understood where the critics concerns were coming from. It has been a bit hard to sell my project idea to others, but once people use it themselves, they seem to enjoy it.
One day, I asked myself a simple question: What about using silent movies? Since there was no audible dialogue present in the content, there would be nothing for the users’ conversation to compete with. Besides, this could also be a way to reintroduce silent movies, which are extremely enjoyable and arresting films, to the members of the “digital nation.”
I went to a few video stores and was surprised that I could only find ONE silent film available on DVD or Blu-Ray: Modern Times by Charlie Chaplin. Though I was disappointed by the very limited selection, I am extremely pleased and grateful that this was the film I purchased and watched later that night.
The most recent release of Modern Times (distributed by the Criterion Collection)
This film has inspired me to no end in terms of my project’s concept, impetus, interaction, functionality, interface, and look & feel. (I know, that’s quite a lot!) I like to think of “The Tramp” as the silent, subtle muse for this project.
We’ll have a lot to discuss here…but I’ll first start out with some of the more obvious stuff. On my first, cold viewing of the film, I was struck by the dynamism and production value of the factory scene (which is by far the most famous scene in the film). The mechanical and slightly whimsical look of the gears, levers, gauges, and other assets of the factory motivated me to create some simple cut-outs that could make up an interface:
Levers and gauges in factory scene from "Modern Times"
Gears from famous scene in "Modern Times"
Gear cut-outs made from cardboard.
Other cardboard cut-outs inspired by factory scene
Making these initial cut-outs caused my brain to start to think of a loose “game mechanic” and even interface concept for the application. I made several sketches in attempts to apply the factory assets and scheme to the interaction flowchart I had made earlier in the week:
Concept sketch for application concept and activity
Through this sketch, I conceived of a Rube Goldberg-esque machine that “powered” a film projector through spoken conversation (provided by my users). The amount of conversation would be measured by a meter, and when the meter hit certain points, parts of the machine are activated. When all parts are activated (or when the meter is full) the projector will turn on and play the movie onto the screen. Though imperfect, problematic, and a bit too complex for an online application, I liked that this machine-like interface could visually show the users how they are interacting with the content. I especially liked the fact that the content would literally not play if the users did not interact with one another, thus tying all the important aspects of my project together.
Through this conceptualization, I also began to take into consideration vocal elements such as tone, pitch, dramatic pause, and other forms of expressive speech, which is what is primarily missing from text-based messaging that is gradually dominating our contemporary habits of communication. I thought it would be interesting to see how these expressive elements could also impact the interaction, so I chose to do some further research on them as well as incorporate them into the design of the project.
The sketches inspired me to imagine how my concept could be translated into a visual interface. I decided to make a “look and feel” prototype by continuing with the cardboard cut-outs I had made earlier.
I first made some more pieces to represent the different parts of the sketch: a meter, projector, and movie screen. I also made a 1920s-era telephone to represent the users’ communication.
More cardboard cut-outs for "look and feel" prototype
I began to instinctually piece everything together. I chose to eliminate the projector since it was not needed. Here’s what developed:
The first "look and feel" prototype of an interface
At this point, I took a step back and tried to reevaluate everything I had made. How was my project shifting? Why was this form of interaction more inspiring than my previous ideas? Why was I so inspired by silent movies, particularly Modern Times? Why was I struck by this factory theme?
It wasn’t until I began to do some more research into our contemporary habits of communication and media consumption (two entities I’ve decided to focus on with my project) that I started to realize what my project is really about, and why I am so passionate about doing it. In short, I discovered my project is about encouraging communicative expressiveness that is slowly fading due to our preference for text-based messaging systems. The user group that is particularly in danger here are younger generations (18 and under) who are also known as “Gen Y” or “digital natives.” They are born into a world where texting, IMs, emails, and wall posts are more convenient and preferred means of interacting with others. Though they may be connecting faster and with more people, research shows they are engaging in more shallow interactions and conversations. They are also not developing their person-to-person and spoken communicative skills effectively. Experts are concerned that, if this continues, these younger generations will have a harder time expressing themselves, dealing with highly social and interpersonal situations (i.e. the workplace), and ”reading” the words and behaviors of others.
I realize that a major goal of my thesis is to encourage younger generations to engage in a more expressive forms of communication with one another. And, by using media content to achieve this, I am also attempting to use online media content as a means of inspiring and provoking conversation. More traditional forms of new media such as radio, film and television have brought people together and led them to connect and converse with one another. Today, media convergence provides us with an overwhelming amount of media content that has become a distraction. Furthermore, the social quality of media is also fading away, since we consume the majority of all our media on devices that are normally viewed by one person. Sites like YouTube encourage us to converse through media by posting comments or rating media. I fear that media’s power to provoke meaningful, real-time conversation (the exchange of ideas, the acknowledgement of artistic achievement, the awe of gaining inspiration) will be washed away and overtaken by the delayed, text-based forms of communication that are killing the level of expressiveness needed to create compelling media in the first place.
All of this finally came together when I dug up some more research on Modern Times, the first “talkie” made by renowned silent-film director and actor Charlie Chaplin. In the film, Chaplin’s iconic Little Tramp character plays a factory worker struggling to survive in a modern and industrialized world. Chaplin himself was conflicted with technology when he made this film, which was being filmed nearly a decade after sound had been introduced into film. Chaplin chose to make the film largely silent, since he insisted that the universal appeal of his comedic style and his characters were better shown through pantomime. Realizing he still needed to yield to “modern times” and embrace technology, Chaplin opted to make a “quasi-silent” film, and makes a staggering point by only having human voices emit from machines or in the form of gibberish (as in the case of the Tramp’s Nonsense Song). ***For more on this, please look at my description and analysis of the film under the “Precedents” section of the site.
It seems that Chaplin and I have something very important in common: we both feel the technologies of our “modern times” are eroding our means of creativity and expression. Furthermore, the bold pantomiming style of the Tramp and many silent films give them a universal quality that can be relatable in any nation, culture, or language. The level of expressiveness and body language exhibited by Chaplin and his colleagues during the silent film era require the audience to “read” the body language and actions of the characters. By watching this content, the users of my project will be getting practice in “reading” others, which is something that they are losing when communicating through texts, emails, comments, and IMs. Of course, the film geek in me may also have an agenda of reintroducing these films to younger generations, but let’s keep that between us for now.
With all of this in mind, I forged ahead and started making sketches again. This time, I was attempting to translate my “look and feel” prototype into an interface. Here are a few examples:
User is offered the choice to play "in person" or "virtually"
"Home Screen" and user log-in page
Sketch of main application and "game" interface
From these sketches, I’ve been making a step-by-step visual walk-through of the user experience. Stay tuned for my next post, where I’ll have the first round of user scenario and application breakdown ready for viewing!
More Interface Prototypes and a Working Prototype
This past week, I’ve spent a significant amount of time thinking about and exploring possibilities for the interface of my project. Though it seems to be a non-important aspect as this point in the thesis process, it is actually very crucial for me since the interface will greatly dictate the way my site and application functions as well as how the user experiences the project.
I chose to follow the feedback I received from other students during my last critique. I’ve explored ways of implementing pop-up windows as the main assets of the interface. The pop-up windows would mainly allow the user to rearrange the layout according to his or her own viewing preferences. I also thought it may be interesting to have the user be able to control and activate the pop-up windows, each of which will possess content (either created by me or already existing online).
This aspect of the project was inspired by “The Wilderness Downtown,” which is an experiment in showing an interactive film through various pieces of content that appear in timed popup windows. The project was a brainchild of The Google Development Group, and it is an incredibly cool and thought-provoking piece.
Though I wasn’t completely sure that using pop-up windows would be a asset–let alone driver–for my interface, I found the idea provoking and interesting enough to test out. These explorations even led me to Here are some of my prototypes from this experimentation and exploration:
A paper prototype of my first paper prototype for this exploration.
My first digital mockup of my sketch. This static prototype helped me refine my sketched idea and also detect some weak points in the composition, layout, and level of usability I was exploring.
This is a second digital mockup of an interface using pop up windows.
In the prototypes above, I began to envision the content working within the space and also impacting the elements that surround it. Though I liked aspects of this mockup, I also thought it would be too confusing or cluttered to provide an intimate viewing experience. The chat and content needed to be the center of attention, and that focus may get jeopardized with this layout. I therefore decided that there needed to be a way for the user to activate certain windows and therefore choose what assets he/she wished to be available as they watch the content and chat with one another. This thought drove me to my next round of prototypes and eventually the first iteration of a new working prototype.
A paper prototype that considers using a toolbar on the bottom of a full-size screen. This toolbar is where the user can turn certain windows--and therefore specific content--on and off throughout their viewing experience.
A digital mockup of an interface that utilizes the toolbar concept from my previous sketch.
I felt confident enough about this round of interface prototypes to make a working prototype of it. Through relatively simple HTML, CSS, and JavaScript, I was able to build a toolbar with buttons, each of which activate a specific window containing an interactive element. One of the biggest challenges was (and still is) finding a solid layout for the windows once they are activated.
As of now, I feel the prototype is very clunky, busy, and does not really come close to offering the experience I want my users to have. Still, I think the prototype is worth testing on actual users, and hopefully this will help me refine and improve upon this prototype. Though it is still a work in progress, I hope to include a working prototype that is slightly more polished and usable in my final presentation.
Here is the link to the working prototype. It works best with the Safari web browser. **Don’t forget to turn off the pop-up blocker feature on your browser!
While working on the aforementioned prototypes, I’ve also been in the process of developing a simulation of the application that demonstrates its optimal form of functionality, look and feel, and user experience. This process has certainly been shifting as my interface prototypes progressed, but I am excited to see how users will interact with the new working prototype and what ideas will arise from it. Creating the simulation has so far proven to be a process of refining my rough interface and working prototypes. I look forward to continuing this process and further discovering the next iteration of my project.
User Scenario 2
User enters their "Streaming Room."
User is brought to customized "Streaming Room." He/she also sees their avatar in the room.
When the user clicks on the screen, the perspective switches to show the user's avatar. At this point, the user can connect to a chat session (and see their face in the avatar) and start the media content if they wish.
If another user wishes to join the viewing party, the user will be alerted and will have the option of granting them access.
If granted access, the other user will join the user in the "Streaming Room." The two can then initiate a chat session and prepare to watch a movie or other media content.
The users simultaneously initiate the content stream. The "Streaming Room" environment dims and the content comes front and center.
The users can now engage in a real-time conversation while the content plays.
Working Prototype 2
Luckily, a very promising app building API was launched last week, and it has a wonderful amount of documentation and community behind it already. The company is called TokBox and the API/source code is known as Open Tok.
Though I still have a lot to learn in terms of JavaScript and HTML DOM, I have been able to make some progress with getting a basic video chat application up and running. Of course, it still has many of the built-in functionalities operating right now, but as I become more comfortable with the technology and the coding, I’m confident I’ll be able to build and customize the application and achieve the best user experience possible.
This working prototype is also an experiment with an interface idea I randomly sketched. This sketch simply reflects a desire to change the ways webcam applications usually look and function.
Rough Sketch of Interface Idea
So with this interface idea in my mind, I made this prototype. It’s not completely successful, but I think it may be leaning towards something fun and interesting.
Click here to check the prototype out!
More Interface Explorations
I guess we can call these “mid-fi” prototypes. After working on these, I realized there may be a more interesting way to deal with webcam feeds, which have been placed in constricted templates.While my mind’s spinning around this new thought…here’s a look at some of the projects that propelled me to rethink some things.
First Mid-Fi Interface Prototype
Second Mid-Fi Interface Prototype
Interface Concept Sketches
As I continue to play with–and muddle through–video streaming, I’ve also begun to think about the visual theme and design of the interface/environment that my application will live in.I’ve constructed some quick, conceptual sketches to kick off the process. Within the next few days, I hope to have some more detailed and better defined sketches, mock-ups, and/or models ready to post!
Sketch 1
Sketch 2
Sketch 3
Sketch 4
Sketch 5