RESEARCH & IDEA IDEA
EXPERIMENTS
The idea that I decided to do for this project was an interactive window. I started out wanting to make the average high street shop window more interactive and eye-catching through its interactivity.
For my experiments, I thought the best way to go about it would be though processing, concepts and animation.
I saw a concept video for the SuperDry clothing store by Gustaf Engstrom (pictured right) which I really liked that seemed to be trying to solve a similar problem.
EXISTING INTERFACES
INTERACTION
To start preparing for this project I looked at some existing interfaces. I kept it quite broad at first, looking at different interfaces with different inputs and outputs.
I decided that I wanted my interface to be a simple and easy to. Also inspired by the work of Hellicar & Lewis, I also didn’t want my interface to need any instruction. For some to be able to use and play with it right away would be a lot better than them having to spend time learning how to use it as this would take away some of the enjoyment.
I hadn’t yet decided on an idea, and wanted to think of the type of interaction first to build my idea around that. One of the first ones that really caught my attention was Body Paint by Mehmet Akten. I love how visually interesting and fun it is, but also how simple the user input is. I also like how it is very engaging, and a lot more interesting than the generic touch interface that you just poke with your finger.
I thought the best way to do this would be through body movement. So no buttons or controllers necessary.
After a little thought with my idea, I decided it would be better to solve a problem more closely linked to me, so moved the idea to the UCA front window. This meant that I knew what the target market would be (students and prospective students) and also helped me progress further with my idea as I had a more specific client. I threw around a few different ideas for the university window interface. These were; to create an interactive prospectus for the university; for a playful/interactive logo or for a more visual/fun interface that still incorporates the UCA identity. I decided to go with the latter. I thought the first two were a little more restrictive on having a full body interface (as they’d mostly use the arms rather than whole body) and I think they would also need the help of technologies that I didn’t have access of the budget for, most notable Microsoft’s Kinect.
As part of the project I also wanted to develop the UCA logo so it’s more suited to screen based media and make motion graphics. This is because, currently, it is only really used on print and the web and I wanted to add more of a personality to it and to the University though motion design.
INITIAL IDEAS Touch Screen Magazine After seeing the YouTube video “A Magazine Is an iPad That Does Not Work” (pictured top left) I thought it might be a good idea to make an interface that combines the digital and flat characteristics of the iPad and the physical and textured characteristics of a magazine. I chose not to go ahead with this idea as I wanted to create something that was more of an ‘expanded’ interface.
Audio Visual Instruments Another idea I came up with was audio and visual output from musical instruments. The main concept behind this is each note or percussion hit has a different visual image to represent it. To push this a little further, the visuals would combine (and possible interact) when notes or hits are played in conjunction with one another.
Interactive window My final idea, which I eventually chose to do, was the Interactive Window. This initially was to make the standard high street store window more engaging with potential customers and to draw attention to the shop. The window would interact with basic movement, so visual output would occur even if someone was simply walking past, this would help grab their attention. The idea moved from a shop window to the UCA front window, with the target market becoming students and prospective students
IMAGES (From top to bottom) Home Page This is how the web page first looks once it has loaded. About Me When the logo in the top left is hovered, a little information about me and my email appear (done using JQuery). This information is hidden when logo is hovered a second time. Social When the arrow to the left of the screen is clicked, the social bar is revealed, pushing the rest of the page slightly to the right to refocus attention.
HTML • CSS • JQuery
WEB DESIGN
ShadowBox This is a demonstration of how the ShadowBox plug-in works on the site.
For my website, my overall aim was to keep it simple. As is it a portfolio website, it’s purpose it to showcase my work, so I wanted to make this the main focus (and almost the sole focus).
reading and learning about them a lot more recently. This made me want to have a similar approach with my website, and the use of x/y coordinates in HTML web design made this fairly easy to do.
When thinking about the design of my site, I knew I wanted the first page people would show my work. Other essentials I need to include was contact information (my email and possibly mobile number) and some ‘about me’.
For my website I used the help of a couple of opensource JQuery plug-ins. This was for the image view ‘ShadowBox’ (from shadowbox-js.com) and the sidebar ‘PageSlide’ (from srobbin.com). I think these were essential in creating the simplistic, one-page website that I wanted. I did a couple of experiments in coding them myself using just CSS3 animation, although they didn’t work very well and just made the function of the website worse, so JQuery was very helpful in creating what I was after.
In the past I have read a few different articles about creating portfolio sites, and advice given from professional designers when they look at other peoples. These are some of the main points I have taken from what I have read: •Avoid having too many hurdles to get to your work i.e. Splash pages •Keep your work the main focus of a portfolio site as that’s what potential employers are on the page to see •Try not to use Flash as your website, unless entirely necessary, as it is much harder to link to a specific piece of work •Avoid overloading your page with too many examples or too much information I kept all these points in consideration when creating my website in order to keep the overall purpose and interaction simple. Another big influence on the design are grid-based layouts. As this year there has been a lot more emphasis on considering grid layouts in our design, I have been
Overall my website turned out how I had aimed. I think I kept it the design clean and the content at the forefront of the site to keep the navigation simple. There are, however, some negatives to the website. One problems is the arrow that opens the social bar. I think, to close the social bar, the user automatically thinks to click the arrow again, but the arrow only opens it (you have to click anywhere on the page or the ‘x’ to close it. This is a flaw that I could not fix, although hope to in the future. Another potential problem is if the use has JavaScript disabled in their browser, the page wouldn’t work how it is supposed to and to them may seem broken. This, however, would have been more of a problem a few years ago, but not so much now as dynamic web pages are a lot more common now. The final, minor problem are CSS issues within IE. I think this, however, can be fixed with a little tweaking.
WEB DESIGN RESEARCH For my web design research, I mainly just had in mind some websites that I personally like (such as cargo-collective) and some things that I didn’t like (such as complicated navigation).
I also used websites such as w3schools. com to help me with the coding of my website. It was a fantastic reference in how to use and the definitions of HTML code.
LOGO DEVELOPMENT For my experiments I thought I should develop the UCA identity for motion and digital formats. I started thinking about how I should use the logo. I played around with the look of the logo (keeping in mind that the goal is to animate it). I mostly played around with using lines and geometric shapes, as well as patterns, hand drawn and digital looks. I chose to do this to help me and inspire me to think of ways to animate the UCA logo. I wanted something that would reflect the creativity of the University and was trying to steer away from the green that is usually used, unless necessary. I found that some of my development sketches and mock-ups really didn’t work as the legibility was very clear, although I felt some managed to create a little more personality than the standard, solid green. I took what I thought did work and the next step was to see what they would look like in motion.
LOGO EXPERIMENTS The second part of my logo experiments were to animate the logos. I thought it was hard to create one animated logo that represents the diversity of all the courses at UCA, so my idea was to create a logo for each major course i.e. Graphic Design, New Media, Fashion, Film etc. I decided to focus my experiments on the Graphic Design/New Media aspect. My first experiment was a logo inspired by the old/retro computers (with the green text on black background). This was to try and keep the UCA green identity, while combining it with the digital aspect of New Media. The motion of the logo was inspired by the TV-indents of the same era of the retro computers (70s-80s). The second experiment was a stop-motion look, where the UCA logo is ‘drawn’ on. I did this to try and represent the creativity of Graphic Design, New Media and the University as a whole. My final experiment was more connected to the geometric and line designs I had mocked up previously. Again, this was to show the creativity of the course and the university. Overall I am quite happy with my experiments, although I feel I could have done something more interesting, and maybe should have gone with another direction I had thought of for the logo. This was to make it more hand-made. For example, the fashion logo could have been done using cut-out fabric.
INTERFACE EXPERIMENTS For my interface experiments I used processing as it is able to connect to an imaging device (in my case the webcam) which I needed. I also used the help of the OpenCV library for a few of my experiments as the library is good and very useful for what I was trying to achieve (using movement and motion). For my first experiment I tried using the JMyron library for processing. I managed to get my logo to follow the movements it detected from the webcam, although it didn’t work exceptionally well. It picked up all the movement made, so it you were to wave your hand, it was also detect the movement from your arm, body and head. This meant that the logo didn’t always move where you wanted it to, making it quite frustrating. It did work if you concentrated on not moving the rest of your body, however, this wasn’t what I was trying to achieve with my interface. I wanted it to be self-explanatory, simple and with no need for instruction. After the JMyron library didn’t work how I had hoped I started experimenting with the OpenCV library. At first I encountered a lot of problems with this library as I couldn’t get it to work. I eventually found out that it wasn’t compatible with my webcam, but eventually got it working with another computer. The first thing I did with OpenCV was to playing with face detection. With a little messing with the code, it got it to track a logo to some ones face. It works very well, and worked how I was hoping it to. The implementation of this would be, if someone was looking at/into the UCA window, the logo will track to their face. I
think this works well as it is a simple, no instruction interface that I wanted. There are a few issues with this, however. The position of the camera is vital for it to work properly, and it can’t track multiple faces at once. Another experiment is a little more of a mini game type interface, is used the help of Andy Best (andybest.net )for this as he has a couple of OpenCV tutorials and open-source code available to play with. The UCA logo falls from the top, and you have to touch them for them to disappear. If this was playing at the front of University and someone were to walk past it, their walking movement would pop the UCA logo, it is this type of simple interaction I was aiming for at the start of the project, so in the respect I think it is a success. The other two are based on similar code, but with a bit of visual difference. The first one almost paints with your movement, and the other outlines your body when you move. Although I believe they both fit the criteria I was after, they didn’t turn out as I had hoped. I wanted the UCA logo to be hidden, then revealed when you move you over it. I tried implementing this but failed. I though this would have made it better to help connected it to the University, and if I had more time I would have liked to have got this working.
CONCLUSION
INTERFACE & USER TESTING Overall I am happy with the result of the interface experiments, although there is definitely room for further development. As I am new to Processing, the results I could produce had their limitations.
advance, all the projector were booked out (more projectors please UCA). I continued trying to get my experiments to work on the laptop until I found out OpenCV wasn’t compatible with my webcam so I had wasted a lot of time.
I am disappointed with my final product for the interfaces as I ran into a lot of technical issues and found it hard to get access to a projector that I needed to produce my final video and to get the audience to interact with my interface.
I was eventually able to borrow a laptop with Processing and OpenCV (thanks to Sam) which I was able to hook up to the projector in our room. This, however, was a little last minute (as my previous plans has failed) so the planning and setting up was rushed, which resulted in a bit of a poor outcome.
The first main technical issue was getting the Processing the work on my laptop. I spent many hours trying to get it to work, but with no success. After I got it to work on my desktop computer a realised I couldn’t take it into university to test it with my target audience. My plan B was to borrow a projector from the media store and have people test it from my house. Although asking almost 2 weeks in
This, however, did have it’s plus side. I was able to get some user testing from my target audience. For the testing, I set up the laptop, ran my experiments and ask people to have a play. I didn’t give any instruction or guidance as this was one of my aims at the beginning and I wanted to see if it was a success or not. This was a definite success with all of the
experiments, excluding the face tracking (to some extent). As my preparation was a little rushed, the face tracking experiment wasn’t set up exactly how it should, the camera being at approximate eye level. The first person to try it out was looking at the projection screen (as you would expect) but the camera was placed a little to low, making the experiment hit and miss. After I told people to look into the camera, it worked well, but didn’t fulfil my ultimate aim.
USER RESPONSE The user response seemed quite positive also. As I mentioned earlier, my target audience instantly new how to interact with the interface and my interfaces clearing communicated what I had aimed. My target audience also seemed to have fun playing with the interface. This being an expanded interface, it is what I was hoping for.
Here are a few more images of people interacting with my experiments.