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.