Creating User Experiences: A Window & Mirror Approach
In experimenting with digital messages, format limitations can often hold you back. The personal goal I set for this experiment was to create a digital message that allows for user interaction. I wanted to create an opportunity for the message to be both a window (the ability for the format to be completely transparent to the user) and a mirror (a self reflective style where the user has to see the format in order to use it) (Bolter & Gromala, 2005). This type of interface design was much easier to imagine than to actually achieve. My first thought was that I should create the experiment in HTML or Flash because both easily allow you to create user interfaces. One caveat, I would need to be experienced enough to use Adobe Flash or code interfaces in HTML. There goes that idea.
After talking about it with several people and gaining some insight on other ways to achieve the same dynamic, I begin to explore creating and coding the piece in Power Point. Power Point is boring as a traditional presentation, but if I could enhance it with some code then perhaps I could achieve the desired user interface I wanted. What followed was a leap down the digital rabbit hole. The graphics, animation and flash object codes used weren’t always compatible with other web tools.
- I had to edit the video using iMovie. However, iMovie files are not compatible with PPTX or YouTube. Therefore, I had to automatically upload them from my iphone or convert them to QuickTime files in order for them to function before embedding them in the presentation.
- Originally, I planned to use Slideshare.net in order to embed my presentation in my blog. However, it butchered my graphics in the first conversion. Continuing to use Slideshare would have meant that the technology would have gotten in the way of the message. See example below.
- I found an HTML code stream which allowed flash players to be placed into WordPress blogs, but it cut off the buttons at the bottom. Code was [ gigya src = insert URL ]. This made the user interface less intuitive. The disruption in the user interface hurt both the transparency of the window and the self reflection of the mirror philosophy. See example.
- There is a WordPress plugin for AuthorStream, but your WordPress site must be independently hosted. Converting my site over to independent hosting was not within the project time frame. Not to mention something I could not accomplish on my own. Ensuring the databases are configured correctly in a SQL backend is easy if you know where to look. I don’t.
In the end, creating the message on this project was much simpler than the actual execution. I was able to easily story board my ideas and create copy/content. The much longer process was crafting the original content and then making it web presentable. In the end I needed over seven different tools in order to finalize a fairly simple digital media message. The take away is that it takes a lot of skill and digital savvy to create a message that can function simultaneously as a window and a mirror. I believe that the knowledge and critical thinking skills needed to use digital tools will begin to define what people can accomplish in the future. For a full list of the tools I used to create this digital experiment see below.
- Power Point – physically create the presentation
- ToonDo.com – create original graphic
- Illustrator – create original graphics
- iPhone – shoot video
- iMovie – edit video, add titles and insert royalty free music
- iTunes – purchase royalty free music
- AuthorStream – upload presentation for Flash conversion
Bolter, J., Gromala, D. (2005) Windows and Mirrors: Interaction Design, Digital Art, and the Myth of Transparency. Cambridge, MA.