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 - Creative Coding 142

A Work in Progress...

The Bubbles:

+ Code so far...

My idea when starting this code off was to make the bubbles fall at different rates. I done this with the help of my friend who talked me through the process of floats and now I understand it a bit better than before. I made my idea happen and thought that I didn't want my bubbles to disappear off screen so I gave my bubbles boundaries. At this stage though the bubbles were just moving up and then down and then up and so on. Then all of a sudden it hit me that bubbles don't float down but up. So I adjusted my code so that the bubbles would come up out of the screen. I then also made my bubbles move and bounce off the side boundaries as bubbles have no real direction but up. The bubbles are still moving to fast which is a problem I still need to fix.

Interaction - Creative Coding 142

Experimentation Cont...

Rain:

While looking on the Open Processing site I came across this loop where the circles fall and pop at the bottom and more falls down from the top. I used this persons code and changed it so that the circles are bigger and come down more slowly. I want to experiment a similar thing into my code design.

Rows:

Firstly I wanted to make my circles drop and so I made a loop for more circles and then used the same code as earlier when I made the 1 circle drop. I got that working and wondered whether I could do the same but only across the screen. So adapted my code and got it to move across too.

Interaction - Creative Coding 142

Experimentation Cont...
Movement:

In class we were showed how to make a shape follow your mouse and so I tried it out myself. However it made several circles as I had not redrawn the background in void draw function.

So added in the background under the void draw function and so now only the on ellipse is following my mouse because the background is redrawn in 60 frames per second.

Interaction - Creative Coding 142

Experimentation...

Spherical:

After researching bubbles I wondered whether i could make a sphere on processing rather than a circle, as bubbles are usually spheres. So I played around and made a sphere that was able to move down the screen. But before being able to move the sphere down the screen I needed to create the code first and so I created an ellipse first to get the code right...

Once I figured out how to make the circle drop I introduced that piece of code to the sphere.

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.

Interaction - Creative Coding 142

Inspiration

Bubble Wrap:

I had a brainwave about this game i once played online. It was rather silly but enjoyable because who doesn't love to pop bubble wrap? Not sure of the website I first saw it on, but here is a good enough one... http://www.puffgames.com/bubblewrap/
I want to explore something alone the lines of bubbles. There is just something about them, maybe it is the destruction of something beautiful that can never be healed.

Bubble Wrap 2.0:

I thought I'd just put up this image as it show that something beautiful with the light reflecting off the surface, revealing the innocence of the translucency in its crinkled aesthetics.
I also really love the light fluffy colours which are the pastel blues, pinks and purples. This image is also colour inspiration for my interaction.

Bubbles:

I found that water bubbles are rather a fascinating thing that you can stare at for ages as it is so entrancing. I am using the directional movement of the bubbles as inspiration for the direction that my interaction might adopt.

Bubbles 2.0:

This image is gorgeous as the leaves of the the tree look like golden flakes floating among the bubbles due to the angle of sun light hitting the leaves. Also hitting the bubbles that they show off those amazing pastel colours from the bubble wrap. So I had saved the best for last in my few precedented images here. This image is so enrapturing and I can stare at it forever. 

Interaaction - Creative Coding 142

Concept Ideas...

With this concept you have a cone shape that has to catch the shapes falling down and you move the cone across the bottom of the creen with the left and right arrow keys on the keyboard. the more you catch the faster the shapes fall and changes colour from cool colours to warm colours to indicate the urgency. Also the further you are into the interaction it could explode at any time catching you off gaurd. I was also thinking that you would have a random shape fall that if you catch it it would also explode.

With this concept shapes come out from thethe center out and you have a bar that  catches the coloured row that the background indicates. So if you catches the wrong coloured row it pops against the side. You'll use six different keys on the keyboard to move to the different rows as the background colour colour changes around.

With this concept kind of mixed the first to concepts together. The squares will pop randomly up on the screen. As you click the squared the main square will grow and changel in colour the further you are into the interaction. The squares wil start poppin up faster and faster and if you click a red one your main square pops and goes back to its original size again. Also when the square start to change to red when you have clicked too many squares it will also pop.

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.