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.