Ideas for Expanded Interface

What is an expanded interface?Expanded interfaces are user interactions where they are more innovative than conventional inter-faces. Expanded inter-faces 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 This idea for my interface is based on having all your per-sonal 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.

Informative MirrorThis is my second idea. It fo-cusses on a mirror projecting informative information. Infor-mation such as the date, news headlines, the time and sports etc.

Hand Sensor This idea focusses on having sesors on your hand which you could use to control a television, dvd player, hi-fi system, comput-er screen or house phone. It will act as an alternative to remote controls and engage the user more.

Weather InterfaceThis interface aims at the weath-er. It will be a device that the user attatches to their body that will produce thier body temperature combinding it with the tempera-ture outside. It will be a more fun way of selecting the appropriate clothing to wear with the weather.

01.

02. Final Idea for Interface

Clever Card InterfaceThe idea i decided to go with was the clever card

interface. The idea of having all your personal data stored on to one card.

03. Research

How else can we carry information on us?As part of the research for my interface, i decided to look at how else can we car-ry information on us in terms of personal data. In explor-ing this, i was able to come across three ways in which we can do this. The body, technology and identity.

The Body

We tend to use our brain alot when storing personal informa-tion. 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 stor-ing all kinds of information weth-er it be a place, time, loaction, or numbers.

TechnologyTechnology 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 docu-ments 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 technolo-gies we use to store some form of information on us.

Technology

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.

04. Further Research

When looking at further re-search 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 per-formance artist called Stelarc and the second, the human micro chip.

Stelarc- The Techno body

Stelarc is a performance artist who uses his body to show the capa-bilites 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 stom-ach sculpture and an exosceleton which is him controlling a robot usuing arm and leg movements.

“ We will require an interface between micro-miniaturised machines within us”- Stelarc, The Techno Body (1993)

The Human Micro Chip

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 research-ing 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 interest-ing 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.

05. Interface Development

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.

How am i going to show the interface?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 track-ing the cards over it to make it seem as if there moving to the movement of my finger.

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 appli-cations.

This is what i’m going to need to show my interface. The ob-ject 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.

How would the interfacebenefit others?The interface would benfit the user, as it is an easier way of accessing your personal infor-mation. 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.

Source of Images- www.google.comSource of Images- www.google.com

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.

06.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.

1. 2.

3. 4.

5. 6.

07. Website Development

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.

This is my website develop-ment. I created sketches to show what i’d like my website to look like and the layout.

These are my website sketches i done to show what i’d like my webpage to look like. The sketches feature different ele-ments of design i want to in-corporate in my layout. From sketching these layouts, i took inspiration from lookin at various exisiting websites on the inter-net. 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

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 posi-tioning on the webpage. The last sketch i done sketch where i’d like to place the rounded but-tons. The third image of sketches is of gallery layouts. And the fourth is again of button layouts and the last sketch is of another

wether the buttons will be a shaped navigation or a texted link.

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 depend-ing on what the live view looks like.

09. Interface Outcome

This is the my final inter-face. 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.

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 solu-tion other than to track my finger seperately frame by frame. I also tried designing the cards sep-erately, 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 hol-lographic interface effect. I took inspiration from this by looking

at other videos where the same was done but more profes-sionaly. 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 sec-tions 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 ena-bled 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.

08. Website Outcome

This is my website out-come when finished.

Here are screen shots of final web-site. 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 pal-ish light blue. They worked well in contrasting with each other. In terms of content, the home-page 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 impres-sive to look at. I also thought it would make the website look more professional. When cod-ing 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.