Interaction Design, Project Two, Blog Sixteen

Project Two Complete!

I have now completed the final video for my navigation application. Here it is...

I have added music more or less throughout the entire clip in order to keep the flow and keep it alive. The music changes a lot to suit the different clips and add to the quick swipe, changes.

I have also edited some of the clips in order to make Arrown seem more alive through animation, and I also changed the "KELBURN CAMPUS" map clip. I now have the map warp fading into a red tint making it seem scary and hard to navigate around.


I feel like this video represents my actual application fairly accurately, not in a screenshot/user guide way, but it represents the tone and general aesthetic. I have also generally stuck to my storyboard with the addition of a few things, such as a 6-pack of beer with a face, and many other gags which will hopefully be a little bit funny or at least make someone smile. I also changed some transitions in order to keep the fluidity. One thing however that has taken away from the fluidity a bit are the little comments between Arrown and the offstage hand guy, however I found it adds to the kind of humour so I wasn't willing to remove them, as the clip needs a balance of both.

The changes that I have made including Arrown's voice and personality, and the addition of real life images I would want to carry over into the application if I were to keep developing it as I feel they would make it more fun and light. Also I think I would incorporate a background soundtrack in my application to keep it alive.

Interaction Design, Project Two, Blog Fifteen

I have continued to work through my video and I'm almost at the end of animating. I have noticed that I have forgotten to animate Arrown properly when he is first seen in the chair at the beginning as he is completely static, so that is something I will go back and redo. I have noticed that as I go I am finding better ways to bring Arrown to life through animation, and I think this is showing in the clip. One very simple thing that I think brings him to life is blinking. It's a very simple thing but it makes him seem way more alive.

Here's what I have so far...

Another thing I am going to redo is the map of Kelburn when Arrown says "KELBURN CAMPUS". At the moment it is pretty average as I just added it in using iMovie, instead I think I will animate it somehow in Flash.

After all the animation is complete I will then need to start looking at sound. I think I'm going to add a music track underneath the whole thing, as it needs a bit of a boost due to the fact there a quite long parts with Arrown just talking with not a lot else going on where the clip kind of dies.

Interaction Design, Project Two, Blog Fourteen

I am currently working on animating my promotional video for my find: Navigation Application. I have decided to animate it piece by piece, exporting it piece by piece as I find when using Flash big projects can get very messy and confusing in flash. 

In term of the application I have developed Arrown's character more. He is no longer English but now a New Zealand modern day Maori. I did this as this makes him more relatable to users as they are going to be staff and students of Victoria University, which are mostly New Zealanders. His personality now is also very Kiwi, he is now very laid back.

The above video is what I have so far. I have combined my current progress and added some sound in Flash.

Interaction Design, Project Two, Blog Thirteen

I have made a storyboard for my video clip about my navigation application. I have decided to make it a promotional video which is completely animated. I have decided to do this as it better suits the cartoonish style of the application, and since my application isn't particularly that hard to use it doesn't really need to have a direct representation of how to use it. This video will more give the user an idea of what to expect interms of the aesthetic and general tone.

Below are the larger original images from the storyboard...

Interaction Design, Project Two, Blog Twelve

User testing of my navigation application:

1. Learnability - Users found it was easy to accomplish basic tasks due to the thorough descriptions given by Arrown.

2. Efficiency - This seemed to be my applications downfall, as Arrown was often too talkative and needed to get to the point more quickly.

3. Memorability - Users found the application easy to remember.

4. Errors - There were a few errors but these were due to the limitations of the mock version of the application.

5. Satisfaction - Users said they would have found it more satisfying if Arrown talked less.

Interaction Design, Project Two, Blog Eleven

My applications is now complete...

Navigation Application

The find: Navigation Application is centered around the two dimensional arrow character named Arrown. Arrown makes up everything in the application form the directional arrow to the search bar. The point of this application is to make it as if the user has a pocket sized personal tour guide, except unlike most navigational systems Arrown is very characterised with a unique personality creating a more enjoyable experience, in addition the application has a simple aesthetic so it is easy to use.

Features:

• Accurately tracks users position inside interiors, giving detailed directions by explaining using visual features along the way, “Go towards the pot plant”, and through actual directions, “Turn left”. In addition Arrown also points out the way with his arrow head, which adjusts relative to how you are holding your phone, to ensure the arrow is pointing exactly where it is.
• The user is able to get directions without looking at their phone due to in-depth oral instructions meaning they can find where they are going without the social embarrassment.
• A map is available for the user to look at so they can get a general overview of where they wish to head.
• The music option takes the user to there music which will then become quiet when the user is heading in the wrong direction
  
  
  
  
  
  
  
  
  
  
  
  
  

Interaction Design, Project Two, Blog Ten

I have now finished creating my application in Flash, however in doing this I had to change some of my ideas in order to make it work.

The main problem I had was with the embedded timeline feature in Flash. I could not find out how to have one button on one timeline which when clicked would activate something on another. In trying to work around this I ended up having a very complex and messy layout which I struggled to navigate through. Therefore I decided to try keep most things on one timeline which meant having multiple copies of Arrown for each animation. In doing this however I now don't have Arrown transform into the search bar etc and instead he flies off and then back on as the search bar and so on. Even though this goes away from what I originally wanted, I feel that this creates a better flow for the app and suits the motion of Arrown the arrow.

One thing I found useful along the way when scripting was the code snippets tool, this made things very simple which was helpful.

In terms of Arrown's voice, I decided to do an almost Cockney accent and have him as a somewhat nervy character who can also be quite condescending. He's a bit of an unlikely hero.

Another thing I have looked at is colour. Overall the main idea was to go with green, as it symbolises 'go' and then he turns red when the user should turn around as it symbolises 'stop' or 'wrong way'. I then believed both green and orange and red and orange go well together, orange is also the third colour in the traffic light so it seems to fit quite nicely. However some people have disliked the colour scheme so I have tried to alter it. I have looked at having a darker shade of green but it does not look right, I also tried changing the orange to yellow but this was not successful either. I think one of the main problems is that when using the app on a laptop screen it makes the plain white gradient background too overpowering. I think that when the app is on a phone it will look better.

For the interim I added a shadow to Arrown but since then I have removed it. Firstly because technically it would be hard to add in when animating and with all the different symbol layers, and secondly, for my 'trial version' app the user moves the phone horizontally so the arrow is flat anyway so there is no need for shadow. The whole idea behind the shadow was to make it clearer where the 2D arrow was pointing in 3D space, but I think it is fairly clear now without it.

Now I just need to take my 5 screen shots.

Interaction Design, Project Two, Blog Nine

I have started creating my app in Adobe Flash. I am currently trying to learn how to use scripting in order to create buttons and such. I have uploaded what I have created so far...

I have managed to make it so when you click 'Arrown' the directional arrow after he has landed in place, he then moves in position to become the search bar.

What I am finding so confusing and difficult about Flash is all the different animation layers and such, it becomes really complicated when adding in scripting.

Interaction Design, Project Two, Blog Eight

Below is a wireframe diagram of my navigation app. My app is going to focus around the character Arrown who will direct users.

Interaction Design, Project Two, Blog Seven

I am currently looking at having my arrow as a character who talks to the user giving them verbal instructions on how to use the app and how to get to the users destination.

'Arrown'

I would give the user the option to look at the map by selecting it if they wish to view to get an overview of where they are going. Also they can select the music option, which when enabled plays the users music quietly when the user is head in the wrong direction and louder the more on track they are.

'Arrown' would still point in out the way if the user wishes to follow that way, or they can just listen.

Alternatively or along side the music option, the arrow will flash red more frequently the more the user is off track, or green if the user is on track

Interaction Design, Project Two, Blog Six

For this project I have been wanting to create something fairly simple, as I think for this app that is what is ultimately required, as generally most people using this app will only need to use this at the beginning of each semester mainly in first year when they don't know their way around the campus. Thus in terms on the navigation element they need something really simple and easy to use due to its most likely limited use.

 

Going with this idea I have again simplified my idea down, taking the idea of a watch or ring pointing the way which we used in a collaborative idea disscusion last class. Except instead of having an external object it would just be an animated arrow on the app which points where you need to go, step by step. For my design concept I am thinkinh of just using an arrow for everything, as it is a simple symbol which we associate with direction.

 

I created the images below in Flash as a possible interface.

The top arrow is all that would appear on screen. It has a possible app name on it. Then once the user presses the arrow it extends into the arrow below the top one. In this arrow you then type the room number or place name. The tip of the arrow would then indicate for you to press it once the room number is entered, then the arrow would move and point in the direction you need to head.

Here are four different instances of the directional arrow. The arrow would turn red when the user is heading in the wrong direction.

If the screen is is touched in directional mode, a side menu will appear as shown in the image above. So far I have thought of three features being conditions, audio and actual map. In terms of audio, I think the app will rely more heavily on the audio than the actual arrow, but I think both are necessary in covering up boths possible limitations.

This is a possible look of the conditions feature. The green panel it's presented on would appear as an arrow.

In terms of the apps visual design, I would like the arrows to move in with fluid movements when transitioning between screens. I want this as I find this makes virtual interfaces much more awesome. For example I think minimising applications on MacOSX is very successful when the windows condense down into the bottom of the screen.

Another idea I would like to include from the collaborative app we came up with in class is the idea of a game. For this current arrow idea I think it could be a great feature if you were able to shake your smart phone and the directional arrow turned into a arrow like snake which you could play the game Snake with, just like the loading animation on Youtube.

Interaction Design, Project Two, Blog Five

With my current idea for my navigation system I have been looking at create something like Google Maps except for indoors. When looking at limitations it was pointed out in class today that Google Maps is updated regularly, so when there is roadworks or construction, Google Maps wont show this. This would be the same as at the Kelburn campus there is currently construction work going on which means the current route someone may have to take may be different to the way they would usually go, thus I think it would be a good idea if my navigation system updated regularly adjusting to different conditions limiting routes.

In class today we also came up with a collaborative idea on a navigation system. We came up with a system made of multiple elements. The main part is an app for smart phones which you enter in your route for and are given the time it takes and general information like that. It is also capable of telling you what clothes to wear as I suggested in a previous post. The app also had a game element as a fun alternative of learning your way around the campus, this would be like pinball and you have to get the ball to your destination (virtually). The game would also include notable land marks to aid recognition. Then for actual navigation a ring or watch is used which uses information from the phone via bluetooth which would have a needle which would point you in the right direction like a compass, but on a door to door basis type thing.

I think one thing that would be worth taking from this brainstorm would be the game idea, I think making it fun on top of functional would make for a very good app.

Interaction Design, Project Two, Blog Four

I have been looking at specifically at what features I think would be beneficial. Firstly as I have previously mentioned I think spoken directions would be useful so you can just put headphones in and don't have to look at your phone. Secondly I think being able to connect with others is very important and perhaps something other GPS systems don't do. I think it would be useful if you could locate where others currently are and be able to send meeting locations to friends, and see how far away you are from each other. This would be particularly useful when you are waiting to meet with someone, the app would be able to calculate exactly how far away your friend is, instead of relying on their 5min guestimate.

The feature that I think would be particularly ideal would be a weather-clothing feature. This feature would tell you what clothes would be comfortable to wear to get to and from your destination based on what weather conditions you will be exposed to, how far you are walking and also the terrain you will be walking on. I have found that using sights like metservice, it may tell you how many layers to wear but it does accommodate for how much you'll heat up from walking etc. Additionally if clothing manufactures were able to upload information about their clothing for this app, such as what temperatures to wear it in, flexibility, durability, formality, water resistance etc... The user could then search and select which items of clothing they have, then depending on where they had to got the app would suggest exactly what to wear.

Interaction Design, Project Two, Blog Three

Below I have made a rough sketch of a possible interface for my app. 

Since it is going to be designed for a smart phone I want to have as little buttons as possible. Currently I am looking at the app having three different options; voice, map and photographic view (like Google Street View).

For any of the buttons that do pop up I think I would have an arrow which you can press to hide it. This may be necessary as smart phone screens generally aren't that large.

Interaction Design, Project Two, Blog Two

For Project Two I have been looking at what navigation visual I could use. I have looked at Google Maps for ideas.

I think something like this street view could be useful except having each building labeled with floor numbers. I also think this idea could work for inside the building, so the user can either revise the path before hand or match it as they go.

An satellite or aerial shot of each floor could also be useful for the user to get an overall idea on where they are going. Also being able to connect to security cameras inside the campus could help to see how many people are there, particularly in class to see whether it's worth going.

As Google does it could be useful to have a map version also.

I think my main guide will be an interior version of Google street view.

Interaction Design, Project Two, Blog One

To start off project two we had to make maps in groups and then test how well they worked. In doing this I found that recognisable symbols are really effective, as when using the map I was given I found I was able to identify where it was leading me, however some weren't explicit enough. I also found that as soon as I saw a symbol I thought I recognised I did not bother to really look at it much more as I just assumed what it meant and this lead me to becoming lost.

So for my project I think I will make a smart phone app. I think this is the best option as practically people won't want to have to carry around another device, and a phone is something most people already have and is generally in most peoples hands. I am also thinking of doing something that involves voice like a GPS. If the user had headphones it would seem as if they were just listening to music not directions thus the person would never seem like they don't know where they are going which is what I think I would want as you don't want to let on that you don't know where your going amoungst strangers.

Interaction Design, Project One, Blog Ten

Project One Complete!

Below is a brief description on my experiment and how you use it. I have also included by 8 images giving step by step visual instructions on how to use it, plus closeup details.

'The Hand Stabber' explores the senses touch and sight by testing the users ability in determining where something is expected to touch by seeing it, and where something actually touches by feeling it. This experiment has looked at trying to trick the user into expecting a touch in one position of the hand but getting it in another, it also tests whether the user can determine where they were actually touched. The user wont ultimately get a pleasant experience, but more of a surprising experience if 'The Hand Stabber' is used correctly.

Instructions:

1. Insert hand into the front hole putting it in as far as you can, keeping it flat to 'The Hand Stabber' interior floor/platform.
2. Insert the piece of wire provided into the hole at the top of 'The Hand Stabber' slightly then poke/stab it down towards your hand keeping completely vertical(this step can either be performed by the user or a fellow assistant)
3. Remove hand and wire from 'The Hand Stabber', the experience is now complete