Interaction - Interactive Design 112 Part B

Storyboard...

Interaction - Interactive Design 112

X Marks the Spot...

Compilation of 5 Screen Shot:

The first shot I included was because I thats how the application begins as each user would have different timetables, routes and favourites. Also to show that you are able to use a touch keypad that pops up.

The second shot is important due to it being the main menu home page. It includes the interfaces different options to maximise user satisfaction.

The third shot spans from the Destination Locator where the pin point option is chosen to choose where you are on campus.

The fourth shot also spans from the Destination Locator where you choose the timetable icon to select a class that you have to go to.

The fifth shot show what else is in the Destination Locator menu bar and also shows how the map looks with the directions indicated on it.

200 Words:

I made my interface application simplistic and easy to navigate around with, only displaying the basics and hiding more options in a menu bar at the top of the screen that comes down when you tap the screen.  The extra option in the menu bar are: a home button which takes you back to the menu screen, forward and back buttons, a tracking system which you turn on to see the path needed and tracks new paths and records them in favourites, the favourites shows previous paths recorded and favourite colour themes and favourite cafés, there is also an apple that represents cafés and areas where there is food drink in general, there is also a toilet button that will locate the toilets on the floor that you are one, customization option where you can select a combination of three colours to keep the application simple and lastly a friends button that will drop down with a list of all your friends and will show whether they are on campus with a green tick by their name. For my application I wanted to concentrate on the purpose of our project that is to get around Kelburn Campus from A to B. I used green, black and white as the default colour combination as it is bold and contrasting to the black. Other colour combinations with black and white are light blue, red and yellow. However you can make your own combinations in the customise section in the menu. There is also a settings section and timetable section.

Interaction - Interactive Design 112

Mapping...

3D:

I wanted to make a sort of 3D map where all 3 levels of the Murphy Building and the 2 levels of the Kirk Building are illustrated to show where you have to go. I make played around with the perspective tool on photoshop and did many different sizes and variations but none of them looked right to me so discarded the idea of the 3D level idea.

Birds Eye View:

So instead I changed my idea to only do the birds eye view of the floor plans of the 2 different buildings. I looks better this way and would be way easier to follow. I got the floor plans off from the SOD sight under our class details and just traced the outlines of the buildings and rooms. And I made small gaps where the lines go through to indicate doors.

Interaction - Interactive Design 112

Editing Process...

Theme Testing:

I wanted to include themes into my application to make it more interesting for its users. I have discussed these themes earlier in my blog. I tried it out and decided that I didn't like it as it was way too cluttered for my liking and it just didn't feel right to me. So I won't be including such detailed themes but rather only colour themes, which will be 3 coloured combinations.

Icons:

I made my own application icons on illustrator and photoshop. I wanted to include one consistent style throughout my interface and so I made my own style. (This was probably my favourite part of the project =D)

Row 1

Home, back/forward/directional arrows, favourites, timetable (TT) and cafés/food areas.

Row 2

Customise, toilets, tracking, settings and friends.

Row 3

Pin Point Location, zoom, destination locator, stairs (going down) and drop down tab.

Row 4

Elevator Level 1, elevator level 3, typing bar.

Home icon takes you back to the main menu.
The Favourites icon shows your favourite routes and colour combinations for quick selection.
Timetable icon where you can enter in class details and locations.
Customise icon includes default colour combinations and an option to make your own.
The tracking icon is to turn on to see the path needed or to turn off so the device tracks your route.
Friends icon shows which of your friends are on campus and it will show you where they are.
Pin point location icon is to pin the icon on the campus map to indicate your starting point.

Interaction - Interactive Design 112, Part A

Themes...

Pirate Maps:

This is not as such a pirate map where "x marks the spot" but does show how the general idea of a map where ships are situated, etc...
Also the idea that when there were lots of bands of pirates ages ago there was not such a thing as a GPS nor electronics and so compasses were used to navigate both land and sea.

Pirate Maps 2.0:

This might look familiar as it is the Neverland Island map. Anyway as a pirate map it indicates where what is and also with the use of a compass for navigation. It also gives off the authentic coffee stained look which makes it look worn and torn as it must have been used many times.

To conclude my pirate theme I had the idea of using a compass instead of arrows and making it look authentic like map 2.0 as well as technical like the first map.

Underwater:

For those who prefer something more tranquil I wanted to add in a underwater theme. Just because we are above land does not mean we can also explore underwater. For this theme I want to highlight the colours that are seen underwater and use those colour for this themes colour combination. These colours will mainly be blue, purple and pink.

Underwater 2.0:

Just another idea for the underwater theme. I had the idea that different creatures and plants could represent different thing on the map to make it more enjoyable to follow.

The underwater theme could be a fun for both guys and girls as it is not gender specific.

Space Age:

For another theme I thought of space. Seeing as space is so humongous I could so much with the theme. I could use a star instead of an x and  use galaxies (clumped stars) as the path that should be followed to your destination. I could also use a little mini spaceship to indicate where you are on the map and different coloured ones to indicate where your friends are on campus.

Space Age 2.0:

I was also thinking that I could include the planets into the map as to show different things like the planet Uranus for the toilets and Saturn for cafes.

For the colour scheme for this theme I could use Yellow, Black and Dark blue.

Royalty:

The idea of royalty is prestige as shown in the image above with the intricate working of the design. Also the colours of silver and gold gives it that high quality feel to it. So for royalty as a theme the interface design would be intricate and delicate. For example the buttons linking to the next section would be banners and your destination could be a crown and to show where your are could be a diamond.

Royalty 2.0:

This pattern looks very prestige, like something you might see in some wealthy persons home. The colours of deep blue and gold suggests the idea royalty too. This would be a good pattern to have in the background of the interface, but saturated down to only be there but not to be seen.

Together these two image brings some quality to the theme choices as it is so different. The colours that I would use would be deep blue, gold and silver.

Interaction - Interactive Design 112, Part A

Wireframe & Prototype

Wireframe:

My interface is called 'X Marks the Spot'. I decided to include images as to what each main connection in my interface could look like into my wireframe.

Prototype:

This is my prototype model where I only used a few of the interface images. The first screen that you will see when opening the interface will be a log in screen as each interface is unique to its user due to certain applications that it includes (i.e. friends setting). After the loading screen you will enter into the main menu page which is 'Home'. This screen has four main applications. These are 'Destination Locator' which is how you will find your way around campus, then there is the settings which is explanatory in the name itself, then there is a customisation application that goes into my fourth prototype screen shot which include things such as 'Colour Combo's', 'Themes', 'Favourites' and a 'Store'. The lastly on the 'Home Page' there is a 'Timetable' application that allows the user to type in their course information that would later be used to enter into the third prototype screen shot into the destination box where the interface application would find that classroom/lecture theater. After that the fifth prototype screen shot will appear on screen to highlight the path and the room. Along with each screen in the prototype except the 'Home Page' and those before will have a drop down menu bar that will all have a back and forward button as well as a home button. However in the 'Destination Locator' application there will be more buttons in the menu bar on from the birds eye view map. These include a tracking (to make new routes), favourites (saved routes), customisation (leads back to original application), cafes (locates nearby or on route eating places), toilets and friends (finds those who are on campus). Thus concluding my main ideas with this interface.

Navigation Interface - Interactive Design 112, Part A

Concept Ideas

Studio Time:

During our studio we went into groups and came up with concept ideas to what could be included into the application. As seen in the image above we came up with multiple ideas on what could included then we grouped/linked those ideas together (red lines). After that we summed up what we thought would be one good concept which included to have an icon screen which will allow you to go to various different areas in the application to what you are after. Then to have a sort of tracking system that remembers routes you have taken and can connect to your friends and the routes that they have taken and also you'll be able to see where they are when you are looking for them. And it will also have a customisation setting where you can choose different formats (eg: colour schemes/themes).

Navigation Interface - Interaction Design 112, Part 1

Research - Visual

Directing Visuals:

• Arrows
• Lines and Arrows
• Lines
• Dashed Lines
• Dotted Lines

These indicate the direction in which to head. Whether it be a lot of arrows or just arrows indicating where to turn. Whether it be a line with arrows on it indicating the way or just a plain line showing the way.

Colour Visuals:

• To indicate different regions that have similarities i.e. cafés all one colour. Or if you go the wrong way the indicator (arrow) will turn red as a way to show that it is wrong and that when its right it will remain green (red means stop and green means go)

Co-Ordinates:

• North - 0
• East - 90
• South - 180
• West - 270

For the more adventurous people out there a compass function to show the co-ordinates of your destination and location could be helpful to some people.

Signs:

• Stairs
• Ramps
• Elevators
• Telephones
• Toilets
• Handicapped
• Exits
• Cafés/Restaurants
• Wi-Fi Areas

Pictures displaying these things that you could possibly come across that are worth taking note of i.e. a woman stick figure for the ladies toilet, man stick figure for the mens toilet and a wheelchair person for the handicapped toilet.

Navigation Interfaces - Interactive Design 112, Part 1

Research - Apps

Map Quest:

Map Quest is a navigation application which looks very user friendly with a menu bar at the top and an access bar that pops up at the bottom of the screen. It shows your route, where you are and clear instructions to reach your destination at the top above the menu bar. It also includes a voice navigation system so that it can be used as a GPS in a car. You are also able to search certain places as shown in the bottom pop up menu bar easily. 

iTunes App Store:
http://itunes.apple.com/app/mapquest/id316126557?ign-mpt=uo%3D6&mt=8

NDrive:

NDrive is a navigational Interface that can be stored directly onto various different devices allowing to be used without Wi-Fi connections. There are maps available for many different countries including Australia and NZ.

Start up menu looks user friendly and clearly indicates an interaction that could be made.

Continuing on with the same theme throughout this screen indicates more options within the application i.e. place.

In this screen shot it shows the route, your position along the route, where to turn and how far away that is as well as addition features. It is simple and clear.

You can also choose whether you want to view it in 2D or 3D like in this screen shot.

Webpage:
http://www.ndrive.com/ndrive11

Navigation Interface - Interaction Design 112, Part 1

Research - Going Back to Basics

GPS:

The GPS (Global Positioning System) is one of the most common navigational system in society, they are used in cars but can also be hand held devices that is a substitute for a compass. As it is stated in the name of the product it tells you where your destination is and how to get there through both as a voice telling you where to head i.e. directions and shows on the screen itself where you are, how far you have to go and ect.
With GPS's there are whole range of different types that are available to its users. It uses satellites to pinpoint destinations, where you are and your path to get there.
Here is an example of one that is used in cars...

Google Maps:

Everyone knows google maps. On Google Maps you have 4 different ways of viewing; satellite, map, earth and street view. There's also additional features i.e. traffic. This is a good navigation system as it can be very useful. I mainly use it to see how long it will take me to travel somewhere and to see where somewhere is that I don't know where it is. I also use the satellite viewing option as I am a visual person and like to what the other places around it looks like instead of looking at a street map (map viewing option). 

Wanting to find your way to your location you can modify to your own personal preferences. You can choose between transportation methods, the route to your location as well as being able to modify the route to suit you. It will tell you how far and how long it would take you to reach your destination.

It also gives you direct directions on how to get to your destination which is really useful, especially when you are in an area that you don't know to well or at all.

Interaction With Object - Interactive Design 112

The Interaction with my Object...

I designed my object into a box so that someone's first impression of the box wont be much as well as choosing black to make it more inconspicuous and darken the inside. Yet my box holds many experiences. It is something small yet not big so that it is a good size to just pick up and hold in your hands. After testing my object with a few people they all look inside first which was what I intended for due to my main sense being vision/sight. Then I found that they would either put it to their ear and shake it slightly or they would stick one finger in the hole to see what it actually is.

The Experience:

Sight;

Looking from afar.

Looking in closely.

Listen;

Touch;

The Object:

Outside;

The form and showing the hierarchy point which is the hole that is the point where most of the interaction with the object takes place.

Inside;

What is hidden inside the box. I also placed a mirror at the back for depth. I found that when you look from afar you see what is inside, but when you look in close I found that you look past the strings and into the mirror thus creating an illusion in itself (reference to earlier exploration into pictures and images).

200 Word Description:

My object relates to the sense of vision/sight but also to the sense of touch and sound. I made my object into a plain cubed box as to maximise the experience as it is what is inside the box that counts most. I also made my object a good size that makes it comfortable to pick up and play around with in your hands. My object creates a unique experience for its users through invoking these senses. Through sight the object creates a unique experience for something that you would not have guessed to see or experience in such a small enclosed area. A unique experience is felt through touch is felt by the thread bearing mysterious things. And a unique experience is heard through sound by the mysterious things clanking against each other and their surroundings.
There is no specific way to use this object. Though I would recommend that you look into the box from far away and then closer in. Then I would suggest that you either stick your fingers in and feel around or shake it lightly next to you ear to listen to what you can hear. This way will result in you having the most maximised unique experience from this object that it has to offer.

Looking Back - Interactive Design 112

Looking Back to Previous Ideas...

A Change of Sense:

After discussing my mock up models with my tutor and class mates I realised that there was not much room for good development into making my model deliver a unique experience to its audience so I looked back into my exploration into other senses. I decided to take another look into touch and my idea of having a box that is surrounded with thread, wire, rope etc. But instead of having a tangled mess around the outside forming the box it reverses with the tangled mess being inside the box where someone sticks their hand inside the box. I tired this and I found it very difficult and just when I thought  that I had it everything came undone and tangled up that I had to change it. I ended up changing it so that I had thread hanging down from the top of the box with little metal things hanging down on it.

Development - Interactive Design 112

Development...

Prototype Models:

This is a quick sketch up prototype to see whether my idea of a conveyer belt picture book would work. I first tried tissue as is a softer material so that it would rotate easier but that didn't work because of trying to connect the ends. By connecting the ends together it created a thicker and heavier part and thus didn't rotate. So next I tried it through using a bit of plastic and double sided tape and a piece of paper over top so that the tape wouldn't stick to anything because I wound the tape right round this time. It worked before I put the base with the structure. I took it to class to see what I could do to make it rotate and after discussing this with my tutor and a few of my class mates we came to the conclusion that all my model needs are rubber bands for grip.

While experimenting with my conveyer belt idea I thought of one of those games at a carnival where things pop up and you try and shoot them. So I made a very quick and simple mock up to show my idea in physical form. I want to make the interaction part so that you press down on a lever type thing so that the picture on the end of the lever pops up and you can see it through the holes cut out. I plan to random-nise these holes to make for a more unique experience.

Pictures/Images:

No I wanted to explore what pictures/images I could use. I thought of making some photos happy and others scary. Through one of my design lectures this semester the lecturer was talking about illusions and I thought that optical illusions would be good images to use as it makes the user think.

Storyboard - Interactive Design 112

My Storyboard:

Written Proposal - Interactive Design 112

200 Words Outlining My Model Experiment

I plan to make a device that when you turn the rod a conveyer belt inside a box presents images to the viewer who can only see a box and the 3 windows which shows the images from the conveyer belt. I'm going to do this through making a box that will be big enough to hold the device inside yet not to large to be overwhelming to its audience. Then I will make the conveyer belt through using a flexible material that will allow itself and the images to rotate around like a conveyer belt. For the rotating mechanism I was thinking of using a metal/wooden tube and glueing in a rod of wood that will be longer and slimmer that the other as well as having the one side even longer for the user to rotate the mechanism manually. By rotating the first rod the second one should automatically start rotating too. By having the user rotate the images them selves they are in control of the device. Leading into that I want the users of my device to have pleasurable experience looking at the images. I plan to use images that will most likely bring back childhood memories, hence creating a pleasurable experience. Also its audience would not expect to see images that would trigger their memories but instead expect everyday images (nothing special). So I conclude that its audience will be pleasantly surprised by this cute little photo book.

Exploring Texture - Interactive Design 112

Exploring the World of Texture
I decided that I wanted to look more into texture. Texture definitely has some really interesting aspects to it. For example everything has a texture, but finding an interesting texture to work with is a little but harder. It has so many possibilities. I had the idea to work with a cube and add different textures around the cube on sides with thread, wire, fabric etc.
After talking to my tutor she suggested that I should think more about how the interaction takes place. Like instead of just playing around with it in your hands you could make it so that you stick your hand in a tangled mess inside a box or a tangled mess inside a hat. Also that it could help if I stuck to only one or two materials for the actual textures.
I thought that rubber bands could create an interesting feeling if it was placed on your head (sort of like a head massager or something).
So I started to experiment using rubber bands to create my idea into something physical, but unfortunately though many tries I couldn't get it right. I made one thing and when that did not work I broke it down and tried a different approach. I retried this about 4 times till I had run out of ideas. The final model I tried failed too and decided that I should look back and think about what I really want to do. Here are photos of my final tries...

Change of Sense - Interaction Design 112

My Change of Sense

My exploration into other senses...

Experiment - Interactive Design 112

My First Experiment

I experimented with light through creating a little box that lit up with switches. I bought small finger lights from a cheap store to use as the light factor. I made a triangular prism out of cardboard around the lights with the switches at the back and the squares in the front as seen in the pic below...

With this experiment I wanted to play around with sight so I made a light box that distorted your perception of the colour expected.

Through placing contradicting coloured stickers below the squares to the actual lights colour, you would expect that colour to shine through instead you receive a different colour as shown in the first pic where you can see the lights colour.


I placed a cover over the switch so you would not see the colour of the light until you switch it on.


I really liked this idea, but I would find it too difficult to manipulate to what I want it to do unfortunately.

Function vs Fun - Interactive Design 112

Function and Fun Items

We were told to bring 2 items into class. One item had to be an interactive functional object and the other item to be an interactive object that is used for recreational purpose. So I brought a pill cutter for the functional item and a mini magnetic snakes and ladders game for the recreational item. I chose the pill cutter because it is something I use every single day and it serves a very useful purpose for me as I am unable to swallow large tablets. I chose the snakes and ladders game because it is a lot of fun to play and easy to take along with you, especially on holidays and road-trips as it is so small. I always take it along with me when I go away and everyone loves playing it as normal cards can get boring after a while. Again it was interesting to see what everyone else brought along for their items. After we had all discussed our items we sorted them into different groups when certain items related to each other. Then in pairs we chose four of the few groups and we noted down the relationship that that group had to each of the 5 senses.


The groups of items...

Exploration - Interactive Design 112

The Exploration into the senses:

After our introduction into the project we were told to bring 5 items that represented each one of the senses. So I brought along my hairbrush for touch, my highlighters for smell, my bracelets for sound (hearing), jelly crystals for taste and bubbles for sight. I chose these specific items because I thought that these items best showed the 5 different senses best to me. The hairbrush gave an interesting sensation when you run your hand or fingers over it, but gave a different sensation against your scalp when you are brushing your hair. I chose my smelly highlighters for smell because you don't expect a highlighter to smell usually and I think that some of the smells you would expect from that colour highlighter is actually a different smell. I brought along some of my bracelets for sound due to the fact that I love the sound they make when you just move around and with depending on the material of the bracelet it creates interesting sounds, for example the clinging of metal bracelets. For taste I brought along jelly crystals as I always seem to eat some of the crystals before actually making the jelly because they just taste too good. Lastly for sight I brought along bubbles because I'm fascinated with that short moment when the bubble bursts or pops and you see something and the then the next moment its gone. Other peoples items were very interesting and seeing what their perception was on an item that connected to a certain sense. 


Then we split up into groups and made brainstorms  for one of the 5 senses that we were interested in. I was the only one interested in sight so I came up with this...