01.
Ideas for Expanded Interface
What is an expanded interface? Expanded interfaces are user interactions where they are more innovative than conventional interfaces. Expanded interfaces are more unique, intruiging, more flexibile and gives us a difference experience on what where interacting with. They are more playable, fun and experimental.
Clever Card
Informative Mirror
This idea for my interface is based on having all your personal data stored on to one single card rather than numerous ones. These types of data could include membership, ID, travel, business or possibly credit card details.
This is my second idea. It focusses on a mirror projecting informative information. Information such as the date, news headlines, the time and sports etc.
Hand Sensor
Weather Interface
This idea focusses on having sesors on your hand which you could use to control a television, dvd player, hi-fi system, computer screen or house phone. It will act as an alternative to remote controls and engage the user more.
This interface aims at the weather. It will be a device that the user attatches to their body that will produce thier body temperature combinding it with the temperature outside. It will be a more fun way of selecting the appropriate clothing to wear with the weather.
02.
Final Idea for Interface
03.
Research
How else can we carry information on us?
Clever Card Interface The idea i decided to go with was the clever card interface. The idea of having all your personal data stored on to one card.
As part of the research for my interface, i decided to look at how else can we carry information on us in terms of personal data. In exploring this, i was able to come across three ways in which we can do this. The body, technology and identity.
The Body
Technology
We tend to use our brain alot when storing personal information. For example remembering our bank account pin code when consuming online. Apart from personal information we also tend to store information relating to a song, video, artist, specific game, what we wore yesterday etc. Our body is capable of storing all kinds of information wether it be a place, time, loaction, or numbers.
Personal information is the important part of data we store on us. It identifies who we are, without it we wouldn’t be able to do things like get a job, maybe purchase, or even education.
Technology Technology has allowed us to store buckets full of information wether it be general or personal. A computer for example is a device that allows us to store loads of information on. From CV’s, videos, music and documents we can store whatever we want on a computer. This has lead to smaller and more compact devices such as a usb, extended hardrive and memory cards. Other devices such as a mobile phone, data cards (bank card), home telephone, and even games consoles are technologies we use to store some form of information on us.
04. When looking at further research i decided to look more into how technology and the body works. Reason being as i was told to look at more solutions as to how else can information, technology and the body work. I came across twosources which i could look at. The first was a performance artist called Stelarc and the second, the human micro chip.
05.
Further Research Stelarc- The Techno body
The Human Micro Chip
Stelarc is a performance artist who uses his body to show the capabilites of extending it through the use of technology. In many of his works he uses his own body parts to show this. Many of his projects have included him performing with a virtual arm, a third hand, a stomach sculpture and an exosceleton which is him controlling a robot usuing arm and leg movements.
I also looked into the subject of the human micro chip. This procedure is based on having an activated micro chip inside the body in order to control and navigate things. When researching this, i found out that this has already been done by a man named Amal Gafstraa. He had this done in 2005 where an RFID tag was inserted into his left hand. With it, he could open/ close doors, access his car and log on to his computer. This subject was quite interesting to look at while researching, because it’s something that has been physically done. It’s also in a way the next step up from my interface idea.
“ We will require an interface between micro-miniaturised machines within us”- Stelarc, The Techno Body (1993)
Source of Images- www.google.com
Here i started to develop more on my interface in terms of the making, how i would make it, what i would need and how i would show it.
Interface Development How am i going to show the interface?
How would the interface benefit others?
Seeing as my idea is unable to make physically made it’s going to be a concept idea, i decided to show it in the form of motion tracking. I’ll firstly video record the actions i’ll be doing on a plain white PVC digital card then going into after effects and tracking the cards over it to make it seem as if there moving to the movement of my finger.
The interface would benfit the user, as it is an easier way of accessing your personal information. Also it acts as a space saver, rather than keeping a number of cards stashed in a wallet, you can have them all on one card.
How will the interface work? The interface will work by the user swiping their finger from left/right or up/down to select a specific card. The movement will be similar of a navigation on an iphone where you’d scroll your finger to view the different applications.
This is what i’m going to need to show my interface. The object is called a PVC digital ID card. The reason i chose this is because of the shape of the card. Most cards are shaped like this so i thought it would be good to get a blank one exactly the same. It will also be easier when i edit on it as the shapes are the same.
Source of Images- www.google.com
06.
07.
Sketches & Hand Gestures
During the tutorials on this project, i was given some advice on other ways i could look at the navigation of the interface. Navigations such as the finger swiping from left/right and up/down. These would give off a more natural effect on how the card in navigated, rather than the common way of navigating it.
1.
2.
3.
4.
5.
6.
Website Development
These are pictures i’ve taken as references to show the alternative movement that could be used to my interface. The first two images show way in wyhich the card can be held by the user. And the last four show alternative actions the user can do to change the card type. The third image shows the user bending the card forwards. The fourth image shows the user bending it backwards, the fifth is the user holding it straight. Then the sixth image shows the user shacking the card in order to change the type.
This is my website development. I created sketches to show what i’d like my website to look like and the layout. These are sketches i done of how i’d like my interface to work and be navigated. The first sketch is on the user’s hand being able to navigate the interface with left/right and up/ down actions to view a card type. The second sketch shows the user scaling a specific part of the card. An example of this would be if the user can’t see a certain number or text on thier, they’ll be able to scale it bigger by usuing thier thumb and first finger and slide it outwards.
These are my website sketches i done to show what i’d like my webpage to look like. The sketches feature different elements of design i want to incorporate in my layout. From sketching these layouts, i took inspiration from lookin at various exisiting websites on the internet. The sketches i done feature a home page layout as well as other pages such as the gallery and info on the interface. Most of the elements in sketches are the same but difer in positioning. I also looked at button shapes because i think they do play an important part of the website. Depending on the colour scheme of website, that will determine
wether the buttons will be a shaped navigation or a texted link. I paid attention to rounded edged shapes because i noticed some website had them on button designs and frames on images. The third sketch of the first image of sketches, it shows a different layout compared to your normal home page. The second image of sketches i’ve experimented with columns and image positioning on the webpage. The last sketch i done sketch where i’d like to place the rounded buttons. The third image of sketches is of gallery layouts. And the fourth is again of button layouts and the last sketch is of another
homepage layout. Overall these sketches gave me an overall feel of what i’d want my website to look like. When designing it, there might be changes depending on what the live view looks like.
08.
09.
Website Outcome
This is my website outcome when finished.
Interface Outcome
This is the my final interface. I chose to show it in the form of a video. The way i showed it is through an infomercial. I wanted to present the interface as a concept piece, not like an advertisement where i would make it look like it’s selling.
Here are screen shots of final website. I decided to base the website only on my interface rather than have it a personal as a personal one as well. As you can see the overall look of the website is quite staright forward, i didn’t want to put a huge amount of content in because i thought this would make positioning and alignment more longer to do. Also too much content for this website would of been too much seeing as it was only based around my interface. When designing the website i wanted to it a clean look. In par-
ticular, i wanted the font to be spot on. I used century gothic as this suited and matched the look i was going for. In terms of colour, there are only two main ones which are grey and a palish light blue. They worked well in contrasting with each other. In terms of content, the homepage is about the introduction to the brief and the reason why the website was created. The second page is about the brief, the third is on the interface. The fourth is the gallery followed by a link my gdnm blog and a feed-
back page. On the gallery page, i added a lightbox so it would make the images more impressive to look at. I also thought it would make the website look more professional. When coding the website i did find it quite challengin at first, knowing all the codes and what there functions were. Once i got the hang of it, the process was straight forward. Website such as ‘Little Web Hut’ and ‘W3schools’ helped me alot in understanding html and css. The workshops were also helpful in learning the basics which the
important part when starting to learn coding.
These are some screen shots i’ve taken of my video interface. It starts with an opening title, the clever card interface. Then it goes on to give a scenario, ‘imagine a device which you could store all your personal information on’. The video then goes to a shot of me taking out a card from my wallet, then all the other cards dropping out. The next shots show the user using the interface. When doing the video i came across some tricky obstacles which i didn’t think would happen. The first was getting the cards to look like they where physically on the exhisting card im holding in the video. I played around with after
effects but couldn’t find a solution other than to track my finger seperately frame by frame. I also tried designing the cards seperately, but again i didn’t think it would look as realistic as the scans. Unfortunately because of the time i had left, i managed to clean up the video. Instead i made the edges of the scanned cards follow the tip of my finger. The outcome of this made it look more realistic and cleaner in terms of the tracking. As the cards follow my finger, they also come off the card then fade out. I wanted to show this because i thought it would add to that hollographic interface effect. I took inspiration from this by looking
at other videos where the same was done but more professionaly. To the card images i also added a blur and glow effect, this really helped in making the interface look more realistic. In the beginning and the end of the video i added text on the card to again fill in the spared sections of the video. To the text i added the same effects as i did on the images to again give off a techno look. Another problem that occured while filming, was being able to hold the card in a right way so that it could be made editable on. I tried many ways which i could hold it, till i finally managed one which was still slightly tricky. If i could make
any changes to the outcome, i’d re-film the video and make the lighting more better along with the positioning of the card. Overall, making the video and editing in after effects has enabled me to strengthen my skills that i already gained in the first year. Ive also learnt that when editing on effect, the process is much longer and requires more time to get the best result.